编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>本地生活 - 用户端原型</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=PingFang+SC:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root {
    --primary: #FF6034;
    --primary-dark: #E5542A;
    --primary-light: #FFF0ED;
    --secondary: #FF9500;
    --accent: #00D2C6;
    --bg: #F5F5F5;
    --card: #FFFFFF;
    --text: #333333;
    --text-light: #666666;
    --text-muted: #999999;
    --border: #EEEEEE;
    --shadow: 0 2px 8px rgba(0,0,0,0.08);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: 'PingFang SC', -apple-system, 'Helvetica Neue', sans-serif;
    background: var(--bg);
    color: var(--text);
    max-width: 430px;
    margin: 0 auto;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
  }

  /* ======================= 登录页 ======================= */
  .login-page {
    min-height: 100vh;
    background: linear-gradient(160deg, #FF6034 0%, #FF9500 100%);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }
  .login-wave {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 280px;
    background: #fff;
    border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  }
  .login-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 32px;
    position: relative;
    z-index: 1;
  }
  .login-logo {
    width: 80px; height: 80px;
    background: rgba(255,255,255,0.25);
    border-radius: 20px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    backdrop-filter: blur(10px);
  }
  .login-logo svg { width: 48px; height: 48px; }
  .login-title {
    color: white;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 4px;
  }
  .login-subtitle {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    margin-bottom: 60px;
  }
  .login-btns {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .btn-wechat {
    background: #07C160;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
  }
  .btn-wechat:active { transform: scale(0.97); background: #06A356; }
  .btn-phone {
    background: rgba(255,255,255,0.95);
    color: var(--text);
    border: none;
    border-radius: 50px;
    padding: 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  }
  .btn-phone:active { transform: scale(0.97); }
  .login-terms {
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    text-align: center;
    margin-top: 20px;
    line-height: 1.6;
  }
  .login-terms a { color: white; }

  /* ======================= 底部导航 ======================= */
  .tab-bar {
    position: fixed;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 430px; max-width: 100%;
    background: white;
    border-top: 1px solid var(--border);
    display: flex;
    padding: 6px 0 calc(6px + var(--safe-bottom));
    z-index: 100;
    box-shadow: 0 -2px 12px rgba(0,0,0,0.05);
  }
  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 4px 0;
    cursor: pointer;
    color: var(--text-muted);
    transition: color 0.2s;
    position: relative;
  }
  .tab-item.active { color: var(--primary); }
  .tab-item svg { width: 24px; height: 24px; }
  .tab-item span { font-size: 10px; font-weight: 500; }
  .tab-item .badge {
    position: absolute;
    top: 0; right: calc(50% - 18px);
    background: var(--primary);
    color: white;
    font-size: 9px;
    padding: 1px 5px;
    border-radius: 10px;
    font-weight: 600;
  }

  /* ======================= 首页 ======================= */
  .page { display: none; min-height: 100vh; padding-bottom: calc(70px + var(--safe-bottom)); }
  .page.active { display: block; }

  .home-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    padding: 14px 16px 12px;
    color: white;
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .home-header-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .location-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 20px;
    padding: 6px 12px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
  }
  .location-btn svg { width: 14px; height: 14px; }
  .search-bar {
    flex: 1;
    background: rgba(255,255,255,0.95);
    border-radius: 22px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }
  .search-bar svg { width: 18px; height: 18px; color: var(--text-muted); }
  .search-bar span { font-size: 14px; color: var(--text-muted); }
  .header-actions {
    display: flex;
    gap: 4px;
    margin-left: 8px;
  }
  .header-action-btn {
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .header-action-btn svg { width: 18px; height: 18px; color: white; }

  /* Banner轮播 */
  .banner-section { padding: 12px 16px; }
  .banner-card {
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/7;
    position: relative;
  }
  .banner-card img {
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .banner-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 12px 16px;
    background: linear-gradient(transparent, rgba(0,0,0,0.6));
    color: white;
  }
  .banner-title { font-size: 15px; font-weight: 600; }
  .banner-sub { font-size: 11px; opacity: 0.8; }
  .banner-dots {
    position: absolute;
    bottom: 10px; right: 16px;
    display: flex; gap: 5px;
  }
  .banner-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
  }
  .banner-dot.active { background: white; width: 16px; border-radius: 3px; }

  /* 分类导航 */
  .category-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    padding: 12px 16px;
    background: white;
  }
  .category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
  }
  .cat-icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
  }
  .cat-label { font-size: 11px; color: var(--text-light); font-weight: 500; }

  /* 横向滚动分类 */
  .h-scroll-section { padding: 16px 0; }
  .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    margin-bottom: 12px;
  }
  .section-title { font-size: 16px; font-weight: 700; color: var(--text); }
  .section-more {
    font-size: 12px;
    color: var(--text-muted);
    display: flex; align-items: center; gap: 2px;
    cursor: pointer;
  }
  .h-scroll {
    overflow-x: auto;
    padding: 0 16px;
    display: flex;
    gap: 12px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .h-scroll::-webkit-scrollbar { display: none; }
  .h-scroll::-webkit-scrollbar { display: none; }

  /* 商家卡片 */
  .merchant-card {
    flex-shrink: 0;
    width: 160px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
    scroll-snap-align: start;
    cursor: pointer;
  }
  .merchant-card-img {
    width: 100%;
    height: 100px;
    object-fit: cover;
  }
  .merchant-card-body { padding: 10px; }
  .merchant-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .merchant-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
  }
  .merchant-score {
    background: var(--primary);
    color: white;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 10px;
  }
  .merchant-tags { display: flex; gap: 4px; flex-wrap: wrap; }
  .merchant-tag {
    background: var(--primary-light);
    color: var(--primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
  }
  .merchant-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--border);
  }
  .merchant-delivery {
    font-size: 10px;
    color: var(--text-muted);
  }
  .merchant-distance { font-size: 10px; color: var(--text-muted); }

  /* 横向服务分类（家政/生活服务） */
  .service-card {
    flex-shrink: 0;
    width: 140px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
    scroll-snap-align: start;
    cursor: pointer;
  }
  .service-card-img {
    width: 100%; height: 90px;
    object-fit: cover;
  }
  .service-card-body { padding: 10px; }
  .service-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
  .service-price {
    color: var(--primary);
    font-size: 14px;
    font-weight: 700;
  }
  .service-price span { font-size: 11px; font-weight: 400; }
  .service-orig { color: var(--text-muted); font-size: 11px; text-decoration: line-through; margin-left: 4px; }

  /* 限时优惠横条 */
  .flash-deal-bar {
    margin: 0 16px 12px;
    background: linear-gradient(90deg, #FF3B3B, #FF6034);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
  }
  .flash-deal-title { font-size: 13px; font-weight: 700; }
  .flash-deal-sub { font-size: 10px; opacity: 0.8; }
  .flash-countdown { display: flex; gap: 4px; align-items: center; }
  .flash-num {
    background: rgba(255,255,255,0.25);
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }

  /* 列表式商家卡片 */
  .merchant-list-card {
    background: white;
    border-radius: 12px;
    margin: 0 16px 10px;
    overflow: hidden;
    display: flex;
    box-shadow: var(--shadow);
    cursor: pointer;
  }
  .mlc-img {
    width: 90px; height: 90px;
    flex-shrink: 0;
    object-fit: cover;
  }
  .mlc-body {
    flex: 1;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .mlc-name { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
  .mlc-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
  .mlc-tag {
    background: var(--primary-light);
    color: var(--primary);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
  }
  .mlc-info { font-size: 11px; color: var(--text-muted); }
  .mlc-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }

  /* 搜索页 */
  .search-page { background: white; }
  .search-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: white;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F5F5F5;
    border-radius: 22px;
    padding: 10px 16px;
  }
  .search-input-wrap svg { width: 16px; height: 16px; color: var(--text-muted); }
  .search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    outline: none;
    font-family: inherit;
  }
  .cancel-btn {
    color: var(--primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
  }
  .search-tags { padding: 16px; }
  .search-tags-title { font-size: 13px; font-weight: 600; margin-bottom: 12px; color: var(--text); }
  .search-tags-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .search-tag-item {
    background: #F5F5F5;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    color: var(--text-light);
    cursor: pointer;
  }
  .search-result-item {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
  }
  .search-result-item:last-child { border-bottom: none; }
  .sri-name { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
  .sri-meta { font-size: 12px; color: var(--text-muted); }

  /* ======================= 商家详情页 ======================= */
  .detail-page { background: white; }
  .detail-hero {
    position: relative;
    height: 220px;
    overflow: hidden;
  }
  .detail-hero img {
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .detail-hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0;
    padding: 40px 16px 16px;
    background: linear-gradient(rgba(0,0,0,0.5), transparent);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .back-btn, .share-btn, .collect-btn {
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .back-btn svg, .share-btn svg, .collect-btn svg { width: 18px; height: 18px; }
  .detail-info-bar {
    background: white;
    margin: -20px 16px 0;
    border-radius: 16px 16px 0 0;
    padding: 20px 16px 16px;
    position: relative;
    z-index: 10;
  }
  .detail-shop-name { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
  .detail-shop-rating {
    display: flex; align-items: center; gap: 12px;
    font-size: 12px; color: var(--text-muted);
    margin-bottom: 12px;
  }
  .detail-shop-rating .score {
    color: var(--primary);
    font-size: 20px;
    font-weight: 700;
  }
  .detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
  .detail-tag {
    background: var(--primary-light);
    color: var(--primary);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
  }
  .detail-meta-row {
    display: flex;
    gap: 16px;
    font-size: 12px;
    color: var(--text-muted);
    padding: 10px 0;
    border-top: 1px solid var(--border);
  }
  .detail-meta-row span { color: var(--primary); font-weight: 600; }

  /* 菜单Tab */
  .menu-tabs {
    display: flex;
    background: white;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 30;
  }
  .menu-tab {
    flex: 1;
    padding: 14px 0;
    text-align: center;
    font-size: 14px;
    color: var(--text-light);
    font-weight: 500;
    cursor: pointer;
    position: relative;
    transition: color 0.2s;
  }
  .menu-tab.active { color: var(--primary); font-weight: 700; }
  .menu-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%; transform: translateX(-50%);
    width: 28px; height: 3px;
    background: var(--primary);
    border-radius: 2px;
  }

  /* 商品卡片 */
  .menu-section { padding: 12px 16px; }
  .menu-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
    padding-left: 8px;
    border-left: 3px solid var(--primary);
  }
  .product-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .product-card {
    background: #FAFAFA;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s;
  }
  .product-card:active { transform: scale(0.97); }
  .product-card-img { width: 100%; height: 110px; object-fit: cover; }
  .product-card-body { padding: 8px; }
  .product-name { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
  .product-desc { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
  .product-footer { display: flex; justify-content: space-between; align-items: center; }
  .product-price { color: var(--primary); font-size: 15px; font-weight: 700; }
  .product-price span { font-size: 11px; }
  .add-btn {
    width: 28px; height: 28px;
    background: var(--primary);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 18px;
    font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    line-height: 1;
  }

  /* 评价列表 */
  .review-item {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
  }
  .review-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
  .review-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: #ddd;
  }
  .review-user { font-size: 13px; font-weight: 600; }
  .review-date { font-size: 11px; color: var(--text-muted); }
  .review-stars { color: var(--secondary); font-size: 12px; margin-bottom: 6px; }
  .review-text { font-size: 13px; color: var(--text-light); line-height: 1.6; }
  .review-imgs { display: flex; gap: 6px; margin-top: 8px; }
  .review-img { width: 60px; height: 60px; border-radius: 6px; object-fit: cover; }

  /* 底部购买栏 */
  .buy-bar {
    position: fixed;
    bottom: calc(62px + var(--safe-bottom)); left: 50%; transform: translateX(-50%);
    width: 430px; max-width: 100%;
    background: white;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    padding: 10px 16px calc(10px + var(--safe-bottom));
    z-index: 90;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
  }
  .cart-icon-wrap {
    position: relative;
    margin-right: 12px;
  }
  .cart-icon {
    width: 44px; height: 44px;
    background: #333;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    position: relative;
  }
  .cart-icon svg { width: 22px; height: 22px; color: white; }
  .cart-badge {
    position: absolute;
    top: -4px; right: -4px;
    background: var(--primary);
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 10px;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
  }
  .cart-total { flex: 1; }
  .cart-price { font-size: 18px; font-weight: 700; color: var(--primary); }
  .cart-price span { font-size: 12px; }
  .cart-delivery { font-size: 11px; color: var(--text-muted); }
  .checkout-btn {
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }

  /* ======================= 订单页 ======================= */
  .orders-page { background: var(--bg); }
  .orders-header {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 20px 16px 30px;
  }
  .orders-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; }
  .order-tabs {
    display: flex;
    gap: 4px;
    background: rgba(255,255,255,0.15);
    border-radius: 10px;
    padding: 3px;
  }
  .order-tab {
    flex: 1;
    padding: 7px 0;
    text-align: center;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
  }
  .order-tab.active {
    background: white;
    color: var(--primary);
    font-weight: 700;
  }
  .order-card {
    background: white;
    border-radius: 12px;
    margin: 0 16px 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
  }
  .order-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
  }
  .order-shop-name { font-size: 13px; font-weight: 700; }
  .order-status {
    font-size: 13px;
    color: var(--primary);
    font-weight: 600;
  }
  .order-status.pending { color: var(--secondary); }
  .order-items {
    padding: 10px 14px;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .order-item-imgs { display: flex; gap: 4px; }
  .order-item-img { width: 50px; height: 50px; border-radius: 6px; object-fit: cover; background: #eee; }
  .order-item-info { flex: 1; }
  .order-item-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
  .order-item-rule { font-size: 11px; color: var(--text-muted); }
  .order-item-price { font-size: 14px; font-weight: 700; text-align: right; }
  .order-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-top: 1px solid var(--border);
  }
  .order-total { font-size: 13px; color: var(--text-muted); }
  .order-total strong { color: var(--primary); font-size: 15px; }
  .order-actions { display: flex; gap: 8px; }
  .order-action-btn {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    background: white;
    color: var(--text-light);
  }
  .order-action-btn.primary {
    background: var(--primary);
    color: white;
    border: none;
  }

  /* ======================= 我的（个人中心） ======================= */
  .profile-page { background: var(--bg); }
  .profile-header {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    padding: 24px 16px 50px;
    color: white;
    position: relative;
  }
  .profile-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
  }
  .profile-header-title { font-size: 18px; font-weight: 700; }
  .profile-header-actions { display: flex; gap: 8px; }
  .profile-header-icon {
    width: 32px; height: 32px;
    background: rgba(255,255,255,0.2);
    border: none;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .profile-header-icon svg { width: 16px; height: 16px; color: white; }
  .profile-user {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .profile-avatar {
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 3px solid rgba(255,255,255,0.4);
    object-fit: cover;
    background: rgba(255,255,255,0.3);
  }
  .profile-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
  .profile-id { font-size: 12px; opacity: 0.7; }
  .profile-vip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,215,0,0.3);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    margin-top: 4px;
  }
  .profile-card {
    background: white;
    border-radius: 16px;
    margin: -30px 16px 12px;
    padding: 16px;
    box-shadow: var(--shadow);
    position: relative;
    z-index: 10;
  }
  .profile-stats {
    display: flex;
    justify-content: space-around;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
  }
  .profile-stat {
    text-align: center;
    cursor: pointer;
  }
  .profile-stat-num { font-size: 18px; font-weight: 700; color: var(--text); }
  .profile-stat-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
  .profile-menu {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .profile-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
  }
  .profile-menu-item:last-child { border-bottom: none; }
  .pmi-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .pmi-icon svg { width: 20px; height: 20px; color: white; }
  .pmi-label { flex: 1; font-size: 14px; font-weight: 500; }
  .pmi-arrow { color: var(--text-muted); font-size: 12px; }

  /* ======================= 服务页（家政/生活服务） ======================= */
  .service-page { background: var(--bg); }
  .service-header {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    padding: 16px;
  }
  .service-header-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
  .service-header-sub { font-size: 12px; opacity: 0.8; }
  .service-type-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: white;
    margin: 12px 16px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow);
  }
  .service-type-item {
    background: white;
    padding: 14px 8px;
    text-align: center;
    cursor: pointer;
  }
  .service-type-item:active { background: var(--primary-light); }
  .sti-icon { font-size: 28px; margin-bottom: 6px; }
  .sti-name { font-size: 12px; font-weight: 600; }
  .service-filter-bar {
    display: flex;
    gap: 8px;
    padding: 0 16px 12px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .service-filter-bar::-webkit-scrollbar { display: none; }
  .service-filter-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    background: white;
    border: 1px solid var(--border);
    color: var(--text-light);
    cursor: pointer;
    transition: all 0.2s;
  }
  .service-filter-btn.active {
    background: var(--primary-light);
    border-color: var(--primary);
    color: var(--primary);
    font-weight: 600;
  }

  /* ======================= 支付页 ======================= */
  .payment-page {
    background: white;
    min-height: 100vh;
    padding-bottom: 120px;
  }
  .payment-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .back-arrow {
    width: 32px; height: 32px;
    background: #F5F5F5;
    border: none;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
  }
  .back-arrow svg { width: 16px; height: 16px; color: var(--text); }
  .payment-title { font-size: 16px; font-weight: 700; }
  .payment-amount-section {
    text-align: center;
    padding: 32px 16px;
    border-bottom: 1px solid var(--border);
  }
  .payment-amount-label { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
  .payment-amount {
    font-size: 40px;
    font-weight: 700;
    color: var(--primary);
  }
  .payment-methods { padding: 16px; }
  .payment-method-title { font-size: 14px; font-weight: 700; margin-bottom: 12px; }
  .payment-method-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
  }
  .pm-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
  .pm-icon svg { width: 22px; height: 22px; color: white; }
  .pm-label { flex: 1; font-size: 14px; font-weight: 500; }
  .pm-check { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); }
  .pm-check.selected { border-color: var(--primary); background: var(--primary); }
  .payment-btn {
    position: fixed;
    bottom: 40px; left: 50%; transform: translateX(-50%);
    width: calc(100% - 64px);
    max-width: 366px;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(255,96,52,0.35);
  }

  /* ======================= 工具 ======================= */
  .page-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: white;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
  }
  .section-gap { height: 12px; }

  /* Toast 动画 */
  .toast {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.75);
    color: white;
    padding: 14px 28px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    z-index: 9999;
    pointer-events: none;
    animation: toastIn 2s ease forwards;
  }
  @keyframes toastIn {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    80% { opacity: 1; }
    100% { opacity: 0; }
  }

  /* Loading */
  .loading-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    gap: 16px;
  }
  .spinner {
    width: 40px; height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .loading-text { font-size: 14px; color: var(--text-muted); }

  /* Coupon badge */
  .coupon-badge {
    background: linear-gradient(135deg, #FF6034, #FF9500);
    color: white;
    padding: 3px 8px;
    border-radius: 10px 10px 10px 0;
    font-size: 11px;
    font-weight: 700;
  }
</style>
</head>
<body>

<!-- ==================== 登录页 ==================== -->
<div id="page-login" class="page active">
  <div class="login-page">
    <div class="login-content">
      <div class="login-logo">
        <svg viewBox="0 0 48 48" fill="none">
          <circle cx="24" cy="24" r="22" fill="white" fill-opacity="0.2"/>
          <path d="M24 12 L30 22 L24 20 L18 22 Z" fill="white"/>
          <path d="M24 20 L30 22 L32 30 L24 28 L16 30 L18 22 Z" fill="white" fill-opacity="0.8"/>
          <circle cx="24" cy="24" r="4" fill="white"/>
        </svg>
      </div>
      <div class="login-title">本地生活</div>
      <div class="login-subtitle">身边的便捷生活服务</div>
      <div class="login-btns">
        <button class="btn-wechat" onclick="login('wechat')">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="white">
            <path d="M8.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
            <path d="M12 2C6.477 2 2 6.026 2 11c0 2.024.844 3.862 2.216 5.228L2.59 18.73A.5.5 0 0 0 3 19h2.5l1.27-1.27A10.45 10.45 0 0 0 12 22c5.523 0 10-4.026 10-9s-4.477-9-10-9z"/>
          </svg>
          微信一键登录
        </button>
        <button class="btn-phone" onclick="showPage('home')">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="#666">
            <path d="M6.62 10.79a15.05 15.05 0 0 1 6.59-6.59l2.2 2.2a2 2 0 0 1-1.42 3.42h-1.5a.5.5 0 0 0-.5.5v2.5a.5.5 0 0 0 .5.5h2.5a.5.5 0 0 0 .5-.5v-1.5a2 2 0 0 1 3.42 1.42l-2.2 2.2a11.03 11.03 0 0 1-6.59 2.59A11 11 0 0 1 2 11c0-1.72.39-3.34 1.07-4.79l1.55 1.58z"/>
          </svg>
          手机号登录
        </button>
      </div>
      <div class="login-terms">
        登录即表示同意
        <a href="#">《用户服务协议》</a> 和
        <a href="#">《隐私政策》</a>
      </div>
    </div>
    <div class="login-wave"></div>
  </div>
</div>

<!-- ==================== 首页 ==================== -->
<div id="page-home" class="page">
  <div class="home-header">
    <div class="home-header-top">
      <button class="location-btn" onclick="showToast('切换城市')">
        <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor">
          <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
        </svg>
        深圳
        <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M7 10l5 5 5-5z"/></svg>
      </button>
      <div class="search-bar" onclick="showPage('search')">
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
        <span>搜索商家、商品或服务</span>
      </div>
      <div class="header-actions">
        <button class="header-action-btn">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
        </button>
      </div>
    </div>
  </div>

  <!-- 分类导航 -->
  <div class="category-grid">
    <div class="category-item" onclick="showPage('service')">
      <div class="cat-icon" style="background:#FFF0ED;">🍜</div>
      <span class="cat-label">外卖</span>
    </div>
    <div class="category-item" onclick="showPage('service')">
      <div class="cat-icon" style="background:#E8F7E8;">🛵</div>
      <span class="cat-label">跑腿</span>
    </div>
    <div class="category-item" onclick="showPage('service')">
      <div class="cat-icon" style="background:#FFF8E1;">🏪</div>
      <span class="cat-label">商超</span>
    </div>
    <div class="category-item" onclick="showPage('service')">
      <div class="cat-icon" style="background:#E3F2FD;">💊</div>
      <span class="cat-label">药品</span>
    </div>
    <div class="category-item" onclick="showPage('service')">
      <div class="cat-icon" style="background:#FCE4EC;">🧹</div>
      <span class="cat-label">家政</span>
    </div>
    <div class="category-item" onclick="showPage('service')">
      <div class="cat-icon" style="background:#E8F5E9;">🥗</div>
      <span class="cat-label">生鲜</span>
    </div>
    <div class="category-item" onclick="showPage('service')">
      <div class="cat-icon" style="background:#FFF3E0;">⚡</div>
      <span class="cat-label">便民</span>
    </div>
    <div class="category-item" onclick="showPage('service')">
      <div class="cat-icon" style="background:#F3E5F5;">🚚</div>
      <span class="cat-label">快递</span>
    </div>
    <div class="category-item" onclick="showPage('service')">
      <div class="cat-icon" style="background:#E0F7FA;">🔧</div>
      <span class="cat-label">维修</span>
    </div>
    <div class="category-item" onclick="showPage('service')">
      <div class="cat-icon" style="background:#FBE9E7;">🎂</div>
      <span class="cat-label">鲜花</span>
    </div>
  </div>

  <!-- 限时优惠 -->
  <div class="flash-deal-bar">
    <div>
      <div class="flash-deal-title">🔥 限时特惠</div>
      <div class="flash-deal-sub">距离结束</div>
    </div>
    <div class="flash-countdown">
      <span class="flash-num" id="cd-h">02</span>
      <span style="font-weight:700;">:</span>
      <span class="flash-num" id="cd-m">34</span>
      <span style="font-weight:700;">:</span>
      <span class="flash-num" id="cd-s">56</span>
    </div>
  </div>

  <!-- Banner -->
  <div class="banner-section">
    <div class="banner-card">
      <img src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=800&q=80" alt="banner" loading="lazy">
      <div class="banner-overlay">
        <div class="banner-title">新用户首单立减15元</div>
        <div class="banner-sub">限时优惠 · 全场通用</div>
      </div>
      <div class="banner-dots">
        <div class="banner-dot active"></div>
        <div class="banner-dot"></div>
        <div class="banner-dot"></div>
      </div>
    </div>
  </div>

  <!-- 附近商家推荐 -->
  <div class="h-scroll-section">
    <div class="section-header">
      <span class="section-title">🏪 附近商家</span>
      <span class="section-more" onclick="showPage('search')">查看更多 ›</span>
    </div>
    <div class="h-scroll">
      <div class="merchant-card" onclick="showPage('detail')">
        <img class="merchant-card-img" src="https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=400&q=80" alt="商家" loading="lazy">
        <div class="merchant-card-body">
          <div class="merchant-name">湘菜小馆</div>
          <div class="merchant-meta">
            <span class="merchant-score">4.8</span>
            <span>月售1234</span>
          </div>
          <div class="merchant-tags">
            <span class="merchant-tag">满25减5</span>
            <span class="merchant-tag">新客立减</span>
          </div>
          <div class="merchant-footer">
            <span class="merchant-delivery">¥2配送</span>
            <span class="merchant-distance">1.2km</span>
          </div>
        </div>
      </div>
      <div class="merchant-card" onclick="showPage('detail')">
        <img class="merchant-card-img" src="https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=400&q=80" alt="商家" loading="lazy">
        <div class="merchant-card-body">
          <div class="merchant-name">轻食沙拉</div>
          <div class="merchant-meta">
            <span class="merchant-score">4.6</span>
            <span>月售876</span>
          </div>
          <div class="merchant-tags">
            <span class="merchant-tag">健康轻食</span>
          </div>
          <div class="merchant-footer">
            <span class="merchant-delivery">免费配送</span>
            <span class="merchant-distance">0.8km</span>
          </div>
        </div>
      </div>
      <div class="merchant-card" onclick="showPage('detail')">
        <img class="merchant-card-img" src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=400&q=80" alt="商家" loading="lazy">
        <div class="merchant-card-body">
          <div class="merchant-name">粤式点心</div>
          <div class="merchant-meta">
            <span class="merchant-score">4.9</span>
            <span>月售2341</span>
          </div>
          <div class="merchant-tags">
            <span class="merchant-tag">招牌推荐</span>
          </div>
          <div class="merchant-footer">
            <span class="merchant-delivery">¥3配送</span>
            <span class="merchant-distance">1.5km</span>
          </div>
        </div>
      </div>
      <div class="merchant-card" onclick="showPage('detail')">
        <img class="merchant-card-img" src="https://images.unsplash.com/photo-1512058564366-18510be2db19?w=400&q=80" alt="商家" loading="lazy">
        <div class="merchant-card-body">
          <div class="merchant-name">日式料理</div>
          <div class="merchant-meta">
            <span class="merchant-score">4.7</span>
            <span>月售654</span>
          </div>
          <div class="merchant-tags">
            <span class="merchant-tag">刺身拼盘</span>
          </div>
          <div class="merchant-footer">
            <span class="merchant-delivery">¥4配送</span>
            <span class="merchant-distance">2.1km</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="section-gap"></div>

  <!-- 家政服务 -->
  <div class="h-scroll-section" style="background:white; padding-top:16px;">
    <div class="section-header">
      <span class="section-title">🧹 家政服务</span>
      <span class="section-more" onclick="showPage('service')">全部分类 ›</span>
    </div>
    <div class="h-scroll">
      <div class="service-card" onclick="showPage('detail')">
        <img class="service-card-img" src="https://images.unsplash.com/photo-1581578731548-c64695cc6952?w=400&q=80" alt="保洁" loading="lazy">
        <div class="service-card-body">
          <div class="service-name">日常保洁</div>
          <div>
            <span class="service-price">¥<span>68</span>/小时</span>
            <span class="service-orig">¥88</span>
          </div>
        </div>
      </div>
      <div class="service-card" onclick="showPage('detail')">
        <img class="service-card-img" src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=400&q=80" alt="搬家" loading="lazy">
        <div class="service-card-body">
          <div class="service-name">小型搬家</div>
          <div>
            <span class="service-price">¥<span>128</span>起</span>
          </div>
        </div>
      </div>
      <div class="service-card" onclick="showPage('detail')">
        <img class="service-card-img" src="https://images.unsplash.com/photo-1621905251189-08b45d6a269e?w=400&q=80" alt="维修" loading="lazy">
        <div class="service-card-body">
          <div class="service-name">家电维修</div>
          <div>
            <span class="service-price">¥<span>58</span>起</span>
          </div>
        </div>
      </div>
      <div class="service-card" onclick="showPage('detail')">
        <img class="service-card-img" src="https://images.unsplash.com/photo-1594744803329-e58b31de8bf5?w=400&q=80" alt="保姆" loading="lazy">
        <div class="service-card-body">
          <div class="service-name">专业保姆</div>
          <div>
            <span class="service-price">¥<span>4500</span>/月</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="section-gap"></div>

  <!-- 推荐商家列表 -->
  <div style="padding: 0 0 16px; background:white;">
    <div class="section-header" style="padding-top:16px;">
      <span class="section-title">📍 猜你喜欢</span>
    </div>
    <div class="merchant-list-card" onclick="showPage('detail')">
      <img class="mlc-img" src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=300&q=80" alt="商家" loading="lazy">
      <div class="mlc-body">
        <div>
          <div class="mlc-name">川味坊·川菜馆</div>
          <div class="mlc-tags">
            <span class="mlc-tag">川菜</span>
            <span class="mlc-tag">辣</span>
            <span class="mlc-tag">下饭菜</span>
          </div>
          <div class="mlc-info">⭐ 4.8  |  月售2567  |  ¥2配送</div>
        </div>
        <div class="mlc-footer">
          <span style="font-size:11px;color:var(--text-muted)">1.3km · 约28分钟</span>
          <span style="font-size:12px;color:var(--primary);font-weight:600">去抢购</span>
        </div>
      </div>
    </div>
    <div class="merchant-list-card" onclick="showPage('detail')">
      <img class="mlc-img" src="https://images.unsplash.com/photo-1521017432531-fbd92d768814?w=300&q=80" alt="商家" loading="lazy">
      <div class="mlc-body">
        <div>
          <div class="mlc-name">星巴克咖啡</div>
          <div class="mlc-tags">
            <span class="mlc-tag">咖啡</span>
            <span class="mlc-tag">下午茶</span>
          </div>
          <div class="mlc-info">⭐ 4.9  |  月售4321  |  免费配送</div>
        </div>
        <div class="mlc-footer">
          <span style="font-size:11px;color:var(--text-muted)">0.5km · 约15分钟</span>
          <span style="font-size:12px;color:var(--primary);font-weight:600">去抢购</span>
        </div>
      </div>
    </div>
    <div class="merchant-list-card" onclick="showPage('detail')">
      <img class="mlc-img" src="https://images.unsplash.com/photo-1482049016688-2d3e1b311543?w=300&q=80" alt="商家" loading="lazy">
      <div class="mlc-body">
        <div>
          <div class="mlc-name">麦香早餐</div>
          <div class="mlc-tags">
            <span class="mlc-tag">早餐</span>
            <span class="mlc-tag">快餐</span>
          </div>
          <div class="mlc-info">⭐ 4.5  |  月售1234  |  ¥1配送</div>
        </div>
        <div class="mlc-footer">
          <span style="font-size:11px;color:var(--text-muted)">0.9km · 约20分钟</span>
          <span style="font-size:12px;color:var(--primary);font-weight:600">去抢购</span>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ==================== 搜索页 ==================== -->
<div id="page-search" class="page search-page">
  <div class="search-header">
    <div class="search-input-wrap">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
      <input class="search-input" placeholder="搜索商家、商品或服务" id="searchInput">
    </div>
    <span class="cancel-btn" onclick="showPage('home')">取消</span>
  </div>

  <!-- 搜索建议 -->
  <div class="search-tags">
    <div class="search-tags-title">🔥 热门搜索</div>
    <div class="search-tags-list">
      <div class="search-tag-item" onclick="document.getElementById('searchInput').value='湘菜小馆';document.getElementById('searchInput').focus()">湘菜小馆</div>
      <div class="search-tag-item" onclick="document.getElementById('searchInput').value='保洁';document.getElementById('searchInput').focus()">保洁</div>
      <div class="search-tag-item" onclick="document.getElementById('searchInput').value='川菜';document.getElementById('searchInput').focus()">川菜</div>
      <div class="search-tag-item" onclick="document.getElementById('searchInput').value='维修';document.getElementById('searchInput').focus()">维修</div>
      <div class="search-tag-item" onclick="document.getElementById('searchInput').value='咖啡';document.getElementById('searchInput').focus()">咖啡</div>
      <div class="search-tag-item" onclick="document.getElementById('searchInput').value='生鲜';document.getElementById('searchInput').focus()">生鲜</div>
      <div class="search-tag-item" onclick="document.getElementById('searchInput').value='搬家';document.getElementById('searchInput').focus()">搬家</div>
      <div class="search-tag-item" onclick="document.getElementById('searchInput').value='药品';document.getElementById('searchInput').focus()">药品</div>
    </div>
  </div>

  <!-- 搜索结果占位 -->
  <div id="searchResults" style="display:none;"></div>
</div>

<!-- ==================== 服务/分类页 ==================== -->
<div id="page-service" class="page service-page">
  <div class="service-header">
    <div class="service-header-title">🏠 生活服务</div>
    <div class="service-header-sub">覆盖您日常生活的方方面面</div>
  </div>

  <div class="service-type-grid">
    <div class="service-type-item" onclick="showToast('外卖点餐')">
      <div class="sti-icon">🍜</div>
      <div class="sti-name">外卖点餐</div>
    </div>
    <div class="service-type-item" onclick="showToast('跑腿代办')">
      <div class="sti-icon">🛵</div>
      <div class="sti-name">跑腿代办</div>
    </div>
    <div class="service-type-item" onclick="showToast('同城速递')">
      <div class="sti-icon">📦</div>
      <div class="sti-name">同城速递</div>
    </div>
    <div class="service-type-item" onclick="showToast('便民缴费')">
      <div class="sti-icon">⚡</div>
      <div class="sti-name">便民缴费</div>
    </div>
    <div class="service-type-item" onclick="showToast('生鲜果蔬')">
      <div class="sti-icon">🥗</div>
      <div class="sti-name">生鲜果蔬</div>
    </div>
    <div class="service-type-item" onclick="showToast('商超便利')">
      <div class="sti-icon">🏪</div>
      <div class="sti-name">商超便利</div>
    </div>
    <div class="service-type-item" onclick="showToast('药品配送')">
      <div class="sti-icon">💊</div>
      <div class="sti-name">药品配送</div>
    </div>
    <div class="service-type-item" onclick="showToast('鲜花蛋糕')">
      <div class="sti-icon">🎂</div>
      <div class="sti-name">鲜花蛋糕</div>
    </div>
  </div>

  <!-- 家政子分类 -->
  <div style="padding: 16px; background:white; margin: 12px 16px; border-radius:12px; box-shadow: var(--shadow);">
    <div style="font-size:15px; font-weight:700; margin-bottom:14px;">🧹 家政服务</div>
    <div style="display:grid; grid-template-columns: 1fr 1fr; gap:10px;">
      <div style="display:flex;align-items:center;gap:10px; background:#FFF8F6; padding:12px; border-radius:10px; cursor:pointer;" onclick="showPage('detail')">
        <span style="font-size:28px;">🧹</span>
        <div>
          <div style="font-size:13px;font-weight:600;">日常保洁</div>
          <div style="font-size:11px;color:var(--text-muted)">¥68/小时起</div>
        </div>
      </div>
      <div style="display:flex;align-items:center;gap:10px; background:#FFF8F6; padding:12px; border-radius:10px; cursor:pointer;" onclick="showPage('detail')">
        <span style="font-size:28px;">🚚</span>
        <div>
          <div style="font-size:13px;font-weight:600;">搬家服务</div>
          <div style="font-size:11px;color:var(--text-muted)">¥128起</div>
        </div>
      </div>
      <div style="display:flex;align-items:center;gap:10px; background:#FFF8F6; padding:12px; border-radius:10px; cursor:pointer;" onclick="showPage('detail')">
        <span style="font-size:28px;">🔧</span>
        <div>
          <div style="font-size:13px;font-weight:600;">维修服务</div>
          <div style="font-size:11px;color:var(--text-muted)">¥58起</div>
        </div>
      </div>
      <div style="display:flex;align-items:center;gap:10px; background:#FFF8F6; padding:12px; border-radius:10px; cursor:pointer;" onclick="showPage('detail')">
        <span style="font-size:28px;">👩‍🍼</span>
        <div>
          <div style="font-size:13px;font-weight:600;">保姆月嫂</div>
          <div style="font-size:11px;color:var(--text-muted)">¥4500/月起</div>
        </div>
      </div>
      <div style="display:flex;align-items:center;gap:10px; background:#FFF8F6; padding:12px; border-radius:10px; cursor:pointer;" onclick="showPage('detail')">
        <span style="font-size:28px;">🚿</span>
        <div>
          <div style="font-size:13px;font-weight:600;">管道疏通</div>
          <div style="font-size:11px;color:var(--text-muted)">¥88起</div>
        </div>
      </div>
      <div style="display:flex;align-items:center;gap:10px; background:#FFF8F6; padding:12px; border-radius:10px; cursor:pointer;" onclick="showPage('detail')">
        <span style="font-size:28px;">🧺</span>
        <div>
          <div style="font-size:13px;font-weight:600;">家电清洗</div>
          <div style="font-size:11px;color:var(--text-muted)">¥98起</div>
        </div>
      </div>
    </div>
  </div>

  <!-- 服务筛选 -->
  <div class="service-filter-bar">
    <div class="service-filter-btn active">综合排序</div>
    <div class="service-filter-btn">距离最近</div>
    <div class="service-filter-btn">评分最高</div>
    <div class="service-filter-btn">价格最低</div>
    <div class="service-filter-btn">上门最快</div>
  </div>

  <!-- 服务商家列表 -->
  <div style="padding-bottom: 80px;">
    <div class="merchant-list-card" onclick="showPage('detail')">
      <img class="mlc-img" src="https://images.unsplash.com/photo-1581578731548-c64695cc6952?w=300&q=80" alt="保洁" loading="lazy">
      <div class="mlc-body">
        <div>
          <div class="mlc-name">洁到家·专业保洁</div>
          <div class="mlc-tags">
            <span class="mlc-tag">专业认证</span>
            <span class="mlc-tag">P0</span>
          </div>
          <div class="mlc-info">⭐ 4.9  |  已服务1256次  |  约30分钟上门</div>
        </div>
        <div class="mlc-footer">
          <span style="font-size:14px;color:var(--primary);font-weight:700">¥68<span style="font-size:11px;font-weight:400;color:var(--text-muted)">/小时</span></span>
          <span style="font-size:12px;color:var(--primary);font-weight:600">立即预约</span>
        </div>
      </div>
    </div>
    <div class="merchant-list-card" onclick="showPage('detail')">
      <img class="mlc-img" src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=300&q=80" alt="搬家" loading="lazy">
      <div class="mlc-body">
        <div>
          <div class="mlc-name">顺捷搬家</div>
          <div class="mlc-tags">
            <span class="mlc-tag">口碑推荐</span>
          </div>
          <div class="mlc-info">⭐ 4.7  |  已服务892次  |  随时上门</div>
        </div>
        <div class="mlc-footer">
          <span style="font-size:14px;color:var(--primary);font-weight:700">¥128<span style="font-size:11px;font-weight:400;color:var(--text-muted)">起</span></span>
          <span style="font-size:12px;color:var(--primary);font-weight:600">立即预约</span>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ==================== 商家详情页 ==================== -->
<div id="page-detail" class="page detail-page">
  <div class="detail-hero">
    <img src="https://images.unsplash.com/photo-1555396273-367ea4eb4db5?w=800&q=80" alt="商家封面" loading="lazy">
    <div class="detail-hero-overlay">
      <button class="back-btn" onclick="showPage('home')">
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
      </button>
      <div style="display:flex;gap:8px;">
        <button class="share-btn">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92z"/></svg>
        </button>
        <button class="collect-btn">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
        </button>
      </div>
    </div>
  </div>

  <div class="detail-info-bar">
    <div class="detail-shop-name">川味坊·川菜馆</div>
    <div class="detail-shop-rating">
      <span class="score">4.8</span>
      <span>⭐ 4.8分</span>
      <span>|</span>
      <span>月售2567单</span>
      <span>|</span>
      <span>约28分钟</span>
    </div>
    <div class="detail-tags">
      <span class="detail-tag">🔥 满25减5</span>
      <span class="detail-tag">🎁 新客立减3元</span>
      <span class="detail-tag">⏰ 营业中</span>
    </div>
    <div class="detail-meta-row">
      <span>🚗 ¥2 配送</span>
      <span>📍 距您1.3km</span>
      <span>⭐ 4.8分</span>
    </div>
  </div>

  <!-- Tab切换 -->
  <div class="menu-tabs">
    <div class="menu-tab active" onclick="switchTab(this, 'tab-menu')">点餐</div>
    <div class="menu-tab" onclick="switchTab(this, 'tab-review')">评价(1.2k)</div>
    <div class="menu-tab" onclick="switchTab(this, 'tab-info')">商家</div>
  </div>

  <!-- 菜单 -->
  <div id="tab-menu" class="tab-content">
    <div class="menu-section">
      <div class="menu-section-title">🥘 招牌推荐</div>
      <div class="product-grid">
        <div class="product-card" onclick="event.stopPropagation();showPage('payment')">
          <img class="product-card-img" src="https://images.unsplash.com/photo-1563245372-f21724e3856d?w=300&q=80" alt="水煮鱼" loading="lazy">
          <div class="product-card-body">
            <div class="product-name">招牌水煮鱼</div>
            <div class="product-desc">麻辣鲜香，2-3人份</div>
            <div class="product-footer">
              <div class="product-price">¥<span>58</span></div>
              <button class="add-btn" onclick="event.stopPropagation();addToCart()">+</button>
            </div>
          </div>
        </div>
        <div class="product-card" onclick="event.stopPropagation();showPage('payment')">
          <img class="product-card-img" src="https://images.unsplash.com/photo-1563379091339-03b21ab4a4f8?w=300&q=80" alt="麻婆豆腐" loading="lazy">
          <div class="product-card-body">
            <div class="product-name">麻婆豆腐</div>
            <div class="product-desc">经典川菜，下饭神器</div>
            <div class="product-footer">
              <div class="product-price">¥<span>28</span></div>
              <button class="add-btn" onclick="event.stopPropagation();addToCart()">+</button>
            </div>
          </div>
        </div>
        <div class="product-card" onclick="event.stopPropagation();showPage('payment')">
          <img class="product-card-img" src="https://images.unsplash.com/photo-1534422298391-e4f8c172dddb?w=300&q=80" alt="宫保鸡丁" loading="lazy">
          <div class="product-card-body">
            <div class="product-name">宫保鸡丁</div>
            <div class="product-desc">香辣可口，老少皆宜</div>
            <div class="product-footer">
              <div class="product-price">¥<span>38</span></div>
              <button class="add-btn" onclick="event.stopPropagation();addToCart()">+</button>
            </div>
          </div>
        </div>
        <div class="product-card" onclick="event.stopPropagation();showPage('payment')">
          <img class="product-card-img" src="https://images.unsplash.com/photo-1588166524941-3bf61a9c41db?w=300&q=80" alt="回锅肉" loading="lazy">
          <div class="product-card-body">
            <div class="product-name">回锅肉</div>
            <div class="product-desc">肥而不腻，香味浓郁</div>
            <div class="product-footer">
              <div class="product-price">¥<span>35</span></div>
              <button class="add-btn" onclick="event.stopPropagation();addToCart()">+</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="menu-section">
      <div class="menu-section-title">🍲 汤品类</div>
      <div class="product-grid">
        <div class="product-card" onclick="event.stopPropagation();showPage('payment')">
          <img class="product-card-img" src="https://images.unsplash.com/photo-1547592180-85f173990554?w=300&q=80" alt="酸菜鱼汤" loading="lazy">
          <div class="product-card-body">
            <div class="product-name">酸菜鱼汤</div>
            <div class="product-desc">酸辣开胃，营养美味</div>
            <div class="product-footer">
              <div class="product-price">¥<span>45</span></div>
              <button class="add-btn" onclick="event.stopPropagation();addToCart()">+</button>
            </div>
          </div>
        </div>
        <div class="product-card" onclick="event.stopPropagation();showPage('payment')">
          <img class="product-card-img" src="https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=300&q=80" alt="老火靓汤" loading="lazy">
          <div class="product-card-body">
            <div class="product-name">老火靓汤</div>
            <div class="product-desc">每日炖品，滋补养生</div>
            <div class="product-footer">
              <div class="product-price">¥<span>32</span></div>
              <button class="add-btn" onclick="event.stopPropagation();addToCart()">+</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- 评价Tab -->
  <div id="tab-review" class="tab-content" style="display:none;">
    <div style="padding:16px;">
      <div style="display:flex;align-items:center;gap:16px;margin-bottom:16px;">
        <div style="text-align:center;">
          <div style="font-size:32px;font-weight:700;color:var(--primary);">4.8</div>
          <div style="font-size:11px;color:var(--text-muted);">综合评分</div>
        </div>
        <div style="flex:1;">
          <div style="font-size:12px;color:var(--text-muted);margin-bottom:4px;">⭐ 口味 4.9   🏃 配送 4.7</div>
          <div style="font-size:12px;color:var(--text-muted);">整体好评率 98%</div>
        </div>
      </div>
    </div>
    <div class="review-item">
      <div class="review-header">
        <img class="review-avatar" src="https://i.pravatar.cc/72?img=1" alt="用户头像" loading="lazy">
        <div style="flex:1;">
          <div class="review-user">小明同学</div>
          <div class="review-date">2026-05-10</div>
        </div>
        <div class="review-stars">⭐⭐⭐⭐⭐</div>
      </div>
      <div class="review-text">味道非常正宗！水煮鱼麻辣鲜香，豆腐也很入味，包装精美，送餐速度快，下次还会回购！</div>
      <div class="review-imgs">
        <img class="review-img" src="https://images.unsplash.com/photo-1563245372-f21724e3856d?w=200&q=60" alt="晒图" loading="lazy">
        <img class="review-img" src="https://images.unsplash.com/photo-1563379091339-03b21ab4a4f8?w=200&q=60" alt="晒图" loading="lazy">
      </div>
    </div>
    <div class="review-item">
      <div class="review-header">
        <img class="review-avatar" src="https://i.pravatar.cc/72?img=5" alt="用户头像" loading="lazy">
        <div style="flex:1;">
          <div class="review-user">吃货小王</div>
          <div class="review-date">2026-05-08</div>
        </div>
        <div class="review-stars">⭐⭐⭐⭐⭐</div>
      </div>
      <div class="review-text">已经是第三次点了，宫保鸡丁超级好吃！麻婆豆腐也很地道，推荐大家试试！</div>
    </div>
    <div class="review-item">
      <div class="review-header">
        <img class="review-avatar" src="https://i.pravatar.cc/72?img=8" alt="用户头像" loading="lazy">
        <div style="flex:1;">
          <div class="review-user">Linda</div>
          <div class="review-date">2026-05-05</div>
        </div>
        <div class="review-stars">⭐⭐⭐⭐</div>
      </div>
      <div class="review-text">菜品整体不错，就是稍微有点辣，希望能有更多不辣的选项。配送很快，服务态度好。</div>
    </div>
  </div>

  <!-- 商家信息Tab -->
  <div id="tab-info" class="tab-content" style="display:none;">
    <div style="padding:16px;">
      <div style="font-size:15px;font-weight:700;margin-bottom:12px;">📍 商家信息</div>
      <div style="display:flex;flex-direction:column;gap:10px;">
        <div style="display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-light);">
          <span>📍</span>
          <span>南山区科技园南区A栋1层（距您1.3km）</span>
        </div>
        <div style="display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-light);">
          <span>🕐</span>
          <span>营业时间：10:00 - 22:00</span>
        </div>
        <div style="display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-light);">
          <span>📞</span>
          <span>0755-12345678</span>
        </div>
        <div style="padding:12px;background:#F5F5F5;border-radius:10px;font-size:12px;color:var(--text-muted);margin-top:4px;">
          ✅ 已通过实名认证   ✅ 食品安全认证   ✅ 平台背书
        </div>
      </div>

      <div style="margin-top:20px;">
        <div style="font-size:15px;font-weight:700;margin-bottom:12px;">🗺️ 位置</div>
        <div style="height:160px;background:#E8E8E8;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:13px;">
          地图展示区域（接入地图SDK）
        </div>
      </div>
    </div>
  </div>

  <!-- 底部购买栏 -->
  <div class="buy-bar">
    <div class="cart-icon-wrap">
      <div class="cart-icon">
        <svg viewBox="0 0 24 24" fill="currentColor"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
        <div class="cart-badge" id="cartBadge" style="display:none;">0</div>
      </div>
    </div>
    <div class="cart-total">
      <div class="cart-price">¥<span id="cartPrice">0</span></div>
      <div class="cart-delivery">另需配送费 ¥2</div>
    </div>
    <button class="checkout-btn" onclick="showPage('payment')">去结算</button>
  </div>
</div>

<!-- ==================== 订单页 ==================== -->
<div id="page-orders" class="page orders-page">
  <div class="orders-header">
    <div class="orders-title">我的订单</div>
    <div class="order-tabs">
      <div class="order-tab active">全部</div>
      <div class="order-tab">待付款</div>
      <div class="order-tab">进行中</div>
      <div class="order-tab">已完成</div>
    </div>
  </div>

  <div style="padding-top:12px;">
    <div class="order-card">
      <div class="order-card-header">
        <span class="order-shop-name">🍜 川味坊·川菜馆</span>
        <span class="order-status">进行中</span>
      </div>
      <div class="order-items">
        <div class="order-item-imgs">
          <img class="order-item-img" src="https://images.unsplash.com/photo-1563245372-f21724e3856d?w=100&q=60" alt="商品" loading="lazy">
          <img class="order-item-img" src="https://images.unsplash.com/photo-1563379091339-03b21ab4a4f8?w=100&q=60" alt="商品" loading="lazy">
        </div>
        <div class="order-item-info">
          <div class="order-item-name">招牌水煮鱼 + 麻婆豆腐</div>
          <div class="order-item-rule">微辣 · ¥86</div>
        </div>
        <div class="order-item-price">¥86</div>
      </div>
      <div class="order-card-footer">
        <div class="order-total">共计 <strong>¥88</strong>（含配送费¥2）</div>
        <div class="order-actions">
          <button class="order-action-btn">联系骑手</button>
          <button class="order-action-btn primary">查看详情</button>
        </div>
      </div>
    </div>

    <div class="order-card">
      <div class="order-card-header">
        <span class="order-shop-name">🧹 洁到家·专业保洁</span>
        <span class="order-status">待服务</span>
      </div>
      <div class="order-items">
        <div class="order-item-imgs">
          <img class="order-item-img" src="https://images.unsplash.com/photo-1581578731548-c64695cc6952?w=100&q=60" alt="服务" loading="lazy">
        </div>
        <div class="order-item-info">
          <div class="order-item-name">日常保洁 2小时</div>
          <div class="order-item-rule">明天 10:00-12:00</div>
        </div>
        <div class="order-item-price">¥136</div>
      </div>
      <div class="order-card-footer">
        <div class="order-total">共计 <strong>¥136</strong></div>
        <div class="order-actions">
          <button class="order-action-btn">取消订单</button>
          <button class="order-action-btn primary">查看详情</button>
        </div>
      </div>
    </div>

    <div class="order-card">
      <div class="order-card-header">
        <span class="order-shop-name">🚚 顺捷搬家</span>
        <span class="order-status pending">待付款</span>
      </div>
      <div class="order-items">
        <div class="order-item-imgs">
          <img class="order-item-img" src="https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=100&q=60" alt="服务" loading="lazy">
        </div>
        <div class="order-item-info">
          <div class="order-item-name">小型搬家（面包车）</div>
          <div class="order-item-rule">5月22日 09:00</div>
        </div>
        <div class="order-item-price">¥258</div>
      </div>
      <div class="order-card-footer">
        <div class="order-total">共计 <strong>¥258</strong></div>
        <div class="order-actions">
          <button class="order-action-btn primary">立即支付</button>
        </div>
      </div>
    </div>

    <div class="order-card">
      <div class="order-card-header">
        <span class="order-shop-name">💊 叮当快药</span>
        <span class="order-status" style="color:#52C41A;">已完成</span>
      </div>
      <div class="order-items">
        <div class="order-item-imgs">
          <img class="order-item-img" src="https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?w=100&q=60" alt="商品" loading="lazy">
        </div>
        <div class="order-item-info">
          <div class="order-item-name">999感冒灵 × 2</div>
          <div class="order-item-rule">24小时药店 · 已送达</div>
        </div>
        <div class="order-item-price">¥36</div>
      </div>
      <div class="order-card-footer">
        <div class="order-total">共计 <strong>¥36</strong></div>
        <div class="order-actions">
          <button class="order-action-btn">再来一单</button>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- ==================== 个人中心页 ==================== -->
<div id="page-profile" class="page profile-page">
  <div class="profile-header">
    <div class="profile-header-top">
      <div class="profile-header-title">我的</div>
      <div class="profile-header-actions">
        <button class="profile-header-icon">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 22c1.1 0 2-.9 2-2h-4a2 2 0 0 0 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/></svg>
        </button>
        <button class="profile-header-icon">
          <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94L14.4 2.81a.49.49 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
        </button>
      </div>
    </div>
    <div class="profile-user">
      <img class="profile-avatar" src="https://i.pravatar.cc/120?img=12" alt="头像" loading="lazy">
      <div>
        <div class="profile-name">张小明</div>
        <div class="profile-id">ID: 88888888</div>
        <div class="profile-vip">👑 黄金会员</div>
      </div>
    </div>
  </div>

  <div class="profile-card">
    <div class="profile-stats">
      <div class="profile-stat" onclick="showPage('orders')">
        <div class="profile-stat-num">12</div>
        <div class="profile-stat-label">全部订单</div>
      </div>
      <div class="profile-stat" onclick="showPage('orders')">
        <div class="profile-stat-num">2</div>
        <div class="profile-stat-label">进行中</div>
      </div>
      <div class="profile-stat" onclick="showPage('orders')">
        <div class="profile-stat-num">38</div>
        <div class="profile-stat-label">收藏商家</div>
      </div>
      <div class="profile-stat">
        <div class="profile-stat-num">128</div>
        <div class="profile-stat-label">积分</div>
      </div>
    </div>
    <div class="profile-menu">
      <div class="profile-menu-item" onclick="showToast('收货地址管理')">
        <div class="pmi-icon" style="background:#E3F2FD;">
          <svg viewBox="0 0 24 24" fill="#1976D2"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
        </div>
        <div class="pmi-label">收货地址</div>
        <div class="pmi-arrow">›</div>
      </div>
      <div class="profile-menu-item" onclick="showToast('优惠券')">
        <div class="pmi-icon" style="background:#FFF3E0;">
          <svg viewBox="0 0 24 24" fill="#E65100"><path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42zM5.5 7C4.67 7 4 6.33 4 5.5S4.67 4 5.5 4 7 4.67 7 5.5 6.33 7 5.5 7z"/></svg>
        </div>
        <div class="pmi-label">我的优惠券</div>
        <div style="background:var(--primary);color:white;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;">3张可用</div>
        <div class="pmi-arrow">›</div>
      </div>
      <div class="profile-menu-item" onclick="showToast('实名认证')">
        <div class="pmi-icon" style="background:#E8F5E9;">
          <svg viewBox="0 0 24 24" fill="#388E3C"><path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z"/></svg>
        </div>
        <div class="pmi-label">实名认证</div>
        <div style="font-size:12px;color:#52C41A;font-weight:600;">已认证</div>
        <div class="pmi-arrow">›</div>
      </div>
      <div class="profile-menu-item" onclick="showToast('会员中心')">
        <div class="pmi-icon" style="background:#FFF8E1;">
          <svg viewBox="0 0 24 24" fill="#F57F17"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
        </div>
        <div class="pmi-label">会员中心</div>
        <div class="pmi-arrow">›</div>
      </div>
      <div class="profile-menu-item" onclick="showToast('客服中心')">
        <div class="pmi-icon" style="background:#F3E5F5;">
          <svg viewBox="0 0 24 24" fill="#7B1FA2"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>
        </div>
        <div class="pmi-label">客服中心</div>
        <div class="pmi-arrow">›</div>
      </div>
      <div class="profile-menu-item" onclick="showToast('设置')">
        <div class="pmi-icon" style="background:#ECEFF1;">
          <svg viewBox="0 0 24 24" fill="#546E7A"><path d="M19.14 12.94c.04-.31.06-.63.06-.94 0-.31-.02-.63-.06-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.49.49 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94L14.4 2.81a.49.49 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96a.49.49 0 0 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.04.31-.06.63-.06.94s.02.63.06.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
        </div>
        <div class="pmi-label">设置</div>
        <div class="pmi-arrow">›</div>
      </div>
    </div>
  </div>
</div>

<!-- ==================== 支付页 ==================== -->
<div id="page-payment" class="page payment-page">
  <div class="payment-header">
    <button class="back-arrow" onclick="showPage('detail')">
      <svg viewBox="0 0 24 24" fill="currentColor"><path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/></svg>
    </button>
    <div class="payment-title">确认订单</div>
  </div>

  <div class="payment-amount-section">
    <div class="payment-amount-label">实付金额</div>
    <div class="payment-amount">¥<span id="payAmount">88</span></div>
  </div>

  <div style="padding:16px;">
    <div style="display:flex;align-items:center;gap:10px;padding:12px;background:#F5F5F5;border-radius:10px;margin-bottom:16px;">
      <span style="font-size:24px;">📍</span>
      <div>
        <div style="font-size:13px;font-weight:600;">张小明 · 138****8888</div>
        <div style="font-size:12px;color:var(--text-muted);margin-top:2px;">南山区科技园A栋1层</div>
      </div>
      <div style="margin-left:auto;color:var(--text-muted);font-size:12px;">修改 ›</div>
    </div>

    <div style="display:flex;align-items:center;gap:10px;padding:12px;background:#F5F5F5;border-radius:10px;margin-bottom:20px;">
      <span style="font-size:24px;">🕐</span>
      <div>
        <div style="font-size:13px;font-weight:600;">立即送达</div>
        <div style="font-size:12px;color:var(--text-muted);margin-top:2px;">预计 28分钟后到达</div>
      </div>
    </div>
  </div>

  <div class="payment-methods">
    <div class="payment-method-title">支付方式</div>
    <div class="payment-method-item" onclick="selectPayment(this)">
      <div class="pm-icon" style="background:#07C160;">
        <svg viewBox="0 0 24 24" width="22" height="22" fill="white"><path d="M8.5 11a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm7 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM12 2C6.477 2 2 6.026 2 11c0 2.024.844 3.862 2.216 5.228L2.59 18.73A.5.5 0 0 0 3 19h2.5l1.27-1.27A10.45 10.45 0 0 0 12 22c5.523 0 10-4.026 10-9s-4.477-9-10-9z"/></svg>
      </div>
      <div class="pm-label">微信支付</div>
      <div class="pm-check selected"></div>
    </div>
    <div class="payment-method-item" onclick="selectPayment(this)">
      <div class="pm-icon" style="background:#1677FF;">
        <svg viewBox="0 0 24 24" width="22" height="22" fill="white"><path d="M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8zm-1-13h2v6h-2zm0 8h2v2h-2z"/></svg>
      </div>
      <div class="pm-label">支付宝</div>
      <div class="pm-check"></div>
    </div>
    <div class="payment-method-item" onclick="selectPayment(this)">
      <div class="pm-icon" style="background:#FF6034;">
        <svg viewBox="0 0 24 24" width="22" height="22" fill="white"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1 1.05.82 1.87 2.65 1.87 1.96 0 2.4-.98 2.4-1.59 0-.83-.44-1.61-2.67-2.14-2.48-.6-4.18-1.62-4.18-3.67 0-1.72 1.39-2.84 3.11-3.21V4h2.67v1.95c1.86.45 2.79 1.86 2.85 3.39H14.3c-.05-1.11-.64-1.87-2.22-1.87-1.5 0-2.4.68-2.4 1.64 0 .84.65 1.39 2.67 1.91s4.18 1.39 4.18 3.91c-.01 1.83-1.38 2.83-3.12 3.16z"/></svg>
      </div>
      <div class="pm-label">银行卡</div>
      <div class="pm-check"></div>
    </div>
  </div>

  <button class="payment-btn" onclick="payNow()">确认支付 ¥<span id="payBtnAmount">88</span></button>
</div>

<!-- ==================== 底部导航 ==================== -->
<div class="tab-bar" id="tabBar" style="display:none;">
  <div class="tab-item active" onclick="switchTabBar(this, 'home')">
    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
    <span>首页</span>
  </div>
  <div class="tab-item" onclick="switchTabBar(this, 'service')">
    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
    <span>服务</span>
  </div>
  <div class="tab-item" onclick="switchTabBar(this, 'orders')">
    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>
    <span>订单</span>
    <span class="badge">3</span>
  </div>
  <div class="tab-item" onclick="switchTabBar(this, 'profile')">
    <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
    <span>我的</span>
  </div>
</div>

<!-- ==================== 脚本 ==================== -->
<script>
  let cartCount = 0;
  let cartPrice = 0;
  const prices = [58, 28, 38, 35, 45, 32];

  function showPage(page) {
    // 隐藏所有页面
    document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
    document.getElementById('page-' + page).classList.add('active');

    // 显示/隐藏底部导航
    const tabBar = document.getElementById('tabBar');
    if (page === 'login') {
      tabBar.style.display = 'none';
    } else {
      tabBar.style.display = 'flex';
    }
  }

  function switchTabBar(el, page) {
    document.querySelectorAll('.tab-item').forEach(t => t.classList.remove('active'));
    el.classList.add('active');
    showPage(page);
  }

  function switchTab(el, tabId) {
    document.querySelectorAll('.menu-tab').forEach(t => t.classList.remove('active'));
    el.classList.add('active');
    document.querySelectorAll('.tab-content').forEach(t => t.style.display = 'none');
    document.getElementById(tabId).style.display = 'block';
  }

  function addToCart() {
    const idx = Math.floor(Math.random() * prices.length);
    cartCount++;
    cartPrice += prices[idx];

    const badge = document.getElementById('cartBadge');
    badge.style.display = 'block';
    badge.textContent = cartCount;
    document.getElementById('cartPrice').textContent = cartPrice;
    document.getElementById('payAmount').textContent = cartPrice + 2;
    document.getElementById('payBtnAmount').textContent = cartPrice + 2;

    showToast('已添加到购物车 🛒');
  }

  function selectPayment(el) {
    document.querySelectorAll('.pm-check').forEach(c => c.classList.remove('selected'));
    el.querySelector('.pm-check').classList.add('selected');
  }

  function payNow() {
    showToast('支付成功！🎉');
    setTimeout(() => showPage('orders'), 1500);
  }

  function login(type) {
    if (type === 'wechat') {
      showToast('微信授权登录中...');
      setTimeout(() => showPage('home'), 1200);
    } else {
      showPage('home');
    }
  }

  function showToast(msg) {
    const existing = document.querySelector('.toast');
    if (existing) existing.remove();
    const toast = document.createElement('div');
    toast.className = 'toast';
    toast.textContent = msg;
    document.body.appendChild(toast);
    setTimeout(() => toast.remove(), 2200);
  }

  // 搜索功能
  document.addEventListener('DOMContentLoaded', () => {
    const searchInput = document.getElementById('searchInput');
    if (searchInput) {
      searchInput.addEventListener('keydown', (e) => {
        if (e.key === 'Enter' && searchInput.value.trim()) {
          showToast('搜索: ' + searchInput.value);
        }
      });
    }

    // 倒计时
    let totalSec = 2 * 3600 + 34 * 60 + 56;
    setInterval(() => {
      totalSec = (totalSec - 1 + 86400) % 86400;
      const h = Math.floor(totalSec / 3600);
      const m = Math.floor((totalSec % 3600) / 60);
      const s = totalSec % 60;
      const pad = n => String(n).padStart(2, '0');
      const cdH = document.getElementById('cd-h');
      const cdM = document.getElementById('cd-m');
      const cdS = document.getElementById('cd-s');
      if (cdH) cdH.textContent = pad(h);
      if (cdM) cdM.textContent = pad(m);
      if (cdS) cdS.textContent = pad(s);
    }, 1000);
  });

  // 订单Tab切换
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.order-tab').forEach(tab => {
      tab.addEventListener('click', function() {
        document.querySelectorAll('.order-tab').forEach(t => t.classList.remove('active'));
        this.classList.add('active');
      });
    });

    document.querySelectorAll('.service-filter-btn').forEach(btn => {
      btn.addEventListener('click', function() {
        document.querySelectorAll('.service-filter-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
      });
    });
  });
</script>

</body>
</html>