编辑页面

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>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: #f5f5f5;
            max-width: 414px;
            margin: 0 auto;
            min-height: 100vh;
            position: relative;
        }
        .page {
            display: none;
            min-height: 100vh;
            background: #f5f5f5;
            padding-bottom: 60px;
        }
        .page.active {
            display: block;
        }
        /* 首页样式 */
        .home-header {
            background: linear-gradient(135deg, #2d5016 0%, #4a7c23 100%);
            color: white;
            padding: 15px;
            position: relative;
        }
        .home-header .location {
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 5px;
            margin-bottom: 10px;
        }
        .home-header .search-bar {
            background: rgba(255,255,255,0.2);
            border-radius: 20px;
            padding: 8px 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .home-header .search-bar input {
            background: transparent;
            border: none;
            color: white;
            width: 100%;
            font-size: 14px;
            outline: none;
        }
        .home-header .search-bar input::placeholder {
            color: rgba(255,255,255,0.7);
        }
        .banner {
            background: white;
            margin: 10px;
            border-radius: 8px;
            overflow: hidden;
            height: 140px;
        }
        .banner img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .banner-placeholder {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #4a7c23, #2d5016);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 18px;
        }
        .category-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            padding: 15px;
            background: white;
            margin: 0 10px;
            border-radius: 8px;
        }
        .category-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }
        .category-icon {
            width: 45px;
            height: 45px;
            background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 22px;
        }
        .category-item span {
            font-size: 12px;
            color: #333;
        }
        .section-title {
            padding: 15px 15px 10px;
            font-size: 16px;
            font-weight: 600;
            color: #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .section-title .more {
            font-size: 12px;
            color: #999;
            font-weight: normal;
        }
        .product-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            padding: 0 10px;
        }
        .product-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            cursor: pointer;
        }
        .product-card img {
            width: 100%;
            height: 120px;
            object-fit: cover;
            background: linear-gradient(135deg, #f5f5f5, #e0e0e0);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
        }
        .product-card .product-img-placeholder {
            width: 100%;
            height: 120px;
            background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
        }
        .product-card .product-info {
            padding: 10px;
        }
        .product-card .product-name {
            font-size: 14px;
            color: #333;
            line-height: 1.4;
            height: 39px;
            overflow: hidden;
            margin-bottom: 8px;
        }
        .product-card .product-price {
            color: #d63031;
            font-size: 16px;
            font-weight: 600;
        }
        .product-card .product-price .original {
            font-size: 12px;
            color: #999;
            text-decoration: line-through;
            font-weight: normal;
            margin-left: 5px;
        }
        /* 分类页 */
        .category-header {
            background: #4a7c23;
            color: white;
            padding: 15px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .category-header input {
            flex: 1;
            background: rgba(255,255,255,0.2);
            border: none;
            border-radius: 20px;
            padding: 8px 15px;
            color: white;
            font-size: 14px;
            outline: none;
        }
        .category-header input::placeholder {
            color: rgba(255,255,255,0.7);
        }
        .back-btn {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        .category-content {
            display: flex;
            height: calc(100vh - 60px);
        }
        .category-left {
            width: 80px;
            background: #f5f5f5;
            overflow-y: auto;
        }
        .category-left-item {
            padding: 15px 10px;
            text-align: center;
            font-size: 13px;
            color: #333;
            cursor: pointer;
            border-left: 3px solid transparent;
        }
        .category-left-item.active {
            background: white;
            color: #4a7c23;
            border-left-color: #4a7c23;
        }
        .category-right {
            flex: 1;
            background: white;
            padding: 10px;
            overflow-y: auto;
        }
        .sub-category {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 15px;
        }
        .sub-category-item {
            background: #f5f5f5;
            padding: 8px 15px;
            border-radius: 15px;
            font-size: 13px;
            cursor: pointer;
        }
        .sub-category-item.active {
            background: #4a7c23;
            color: white;
        }
        /* 商品列表页 */
        .product-list-header {
            background: white;
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
        }
        .product-list-header input {
            flex: 1;
            background: #f5f5f5;
            border: none;
            border-radius: 20px;
            padding: 8px 15px;
            font-size: 14px;
            outline: none;
        }
        .filter-tabs {
            display: flex;
            background: white;
            padding: 10px 15px;
            gap: 20px;
            border-bottom: 1px solid #eee;
        }
        .filter-tab {
            font-size: 13px;
            color: #666;
            cursor: pointer;
        }
        .filter-tab.active {
            color: #4a7c23;
            font-weight: 600;
        }
        /* 商品详情页 */
        .detail-header {
            background: white;
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .detail-swiper {
            background: white;
            height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 80px;
            color: #4a7c23;
        }
        .detail-info {
            background: white;
            padding: 15px;
        }
        .detail-price {
            color: #d63031;
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .detail-price .original {
            font-size: 14px;
            color: #999;
            text-decoration: line-through;
            font-weight: normal;
            margin-left: 10px;
        }
        .detail-name {
            font-size: 16px;
            color: #333;
            line-height: 1.5;
            margin-bottom: 10px;
        }
        .detail-desc {
            font-size: 13px;
            color: #666;
            line-height: 1.6;
        }
        .detail-section {
            background: white;
            margin-top: 10px;
            padding: 15px;
        }
        .detail-section-title {
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
        }
        .detail-section-content {
            font-size: 13px;
            color: #666;
            line-height: 1.8;
        }
        .detail-footer {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            max-width: 414px;
            width: 100%;
            background: white;
            padding: 10px 15px;
            display: flex;
            gap: 10px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        }
        .detail-footer .btn-collect {
            width: 50px;
            background: #f5f5f5;
            border: none;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            cursor: pointer;
            font-size: 10px;
            color: #666;
        }
        .detail-footer .btn-cart {
            width: 50px;
            background: #f5f5f5;
            border: none;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 3px;
            cursor: pointer;
            font-size: 10px;
            color: #666;
        }
        .detail-footer .btn-add-cart {
            flex: 1;
            background: linear-gradient(135deg, #4a7c23, #2d5016);
            color: white;
            border: none;
            border-radius: 25px;
            font-size: 15px;
            cursor: pointer;
        }
        .detail-footer .btn-buy-now {
            flex: 1;
            background: #d63031;
            color: white;
            border: none;
            border-radius: 25px;
            font-size: 15px;
            cursor: pointer;
        }
        /* 购物车页 */
        .cart-header {
            background: white;
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .cart-header h1 {
            font-size: 18px;
        }
        .cart-header .edit {
            color: #d63031;
            font-size: 14px;
            cursor: pointer;
        }
        .cart-store {
            background: white;
            margin-top: 10px;
            padding: 15px;
        }
        .cart-store-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }
        .cart-store-header input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: #4a7c23;
        }
        .cart-store-name {
            flex: 1;
            font-size: 14px;
            font-weight: 600;
        }
        .cart-item {
            display: flex;
            gap: 10px;
            padding: 10px 0;
            border-top: 1px solid #f5f5f5;
        }
        .cart-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: #4a7c23;
            margin-top: 25px;
        }
        .cart-item-img {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
        }
        .cart-item-info {
            flex: 1;
        }
        .cart-item-name {
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
        }
        .cart-item-spec {
            font-size: 12px;
            color: #999;
            margin-bottom: 10px;
        }
        .cart-item-bottom {
            display: flex;
align-items: center;
            justify-content: space-between;
        }
        .cart-item-price {
            color: #d63031;
            font-size: 15px;
            font-weight: 600;
        }
        .cart-item-count {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .cart-item-count button {
            width: 24px;
            height: 24px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 3px;
            cursor: pointer;
        }
        .cart-item-count span {
            min-width: 30px;
            text-align: center;
        }
        .cart-footer {
            position: fixed;
            bottom: 60px;
            left: 50%;
            transform: translateX(-50%);
            max-width: 414px;
            width: 100%;
            background: white;
            padding: 15px;
            display: flex;
            align-items: center;
            gap: 15px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        }
        .cart-footer input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: #4a7c23;
        }
        .cart-footer .total-info {
            flex: 1;
        }
        .cart-footer .total-price {
            color: #d63031;
            font-size: 16px;
            font-weight: 600;
        }
        .cart-footer .total-count {
            font-size: 12px;
            color: #999;
        }
        .cart-footer .btn-settle {
            background: linear-gradient(135deg, #4a7c23, #2d5016);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 10px 25px;
            font-size: 15px;
            cursor: pointer;
        }
        /* 确认订单页 */
        .order-header {
            background: white;
            padding: 15px;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .order-section {
            background: white;
            margin-top: 10px;
            padding: 15px;
        }
        .order-address {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            cursor: pointer;
        }
        .order-address-icon {
            width: 40px;
            height: 40px;
            background: #4a7c23;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
        }
        .order-address-info {
            flex: 1;
        }
        .order-address-name {
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        .order-address-detail {
            font-size: 13px;
            color: #666;
            line-height: 1.5;
        }
        .order-item {
            display: flex;
            gap: 10px;
            padding: 15px 0;
            border-bottom: 1px solid #f5f5f5;
        }
        .order-item:last-child {
            border-bottom: none;
        }
        .order-item-img {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 25px;
        }
        .order-item-info {
            flex: 1;
        }
        .order-item-name {
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
        }
        .order-item-spec {
            font-size: 12px;
            color: #999;
        }
        .order-item-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 5px;
        }
        .order-item-price {
            color: #d63031;
        }
        .order-item-count {
            color: #999;
            font-size: 13px;
        }
        .order-row {
            display: flex;
            justify-content: space-between;
            padding: 12px 0;
            border-bottom: 1px solid #f5f5f5;
        }
        .order-row:last-child {
            border-bottom: none;
        }
        .order-row-label {
            font-size: 14px;
            color: #666;
        }
        .order-row-value {
            font-size: 14px;
            color: #333;
        }
        .order-row-value.red {
            color: #d63031;
        }
        .order-footer {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            max-width: 414px;
            width: 100%;
            background: white;
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 15px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        }
        .order-footer .total-text {
            font-size: 14px;
            color: #666;
        }
        .order-footer .total-amount {
            color: #d63031;
            font-size: 18px;
            font-weight: 600;
        }
        .order-footer .btn-submit {
            background: linear-gradient(135deg, #4a7c23, #2d5016);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 10px 30px;
            font-size: 15px;
            cursor: pointer;
        }
        /* 支付页 */
        .pay-header {
            background: white;
            padding: 30px 15px;
            text-align: center;
        }
        .pay-amount {
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
        }
        .pay-amount span {
            font-size: 32px;
            color: #d63031;
            font-weight: 600;
        }
        .pay-methods {
            background: white;
            margin-top: 10px;
            padding: 15px;
        }
        .pay-method {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 15px 0;
            border-bottom: 1px solid #f5f5f5;
            cursor: pointer;
        }
        .pay-method:last-child {
            border-bottom: none;
        }
        .pay-method-icon {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #07c160, #06ad56);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
        }
        .pay-method-name {
            flex: 1;
            font-size: 15px;
        }
        .pay-method-check {
            width: 20px;
            height: 20px;
            border: 2px solid #ddd;
            border-radius: 50%;
        }
        .pay-method.selected .pay-method-check {
            border-color: #4a7c23;
            background: #4a7c23;
            position: relative;
        }
        .pay-method.selected .pay-method-check::after {
            content: '✓';
            color: white;
            font-size: 12px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .pay-footer {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            max-width: 414px;
            width: 100%;
            background: white;
            padding: 15px;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        }
        .pay-footer .btn-pay {
            width: 100%;
            background: linear-gradient(135deg, #4a7c23, #2d5016);
            color: white;
            border: none;
            border-radius: 25px;
            padding: 15px;
            font-size: 16px;
            cursor: pointer;
        }
        /* 支付成功页 */
        .pay-success {
            text-align: center;
            padding: 50px 20px;
        }
        .pay-success-icon {
            width: 80px;
            height: 80px;
            background: #4a7c23;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            font-size: 40px;
            color: white;
        }
        .pay-success h2 {
            font-size: 20px;
            margin-bottom: 10px;
        }
        .pay-success p {
            color: #666;
            font-size: 14px;
            margin-bottom: 30px;
        }
        .pay-success .btns {
            display: flex;
            gap: 15px;
        }
        .pay-success .btn-check {
            flex: 1;
            background: #f5f5f5;
            color: #333;
            border: none;
            border-radius: 25px;
            padding: 12px;
            font-size: 15px;
            cursor: pointer;
        }
        .pay-success .btn-home {
            flex: 1;
            background: linear-gradient(135deg, #4a7c23, #2d5016);
            color: white;
            border: none;
            border-radius: 25px;
            padding: 12px;
            font-size: 15px;
            cursor: pointer;
        }
        /* 订单页 */
        .order-tabs {
            display: flex;
            background: white;
            padding: 15px 0;
        }
        .order-tab {
            flex: 1;
            text-align: center;
            font-size: 14px;
            color: #666;
            cursor: pointer;
            position: relative;
        }
        .order-tab.active {
            color: #4a7c23;
            font-weight: 600;
        }
        .order-tab.active::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 3px;
            background: #4a7c23;
            border-radius: 2px;
        }
        .order-list {
            padding: 10px;
        }
        .order-card {
            background: white;
            border-radius: 8px;
            margin-bottom: 10px;
            overflow: hidden;
        }
        .order-card-header {
            padding: 12px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #f5f5f5;
        }
        .order-card-store {
            font-size: 13px;
            color: #333;
        }
        .order-card-status {
            font-size: 13px;
            color: #d63031;
        }
        .order-card-item {
            display: flex;
            gap: 10px;
            padding: 12px 15px;
        }
        .order-card-img {
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        .order-card-info {
            flex: 1;
        }
        .order-card-name {
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
        }
        .order-card-spec {
            font-size: 12px;
            color: #999;
        }
        .order-card-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 5px;
        }
        .order-card-price {
            color: #d63031;
            font-size: 14px;
        }
        .order-card-count {
            color: #999;
            font-size: 13px;
        }
        .order-card-footer {
            padding: 12px 15px;
            display: flex;
            justify-content: flex-end;
            gap: 10px;
            border-top: 1px solid #f5f5f5;
        }
        .order-card-btn {
            padding: 6px 15px;
            border-radius: 15px;
            font-size: 13px;
            cursor: pointer;
        }
        .order-card-btn.primary {
            background: linear-gradient(135deg, #4a7c23, #2d5016);
            color: white;
            border: none;
        }
        .order-card-btn.default {
            background: white;
            color: #666;
            border: 1px solid #ddd;
        }
        /* 物流页 */
        .logistics-info {
            background: white;
            padding: 15px;
            margin: 10px;
            border-radius: 8px;
        }
        .logistics-header {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .logistics-icon {
            width: 50px;
            height: 50px;
            background: #4a7c23;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 25px;
        }
        .logistics-status {
            flex: 1;
        }
        .logistics-status-text {
            font-size: 15px;
            color: #333;
            font-weight: 600;
            margin-bottom: 5px;
        }
        .logistics-time {
            font-size: 12px;
            color: #999;
        }
        .logistics-timeline {
            margin-top: 20px;
            padding-left: 20px;
            border-left: 2px solid #e0e0e0;
        }
        .logistics-item {
            position: relative;
            padding-left: 20px;
            padding-bottom: 20px;
        }
        .logistics-item::before {
            content: '';
            position: absolute;
            left: -25px;
            top: 0;
            width: 10px;
            height: 10px;
            background: #ddd;
            border-radius: 50%;
        }
        .logistics-item.active::before {
            background: #4a7c23;
        }
        .logistics-item-content {
            font-size: 13px;
            color: #333;
            line-height: 1.5;
        }
        .logistics-item-time {
            font-size: 12px;
            color: #999;
            margin-top: 5px;
        }
        /* 个人中心页 */
        .profile-header {
            background: linear-gradient(135deg, #2d5016 0%, #4a7c23 100%);
            padding: 30px 15px;
            color: white;
        }
        .profile-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .profile-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: 30px;
        }
        .profile-name {
            font-size: 18px;
            margin-bottom: 5px;
        }
        .profile-level {
            font-size: 12px;
            background: rgba(255,255,255,0.2);
            padding: 2px 10px;
            border-radius: 10px;
        }
        .profile-stats {
            display: flex;
            margin-top: 20px;
            text-align: center;
        }
        .profile-stat {
            flex: 1;
        }
        .profile-stat-value {
            font-size: 18px;
            font-weight: 600;
        }
        .profile-stat-label {
            font-size: 12px;
            opacity: 0.8;
        }
        .profile-orders {
            background: white;
            margin: 10px;
            border-radius: 8px;
            padding: 15px;
        }
        .profile-orders-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }
        .profile-orders-title {
            font-size: 15px;
            font-weight: 600;
        }
        .profile-orders-more {
            font-size: 13px;
            color: #999;
        }
        .profile-order-items {
            display: flex;
            justify-content: space-around;
        }
        .profile-order-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }
        .profile-order-icon {
            width: 40px;
            height: 40px;
            background: #f5f5f5;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        .profile-order-label {
            font-size: 12px;
            color: #666;
        }
        .profile-menu {
            background: white;
            margin: 10px;
            border-radius: 8px;
        }
        .profile-menu-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #f5f5f5;
            cursor: pointer;
        }
        .profile-menu-item:last-child {
            border-bottom: none;
        }
        .profile-menu-icon {
            width: 35px;
            height: 35px;
            background: #f5f5f5;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-right: 12px;
        }
        .profile-menu-text {
            flex: 1;
font-size: 14px;
            color: #333;
        }
        .profile-menu-arrow {
            color: #ccc;
        }
        /* 优惠券页 */
        .coupon-tabs {
            display: flex;
            background: white;
            padding: 15px 0;
        }
        .coupon-tab {
            flex: 1;
            text-align: center;
            font-size: 14px;
            color: #666;
            cursor: pointer;
            position: relative;
        }
        .coupon-tab.active {
            color: #4a7c23;
            font-weight: 600;
        }
        .coupon-tab.active::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 3px;
            background: #4a7c23;
            border-radius: 2px;
        }
        .coupon-list {
            padding: 10px;
        }
        .coupon-card {
            background: white;
            border-radius: 8px;
            margin-bottom: 10px;
            overflow: hidden;
            display: flex;
        }
        .coupon-left {
            background: linear-gradient(135deg, #d63031, #c0392b);
            color: white;
            padding: 20px 15px;
            text-align: center;
            min-width: 100px;
        }
        .coupon-value {
            font-size: 28px;
            font-weight: 600;
        }
        .coupon-unit {
            font-size: 14px;
        }
        .coupon-threshold {
            font-size: 11px;
            opacity: 0.8;
            margin-top: 5px;
        }
        .coupon-right {
            flex: 1;
            padding: 15px;
        }
        .coupon-name {
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
        }
        .coupon-desc {
            font-size: 12px;
            color: #999;
            margin-bottom: 10px;
        }
        .coupon-time {
            font-size: 11px;
            color: #999;
        }
        .coupon-status {
            display: inline-block;
            padding: 3px 10px;
            border-radius: 10px;
            font-size: 11px;
            margin-left: 10px;
        }
        .coupon-status.unused {
            background: #d63031;
            color: white;
        }
        .coupon-status.used {
            background: #ddd;
            color: #999;
        }
        /* 秒杀页 */
        .seckill-header {
            background: linear-gradient(135deg, #d63031, #c0392b);
            color: white;
            padding: 15px;
            text-align: center;
        }
        .seckill-time {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        .seckill-time span {
            background: rgba(0,0,0,0.3);
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 18px;
            font-weight: 600;
        }
        .seckill-tip {
            font-size: 12px;
            opacity: 0.8;
        }
        .seckill-products {
            padding: 10px;
        }
        .seckill-product {
            background: white;
            border-radius: 8px;
            padding: 15px;
            display: flex;
            gap: 15px;
            margin-bottom: 10px;
        }
        .seckill-product-img {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 40px;
        }
        .seckill-product-info {
            flex: 1;
        }
        .seckill-product-name {
            font-size: 14px;
            color: #333;
            margin-bottom: 10px;
        }
        .seckill-product-price {
            color: #d63031;
            font-size: 18px;
            font-weight: 600;
        }
        .seckill-product-price .original {
            font-size: 12px;
            color: #999;
            text-decoration: line-through;
            font-weight: normal;
            margin-left: 5px;
        }
        .seckill-product-progress {
            margin-top: 10px;
        }
        .seckill-product-bar {
            height: 8px;
            background: #f5f5f5;
            border-radius: 4px;
            overflow: hidden;
        }
        .seckill-product-fill {
            height: 100%;
            background: #d63031;
            border-radius: 4px;
        }
        .seckill-product-count {
            font-size: 11px;
            color: #999;
            margin-top: 5px;
        }
        /* 拼团页 */
        .group-header {
            background: linear-gradient(135deg, #4a7c23, #2d5016);
            color: white;
            padding: 15px;
            text-align: center;
        }
        .group-buy-list {
            padding: 10px;
        }
        .group-card {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
        }
        .group-card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        .group-card-avatar {
            width: 35px;
            height: 35px;
            background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
        }
        .group-card-user {
            flex: 1;
        }
        .group-card-name {
            font-size: 13px;
            color: #333;
        }
        .group-card-time {
            font-size: 11px;
            color: #999;
        }
        .group-card-status {
            font-size: 12px;
            color: #d63031;
        }
        .group-card-product {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }
        .group-card-img {
            width: 70px;
            height: 70px;
            background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 25px;
        }
        .group-card-info {
            flex: 1;
        }
        .group-card-name {
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
        }
        .group-card-price {
            color: #d63031;
            font-size: 15px;
            font-weight: 600;
        }
        .group-card-people {
            font-size: 12px;
            color: #999;
        }
        .group-card-btn {
            background: linear-gradient(135deg, #4a7c23, #2d5016);
            color: white;
            border: none;
            border-radius: 15px;
            padding: 8px 20px;
            font-size: 13px;
            cursor: pointer;
        }
        /* 满减页 */
        .discount-header {
            background: linear-gradient(135deg, #e67e22, #d35400);
            color: white;
            padding: 15px;
            text-align: center;
        }
        .discount-info {
            font-size: 13px;
            opacity: 0.9;
            margin-top: 10px;
        }
        .discount-list {
            padding: 10px;
        }
        .discount-card {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
        }
        .discount-card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        .discount-tag {
            background: #e67e22;
            color: white;
            padding: 3px 8px;
            border-radius: 3px;
            font-size: 12px;
            font-weight: 600;
        }
        .discount-title {
            font-size: 15px;
            font-weight: 600;
        }
        .discount-desc {
            font-size: 13px;
            color: #666;
            margin-bottom: 10px;
        }
        .discount-time {
            font-size: 12px;
            color: #999;
            margin-bottom: 10px;
        }
        .discount-btn {
            background: linear-gradient(135deg, #e67e22, #d35400);
            color: white;
            border: none;
            border-radius: 15px;
            padding: 8px 20px;
            font-size: 13px;
            cursor: pointer;
        }
        /* 积分页 */
        .points-header {
            background: linear-gradient(135deg, #4a7c23, #2d5016);
            color: white;
            padding: 20px;
            text-align: center;
        }
        .points-value {
            font-size: 36px;
            font-weight: 600;
        }
        .points-tip {
            font-size: 13px;
            opacity: 0.8;
            margin-top: 5px;
        }
        .points-tabs {
            display: flex;
            background: white;
            padding: 15px 0;
        }
        .points-tab {
            flex: 1;
            text-align: center;
            font-size: 14px;
            color: #666;
            cursor: pointer;
            position: relative;
        }
        .points-tab.active {
            color: #4a7c23;
            font-weight: 600;
        }
        .points-tab.active::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 30px;
            height: 3px;
            background: #4a7c23;
            border-radius: 2px;
        }
        .points-list {
            padding: 10px;
        }
        .points-item {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .points-item-info {
            flex: 1;
        }
        .points-item-title {
            font-size: 14px;
            color: #333;
            margin-bottom: 5px;
        }
        .points-item-time {
            font-size: 12px;
            color: #999;
        }
        .points-item-value {
            font-size: 16px;
            font-weight: 600;
        }
        .points-item-value.income {
            color: #4a7c23;
        }
        .points-item-value.expense {
            color: #d63031;
        }
        /* 地址页 */
        .address-list {
            padding: 10px;
        }
        .address-card {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
        }
        .address-card-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        .address-name {
            font-size: 15px;
            font-weight: 600;
        }
        .address-phone {
            font-size: 14px;
            color: #666;
        }
        .address-detail {
            font-size: 13px;
            color: #333;
            line-height: 1.5;
            margin-bottom: 10px;
        }
        .address-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 10px;
            border-top: 1px solid #f5f5f5;
        }
        .address-default {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 13px;
            color: #4a7c23;
            cursor: pointer;
        }
        .address-actions {
            display: flex;
            gap: 15px;
        }
        .address-action {
            font-size: 13px;
            color: #666;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 3px;
        }
        .address-add {
            background: white;
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            border: 2px dashed #ddd;
            cursor: pointer;
        }
        .address-add-icon {
            font-size: 40px;
            color: #ddd;
            margin-bottom: 10px;
        }
        .address-add-text {
            font-size: 14px;
            color: #999;
        }
        /* 收藏页 */
        .collect-list {
            padding: 10px;
        }
        .collect-item {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
            display: flex;
            gap: 15px;
        }
        .collect-img {
            width: 90px;
            height: 90px;
            background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 35px;
        }
        .collect-info {
            flex: 1;
        }
        .collect-name {
            font-size: 14px;
            color: #333;
            margin-bottom: 10px;
        }
        .collect-price {
            color: #d63031;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        .collect-action {
            display: flex;
            gap: 10px;
        }
        .collect-btn {
            padding: 5px 15px;
            border-radius: 15px;
            font-size: 12px;
            cursor: pointer;
        }
        .collect-btn-add {
            background: linear-gradient(135deg, #4a7c23, #2d5016);
            color: white;
            border: none;
        }
        .collect-btn-delete {
            background: white;
            color: #999;
            border: 1px solid #ddd;
        }
        /* 评价页 */
        .review-list {
            padding: 10px;
        }
        .review-card {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
        }
        .review-card-header {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 10px;
        }
        .review-avatar {
            width: 35px;
            height: 35px;
            background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
        }
        .review-user {
            flex: 1;
        }
        .review-name {
            font-size: 13px;
            color: #333;
        }
        .review-time {
            font-size: 11px;
            color: #999;
        }
        .review-stars {
            color: #f5c518;
            font-size: 14px;
        }
        .review-content {
            font-size: 14px;
            color: #333;
            line-height: 1.6;
            margin-bottom: 10px;
        }
        .review-product {
            display: flex;
            gap: 8px;
        }
        .review-product-img {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
            border-radius: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        .review-product-info {
            flex: 1;
        }
        .review-product-name {
            font-size: 13px;
            color: #333;
        }
        .review-product-spec {
            font-size: 12px;
            color: #999;
        }
        /* 底部导航 */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            max-width: 414px;
            width: 100%;
            background: white;
            display: flex;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
            z-index: 100;
        }
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 8px 0;
            cursor: pointer;
            color: #999;
            font-size: 10px;
        }
        .tab-item.active {
            color: #4a7c23;
        }
        .tab-icon {
            font-size: 22px;
            margin-bottom: 3px;
        }
        .tab-bar.no-home {
            display: none;
        }
        /* Toast提示 */
        .toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 15px 30px;
            border-radius: 10px;
            font-size: 14px;
            z-index: 1000;
            display: none;
        }
        .toast.show {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        /* 页面标题 */
        .page-title {
            background: white;
            padding: 15px;
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 16px;
            font-weight: 600;
        }
        .page-title .back {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <!-- 首页 -->
    <div id="page-home" class="page active">
        <div class="home-header">
            <div class="location">
                <span>📍</span>
                <span>上海市</span>
            </div>
            <div class="search-bar">
                <span>🔍</span>
                <input type="text" placeholder="搜索茶叶商品" onclick="showPage('page-search')">
            </div>
        </div>
        <div class="banner">
            <div class="banner-placeholder">🍃 茶悦商城</div>
        </div>
        <div class="category-grid">
            <div class="category-item" onclick="showPage('page-category')">
                <div class="category-icon">🍵</div>
                <span>绿茶</span>
            </div>
            <div class="category-item" onclick="showPage('page-category')">
                <div class="category-icon">🫖</div>
                <span>红茶</span>
            </div>
            <div class="category-item" onclick="showPage('page-category')">
                <div class="category-icon">🍂</div>
                <span>普洱</span>
            </div>
            <div class="category-item" onclick="showPage('page-category')">
                <div class="category-icon">🌼</div>
                <span>白茶</span>
            </div>
            <div class="category-item" onclick="showPage('page-category')">
                <div class="category-icon">🍃</div>
                <span>乌龙茶</span>
            </div>
            <div class="category-item" onclick="showPage('page-category')">
                <div class="category-icon">🫘</div>
                <span>花茶</span>
            </div>
            <div class="category-item" onclick="showPage('page-category')">
                <div class="category-icon">🍯</div>
                <span>茶具</span>
            </div>
            <div class="category-item" onclick="showPage('page-category')">
                <div class="category-icon">📦</div>
                <span>礼盒</span>
            </div>
        </div>
        <div class="section-title">
            热门商品
            <span class="more" onclick="showPage('page-product-list')">更多 ></span>
        </div>
        <div class="product-grid">
            <div class="product-card" onclick="showPage('page-detail')">
                <div class="product-img-placeholder">🍵</div>
                <div class="product-info">
                    <div class="product-name">西湖龙井 明前特级绿茶 2024新茶</div>
                    <div class="product-price">¥168 <span class="original">¥268</span></div>
                </div>
            </div>
            <div class="product-card" onclick="showPage('page-detail')">
                <div class="product-img-placeholder">🫖</div>
                <div class="product-info">
                    <div class="product-name">正山小种 武夷山红茶 蜜香型</div>
                    <div class="product-price">¥128 <span class="original">¥198</span></div>
                </div>
            </div>
            <div class="product-card" onclick="showPage('page-detail')">
                <div class="product-img-placeholder">🍂</div>
                <div class="product-info">
                    <div class="product-name">云南古树普洱 生茶357g</div>
                    <div class="product-price">¥298 <span class="original">¥458</span></div>
                </div>
            </div>
            <div class="product-card" onclick="showPage('page-detail')">
                <div class="product-img-placeholder">🌼</div>
                <div class="product-info">
                    <div class="product-name">福鼎白茶 白毫银针 特级</div>
                    <div class="product-price">¥388 <span class="original">¥588</span></div>
                </div>
            </div>
        </div>
        <div class="tab-bar">
            <div class="tab-item active" onclick="showPage('page-home')">
                <div class="tab-icon">🏠</div>
                <div>首页</div>
            </div>
            <div class="tab-item" onclick="showPage('page-category')">
                <div class="tab-icon">📑</div>
                <div>分类</div>
            </div>
            <div class="tab-item" onclick="showPage('page-cart')">
                <div class="tab-icon">🛒</div>
                <div>购物车</div>
            </div>
            <div class="tab-item" onclick="showPage('page-profile')">
                <div class="tab-icon">👤</div>
                <div>我的</div>
            </div>
        </div>
    </div>

    <!-- 分类页 -->
    <div id="page-category" class="page">
        <div class="category-header">
            <div class="back-btn" onclick="showPage('page-home')">←</div>
            <input type="text" placeholder="搜索分类商品">
            <span>🔍</span>
        </div>
        <div class="category-content">
            <div class="category-left">
                <div class="category-left-item active" onclick="selectCategory(this)">绿茶</div>
                <div class="category-left-item" onclick="selectCategory(this)">红茶</div>
                <div class="category-left-item" onclick="selectCategory(this)">普洱</div>
                <div class="category-left-item" onclick="selectCategory(this)">白茶</div>
                <div class="category-left-item" onclick="selectCategory(this)">乌龙茶</div>
                <div class="category-left-item" onclick="selectCategory(this)">花茶</div>
                <div class="category-left-item" onclick="selectCategory(this)">茶具</div>
                <div class="category-left-item" onclick="selectCategory(this)">礼盒</div>
            </div>
            <div class="category-right">
                <div class="sub-category">
                    <div class="sub-category-item active" onclick="selectSubCategory(this, 'page-product-list')">龙井</div>
                    <div class="sub-category-item" onclick="selectSubCategory(this, 'page-product-list')">碧螺春</div>
                    <div class="sub-category-item" onclick="selectSubCategory(this, 'page-product-list')">毛尖</div>
                    <div class="sub-category-item" onclick="selectSubCategory(this, 'page-product-list')">毛峰</div>
                    <div class="sub-category-item" onclick="selectSubCategory(this, 'page-product-list')">安吉白茶</div>
                    <div class="sub-category-item" onclick="selectSubCategory(this, 'page-product-list')">六安瓜片</div>
                </div>
                <div class="product-grid">
                    <div class="product-card" onclick="showPage('page-detail')">
                        <div class="product-img-placeholder">🍵</div>
                        <div class="product-info">
                            <div class="product-name">西湖龙井 明前特级</div>
                            <div class="product-price">¥168</div>
                        </div>
                    </div>
                    <div class="product-card" onclick="showPage('page-detail')">
                        <div class="product-img-placeholder">🍵</div>
                        <div class="product-info">
                            <div class="product-name">洞庭碧螺春 特级</div>
                            <div class="product-price">¥138</div>
                        </div>
                    </div>
                    <div class="product-card" onclick="showPage('page-detail')">
                        <div class="product-img-placeholder">🍵</div>
                        <div class="product-info">
                            <div class="product-name">信阳毛尖 一级</div>
                            <div class="product-price">¥98</div>
                        </div>
                    </div>
                    <div class="product-card" onclick="showPage('page-detail')">
                        <div class="product-img-placeholder">🍵</div>
                        <div class="product-info">
                            <div class="product-name">黄山毛峰 特级</div>
                            <div class="product-price">¥128</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-bar">
            <div class="tab-item" onclick="showPage('page-home')">
                <div class="tab-icon">🏠</div>
                <div>首页</div>
            </div>
            <div class="tab-item active" onclick="showPage('page-category')">
                <div class="tab-icon">📑</div>
                <div>分类</div>
            </div>
            <div class="tab-item" onclick="showPage('page-cart')">
                <div class="tab-icon">🛒</div>
                <div>购物车</div>
            </div>
            <div class="tab-item" onclick="showPage('page-profile')">
                <div class="tab-icon">👤</div>
                <div>我的</div>
            </div>
        </div>
    </div>

    <!-- 商品列表页 -->
    <div id="page-product-list" class="page">
        <div class="page-title">
            <span class="back" onclick="historyBack()">←</span>
            <span>商品列表</span>
        </div>
        <div class="product-list-header">
            <input type="text" placeholder="搜索商品">
            <span>🔍</span>
        </div>
        <div class="filter-tabs">
            <div class="filter-tab active" onclick="selectFilter(this)">综合</div>
            <div class="filter-tab" onclick="selectFilter(this)">销量</div>
            <div class="filter-tab" onclick="selectFilter(this)">价格</div>
            <div class="filter-tab" onclick="selectFilter(this)">筛选</div>
        </div>
        <div class="product-grid" style="margin-top: 10px;">
            <div class="product-card" onclick="showPage('page-detail')">
                <div class="product-img-placeholder">🍵</div>
                <div class="product-info">
                    <div class="product-name">西湖龙井 明前特级 2024新茶</div>
                    <div class="product-price">¥168 <span class="original">¥268</span></div>
                </div>
            </div>
            <div class="product-card" onclick="showPage('page-detail')">
                <div class="product-img-placeholder">🫖</div>
                <div class="product-info">
                    <div class="product-name">正山小种 武夷山红茶</div>
                    <div class="product-price">¥128 <span class="original">¥198</span></div>
                </div>
            </div>
            <div class="product-card" onclick="showPage('page-detail')">
                <div class="product-img-placeholder">🍂</div>
                <div class="product-info">
                    <div class="product-name">云南古树普洱 生茶</div>
                    <div class="product-price">¥298 <span class="original">¥458</span></div>
                </div>
            </div>
            <div class="product-card" onclick="showPage('page-detail')">
                <div class="product-img-placeholder">🌼</div>
                <div class="product-info">
                    <div class="product-name">福鼎白茶 白毫银针</div>
                    <div class="product-price">¥388 <span class="original">¥588</span></div>
                </div>
            </div>
        </div>
        <div class="tab-bar">
            <div class="tab-item" onclick="showPage('page-home')">
                <div class="tab-icon">🏠</div>
                <div>首页</div>
            </div>
            <div class="tab-item" onclick="showPage('page-category')">
                <div class="tab-icon">📑</div>
                <div>分类</div>
            </div>
            <div class="tab-item" onclick="showPage('page-cart')">
                <div class="tab-icon">🛒</div>
                <div>购物车</div>
            </div>
            <div class="tab-item" onclick="showPage('page-profile')">
                <div class="tab-icon">👤</div>
                <div>我的</div>
            </div>
        </div>
    </div>

    <!-- 商品详情页 -->
    <div id="page-detail" class="page">
        <div class="detail-header">
            <span class="back" onclick="historyBack()">←</span>
            <span style="flex:1;text-align:center;font-weight:600;">商品详情</span>
            <span>...</span>
        </div>
        <div class="detail-swiper">🍵</div>
        <div class="detail-info">
            <div class="detail-price">¥168 <span class="original">¥268</span></div>
            <div class="detail-name">西湖龙井 明前特级绿茶 2024新茶</div>
            <div class="detail-desc">正宗杭州西湖产区，明前采摘，特级品质。茶汤嫩绿明亮，滋味鲜醇回甘，香气清高持久。</div>
        </div>
        <div class="detail-section">
            <div class="detail-section-title">规格选择</div>
            <div class="sub-category">
                <div class="sub-category-item">50g罐装</div>
                <div class="sub-category-item active">100g袋装</div>
                <div class="sub-category-item">250g礼盒装</div>
            </div>
        </div>
        <div class="detail-section">
            <div class="detail-section-title">商品详情</div>
            <div class="detail-section-content">
                【产地】浙江杭州西湖产区<br>
                【等级】明前特级<br>
                【采摘时间】2024年3月底<br>
                【保质期】18个月<br>
                【储存方式】避光、干燥、冷藏<br><br>
                冲泡建议：<br>
                1. 取茶叶3-5g<br>
                2. 用80-85°C热水冲泡<br>
                3. 第一泡洗茶，第二泡开始饮用<br>
                4. 可冲泡3-4次
            </div>
        </div>
        <div class="detail-section">
            <div class="detail-section-title">商品评价 (1286条)</div>
            <div style="font-size:13px;color:#666;line-height:1.6;">
                <div style="margin-bottom:10px;">
                    <span style="color:#f5c518;">★★★★★</span>
                    <span style="margin-left:10px;">茶叶很新鲜，香味浓郁</span>
                </div>
                <div>
                    <span style="color:#f5c518;">★★★★★</span>
                    <span style="margin-left:10px;">包装精美，送礼很有面子</span>
                </div>
            </div>
        </div>
        <div class="detail-footer">
            <button class="btn-collect" onclick="showToast('已收藏')">
                <span>⭐</span>
                <span>收藏</span>
            </button>
            <button class="btn-cart" onclick="showPage('page-cart');showToast('已加入购物车')">
                <span>🛒</span>
                <span>购物车</span>
            </button>
            <button class="btn-add-cart" onclick="showPage('page-cart')">加入购物车</button>
            <button class="btn-buy-now" onclick="showPage('page-order')">立即购买</button>
        </div>
    </div>

    <!-- 购物车页 -->
    <div id="page-cart" class="page">
        <div class="cart-header">
            <span class="back" onclick="historyBack()">←</span>
            <h1 style="flex:1;text-align:center;">购物车</h1>
            <span class="edit">编辑</span>
        </div>
        <div style="padding:10px;">
            <div class="cart-store">
                <div class="cart-store-header">
                    <input type="checkbox" checked>
                    <div class="cart-store-name">🍃 茶悦官方旗舰店</div>
                </div>
                <div class="cart-item">
                    <input type="checkbox" checked>
                    <div class="cart-item-img">🍵</div>
                    <div class="cart-item-info">
                        <div class="cart-item-name">西湖龙井 明前特级绿茶</div>
                        <div class="cart-item-spec">100g袋装</div>
                        <div class="cart-item-bottom">
                            <div class="cart-item-price">¥168</div>
                            <div class="cart-item-count">
                                <button>-</button>
                                <span>1</span>
                                <button>+</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cart-item">
                    <input type="checkbox" checked>
                    <div class="cart-item-img">🫖</div>
                    <div class="cart-item-info">
                        <div class="cart-item-name">正山小种 武夷山红茶</div>
                        <div class="cart-item-spec">150g罐装</div>
                        <div class="cart-item-bottom">
                            <div class="cart-item-price">¥128</div>
                            <div class="cart-item-count">
                                <button>-</button>
                                <span>1</span>
                                <button>+</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="cart-footer">
            <input type="checkbox" checked>
            <div class="total-info">
                <div class="total-price">¥296</div>
                <div class="total-count">共2件</div>
            </div>
            <button class="btn-settle" onclick="showPage('page-order')">去结算</button>
        </div>
        <div class="tab-bar">
            <div class="tab-item" onclick="showPage('page-home')">
                <div class="tab-icon">🏠</div>
                <div>首页</div>
            </div>
            <div class="tab-item" onclick="showPage('page-category')">
                <div class="tab-icon">📑</div>
                <div>分类</div>
            </div>
            <div class="tab-item active" onclick="showPage('page-cart')">
                <div class="tab-icon">🛒</div>
                <div>购物车</div>
            </div>
            <div class="tab-item" onclick="showPage('page-profile')">
                <div class="tab-icon">👤</div>
                <div>我的</div>
            </div>
        </div>
    </div>

    <!-- 确认订单页 -->
    <div id="page-order" class="page">
        <div class="order-header">
            <span class="back" onclick="historyBack()">←</span>
            <h1 style="flex:1;text-align:center;">确认订单</h1>
            <span></span>
        </div>
        <div class="order-section" onclick="showToast('选择收货地址')">
            <div class="order-address">
                <div class="order-address-icon">📍</div>
                <div class="order-address-info">
                    <div class="order-address-name">张三 138****8888</div>
                    <div class="order-address-detail">上海市浦东新区陆家嘴街道世纪大道100号上海中心大厦1201室</div>
                </div>
                <span style="color:#999;">></span>
            </div>
        </div>
        <div class="order-section">
            <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;">
                <span style="font-size:14px;font-weight:600;">🍃 茶悦官方旗舰店</span>
                <span style="color:#999;font-size:12px;">查看更多</span>
            </div>
            <div class="order-item">
                <div class="order-item-img">🍵</div>
                <div class="order-item-info">
                    <div class="order-item-name">西湖龙井 明前特级绿茶</div>
                    <div class="order-item-spec">100g袋装</div>
                    <div class="order-item-bottom">
                        <div class="order-item-price">¥168</div>
                        <div class="order-item-count">x1</div>
                    </div>
                </div>
            </div>
            <div class="order-item">
                <div class="order-item-img">🫖</div>
                <div class="order-item-info">
                    <div class="order-item-name">正山小种 武夷山红茶</div>
                    <div class="order-item-spec">150g罐装</div>
                    <div class="order-item-bottom">
                        <div class="order-item-price">¥128</div>
                        <div class="order-item-count">x1</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="order-section">
            <div class="order-row" onclick="showToast('选择配送方式')">
                <span class="order-row-label">配送方式</span>
                <span class="order-row-value">快递配送 ></span>
            </div>
            <div class="order-row" onclick="showPage('page-coupon')">
                <span class="order-row-label">优惠券</span>
                <span class="order-row-value red">-¥20 ></span>
            </div>
            <div class="order-row">
                <span class="order-row-label">配送时间</span>
                <span class="order-row-value">工作日/周末/节假日均可</span>
            </div>
            <div class="order-row">
                <span class="order-row-label">订单备注</span>
                <span class="order-row-value" style="color:#999;">点击添加备注 ></span>
            </div>
        </div>
        <div class="order-section">
            <div class="order-row">
                <span class="order-row-label">商品金额</span>
                <span class="order-row-value">¥296</span>
            </div>
            <div class="order-row">
                <span class="order-row-label">运费</span>
                <span class="order-row-value">¥0</span>
            </div>
            <div class="order-row">
                <span class="order-row-label">优惠券</span>
                <span class="order-row-value red">-¥20</span>
            </div>
        </div>
        <div class="order-footer">
            <span class="total-text">合计：</span>
            <span class="total-amount">¥276</span>
            <button class="btn-submit" onclick="showPage('page-pay')">提交订单</button>
        </div>
        <div class="tab-bar">
            <div class="tab-item" onclick="showPage('page-home')">
                <div class="tab-icon">🏠</div>
                <div>首页</div>
            </div>
            <div class="tab-item" onclick="showPage('page-category')">
                <div class="tab-icon">📑</div>
                <div>分类</div>
            </div>
            <div class="tab-item" onclick="showPage('page-cart')">
                <div class="tab-icon">🛒</div>
                <div>购物车</div>
            </div>
            <div class="tab-item" onclick="showPage('page-profile')">
                <div class="tab-icon">👤</div>
                <div>我的</div>
            </div>
        </div>
    </div>

    <!-- 支付页 -->
    <div id="page-pay" class="page">
        <div class="order-header">
            <span class="back" onclick="historyBack()">←</span>
            <h1 style="flex:1;text-align:center;">订单支付</h1>
            <span></span>
        </div>
        <div class="pay-header">
            <div class="pay-amount">应付金额<br><span>¥276.00</span></div>
        </div>
        <div class="pay-methods">
            <div class="pay-method selected" onclick="selectPayMethod(this)">
                <div class="pay-method-icon">💳</div>
                <div class="pay-method-name">微信支付</div>
                <div class="pay-method-check"></div>
            </div>
            <div class="pay-method" onclick="selectPayMethod(this)">
                <div class="pay-method-icon">💰</div>
                <div class="pay-method-name">支付宝</div>
                <div class="pay-method-check"></div>
            </div>
            <div class="pay-method" onclick="selectPayMethod(this)">
                <div class="pay-method-icon">🏦</div>
                <div class="pay-method-name">银行卡支付</div>
                <div class="pay-method-check"></div>
            </div>
        </div>
        <div class="pay-footer">
            <button class="btn-pay" onclick="showPage('page-pay-success')">确认支付 ¥276.00</button>
        </div>
        <div class="tab-bar">
            <div class="tab-item" onclick="showPage('page-home')">
                <div class="tab-icon">🏠</div>
                <div>首页</div>
            </div>
            <div class="tab-item" onclick="showPage('page-category')">
                <div class="tab-icon">📑</div>
                <div>分类</div>
            </div>
            <div class="tab-item" onclick="showPage('page-cart')">
                <div class="tab-icon">🛒</div>
                <div>购物车</div>
            </div>
            <div class="tab-item" onclick="showPage('page-profile')">
                <div class="tab-icon">👤</div>
                <div>我的</div>
            </div>
        </div>
    </div>

    <!-- 支付成功页 -->
    <div id="page-pay-success" class="page">
        <div class="pay-success">
            <div class="pay-success-icon">✓</div>
            <h2>支付成功</h2>
            <p>感谢您的购买，商品正在准备中</p>
            <div class="btns">
                <button class="btn-check" onclick="showPage('page-order-list')">查看订单</button>
                <button class="btn-home" onclick="showPage('page-home')">返回首页</button>
            </div>
        </div>
        <div class="tab-bar">
            <div class="tab-item" onclick="showPage('page-home')">
                <div class="tab-icon">🏠</div>
                <div>首页</div>
            </div>
            <div class="tab-item" onclick="showPage('page-category')">
                <div class="tab-icon">📑</div>
                <div>分类</div>
            </div>
            <div class="tab-item" onclick="showPage('page-cart')">
                <div class="tab-icon">🛒</div>
                <div>购物车</div>
            </div>
            <div class="tab-item" onclick="showPage('page-profile')">
                <div class="tab-icon">👤</div>
                <div>我的</div>
            </div>
        </div>
    </div>

    <!-- 我的订单页 -->
    <div id="page-order-list" class="page">
        <div class="page-title">
            <span class="back" onclick="historyBack()">←</span>
            <span>我的订单</span>
        </div>
        <div class="order-tabs">
            <div class="order-tab active" onclick="selectOrderTab(this)">全部</div>
            <div class="order-tab" onclick="selectOrderTab(this)">待付款</div>
            <div class="order-tab" onclick="selectOrderTab(this)">待发货</div>
            <div class="order-tab" onclick="selectOrderTab(this)">待收货</div>
            <div class="order-tab" onclick="selectOrderTab(this)">已完成</div>
        </div>
        <div class="order-list">
            <div class="order-card" onclick="showPage('page-logistics')">
                <div class="order-card-header">
                    <span class="order-card-store">🍃 茶悦官方旗舰店</span>
                    <span class="order-card-status">待收货</span>
                </div>
                <div class="order-card-item">
                    <div class="order-card-img">🍵</div>
                    <div class="order-card-info">
                        <div class="order-card-name">西湖龙井 明前特级绿茶</div>
                        <div class="order-card-spec">100g袋装 x1</div>
                        <div class="order-card-bottom">
                            <div class="order-card-price">¥168</div>
                        </div>
                    </div>
                </div>
                <div class="order-card-footer">
                    <button class="order-card-btn default" onclick="showPage('page-logistics')">查看物流</button>
                    <button class="order-card-btn primary" onclick="showToast('确认收货')">确认收货</button>
                </div>
            </div>
            <div class="order-card">
                <div class="order-card-header">
                    <span class="order-card-store">🍃 茶悦官方旗舰店</span>
                    <span class="order-card-status">待发货</span>
                </div>
                <div class="order-card-item">
                    <div class="order-card-img">🫖</div>
                    <div class="order-card-info">
                        <div class="order-card-name">正山小种 武夷山红茶</div>
                        <div class="order-card-spec">150g罐装 x1</div>
                        <div class="order-card-bottom">
                            <div class="order-card-price">¥128</div>
                        </div>
                    </div>
                </div>
                <div class="order-card-footer">
                    <button class="order-card-btn default" onclick="showToast('提醒发货')">提醒发货</button>
                </div>
            </div>
            <div class="order-card">
                <div class="order-card-header">
                    <span class="order-card-store">🍃 茶悦官方旗舰店</span>
                    <span class="order-card-status">待付款</span>
                </div>
                <div class="order-card-item">
                    <div class="order-card-img">🍂</div>
                    <div class="order-card-info">
                        <div class="order-card-name">云南古树普洱 生茶</div>
                        <div class="order-card-spec">357g x1</div>
                        <div class="order-card-bottom">
                            <div class="order-card-price">¥298</div>
                        </div>
                    </div>
                </div>
                <div class="order-card-footer">
                    <button class="order-card-btn default" onclick="showToast('取消订单')">取消</button>
                    <button class="order-card-btn primary" onclick="showPage('page-pay')">去支付</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 物流页 -->
    <div id="page-logistics" class="page">
        <div class="page-title">
            <span class="back" onclick="historyBack()">←</span>
            <span>物流信息</span>
        </div>
        <div class="logistics-info">
            <div class="logistics-header">
                <div class="logistics-icon">🚚</div>
                <div class="logistics-status">
                    <div class="logistics-status-text">包裹正在派送中，预计今日送达</div>
                    <div class="logistics-time">2024-03-15 08:30</div>
                </div>
            </div>
            <div class="logistics-timeline">
                <div class="logistics-item active">
                    <div class="logistics-item-content">【上海市】您的订单已到达上海浦东分部，正在派送中，快递员：赵师傅 138****5678</div>
                    <div class="logistics-item-time">2024-03-15 08:30</div>
                </div>
                <div class="logistics-item">
                    <div class="logistics-item-content">【上海市】您的订单已从杭州发出，正在送往上海</div>
                    <div class="logistics-item-time">2024-03-14 16:20</div>
                </div>
                <div class="logistics-item">
                    <div class="logistics-item-content">【杭州市】您的订单已打包完成，等待揽收</div>
                    <div class="logistics-item-time">2024-03-14 10:15</div>
                </div>
                <div class="logistics-item">
                    <div class="logistics-item-content">【杭州市】商家正在处理您的订单</div>
                    <div class="logistics-item-time">2024-03-13 14:30</div>
                </div>
                <div class="logistics-item">
                    <div class="logistics-item-content">【杭州市】订单已提交，等待商家发货</div>
                    <div class="logistics-item-time">2024-03-13 14:28</div>
                </div>
            </div>
        </div>
        <div class="tab-bar">
            <div class="tab-item" onclick="showPage('page-home')">
                <div class="tab-icon">🏠</div>
                <div>首页</div>
            </div>
            <div class="tab-item" onclick="showPage('page-category')">
                <div class="tab-icon">📑</div>
                <div>分类</div>
            </div>
            <div class="tab-item" onclick="showPage('page-cart')">
                <div class="tab-icon">🛒</div>
                <div>购物车</div>
            </div>
            <div class="tab-item" onclick="showPage('page-profile')">
                <div class="tab-icon">👤</div>
                <div>我的</div>
            </div>
        </div>
    </div>

    <!-- 个人中心页 -->
    <div id="page-profile" class="page">
        <div class="profile-header">
            <div class="profile-info">
                <div class="profile-avatar">👤</div>
                <div>
                    <div class="profile-name">茶友张三</div>
                    <div class="profile-level">🍃 黄金会员</div>
                </div>
            </div>
            <div class="profile-stats">
                <div class="profile-stat">
                    <div class="profile-stat-value">1,286</div>
                    <div class="profile-stat-label">积分</div>
                </div>
                <div class="profile-stat">
                    <div class="profile-stat-value">5</div>
                    <div class="profile-stat-label">优惠券</div>
                </div>
                <div class="profile-stat">
                    <div class="profile-stat-value">12</div>
                    <div class="profile-stat-label">收藏</div>
                </div>
            </div>
        </div>
        <div class="profile-orders">
            <div class="profile-orders-header">
                <span class="profile-orders-title">我的订单</span>
                <span class="profile-orders-more" onclick="showPage('page-order-list')">全部订单 ></span>
            </div>
            <div class="profile-order-items">
                <div class="profile-order-item" onclick="showPage('page-order-list')">
                    <div class="profile-order-icon">💳</div>
                    <span class="profile-order-label">待付款</span>
                </div>
                <div class="profile-order-item" onclick="showPage('page-order-list')">
                    <div class="profile-order-icon">📦</div>
                    <span class="profile-order-label">待发货</span>
                </div>
                <div class="profile-order-item" onclick="showPage('page-order-list')">
                    <div class="profile-order-icon">🚚</div>
                    <span class="profile-order-label">待收货</span>
                </div>
                <div class="profile-order-item" onclick="showPage('page-order-list')">
                    <div class="profile-order-icon">⭐</div>
                    <span class="profile-order-label">待评价</span>
                </div>
                <div class="profile-order-item" onclick="showToast('售后退款')">
                    <div class="profile-order-icon">🔄</div>
                    <span class="profile-order-label">退款/售后</span>
                </div>
            </div>
        </div>
        <div class="profile-menu">
            <div class="profile-menu-item" onclick="showPage('page-address')">
                <div class="profile-menu-icon">📍</div>
                <span class="profile-menu-text">收货地址</span>
                <span class="profile-menu-arrow">></span>
            </div>
            <div class="profile-menu-item" onclick="showPage('page-coupon')">
                <div class="profile-menu-icon">🎫</div>
                <span class="profile-menu-text">我的优惠券</span>
                <span class="profile-menu-arrow">></span>
            </div>
            <div class="profile-menu-item" onclick="showPage('page-points')">
                <div class="profile-menu-icon">💰</div>
                <span class="profile-menu-text">我的积分</span>
                <span class="profile-menu-arrow">></span>
            </div>
            <div class="profile-menu-item" onclick="showPage('page-collect')">
                <div class="profile-menu-icon">⭐</div>
                <span class="profile-menu-text">我的收藏</span>
                <span class="profile-menu-arrow">></span>
            </div>
            <div class="profile-menu-item" onclick="showPage('page-review')">
                <div class="profile-menu-icon">📝</div>
                <span class="profile-menu-text">我的评价</span>
                <span class="profile-menu-arrow">></span>
            </div>
        </div>
        <div class="profile-menu">
            <div class="profile-menu-item" onclick="showPage('page-seckill')">
                <div class="profile-menu-icon" style="background:#d63031;color:white;">⏰</div>
                <span class="profile-menu-text">限时秒杀</span>
                <span class="profile-menu-arrow">></span>
            </div>
            <div class="profile-menu-item" onclick="showPage('page-group')">
                <div class="profile-menu-icon" style="background:#4a7c23;color:white;">👥</div>
                <span class="profile-menu-text">拼团活动</span>
                <span class="profile-menu-arrow">></span>
            </div>
            <div class="profile-menu-item" onclick="showPage('page-discount')">
                <div class="profile-menu-icon" style="background:#e67e22;color:white;">🏷️</div>
                <span class="profile-menu-text">满减活动</span>
                <span class="profile-menu-arrow">></span>
            </div>
        </div>
        <div class="tab-bar">
            <div class="tab-item" onclick="showPage('page-home')">
                <div class="tab-icon">🏠</div>
                <div>首页</div>
            </div>
            <div class="tab-item" onclick="showPage('page-category')">
                <div class="tab-icon">📑</div>
                <div>分类</div>
            </div>
            <div class="tab-item" onclick="showPage('page-cart')">
                <div class="tab-icon">🛒</div>
                <div>购物车</div>
            </div>
            <div class="tab-item active" onclick="showPage('page-profile')">
                <div class="tab-icon">👤</div>
                <div>我的</div>
            </div>
        </div>
    </div>

    <!-- 优惠券页 -->
    <div id="page-coupon" class="page">
        <div class="page-title">
            <span class="back" onclick="historyBack()">←</span>
            <span>我的优惠券</span>
        </div>
        <div class="coupon-tabs">
            <div class="coupon-tab active" onclick="selectCouponTab(this)">可用优惠券</div>
            <div class="coupon-tab" onclick="selectCouponTab(this)">已使用</div>
            <div class="coupon-tab" onclick="selectCouponTab(this)">已过期</div>
        </div>
        <div class="coupon-list">
            <div class="coupon-card">
                <div class="coupon-left">
                    <div class="coupon-value">20</div>
                    <div class="coupon-unit">元</div>
                    <div class="coupon-threshold">满100可用</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-name">新人专享券 <span class="coupon-status unused">可使用</span></div>
                    <div class="coupon-desc">全场通用，新用户专享</div>
                    <div class="coupon-time">有效期至 2024-04-30</div>
                </div>
            </div>
            <div class="coupon-card">
                <div class="coupon-left" style="background:linear-gradient(135deg, #4a7c23, #2d5016);">
                    <div class="coupon-value">50</div>
                    <div class="coupon-unit">元</div>
                    <div class="coupon-threshold">满300可用</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-name">满减优惠券 <span class="coupon-status unused">可使用</span></div>
                    <div class="coupon-desc">会员专属满减券</div>
                    <div class="coupon-time">有效期至 2024-04-15</div>
                </div>
            </div>
            <div class="coupon-card">
                <div class="coupon-left" style="background:#ddd;">
                    <div class="coupon-value">10</div>
                    <div class="coupon-unit">元</div>
                    <div class="coupon-threshold">满50可用</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-name">限时优惠券 <span class="coupon-status used">已使用</span></div>
                    <div class="coupon-desc">限时特惠</div>
                    <div class="coupon-time">有效期至 2024-03-01</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 秒杀页 -->
    <div id="page-seckill" class="page">
        <div class="seckill-header">
            <div style="font-size:18px;font-weight:600;margin-bottom:15px;">⏰ 限时秒杀</div>
            <div class="seckill-time">
                <span>14</span>:<span>35</span>:<span>22</span>
            </div>
            <div class="seckill-tip">距离本场结束还有 14:35:22</div>
        </div>
        <div class="seckill-products">
            <div class="seckill-product" onclick="showPage('page-detail')">
                <div class="seckill-product-img">🍵</div>
                <div class="seckill-product-info">
                    <div class="seckill-product-name">西湖龙井 明前特级 秒杀价</div>
                    <div class="seckill-product-price">¥98 <span class="original">¥168</span></div>
                    <div class="seckill-product-progress">
                        <div class="seckill-product-bar">
                            <div class="seckill-product-fill" style="width:75%;"></div>
                        </div>
                        <div class="seckill-product-count">已抢 750 件 / 共1000件</div>
                    </div>
                </div>
            </div>
            <div class="seckill-product" onclick="showPage('page-detail')">
                <div class="seckill-product-img">🫖</div>
                <div class="seckill-product-info">
                    <div class="seckill-product-name">正山小种 武夷山红茶 秒杀价</div>
                    <div class="seckill-product-price">¥68 <span class="original">¥128</span></div>
                    <div class="seckill-product-progress">
                        <div class="seckill-product-bar">
                            <div class="seckill-product-fill" style="width:45%;"></div>
                        </div>
                        <div class="seckill-product-count">已抢 450 件 / 共1000件</div>
                    </div>
                </div>
            </div>
            <div class="seckill-product" onclick="showPage('page-detail')">
                <div class="seckill-product-img">🍂</div>
                <div class="seckill-product-info">
                    <div class="seckill-product-name">云南古树普洱 秒杀价</div>
                    <div class="seckill-product-price">¥198 <span class="original">¥298</span></div>
                    <div class="seckill-product-progress">
                        <div class="seckill-product-bar">
                            <div class="seckill-product-fill" style="width:92%;"></div>
                        </div>
                        <div class="seckill-product-count">已抢 920 件 / 共1000件</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-bar">
            <div class="tab-item" onclick="showPage('page-home')">
                <div class="tab-icon">🏠</div>
                <div>首页</div>
            </div>
            <div class="tab-item" onclick="showPage('page-category')">
                <div class="tab-icon">📑</div>
                <div>分类</div>
            </div>
            <div class="tab-item" onclick="showPage('page-cart')">
                <div class="tab-icon">🛒</div>
                <div>购物车</div>
            </div>
            <div class="tab-item" onclick="showPage('page-profile')">
                <div class="tab-icon">👤</div>
                <div>我的</div>
            </div>
        </div>
    </div>

    <!-- 拼团页 -->
    <div id="page-group" class="page">
        <div class="group-header">
            <div style="font-size:18px;font-weight:600;">👥 拼团活动</div>
            <div style="font-size:13px;margin-top:10px;opacity:0.8;">邀请好友一起拼团，更享优惠</div>
        </div>
        <div class="group-buy-list">
            <div class="group-card">
                <div class="group-card-header">
                    <div class="group-card-avatar">👤</div>
                    <div class="group-card-user">
                        <div class="group-card-name">李四</div>
                        <div class="group-card-time">还剩 23:45:12 结束</div>
                    </div>
                    <div class="group-card-status">还差1人</div>
                </div>
                <div class="group-card-product">
                    <div class="group-card-img">🍵</div>
                    <div class="group-card-info">
                        <div class="group-card-name">西湖龙井 明前特级</div>
                        <div class="group-card-price">¥128 <span style="font-size:12px;color:#999;text-decoration:line-through;">¥168</span></div>
                        <div class="group-card-people">3人成团，已有2人参与</div>
                    </div>
                </div>
                <button class="group-card-btn" onclick="showToast('参与拼团成功')">参与拼团</button>
            </div>
            <div class="group-card">
                <div class="group-card-header">
                    <div class="group-card-avatar">👤</div>
                    <div class="group-card-user">
                        <div class="group-card-name">王五</div>
                        <div class="group-card-time">还剩 12:30:00 结束</div>
                    </div>
                    <div class="group-card-status">还差2人</div>
                </div>
                <div class="group-card-product">
                    <div class="group-card-img">🫖</div>
                    <div class="group-card-info">
                        <div class="group-card-name">正山小种 武夷山红茶</div>
                        <div class="group-card-price">¥98 <span style="font-size:12px;color:#999;text-decoration:line-through;">¥128</span></div>
                        <div class="group-card-people">3人成团，已有1人参与</div>
                    </div>
                </div>
                <button class="group-card-btn" onclick="showToast('参与拼团成功')">参与拼团</button>
            </div>
            <div class="group-card">
                <div class="group-card-header">
                    <div class="group-card-avatar">👤</div>
                    <div class="group-card-user">
                        <div class="group-card-name">赵六</div>
                        <div class="group-card-time">还剩 01:30:00 结束</div>
                    </div>
                    <div class="group-card-status">还差1人</div>
                </div>
                <div class="group-card-product">
                    <div class="group-card-img">🍂</div>
                    <div class="group-card-info">
                        <div class="group-card-name">云南古树普洱 生茶</div>
                        <div class="group-card-price">¥238 <span style="font-size:12px;color:#999;text-decoration:line-through;">¥298</span></div>
                        <div class="group-card-people">3人成团，已有2人参与</div>
                    </div>
                </div>
                <button class="group-card-btn" onclick="showToast('参与拼团成功')">参与拼团</button>
            </div>
        </div>
        <div class="tab-bar">
            <div class="tab-item" onclick="showPage('page-home')">
                <div class="tab-icon">🏠</div>
                <div>首页</div>
            </div>
            <div class="tab-item" onclick="showPage('page-category')">
                <div class="tab-icon">📑</div>
                <div>分类</div>
            </div>
            <div class="tab-item" onclick="showPage('page-cart')">
                <div class="tab-icon">🛒</div>
                <div>购物车</div>
            </div>
            <div class="tab-item" onclick="showPage('page-profile')">
                <div class="tab-icon">👤</div>
                <div>我的</div>
            </div>
        </div>
    </div>

    <!-- 满减页 -->
    <div id="page-discount" class="page">
        <div class="discount-header">
            <div style="font-size:18px;font-weight:600;">🏷️ 满减优惠</div>
            <div class="discount-info">购茶满额立减，超值优惠等你来</div>
        </div>
        <div class="discount-list">
            <div class="discount-card">
                <div class="discount-card-header">
                    <span class="discount-tag">满100减20</span>
                    <span class="discount-title">新手专属满减</span>
                </div>
                <div class="discount-desc">新用户首单满100元减20元，全场通用</div>
                <div class="discount-time">活动时间：2024.03.01 - 2024.04.30</div>
                <button class="discount-btn" onclick="showToast('领取成功')">立即领取</button>
            </div>
            <div class="discount-card">
                <div class="discount-card-header">
                    <span class="discount-tag">满200减40</span>
                    <span class="discount-title">春季新品满减</span>
                </div>
                <div class="discount-desc">春季新品上市，满200减40，多买多减</div>
                <div class="discount-time">活动时间：2024.03.15 - 2024.05.15</div>
                <button class="discount-btn" onclick="showToast('领取成功')">立即领取</button>
            </div>
            <div class="discount-card">
                <div class="discount-card-header">
                    <span class="discount-tag">满500减100</span>
                    <span class="discount-title">会员专享满减</span>
                </div>
                <div class="discount-desc">黄金及以上会员专享，满500减100</div>
                <div class="discount-time">活动时间：长期有效</div>
                <button class="discount-btn" onclick="showToast('您已是会员，可直接使用')">已领取</button>
            </div>
        </div>
        <div class="tab-bar">
            <div class="tab-item" onclick="showPage('page-home')">
                <div class="tab-icon">🏠</div>
                <div>首页</div>
            </div>
            <div class="tab-item" onclick="showPage('page-category')">
                <div class="tab-icon">📑</div>
                <div>分类</div>
            </div>
            <div class="tab-item" onclick="showPage('page-cart')">
                <div class="tab-icon">🛒</div>
                <div>购物车</div>
            </div>
            <div class="tab-item" onclick="showPage('page-profile')">
                <div class="tab-icon">👤</div>
                <div>我的</div>
            </div>
        </div>
    </div>

    <!-- 积分页 -->
    <div id="page-points" class="page">
        <div class="points-header">
            <div style="font-size:13px;opacity:0.8;">我的积分</div>
            <div class="points-value">1,286</div>
            <div class="points-tip">积分可抵换商品，100积分=1元</div>
        </div>
        <div class="points-tabs">
            <div class="points-tab active" onclick="selectPointsTab(this)">全部</div>
            <div class="points-tab" onclick="selectPointsTab(this)">收入</div>
            <div class="points-tab" onclick="selectPointsTab(this)">支出</div>
        </div>
        <div class="points-list">
            <div class="points-item">
                <div class="points-item-info">
                    <div class="points-item-title">订单抵扣</div>
                    <div class="points-item-time">2024-03-15 14:30</div>
                </div>
                <div class="points-item-value expense">-128</div>
            </div>
            <div class="points-item">
                <div class="points-item-info">
                    <div class="points-item-title">购买商品赠送</div>
                    <div class="points-item-time">2024-03-14 10:20</div>
                </div>
                <div class="points-item-value income">+296</div>
            </div>
            <div class="points-item">
                <div class="points-item-info">
                    <div class="points-item-title">新人注册奖励</div>
                    <div class="points-item-time">2024-03-01 09:00</div>
                </div>
                <div class="points-item-value income">+500</div>
            </div>
            <div class="points-item">
                <div class="points-item-info">
                    <div class="points-item-title">评价奖励</div>
                    <div class="points-item-time">2024-02-28 16:45</div>
                </div>
                <div class="points-item-value income">+50</div>
            </div>
            <div class="points-item">
                <div class="points-item-info">
                    <div class="points-item-title">积分兑换礼品</div>
                    <div class="points-item-time">2024-02-20 11:30</div>
                </div>
                <div class="points-item-value expense">-200</div>
            </div>
        </div>
        <div class="tab-bar">
            <div class="tab-item" onclick="showPage('page-home')">
                <div class="tab-icon">🏠</div>
                <div>首页</div>
            </div>
            <div class="tab-item" onclick="showPage('page-category')">
                <div class="tab-icon">📑</div>
                <div>分类</div>
            </div>
            <div class="tab-item" onclick="showPage('page-cart')">
                <div class="tab-icon">🛒</div>
                <div>购物车</div>
            </div>
            <div class="tab-item" onclick="showPage('page-profile')">
                <div class="tab-icon">👤</div>
                <div>我的</div>
            </div>
        </div>
    </div>

    <!-- 收货地址页 -->
    <div id="page-address" class="page">
        <div class="page-title">
            <span class="back" onclick="historyBack()">←</span>
            <span>收货地址</span>
        </div>
        <div class="address-list">
            <div class="address-card">
                <div class="address-card-header">
                    <span class="address-name">张三</span>
                    <span class="address-phone">138****8888</span>
                </div>
                <div class="address-detail">上海市浦东新区陆家嘴街道世纪大道100号上海中心大厦1201室</div>
                <div class="address-card-footer">
                    <label class="address-default">
                        <input type="radio" name="address" checked> 设为默认地址
                    </label>
                    <div class="address-actions">
                        <span class="address-action" onclick="showToast('编辑地址')">✏️ 编辑</span>
                        <span class="address-action" onclick="showToast('删除地址')">🗑️ 删除</span>
                    </div>
                </div>
            </div>
            <div class="address-card">
                <div class="address-card-header">
                    <span class="address-name">李四</span>
                    <span class="address-phone">139****9999</span>
                </div>
                <div class="address-detail">北京市朝阳区建国路88号SOHO现代城A座1801</div>
                <div class="address-card-footer">
                    <label class="address-default">
                        <input type="radio" name="address"> 设为默认地址
                    </label>
                    <div class="address-actions">
                        <span class="address-action" onclick="showToast('编辑地址')">✏️ 编辑</span>
                        <span class="address-action" onclick="showToast('删除地址')">🗑️ 删除</span>
                    </div>
                </div>
            </div>
            <div class="address-add" onclick="showToast('新增地址')">
                <div class="address-add-icon">+</div>
                <div class="address-add-text">添加新地址</div>
            </div>
        </div>
        <div class="tab-bar">
            <div class="tab-item" onclick="showPage('page-home')">
                <div class="tab-icon">🏠</div>
                <div>首页</div>
            </div>
            <div class="tab-item" onclick="showPage('page-category')">
                <div class="tab-icon">📑</div>
                <div>分类</div>
            </div>
            <div class="tab-item" onclick="showPage('page-cart')">
                <div class="tab-icon">🛒</div>
                <div>购物车</div>
            </div>
            <div class="tab-item" onclick="showPage('page-profile')">
                <div class="tab-icon">👤</div>
                <div>我的</div>
            </div>
        </div>
    </div>

    <!-- 收藏页 -->
    <div id="page-collect" class="page">
        <div class="page-title">
            <span class="back" onclick="historyBack()">←</span>
            <span>我的收藏</span>
        </div>
        <div class="collect-list">
            <div class="collect-item" onclick="showPage('page-detail')">
                <div class="collect-img">🍵</div>
                <div class="collect-info">
                    <div class="collect-name">西湖龙井 明前特级绿茶 2024新茶</div>
                    <div class="collect-price">¥168</div>
                    <div class="collect-action">
                        <button class="collect-btn collect-btn-add" onclick="event.stopPropagation();showPage('page-cart')">加入购物车</button>
                        <button class="collect-btn collect-btn-delete" onclick="event.stopPropagation();showToast('取消收藏')">取消收藏</button>
                    </div>
                </div>
            </div>
            <div class="collect-item" onclick="showPage('page-detail')">
                <div class="collect-img">🫖</div>
                <div class="collect-info">
                    <div class="collect-name">正山小种 武夷山红茶 蜜香型</div>
                    <div class="collect-price">¥128</div>
                    <div class="collect-action">
                        <button class="collect-btn collect-btn-add" onclick="event.stopPropagation();showPage('page-cart')">加入购物车</button>
                        <button class="collect-btn collect-btn-delete" onclick="event.stopPropagation();showToast('取消收藏')">取消收藏</button>
                    </div>
                </div>
            </div>
            <div class="collect-item" onclick="showPage('page-detail')">
                <div class="collect-img">🍂</div>
                <div class="collect-info">
                    <div class="collect-name">云南古树普洱 生茶357g</div>
                    <div class="collect-price">¥298</div>
                    <div class="collect-action">
                        <button class="collect-btn collect-btn-add" onclick="event.stopPropagation();showPage('page-cart')">加入购物车</button>
                        <button class="collect-btn collect-btn-delete" onclick="event.stopPropagation();showToast('取消收藏')">取消收藏</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-bar">
            <div class="tab-item" onclick="showPage('page-home')">
                <div class="tab-icon">🏠</div>
                <div>首页</div>
            </div>
            <div class="tab-item" onclick="showPage('page-category')">
                <div class="tab-icon">📑</div>
                <div>分类</div>
            </div>
            <div class="tab-item" onclick="showPage('page-cart')">
                <div class="tab-icon">🛒</div>
                <div>购物车</div>
            </div>
            <div class="tab-item" onclick="showPage('page-profile')">
                <div class="tab-icon">👤</div>
                <div>我的</div>
            </div>
        </div>
    </div>

    <!-- 评价页 -->
    <div id="page-review" class="page">
        <div class="page-title">
            <span class="back" onclick="historyBack()">←</span>
            <span>我的评价</span>
        </div>
        <div class="review-list">
            <div class="review-card">
                <div class="review-card-header">
                    <div class="review-avatar">👤</div>
                    <div class="review-user">
                        <div class="review-name">茶友张三</div>
                        <div class="review-time">2024-03-10</div>
                    </div>
                    <div class="review-stars">★★★★★</div>
                </div>
                <div class="review-content">茶叶非常新鲜，包装精美，打开就能闻到淡淡的茶香。冲泡后口感很好，回甘明显。会继续回购的！</div>
                <div class="review-product">
                    <div class="review-product-img">🍵</div>
                    <div class="review-product-info">
                        <div class="review-product-name">西湖龙井 明前特级</div>
                        <div class="review-product-spec">100g袋装</div>
                    </div>
                </div>
            </div>
            <div class="review-card">
                <div class="review-card-header">
                    <div class="review-avatar">👤</div>
                    <div class="review-user">
                        <div class="review-name">茶友张三</div>
                        <div class="review-time">2024-02-28</div>
                    </div>
                    <div class="review-stars">★★★★★</div>
                </div>
                <div class="review-content">物流很快，茶叶品质一如既往的好。红茶口感醇厚，很适合下午茶时光。</div>
                <div class="review-product">
                    <div class="review-product-img">🫖</div>
                    <div class="review-product-info">
                        <div class="review-product-name">正山小种 武夷山红茶</div>
                        <div class="review-product-spec">150g罐装</div>
                    </div>
                </div>
            </div>
            <div class="review-card">
                <div class="review-card-header">
                    <div class="review-avatar">👤</div>
                    <div class="review-user">
                        <div class="review-name">茶友张三</div>
                        <div class="review-time">2024-02-15</div>
                    </div>
                    <div class="review-stars">★★★★☆</div>
                </div>
                <div class="review-content">普洱茶味道不错，就是物流稍微慢了点，不过店家态度很好。</div>
                <div class="review-product">
                    <div class="review-product-img">🍂</div>
                    <div class="review-product-info">
                        <div class="review-product-name">云南古树普洱 生茶</div>
                        <div class="review-product-spec">357g</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-bar">
            <div class="tab-item" onclick="showPage('page-home')">
                <div class="tab-icon">🏠</div>
                <div>首页</div>
            </div>
            <div class="tab-item" onclick="showPage('page-category')">
                <div class="tab-icon">📑</div>
                <div>分类</div>
            </div>
            <div class="tab-item" onclick="showPage('page-cart')">
                <div class="tab-icon">🛒</div>
                <div>购物车</div>
            </div>
            <div class="tab-item" onclick="showPage('page-profile')">
                <div class="tab-icon">👤</div>
                <div>我的</div>
            </div>
        </div>
    </div>

    <!-- 搜索页（占位） -->
    <div id="page-search" class="page">
        <div class="page-title">
            <span class="back" onclick="historyBack()">←</span>
            <span>搜索</span>
        </div>
        <div style="padding:10px;">
            <div style="background:#f5f5f5;border-radius:20px;padding:10px 15px;display:flex;align-items:center;gap:10px;">
                <span>🔍</span>
                <input type="text" placeholder="搜索茶叶商品" style="border:none;background:transparent;flex:1;font-size:14px;outline:none;">
            </div>
            <div style="margin-top:20px;">
                <div style="font-size:14px;color:#666;margin-bottom:15px;">热门搜索</div>
                <div style="display:flex;flex-wrap:wrap;gap:10px;">
                    <span style="background:#f5f5f5;padding:8px 15px;border-radius:15px;font-size:13px;cursor:pointer;" onclick="showPage('page-product-list')">龙井</span>
                    <span style="background:#f5f5f5;padding:8px 15px;border-radius:15px;font-size:13px;cursor:pointer;" onclick="showPage('page-product-list')">普洱</span>
                    <span style="background:#f5f5f5;padding:8px 15px;border-radius:15px;font-size:13px;cursor:pointer;" onclick="showPage('page-product-list')">红茶</span>
                    <span style="background:#f5f5f5;padding:8px 15px;border-radius:15px;font-size:13px;cursor:pointer;" onclick="showPage('page-product-list')">白茶</span>
                    <span style="background:#f5f5f5;padding:8px 15px;border-radius:15px;font-size:13px;cursor:pointer;" onclick="showPage('page-product-list')">铁观音</span>
                    <span style="background:#f5f5f5;padding:8px 15px;border-radius:15px;font-size:13px;cursor:pointer;" onclick="showPage('page-product-list')">碧螺春</span>
                </div>
            </div>
        </div>
        <div class="tab-bar">
            <div class="tab-item" onclick="showPage('page-home')">
                <div class="tab-icon">🏠</div>
                <div>首页</div>
            </div>
            <div class="tab-item" onclick="showPage('page-category')">
                <div class="tab-icon">📑</div>
                <div>分类</div>
            </div>
            <div class="tab-item" onclick="showPage('page-cart')">
                <div class="tab-icon">🛒</div>
                <div>购物车</div>
            </div>
            <div class="tab-item" onclick="showPage('page-profile')">
                <div class="tab-icon">👤</div>
                <div>我的</div>
            </div>
        </div>
    </div>

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

    <script>
        // 页面导航历史栈
        var pageHistory = ['page-home'];

        // 显示页面
        function showPage(pageId) {
            // 隐藏所有页面
            document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
            // 显示目标页面
            document.getElementById(pageId).classList.add('active');
            // 记录历史
            if (pageHistory[pageHistory.length - 1] !== pageId) {
                pageHistory.push(pageId);
            }
        }

        // 返回上一页
        function historyBack() {
            if (pageHistory.length > 1) {
                pageHistory.pop();
                var prevPage = pageHistory[pageHistory.length - 1];
                document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
                document.getElementById(prevPage).classList.add('active');
            }
        }

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

        // 选择分类
        function selectCategory(el) {
            document.querySelectorAll('.category-left-item').forEach(item => item.classList.remove('active'));
            el.classList.add('active');
        }

        // 选择子分类
        function selectSubCategory(el, page) {
            document.querySelectorAll('.sub-category-item').forEach(item => item.classList.remove('active'));
            el.classList.add('active');
            showPage(page);
        }

        // 选择筛选标签
        function selectFilter(el) {
            document.querySelectorAll('.filter-tab').forEach(tab => tab.classList.remove('active'));
            el.classList.add('active');
        }

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

        // 选择订单标签
        function selectOrderTab(el) {
            document.querySelectorAll('.order-tab').forEach(tab => tab.classList.remove('active'));
            el.classList.add('active');
        }

        // 选择优惠券标签
        function selectCouponTab(el) {
            document.querySelectorAll('.coupon-tab').forEach(tab => tab.classList.remove('active'));
            el.classList.add('active');
        }

        // 选择积分标签
        function selectPointsTab(el) {
            document.querySelectorAll('.points-tab').forEach(tab => tab.classList.remove('active'));
            el.classList.add('active');
        }
    </script>
</body>
</html>