编辑页面

页面标题

有效期修改后将从当前时间重新计算过期时间

CSS文件（可选）

/* 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: #f5f5f5;
    color: #333;
    line-height: 1.5;
}

/* 手机容器 */
.phone-container {
    width: 375px;
    height: 812px;
    margin: 20px auto;
    background: #f5f5f5;
    position: relative;
    overflow: hidden;
    border-radius: 40px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
}

/* 页面容器 */
.page-container {
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* 页面通用 */
.page {
    display: none;
    height: 100%;
    overflow-y: auto;
    background: #f5f5f5;
    padding-bottom: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 60px;
}

.page.active {
    display: block;
}

/* 隐藏滚动条但保持滚动功能 */
.page::-webkit-scrollbar {
    display: none;
}

.page {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 首页样式 */
.home-header {
    padding: 12px 16px;
    background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
    color: #fff;
}

.location-row {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}

.location-icon {
    font-size: 12px;
}

.location-text {
    flex: 1;
    font-weight: 500;
}

.delivery-time {
    font-size: 12px;
    opacity: 0.9;
}

.delivery-time .highlight {
    font-weight: bold;
    font-size: 14px;
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 16px;
    padding: 10px 16px;
    background: #fff;
    border-radius: 20px;
    font-size: 14px;
    color: #999;
}

.search-icon {
    font-size: 16px;
}

/* 轮播图 */
.banner-carousel {
    margin: 0 16px 16px;
    border-radius: 12px;
    overflow: hidden;
    height: 160px;
}

.banner-item {
    height: 160px;
    padding: 20px;
    display: flex;
    align-items: center;
}

.banner-1 {
    background: linear-gradient(135deg, #FFE4E1, #FFF0F5);
}

.banner-content {
    flex: 1;
}

.banner-tag {
    display: inline-block;
    padding: 4px 10px;
    background: #FF6B6B;
    color: #fff;
    border-radius: 12px;
    font-size: 12px;
    margin-bottom: 8px;
}

.banner-content h2 {
    font-size: 20px;
    margin-bottom: 4px;
}

.banner-content p {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}

.banner-btn {
    display: inline-block;
    padding: 8px 20px;
    background: #FF6B6B;
    color: #fff;
    border-radius: 16px;
    font-size: 13px;
}

.banner-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.dot {
    width: 8px;
    height: 8px;
    background: #ddd;
    border-radius: 50%;
}

.dot.active {
    background: #FF6B6B;
    width: 20px;
    border-radius: 4px;
}

/* 快捷分类 */
.quick-categories {
    display: flex;
    flex-wrap: wrap;
    padding: 0 12px;
    margin-bottom: 16px;
}

.category-item {
    width: 16.66%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.cat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 6px;
}

.category-item span {
    font-size: 12px;
    color: #666;
}

/* 活动卡片 */
.promo-section {
    display: flex;
    gap: 12px;
    padding: 0 16px;
    margin-bottom: 20px;
}

.promo-card {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}

.promo-left {
    background: linear-gradient(135deg, #FFB3B3, #FFD1D1);
}

.promo-right {
    background: linear-gradient(135deg, #B3E5FC, #D1E8FF);
}

.promo-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 4px;
}

.promo-desc {
    font-size: 12px;
    color: #666;
}

.promo-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 6px;
    background: rgba(255,255,255,0.8);
    border-radius: 8px;
    font-size: 10px;
    color: #FF6B6B;
}

/* 区块标题 */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    margin-bottom: 12px;
}

.section-header h3 {
    font-size: 16px;
}

.more-link {
    font-size: 13px;
    color: #999;
}

/* 产品网格 */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 16px;
}

.product-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.product-image {
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-emoji {
    font-size: 60px;
}

.product-info {
    padding: 10px;
}

.product-info h4 {
    font-size: 14px;
    margin-bottom: 4px;
}

.product-desc {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
}

.product-price {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.price-current {
    font-size: 16px;
    font-weight: bold;
    color: #FF6B6B;
}

.price-original {
    font-size: 12px;
    color: #ccc;
    text-decoration: line-through;
}

.product-tags {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.product-tags span {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
}

.tag-hot {
    background: #FFEBEB;
    color: #FF6B6B;
}

.tag-new {
    background: #E8F5E9;
    color: #4CAF50;
}

.tag-sale {
    background: #FFF3E0;
    color: #FF9800;
}

/* 页面头部 */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 10;
}

.page-header h2 {
    font-size: 17px;
    font-weight: 600;
}

.back-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
}

.header-right {
    font-size: 14px;
    color: #FF6B6B;
    cursor: pointer;
}

/* 分类页 */
.category-tabs {
    display: flex;
    padding: 0 16px;
    gap: 20px;
    background: #fff;
    overflow-x: auto;
}

.category-tabs::-webkit-scrollbar {
    display: none;
}

.tab {
    padding: 12px 0;
    font-size: 15px;
    color: #666;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.tab.active {
    color: #FF6B6B;
    border-bottom-color: #FF6B6B;
}

.category-banner {
    margin: 12px 16px;
    padding: 20px;
    background: linear-gradient(135deg, #FFE4E1, #FFF0F5);
    border-radius: 12px;
}

.cat-banner-content h3 {
    font-size: 18px;
    margin-bottom: 4px;
}

.cat-banner-content p {
    font-size: 13px;
    color: #666;
}

/* 筛选栏 */
.filter-bar {
    display: flex;
    padding: 12px 16px;
    gap: 20px;
    background: #fff;
    margin-bottom: 12px;
}

.filter-item {
    font-size: 14px;
    color: #666;
    cursor: pointer;
}

.filter-item.active {
    color: #FF6B6B;
    font-weight: 600;
}

/* 商品列表 */
.category-products {
    padding: 0 16px;
}

.product-list-item {
    display: flex;
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 12px;
    cursor: pointer;
}

.list-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.list-image .product-emoji {
    font-size: 40px;
}

.list-info {
    flex: 1;
}

.list-info h4 {
    font-size: 15px;
    margin-bottom: 4px;
}

.list-info p {
    font-size: 12px;
    color: #999;
    margin-bottom: 6px;
}

.list-price {
    font-size: 16px;
    font-weight: bold;
    color: #FF6B6B;
}

.list-price .original {
    font-size: 12px;
    color: #ccc;
    text-decoration: line-through;
    font-weight: normal;
    margin-left: 6px;
}

.list-tags {
    display: flex;
    gap: 4px;
    margin-top: 4px;
}

.list-tags span {
    padding: 2px 6px;
    background: #FFEBEB;
    color: #FF6B6B;
    border-radius: 4px;
    font-size: 10px;
}

.add-cart-btn {
    width: 28px;
    height: 28px;
    background: #FF6B6B;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    align-self: flex-end;
    cursor: pointer;
}

/* 商品详情页 */
.detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255,255,255,0.95);
}

.header-actions {
    font-size: 14px;
    color: #666;
}

.detail-image {
    height: 280px;
    background: linear-gradient(135deg, #FFE4E1, #FFF0F5);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.detail-product-icon {
    font-size: 120px;
}

.detail-badges {
    position: absolute;
    bottom: 16px;
    left: 16px;
}

.badge-hot {
    padding: 6px 12px;
    background: #FF6B6B;
    color: #fff;
    border-radius: 12px;
    font-size: 12px;
}

.detail-content {
    padding: 16px;
    background: #fff;
}

.detail-price-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}

.detail-price {
    font-size: 28px;
    font-weight: bold;
    color: #FF6B6B;
}

.detail-original {
    font-size: 14px;
    color: #ccc;
    text-decoration: line-through;
}

.detail-sales {
    font-size: 12px;
    color: #999;
    margin-left: auto;
}

.detail-title {
    font-size: 18px;
    margin-bottom: 8px;
}

.detail-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.promotion-bar {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
    margin-top: 12px;
    cursor: pointer;
}

.promo-label {
    padding: 2px 8px;
    background: #FF6B6B;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    margin-right: 10px;
}

.promo-text {
    flex: 1;
    font-size: 13px;
    color: #666;
}

.promotion-bar .arrow {
    font-size: 14px;
    color: #ccc;
}

.spec-row, .delivery-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    cursor: pointer;
}

.spec-label {
    font-size: 14px;
    color: #999;
    width: 56px;
}

.spec-value {
    flex: 1;
    font-size: 14px;
}

.spec-arrow, .promotion-bar .arrow {
    font-size: 14px;
    color: #ccc;
}

.delivery-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.delivery-time-text {
    font-size: 14px;
}

.delivery-fee {
    font-size: 12px;
    color: #4CAF50;
}

/* 评价区块 */
.detail-section {
    padding: 16px;
    background: #fff;
    margin-top: 12px;
}

.detail-section h3 {
    font-size: 16px;
    margin-bottom: 12px;
}

.review-item {
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}

.review-user {
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}

.review-content {
    font-size: 14px;
    line-height: 1.6;
}

.review-time {
    font-size: 12px;
    color: #ccc;
    margin-top: 6px;
}

/* 详情图 */
.detail-images {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-img-placeholder {
    height: 150px;
    background: linear-gradient(135deg, #f0f0f0, #e0e0e0);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ccc;
    font-size: 14px;
}

/* 详情页底部 */
.detail-bottom-bar {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 375px;
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 100;
}

.bottom-icons {
    display: flex;
    gap: 20px;
    margin-right: 16px;
}

.bottom-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.bottom-icon-item span:first-child {
    font-size: 20px;
}

.bottom-icon-item span:last-child {
    font-size: 10px;
    color: #666;
}

.cart-badge {
    position: absolute;
    top: -4px;
    right: -8px;
    min-width: 16px;
    height: 16px;
    background: #FF6B6B;
    color: #fff;
    border-radius: 8px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.bottom-btns {
    flex: 1;
    display: flex;
    gap: 8px;
}

.btn-add-cart {
    flex: 1;
    padding: 12px;
    background: linear-gradient(135deg, #FFB3B3, #FFD1D1);
    color: #FF6B6B;
    border-radius: 20px;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
}

.btn-buy-now {
    flex: 1;
    padding: 12px;
    background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
    color: #fff;
    border-radius: 20px;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
}

/* 购物车页 */
.cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
}

.empty-icon {
    font-size: 80px;
    margin-bottom: 20px;
}

.cart-empty h3 {
    font-size: 18px;
    margin-bottom: 8px;
}

.cart-empty p {
    font-size: 14px;
    color: #999;
    margin-bottom: 24px;
}

.empty-btn {
    padding: 12px 32px;
    background: #FF6B6B;
    color: #fff;
    border-radius: 20px;
    cursor: pointer;
}

.cart-store {
    background: #fff;
    margin: 0 16px 12px;
    border-radius: 12px;
    overflow: hidden;
}

.store-header {
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
}

.store-name {
    font-size: 14px;
    font-weight: 600;
}

.cart-item {
    display: flex;
    padding: 12px 16px;
    align-items: center;
    border-bottom: 1px solid #f5f5f5;
}

.cart-item:last-child {
    border-bottom: none;
}

.cart-check {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    margin-right: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-check.checked {
    background: #FF6B6B;
    border-color: #FF6B6B;
    color: #fff;
    font-size: 12px;
}

.cart-item-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.cart-item-image .product-emoji {
    font-size: 30px;
}

.cart-item-info {
    flex: 1;
}

.cart-item-info h4 {
    font-size: 14px;
    margin-bottom: 4px;
}

.cart-item-info p {
    font-size: 12px;
    color: #999;
}

.cart-item-price {
    text-align: right;
    margin-right: 12px;
}

.cart-item-price .price {
    font-size: 15px;
    font-weight: bold;
    color: #FF6B6B;
}

.cart-item-price .original {
    font-size: 11px;
    color: #ccc;
    text-decoration: line-through;
}

.cart-num {
    display: flex;
    align-items: center;
}

.cart-num span {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
}

.cart-num .num {
    width: 36px;
    text-align: center;
    font-size: 14px;
}

/* 促销信息 */
.promotion-section {
    background: #fff;
    margin: 0 16px 12px;
    border-radius: 12px;
    overflow: hidden;
}

.promotion-row {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
}

.promotion-row:first-child {
    border-bottom: 1px solid #f5f5f5;
}

.promo-icon {
    font-size: 16px;
    margin-right: 10px;
}

.promo-title {
    font-size: 14px;
}

.promo-amount, .promo-status {
    flex: 1;
    text-align: right;
    font-size: 13px;
    color: #FF6B6B;
}

.promotion-row .arrow {
    margin-left: 8px;
    color: #ccc;
}

/* 购物车汇总 */
.cart-summary {
    background: #fff;
    margin: 0 16px 12px;
    border-radius: 12px;
    padding: 16px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.free-shipping {
    color: #4CAF50;
}

.discount-amount {
    color: #FF6B6B;
}

.summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    font-weight: bold;
    padding-top: 10px;
    border-top: 1px solid #f5f5f5;
}

.total-price {
    color: #FF6B6B;
    font-size: 20px;
}

/* 购物车底部 */
.cart-bottom-bar {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 375px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 100;
}

.total-info {
    display: flex;
    align-items: baseline;
}

.total-label {
    font-size: 14px;
    color: #666;
}

.total-amount {
    font-size: 20px;
    font-weight: bold;
    color: #FF6B6B;
}

.checkout-btn {
    padding: 12px 32px;
    background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
    color: #fff;
    border-radius: 20px;
    font-size: 15px;
    cursor: pointer;
}

/* 结算页 */
.checkout-content {
    padding-bottom: 80px;
}

.address-section {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 16px;
    margin-bottom: 12px;
    cursor: pointer;
}

.address-icon {
    font-size: 24px;
    margin-right: 12px;
}

.address-info {
    flex: 1;
}

.address-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.default-tag {
    display: inline-block;
    padding: 2px 6px;
    background: #FF6B6B;
    color: #fff;
    border-radius: 4px;
    font-size: 10px;
    margin-left: 8px;
}

.address-phone {
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
}

.address-detail {
    font-size: 13px;
    color: #999;
}

.address-section .arrow {
    font-size: 18px;
    color: #ccc;
}

/* 送达时间 */
.delivery-time-section {
    background: #fff;
    padding: 16px;
    margin-bottom: 12px;
}

.section-label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 12px;
}

.time-options {
    display: flex;
    gap: 10px;
}

.time-option {
    flex: 1;
    padding: 12px;
    border: 2px solid #f5f5f5;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
}

.time-option.selected {
    border-color: #FF6B6B;
    background: #FFEBEB;
}

.time-value {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.time-price {
    font-size: 12px;
    color: #666;
}

/* 贺卡留言 */
.gift-section {
    background: #fff;
    padding: 16px;
    margin-bottom: 12px;
}

.gift-message {
    width: 100%;
    height: 80px;
    border: 1px solid #f5f5f5;
    border-radius: 8px;
    padding: 12px;
    font-size: 14px;
    resize: none;
    font-family: inherit;
}

/* 订单商品 */
.order-items {
    background: #fff;
    padding: 16px;
    margin-bottom: 12px;
}

.checkout-product {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}

.checkout-product:last-child {
    border-bottom: none;
}

.checkout-img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.checkout-img .product-emoji {
    font-size: 30px;
}

.checkout-detail {
    flex: 1;
}

.checkout-detail h4 {
    font-size: 14px;
    margin-bottom: 4px;
}

.checkout-detail p {
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.checkout-price {
    font-size: 15px;
    font-weight: bold;
    color: #FF6B6B;
}

/* 支付方式 */
.payment-section {
    background: #fff;
    padding: 16px;
    margin-bottom: 12px;
}

.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.payment-method {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 1px solid #f5f5f5;
    border-radius: 8px;
    cursor: pointer;
}

.payment-method.selected {
    border-color: #FF6B6B;
    background: #FFEBEB;
}

.payment-icon {
    font-size: 20px;
    margin-right: 10px;
}

.payment-method span:nth-child(2) {
    flex: 1;
    font-size: 14px;
}

.check-icon {
    color: #FF6B6B;
    font-size: 16px;
}

/* 结算页优惠券提示 */
.coupon-use-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 14px 16px;
    cursor: pointer;
}

.coupon-tip {
    color: #FF6B6B;
    font-size: 13px;
}

/* 结算页底部 */
.checkout-bottom-bar {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 375px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 100;
}

.final-info {
    display: flex;
    align-items: baseline;
}

.final-label {
    font-size: 14px;
    color: #666;
}

.final-price {
    font-size: 22px;
    font-weight: bold;
    color: #FF6B6B;
}

.submit-order {
    padding: 14px 40px;
    background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
    color: #fff;
    border-radius: 22px;
    font-size: 16px;
    cursor: pointer;
}

/* 个人中心 */
.profile-header {
    background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
    padding: 20px 16px 40px;
    color: #fff;
}

.profile-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
}

.profile-info {
    display: flex;
    align-items: center;
    position: relative;
}

.avatar {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-right: 16px;
}

.profile-detail {
    flex: 1;
}

.profile-name {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 4px;
}

.profile-level {
    font-size: 13px;
    opacity: 0.9;
}

.profile-edit {
    font-size: 13px;
    padding: 6px 12px;
    background: rgba(255,255,255,0.2);
    border-radius: 12px;
    cursor: pointer;
}

/* 统计区 */
.profile-stats {
    display: flex;
    background: #fff;
    margin: -24px 16px 12px;
    border-radius: 12px;
    padding: 16px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.stat-item {
    flex: 1;
    text-align: center;
    cursor: pointer;
}

.stat-num {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 4px;
}

.stat-label {
    font-size: 12px;
    color: #666;
}

/* 菜单区块 */
.profile-section {
    background: #fff;
    margin: 0 16px 12px;
    border-radius: 12px;
    overflow: hidden;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
}

.menu-item:not(:last-child) {
    border-bottom: 1px solid #f5f5f5;
}

.menu-icon {
    font-size: 18px;
    margin-right: 12px;
}

.menu-text {
    flex: 1;
    font-size: 15px;
}

.menu-badge {
    font-size: 12px;
    color: #FF6B6B;
    margin-right: 8px;
}

.menu-arrow {
    color: #ccc;
    font-size: 14px;
}

/* VIP横幅 */
.vip-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 16px;
    padding: 16px;
    background: linear-gradient(135deg, #2C2C2C, #3D3D3D);
    border-radius: 12px;
    color: #fff;
}

.vip-content {
    flex: 1;
}

.vip-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.vip-desc {
    font-size: 12px;
    opacity: 0.8;
}

.vip-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #333;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* 优惠券页 */
.coupon-tabs {
    display: flex;
    background: #fff;
    padding: 0 16px;
}

.coupon-tab {
    flex: 1;
    padding: 14px 0;
    text-align: center;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.coupon-tab.active {
    color: #FF6B6B;
    border-bottom-color: #FF6B6B;
}

/* 优惠券列表 */
.coupon-list {
    padding: 16px;
}

.coupon-card {
    display: flex;
    background: #fff;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
    cursor: pointer;
}

.coupon-left {
    width: 100px;
    padding: 16px;
    background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
    color: #fff;
    text-align: center;
}

.coupon-value {
    font-size: 28px;
    font-weight: bold;
}

.coupon-condition {
    font-size: 12px;
    opacity: 0.9;
}

.coupon-right {
    flex: 1;
    padding: 16px;
}

.coupon-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.coupon-time {
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.coupon-desc {
    font-size: 12px;
    color: #666;
}

.coupon-use-btn {
    padding: 8px 12px;
    background: #FF6B6B;
    color: #fff;
    border-radius: 16px;
    font-size: 12px;
    align-self: center;
    margin-right: 16px;
}

.coupon-card.used .coupon-left,
.coupon-card.expired .coupon-left {
    background: #ccc;
}

.coupon-card.used .coupon-use-btn,
.coupon-card.expired .coupon-use-btn {
    display: none;
}

/* 订单页 */
.order-tabs {
    display: flex;
    background: #fff;
    padding: 0 16px;
}

.order-tab {
    flex: 1;
    padding: 14px 0;
    text-align: center;
    font-size: 14px;
    color: #666;
    cursor: pointer;
}

.order-tab.active {
    color: #FF6B6B;
    font-weight: 600;
}

/* 订单列表 */
.order-list {
    padding: 16px;
}

.order-card {
    background: #fff;
    border-radius: 12px;
    margin-bottom: 12px;
    overflow: hidden;
}

.order-header {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #f5f5f5;
}

.order-store {
    font-size: 14px;
    font-weight: 600;
}

.order-status {
    font-size: 13px;
    color: #FF6B6B;
}

/* 配送进度 */
.delivery-progress {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #FFF9F9;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ddd;
    margin-bottom: 4px;
}

.progress-step.completed .step-dot {
    background: #FF6B6B;
}

.step-text {
    font-size: 11px;
    color: #999;
}

.progress-step.completed .step-text {
    color: #FF6B6B;
}

.progress-line {
    flex: 1;
    height: 2px;
    background: #ddd;
    margin: 0 4px;
}

.progress-line.completed {
    background: #FF6B6B;
}

/* 订单预览 */
.order-items-preview {
    padding: 12px 16px;
}

.order-product {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.order-product:last-child {
    margin-bottom: 0;
}

.order-img {
    width: 50px;
    height: 50px;
    background: #f5f5f5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 12px;
}

.order-info {
    flex: 1;
}

.order-name {
    font-size: 14px;
    margin-bottom: 4px;
}

.order-price {
    font-size: 13px;
    color: #666;
}

.order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid #f5f5f5;
}

.order-total {
    font-size: 13px;
    color: #666;
}

.order-total strong {
    color: #333;
    font-size: 15px;
}

.order-actions {
    display: flex;
    gap: 10px;
}

.action-btn {
    padding: 8px 16px;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
}

.action-btn.primary {
    background: #FF6B6B;
    color: #fff;
}

.action-btn.secondary {
    border: 1px solid #ddd;
    color: #666;
}

/* 订单详情页 */
.order-detail-content {
    padding-bottom: 80px;
}

.order-status-bar {
    display: flex;
    align-items: center;
    padding: 20px 16px;
    background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
    color: #fff;
}

.status-icon {
    font-size: 40px;
    margin-right: 16px;
}

.status-info {
    flex: 1;
}

.status-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 4px;
}

.status-desc {
    font-size: 13px;
    opacity: 0.9;
}

/* 骑手信息 */
.delivery-info-card {
    background: #fff;
    margin: 12px 16px;
    padding: 16px;
    border-radius: 12px;
}

.rider-info {
    display: flex;
    align-items: center;
}

.rider-avatar {
    width: 48px;
    height: 48px;
    background: #f5f5f5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-right: 12px;
}

.rider-detail {
    flex: 1;
}

.rider-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.rider-phone {
    font-size: 13px;
    color: #666;
}

.call-btn {
    padding: 8px 16px;
    background: #4CAF50;
    color: #fff;
    border-radius: 16px;
    font-size: 13px;
    cursor: pointer;
}

/* 地址卡片 */
.address-card {
    display: flex;
    background: #fff;
    margin: 0 16px 12px;
    padding: 16px;
    border-radius: 12px;
}

.address-card .address-icon {
    margin-right: 12px;
}

.address-card .address-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 4px;
}

.address-card .address-phone {
    font-size: 13px;
    color: #666;
    margin-bottom: 4px;
}

.address-card .address-text {
    font-size: 13px;
    color: #999;
}

/* 订单信息卡片 */
.order-info-card, .order-products-card, .order-summary-card {
    background: #fff;
    margin: 0 16px 12px;
    padding: 16px;
    border-radius: 12px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
}

.info-label {
    color: #999;
}

.info-value {
    color: #333;
}

/* 商品项 */
.product-item {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
}

.product-item:last-child {
    border-bottom: none;
}

.product-img {
    width: 60px;
    height: 60px;
    background: #f5f5f5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.product-img .product-emoji {
    font-size: 30px;
}

.product-detail {
    flex: 1;
}

.product-detail .product-name {
    font-size: 14px;
    margin-bottom: 4px;
}

.product-detail .product-spec {
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
}

.product-detail .product-price {
    font-size: 14px;
    color: #FF6B6B;
}

/* 汇总 */
.summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 8px 0;
}

.summary-row .free {
    color: #4CAF50;
}

.summary-row .discount {
    color: #FF6B6B;
}

.summary-row.total {
    border-top: 1px solid #f5f5f5;
    padding-top: 12px;
    font-weight: 600;
}

.summary-row.total .amount {
    font-size: 18px;
    color: #FF6B6B;
}

/* 订单详情底部 */
.order-detail-bottom {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 375px;
    background: #fff;
    padding: 12px 16px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 100;
}

.action-group {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* 搜索页 */
.search-input-container {
    flex: 1;
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 20px;
    padding: 8px 16px;
}

.search-icon-small {
    margin-right: 8px;
}

.search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    outline: none;
}

.cancel-btn {
    margin-left: 12px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
}

/* 搜索内容 */
.search-content {
    padding: 16px;
}

.search-section {
    margin-bottom: 24px;
}

.search-section h4 {
    font-size: 14px;
    color: #666;
    margin-bottom: 12px;
}

.search-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.search-tags .tag {
    padding: 8px 16px;
    background: #fff;
    border-radius: 16px;
    font-size: 13px;
}

.history-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.history-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    cursor: pointer;
}

.history-icon {
    color: #ccc;
}

/* 订单成功页 */
.success-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px;
    text-align: center;
}

.success-icon {
    width: 80px;
    height: 80px;
    background: #4CAF50;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    margin-bottom: 24px;
}

.success-content h2 {
    font-size: 22px;
    margin-bottom: 8px;
}

.success-content p {
    font-size: 14px;
    color: #666;
    margin-bottom: 32px;
}

.order-info-box {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    width: 100%;
    margin-bottom: 32px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
}

.info-item .label {
    color: #666;
}

.info-item .value {
    font-weight: 600;
}

.success-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-primary {
    padding: 14px;
    background: #FF6B6B;
    color: #fff;
    border-radius: 22px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}

.btn-secondary {
    padding: 14px;
    border: 1px solid #FF6B6B;
    color: #FF6B6B;
    border-radius: 22px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}

/* 地址列表 */
.address-list {
    padding: 16px;
}

.address-item {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
}

.address-main {
    margin-bottom: 12px;
}

.address-main .address-user {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.address-main .address-tel {
    font-size: 14px;
    color: #666;
    margin-bottom: 4px;
}

.address-main .address-detail {
    font-size: 13px;
    color: #999;
}

.address-actions {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: #666;
    border-top: 1px solid #f5f5f5;
    padding-top: 12px;
}

.set-default {
    color: #FF6B6B;
}

/* 地址编辑 */
.form-content {
    padding: 16px;
}

.form-item {
    margin-bottom: 20px;
}

.form-item label {
    display: block;
    font-size: 14px;
    color: #666;
    margin-bottom: 8px;
}

.form-item input, .form-item textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
}

.form-item textarea {
    height: 100px;
    resize: none;
}

.area-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f5f5f5;
    border-radius: 8px;
    font-size: 14px;
}

.set-default {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.switch {
    width: 48px;
    height: 28px;
    background: #ccc;
    border-radius: 14px;
    padding: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.switch.active {
    background: #FF6B6B;
}

.switch-circle {
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}

.switch.active .switch-circle {
    transform: translateX(20px);
}

.form-btn {
    width: 100%;
    padding: 14px;
    background: #FF6B6B;
    color: #fff;
    border-radius: 22px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    margin-top: 20px;
}

/* 收藏页 */
.favorites-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px;
}

.fav-item {
    background: #fff;
    border-radius: 12px;
    padding: 12px;
    position: relative;
    cursor: pointer;
}

.fav-img {
    height: 120px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.fav-img .product-emoji {
    font-size: 50px;
}

.fav-name {
    font-size: 14px;
    margin-bottom: 4px;
}

.fav-price {
    font-size: 15px;
    color: #FF6B6B;
    font-weight: bold;
}

.fav-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* 设置页 */
.settings-list {
    background: #fff;
    margin: 0 16px;
    border-radius: 12px;
    overflow: hidden;
}

.settings-item {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
}

.settings-item:not(:last-child) {
    border-bottom: 1px solid #f5f5f5;
}

.settings-item .item-icon {
    font-size: 18px;
    margin-right: 12px;
}

.settings-item .item-text {
    flex: 1;
    font-size: 15px;
}

.settings-item .item-arrow {
    color: #ccc;
}

.logout-btn {
    margin: 24px 16px;
    padding: 14px;
    background: #fff;
    color: #999;
    border-radius: 22px;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
}

.app-version {
    text-align: center;
    font-size: 12px;
    color: #ccc;
    margin-bottom: 20px;
}

/* 帮助中心 */
.help-content {
    padding: 16px;
}

.help-section {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.help-section h4 {
    font-size: 15px;
    margin-bottom: 12px;
}

.help-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
    cursor: pointer;
}

.help-item:last-child {
    border-bottom: none;
}

.help-item span:first-child {
    font-size: 14px;
}

.help-item .arrow {
    color: #ccc;
}

.contact-section {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
}

.contact-item {
    padding: 8px 0;
    font-size: 14px;
    color: #666;
}

.online-service {
    margin-top: 16px;
    padding: 12px;
    background: #4CAF50;
    color: #fff;
    border-radius: 20px;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
}

/* 关于我们 */
.about-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px 20px;
    text-align: center;
}

.about-logo {
    font-size: 80px;
    margin-bottom: 16px;
}

.about-content h2 {
    font-size: 24px;
    margin-bottom: 12px;
}

.about-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 32px;
}

.about-features {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
}

.feature-item {
    text-align: center;
}

.feature-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.feature-text {
    font-size: 13px;
    color: #666;
}

.about-version {
    font-size: 12px;
    color: #ccc;
}

/* 弹窗 */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    justify-content: flex-end;
    align-items: flex-end;
}

.modal.active {
    display: flex;
}

.modal-content {
    background: #fff;
    border-radius: 20px 20px 0 0;
    width: 375px;
}

.spec-modal-content {
    max-height: 60%;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #f5f5f5;
}

.modal-header h3 {
    font-size: 16px;
}

.modal-close {
    font-size: 20px;
    color: #ccc;
    cursor: pointer;
}

.modal-body {
    padding: 16px;
}

.spec-section {
    margin-bottom: 20px;
}

.spec-title {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.spec-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.spec-option {
    padding: 10px 20px;
    border: 1px solid #e0e0e0;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
}

.spec-option.selected {
    border-color: #FF6B6B;
    background: #FFEBEB;
    color: #FF6B6B;
}

.modal-footer {
    display: flex;
    align-items: center;
    padding: 16px;
    border-top: 1px solid #f5f5f5;
}

.modal-price {
    flex: 1;
}

.price-label {
    font-size: 14px;
    color: #666;
}

.price-value {
    font-size: 22px;
    font-weight: bold;
    color: #FF6B6B;
    margin-left: 8px;
}

.modal-confirm-btn {
    padding: 12px 40px;
    background: #FF6B6B;
    color: #fff;
    border-radius: 22px;
    font-size: 15px;
    cursor: pointer;
}

/* Toast */
.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 2000;
    display: none;
}

.toast.show {
    display: block;
    animation: fadeInOut 2s ease-in-out;
}

@keyframes fadeInOut {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; }
}

/* 底部导航 */
.bottom-nav {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    background: #fff;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 999;
}

.nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px 0;
    position: relative;
    cursor: pointer;
}

.nav-icon {
    font-size: 22px;
    margin-bottom: 2px;
}

.nav-text {
    font-size: 10px;
    color: #666;
}

.nav-item.active .nav-text {
    color: #FF6B6B;
}

.nav-badge {
    position: absolute;
    top: 4px;
    right: calc(50% - 14px);
    min-width: 16px;
    height: 16px;
    background: #FF6B6B;
    color: #fff;
    border-radius: 8px;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* 隐藏导航的页面 */
.page.hide-nav {
    padding-bottom: 20px;
}

.page.hide-nav .bottom-nav {
    display: none;
}

JS文件（可选）

// 页面导航历史
let pageHistory = ['home'];
let cart = [];

// 产品数据
const products = {
    1: { id: 1, name: '可口可乐330ml', emoji: '🥤', price: 3.5, original: 4, desc: '经典原味 · 冰镇更爽', badge: '🔥 爆款', color: '#DC143C' },
    2: { id: 2, name: '乐事薯片 145g', emoji: '🍟', price: 8.9, original: 12, desc: '原味薯片 · 休闲必备', badge: '特惠', color: '#FFD700' },
    3: { id: 3, name: '红富士苹果 500g', emoji: '🍎', price: 9.9, original: 12.8, desc: '新鲜当季 · 甜脆多汁', badge: '', color: '#90EE90' },
    4: { id: 4, name: '蒙牛纯牛奶 250ml', emoji: '🥛', price: 2.5, original: 3, desc: '营养早餐 · 补钙佳品', badge: '🔥 热销', color: '#87CEEB' },
    5: { id: 5, name: '土鸡蛋 12枚装', emoji: '🥚', price: 18.8, original: 25, desc: '散养土鸡 · 营养健康', badge: '特惠', color: '#FFA07A' },
    6: { id: 6, name: '阳光玫瑰 300g', emoji: '🍇', price: 29.9, original: 38, desc: '香印青提 · 甜蜜可口', badge: '新品', color: '#DDA0DD' },
    7: { id: 7, name: '农夫山泉 550ml', emoji: '🧃', price: 2, original: 2.5, desc: '天然矿泉水 · 健康饮水', badge: '热销', color: '#00CED1' },
    8: { id: 8, name: '伊利纯牛奶 250ml', emoji: '🥛', price: 2.8, original: 3.5, desc: '优质奶源 · 营养丰富', badge: '满59减10', color: '#87CEEB' },
    9: { id: 9, name: '王老吉凉茶 310ml', emoji: '🧃', price: 4.5, original: 6, desc: '清热降火 · 正宗凉茶', badge: '新品', color: '#FFE4B5' }
};

// 页面导航
function goPage(page, productId) {
    // 隐藏当前页面
    document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
    
    // 显示目标页面
    const targetPage = document.getElementById('page-' + page);
    if (targetPage) {
        targetPage.classList.add('active');
        
        // 根据页面类型决定是否显示底部导航
        const hideNavPages = ['detail', 'checkout', 'orderSuccess', 'addressEdit'];
        if (hideNavPages.includes(page)) {
            document.getElementById('bottom-nav').style.display = 'none';
            targetPage.classList.add('hide-nav');
        } else {
            document.getElementById('bottom-nav').style.display = 'flex';
            targetPage.classList.remove('hide-nav');
        }
        
        // 添加到历史记录
        pageHistory.push(page);
        
        // 如果是商品详情页，更新内容
        if (page === 'detail' && productId) {
            updateDetailPage(productId);
        }
        
        // 如果是购物车页面，更新内容
        if (page === 'cart') {
            updateCartPage();
        }
        
        // 如果是结算页面，更新内容
        if (page === 'checkout') {
            updateCheckoutPage();
        }
    }
}

// 返回上一页
function goBack() {
    if (pageHistory.length > 1) {
        pageHistory.pop();
        const prevPage = pageHistory[pageHistory.length - 1];
        
        document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
        document.getElementById('page-' + prevPage).classList.add('active');
        
        // 恢复底部导航显示
        const hideNavPages = ['detail', 'checkout', 'orderSuccess', 'addressEdit'];
        if (hideNavPages.includes(prevPage)) {
            document.getElementById('bottom-nav').style.display = 'none';
        } else {
            document.getElementById('bottom-nav').style.display = 'flex';
        }
    }
}

// 更新商品详情页
function updateDetailPage(productId) {
    const product = products[productId];
    if (product) {
        document.getElementById('detail-icon').textContent = product.emoji;
        document.getElementById('detail-price').textContent = '¥' + product.price;
        document.getElementById('detail-original').textContent = '¥' + product.original;
        document.getElementById('detail-title').textContent = product.name;
        document.getElementById('detail-desc').textContent = product.desc + '，日常所需，随时补给。';
        
        const badgeContainer = document.querySelector('.detail-badges');
        if (product.badge) {
            badgeContainer.innerHTML = `<span class="badge-hot">${product.badge}</span>`;
        } else {
            badgeContainer.innerHTML = '';
        }
        
        // 更新商品图片背景
        const detailImage = document.querySelector('.detail-image');
        detailImage.style.background = `linear-gradient(135deg, ${product.color}, white)`;
    }
}

// 添加到购物车
function addToCart(productId) {
    const existingItem = cart.find(item => item.id === productId);
    if (existingItem) {
        existingItem.num++;
    } else {
        cart.push({ ...products[productId], num: 1 });
    }
    updateCartBadge();
    showToast('已添加到购物车');
}

// 从详情页添加
function addToCartFromDetail() {
    const title = document.getElementById('detail-title').textContent;
    const productId = Object.keys(products).find(id => products[id].name === title);
    if (productId) {
        addToCart(parseInt(productId));
    }
}

// 立即购买
function buyNow() {
    const title = document.getElementById('detail-title').textContent;
    const productId = Object.keys(products).find(id => products[id].name === title);
    if (productId) {
        addToCart(parseInt(productId));
        goPage('checkout');
    }
}

// 更新购物车徽章
function updateCartBadge() {
    const totalNum = cart.reduce((sum, item) => sum + item.num, 0);
    document.getElementById('cart-badge').textContent = totalNum;
    document.getElementById('nav-cart-badge').textContent = totalNum;
}

// 更新购物车页面
function updateCartPage() {
    const emptyEl = document.getElementById('cart-empty');
    const contentEl = document.getElementById('cart-content');
    const bottomBar = document.getElementById('cart-bottom-bar');
    
    if (cart.length === 0) {
        emptyEl.style.display = 'flex';
        contentEl.style.display = 'none';
        bottomBar.style.display = 'none';
    } else {
        emptyEl.style.display = 'none';
        contentEl.style.display = 'block';
        bottomBar.style.display = 'flex';
        
        // 渲染购物车商品
        const cartItems = document.getElementById('cart-items');
        cartItems.innerHTML = cart.map((item, index) => `
            <div class="cart-item">
                <div class="cart-check checked" onclick="toggleCartCheck(${index})">✓</div>
                <div class="cart-item-image" style="background: ${item.color}">
                    <span class="product-emoji">${item.emoji}</span>
                </div>
                <div class="cart-item-info">
                    <h4>${item.name}</h4>
                    <p>${item.desc}</p>
                </div>
                <div class="cart-item-price">
                    <div class="price">¥${item.price}</div>
                    <div class="original">¥${item.original}</div>
                </div>
                <div class="cart-num">
                    <span onclick="changeNum(${index}, -1)">-</span>
                    <span class="num">${item.num}</span>
                    <span onclick="changeNum(${index}, 1)">+</span>
                </div>
            </div>
        `).join('');
        
        // 更新汇总
        updateCartSummary();
    }
}

// 切换选中状态
function toggleCartCheck(index) {
    const checkEl = document.querySelectorAll('.cart-check')[index];
    checkEl.classList.toggle('checked');
    updateCartSummary();
}

// 修改数量
function changeNum(index, delta) {
    cart[index].num += delta;
    if (cart[index].num <= 0) {
        cart.splice(index, 1);
    }
    updateCartBadge();
    updateCartPage();
}

// 更新购物车汇总
function updateCartSummary() {
    let goodsAmount = 0;
    cart.forEach((item, index) => {
        const checkEl = document.querySelectorAll('.cart-check')[index];
        if (checkEl && checkEl.classList.contains('checked')) {
            goodsAmount += item.price * item.num;
        }
    });
    
    document.getElementById('goods-amount').textContent = '¥' + goodsAmount;
    
    // 计算优惠
    let discount = 0;
    let promoText = '';
    if (goodsAmount >= 99) {
        discount = 20;
        promoText = '已享满99减20';
    } else {
        promoText = `还差¥${99 - goodsAmount}享满99减20`;
    }
    document.getElementById('promo-status').textContent = promoText;
    
    // 显示折扣行
    const discountRow = document.getElementById('discount-row');
    if (discount > 0) {
        discountRow.style.display = 'flex';
        document.getElementById('discount-amount').textContent = '-¥' + discount;
    } else {
        discountRow.style.display = 'none';
    }
    
    const total = goodsAmount - discount;
    document.getElementById('total-price').textContent = '¥' + total;
    document.getElementById('cart-total-amount').textContent = '¥' + total;
}

// 清空购物车
function clearCart() {
    cart = [];
    updateCartBadge();
    updateCartPage();
}

// 前往结算
function goToCheckout() {
    if (cart.length > 0) {
        goPage('checkout');
    }
}

// 更新结算页面
function updateCheckoutPage() {
    const checkoutItems = document.getElementById('checkout-items');
    checkoutItems.innerHTML = cart.map(item => `
        <div class="checkout-product">
            <div class="checkout-img" style="background: ${item.color}">
                <span class="product-emoji">${item.emoji}</span>
            </div>
            <div class="checkout-detail">
                <h4>${item.name}</h4>
                <p>${item.desc}</p>
                <div class="checkout-price">¥${item.price} x${item.num}</div>
            </div>
        </div>
    `).join('');
    
    // 计算总价
    let total = 0;
    cart.forEach(item => {
        total += item.price * item.num;
    });
    
    // 应用优惠
    let discount = 0;
    if (total >= 99) {
        discount = 20;
    }
    
    document.getElementById('checkout-total').textContent = '¥' + (total - discount);
    document.getElementById('checkout-coupon-tip').textContent = discount > 0 ? `省¥${discount} >` : '选择优惠券 >';
}

// 选择送达时间
function selectTime(el) {
    document.querySelectorAll('.time-option').forEach(opt => opt.classList.remove('selected'));
    el.classList.add('selected');
}

// 选择支付方式
function selectPayment(el) {
    document.querySelectorAll('.payment-method').forEach(opt => opt.classList.remove('selected'));
    el.classList.add('selected');
}

// 提交订单
function submitOrder() {
    // 模拟提交
    cart = [];
    updateCartBadge();
    goPage('orderSuccess');
}

// 选择优惠券
function selectCoupon(discount, name) {
    showToast(`已选择优惠券：${name}`);
    document.getElementById('selected-coupon-text').textContent = name;
    document.getElementById('checkout-coupon-tip').textContent = `省¥${discount} >`;
    setTimeout(() => goBack(), 500);
}

// 切换优惠券标签
function switchCouponTab(el, type) {
    document.querySelectorAll('.coupon-tab').forEach(tab => tab.classList.remove('active'));
    el.classList.add('active');
    
    document.querySelectorAll('.coupon-list').forEach(list => list.style.display = 'none');
    document.getElementById('coupon-' + type).style.display = 'block';
}

// 切换分类标签
function switchTab(el, type) {
    document.querySelectorAll('.category-tabs .tab').forEach(tab => tab.classList.remove('active'));
    el.classList.add('active');
}

// 搜索关键词
function searchKeyword(keyword) {
    document.querySelector('.search-input').value = keyword;
}

// 显示规格选择弹窗
function showSpecModal() {
    document.getElementById('spec-modal').classList.add('active');
}

// 关闭规格选择弹窗
function closeSpecModal() {
    document.getElementById('spec-modal').classList.remove('active');
}

// 确认规格选择
function confirmSpec() {
    closeSpecModal();
    addToCartFromDetail();
}

// Toast提示
function showToast(message) {
    const toast = document.getElementById('toast');
    toast.textContent = message;
    toast.classList.add('show');
    setTimeout(() => {
        toast.classList.remove('show');
    }, 2000);
}

// 初始化
document.addEventListener('DOMContentLoaded', function() {
    // 默认显示首页
    document.getElementById('page-home').classList.add('active');
    
    // 绑定规格选择事件
    document.querySelectorAll('.spec-option').forEach(option => {
        option.addEventListener('click', function() {
            const siblings = this.parentElement.querySelectorAll('.spec-option');
            siblings.forEach(sib => sib.classList.remove('selected'));
            this.classList.add('selected');
            
            // 更新价格（模拟）
            const basePrice = 3.5;
            const selectedOptions = document.querySelectorAll('.spec-option.selected');
            let multiplier = 1;
            if (selectedOptions.length > 1) {
                multiplier = selectedOptions[1].textContent === '3罐装' ? 2.8 : 
                            selectedOptions[1].textContent === '6罐装' ? 5.5 : 1;
            }
            document.getElementById('spec-total-price').textContent = '¥' + (basePrice * multiplier).toFixed(1);
        });
    });
});

HTML内容

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>鲜享生活 - 便利超市</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 手机容器 -->
    <div class="phone-container">
        <!-- 首页 -->
        <div id="page-home" class="page active">
            <div class="home-header">
                <div class="location-row">
                    <span class="location-icon">📍</span>
                    <span class="location-text">朝阳区望京街道</span>
                    <span class="delivery-time">预计<span class="highlight">28分钟</span>送达</span>
                </div>
            </div>
            <div class="search-bar" onclick="goPage('search')">
                <span class="search-icon">🔍</span>
                <span class="search-placeholder">搜索饮料、零食、生鲜...</span>
            </div>
            <div class="banner-carousel">
                <div class="banner-item banner-1">
                    <div class="banner-content">
                        <div class="banner-tag">限时特惠</div>
                        <h2>蒙牛纯牛奶整箱</h2>
                        <p>纯牛奶250ml×16盒 仅需39.9元</p>
                        <div class="banner-btn">立即抢购</div>
                    </div>
                </div>
                <div class="banner-dots">
                    <span class="dot active"></span>
                    <span class="dot"></span>
                    <span class="dot"></span>
                </div>
            </div>
            
            <div class="quick-categories">
                <div class="category-item" onclick="goPage('category')">
                    <div class="cat-icon" style="background:#FFE4E1;">🥤</div>
                    <span>饮料</span>
                </div>
                <div class="category-item" onclick="goPage('category')">
                    <div class="cat-icon" style="background:#E6E6FA;">🍪</div>
                    <span>零食</span>
                </div>
                <div class="category-item" onclick="goPage('category')">
                    <div class="cat-icon" style="background:#FFFACD;">🍎</div>
                    <span>水果</span>
                </div>
                <div class="category-item" onclick="goPage('category')">
                    <div class="cat-icon" style="background:#F0FFF0;">🥬</div>
                    <span>蔬菜</span>
                </div>
                <div class="category-item" onclick="goPage('category')">
                    <div class="cat-icon" style="background:#FFF0F5;">🥩</div>
                    <span>肉蛋</span>
                </div>
                <div class="category-item" onclick="goPage('category')">
                    <div class="cat-icon" style="background:#F5F5DC;">🍜</div>
                    <span>速食</span>
                </div>
            </div>

            <div class="promo-section">
                <div class="promo-card promo-left">
                    <div class="promo-title">新人专享</div>
                    <div class="promo-desc">满59减15</div>
                    <div class="promo-tag">限时</div>
                </div>
                <div class="promo-card promo-right">
                    <div class="promo-title">今日特卖</div>
                    <div class="promo-desc">爆款5折起</div>
                    <div class="promo-tag">折扣</div>
                </div>
            </div>

            <div class="section-header">
                <h3>🔥 热销推荐</h3>
                <span class="more-link" onclick="goPage('category')">更多 ></span>
            </div>
            <div class="product-grid">
                <div class="product-card" onclick="goPage('detail', 1)">
                    <div class="product-image" style="background: linear-gradient(135deg, #DC143C, #B22222);">
                        <span class="product-emoji">🥤</span>
                    </div>
                    <div class="product-info">
                        <h4>可口可乐330ml</h4>
                        <p class="product-desc">经典原味 · 冰镇更爽</p>
                        <div class="product-price">
                            <span class="price-current">¥3.5</span>
                            <span class="price-original">¥4</span>
                        </div>
                        <div class="product-tags">
                            <span class="tag-hot">🔥 爆款</span>
                        </div>
                    </div>
                </div>
                <div class="product-card" onclick="goPage('detail', 2)">
                    <div class="product-image" style="background: linear-gradient(135deg, #FFD700, #FFA500);">
                        <span class="product-emoji">🍟</span>
                    </div>
                    <div class="product-info">
                        <h4>乐事薯片 145g</h4>
                        <p class="product-desc">原味薯片 · 休闲必备</p>
                        <div class="product-price">
                            <span class="price-current">¥8.9</span>
                            <span class="price-original">¥12</span>
                        </div>
                        <div class="product-tags">
                            <span class="tag-new">特惠</span>
                        </div>
                    </div>
                </div>
                <div class="product-card" onclick="goPage('detail', 3)">
                    <div class="product-image" style="background: linear-gradient(135deg, #90EE90, #98FB98);">
                        <span class="product-emoji">🍎</span>
                    </div>
                    <div class="product-info">
                        <h4>红富士苹果 500g</h4>
                        <p class="product-desc">新鲜当季 · 甜脆多汁</p>
                        <div class="product-price">
                            <span class="price-current">¥9.9</span>
                            <span class="price-original">¥12.8</span>
                        </div>
                        <div class="product-tags"></div>
                    </div>
                </div>
                <div class="product-card" onclick="goPage('detail', 4)">
                    <div class="product-image" style="background: linear-gradient(135deg, #87CEEB, #00CED1);">
                        <span class="product-emoji">🥛</span>
                    </div>
                    <div class="product-info">
                        <h4>蒙牛纯牛奶 250ml</h4>
                        <p class="product-desc">营养早餐 · 补钙佳品</p>
                        <div class="product-price">
                            <span class="price-current">¥2.5</span>
                            <span class="price-original">¥3</span>
                        </div>
                        <div class="product-tags">
                            <span class="tag-hot">🔥 热销</span>
                        </div>
                    </div>
                </div>
                <div class="product-card" onclick="goPage('detail', 5)">
                    <div class="product-image" style="background: linear-gradient(135deg, #FFA07A, #FA8072);">
                        <span class="product-emoji">🥚</span>
                    </div>
                    <div class="product-info">
                        <h4>土鸡蛋 12枚装</h4>
                        <p class="product-desc">散养土鸡 · 营养健康</p>
                        <div class="product-price">
                            <span class="price-current">¥18.8</span>
                            <span class="price-original">¥25</span>
                        </div>
                        <div class="product-tags">
                            <span class="tag-sale">特惠</span>
                        </div>
                    </div>
                </div>
                <div class="product-card" onclick="goPage('detail', 6)">
                    <div class="product-image" style="background: linear-gradient(135deg, #DDA0DD, #EE82EE);">
                        <span class="product-emoji">🍇</span>
                    </div>
                    <div class="product-info">
                        <h4>阳光玫瑰 300g</h4>
                        <p class="product-desc">香印青提 · 甜蜜可口</p>
                        <div class="product-price">
                            <span class="price-current">¥29.9</span>
                            <span class="price-original">¥38</span>
                        </div>
                        <div class="product-tags">
                            <span class="tag-new">新品</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分类页 -->
        <div id="page-category" class="page">
            <div class="page-header">
                <div class="back-btn" onclick="goBack()">←</div>
                <h2>全部分类</h2>
                <div class="header-right"></div>
            </div>
            <div class="category-tabs">
                <div class="tab active" onclick="switchTab(this, 'drinks')">饮料</div>
                <div class="tab" onclick="switchTab(this, 'snacks')">零食</div>
                <div class="tab" onclick="switchTab(this, 'fruits')">水果</div>
                <div class="tab" onclick="switchTab(this, 'vegetables')">蔬菜</div>
                <div class="tab" onclick="switchTab(this, 'meat')">肉蛋</div>
            </div>
            <div class="category-banner">
                <div class="cat-banner-content">
                    <h3>🥤 饮料专区</h3>
                    <p>清凉一夏，饮品全场优惠</p>
                </div>
            </div>
            <div class="filter-bar">
                <span class="filter-item active">综合</span>
                <span class="filter-item">销量</span>
                <span class="filter-item">价格</span>
                <span class="filter-item">新品</span>
            </div>
            <div class="category-products">
                <div class="product-list-item" onclick="goPage('detail', 1)">
                    <div class="list-image" style="background:#DC143C;">
                        <span class="product-emoji">🥤</span>
                    </div>
                    <div class="list-info">
                        <h4>可口可乐330ml</h4>
                        <p>经典原味，冰镇更爽</p>
                        <div class="list-price">¥3.5 <span class="original">¥4</span></div>
                        <div class="list-tags"><span>爆款</span><span>满减</span></div>
                    </div>
                    <div class="add-cart-btn" onclick="event.stopPropagation(); addToCart(1)">+</div>
                </div>
                <div class="product-list-item" onclick="goPage('detail', 7)">
                    <div class="list-image" style="background:#00CED1;">
                        <span class="product-emoji">🧃</span>
                    </div>
                    <div class="list-info">
                        <h4>农夫山泉 550ml</h4>
                        <p>天然矿泉水，健康饮水</p>
                        <div class="list-price">¥2 <span class="original">¥2.5</span></div>
                        <div class="list-tags"><span>热销</span></div>
                    </div>
                    <divclass="add-cart-btn" onclick="event.stopPropagation(); addToCart(7)">+</div>
                </div>
                <div class="product-list-item" onclick="goPage('detail', 8)">
                    <div class="list-image" style="background:#87CEEB;">
                        <span class="product-emoji">🥛</span>
                    </div>
                    <div class="list-info">
                        <h4>伊利纯牛奶 250ml</h4>
                        <p>优质奶源，营养丰富</p>
                        <div class="list-price">¥2.8 <span class="original">¥3.5</span></div>
                        <div class="list-tags"><span>满59减10</span></div>
                    </div>
                    <div class="add-cart-btn" onclick="event.stopPropagation(); addToCart(8)">+</div>
                </div>
                <div class="product-list-item" onclick="goPage('detail', 9)">
                    <div class="list-image" style="background:#FFE4B5;">
                        <span class="product-emoji">🧃</span>
                    </div>
                    <div class="list-info">
                        <h4>王老吉凉茶 310ml</h4>
                        <p>清热降火，正宗凉茶</p>
                        <div class="list-price">¥4.5 <span class="original">¥6</span></div>
                        <div class="list-tags"><span>新品</span></div>
                    </div>
                    <div class="add-cart-btn" onclick="event.stopPropagation(); addToCart(9)">+</div>
                </div>
            </div>
        </div>

        <!-- 商品详情页 -->
        <div id="page-detail" class="page">
            <div class="detail-header">
                <div class="back-btn" onclick="goBack()">←</div>
                <div class="header-actions">
                    <span class="share-btn">分享</span>
                </div>
            </div>
            <div class="detail-image">
                <div class="detail-product-icon" id="detail-icon">🥤</div>
                <div class="detail-badges">
                    <span class="badge-hot" id="detail-badge-hot">🔥 爆款</span>
                </div>
            </div>
            <div class="detail-content">
                <div class="detail-price-row">
                    <span class="detail-price" id="detail-price">¥3.5</span>
                    <span class="detail-original" id="detail-original">¥4</span>
                    <span class="detail-sales">已售 15862</span>
                </div>
                <h2 class="detail-title" id="detail-title">可口可乐330ml</h2>
                <p class="detail-desc" id="detail-desc">经典可口可乐330ml罐装，气泡充足，口感爽滑。冰镇后饮用更佳，是聚餐、宵夜、看球赛的必备饮品。</p>
                
                <div class="promotion-bar" onclick="goPage('coupons')">
                    <span class="promo-label">优惠</span>
                    <span class="promo-text">满59减10 可用优惠券</span>
                    <span class="promo-arrow">></span>
                </div>
                
                <div class="spec-row" onclick="showSpecModal()">
                    <span class="spec-label">已选</span>
                    <span class="spec-value">经典原味 · 1罐</span>
                    <span class="spec-arrow">></span>
                </div>
                <div class="delivery-row">
                    <span class="spec-label">配送</span>
                    <div class="delivery-info">
                        <span class="delivery-time-text">预计28分钟送达</span>
                        <span class="delivery-fee">免运费</span>
                    </div>
                </div>
            </div>

            <div class="detail-section">
                <h3>商品评价</h3>
                <div class="review-item">
                    <div class="review-user">张***</div>
                    <div class="review-content">送货超快，冰可乐喝着太爽了！夏天必备 👍</div>
                    <div class="review-time">2026-05-10</div>
                </div>
                <div class="review-item">
                    <div class="review-user">李***</div>
                    <div class="review-content">价格便宜，日期新鲜，下次继续回购</div>
                    <div class="review-time">2026-05-08</div>
                </div>
            </div>

            <div class="detail-section">
                <h3>商品详情</h3>
                <div class="detail-images">
                    <div class="detail-img-placeholder">📷 商品图1</div>
                    <div class="detail-img-placeholder">📷 商品图2</div>
                    <div class="detail-img-placeholder">📷 商品图3</div>
                </div>
            </div>

            <div class="detail-bottom-bar">
                <div class="bottom-icons">
                    <div class="bottom-icon-item" onclick="goPage('home')">
                        <span class="icon-home">🏠</span>
                        <span>首页</span>
                    </div>
                    <div class="bottom-icon-item" onclick="goPage('cart')">
                        <span class="icon-cart">🛒</span>
                        <span>购物车</span>
                        <span class="cart-badge" id="cart-badge">0</span>
                    </div>
                </div>
                <div class="bottom-btns">
                    <div class="btn-add-cart" onclick="addToCartFromDetail()">加入购物车</div>
                    <div class="btn-buy-now" onclick="buyNow()">立即购买</div>
                </div>
            </div>
        </div>

        <!-- 购物车页 -->
        <div id="page-cart" class="page">
            <div class="page-header">
                <div class="back-btn" onclick="goBack()">←</div>
                <h2>购物车</h2>
                <div class="header-right" onclick="clearCart()">清空</div>
            </div>
            <div id="cart-empty" class="cart-empty" style="display:none;">
                <div class="empty-icon">🛒</div>
                <h3>购物车是空的</h3>
                <p>去挑选心仪的商品吧</p>
                <div class="empty-btn" onclick="goPage('home')">去逛逛</div>
            </div>
            <div id="cart-content" class="cart-content">
                <div class="cart-store">
                    <div class="store-header">
                        <span class="store-name">🛒 鲜享生活超市</span>
                    </div>
                    <div id="cart-items">
                        <!-- 动态生成 -->
                    </div>
                </div>

                <div class="promotion-section">
                    <div class="promotion-row" onclick="goPage('coupons')">
                        <span class="promo-icon">🎫</span>
                        <span class="promo-title">优惠券</span>
                        <span class="promo-amount" id="selected-coupon-text">待选择</span>
                        <span class="arrow">></span>
                    </div>
                    <div class="promotion-row">
                        <span class="promo-icon">🎁</span>
                        <span class="promo-title">满减优惠</span>
                        <span class="promo-status" id="promo-status">还差¥20享满59减10</span>
                    </div>
                </div>

                <div class="cart-summary">
                    <div class="summary-row">
                        <span>商品金额</span>
                        <span id="goods-amount">¥0</span>
                    </div>
                    <div class="summary-row">
                        <span>运费</span>
                        <span class="free-shipping">免运费</span>
                    </div>
                    <div class="summary-row" id="discount-row" style="display:none;">
                        <span>优惠</span>
                        <span class="discount-amount" id="discount-amount">-¥0</span>
                    </div>
                    <div class="summary-total">
                        <span>合计</span>
                        <span class="total-price" id="total-price">¥0</span>
                    </div>
                </div>
            </div>

            <div class="cart-bottom-bar" id="cart-bottom-bar">
                <div class="total-info">
                    <span class="total-label">合计：</span>
                    <span class="total-amount" id="cart-total-amount">¥0</span>
                </div>
                <div class="checkout-btn" onclick="goToCheckout()">去结算</div>
            </div>
        </div>

        <!-- 结算页 -->
        <div id="page-checkout" class="page">
            <div class="page-header">
                <div class="back-btn" onclick="goBack()">←</div>
                <h2>确认订单</h2>
                <div class="header-right"></div>
            </div>
            
            <div class="checkout-content">
                <div class="address-section" onclick="goPage('addresses')">
                    <div class="address-icon">📍</div>
                    <div class="address-info">
                        <div class="address-name">李先生 <span class="default-tag">默认</span></div>
                        <div class="address-phone">138****8888</div>
                        <div class="address-detail">北京市朝阳区望京街道望京SOHO T2 1608室</div>
                    </div>
                    <span class="arrow">></span>
                </div>

                <div class="delivery-time-section">
                    <div class="section-label">送达时间</div>
                    <div class="time-options">
                        <div class="time-option selected" onclick="selectTime(this)">
                            <div class="time-value">尽快送达</div>
                            <div class="time-price">预计 28分钟</div>
                        </div>
                        <div class="time-option" onclick="selectTime(this)">
                            <div class="time-value">13:00-14:00</div>
                            <div class="time-price">免运费</div>
                        </div>
                        <div class="time-option" onclick="selectTime(this)">
                            <div class="time-value">14:00-15:00</div>
                            <div class="time-price">免运费</div>
                        </div>
                    </div>
                </div>

                <div class="gift-section">
                    <div class="section-label">备注留言</div>
                    <textarea class="gift-message" placeholder="如有特殊需求请备注（选填）">

订单商品

支付方式

💳 微信支付 ✓

💰 支付宝

🎫 使用优惠券省¥10 >

实付款： ¥0

提交订单

🚴

配送中

骑手正在配送中，预计8分钟后送达

👨

王师傅

📞 138****6666

拨打电话

📍

李先生

138****8888

北京市朝阳区望京街道望京SOHO T2 1608室

订单编号 SH20260511001

下单时间 2026-05-11 10:30

支付方式微信支付

🍎

红富士苹果 500g

新鲜水果

¥9.9 x1

🥚

土鸡蛋 12枚装

散养土鸡

¥18.8 x1

商品金额 ¥28.7

运费免运费

优惠券 -¥5

实付款 ¥23.7

编辑页面

优惠券

我的订单

订单详情

🔥 热门搜索

🕐 搜索历史

订单提交成功

收货地址

编辑地址

我的收藏

设置

帮助与客服

📌 常见问题

📞 联系我们

关于我们

鲜享生活

编辑页面

优惠券

我的订单

订单详情

🔥 热门搜索

🕐 搜索历史

订单提交成功

收货地址

编辑地址

我的收藏

设置

帮助与客服

📌 常见问题

📞 联系我们

关于我们

鲜享生活

选择规格