编辑页面

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 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
        
        :root {
            --primary: #07c160;
            --primary-dark: #06ad56;
            --secondary: #ff6b35;
            --bg: #f7f7f7;
            --white: #ffffff;
            --text: #333333;
            --text-secondary: #666666;
            --text-light: #999999;
            --border: #eeeeee;
            --price: #ff4d4f;
            --safe-top: env(safe-area-inset-top);
            --safe-bottom: env(safe-area-inset-bottom);
        }

        html, body {
            height: 100%;
            overflow: hidden;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans SC', sans-serif;
            background: #f7f7f7;
            color: var(--text);
            max-width: 430px;
            margin: 0 auto;
            height: 100%;
            position: relative;
            overflow: hidden;
        }

        /* Phone Frame */
        .phone-frame {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            background: var(--bg);
            position: relative;
            overflow: hidden;
        }

        /* Status Bar */
        .status-bar {
            height: calc(20px + var(--safe-top));
            padding-top: var(--safe-top);
            background: var(--primary);
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 4px;
            position: relative;
            z-index: 1000;
        }

        .status-bar-content {
            width: 100%;
            padding: 0 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 10px;
            color: white;
            font-weight: 600;
        }

        .status-time {
            font-variant-numeric: tabular-nums;
        }

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

        .status-icons svg {
            width: 14px;
            height: 14px;
            fill: white;
        }

        /* App Container */
        .app-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            position: relative;
        }

        /* Pages Wrapper with Animation */
        .pages-wrapper {
            flex: 1;
            position: relative;
            overflow: hidden;
        }

        .page {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg);
            overflow-y: auto;
            overflow-x: hidden;
            -webkit-overflow-scrolling: touch;
            transform: translateX(100%);
            opacity: 0;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
            visibility: hidden;
        }

        .page.active {
            transform: translateX(0);
            opacity: 1;
            visibility: visible;
        }

        .page.prev {
            transform: translateX(-30%);
            opacity: 0.5;
        }

        /* Pull to Refresh */
        .refresh-container {
            height: 0;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: height 0.3s;
        }

        .refresh-container.pulling {
            height: 50px;
        }

        .refresh-container.refreshing {
            height: 50px;
        }

        .refresh-loader {
            width: 20px;
            height: 20px;
            border: 2px solid var(--primary);
            border-top-color: transparent;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Header */
        .header {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            padding: 10px 16px 12px;
        }

        .header-top {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .location {
            display: flex;
            align-items: center;
            gap: 4px;
            color: white;
            font-size: 13px;
            white-space: nowrap;
        }

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

        .search-box {
            flex: 1;
            background: rgba(255,255,255,0.2);
            border-radius: 18px;
            padding: 8px 14px;
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: background 0.2s;
        }

        .search-box:active {
            background: rgba(255,255,255,0.3);
        }

        .search-box svg { width: 16px; height: 16px; fill: rgba(255,255,255,0.9); }

        .search-box span {
            color: rgba(255,255,255,0.9);
            font-size: 13px;
        }

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

        .header-icon {
            width: 22px;
            height: 22px;
            fill: white;
            cursor: pointer;
        }

        /* Content */
        .content {
            padding-bottom: calc(60px + var(--safe-bottom));
        }

        /* Banner */
        .banner {
            padding: 12px;
        }

        .banner-swiper {
            width: 100%;
            height: 140px;
            border-radius: 12px;
            overflow: hidden;
            position: relative;
            background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #a8edea 100%);
        }

        .banner-slide {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            color: white;
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .banner-slide.active {
            opacity: 1;
        }

        .banner-slide h2 {
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 6px;
            text-shadow: 0 2px 8px rgba(0,0,0,0.15);
        }

        .banner-slide p {
            font-size: 13px;
            opacity: 0.95;
        }

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

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

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

        /* Category */
        .category {
            padding: 14px;
            background: white;
            margin-bottom: 10px;
        }

        .category-title {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .category-title .more {
            font-size: 12px;
            color: var(--text-light);
        }

        .category-list {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
        }

        .category-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .category-item:active {
            transform: scale(0.92);
        }

        .category-icon {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
            transition: transform 0.2s;
        }

        .category-item:active .category-icon {
            transform: scale(0.9);
        }

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

        /* Flash Sale */
        .flash-sale {
            background: white;
            padding: 14px;
            margin-bottom: 10px;
        }

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

        .flash-title {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .flash-title h3 {
            font-size: 15px;
            font-weight: 600;
            color: var(--secondary);
        }

        .flash-title .tag {
            background: var(--secondary);
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 10px;
        }

        .flash-timer {
            display: flex;
            align-items: center;
            gap: 3px;
            font-size: 11px;
            color: var(--text-secondary);
        }

        .timer-num {
            background: #1a1a1a;
            color: white;
            padding: 2px 5px;
            border-radius: 3px;
            font-weight: 600;
            font-size: 11px;
        }

        .flash-list {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 4px;
            -webkit-overflow-scrolling: touch;
        }

        .flash-list::-webkit-scrollbar {
            display: none;
        }

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

        .flash-img {
            width: 95px;
            height: 95px;
            background: linear-gradient(135deg, #fff5f5, #fff0f0);
            border-radius: 8px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 38px;
            transition: transform 0.2s;
        }

        .flash-item:active .flash-img {
            transform: scale(0.95);
        }

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

        .flash-price .original {
            font-size: 10px;
            color: var(--text-light);
            text-decoration: line-through;
            font-weight: normal;
            margin-left: 4px;
        }

        /* Product Section */
        .product-section {
            background: white;
            padding: 14px;
            margin-bottom: 10px;
        }

        .product-section-title {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .product-section-title::before {
            content: '';
            width: 4px;
            height: 14px;
            background: var(--primary);
            border-radius: 2px;
        }

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

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

        .product-card:active {
            opacity: 0.9;
        }

        .product-img {
            width: 100%;
            height: 110px;
            background: linear-gradient(135deg, #f0f9f0, #e8f5e8);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 44px;
            position: relative;
        }

        .product-tag {
            position: absolute;
            top: 6px;
            left: 6px;
            background: var(--secondary);
            color: white;
            padding: 2px 5px;
            border-radius: 4px;
            font-size: 9px;
        }

        .product-info {
            padding: 10px;
        }

        .product-name {
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 3px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

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

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

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

        .product-add {
            width: 24px;
            height: 24px;
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s;
        }

        .product-add:active {
            transform: scale(0.85);
        }

        .product-add svg {
            width: 14px;
            height: 14px;
            fill: white;
        }

        /* Tab Bar */
        .tab-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top: 0.5px solid var(--border);
            display: flex;
            padding: 6px 0;
            padding-bottom: calc(6px + var(--safe-bottom));
            z-index: 100;
        }

        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            cursor: pointer;
            color: var(--text-light);
            transition: color 0.2s;
            position: relative;
        }

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

        .tab-item svg {
            width: 22px;
            height: 22px;
            fill: currentColor;
            transition: transform 0.2s;
        }

        .tab-item.active svg {
            transform: scale(1.1);
        }

        .tab-item span {
            font-size: 10px;
        }

        .tab-badge {
            position: relative;
        }

        .tab-badge .num {
            position: absolute;
            top: -4px;
            right: -8px;
            background: var(--price);
            color: white;
            font-size: 9px;
            padding: 1px 4px;
            border-radius: 10px;
            min-width: 14px;
            text-align: center;
            font-weight: 600;
        }

        /* Cart Page */
        .cart-header {
            background: white;
            padding: 14px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 0.5px solid var(--border);
        }

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

        .cart-edit {
            color: var(--primary);
            font-size: 13px;
            cursor: pointer;
        }

        .cart-list {
            padding: 12px 14px;
            padding-bottom: calc(70px + var(--safe-bottom));
        }

        .cart-store {
            background: white;
            border-radius: 12px;
            margin-bottom: 10px;
            overflow: hidden;
        }

        .cart-store-header {
            padding: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 0.5px solid var(--border);
        }

        .cart-store-header input {
            width: 18px;
            height: 18px;
            accent-color: var(--primary);
        }

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

        .cart-item {
            display: flex;
            padding: 12px;
            gap: 10px;
            border-bottom: 0.5px solid var(--border);
        }

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

        .cart-item input {
            width: 18px;
            height: 18px;
            accent-color: var(--primary);
            align-self: center;
            flex-shrink: 0;
        }

        .cart-item-img {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #f0f9f0, #e8f5e8);
            border-radius: 6px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            flex-shrink: 0;
        }

        .cart-item-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .cart-item-name {
            font-size: 13px;
            font-weight: 500;
            margin-bottom: 3px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .cart-item-spec {
            font-size: 10px;
            color: var(--text-light);
            margin-bottom: auto;
        }

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

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

        .quantity {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .quantity button {
            width: 24px;
            height: 24px;
            border: 0.5px solid var(--border);
            background: white;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 14px;
            color: var(--text);
            transition: background 0.15s;
        }

        .quantity button:active {
            background: #f5f5f5;
        }

        .quantity span {
            min-width: 22px;
            text-align: center;
            font-size: 13px;
            font-weight: 500;
        }

        .cart-footer {
            position: fixed;
            bottom: calc(60px + var(--safe-bottom));
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            background: white;
            border-top: 0.5px solid var(--border);
            padding: 10px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            z-index: 50;
        }

        .cart-footer-left {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .cart-footer-left input {
            width: 18px;
            height: 18px;
            accent-color: var(--primary);
        }

        .cart-footer-left span {
            font-size: 12px;
            color: var(--text-secondary);
        }

        .cart-total {
            flex: 1;
            text-align: right;
        }

        .cart-total .price {
            color: var(--price);
            font-size: 16px;
            font-weight: 600;
        }

        .cart-total .desc {
            font-size: 10px;
            color: var(--text-light);
        }

        .cart-checkout {
            background: var(--primary);
            color: white;
            padding: 10px 18px;
            border-radius: 20px;
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .cart-checkout:active {
            opacity: 0.85;
        }

        /* Empty State */
        .empty-state {
            padding: 50px 20px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .empty-icon {
            width: 80px;
            height: 80px;
            background: #f5f5f5;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
        }

        .empty-state h4 {
            font-size: 15px;
            font-weight: 500;
        }

        .empty-state p {
            font-size: 12px;
            color: var(--text-light);
        }

        .empty-state .btn {
            background: var(--primary);
            color: white;
            padding: 10px 24px;
            border-radius: 20px;
            font-size: 13px;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .empty-state .btn:active {
            opacity: 0.85;
        }

        /* User Page */
        .user-header {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            padding: 20px 16px 50px;
            color: white;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 20px;
        }

        .user-avatar {
            width: 60px;
            height: 60px;
            background: rgba(255,255,255,0.2);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 26px;
        }

        .user-name {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 4px;
        }

        .user-level {
            font-size: 11px;
            opacity: 0.8;
        }

        .user-stats {
            display: flex;
            gap: 24px;
        }

        .user-stat {
            text-align: center;
        }

        .user-stat .num {
            font-size: 18px;
            font-weight: 600;
        }

        .user-stat .label {
            font-size: 11px;
            opacity: 0.8;
        }

        .user-card {
            background: white;
            margin: -36px 12px 10px;
            border-radius: 12px;
            padding: 14px;
        }

        .user-menu-title {
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 12px;
        }

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

        .menu-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            cursor: pointer;
        }

        .menu-icon {
            width: 36px;
            height: 36px;
            background: #f5f5f5;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.2s;
        }

        .menu-item:active .menu-icon {
            transform: scale(0.9);
        }

        .menu-icon svg {
            width: 18px;
            height: 18px;
            fill: var(--text-secondary);
        }

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

        .order-section {
            background: white;
            margin: 0 12px 10px;
            border-radius: 12px;
            padding: 14px;
        }

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

        .order-header h4 {
            font-size: 13px;
            font-weight: 600;
        }

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

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

        .order-tab {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            cursor: pointer;
        }

        .order-tab-icon {
            width: 32px;
            height: 32px;
            background: #f5f5f5;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: transform 0.2s;
        }

        .order-tab:active .order-tab-icon {
            transform: scale(0.9);
        }

        .order-tab-icon svg {
            width: 16px;
            height: 16px;
            fill: var(--text-secondary);
        }

        .order-tab-icon .badge {
            position: absolute;
            top: -4px;
            right: -4px;
            background: var(--price);
            color: white;
            font-size: 9px;
            padding: 1px 3px;
            border-radius: 8px;
            font-weight: 600;
        }

        .order-tab span {
            font-size: 10px;
            color: var(--text-secondary);
        }

        .function-list {
            background: white;
            margin: 0 12px;
            border-radius: 12px;
            overflow: hidden;
        }

        .function-item {
            display: flex;
            align-items: center;
            padding: 14px;
            gap: 12px;
            border-bottom: 0.5px solid var(--border);
            cursor: pointer;
            transition: background 0.15s;
        }

        .function-item:active {
            background: #fafafa;
        }

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

        .function-icon {
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .function-icon svg {
            width: 18px;
            height: 18px;
            fill: var(--text-secondary);
        }

        .function-name {
            flex: 1;
            font-size: 13px;
        }

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

        /* Detail Page */
        .detail-page {
            position: fixed;
            inset: 0;
            background: var(--bg);
            z-index: 500;
            display: flex;
            flex-direction: column;
            transform: translateY(100%);
            transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .detail-page.active {
            transform: translateY(0);
        }

        .detail-header {
            position: absolute;
            top: calc(20px + var(--safe-top));
            left: 0;
            right: 0;
            padding: 10px 16px;
            display: flex;
            justify-content: space-between;
            z-index: 10;
        }

        .detail-header button {
            width: 32px;
            height: 32px;
            background: rgba(0,0,0,0.3);
            border-radius: 50%;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.2s;
        }

        .detail-header button:active {
            background: rgba(0,0,0,0.5);
        }

        .detail-header button svg {
            width: 18px;
            height: 18px;
            fill: white;
        }

        .detail-img {
            width: 100%;
            height: 300px;
            background: linear-gradient(135deg, #f0f9f0, #e8f5e8);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 100px;
        }

        .detail-content {
            flex: 1;
            overflow-y: auto;
            padding: 18px 16px;
            background: white;
            border-radius: 16px 16px 0 0;
            margin-top: -18px;
        }

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

        .detail-price {
            color: var(--price);
            font-size: 26px;
            font-weight: 600;
        }

        .detail-original {
            color: var(--text-light);
            font-size: 13px;
            text-decoration: line-through;
        }

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

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

        .detail-section {
            background: #fafafa;
            border-radius: 10px;
            padding: 12px;
            margin-bottom: 12px;
        }

        .detail-section-title {
            font-size: 12px;
            color: var(--text-light);
            margin-bottom: 8px;
        }

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

        .detail-tag {
            background: white;
            padding: 6px 12px;
            border-radius: 16px;
            font-size: 12px;
            border: 0.5px solid var(--border);
            cursor: pointer;
            transition: all 0.2s;
        }

        .detail-tag:active {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }

        .detail-bottom {
            display: flex;
            gap: 10px;
            padding: 10px 16px;
            padding-bottom: calc(10px + var(--safe-bottom));
            background: white;
            border-top: 0.5px solid var(--border);
        }

        .detail-cart-btn {
            flex: 1;
            background: var(--primary);
            color: white;
            text-align: center;
            padding: 12px;
            border-radius: 22px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .detail-cart-btn:active {
            opacity: 0.85;
        }

        .detail-buy-btn {
            flex: 1;
            background: var(--secondary);
            color: white;
            text-align: center;
            padding: 12px;
            border-radius: 22px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .detail-buy-btn:active {
            opacity: 0.85;
        }

        /* Toast */
        .toast {
            position: fixed;
            bottom: calc(80px + var(--safe-bottom));
            left: 50%;
            transform: translateX(-50%) translateY(20px);
            background: rgba(0,0,0,0.75);
            color: white;
            padding: 10px 20px;
            border-radius: 22px;
            font-size: 13px;
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 1000;
            pointer-events: none;
        }

        .toast.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        /* Category Page */
        .category-page-header {
            background: white;
            padding: 12px 16px;
            border-bottom: 0.5px solid var(--border);
        }

        .category-tabs {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 4px;
        }

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

        .category-tab {
            padding: 6px 14px;
            background: #f5f5f5;
            border-radius: 16px;
            font-size: 12px;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.2s;
        }

        .category-tab.active {
            background: var(--primary);
            color: white;
        }

        /* Add to cart animation */
        @keyframes flyToCart {
            0% { transform: scale(1); opacity: 1; }
            100% { transform: scale(0.3); opacity: 0; }
        }

        .flying-item {
            position: fixed;
            width: 30px;
            height: 30px;
            background: var(--primary);
            border-radius: 50%;
            z-index: 1000;
            pointer-events: none;
            animation: flyToCart 0.5s ease-out forwards;
        }

        /* Bounce animation */
        @keyframes bounce {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.3); }
        }

        .bounce {
            animation: bounce 0.3s ease;
        }

        /* Page transition indicator */
        .page-transition {
            position: fixed;
            bottom: calc(68px + var(--safe-bottom));
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 6px;
            z-index: 99;
        }

        .transition-dot {
            width: 4px;
            height: 4px;
            border-radius: 50%;
            background: var(--primary);
            opacity: 0.3;
            transition: all 0.3s;
        }

        .transition-dot.active {
            width: 16px;
            border-radius: 2px;
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="phone-frame">
        <!-- Status Bar -->
        <div class="status-bar">
            <div class="status-bar-content">
                <span class="status-time" id="statusTime">9:41</span>
                <div class="status-icons">
                    <svg viewBox="0 0 24 24"><path d="M12 21c1.66 0 3-1.34 3-3h-6c0 1.66 1.34 3 3 3zm-8.5-3c0-2.48 2.02-4.5 4.5-4.5s4.5 2.02 4.5 4.5h-9z"/></svg>
                    <svg viewBox="0 0 24 24"><path d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"/></svg>
                    <svg viewBox="0 0 24 24"><path d="M15.67 4H14V2h-4v2H8.33C7.6 4 7 4.6 7 5.33v15.33C7 21.4 7.6 22 8.33 22h7.33c.74 0 1.34-.6 1.34-1.33V5.33C17 4.6 16.4 4 15.67 4z"/></svg>
                </div>
            </div>
        </div>

        <div class="app-container">
            <!-- Pages Wrapper -->
            <div class="pages-wrapper">
                <!-- Home Page -->
                <div class="page active" id="homePage">
                    <!-- Header -->
                    <header class="header">
                        <div class="header-top">
                            <div class="location">
                                <svg viewBox="0 0 24 24"><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" fill="currentColor"/></svg>
                                <span>北京朝阳店</span>
                            </div>
                            <div class="search-box" onclick="showToast('搜索功能')">
                                <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" fill="currentColor"/></svg>
                                <span>搜索水果商品</span>
                            </div>
                            <div class="header-icons">
                                <svg class="header-icon" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z" fill="currentColor"/></svg>
                            </div>
                        </div>
                    </header>

                    <div class="content">
                        <!-- Banner -->
                        <div class="banner">
                            <div class="banner-swiper">
                                <div class="banner-slide active">
                                    <h2>新鲜水果 限时特惠</h2>
                                    <p>全场水果8折起 新用户立减10元</p>
                                </div>
                                <div class="banner-slide">
                                    <h2>应季鲜果 产地直发</h2>
                                    <p>新鲜直达 坏果包赔</p>
                                </div>
                                <div class="banner-slide">
                                    <h2>会员专享 积分兑换</h2>
                                    <p>积分当钱花 超值换购</p>
                                </div>
                                <div class="banner-dots">
                                    <div class="banner-dot active"></div>
                                    <div class="banner-dot"></div>
                                    <div class="banner-dot"></div>
                                </div>
                            </div>
                        </div>

                        <!-- Category -->
                        <div class="category">
                            <div class="category-title">
                                <span>水果分类</span>
                                <span class="more">查看全部</span>
                            </div>
                            <div class="category-list">
                                <div class="category-item"><div class="category-icon" style="background: #ffedd5;">🍎</div><span>苹果</span></div>
                                <div class="category-item"><div class="category-icon" style="background: #fef3c7;">🍊</div><span>柑橘</span></div>
                                <div class="category-item"><div class="category-icon" style="background: #dcfce7;">🍇</div><span>葡萄</span></div>
                                <div class="category-item"><div class="category-icon" style="background: #fce7f3;">🍓</div><span>草莓</span></div>
                                <div class="category-item"><div class="category-icon" style="background: #fef9c3;">🥭</div><span>芒果</span></div>
                                <div class="category-item"><div class="category-icon" style="background: #e0e7ff;">🥝</div><span>猕猴桃</span></div>
                                <div class="category-item"><div class="category-icon" style="background: #ffe4e6;">🍑</div><span>桃子</span></div>
                                <div class="category-item"><div class="category-icon" style="background: #d1fae5;">🍉</div><span>西瓜</span></div>
                                <div class="category-item"><div class="category-icon" style="background: #f3e8ff;">🫐</div><span>蓝莓</span></div>
                                <div class="category-item"><div class="category-icon" style="background: #fff7ed;">🥥</div><span>椰子</span></div>
                            </div>
                        </div>

                        <!-- Flash Sale -->
                        <div class="flash-sale">
                            <div class="flash-header">
                                <div class="flash-title">
                                    <h3>限时秒杀</h3>
                                    <span class="tag">抢先购</span>
                                </div>
                                <div class="flash-timer">
                                    <span>距结束</span>
                                    <span class="timer-num" id="flashHour">02</span>
                                    <span>:</span>
                                    <span class="timer-num" id="flashMin">34</span>
                                    <span>:</span>
                                    <span class="timer-num" id="flashSec">56</span>
                                </div>
                            </div>
                            <div class="flash-list">
                                <div class="flash-item" onclick="showDetail(1)"><div class="flash-img">🍓</div><div class="flash-price">¥19.9<small class="original">¥39.9</small></div></div>
                                <div class="flash-item" onclick="showDetail(2)"><div class="flash-img">🥭</div><div class="flash-price">¥9.9<small class="original">¥24.9</small></div></div>
                                <div class="flash-item" onclick="showDetail(3)"><div class="flash-img">🍇</div><div class="flash-price">¥29.9<small class="original">¥59.9</small></div></div>
                                <div class="flash-item" onclick="showDetail(4)"><div class="flash-img">🫐</div><div class="flash-price">¥24.9<small class="original">¥49.9</small></div></div>
                            </div>
                        </div>

                        <!-- Hot Products -->
                        <div class="product-section">
                            <div class="product-section-title">热销推荐</div>
                            <div class="product-grid" id="productGrid"></div>
                        </div>
                    </div>
                </div>

                <!-- Category Page -->
                <div class="page" id="categoryPage">
                    <div class="category-page-header">
                        <div class="category-tabs">
                            <div class="category-tab active">全部</div>
                            <div class="category-tab">苹果</div>
                            <div class="category-tab">柑橘</div>
                            <div class="category-tab">葡萄</div>
                            <div class="category-tab">草莓</div>
                            <div class="category-tab">芒果</div>
                        </div>
                    </div>
                    <div class="content">
                        <div class="product-section" style="margin: 10px;">
                            <div class="product-section-title">商品列表</div>
                            <div class="product-grid" id="categoryProducts"></div>
                        </div>
                    </div>
                </div>

                <!-- Cart Page -->
                <div class="page" id="cartPage">
                    <div class="cart-header">
                        <h3>购物车</h3>
                        <span class="cart-edit" onclick="showToast('管理购物车')">管理</span>
                    </div>
                    <div class="cart-list" id="cartList"></div>
                    <div class="cart-footer" id="cartFooter">
                        <div class="cart-footer-left">
                            <input type="checkbox" id="selectAll">
                            <span>全选</span>
                        </div>
                        <div class="cart-total">
                            <div class="price">¥<span id="totalPrice">0.00</span></div>
                            <div class="desc">共<span id="totalCount">0</span>件</div>
                        </div>
                        <div class="cart-checkout" onclick="showToast('跳转结算页')">去结算</div>
                    </div>
                </div>

                <!-- User Page -->
                <div class="page" id="userPage">
                    <div class="user-header">
                        <div class="user-info">
                            <div class="user-avatar">👤</div>
                            <div>
                                <div class="user-name">水果爱好者</div>
                                <div class="user-level">VIP黄金会员</div>
                            </div>
                        </div>
                        <div class="user-stats">
                            <div class="user-stat"><div class="num">128</div><div class="label">全部订单</div></div>
                            <div class="user-stat"><div class="num">2,580</div><div class="label">积分</div></div>
                            <div class="user-stat"><div class="num">8</div><div class="label">优惠券</div></div>
                        </div>
                    </div>

                    <div class="user-card">
                        <div class="user-menu-title">我的服务</div>
                        <div class="menu-grid">
                            <div class="menu-item" onclick="showToast('积分商城')"><div class="menu-icon"><svg viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg></div><span>积分商城</span></div>
                            <div class="menu-item" onclick="showToast('优惠券')"><div class="menu-icon"><svg viewBox="0 0 24 24"><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.58s1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41s-.23-1.06-.59-1.42z"/></svg></div><span>优惠券</span></div>
                            <div class="menu-item" onclick="showToast('收藏')"><div class="menu-icon"><svg viewBox="0 0 24 24"><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></div>
                            <div class="menu-item" onclick="showToast('设置')"><div class="menu-icon"><svg viewBox="0 0 24 24"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22l-1.92 3.32c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg></div><span>设置</span></div>
                        </div>
                    </div>

                    <div class="order-section">
                        <div class="order-header">
                            <h4>我的订单</h4>
                            <span onclick="showToast('查看全部')">全部订单 ></span>
                        </div>
                        <div class="order-tabs">
                            <div class="order-tab"><div class="order-tab-icon"><svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm.31-8.86c-1.77-.45-2.34-.94-2.34-1.67 0-.84.79-1.43 2.1-1.43 1.38 0 1.9.66 1.94 1.64h1.71c-.05-1.34-.87-2.57-2.49-2.97V5H10.9v1.69c-1.51.32-2.72 1.3-2.72 2.81 0 1.79 1.49 2.69 3.66 3.21 1.95.46 2.34 1.15 2.34 1.87 0 .53-.39 1.39-2.1 1.39-1.6 0-2.23-.72-2.32-1.64H8.04c.1 1.7 1.36 2.66 2.86 2.97V19h2.34v-1.67c1.52-.29 2.72-1.16 2.73-2.77-.01-2.2-1.9-2.96-3.66-3.42z"/></svg><span class="badge">2</span></div><span>待付款</span></div>
                            <div class="order-tab"><div class="order-tab-icon"><svg viewBox="0 0 24 24"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V5h14v14zm-5-7l-3 3.72L9 13l-3 4h12l-4-5z"/></svg></div><span>待发货</span></div>
                            <div class="order-tab"><div class="order-tab-icon"><svg viewBox="0 0 24 24"><path d="M17.66 8L12 2.35 6.34 8C4.78 9.56 4 11.64 4 13.64s.78 4.11 2.34 5.67 3.61 2.35 5.66 2.35 4.1-.79 5.66-2.35S20 15.64 20 13.64 19.22 9.56 17.66 8zM6 14c.01-2 .62-3.27 1.76-4.4L12 5.27l4.24 4.38C17.38 10.77 17.99 12 18 14H6z"/></svg><span class="badge">1</span></div><span>待收货</span></div>
                            <div class="order-tab"><div class="order-tab-icon"><svg viewBox="0 0 24 24"><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 12h-2v-2h2v2zm0-4h-2V6h2v4z"/></svg></div><span>待评价</span></div>
                        </div>
                    </div>

                    <div class="function-list">
                        <div class="function-item"><div class="function-icon"><svg viewBox="0 0 24 24"><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 class="function-name">收货地址</span><span class="function-arrow">></span></div>
                        <div class="function-item"><div class="function-icon"><svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/></svg></div><span class="function-name">联系客服</span><span class="function-arrow">></span></div>
                        <div class="function-item"><div class="function-icon"><svg viewBox="0 0 24 24"><path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"/></svg></div><span class="function-name">关于我们</span><span class="function-arrow">></span></div>
                    </div>
                </div>
            </div>

            <!-- Tab Bar -->
            <div class="tab-bar">
                <div class="tab-item active" data-tab="home" onclick="switchTab('home')">
                    <svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
                    <span>首页</span>
                </div>
                <div class="tab-item" data-tab="category" onclick="switchTab('category')">
                    <svg viewBox="0 0 24 24"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
                    <span>分类</span>
                </div>
                <div class="tab-item" data-tab="cart" onclick="switchTab('cart')">
                    <div class="tab-badge">
                        <svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
                        <span class="num" id="cartBadge">0</span>
                    </div>
                    <span>购物车</span>
                </div>
                <div class="tab-item" data-tab="user" onclick="switchTab('user')">
                    <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
                    <span>我的</span>
                </div>
            </div>

            <!-- Page Transition Indicator -->
            <div class="page-transition">
                <div class="transition-dot active"></div>
                <div class="transition-dot"></div>
                <div class="transition-dot"></div>
                <div class="transition-dot"></div>
            </div>
        </div>

        <!-- Detail Page -->
        <div class="detail-page" id="detailPage">
            <div class="status-bar" style="background: transparent; position: absolute; z-index: 20;">
                <div class="status-bar-content">
                    <span class="status-time" id="detailTime">9:41</span>
                    <div class="status-icons"></div>
                </div>
            </div>
            <div class="detail-header">
                <button onclick="closeDetail()"><svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg></button>
                <button><svg viewBox="0 0 24 24"><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></button>
            </div>
            <div class="detail-img" id="detailImg">🍎</div>
            <div class="detail-content">
                <div class="detail-price-row">
                    <span class="detail-price">¥<span id="detailPrice">12.80</span></span>
                    <span class="detail-original">¥<span id="detailOriginal">19.90</span></span>
                </div>
                <h2 class="detail-title" id="detailTitle">红富士苹果 精选大果</h2>
                <p class="detail-desc" id="detailDesc">精选陕西红富士个大饱满，口感脆甜多汁，自然成熟无添加，每一口都是阳光的味道。</p>
                <div class="detail-section">
                    <div class="detail-section-title">规格选择</div>
                    <div class="detail-tags">
                        <span class="detail-tag">500g</span>
                        <span class="detail-tag">1kg</span>
                        <span class="detail-tag">2kg</span>
                        <span class="detail-tag">5kg</span>
                    </div>
                </div>
                <div class="detail-section">
                    <div class="detail-section-title">服务保障</div>
                    <div class="detail-tags">
                        <span class="detail-tag">坏果包赔</span>
                        <span class="detail-tag">急速退款</span>
                        <span class="detail-tag">全程冷链</span>
                    </div>
                </div>
            </div>
            <div class="detail-bottom">
                <div class="detail-cart-btn" onclick="addToCartFromDetail()">加入购物车</div>
                <div class="detail-buy-btn" onclick="showToast('即将跳转到下单页')">立即购买</div>
            </div>
        </div>

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

    <script>
        // Product Data
        const products = [
            { id: 1, name: '红富士苹果 精选大果', desc: '个大饱满 口感脆甜', price: 12.80, original: 19.90, emoji: '🍎', sales: 2568 },
            { id: 2, name: '爱媛果冻橙 爆汁甜', desc: '皮薄多汁 入口即化', price: 29.90, original: 45.00, emoji: '🍊', tag: '热卖', sales: 1893 },
            { id: 3, name: '阳光玫瑰青提', desc: '香甜可口 颗颗饱满', price: 39.90, original: 68.00, emoji: '🍇', tag: '新品', sales: 1245 },
            { id: 4, name: '丹东草莓 大个香甜', desc: '新鲜采摘 香甜多汁', price: 45.00, original: 78.00, emoji: '🍓', sales: 3201 },
            { id: 5, name: '金煌芒果 新鲜当季', desc: '肉厚核薄 甜蜜可口', price: 18.80, original: 28.00, emoji: '🥭', sales: 987 },
            { id: 6, name: '奇异果 绿心大果', desc: '维C之王 酸甜适中', price: 22.50, original: 35.00, emoji: '🥝', sales: 1567 },
            { id: 7, name: '水蜜桃 软糯香甜', desc: '当季新鲜 入口即化', price: 25.80, original: 38.00, emoji: '🍑', sales: 834 },
            { id: 8, name: '无籽西瓜 冰爽一夏', desc: '皮薄肉红 清甜多汁', price: 19.90, original: 29.90, emoji: '🍉', sales: 4521 }
        ];

        let cart = [];
        let selectedProduct = null;
        let currentTab = 'home';
        const pageOrder = ['home', 'category', 'cart', 'user'];

        // Initialize
        document.addEventListener('DOMContentLoaded', () => {
            renderProducts();
            renderCategoryProducts();
            renderCart();
            startFlashTimer();
            startBannerSwiper();
            updateStatusTime();
            setInterval(updateStatusTime, 60000);
        });

        // Render Products
        function renderProducts() {
            const grid = document.getElementById('productGrid');
            grid.innerHTML = products.map(p => `
                <div class="product-card" onclick="showDetail(${p.id})">
                    <div class="product-img">
                        ${p.tag ? `<span class="product-tag">${p.tag}</span>` : ''}
                        <span>${p.emoji}</span>
                    </div>
                    <div class="product-info">
                        <div class="product-name">${p.name}</div>
                        <div class="product-desc">${p.desc}</div>
                        <div class="product-bottom">
                            <div class="product-price">¥${p.price.toFixed(2)}</div>
                            <div class="product-add" onclick="event.stopPropagation(); quickAdd(${p.id})">
                                <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
                            </div>
                        </div>
                    </div>
                </div>
            `).join('');
        }

        function renderCategoryProducts() {
            const grid = document.getElementById('categoryProducts');
            grid.innerHTML = products.map(p => `
                <div class="product-card" onclick="showDetail(${p.id})">
                    <div class="product-img">
                        ${p.tag ? `<span class="product-tag">${p.tag}</span>` : ''}
                        <span>${p.emoji}</span>
                    </div>
                    <div class="product-info">
                        <div class="product-name">${p.name}</div>
                        <div class="product-desc">${p.desc}</div>
                        <div class="product-bottom">
                            <div class="product-price">¥${p.price.toFixed(2)}</div>
                            <div class="product-add" onclick="event.stopPropagation(); quickAdd(${p.id})">
                                <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
                            </div>
                        </div>
                    </div>
                </div>
            `).join('');
        }

        // Cart Functions
        function quickAdd(id) {
            const product = products.find(p => p.id === id);
            const existing = cart.find(item => item.id === id);
            
            if (existing) {
                existing.quantity++;
            } else {
                cart.push({ ...product, quantity: 1 });
            }
            
            renderCart();
            showToast('已加入购物车');
            
            const badge = document.getElementById('cartBadge');
            badge.classList.add('bounce');
            setTimeout(() => badge.classList.remove('bounce'), 300);
        }

        function renderCart() {
            const list = document.getElementById('cartList');
            const badge = document.getElementById('cartBadge');
            
            badge.textContent = cart.reduce((sum, item) => sum + item.quantity, 0);
            
            if (cart.length === 0) {
                list.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-icon">🛒</div>
                        <h4>购物车是空的</h4>
                        <p>快去选购心仪的水果吧</p>
                        <div class="btn" onclick="switchTab('home')">去逛逛</div>
                    </div>
                `;
                document.getElementById('cartFooter').style.display = 'none';
                return;
            }
            
            document.getElementById('cartFooter').style.display = 'flex';
            
            list.innerHTML = `
                <div class="cart-store">
                    <div class="cart-store-header">
                        <input type="checkbox" checked>
                        <span class="cart-store-name">鲜果坊旗舰店</span>
                    </div>
                    ${cart.map(item => `
                        <div class="cart-item">
                            <input type="checkbox" checked>
                            <div class="cart-item-img">${item.emoji}</div>
                            <div class="cart-item-info">
                                <div class="cart-item-name">${item.name}</div>
                                <div class="cart-item-spec">500g</div>
                                <div class="cart-item-bottom">
                                    <div class="cart-item-price">¥${item.price.toFixed(2)}</div>
<div class="quantity">
                                        <button onclick="changeQuantity(${item.id}, -1)">-</button>
                                        <span>${item.quantity}</span>
                                        <button onclick="changeQuantity(${item.id}, 1)">+</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `).join('')}
                </div>
            `;
            
            const total = cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
            const count = cart.reduce((sum, item) => sum + item.quantity, 0);
            document.getElementById('totalPrice').textContent = total.toFixed(2);
            document.getElementById('totalCount').textContent = count;
        }

        function changeQuantity(id, delta) {
            const item = cart.find(item => item.id === id);
            if (item) {
                item.quantity += delta;
                if (item.quantity <= 0) {
                    cart = cart.filter(item => item.id !== id);
                }
                renderCart();
            }
        }

        // Tab Switch with Animation
        function switchTab(tab) {
            if (tab === currentTab) return;
            
            const currentIndex = pageOrder.indexOf(currentTab);
            const newIndex = pageOrder.indexOf(tab);
            const isForward = newIndex > currentIndex;
            
            // Update tab items
            document.querySelectorAll('.tab-item').forEach(item => {
                item.classList.toggle('active', item.dataset.tab === tab);
            });
            
            // Update transition dots
            document.querySelectorAll('.transition-dot').forEach((dot, i) => {
                dot.classList.toggle('active', i === newIndex);
            });
            
// Animate pages
            const pages = document.querySelectorAll('.page');
            pages.forEach(page => {
                const pageName = page.id.replace('Page', '');
                if (pageName === tab) {
                    page.classList.add('active');
                    page.classList.remove('prev');
                } else if (pageName === currentTab) {
                    if (isForward) {
                        page.classList.add('prev');
                    }
                    page.classList.remove('active');
                } else {
                    page.classList.remove('active', 'prev');
                }
            });
            
            currentTab = tab;
            
            if (tab === 'cart') {
                renderCart();
            }
        }

        // Detail Page
        function showDetail(id) {
            const product = products.find(p => p.id === id);
            if (!product) return;
            
            selectedProduct = product;
            document.getElementById('detailImg').textContent = product.emoji;
            document.getElementById('detailPrice').textContent = product.price.toFixed(2);
            document.getElementById('detailOriginal').textContent = product.original.toFixed(2);
            document.getElementById('detailTitle').textContent = product.name;
            document.getElementById('detailDesc').textContent = product.desc;
            
            document.getElementById('detailPage').classList.add('active');
        }

        function closeDetail() {
            document.getElementById('detailPage').classList.remove('active');
        }

        function addToCartFromDetail() {
            if (selectedProduct) {
                quickAdd(selectedProduct.id);
                closeDetail();
            }
        }

        // Flash Timer
        function startFlashTimer() {
            let seconds = 2 * 3600 + 34 * 60 + 56;
            
            setInterval(() => {
                seconds--;
                if (seconds < 0) seconds = 3600 * 3;
                
                const h = Math.floor(seconds / 3600);
                const m = Math.floor((seconds % 3600) / 60);
                const s = seconds % 60;
                
                document.getElementById('flashHour').textContent = h.toString().padStart(2, '0');
                document.getElementById('flashMin').textContent = m.toString().padStart(2, '0');
                document.getElementById('flashSec').textContent = s.toString().padStart(2, '0');
            }, 1000);
        }

        // Banner Swiper
        function startBannerSwiper() {
            const slides = document.querySelectorAll('.banner-slide');
            const dots = document.querySelectorAll('.banner-dot');
            let currentSlide = 0;
            
            setInterval(() => {
                slides[currentSlide].classList.remove('active');
                dots[currentSlide].classList.remove('active');
                
                currentSlide = (currentSlide + 1) % slides.length;
                
                slides[currentSlide].classList.add('active');
                dots[currentSlide].classList.add('active');
            }, 4000);
        }

        // Status Time
        function updateStatusTime() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            document.getElementById('statusTime').textContent = `${hours}:${minutes}`;
            document.getElementById('detailTime').textContent = `${hours}:${minutes}`;
        }

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

        // Category tabs
        document.querySelectorAll('.category-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });
    </script>
</body>
</html>