编辑页面

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, viewport-fit=cover">
    <title>鸡公山景区 · 商户平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        :root {
            --primary: #2D8B4E;
            --primary-light: #E8F5E9;
            --white: #FFFFFF;
            --bg-page: #F5F7FA;
            --text-primary: #333333;
            --text-secondary: #666666;
            --text-placeholder: #999999;
            --border-color: #EEEEEE;
            --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
            --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
            --tabbar-height: 56px;
            --safe-bottom: env(safe-area-inset-bottom, 0px);
        }
        
        html, body {
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: var(--text-primary);
            background: var(--bg-page);
            -webkit-font-smoothing: antialiased;
        }
        
        body {
            max-width: 430px;
            margin: 0 auto;
            min-height: 100vh;
            position: relative;
            padding-bottom: calc(var(--tabbar-height) + var(--safe-bottom));
        }
        
        /* 页面容器 */
        .page {
            display: none;
            min-height: 100vh;
        }
        
        .page.active {
            display: block;
        }
        
        /* 首页 */
        .home-page {
            background: var(--white);
        }
        
        /* 顶部大图区域 */
        .hero-section {
            position: relative;
            height: 200px;
            overflow: hidden;
        }
        
        .hero-bg {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);
        }
        
        .hero-content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 16px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
        
        .hero-title {
            font-size: 22px;
            font-weight: 700;
            color: white;
            margin-bottom: 4px;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        
        .hero-subtitle {
            font-size: 13px;
            color: rgba(255,255,255,0.9);
        }
        
        /* 搜索区域 */
        .search-section {
            padding: 16px;
            background: var(--white);
        }
        
        .search-bar {
            display: flex;
            align-items: center;
            background: var(--bg-page);
            border-radius: 24px;
            padding: 10px 16px;
            gap: 10px;
        }
        
        .search-bar svg {
            width: 18px;
            height: 18px;
            fill: var(--text-placeholder);
            flex-shrink: 0;
        }
        
        .search-bar input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 14px;
            background: transparent;
        }
        
        .search-bar input::placeholder {
            color: var(--text-placeholder);
        }
        
        /* 分类入口 */
        .category-section {
            padding: 20px 16px;
            background: var(--white);
        }
        
        .category-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
        }
        
        .category-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }
        
        .category-item:active {
            opacity: 0.7;
        }
        
        .category-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--primary-light);
        }
        
        .category-icon svg {
            width: 24px;
            height: 24px;
            fill: var(--primary);
        }
        
        .category-name {
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        /* 精选推荐 */
        .recommend-section {
            padding: 20px 16px;
            background: var(--bg-page);
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 14px;
        }
        
        .section-title {
            font-size: 17px;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .section-more {
            font-size: 12px;
            color: var(--text-placeholder);
            display: flex;
            align-items: center;
            gap: 2px;
        }
        
        .section-more svg {
            width: 12px;
            height: 12px;
            fill: var(--text-placeholder);
        }
        
        .recommend-card {
            background: var(--white);
            border-radius: 16px;
            overflow: hidden;
            margin-bottom: 12px;
            box-shadow: var(--shadow-sm);
        }
        
        .recommend-card:active {
            transform: scale(0.99);
        }
        
        .recommend-cover {
            width: 100%;
            height: 140px;
            object-fit: cover;
        }
        
        .recommend-info {
            padding: 12px;
        }
        
        .recommend-name {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 6px;
        }
        
        .recommend-meta {
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .recommend-rating {
            display: flex;
            align-items: center;
            gap: 2px;
        }
        
        .recommend-rating svg {
            width: 12px;
            height: 12px;
            fill: #FFB300;
        }
        
        .recommend-distance {
            display: flex;
            align-items: center;
            gap: 2px;
        }
        
        .recommend-distance svg {
            width: 12px;
            height: 12px;
            fill: var(--text-placeholder);
        }
        
        /* 商户列表页 */
        .list-page {
            background: var(--white);
        }
        
        .list-header {
            background: var(--white);
            padding: 16px;
            position: sticky;
            top: 0;
            z-index: 10;
            border-bottom: 1px solid var(--border-color);
        }
        
        .list-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            text-align: center;
        }
        
        .filter-tabs {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-top: 12px;
            -webkit-overflow-scrolling: touch;
        }
        
        .filter-tabs::-webkit-scrollbar {
            display: none;
        }
        
        .filter-tab {
            flex-shrink: 0;
            padding: 6px 14px;
            background: var(--bg-page);
            border-radius: 16px;
            font-size: 13px;
            color: var(--text-secondary);
            white-space: nowrap;
        }
        
        .filter-tab.active {
            background: var(--primary);
            color: white;
        }
        
        .merchant-list {
            padding: 16px;
        }
        
        .merchant-card {
            display: flex;
            background: var(--white);
            border-radius: 12px;
            margin-bottom: 12px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }
        
        .merchant-card:active {
            background: var(--bg-page);
        }
        
        .merchant-cover {
            width: 100px;
            height: 100px;
            object-fit: cover;
            flex-shrink: 0;
        }
        
        .merchant-info {
            flex: 1;
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .merchant-name {
            font-size: 14px;
            font-weight: 500;
            color: var(--text-primary);
        }
        
        .merchant-desc {
            font-size: 12px;
            color: var(--text-placeholder);
            margin-top: 4px;
        }
        
        .merchant-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .merchant-price {
            font-size: 15px;
            color: #FF6B35;
            font-weight: 600;
        }
        
        .merchant-price span {
            font-size: 11px;
        }
        
        .merchant-add {
            width: 28px;
            height: 28px;
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .merchant-add svg {
            width: 16px;
            height: 16px;
            fill: white;
        }
        
        /* 购物车页 */
        .cart-page {
            background: var(--bg-page);
        }
        
        .cart-header {
            background: var(--white);
            padding: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border-color);
        }
        
        .cart-title {
            font-size: 17px;
            font-weight: 600;
            color: var(--text-primary);
        }
        
        .cart-clear {
            font-size: 13px;
            color: var(--text-placeholder);
        }
        
        .cart-content {
            padding: 16px;
        }
        
        .cart-merchant {
            background: var(--white);
            border-radius: 12px;
            margin-bottom: 12px;
            overflow: hidden;
        }
        
        .cart-merchant-header {
            padding: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .cart-merchant-icon {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .cart-merchant-icon img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .cart-merchant-name {
            flex: 1;
            font-size: 14px;
            font-weight: 500;
        }
        
        .cart-item {
            padding: 12px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .cart-item:last-child {
            border-bottom: none;
        }
        
        .cart-item-cover {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            overflow: hidden;
            flex-shrink: 0;
        }
        
        .cart-item-cover img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .cart-item-info {
            flex: 1;
        }
        
        .cart-item-name {
            font-size: 13px;
            color: var(--text-primary);
        }
        
        .cart-item-price {
            font-size: 14px;
            color: #FF6B35;
            font-weight: 600;
            margin-top: 4px;
        }
        
        .cart-item-count {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .count-btn {
            width: 24px;
            height: 24px;
            background: var(--bg-page);
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        .count-num {
            font-size: 14px;
            min-width: 20px;
            text-align: center;
        }
        
        /* 结算栏 */
        .cart-footer {
            position: fixed;
            bottom: calc(var(--tabbar-height) + var(--safe-bottom));
            left: 0;
            right: 0;
            max-width: 430px;
            margin: 0 auto;
            background: var(--white);
            padding: 12px 16px;
            padding-bottom: calc(12px + var(--safe-bottom));
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
        }
        
        .cart-total {
            display: flex;
            align-items: baseline;
            gap: 4px;
        }
        
        .cart-total-label {
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .cart-total-price {
            font-size: 18px;
            color: #FF6B35;
            font-weight: 600;
        }
        
        .cart-settle {
            background: var(--primary);
            color: white;
            padding: 10px 24px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 500;
        }
        
        /* 我的页面 */
        .profile-page {
            background: var(--bg-page);
        }
        
        .profile-header {
            position: relative;
            height: 160px;
            overflow: hidden;
        }
        
        .profile-bg {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .profile-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(45,139,78,0.6) 0%, rgba(45,139,78,0.8) 100%);
        }
        
        .profile-content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            display: flex;
            align-items: center;
            padding: 0 20px;
        }
        
        .profile-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            border: 3px solid rgba(255,255,255,0.5);
            overflow: hidden;
            margin-right: 14px;
        }
        
        .profile-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .profile-user {
            flex: 1;
        }
        
        .profile-name {
            font-size: 18px;
            font-weight: 600;
            color: white;
            margin-bottom: 4px;
        }
        
        .profile-id {
            font-size: 12px;
            color: rgba(255,255,255,0.8);
        }
        
        .profile-cards {
            margin: -30px 16px 16px;
            position: relative;
            z-index: 1;
        }
        
        .order-card {
            background: var(--white);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
            box-shadow: var(--shadow-md);
        }
        
        .order-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 14px;
        }
        
        .order-title {
            font-size: 15px;
            font-weight: 600;
        }
        
        .order-items {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }
        
        .order-item {
            width: 56px;
            height: 56px;
            border-radius: 8px;
            overflow: hidden;
        }
        
        .order-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .order-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 12px;
            border-top: 1px solid var(--border-color);
        }
        
        .order-total {
            font-size: 12px;
            color: var(--text-secondary);
        }
        
        .order-total-price {
            color: #FF6B35;
            font-weight: 600;
        }
        
        .order-status {
            font-size: 12px;
            color: var(--primary);
        }
        
        .menu-section {
            background: var(--white);
            border-radius: 12px;
            margin: 0 16px 16px;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }
        
        .menu-item {
            display: flex;
            align-items: center;
            padding: 14px 16px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .menu-item:last-child {
            border-bottom: none;
        }
        
        .menu-item:active {
            background: var(--bg-page);
        }
        
        .menu-icon {
            width: 32px;
            height: 32px;
            background: var(--primary-light);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 12px;
        }
        
        .menu-icon svg {
            width: 18px;
            height: 18px;
            fill: var(--primary);
        }
        
        .menu-text {
            flex: 1;
            font-size: 14px;
            color: var(--text-primary);
        }
        
        .menu-arrow {
            width: 16px;
            height: 16px;
            fill: var(--text-placeholder);
        }
        
        /* 底部导航栏 */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            max-width: 430px;
            margin: 0 auto;
            height: calc(var(--tabbar-height) + var(--safe-bottom));
            background: var(--white);
            display: flex;
            padding-bottom: var(--safe-bottom);
            box-shadow: 0 -1px 3px rgba(0,0,0,0.04);
            z-index: 100;
        }
        
        .tab-item {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 6px 0;
        }
        
        .tab-item:active {
            background: var(--bg-page);
        }
        
        .tab-icon {
            width: 24px;
            height: 24px;
            margin-bottom: 2px;
        }
        
        .tab-icon svg {
            width: 100%;
            height: 100%;
            fill: var(--text-placeholder);
        }
        
        .tab-item.active .tab-icon svg {
            fill: var(--primary);
        }
        
        .tab-text {
            font-size: 10px;
            color: var(--text-placeholder);
        }
        
        .tab-item.active .tab-text {
            color: var(--primary);
        }
        
        /* 商品详情弹窗 */
        .product-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
            z-index: 200;
            align-items: flex-end;
            justify-content: center;
        }
        
        .product-modal.show {
            display: flex;
        }
        
        .modal-content {
            width: 100%;
            max-width: 430px;
            background: var(--white);
            border-radius: 16px 16px 0 0;
            max-height: 85vh;
            overflow-y: auto;
        }
        
        .modal-header {
            position: relative;
        }
        
        .modal-cover {
            width: 100%;
            height: 220px;
            object-fit: cover;
            border-radius: 16px 16px 0 0;
        }
        
        .modal-close {
            position: absolute;
            right: 16px;
            top: 16px;
            width: 28px;
            height: 28px;
            background: rgba(255,255,255,0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .modal-close svg {
            width: 16px;
            height: 16px;
            fill: var(--text-secondary);
        }
        
        .modal-body {
            padding: 16px;
        }
        
        .modal-name {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .modal-price {
            font-size: 22px;
            color: #FF6B35;
            font-weight: 600;
            margin-bottom: 16px;
        }
        
        .modal-desc {
            font-size: 13px;
            color: var(--text-secondary);
            line-height: 1.6;
        }
        
        .modal-footer {
            padding: 12px 16px;
            padding-bottom: calc(12px + var(--safe-bottom));
            display: flex;
            gap: 12px;
            border-top: 1px solid var(--border-color);
        }
        
        .modal-cart-btn {
            flex: 1;
            padding: 12px;
            background: var(--primary-light);
            color: var(--primary);
            border-radius: 20px;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
        }
        
        .modal-buy-btn {
            flex: 1;
            padding: 12px;
            background: var(--primary);
            color: white;
            border-radius: 20px;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
        }
        
        /* 空购物车 */
        .cart-empty {
            text-align: center;
            padding: 60px 20px;
        }
        
        .cart-empty-icon {
            width: 80px;
            height: 80px;
            background: var(--bg-page);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
        }
        
        .cart-empty-icon svg {
            width: 40px;
            height: 40px;
            fill: var(--text-placeholder);
        }
        
        .cart-empty-text {
            font-size: 14px;
            color: var(--text-placeholder);
            margin-bottom: 16px;
        }
        
        .cart-empty-btn {
            display: inline-block;
            padding: 10px 24px;
            background: var(--primary);
            color: white;
            border-radius: 20px;
            font-size: 14px;
        }
        
        /* Toast */
        #toast {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 14px;
            z-index: 1000;
            display: none;
        }
    </style>
</head>
<body>
    <!-- 首页 -->
    <div class="page home-page active" id="page-home">
        <!-- 顶部大图 -->
        <div class="hero-section">
            <img class="hero-bg" src="imgs/home-hero.jpg" alt="鸡公山">
            <div class="hero-overlay"></div>
            <div class="hero-content">
                <div class="hero-title">鸡公山景区</div>
                <div class="hero-subtitle">中国四大避暑胜地之一</div>
            </div>
        </div>
        
        <!-- 搜索 -->
        <div class="search-section">
            <div class="search-bar">
                <svg viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
                <input type="text" placeholder="搜索景区商户、商品">
            </div>
        </div>
        
        <!-- 分类入口 -->
        <div class="category-section">
            <div class="category-grid">
                <div class="category-item" onclick="showToast('餐饮')">
                    <div class="category-icon">
                        <svg viewBox="0 0 24 24"><path d="M11 9H9V2H7v7H5V2H3v7c0 2.12 1.66 3.84 3.75 3.97V22h2.5v-9.03C11.34 12.84 13 11.12 13 9V2h-2v7zm5-3v8h2.5v8H21V2c-2.76 0-5 2.24-5 4z"/></svg>
                    </div>
                    <span class="category-name">餐饮</span>
                </div>
                <div class="category-item" onclick="showToast('文创')">
                    <div class="category-icon">
                        <svg viewBox="0 0 24 24"><path d="M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9L12 3z"/></svg>
                    </div>
                    <span class="category-name">文创</span>
                </div>
                <div class="category-item" onclick="showToast('特产')">
                    <div class="category-icon">
                        <svg viewBox="0 0 24 24"><path d="M20 6h-2.18c.11-.31.18-.65.18-1a2.996 2.996 0 0 0-5.5-1.65l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2z"/></svg>
                    </div>
                    <span class="category-name">特产</span>
                </div>
                <div class="category-item" onclick="showToast('住宿')">
                    <div class="category-icon">
                        <svg viewBox="0 0 24 24"><path d="M7 13c1.66 0 3-1.34 3-3S8.66 7 7 7s-3 1.34-3 3 1.34 3 3 3zm12-6h-8v7H3V5H1v15h2v-3h18v3h2v-9c0-2.21-1.79-4-4-4z"/></svg>
                    </div>
                    <span class="category-name">住宿</span>
                </div>
                <div class="category-item" onclick="showToast('服务')">
                    <div class="category-icon">
                        <svg viewBox="0 0 24 24"><path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42z"/></svg>
                    </div>
                    <span class="category-name">服务</span>
                </div>
            </div>
        </div>
        
        <!-- 精选推荐 -->
        <div class="recommend-section">
            <div class="section-header">
                <span class="section-title">精选推荐</span>
                <span class="section-more" onclick="switchTab(1)">
                    查看更多
                    <svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
                </span>
            </div>
            
            <div class="recommend-card" onclick="showToast('进入详情')">
                <img class="recommend-cover" src="imgs/jigongshan-rooster-rock-formation-landscape.jpg" alt="信阳味道·农家菜馆">
                <div class="recommend-info">
                    <div class="recommend-name">信阳味道·农家菜馆</div>
                    <div class="recommend-meta">
                        <span class="recommend-rating">
                            <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                            4.8
                        </span>
                        <span class="recommend-distance">
                            <svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
                            约200米
                        </span>
                    </div>
                </div>
            </div>
            
            <div class="recommend-card" onclick="showToast('进入详情')">
                <img class="recommend-cover" src="imgs/jigong-mountain-baoxiaofeng-main-peak.jpg" alt="鸡公山文创店">
                <div class="recommend-info">
                    <div class="recommend-name">鸡公山文创店</div>
                    <div class="recommend-meta">
                        <span class="recommend-rating">
                            <svg viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
                            4.6
                        </span>
                        <span class="recommend-distance">
                            <svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
                            约350米
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 商户列表页 -->
    <div class="page list-page" id="page-list">
        <div class="list-header">
            <div class="list-title">全部商户</div>
            <div class="filter-tabs">
                <div class="filter-tab active">全部</div>
                <div class="filter-tab">餐饮</div>
                <div class="filter-tab">文创</div>
                <div class="filter-tab">特产</div>
                <div class="filter-tab">住宿</div>
                <div class="filter-tab">服务</div>
            </div>
        </div>
        
        <div class="merchant-list">
            <div class="merchant-card" onclick="showProductModal()">
                <img class="merchant-cover" src="imgs/xinyang-cuisine-jigong-mountain-braised-claypot.jpg" alt="信阳毛尖土鸡蛋">
                <div class="merchant-info">
                    <div>
                        <div class="merchant-name">信阳毛尖土鸡蛋</div>
                        <div class="merchant-desc">农家散养 纯天然无添加</div>
                    </div>
                    <div class="merchant-bottom">
                        <div class="merchant-price"><span>¥</span>38</div>
                        <div class="merchant-add">
                            <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="merchant-card" onclick="showProductModal()">
                <img class="merchant-cover" src="imgs/jigong-mountain-scenic-landscape.jpg" alt="鸡公山木质书签">
                <div class="merchant-info">
                    <div>
                        <div class="merchant-name">鸡公山木质书签</div>
                        <div class="merchant-desc">景区限定 精美雕刻</div>
                    </div>
                    <div class="merchant-bottom">
                        <div class="merchant-price"><span>¥</span>28</div>
                        <div class="merchant-add">
                            <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="merchant-card" onclick="showProductModal()">
                <img class="merchant-cover" src="imgs/pan-fried-tofu-xinyang-cuisine-jigongshan.jpg" alt="信阳毛尖茶叶礼盒">
                <div class="merchant-info">
                    <div>
                        <div class="merchant-name">信阳毛尖茶叶礼盒</div>
                        <div class="merchant-desc">2024新茶 特级品质</div>
                    </div>
                    <div class="merchant-bottom">
                        <div class="merchant-price"><span>¥</span>168</div>
                        <div class="merchant-add">
                            <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="merchant-card" onclick="showProductModal()">
                <img class="merchant-cover" src="imgs/xinyang-nanwan-lake-fish-head-soup.jpg" alt="手工糍粑">
                <div class="merchant-info">
                    <div>
                        <div class="merchant-name">手工糍粑</div>
                        <div class="merchant-desc">传统工艺 软糯香甜</div>
                    </div>
                    <div class="merchant-bottom">
                        <div class="merchant-price"><span>¥</span>15</div>
                        <div class="merchant-add">
                            <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 购物车页 -->
    <div class="page cart-page" id="page-cart">
        <div class="cart-header">
            <span class="cart-title">购物车</span>
            <span class="cart-clear" onclick="clearCart()">清空</span>
        </div>
        
        <div class="cart-content" id="cart-content">
            <div class="cart-merchant">
                <div class="cart-merchant-header">
                    <div class="cart-merchant-icon">
                        <img src="imgs/xinyang-cuisine-jigong-mountain-braised-claypot.jpg" alt="">
                    </div>
                    <span class="cart-merchant-name">信阳味道·农家菜馆</span>
                </div>
                <div class="cart-item">
                    <div class="cart-item-cover">
                        <img src="imgs/pan-fried-tofu-xinyang-cuisine-jigongshan.jpg" alt="">
                    </div>
                    <div class="cart-item-info">
                        <div class="cart-item-name">信阳毛尖土鸡蛋</div>
                        <div class="cart-item-price">¥38</div>
                    </div>
                    <div class="cart-item-count">
                        <span class="count-btn" onclick="updateCount(this, -1)">−</span>
                        <span class="count-num">1</span>
                        <span class="count-btn" onclick="updateCount(this, 1)">+</span>
                    </div>
                </div>
                <div class="cart-item">
                    <div class="cart-item-cover">
                        <img src="imgs/xinyang-nanwan-lake-fish-head-soup.jpg" alt="">
                    </div>
                    <div class="cart-item-info">
                        <div class="cart-item-name">手工糍粑</div>
                        <div class="cart-item-price">¥15</div>
                    </div>
                    <div class="cart-item-count">
                        <span class="count-btn" onclick="updateCount(this, -1)">−</span>
                        <span class="count-num">2</span>
                        <span class="count-btn" onclick="updateCount(this, 1)">+</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="cart-footer">
            <div class="cart-total">
                <span class="cart-total-label">合计：</span>
                <span class="cart-total-price">¥68</span>
            </div>
            <div class="cart-settle" onclick="showToast('去支付')">去支付</div>
        </div>
    </div>
    
    <!-- 我的页面 -->
    <div class="page profile-page" id="page-profile">
        <div class="profile-header">
            <img class="profile-bg" src="imgs/jigong-mountain-scenic-rock-peak.jpg" alt="">
            <div class="profile-overlay"></div>
            <div class="profile-content">
                <div class="profile-avatar">
                    <img src="imgs/jigong-mountain-baoxiaofeng-main-peak.jpg" alt="">
                </div>
                <div class="profile-user">
                    <div class="profile-name">游客用户</div>
                    <div class="profile-id">ID: 88888888</div>
                </div>
            </div>
        </div>
        
        <div class="profile-cards">
            <div class="order-card">
                <div class="order-header">
                    <span class="order-title">我的订单</span>
                    <span class="section-more">
                        全部订单
                        <svg viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
                    </span>
                </div>
                <div class="order-items">
                    <div class="order-item">
                        <img src="imgs/xinyang-cuisine-jigong-mountain-braised-claypot.jpg" alt="">
                    </div>
                    <div class="order-item">
                        <img src="imgs/pan-fried-tofu-xinyang-cuisine-jigongshan.jpg" alt="">
                    </div>
                </div>
                <div class="order-footer">
                    <span class="order-total">共2件商品 实付 <span class="order-total-price">¥128</span></span>
                    <span class="order-status">待使用</span>
                </div>
            </div>
        </div>
        
        <div class="menu-section">
            <div class="menu-item" onclick="showToast('收货地址')">
                <div class="menu-icon">
                    <svg viewBox="0 0 24 24"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>
                </div>
                <span class="menu-text">收货地址</span>
                <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
            </div>
            <div class="menu-item" onclick="showToast('优惠券')">
                <div class="menu-icon">
                    <svg viewBox="0 0 24 24"><path d="M21.41 11.58l-9-9C12.05 2.22 11.55 2 11 2H4c-1.1 0-2 .9-2 2v7c0 .55.22 1.05.59 1.42l9 9c.36.36.86.58 1.41.58.55 0 1.05-.22 1.41-.59l7-7c.37-.36.59-.86.59-1.41 0-.55-.23-1.06-.59-1.42z"/></svg>
                </div>
                <span class="menu-text">优惠券</span>
                <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
            </div>
            <div class="menu-item" onclick="showToast('联系客服')">
                <div class="menu-icon">
                    <svg viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"/></svg>
                </div>
                <span class="menu-text">联系客服</span>
                <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
            </div>
            <div class="menu-item" onclick="showToast('关于我们')">
                <div class="menu-icon">
                    <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
                </div>
                <span class="menu-text">关于我们</span>
                <svg class="menu-arrow" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
            </div>
        </div>
    </div>
    
    <!-- 底部导航栏 -->
    <div class="tab-bar">
        <div class="tab-item active" onclick="switchTab(0)">
            <div class="tab-icon">
                <svg viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
            </div>
            <span class="tab-text">首页</span>
        </div>
        <div class="tab-item" onclick="switchTab(1)">
            <div class="tab-icon">
                <svg viewBox="0 0 24 24"><path d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/></svg>
            </div>
            <span class="tab-text">商户</span>
        </div>
        <div class="tab-item" onclick="switchTab(2)">
            <div class="tab-icon">
                <svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
            </div>
            <span class="tab-text">购物车</span>
        </div>
        <div class="tab-item" onclick="switchTab(3)">
            <div class="tab-icon">
                <svg viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
            </div>
            <span class="tab-text">我的</span>
        </div>
    </div>
    
    <!-- 商品详情弹窗 -->
    <div class="product-modal" id="product-modal" onclick="closeModal(event)">
        <div class="modal-content" onclick="event.stopPropagation()">
            <div class="modal-header">
                <img class="modal-cover" src="imgs/pan-fried-tofu-xinyang-cuisine-jigongshan.jpg" alt="">
                <div class="modal-close" onclick="closeProductModal()">
                    <svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
                </div>
            </div>
            <div class="modal-body">
                <div class="modal-name">信阳毛尖土鸡蛋</div>
                <div class="modal-price">¥38</div>
                <div class="modal-desc">精选信阳本地农家散养土鸡所产鸡蛋，纯天然无添加，蛋黄饱满色泽金黄，营养丰富口感细腻，是馈赠亲友的佳品。</div>
            </div>
            <div class="modal-footer">
                <div class="modal-cart-btn" onclick="addToCart()">加入购物车</div>
                <div class="modal-buy-btn" onclick="buyNow()">立即购买</div>
            </div>
        </div>
    </div>
    
    <!-- Toast -->
    <div id="toast"></div>
    
    <script>
        // Tab切换
        function switchTab(index) {
            const pages = document.querySelectorAll('.page');
            const tabs = document.querySelectorAll('.tab-item');
            
            pages.forEach(p => p.classList.remove('active'));
            tabs.forEach(t => t.classList.remove('active'));
            
            pages[index].classList.add('active');
            tabs[index].classList.add('active');
        }
        
        // 分类筛选
        document.querySelectorAll('.filter-tab').forEach(tab => {
            tab.addEventListener('click', function() {
                document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // Toast
        function showToast(msg) {
            const toast = document.getElementById('toast');
            toast.textContent = msg;
            toast.style.display = 'block';
            setTimeout(() => {
                toast.style.display = 'none';
            }, 1500);
        }
        
        // 数量修改
        function updateCount(btn, delta) {
            const numEl = btn.parentElement.querySelector('.count-num');
            let num = parseInt(numEl.textContent) + delta;
            if (num < 0) num = 0;
            numEl.textContent = num;
        }
        
        // 清空购物车
        function clearCart() {
            document.getElementById('cart-content').innerHTML = `
                <div class="cart-empty">
                    <div class="cart-empty-icon">
                        <svg viewBox="0 0 24 24"><path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>
                    </div>
                    <div class="cart-empty-text">购物车是空的</div>
                    <div class="cart-empty-btn" onclick="switchTab(0)">去逛逛</div>
                </div>
            `;
        }
        
        // 商品详情弹窗
        function showProductModal() {
            document.getElementById('product-modal').classList.add('show');
        }
        
        function closeProductModal() {
            document.getElementById('product-modal').classList.remove('show');
        }
        
        function closeModal(e) {
            if (e.target === document.getElementById('product-modal')) {
                closeProductModal();
            }
        }
        
        function addToCart() {
            closeProductModal();
            showToast('已加入购物车');
            switchTab(2);
        }
        
        function buyNow() {
            closeProductModal();
            showToast('正在跳转支付...');
        }
    </script>
</body>
</html>