编辑页面

页面标题

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

CSS文件（可选）

/* 基础变量 */
:root {
    --primary: #ff4757;
    --primary-light: #ff6b81;
    --primary-dark: #e8414a;
    --bg-color: #f5f5f5;
    --text-primary: #333;
    --text-secondary: #666;
    --text-light: #999;
    --border-color: #eee;
    --white: #fff;
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* 重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-color);
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

#app {
    max-width: 430px;
    margin: 0 auto;
    background: var(--bg-color);
    min-height: 100vh;
    position: relative;
}

/* 页面通用 */
.page {
    display: none;
    padding-bottom: calc(60px + var(--safe-bottom));
    min-height: 100vh;
}

.page-active {
    display: block;
}

/* 顶部搜索 */
.home-header {
    padding: 12px 16px;
    background: var(--primary);
    position: sticky;
    top: 0;
    z-index: 100;
}

.search-bar {
    display: flex;
    align-items: center;
    background: var(--white);
    border-radius: 20px;
    padding: 8px 16px;
}

.search-icon {
    width: 18px;
    height: 18px;
    color: var(--text-light);
    margin-right: 8px;
}

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

.search-bar input::placeholder {
    color: var(--text-light);
}

/* Banner轮播 */
.banner-section {
    position: relative;
    margin: 12px;
    border-radius: 12px;
    overflow: hidden;
}

.banner-swiper {
    position: relative;
}

.banner-slide {
    height: 150px;
    display: none;
    position: relative;
}

.banner-slide.active {
    display: block;
}

.banner-content {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--white);
}

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

.banner-content p {
    font-size: 14px;
    opacity: 0.9;
}

.banner-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
}

.dot.active {
    background: var(--white);
    width: 16px;
    border-radius: 3px;
}

/* 商品分类 */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 16px 12px;
    background: var(--white);
    border-radius: 12px;
    margin: 0 12px;
}

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

.category-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.category-icon svg {
    width: 28px;
    height: 28px;
}

.category-item span {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 营销活动 */
.activity-section {
    padding: 16px 12px;
    background: var(--white);
    margin: 12px;
    border-radius: 12px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

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

.more-btn {
    font-size: 12px;
    color: var(--text-light);
    cursor: pointer;
}

.countdown {
    display: flex;
    align-items: center;
    gap: 4px;
}

.countdown-text {
    font-size: 12px;
    color: var(--text-light);
    margin-right: 4px;
}

.time-block {
    background: var(--primary);
    color: var(--white);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.flash-sale-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
}

.flash-sale-scroll::-webkit-scrollbar {
    display: none;
}

.flash-item {
    flex-shrink: 0;
    width: 100px;
    cursor: pointer;
}

.flash-img {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    background: #f9f9f9;
}

.flash-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sale-tag {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary);
    color: var(--white);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 0 0 6px 0;
}

.flash-info {
    margin-top: 8px;
}

.flash-info .price {
    font-size: 14px;
    color: var(--primary);
    font-weight: 600;
}

.flash-info .original {
    font-size: 11px;
    color: var(--text-light);
    text-decoration: line-through;
    margin-left: 4px;
}

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

.activity-card {
    flex: 1;
    height: 80px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.activity-bg {
    position: absolute;
    inset: 0;
}

.activity-content {
    position: relative;
    padding: 12px;
    color: var(--white);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.activity-content h4 {
    font-size: 14px;
    margin-bottom: 4px;
}

.activity-content p {
    font-size: 11px;
    opacity: 0.9;
}

.activity-btn {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 10px;
    margin-top: 6px;
    width: fit-content;
}

/* 商品列表 */
.product-section {
    padding: 16px 12px;
    background: var(--white);
    margin: 0 12px 12px;
    border-radius: 12px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.product-card {
    background: #fafafa;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

.product-img {
    width: 100%;
    height: 150px;
    background: #f0f0f0;
    overflow: hidden;
}

.product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-info {
    padding: 10px;
}

.product-info h4 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-desc {
    font-size: 11px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.product-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.product-bottom .price {
    color: var(--primary);
    font-size: 16px;
    font-weight: 600;
}

.add-cart-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.add-cart-btn svg {
    width: 16px;
    height: 16px;
    color: var(--white);
}

/* 页面通用头部 */
.page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: var(--white);
    position: sticky;
    top: 0;
    z-index: 100;
}

.back-btn, .share-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-btn svg, .share-btn svg {
    width: 22px;
    height: 22px;
    color: var(--text-primary);
}

.page-header h1 {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 600;
}

.edit-btn, .add-btn {
    font-size: 14px;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
}

/* 分类页 */
.category-layout {
    display: flex;
    min-height: calc(100vh - 60px);
}

.category-sidebar {
    width: 80px;
    background: #f5f5f5;
    overflow-y: auto;
}

.sidebar-item {
    padding: 14px 8px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
}

.sidebar-item.active {
    background: var(--white);
    color: var(--primary);
}

.sidebar-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    background: var(--primary);
    border-radius: 0 2px 2px 0;
}

.category-content {
    flex: 1;
    padding: 12px;
    background: var(--white);
}

.content-banner {
    width: 100%;
    height: 100px;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}

.content-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.subcategory h4 {
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.sub-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.sub-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.sub-item img {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 6px;
}

.sub-item span {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 商品详情页 */
.detail-content {
    padding-bottom: 80px;
}

.detail-image {
    width: 100%;
    height: 350px;
    background: #f5f5f5;
}

.detail-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-info {
    padding: 16px;
    background: var(--white);
}

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

.current-price {
    font-size: 24px;
    color: var(--primary);
    font-weight: 700;
}

.original-price {
    font-size: 14px;
    color: var(--text-light);
    text-decoration: line-through;
    margin-left: 8px;
}

.discount-tag {
    background: #fff0f0;
    color: var(--primary);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
}

.detail-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.detail-desc {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 12px;
}

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

.detail-tags span {
    font-size: 11px;
    color: var(--primary);
    background: #fff0f0;
    padding: 3px 8px;
    border-radius: 4px;
}

.detail-specs {
    margin-top: 10px;
    padding: 12px 16px;
    background: var(--white);
}

.spec-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}

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

.spec-label {
    color: var(--text-light);
    font-size: 13px;
}

.spec-value {
    color: var(--text-primary);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.spec-value svg {
    width: 14px;
    height: 14px;
}

.detail-section {
    padding: 16px;
    background: var(--white);
    margin-top: 10px;
}

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

.review-item {
    padding: 12px 0;
}

.review-header {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin-right: 10px;
}

.review-meta {
    flex: 1;
}

.username {
    display: block;
    font-size: 13px;
    color: var(--text-primary);
}

.date {
    font-size: 11px;
    color: var(--text-light);
}

.rating svg {
    width: 14px;
    height: 14px;
}

.review-content {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 8px;
}

.review-images {
    display: flex;
    gap: 8px;
}

.review-images img {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    object-fit: cover;
}

/* 详情页底部 */
.detail-footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 430px;
    display: flex;
    background: var(--white);
    padding: 8px 12px;
    padding-bottom: calc(8px + var(--safe-bottom));
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 100;
}

.footer-icons {
    display: flex;
    gap: 8px;
    margin-right: 12px;
}

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

.icon-item svg {
    width: 22px;
    height: 22px;
    color: var(--text-secondary);
}

.icon-item span {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 2px;
}

.cart-badge {
    position: absolute;
    top: -4px;
    right: 2px;
    background: var(--primary);
    color: var(--white);
    font-size: 10px;
    min-width: 16px;
    height: 16px;
border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.footer-actions {
    flex: 1;
    display: flex;
    gap: 8px;
}

.footer-actions button {
    flex: 1;
    padding: 10px 0;
    border: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.btn-add-cart {
    background: linear-gradient(135deg, #ffa502 0%, #ff9500 100%);
    color: var(--white);
}

.btn-buy-now {
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
    color: var(--white);
}

/* 购物车 */
.cart-content {
    padding: 12px;
}

.cart-store {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
}

.store-header {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.store-name {
    font-size: 14px;
    font-weight: 500;
    margin-left: 8px;
}

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

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

.item-image {
    width: 70px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    margin: 0 10px;
    flex-shrink: 0;
}

.item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item-info {
    flex: 1;
    min-width: 0;
}

.item-info h4 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-spec {
    font-size: 12px;
    color: var(--text-light);
}

.item-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.item-price {
    font-size: 15px;
    color: var(--primary);
    font-weight: 600;
}

.quantity-control {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 4px;
}

.qty-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    font-size: 16px;
    cursor: pointer;
    color: var(--text-secondary);
}

.qty-num {
    width: 30px;
    text-align: center;
    font-size: 14px;
}

.cart-tip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px;
    background: #fff9e6;
    border-radius: 8px;
    margin-top: 12px;
    font-size: 12px;
    color: #fa8c16;
}

.cart-tip svg {
    width: 16px;
    height: 16px;
}

.cart-footer {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 430px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--white);
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 99;
}

.all-select {
    display: flex;
    align-items: center;
    gap: 8px;
}

.all-select span {
    font-size: 14px;
    color: var(--text-primary);
}

.footer-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.total-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.total-info span:first-child {
    font-size: 12px;
    color: var(--text-light);
}

.total-price {
    font-size: 18px;
    color: var(--primary);
    font-weight: 700;
}

.checkout-btn {
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
    color: var(--white);
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
}

/* Checkbox样式 */
.checkbox-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-wrap input {
    opacity: 0;
    width: 0;
    height: 0;
}

.checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.checkbox-wrap input:checked + .checkmark {
    background: var(--primary);
    border-color: var(--primary);
}

.checkbox-wrap input:checked + .checkmark::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

/* 个人中心 */
.profile-header-bg {
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
    padding: 20px 16px 30px;
}

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

.avatar-large {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,0.3);
}

.avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info {
    margin-left: 14px;
    color: var(--white);
}

.profile-info h2 {
    font-size: 18px;
    margin-bottom: 4px;
}

.profile-info p {
    font-size: 12px;
    opacity: 0.8;
}

.member-tag {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    margin-top: 6px;
}

.profile-edit {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.2);
    border: none;
    color: var(--white);
    padding: 6px 12px;
    border-radius: 15px;
    font-size: 12px;
    cursor: pointer;
}

.profile-edit svg {
    width: 14px;
    height: 14px;
}

/* 订单区域 */
.order-section {
    background: var(--white);
    margin: -20px 12px 12px;
    border-radius: 12px;
    padding: 16px;
    position: relative;
    z-index: 1;
}

.section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-title h3 {
    font-size: 15px;
}

.view-all {
    font-size: 12px;
    color: var(--text-light);
    display: flex;
    align-items: center;
    cursor: pointer;
}

.view-all svg {
    width: 14px;
    height: 14px;
}

.order-tabs {
    display: flex;
    justify-content: space-around;
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.tab-icon {
    position: relative;
    width: 40px;
    height: 40px;
    margin-bottom: 6px;
}

.tab-icon svg {
    width: 28px;
    height: 28px;
    color: var(--text-primary);
}

.tab-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--primary);
    color: var(--white);
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.tab-item span:last-child {
    font-size: 12px;
    color: var(--text-secondary);
}

/* 菜单列表 */
.menu-section {
    background: var(--white);
    margin: 0 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 #f0f0f0;
}

.menu-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
}

.menu-icon svg {
    width: 18px;
    height: 18px;
}

.menu-item span {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
}

.menu-item .arrow {
    width: 16px;
    height: 16px;
    color: var(--text-light);
}

/* 订单列表页 */
.order-tabs-nav {
    display: flex;
    background: var(--white);
    padding: 0 16px;
    border-bottom: 1px solid #f0f0f0;
}

.tab-nav-item {
    flex: 1;
    text-align: center;
    padding: 14px 0;
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    position: relative;
}

.tab-nav-item.active {
    color: var(--primary);
}

.tab-nav-item.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: var(--primary);
}

.order-list {
    padding: 12px;
}

.order-card {
    background: var(--white);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.order-store {
    font-size: 13px;
    font-weight: 500;
}

.order-status {
    font-size: 13px;
    color: var(--primary);
}

.order-status.received {
    color: #fa8c16;
}

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

.order-item img {
    width: 60px;
    height: 60px;
    border-radius: 6px;
    object-fit: cover;
}

.order-item-info {
    flex: 1;
    margin-left: 10px;
}

.order-item-info h4 {
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 4px;
}

.order-spec {
    font-size: 11px;
    color: var(--text-light);
}

.order-item-price {
    text-align: right;
}

.order-item-price span:first-child {
    display: block;
    font-size: 13px;
    color: var(--text-primary);
}

.order-qty {
    font-size: 11px;
    color: var(--text-light);
}

.order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}

.order-total span:first-child {
    font-size: 12px;
    color: var(--text-light);
}

.order-total .total-price {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

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

.order-actions button {
    padding: 6px 14px;
    border-radius: 15px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #ddd;
    background: var(--white);
}

.btn-cancel {
    color: var(--text-secondary);
}

.btn-pay {
    background: var(--primary) !important;
    color: var(--white) !important;
    border: none !important;
}

.btn-default {
    color: var(--text-primary);
}

.btn-confirm {
    background: var(--primary) !important;
    color: var(--white) !important;
    border: none !important;
}

/* 联系骑手按钮 */
.btn-rider {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px !important;
    color: #27ae60 !important;
    border: 1px solid #27ae60 !important;
    background: var(--white) !important;
}

.btn-rider svg {
    width: 14px;
    height: 14px;
}

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

.address-card {
    background: var(--white);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.address-card.default {
    border: 1px solid var(--primary);
}

.address-main {
    flex: 1;
}

.address-user {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.address-user .name {
    font-size: 15px;
    font-weight: 500;
    margin-right: 10px;
}

.address-user .phone {
    font-size: 14px;
    color: var(--text-secondary);
}

.default-tag {
    background: var(--primary);
    color: var(--white);
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 10px;
}

.address-detail {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.address-action svg {
    width: 20px;
    height: 20px;
    color: var(--text-light);
}

/* 底部导航 */
.tab-bar {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 430px;
    display: flex;
    background: var(--white);
    padding: 6px 0;
    padding-bottom: calc(6px + var(--safe-bottom));
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
    z-index: 1000;
}

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

.tab-item svg {
    width: 24px;
    height: 24px;
    color: var(--text-light);
}

.tab-item span {
    font-size: 10px;
    color: var(--text-light);
    margin-top: 2px;
}

.tab-item.active svg {
    color: var(--primary);
}

.tab-item.active span {
    color: var(--primary);
}

.tab-badge {
    position: absolute;
    top: -2px;
    right: 50%;
    transform: translateX(12px);
    background: var(--primary);
    color: var(--white);
    font-size: 10px;
    min-width: 16px;
    height: 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Toast提示 */
.toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.75);
    color: var(--white);
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.toast.show {
    opacity: 1;
}

/* 动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.page-active {
    animation: fadeIn 0.3s ease;
}

/* 商品详情页底部操作栏 */
.detail-footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 430px;
    background: var(--white);
    display: flex;
    align-items: center;
    padding: 8px 12px;
    padding-bottom: calc(8px + var(--safe-bottom));
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
    z-index: 100;
}

.footer-icons {
    display: flex;
    gap: 16px;
}

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

.icon-item svg {
    width: 22px;
    height: 22px;
    color: var(--text-primary);
}

.icon-item span {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 2px;
}

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

.footer-actions {
    flex: 1;
    display: flex;
    margin-left: 16px;
    gap: 8px;
}

.footer-actions button {
    flex: 1;
    padding: 10px 0;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.btn-add-cart {
    background: linear-gradient(135deg, #ff9f43 0%, #ffc107 100%);
    color: var(--white);
}

.btn-buy-now {
    background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);
    color: var(--white);
}

.footer-actions button:active {
    transform: scale(0.96);
    opacity: 0.9;
}

JS文件（可选）

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

// 当前页面
let currentPage = 'home';

// 显示页面
function showPage(pageId) {
    // 记录历史
    if (currentPage !== pageId) {
        pageHistory.push(pageId);
    }
    currentPage = pageId;
    
    // 隐藏所有页面
    document.querySelectorAll('.page').forEach(page => {
        page.classList.remove('page-active');
    });
    
    // 显示目标页面
    const targetPage = document.getElementById('page-' + pageId);
    if (targetPage) {
        targetPage.classList.add('page-active');
    }
    
    // 更新TabBar状态
    updateTabBar(pageId);
}

// 返回上一页
function goBack() {
    if (pageHistory.length > 1) {
        pageHistory.pop();
        const prevPage = pageHistory[pageHistory.length - 1];
        currentPage = prevPage;
        
        document.querySelectorAll('.page').forEach(page => {
            page.classList.remove('page-active');
        });
        
        const targetPage = document.getElementById('page-' + prevPage);
        if (targetPage) {
            targetPage.classList.add('page-active');
        }
        
        updateTabBar(prevPage);
    }
}

// 更新TabBar
function updateTabBar(pageId) {
    document.querySelectorAll('.tab-item').forEach(item => {
        item.classList.remove('active');
    });
    
    const tabMap = {
        'home': 0,
        'category': 1,
        'cart': 2,
        'profile': 3
    };
    
    if (tabMap[pageId] !== undefined) {
        const tabs = document.querySelectorAll('.tab-bar .tab-item');
        if (tabs[tabMap[pageId]]) {
            tabs[tabMap[pageId]].classList.add('active');
        }
    }
}

// Banner轮播
let currentBanner = 0;
const banners = document.querySelectorAll('.banner-slide');
const dots = document.querySelectorAll('.dot');

function nextBanner() {
    banners[currentBanner].classList.remove('active');
    dots[currentBanner].classList.remove('active');
    
    currentBanner = (currentBanner + 1) % banners.length;
    
    banners[currentBanner].classList.add('active');
    dots[currentBanner].classList.add('active');
}

// 自动轮播
setInterval(nextBanner, 3000);

// 点击dot切换
dots.forEach((dot, index) => {
    dot.addEventListener('click', () => {
        banners[currentBanner].classList.remove('active');
        dots[currentBanner].classList.remove('active');
        
        currentBanner = index;
        
        banners[currentBanner].classList.add('active');
        dots[currentBanner].classList.add('active');
    });
});

// 分类侧边栏切换
document.querySelectorAll('.sidebar-item').forEach(item => {
    item.addEventListener('click', function() {
        document.querySelectorAll('.sidebar-item').forEach(i => {
            i.classList.remove('active');
        });
        this.classList.add('active');
    });
});

// 数量加减
function changeQty(btn, delta) {
    const qtySpan = btn.parentElement.querySelector('.qty-num');
    let qty = parseInt(qtySpan.textContent);
    qty += delta;
    if (qty < 1) qty = 1;
    qtySpan.textContent = qty;
    
    // 更新总价（模拟）
    updateCartTotal();
}

// 更新购物车总价
function updateCartTotal() {
    const items = document.querySelectorAll('.cart-item');
    let total = 0;
    let count = 0;
    
    items.forEach(item => {
        const checkbox = item.querySelector('input[type="checkbox"]');
        if (checkbox && checkbox.checked) {
            const price = parseFloat(item.querySelector('.item-price').textContent.replace('¥', ''));
            const qty = parseInt(item.querySelector('.qty-num').textContent);
            total += price * qty;
            count += qty;
        }
    });
    
    const totalPrice = document.querySelector('.total-price');
    if (totalPrice) {
        totalPrice.textContent = '¥' + total.toFixed(1);
    }
    
    const checkoutBtn = document.querySelector('.checkout-btn');
    if (checkoutBtn) {
        checkoutBtn.textContent = '去结算 (' + count + '件)';
    }
}

// 购物车编辑模式
let isEditing = false;

function toggleCartEdit() {
    isEditing = !isEditing;
    const editBtn = document.querySelector('.edit-btn');
    
    if (isEditing) {
        editBtn.textContent = '完成';
        // 显示删除按钮等编辑功能
    } else {
        editBtn.textContent = '编辑';
    }
}

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

// 加入购物车
function addToCart() {
    showToast('已加入购物车');
    
    // 更新购物车数量
    const badges = document.querySelectorAll('.tab-badge, .cart-badge');
    badges.forEach(badge => {
        const current = parseInt(badge.textContent);
        badge.textContent = current + 1;
    });
}

// 立即购买
function buyNow() {
    showToast('正在跳转支付...');
    setTimeout(() => {
        showPage('cart');
    }, 1000);
}

// 收藏
document.querySelectorAll('.icon-item').forEach(item => {
    item.addEventListener('click', function() {
        const svg = this.querySelector('svg');
        if (svg && svg.innerHTML.includes('heart')) {
            showToast('已收藏');
        }
    });
});

// 规格选择
function toggleSpec(element) {
    showToast('选择规格');
}

// 订单标签切换
document.querySelectorAll('.tab-nav-item').forEach(item => {
    item.addEventListener('click', function() {
        document.querySelectorAll('.tab-nav-item').forEach(i => {
            i.classList.remove('active');
        });
        this.classList.add('active');
    });
});

// 全选功能
document.querySelectorAll('.all-select input').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const items = document.querySelectorAll('.cart-item input[type="checkbox"]');
        items.forEach(item => {
            item.checked = this.checked;
        });
        updateCartTotal();
    });
});

// 店铺内商品全选
document.querySelectorAll('.store-header input').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        const store = this.closest('.cart-store');
        const items = store.querySelectorAll('.cart-item input[type="checkbox"]');
        items.forEach(item => {
            item.checked = this.checked;
        });
        updateCartTotal();
    });
});

// 商品项选择
document.querySelectorAll('.cart-item input[type="checkbox"]').forEach(checkbox => {
    checkbox.addEventListener('change', function() {
        updateCartTotal();
        
        // 检查是否全选
        const store = this.closest('.cart-store');
        const allItems = store.querySelectorAll('.cart-item input[type="checkbox"]');
        const checkedItems = store.querySelectorAll('.cart-item input[type="checkbox"]:checked');
        
        const storeCheckbox = store.querySelector('.store-header input[type="checkbox"]');
        storeCheckbox.checked = allItems.length === checkedItems.length;
    });
});

// 阻止详情页底部按钮点击穿透
document.querySelector('.detail-footer').addEventListener('click', function(e) {
    e.stopPropagation();
});

// 联系骑手
function contactRider() {
    showToast('正在拨打骑手电话...');
    // 实际项目中这里会调用拨打电话功能
    // window.location.href = 'tel:13800138000';
}

// 初始化页面显示
document.addEventListener('DOMContentLoaded', function() {
    showPage('home');
});

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 id="app">
        <!-- 首页 -->
        <div id="page-home" class="page page-active">
            <!-- 顶部搜索 -->
            <header class="home-header">
                <div class="search-bar">
                    <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="11" cy="11" r="8"></circle>
                        <path d="m21 21-4.35-4.35"></path>
                    </svg>
                    <input type="text" placeholder="搜索新鲜蔬果、海鲜、肉类...">
                </div>
            </header>

            <!-- Banner轮播 -->
            <div class="banner-section">
                <div class="banner-swiper">
                    <div class="banner-slide active" style="background: linear-gradient(135deg, #ff4757 0%, #ff6b81 100%);">
                        <div class="banner-content">
                            <h2>春季新鲜直供</h2>
                            <p>满99减20 限时优惠</p>
                        </div>
                    </div>
                    <div class="banner-slide" style="background: linear-gradient(135deg, #2ed573 0%, #7bed9f 100%);">
                        <div class="banner-content">
                            <h2>有机蔬菜专区</h2>
                            <p>健康生活 从新鲜开始</p>
                        </div>
                    </div>
                    <div class="banner-slide" style="background: linear-gradient(135deg, #ffa502 0%, #ffcc00 100%);">
                        <div class="banner-content">
                            <h2>海鲜水产</h2>
                            <p>当日捕捞 鲜活送达</p>
                        </div>
                    </div>
                </div>
                <div class="banner-dots">
                    <span class="dot active"></span>
                    <span class="dot"></span>
                    <span class="dot"></span>
                </div>
            </div>

            <!-- 商品分类入口 -->
            <div class="category-grid">
                <div class="category-item" onclick="showPage('category')">
                    <div class="category-icon" style="background: #fff0f0;">
                        <svg viewBox="0 0 24 24" fill="#ff4757">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                        </svg>
                    </div>
                    <span>蔬菜</span>
                </div>
                <div class="category-item" onclick="showPage('category')">
                    <div class="category-icon" style="background: #fff9e6;">
                        <svg viewBox="0 0 24 24" fill="#ffa502">
                            <circle cx="12" cy="12" r="8"/>
                        </svg>
                    </div>
                    <span>水果</span>
                </div>
                <div class="category-item" onclick="showPage('category')">
                    <div class="category-icon" style="background: #e8f5ff;">
                        <svg viewBox="0 0 24 24" fill="#3498db">
                            <path d="M12 3c-1.5 0-2.7.8-3.4 2H7c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h.6c.3 1.2 1 2.2 2 2.8V17H7c-1.1 0-2 .9-2 2v2c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-2c0-1.1-.9-2-2-2h-2.6v-3.2c1-.6 1.7-1.6 2-2.8H17c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2h-1.6c-.7-1.2-1.9-2-3.4-2z"/>
                        </svg>
                    </div>
                    <span>肉类</span>
                </div>
                <div class="category-item" onclick="showPage('category')">
                    <div class="category-icon" style="background: #f0f8ff;">
                        <svg viewBox="0 0 24 24" fill="#1e90ff">
                            <path d="M12 2C8 2 4 6 4 10c0 5 8 12 8 12s8-7 8-12c0-4-4-8-8-8zm0 11c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3z"/>
                        </svg>
                    </div>
                    <span>海鲜</span>
                </div>
                <div class="category-item" onclick="showPage('category')">
                    <div class="category-icon" style="background: #fff5f5;">
                        <svg viewBox="0 0 24 24" fill="#e74c3c">
                            <path d="M18.06 23h1.66c.84 0 1.53-.65 1.63-1.47L23 5.05h-5V1h-1.97v4.05h-4.97l.3 2.34c1.71.47 3.31 1.32 4.27 2.26 1.44 1.42 2.43 2.89 2.43 5.29v8.06z"/>
                        </svg>
                    </div>
                    <span>禽蛋</span>
                </div>
                <div class="category-item" onclick="showPage('category')">
                    <div class="category-icon" style="background: #f0fff0;">
                        <svg viewBox="0 0 24 24" fill="#27ae60">
                            <path d="M7 2v2h1v14c0 2.21 1.79 4 4 4s4-1.79 4-4V4h1V2H7zm6 16c0 1.1-.9 2-2 2s-2-.9-2-2V4h4v14z"/>
                        </svg>
                    </div>
                    <span>乳品</span>
                </div>
                <div class="category-item" onclick="showPage('category')">
                    <div class="category-icon" style="background: #fff8f0;">
                        <svg viewBox="0 0 24 24" fill="#e67e22">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
                        </svg>
                    </div>
                    <span>粮油</span>
                </div>
                <div class="category-item" onclick="showPage('category')">
                    <div class="category-icon" style="background: #fef0ff;">
                        <svg viewBox="0 0 24 24" fill="#9b59b6">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z"/>
                        </svg>
                    </div>
                    <span>更多</span>
                </div>
            </div>

            <!-- 营销活动专区 -->
            <div class="activity-section">
                <div class="section-header">
                    <h3>限时抢购</h3>
                    <div class="countdown">
                        <span class="countdown-text">距离结束</span>
                        <span class="time-block">02</span>:
                        <span class="time-block">35</span>:
                        <span class="time-block">48</span>
                    </div>
                </div>
                <div class="flash-sale-scroll">
                    <div class="flash-item" onclick="showPage('detail')">
                        <div class="flash-img">
                            <img src="https://images.unsplash.com/photo-1546548970-71785318a17b?w=200&h=200&fit=crop" alt="圣女果">
                            <span class="sale-tag">热卖</span>
                        </div>
                        <div class="flash-info">
                            <span class="price">¥12.8</span>
                            <span class="original">¥18.8</span>
                        </div>
                    </div>
                    <div class="flash-item" onclick="showPage('detail')">
                        <div class="flash-img">
                            <img src="https://images.unsplash.com/photo-1615485290382-441e4d049cb5?w=200&h=200&fit=crop" alt="西兰花">
                            <span class="sale-tag">抢光</span>
                        </div>
                        <div class="flash-info">
                            <span class="price">¥6.9</span>
                            <span class="original">¥9.9</span>
                        </div>
                    </div>
                    <div class="flash-item" onclick="showPage('detail')">
                        <div class="flash-img">
                            <img src="https://images.unsplash.com/photo-1587049352846-4a222e784d38?w=200&h=200&fit=crop" alt="三文鱼">
                            <span class="sale-tag">5折</span>
                        </div>
                        <div class="flash-info">
                            <span class="price">¥39.9</span>
                            <span class="original">¥79.9</span>
                        </div>
                    </div>
                    <div class="flash-item" onclick="showPage('detail')">
                        <div class="flash-img">
                            <img src="https://images.unsplash.com/photo-1568702846914-96b305d2uj89?w=200&h=200&fit=crop" alt="鸡蛋">
                            <span class="sale-tag">特价</span>
                        </div>
                        <div class="flash-info">
                            <span class="price">¥15.9</span>
                            <span class="original">¥22.9</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 活动列表 -->
            <div class="activity-banners">
                <div class="activity-card" onclick="showPage('category')">
                    <div class="activity-bg" style="background: linear-gradient(135deg, #ff6b6b 0%, #ff4757 100%);"></div>
                    <div class="activity-content">
                        <h4>新人专享</h4>
                        <p>首单满49减10</p>
                        <span class="activity-btn">立即领取</span>
                    </div>
                </div>
                <div class="activity-card" onclick="showPage('category')">
                    <div class="activity-bg" style="background: linear-gradient(135deg, #feca57 0%, #ff9f43 100%);"></div>
                    <div class="activity-content">
                        <h4>会员日</h4>
                        <p>周三会员双倍积分</p>
                        <span class="activity-btn">了解详情</span>
                    </div>
                </div>
            </div>

            <!-- 商品列表 -->
            <div class="product-section">
                <div class="section-header">
                    <h3>热门推荐</h3>
                    <span class="more-btn" onclick="showPage('category')">查看更多</span>
                </div>
                <div class="product-grid">
                    <div class="product-card" onclick="showPage('detail')">
                        <div class="product-img">
                            <img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?w=300&h=300&fit=crop" alt="有机西红柿">
                        </div>
                        <div class="product-info">
                            <h4>有机西红柿 约500g</h4>
                            <p class="product-desc">新鲜采摘 产地直发</p>
                            <div class="product-bottom">
                                <span class="price">¥8.8</span>
                                <button class="add-cart-btn">
                                    <svg viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.44C5.09 15.32 5 15.65 5 16c0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="product-card" onclick="showPage('detail')">
                        <div class="product-img">
                            <img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=300&h=300&fit=crop" alt="混合沙拉">
                        </div>
                        <div class="product-info">
                            <h4>新鲜混合沙拉 200g</h4>
                            <p class="product-desc">有机蔬菜 清爽健康</p>
                            <div class="product-bottom">
                                <span class="price">¥15.8</span>
                                <button class="add-cart-btn">
                                    <svg viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.44C5.09 15.32 5 15.65 5 16c0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="product-card" onclick="showPage('detail')">
                        <div class="product-img">
                            <img src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?w=300&h=300&fit=crop" alt="三明治">
                        </div>
                        <div class="product-info">
                            <h4>鸡胸肉三明治 1份</h4>
                            <p class="product-desc">低脂高蛋白 早餐首选</p>
                            <div class="product-bottom">
                                <span class="price">¥18.8</span>
                                <button class="add-cart-btn">
                                    <svg viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.44C5.09 15.32 5 15.65 5 16c0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="product-card" onclick="showPage('detail')">
                        <div class="product-img">
                            <img src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=300&h=300&fit=crop" alt="水果沙拉">
                        </div>
                        <div class="product-info">
                            <h4>时令水果拼盘 约300g</h4>
                            <p class="product-desc">多种水果 营养均衡</p>
                            <div class="product-bottom">
                                <span class="price">¥26.8</span>
                                <button class="add-cart-btn">
                                    <svg viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.44C5.09 15.32 5 15.65 5 16c0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z"/>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 分类页 -->
        <div id="page-category" class="page">
            <header class="page-header">
                <button class="back-btn" onclick="showPage('home')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M15 18l-6-6 6-6"/>
                    </svg>
                </button>
                <h1>商品分类</h1>
            </header>
            <div class="category-layout">
                <div class="category-sidebar">
                    <div class="sidebar-item active">蔬菜</div>
                    <div class="sidebar-item">水果</div>
                    <div class="sidebar-item">肉类</div>
                    <div class="sidebar-item">海鲜</div>
                    <div class="sidebar-item">禽蛋</div>
                    <div class="sidebar-item">乳品</div>
                    <div class="sidebar-item">粮油</div>
                    <div class="sidebar-item">饮料</div>
                    <div class="sidebar-item">零食</div>
                    <div class="sidebar-item">日用</div>
                </div>
                <div class="category-content">
                    <div class="content-banner">
                        <img src="https://images.unsplash.com/photo-1488459716781-31db52582fe9?w=600&h=200&fit=crop" alt="蔬菜专区">
                    </div>
                    <div class="subcategory">
                        <h4>叶菜类</h4>
                        <div class="sub-list">
                            <div class="sub-item" onclick="showPage('detail')">
                                <img src="https://images.unsplash.com/photo-1595854341625-d0cc4e5452c4?w=150&h=150&fit=crop" alt="菠菜">
                                <span>菠菜</span>
                            </div>
                            <div class="sub-item" onclick="showPage('detail')">
                                <img src="https://images.unsplash.com/photo-1601493700631-2b16ec4b4716?w=150&h=150&fit=crop" alt="白菜">
                                <span>白菜</span>
                            </div>
                            <div class="sub-item" onclick="showPage('detail')">
                                <img src="https://images.unsplash.com/photo-1587049352846-4a222e784d38?w=150&h=150&fit=crop" alt="油菜">
                                <span>油菜</span>
                            </div>
                            <div class="sub-item" onclick="showPage('detail')">
                                <img src="https://images.unsplash.com/photo-1615485290382-441e4d049cb5?w=150&h=150&fit=crop" alt="西兰花">
                                <span>西兰花</span>
                            </div>
                        </div>
                    </div>
                    <div class="subcategory">
                        <h4>根茎类</h4>
                        <div class="sub-list">
                            <div class="sub-item" onclick="showPage('detail')">
                                <img src="https://images.unsplash.com/photo-1518977676601-b53f82ber89?w=150&h=150&fit=crop" alt="胡萝卜">
                                <span>胡萝卜</span>
                            </div>
                            <div class="sub-item" onclick="showPage('detail')">
                                <img src="https://images.unsplash.com/photo-1598170845058-32b9d6a5da37?w=150&h=150&fit=crop" alt="土豆">
                                <span>土豆</span>
                            </div>
                            <div class="sub-item" onclick="showPage('detail')">
                                <img src="https://images.unsplash.com/photo-1558818498-28c1e002b655?w=150&h=150&fit=crop" alt="红薯">
                                <span>红薯</span>
                            </div>
                            <div class="sub-item" onclick="showPage('detail')">
                                <img src="https://images.unsplash.com/photo-158427顾工885?w=150&h=150&fit=crop" alt="山药">
                                <span>山药</span>
                            </div>
                        </div>
                    </div>
                    <div class="subcategory">
                        <h4>茄果类</h4>
                        <div class="sub-list">
                            <div class="sub-item" onclick="showPage('detail')">
                                <img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?w=150&h=150&fit=crop" alt="西红柿">
                                <span>西红柿</span>
                            </div>
                            <div class="sub-item" onclick="showPage('detail')">
                                <img src="https://images.unsplash.com/photo-1563565375-f3fdfdbefa83?w=150&h=150&fit=crop" alt="黄瓜">
                                <span>黄瓜</span>
                            </div>
                            <div class="sub-item" onclick="showPage('detail')">
                                <img src="https://images.unsplash.com/photo-1603833665858-e61d17a86224?w=150&h=150&fit=crop" alt="茄子">
                                <span>茄子</span>
                            </div>
                            <div class="sub-item" onclick="showPage('detail')">
                                <img src="https://images.unsplash.com/photo-1598170845058-32b9d6a5da37?w=150&h=150&fit=crop" alt="辣椒">
                                <span>辣椒</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 商品详情页 -->
        <div id="page-detail" class="page">
            <header class="page-header">
                <button class="back-btn" onclick="goBack()">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M15 18l-6-6 6-6"/>
                    </svg>
                </button>
                <h1>商品详情</h1>
                <button class="share-btn">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/>
                        <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
                    </svg>
                </button>
            </header>
            <div class="detail-content">
                <div class="detail-image">
                    <img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?w=600&h=600&fit=crop" alt="有机西红柿">
                </div>
                <div class="detail-info">
                    <div class="detail-price">
                        <span class="current-price">¥8.8</span>
                        <span class="original-price">¥12.8</span>
                        <span class="discount-tag">省4元</span>
                    </div>
                    <h2 class="detail-title">有机西红柿 约500g</h2>
                    <p class="detail-desc">新鲜采摘 产地直发 无农药残留 皮薄多汁 口感酸甜</p>
                    <div class="detail-tags">
                        <span>有机</span>
                        <span>新鲜</span>
                        <span>次日达</span>
                    </div>
                </div>
                <div class="detail-specs">
                    <div class="spec-item" onclick="toggleSpec(this)">
                        <span class="spec-label">规格</span>
                        <span class="spec-value">约500g <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg></span>
                    </div>
                    <div class="spec-item">
                        <span class="spec-label">配送</span>
                        <span class="spec-value">今日下单 明日送达</span>
                    </div>
                    <div class="spec-item">
                        <span class="spec-label">承诺</span>
                        <span class="spec-value">坏果包赔 极速退款</span>
                    </div>
                </div>
                <div class="detail-section">
                    <h3>商品评价 (128)</h3>
                    <div class="review-item">
                        <div class="review-header">
                            <div class="avatar">张</div>
                            <div class="review-meta">
                                <span class="username">张***</span>
                                <span class="date">2024-03-15</span>
                            </div>
                            <div class="rating">
                                <svg viewBox="0 0 24 24" fill="#ff4757"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                                <svg viewBox="0 0 24 24" fill="#ff4757"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                                <svg viewBox="0 0 24 24" fill="#ff4757"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                                <svg viewBox="0 0 24 24" fill="#ff4757"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                                <svg viewBox="0 0 24 24" fill="#ff4757"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                            </div>
                        </div>
                        <p class="review-content">非常新鲜，个头均匀，包装也很好，会回购的！</p>
                        <div class="review-images">
                            <img src="https://images.unsplash.com/photo-1546470427-227c7369a9b5?w=100&h=100&fit=crop" alt="评价图片">
                        </div>
                    </div>
                </div>
            </div>
            <div class="detail-footer">
                <div class="footer-icons">
                    <div class="icon-item">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                        </svg>
                        <span>收藏</span>
                    </div>
                    <div class="icon-item" onclick="showPage('cart')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/>
                            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
                        </svg>
                        <span>购物车</span>
                        <span class="cart-badge">2</span>
                    </div>
                </div>
                <div class="footer-actions">
                    <button class="btn-add-cart" onclick="addToCart()">加入购物车</button>
                    <button class="btn-buy-now" onclick="buyNow()">立即购买</button>
                </div>
            </div>
        </div>

        <!-- 购物车 -->
        <div id="page-cart" class="page">
            <header class="page-header">
                <button class="back-btn" onclick="showPage('home')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M15 18l-6-6 6-6"/>
                    </svg>
                </button>
                <h1>购物车</h1>
                <button class="edit-btn" onclick="toggleCartEdit()">编辑</button>
            </header>
            <div class="cart-content">
                <div class="cart-store">
                    <div class="store-header">
                        <label class="checkbox-wrap">
                            <input type="checkbox" checked>
                            <span class="checkmark"></span>
                        </label>
                        <span class="store-name">鲜生活旗舰店</span>
                    </div>
                    <div class="cart-item">
                        <label class="checkbox-wrap">
                            <input type="checkbox" checked>
                            <span class="checkmark"></span>
                        </label>
                        <div class="item-image">
                            <img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?w=150&h=150&fit=crop" alt="西红柿">
                        </div>
                        <div class="item-info">
                            <h4>有机西红柿 约500g</h4>
                            <span class="item-spec">约500g</span>
                            <div class="item-bottom">
                                <span class="item-price">¥8.8</span>
                                <div class="quantity-control">
                                    <button class="qty-btn" onclick="changeQty(this, -1)">-</button>
                                    <span class="qty-num">2</span>
                                    <button class="qty-btn" onclick="changeQty(this, 1)">+</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="cart-item">
                        <label class="checkbox-wrap">
                            <input type="checkbox" checked>
                            <span class="checkmark"></span>
                        </label>
                        <div class="item-image">
                            <img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=150&h=150&fit=crop" alt="沙拉">
                        </div>
                        <div class="item-info">
                            <h4>新鲜混合沙拉 200g</h4>
                            <span class="item-spec">200g</span>
                            <div class="item-bottom">
                                <span class="item-price">¥15.8</span>
                                <div class="quantity-control">
                                    <button class="qty-btn" onclick="changeQty(this, -1)">-</button>
                                    <span class="qty-num">1</span>
                                    <button class="qty-btn" onclick="changeQty(this, 1)">+</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cart-tip">
                    <svg viewBox="0 0 24 24" fill="#ff4757"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
                    <span>满99元免配送费，还差¥74.2</span>
                </div>
            </div>
            <div class="cart-footer">
                <label class="checkbox-wrap all-select">
                    <input type="checkbox" checked>
                    <span class="checkmark"></span>
                    <span>全选</span>
                </label>
                <div class="footer-right">
                    <div class="total-info">
                        <span>合计:</span>
                        <span class="total-price">¥33.4</span>
                    </div>
                    <button class="checkout-btn">去结算 (3件)</button>
                </div>
            </div>
        </div>

        <!-- 个人中心 -->
        <div id="page-profile" class="page">
            <div class="profile-header-bg">
                <div class="profile-header">
                    <div class="avatar-large">
                        <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop" alt="头像">
                    </div>
                    <div class="profile-info">
                        <h2>李明</h2>
                        <p>手机号: 138****8888</p>
                        <span class="member-tag">黄金会员</span>
                    </div>
                    <button class="profile-edit">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                        </svg>
                        编辑
                    </button>
                </div>
            </div>
            <div class="order-section">
                <div class="section-title">
                    <h3>我的订单</h3>
                    <span class="view-all" onclick="showPage('order')">全部订单 <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg></span>
                </div>
                <div class="order-tabs">
                    <div class="tab-item" onclick="showPage('order')">
                        <div class="tab-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/>
                                <circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/>
                            </svg>
                            <span class="tab-badge">2</span>
                        </div>
                        <span>待付款</span>
                    </div>
                    <div class="tab-item" onclick="showPage('order')">
                        <div class="tab-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
                            </svg>
                        </div>
                        <span>待发货</span>
                    </div>
                    <div class="tab-item" onclick="showPage('order')">
                        <div class="tab-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <rect x="1" y="3" width="15" height="13"/><polygon points="16 8 20 8 23 11 23 16 16 16 16 8"/>
                                <circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/>
                            </svg>
                            <span class="tab-badge">1</span>
                        </div>
                        <span>待收货</span>
                    </div>
                    <div class="tab-item" onclick="showPage('order')">
                        <div class="tab-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"/>
                            </svg>
                        </div>
                        <span>待评价</span>
                    </div>
                </div>
            </div>
            <div class="menu-section">
                <div class="menu-item" onclick="showPage('address')">
                    <div class="menu-icon" style="background: #fff0f0;">
                        <svg viewBox="0 0 24 24" fill="#ff4757">
                            <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
                        </svg>
</div>
                    <span>收货地址</span>
                    <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
                </div>
                <div class="menu-item">
                    <div class="menu-icon" style="background: #fff5e6;">
                        <svg viewBox="0 0 24 24" fill="#ffa502">
                            <path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"/>
                        </svg>
                    </div>
                    <span>我的优惠券</span>
                    <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
                </div>
                <div class="menu-item">
                    <div class="menu-icon" style="background: #fff0ff;">
                        <svg viewBox="0 0 24 24" fill="#9b59b6">
                            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                        </svg>
                    </div>
                    <span>我的收藏</span>
                    <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
                </div>
                <div class="menu-item">
                    <div class="menu-icon" style="background: #f0f8ff;">
                        <svg viewBox="0 0 24 24" fill="#3498db">
                            <path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 9h-2V5h2v6zm0 4h-2v-2h2v2z"/>
                        </svg>
                    </div>
                    <span>消息通知</span>
                    <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
                </div>
                <div class="menu-item">
                    <div class="menu-icon" style="background: #f0fff0;">
                        <svg viewBox="0 0 24 24" fill="#27ae60">
                            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
                        </svg>
                    </div>
                    <span>关于我们</span>
                    <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 18l6-6-6-6"/></svg>
                </div>
            </div>
        </div>

        <!-- 我的订单 -->
        <div id="page-order" class="page">
            <header class="page-header">
                <button class="back-btn" onclick="showPage('profile')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M15 18l-6-6 6-6"/>
                    </svg>
                </button>
                <h1>我的订单</h1>
            </header>
            <div class="order-tabs-nav">
                <div class="tab-nav-item active">全部</div>
                <div class="tab-nav-item">待付款</div>
                <div class="tab-nav-item">待发货</div>
                <div class="tab-nav-item">待收货</div>
                <div class="tab-nav-item">待评价</div>
            </div>
            <div class="order-list">
                <div class="order-card">
                    <div class="order-header">
                        <span class="order-store">鲜生活旗舰店</span>
                        <span class="order-status">待付款</span>
                    </div>
                    <div class="order-item">
                        <img src="https://images.unsplash.com/photo-1567306226416-28f0efdc88ce?w=100&h=100&fit=crop" alt="西红柿">
                        <div class="order-item-info">
                            <h4>有机西红柿 约500g</h4>
                            <span class="order-spec">约500g</span>
                        </div>
                        <div class="order-item-price">
                            <span>¥8.8</span>
                            <span class="order-qty">x1</span>
                        </div>
                    </div>
                    <div class="order-footer">
                        <div class="order-total">
                            <span>共1件商品 合计:</span>
                            <span class="total-price">¥8.8</span>
                        </div>
                        <div class="order-actions">
                            <button class="btn-cancel">取消订单</button>
                            <button class="btn-pay">去支付</button>
                        </div>
                    </div>
                </div>
                <div class="order-card">
                    <div class="order-header">
                        <span class="order-store">鲜生活旗舰店</span>
                        <span class="order-status received">待收货</span>
                    </div>
                    <div class="order-item">
                        <img src="https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=100&h=100&fit=crop" alt="沙拉">
                        <div class="order-item-info">
                            <h4>新鲜混合沙拉 200g</h4>
                            <span class="order-spec">200g</span>
                        </div>
                        <div class="order-item-price">
                            <span>¥15.8</span>
                            <span class="order-qty">x2</span>
                        </div>
                    </div>
                    <div class="order-footer">
                        <div class="order-total">
                            <span>共2件商品 合计:</span>
                            <span class="total-price">¥31.6</span>
                        </div>
                        <div class="order-actions">
                            <button class="btn-rider" onclick="contactRider()">
                                <svg viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l1.96 2.5H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/>
                                </svg>
                                联系骑手
                            </button>
                            <button class="btn-default">查看物流</button>
                            <button class="btn-confirm">确认收货</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 收货地址 -->
        <div id="page-address" class="page">
            <header class="page-header">
                <button class="back-btn" onclick="showPage('profile')">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M15 18l-6-6 6-6"/>
                    </svg>
                </button>
                <h1>收货地址</h1>
                <button class="add-btn">新增</button>
            </header>
            <div class="address-list">
                <div class="address-card default">
                    <div class="address-main">
                        <div class="address-user">
                            <span class="name">李明</span>
                            <span class="phone">138****8888</span>
                            <span class="default-tag">默认</span>
                        </div>
                        <p class="address-detail">北京市朝阳区建国路88号SOHO现代城A座1201室</p>
                    </div>
                    <div class="address-action">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                        </svg>
                    </div>
                </div>
                <div class="address-card">
                    <div class="address-main">
                        <div class="address-user">
                            <span class="name">李明</span>
                            <span class="phone">139****6666</span>
                        </div>
                        <p class="address-detail">上海市浦东新区陆家嘴环路1000号汇丰大厦3楼</p>
                    </div>
                    <div class="address-action">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                            <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                        </svg>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航 -->
        <nav class="tab-bar">
            <div class="tab-item active" onclick="showPage('home')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                    <polyline points="9 22 9 12 15 12 15 22"/>
                </svg>
                <span>首页</span>
            </div>
            <div class="tab-item" onclick="showPage('category')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
                    <rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
                </svg>
                <span>分类</span>
            </div>
            <div class="tab-item" onclick="showPage('cart')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/>
                    <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
                </svg>
                <span>购物车</span>
                <span class="tab-badge">3</span>
            </div>
            <div class="tab-item" onclick="showPage('profile')">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
                    <circle cx="12" cy="7" r="4"/>
                </svg>
                <span>我的</span>
            </div>
        </nav>
    </div>

    <!-- Toast提示 -->
    <div id="toast" class="toast"></div>

    <script src="script.js"></script>
</body>
</html>

取消

访问码: pqh93a54