编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>美食外卖 - 美团点评</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        :root {
            --primary: #FF6633;
            --primary-light: #FF8555;
            --text-dark: #333;
            --text-gray: #666;
            --text-light: #999;
            --bg-gray: #f5f5f5;
            --border: #eee;
            --white: #fff;
            --red: #ff4444;
            --green: #00d272;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: var(--bg-gray);
            max-width: 430px;
            margin: 0 auto;
            min-height: 100vh;
            position: relative;
        }
        
        /* 手机状态栏 */
        .status-bar {
            background: var(--primary);
            color: white;
            padding: 8px 15px;
            font-size: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        /* 顶部搜索栏 */
        .header {
            background: var(--primary);
            padding: 10px 15px 15px;
        }
        
        .location-bar {
            display: flex;
            align-items: center;
            color: white;
            font-size: 14px;
            margin-bottom: 10px;
        }
        
        .location-bar span {
            max-width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .location-bar svg {
            margin-right: 4px;
        }
        
        .search-box {
            display: flex;
            background: white;
            border-radius: 20px;
            padding: 8px 15px;
            align-items: center;
        }
        
        .search-box svg {
            color: var(--text-light);
            margin-right: 8px;
        }
        
        .search-box input {
            border: none;
            outline: none;
            flex: 1;
            font-size: 14px;
        }
        
        .search-box input::placeholder {
            color: var(--text-light);
        }
        
        /* 内容区域 */
        .content {
            padding-bottom: 60px;
        }
        
        /* 轮播图 */
        .banner {
            position: relative;
            height: 140px;
            overflow: hidden;
        }
        
        .banner-slides {
            display: flex;
            transition: transform 0.3s ease;
        }
        
        .banner-slide {
            min-width: 100%;
            height: 140px;
            background: linear-gradient(135deg, #FF6633 0%, #FF8855 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            position: relative;
            overflow: hidden;
        }
        
        .banner-slide::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -20%;
            width: 200px;
            height: 200px;
            background: rgba(255,255,255,0.1);
            border-radius: 50%;
        }
        
        .banner-slide:nth-child(2) {
            background: linear-gradient(135deg, #FF8855 0%, #FFaa77 100%);
        }
        
        .banner-slide:nth-child(3) {
            background: linear-gradient(135deg, #ff9500 0%, #ffb733 100%);
        }
        
        .banner-dots {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 6px;
        }
        
        .banner-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
        }
        
        .banner-dot.active {
            background: white;
            width: 16px;
            border-radius: 3px;
        }
        
        /* 分类导航 */
        .categories {
            background: white;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            padding: 15px 10px;
            gap: 10px;
        }
        
        .category-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            cursor: pointer;
        }
        
        .category-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 6px;
            font-size: 22px;
        }
        
        .category-item span {
            font-size: 12px;
            color: var(--text-dark);
        }
        
        /* 限时特惠 */
        .section {
            background: white;
            margin-top: 10px;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 15px;
            border-bottom: 1px solid var(--border);
        }
        
        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-dark);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .section-title .tag {
            background: var(--red);
            color: white;
            font-size: 10px;
            padding: 2px 6px;
            border-radius: 4px;
        }
        
        .section-more {
            font-size: 12px;
            color: var(--text-gray);
            display: flex;
            align-items: center;
        }
        
        .flash-sales {
            display: flex;
            overflow-x: auto;
            padding: 12px 15px;
            gap: 12px;
            -webkit-overflow-scrolling: touch;
        }
        
        .flash-sale-item {
            min-width: 90px;
            cursor: pointer;
        }
        
        .flash-sale-item .img-box {
            width: 90px;
            height: 90px;
            border-radius: 8px;
            background: var(--bg-gray);
            margin-bottom: 8px;
            overflow: hidden;
        }
        
        .flash-sale-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .flash-sale-item .price {
            color: var(--primary);
            font-size: 14px;
            font-weight: 600;
        }
        
        .flash-sale-item .original {
            color: var(--text-light);
            font-size: 11px;
            text-decoration: line-through;
            margin-left: 4px;
        }
        
        .flash-sale-item .name {
            font-size: 12px;
            color: var(--text-dark);
            margin-top: 4px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        /* 商家列表 */
        .shops {
            padding: 0 15px;
        }
        
        .shop-card {
            display: flex;
            padding: 12px 0;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
        }
        
        .shop-card:last-child {
            border-bottom: none;
        }
        
        .shop-logo {
            width: 85px;
            height: 65px;
            border-radius: 6px;
            background: var(--bg-gray);
            margin-right: 10px;
            flex-shrink: 0;
            overflow: hidden;
        }
        
        .shop-logo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .shop-info {
            flex: 1;
            overflow: hidden;
        }
        
        .shop-name {
            font-size: 15px;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 4px;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .shop-tags {
            display: flex;
            gap: 4px;
        }
        
        .shop-tag {
            font-size: 10px;
            padding: 1px 4px;
            border-radius: 2px;
        }
        
        .shop-tag.hot {
            background: #fff3e0;
            color: #ff6b00;
        }
        
        .shop-tag.new {
            background: #e8f5e9;
            color: #4caf50;
        }
        
        .shop-meta {
            display: flex;
            align-items: center;
            margin-bottom: 4px;
        }
        
        .shop-rating {
            color: var(--primary);
            font-size: 12px;
            font-weight: 600;
        }
        
        .shop-sales {
            color: var(--text-light);
            font-size: 11px;
            margin-left: 8px;
        }
        
        .shop-delivery {
            font-size: 11px;
            color: var(--text-gray);
        }
        
        .delivery-fee {
            color: var(--primary);
        }
        
        .shop-actions {
            display: flex;
            gap: 6px;
            margin-top: 4px;
        }
        
        .action-tag {
            font-size: 10px;
            padding: 2px 6px;
            background: var(--bg-gray);
            color: var(--text-gray);
            border-radius: 3px;
        }
        
        /* 底部导航栏 */
        .tab-bar {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            background: white;
            display: flex;
            justify-content: space-around;
            padding: 8px 0;
            border-top: 1px solid var(--border);
            z-index: 999;
        }
        
        .tab-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-decoration: none;
            color: var(--text-gray);
            font-size: 10px;
            cursor: pointer;
        }
        
        .tab-item svg {
            margin-bottom: 2px;
        }
        
        .tab-item.active {
            color: var(--primary);
        }
        
        /* 搜索页面 */
        .search-page {
            display: none;
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            height: 100vh;
            background: white;
            z-index: 200;
        }
        
        .search-page.active {
            display: block;
        }
        
        .search-header {
            display: flex;
            padding: 10px 15px;
            background: white;
            align-items: center;
            gap: 10px;
        }
        
        .search-input-box {
            flex: 1;
            display: flex;
            background: var(--bg-gray);
            border-radius: 20px;
            padding: 8px 15px;
            align-items: center;
        }
        
        .search-input-box input {
            border: none;
            outline: none;
            flex: 1;
            font-size: 14px;
            background: transparent;
        }
        
        .cancel-btn {
            color: var(--text-gray);
            font-size: 14px;
            cursor: pointer;
        }
        
        .search-history {
            padding: 15px;
        }
        
        .history-title {
            font-size: 14px;
            color: var(--text-gray);
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
        }
        
        .history-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .history-tag {
            padding: 6px 12px;
            background: var(--bg-gray);
            border-radius: 15px;
            font-size: 12px;
            color: var(--text-dark);
            cursor: pointer;
        }
        
        /* 商家详情页 */
        .shop-detail-page {
            display: none;
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            height: 100vh;
            background: white;
            z-index: 200;
            overflow-y: auto;
        }
        
        .shop-detail-page.active {
            display: block;
        }
        
        .detail-header {
            position: sticky;
            top: 0;
            background: white;
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border);
            z-index: 10;
        }
        
        .detail-back {
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        
        .detail-actions {
            display: flex;
            gap: 15px;
        }
        
        .detail-banner {
            height: 180px;
            background: linear-gradient(135deg, #FF6633 0%, #FF8855 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
        }
        
        .detail-info {
            padding: 15px;
        }
        
        .detail-name {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .detail-rating {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .stars {
            color: var(--primary);
            font-size: 14px;
            margin-right: 8px;
        }
        
        .rating-num {
            color: var(--primary);
            font-weight: 600;
        }
        
        .detail-meta {
            display: flex;
            gap: 15px;
            font-size: 12px;
            color: var(--text-gray);
            margin-bottom: 10px;
        }
        
        .detail-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        
        .detail-tag {
            padding: 4px 8px;
            background: #fff3e0;
            color: #ff6b00;
            border-radius: 4px;
            font-size: 11px;
        }
        
        /* 商品列表 */
        .menu-tabs {
            display: flex;
            background: white;
            padding: 0 15px;
            border-bottom: 1px solid var(--border);
            overflow-x: auto;
        }
        
        .menu-tab {
            padding: 12px 15px;
            font-size: 14px;
            color: var(--text-gray);
            white-space: nowrap;
            cursor: pointer;
            border-bottom: 2px solid transparent;
        }
        
        .menu-tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        .product-list {
            padding: 15px;
        }
        
        .product-card {
            display: flex;
            padding: 12px 0;
            border-bottom: 1px solid var(--border);
        }
        
        .product-img {
            width: 80px;
            height: 80px;
            border-radius: 6px;
            background: var(--bg-gray);
            margin-right: 10px;
            flex-shrink: 0;
        }
        
        .product-info {
            flex: 1;
        }
        
        .product-name {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .product-desc {
            font-size: 11px;
            color: var(--text-light);
            margin-bottom: 6px;
        }
        
        .product-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .product-price {
            color: var(--primary);
            font-size: 16px;
            font-weight: 600;
        }
        
        .product-price small {
            font-size: 11px;
        }
        
        .add-cart {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        
        /* 购物车浮层 */
        .cart-bar {
            position: fixed;
            bottom: 60px;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            background: #2c2c2c;
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 90;
        }
        
        .cart-info {
            display: flex;
            align-items: center;
        }
        
        .cart-icon {
            position: relative;
            margin-right: 10px;
        }
        
        .cart-count {
            position: absolute;
            top: -5px;
            right: -5px;
            background: var(--primary);
            color: white;
            font-size: 10px;
            padding: 2px 5px;
            border-radius: 10px;
            min-width: 16px;
            text-align: center;
        }
        
        .cart-total {
            color: white;
        }
        
        .cart-total small {
            color: var(--text-light);
        }
        
        .checkout-btn {
            background: var(--primary);
            color: white;
            padding: 8px 20px;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
        }
        
        /* 订单确认页 */
        .order-page {
            display: none;
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            height: 100vh;
            background: var(--bg-gray);
            z-index: 200;
            overflow-y: auto;
        }
        
        .order-page.active {
            display: block;
        }
        
        .order-header {
            position: sticky;
            top: 0;
            background: white;
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--border);
            z-index: 10;
        }
        
        .order-content {
            padding: 15px;
        }
        
        .address-card {
            background: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
        }
        
        .address-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
        }
        
        .address-detail {
            font-size: 12px;
            color: var(--text-gray);
        }
        
        .order-shop {
            background: white;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 10px;
        }
        
        .order-shop-name {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .order-product {
            display: flex;
            justify-content: space-between;
            font-size: 12px;
            color: var(--text-gray);
            margin-bottom: 6px;
        }
        
        .order-remark {
            background: white;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 10px;
        }
        
        .remark-title {
            font-size: 12px;
            color: var(--text-gray);
            margin-bottom: 6px;
        }
        
        .remark-input {
            font-size: 13px;
            color: var(--text-dark);
        }
        
        .order-summary {
            background: white;
            border-radius: 8px;
            padding: 12px;
        }
        
        .summary-row {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            margin-bottom: 8px;
        }
        
        .summary-row.total {
            font-weight: 600;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid var(--border);
        }
        
.summary-row .price {
            color: var(--primary);
        }
        
        .order-footer {
            position: fixed;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            background: white;
            padding: 12px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid var(--border);
        }
        
        /* 我的页面 */
        .my-page {
            display: none;
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            height: 100vh;
            background: var(--bg-gray);
            z-index: 200;
            overflow-y: auto;
            padding-bottom: 70px;
        }
        
        .my-page.active {
            display: block;
        }
        
        .my-header {
            background: linear-gradient(135deg, #FF6633 0%, #FF8855 100%);
            padding: 30px 15px 50px;
            color: white;
        }
        
        .my-user {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .my-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: white;
            margin-right: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 30px;
        }
        
        .my-info h3 {
            font-size: 18px;
            margin-bottom: 4px;
        }
        
        .my-info p {
            font-size: 12px;
            opacity: 0.8;
        }
        
        .my-stats {
            display: flex;
            gap: 30px;
        }
        
        .stat-item {
            text-align: center;
        }
        
        .stat-num {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 2px;
        }
        
        .stat-label {
            font-size: 11px;
            opacity: 0.8;
        }
        
        .my-menu {
            background: white;
            border-radius: 8px;
            margin: -30px 15px 20px;
            padding: 15px;
        }
        
        .my-menu-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 12px;
        }
        
        .menu-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
        }
        
        .menu-grid-item {
            text-align: center;
            cursor: pointer;
        }
        
        .menu-grid-item svg {
            margin-bottom: 6px;
        }
        
        .menu-grid-item span {
            font-size: 11px;
            color: var(--text-gray);
        }
        
        /* 订单列表页 */
        .orders-page {
            display: none;
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            height: 100vh;
            background: var(--bg-gray);
            z-index: 200;
            overflow-y: auto;
            padding-bottom: 70px;
        }
        
        .orders-page.active {
            display: block;
        }
        
        .order-tabs {
            display: flex;
            background: white;
            padding: 0 15px;
        }
        
        .order-tab {
            padding: 12px 15px;
            font-size: 14px;
            color: var(--text-gray);
            cursor: pointer;
            border-bottom: 2px solid transparent;
        }
        
        .order-tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        .order-list {
            padding: 15px;
        }
        
        .order-card {
            background: white;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 10px;
        }
        
        .order-card-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid var(--border);
        }
        
        .order-shop-title {
            font-size: 13px;
            color: var(--text-gray);
        }
        
        .order-status {
            font-size: 13px;
            color: var(--primary);
        }
        
        .order-products {
            margin-bottom: 10px;
        }
        
        .order-product-item {
            display: flex;
            gap: 8px;
            margin-bottom: 6px;
        }
        
        .order-product-img {
            width: 40px;
            height: 40px;
            border-radius: 4px;
            background: var(--bg-gray);
        }
        
        .order-product-info {
            flex: 1;
        }
        
        .order-product-name {
            font-size: 12px;
            margin-bottom: 2px;
        }
        
        .order-product-price {
            font-size: 11px;
            color: var(--text-light);
        }
        
        .order-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .order-total {
            font-size: 12px;
            color: var(--text-gray);
        }
        
        .order-total strong {
            color: var(--primary);
        }
        
        .order-actions {
            display: flex;
            gap: 8px;
        }
        
        .order-btn {
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 11px;
            cursor: pointer;
        }
        
        .order-btn.gray {
            border: 1px solid var(--border);
            color: var(--text-gray);
        }
        
        .order-btn.primary {
            background: var(--primary);
            color: white;
        }
        
        /* 优惠券页面 */
        .coupon-page {
            display: none;
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            height: 100vh;
            background: var(--bg-gray);
            z-index: 200;
            overflow-y: auto;
            padding-bottom: 70px;
        }
        
        .coupon-page.active {
            display: block;
        }
        
        .coupon-tabs {
            display: flex;
            background: white;
            padding: 0 15px;
        }
        
        .coupon-tab {
            padding: 12px 15px;
            font-size: 14px;
            color: var(--text-gray);
            cursor: pointer;
            border-bottom: 2px solid transparent;
        }
        
        .coupon-tab.active {
            color: var(--primary);
            border-bottom-color: var(--primary);
        }
        
        .coupon-list {
            padding: 15px;
        }
        
        .coupon-card {
            background: linear-gradient(135deg, #ff6b00 0%, #ff8533 100%);
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
            color: white;
            display: flex;
            position: relative;
            overflow: hidden;
        }
        
        .coupon-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 80px;
            width: 20px;
            height: 100%;
            background: repeating-linear-gradient(
                90deg,
                transparent,
                transparent 8px,
                white 8px,
                white 10px
            );
            opacity: 0.3;
        }
        
        .coupon-left {
            min-width: 90px;
            text-align: center;
            border-right: 1px dashed rgba(255,255,255,0.3);
            margin-right: 15px;
            padding-right: 15px;
        }
        
        .coupon-price {
            font-size: 28px;
            font-weight: 700;
        }
        
        .coupon-price small {
            font-size: 12px;
        }
        
        .coupon-limit {
            font-size: 10px;
            opacity: 0.9;
        }
        
        .coupon-right {
            flex: 1;
        }
        
        .coupon-title {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 4px;
        }
        
        .coupon-desc {
            font-size: 11px;
            opacity: 0.9;
            margin-bottom: 8px;
        }
        
        .coupon-time {
            font-size: 10px;
            opacity: 0.7;
        }
        
        .coupon-btn {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            padding: 6px 15px;
            background: white;
            color: #ff6b00;
            border-radius: 15px;
            font-size: 12px;
            cursor: pointer;
        }
        
        /* 页面动画 */
        @keyframes slideIn {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(0);
            }
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .slide-in {
            animation: slideIn 0.3s ease;
        }
        
        /* 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;
        }
        
        .toast.show {
            display: block;
            animation: fadeIn 0.3s ease;
        }
        
        /* 空购物车 */
        .empty-cart {
            text-align: center;
            padding: 40px 20px;
            color: var(--text-light);
        }
        
        .empty-cart svg {
            margin-bottom: 10px;
        }
        
        /* 分类侧边栏 */
        .category-sidebar {
            display: flex;
            height: calc(100vh - 60px);
        }
        
        .sidebar-menu {
            width: 85px;
            background: var(--bg-gray);
            overflow-y: auto;
            flex-shrink: 0;
        }
        
        .sidebar-item {
            padding: 14px 10px;
            font-size: 13px;
            color: var(--text-gray);
            text-align: center;
            cursor: pointer;
            border-left: 3px solid transparent;
        }
        
        .sidebar-item.active {
            background: white;
            color: var(--primary);
            border-left-color: var(--primary);
        }
        
        .sidebar-content {
            flex: 1;
            background: white;
            overflow-y: auto;
            padding: 15px;
        }
        
        .content-title {
            font-size: 14px;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 12px;
        }
        
        .content-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }
        
        .content-item {
            text-align: center;
            cursor: pointer;
        }
        
        .content-item img {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            object-fit: cover;
            margin-bottom: 6px;
        }
        
        .content-item span {
            font-size: 12px;
            color: var(--text-dark);
        }
        
        /* 搜索结果 */
        .search-results {
            padding: 15px;
        }
        
        .search-results-title {
            font-size: 13px;
            color: var(--text-gray);
            margin-bottom: 10px;
        }
        
        /* 模态框背景 */
        .modal-bg {
            position: fixed;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            max-width: 430px;
            height: 100vh;
            background: rgba(0,0,0,0.5);
            z-index: 150;
            display: none;
        }
        
        .modal-bg.show {
            display: block;
        }
    </style>
</head>
<body>
    <!-- Toast提示 -->
    <div class="toast" id="toast"></div>
    
    <!-- 模态框背景 -->
    <div class="modal-bg" id="modalBg"></div>
    
    <!-- 首页 -->
    <div id="homePage">
        <div class="status-bar">
            <span>9:41</span>
            <span>5G</span>
            <svg width="18" height="12" viewBox="0 0 18 12" fill="currentColor">
                <path d="M1 4.5C1 3.67 1.67 3 2.5 3h1c.83 0 1.5.67 1.5 1.5v3c0 .83-.67 1.5-1.5 1.5h-1c-.83 0-1.5-.67-1.5-1.5v-3zm6-2c0-.83-.67-1.5-1.5-1.5h-1C3.67 1 3 1.67 3 2.5v7c0 .83.67 1.5 1.5 1.5h1c.83 0 1.5-.67 1.5-1.5v-7zm6 2c0-.83-.67-1.5-1.5-1.5h-1c-.83 0-1.5.67-1.5 1.5v5c0 .83.67 1.5 1.5 1.5h1c.83 0 1.5-.67 1.5-1.5v-5z"/>
            </svg>
        </div>
        
        <div class="header">
            <div class="location-bar">
                <svg width="16" height="18" viewBox="0 0 16 18" fill="currentColor">
                    <path d="M8 0a6 6 0 015.5 8.5l4.5 5-1.5 1.5-4.5-4.5A6 6 0 118 0zm0 9a3 3 0 100-6 3 3 0 000 6z"/>
                </svg>
                <span>北京市朝阳区</span>
                <svg width="10" height="6" viewBox="0 0 10 6" fill="currentColor">
                    <path d="M0 0l5 6 5-6H0z"/>
                </svg>
            </div>
            <div class="search-box" onclick="openSearch()">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                    <path d="M11.7 10.3c.9-1.2 1.4-2.6 1.4-4.2C13.1 2.7 10.4 0 7 0S.9 2.7.9 6.1c0 3.4 2.7 6.1 6.1 6.1 1.6 0 3-.5 4.2-1.4l3.6 3.6 1.4-1.4-3.5-3.6zM7 10.1c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"/>
                </svg>
                <input type="text" placeholder="搜索商家、商品" readonly>
            </div>
        </div>
        
        <div class="content">
            <!-- 轮播图 -->
            <div class="banner">
                <div class="banner-slides" id="bannerSlides">
                    <div class="banner-slide" style="background:url('https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=860&h=280&fit=crop') center/cover no-repeat;"></div>
                    <div class="banner-slide" style="background:url('https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=860&h=280&fit=crop') center/cover no-repeat;"></div>
                    <div class="banner-slide" style="background:url('https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=860&h=280&fit=crop') center/cover no-repeat;"></div>
                </div>
                <div class="banner-dots">
                    <span class="banner-dot active" onclick="goToSlide(0)"></span>
                    <span class="banner-dot" onclick="goToSlide(1)"></span>
                    <span class="banner-dot" onclick="goToSlide(2)"></span>
                </div>
            </div>
            
            <!-- 分类导航 -->
            <div class="categories">
                <div class="category-item" onclick="openCategoryPage('美食')">
                    <div class="category-icon" style="background:#fff3e0;">
                        <img src="https://images.unsplash.com/photo-1552566626-52f8b828add9?w=80&h=80&fit=crop" alt="美食" style="width:36px;height:36px;border-radius:8px;object-fit:cover;">
                    </div>
                    <span>美食</span>
                </div>
                <div class="category-item" onclick="openCategoryPage('甜点饮品')">
                    <div class="category-icon" style="background:#fce4ec;">
                        <img src="https://images.unsplash.com/photo-1551024601-bec78aea704b?w=80&h=80&fit=crop" alt="甜点" style="width:36px;height:36px;border-radius:8px;object-fit:cover;">
                    </div>
                    <span>甜点饮品</span>
                </div>
                <div class="category-item" onclick="openCategoryPage('水果生鲜')">
                    <div class="category-icon" style="background:#e8f5e9;">
                        <img src="https://images.unsplash.com/photo-1610832958506-aa0ea882204b?w=80&h=80&fit=crop" alt="水果" style="width:36px;height:36px;border-radius:8px;object-fit:cover;">
                    </div>
                    <span>水果生鲜</span>
                </div>
                <div class="category-item" onclick="openCategoryPage('超市便利')">
                    <div class="category-icon" style="background:#e3f2fd;">
                        <img src="https://images.unsplash.com/photo-1604909052868-94e60e22c7f4?w=80&h=80&fit=crop" alt="超市" style="width:36px;height:36px;border-radius:8px;object-fit:cover;">
                    </div>
                    <span>超市便利</span>
                </div>
                <div class="category-item" onclick="openCategoryPage('更多')">
                    <div class="category-icon" style="background:#f3e5f5;">
                        <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?w=80&h=80&fit=crop" alt="更多" style="width:36px;height:36px;border-radius:8px;object-fit:cover;">
                    </div>
                    <span>更多</span>
                </div>
                <div class="category-item" onclick="openCategoryPage('外卖')">
                    <div class="category-icon" style="background:#fff8e1;">
                        <img src="https://images.unsplash.com/photo-1563729784474-d77dbb933a9e?w=80&h=80&fit=crop" alt="外卖" style="width:36px;height:36px;border-radius:8px;object-fit:cover;">
                    </div>
                    <span>外卖</span>
                </div>
                <div class="category-item" onclick="openCategoryPage('团购')">
                    <div class="category-icon" style="background:#ffebee;">
                        <img src="https://images.unsplash.com/photo-1476224203421-9ac39bcb3327?w=80&h=80&fit=crop" alt="团购" style="width:36px;height:36px;border-radius:8px;object-fit:cover;">
                    </div>
                    <span>团购</span>
                </div>
                <div class="category-item" onclick="openCategoryPage('酒店')">
                    <div class="category-icon" style="background:#e0f2f1;">
                        <img src="https://images.unsplash.com/photo-1566073771259-6a8506099945?w=80&h=80&fit=crop" alt="酒店" style="width:36px;height:36px;border-radius:8px;object-fit:cover;">
                    </div>
                    <span>酒店</span>
                </div>
                <div class="category-item" onclick="openCategoryPage('旅游')">
<div class="category-icon" style="background:#f1f8e9;">
                        <img src="https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=80&h=80&fit=crop" alt="旅游" style="width:36px;height:36px;border-radius:8px;object-fit:cover;">
                    </div>
                    <span>旅游</span>
                </div>
                <div class="category-item" onclick="openCategoryPage('全部分类')">
                    <div class="category-icon" style="background:#eceff1;">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="#666"><path d="M6 6h12v2H6V6zm0 5h12v2H6v-2zm0 5h12v2H6v-2z"/></svg>
                    </div>
                    <span>全部分类</span>
                </div>
            </div>
            
            <!-- 限时特惠 -->
            <div class="section">
                <div class="section-header">
                    <div class="section-title">
                        <span class="tag">限时抢</span>
                        爆款限时特惠
                    </div>
                    <div class="section-more" onclick="document.getElementById('flashSalePage').classList.add('active', 'slide-in')">
                        更多
                        <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
                            <path d="M4.5 2L8 6l-3.5 4V2z"/>
                        </svg>
                    </div>
                </div>
                <div class="flash-sales">
                    <div class="flash-sale-item" onclick="openShopDetail('汉堡王')">
                        <div class="img-box">
                            <img src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?w=180&h=180&fit=crop" alt="汉堡">
                        </div>
                        <div class="price">¥19.9</div>
                        <div class="original">¥35</div>
                        <div class="name">汉堡炸鸡套餐</div>
                    </div>
                    <div class="flash-sale-item" onclick="openShopDetail('奶茶店')">
                        <div class="img-box">
                            <img src="https://images.unsplash.com/photo-1525385133512-2f3bdd039054?w=180&h=180&fit=crop" alt="奶茶">
                        </div>
                        <div class="price">¥9.9</div>
                        <div class="original">¥22</div>
                        <div class="name">人气奶茶大杯</div>
                    </div>
                    <div class="flash-sale-item" onclick="openShopDetail('披萨店')">
                        <div class="img-box">
                            <img src="https://images.unsplash.com/photo-1574071318508-1cdbab80d002?w=180&h=180&fit=crop" alt="披萨">
                        </div>
                        <div class="price">¥29.9</div>
                        <div class="original">¥58</div>
                        <div class="name">意式风情披萨</div>
                    </div>
                    <div class="flash-sale-item" onclick="openShopDetail('火锅店')">
                        <div class="img-box">
                            <img src="https://images.unsplash.com/photo-1581349485608-9469926a8e5e?w=180&h=180&fit=crop" alt="火锅">
                        </div>
                        <div class="price">¥89</div>
                        <div class="original">¥168</div>
                        <div class="name">双人火锅套餐</div>
                    </div>
                </div>
            </div>
            
            <!-- 推荐商家 -->
            <div class="section">
                <div class="section-header">
<div class="section-title">推荐商家</div>
                    <div class="section-more" onclick="document.getElementById('nearbyPage').classList.add('active', 'slide-in')">
                        附近商家
                        <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
                            <path d="M4.5 2L8 6l-3.5 4V2z"/>
                        </svg>
                    </div>
                </div>
                <div class="shops">
                    <div class="shop-card" onclick="openShopDetail('湘菜馆')">
                        <div class="shop-logo">
                            <img src="https://images.unsplash.com/photo-1581349485608-9469926a8e5e?w=170&h=130&fit=crop" alt="湘菜">
                        </div>
                        <div class="shop-info">
                            <div class="shop-name">
                                湘菜馆·招牌剁椒鱼头
                                <div class="shop-tags">
                                    <span class="shop-tag hot">品牌</span>
                                </div>
                            </div>
                            <div class="shop-meta">
                                <span class="shop-rating">⭐ 4.8</span>
                                <span class="shop-sales">月售1892单</span>
                            </div>
                            <div class="shop-delivery">
                                <span>到店消费</span> · <span>约28分钟</span>
                            </div>
                            <div class="shop-actions">
                                <span class="action-tag">满25减5</span>
                                <span class="action-tag">满49减10</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="shop-card" onclick="openShopDetail('川味坊')">
                        <div class="shop-logo">
                            <img src="https://images.unsplash.com/photo-1559314809-0d155014e29e?w=170&h=130&fit=crop" alt="川菜">
                        </div>
                        <div class="shop-info">
                            <div class="shop-name">
                                川味坊·正宗川菜
                                <div class="shop-tags">
                                    <span class="shop-tag new">新店</span>
                                    <span class="shop-tag hot">人气</span>
                                </div>
                            </div>
                            <div class="shop-meta">
                                <span class="shop-rating">⭐ 4.6</span>
                                <span class="shop-sales">月售2567单</span>
                            </div>
                            <div class="shop-delivery">
                                <span>到店消费</span> · <span>约35分钟</span>
                            </div>
                            <div class="shop-actions">
                                <span class="action-tag">首单减10</span>
                                <span class="action-tag">满40减8</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="shop-card" onclick="openShopDetail('粤式茶餐厅')">
                        <div class="shop-logo">
                            <img src="https://images.unsplash.com/photo-1563245372-f21724e3856d?w=170&h=130&fit=crop" alt="粤菜">
                        </div>
                        <div class="shop-info">
                            <div class="shop-name">
                                粤式茶餐厅
                                <div class="shop-tags">
                                    <span class="shop-tag hot">品质</span>
                                </div>
                            </div>
                            <div class="shop-meta">
                                <span class="shop-rating">⭐ 4.9</span>
                                <span class="shop-sales">月售986单</span>
                            </div>
                            <div class="shop-delivery">
                                <span>到店消费</span> · <span>约42分钟</span>
                            </div>
                            <div class="shop-actions">
                                <span class="action-tag">会员专享</span>
                                <span class="action-tag">满60减15</span>
                            </div>
                        </div>
                    </div>
                    
                    <div class="shop-card" onclick="openShopDetail('日式料理')">
                        <div class="shop-logo">
                            <img src="https://images.unsplash.com/photo-1579871494447-9811cf80d66c?w=170&h=130&fit=crop" alt="日料">
                        </div>
                        <div class="shop-info">
                            <div class="shop-name">
                                樱木日式料理
                                <div class="shop-tags">
                                    <span class="shop-tag hot">热门</span>
                                </div>
                            </div>
                            <div class="shop-meta">
                                <span class="shop-rating">⭐ 4.7</span>
                                <span class="shop-sales">月售1534单</span>
                            </div>
                            <div class="shop-delivery">
                                <span>到店消费</span> · <span>约30分钟</span>
                            </div>
                            <div class="shop-actions">
                                <span class="action-tag">满30减5</span>
                                <span class="action-tag">满80减20</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 购物车浮层 -->
        <div class="cart-bar" id="cartBar" style="display:none;">
            <div class="cart-info">
                <div class="cart-icon">
                    <svg width="32" height="32" viewBox="0 0 32 32" fill="#FF6633">
                        <path d="M16 2C8.82 2 3 7.82 3 15c0 2.5.7 4.85 2 6.85V27c0 1.1.9 2 2 2h2c0 1.66 1.34 3 3 3h6c1.66 0 3-1.34 3-3h2c1.1 0 2-.9 2-2v-5.15c1.3-2 2-4.35 2-6.85C29 7.82 23.18 2 16 2zm10 23h-2c0 1.1-.9 2-2 2h-6c-1.1 0-2-.9-2-2H3v-2l2-9.5L7.2 12h17.6l2.2 1.5 2 9.5v2H26z"/>
                    </svg>
                    <span class="cart-count" id="cartCount">0</span>
                </div>
                <div class="cart-total">
                    ¥<span id="cartTotal">0</span>
                    <small>（不含配送费）</small>
                </div>
            </div>
            <div class="checkout-btn" onclick="openOrderPage()">去结算</div>
        </div>
    </div>
    
    <!-- 底部导航栏 -->
    <div class="tab-bar">
        <div class="tab-item active" onclick="switchTab('home')">
            <svg width="22" height="22" viewBox="0 0 22 22" fill="currentColor">
                <path d="M11 2L2 9l4 1v8h4v-5h4v5h4v-8l4-1-9-7zm0 8l-3-3 1-1 2 2 2-2 1 1-3 3z"/>
            </svg>
            <span>首页</span>
        </div>
        <div class="tab-item" onclick="switchTab('orders')">
            <svg width="22" height="22" viewBox="0 0 22 22" fill="currentColor">
                <path d="M4 2h14a2 2 0 012 2v2H2V4a2 2 0 012-2zm0 6h14a2 2 0 012 2v2H2V10a2 2 0 012-2zm0 6h14a2 2 0 012 2v2H2v-2a2 2 0 012-2z"/>
            </svg>
            <span>订单</span>
        </div>
        <div class="tab-item" onclick="switchTab('coupon')">
            <svg width="22" height="22" viewBox="0 0 22 22" fill="currentColor">
                <path d="M11 0H4a4 4 0 00-4 4v3h2V4a2 2 0 012-2h7v7h2V1a3 3 0 00-3-3zm0 22H4a4 4 0 01-4-4v-3h2v3a2 2 0 002 2h7v-7h2v9a3 3 0 01-3 3zM0 11H1v10h21V11h1V9H0v2z"/>
            </svg>
            <span>优惠券</span>
        </div>
        <div class="tab-item" onclick="switchTab('my')">
            <svg width="22" height="22" viewBox="0 0 22 22" fill="currentColor">
                <path d="M11 2a5 5 0 015 5v1a5 5 0 01-10 0V7a5 5 0 015-5zm5 11H6v1a7 7 0 0014 0v-1z"/>
            </svg>
            <span>我的</span>
        </div>
    </div>
    
    <!-- 搜索页面 -->
    <div class="search-page" id="searchPage">
        <div class="search-header">
            <div class="detail-back" onclick="closeSearch()" style="margin-right:10px;">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M12 4l-8 8 8 8" stroke="currentColor" stroke-width="2" fill="none"/>
                </svg>
            </div>
            <div class="search-input-box">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                    <path d="M11.7 10.3c.9-1.2 1.4-2.6 1.4-4.2C13.1 2.7 10.4 0 7 0S.9 2.7.9 6.1c0 3.4 2.7 6.1 6.1 6.1 1.6 0 3-.5 4.2-1.4l3.6 3.6 1.4-1.4-3.5-3.6zM7 10.1c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"/>
                </svg>
                <input type="text" placeholder="搜索商家、商品" id="searchInput" autofocus>
            </div>
            <span class="cancel-btn" onclick="doSearch(document.getElementById('searchInput').value)">搜索</span>
        </div>
        <div class="search-history">
            <div class="history-title">
                <span>搜索历史</span>
                <span onclick="clearHistory()">清空</span>
            </div>
            <div class="history-tags" id="historyTags">
                <span class="history-tag" onclick="doSearch('汉堡')">汉堡</span>
                <span class="history-tag" onclick="doSearch('奶茶')">奶茶</span>
                <span class="history-tag" onclick="doSearch('火锅')">火锅</span>
                <span class="history-tag" onclick="doSearch('披萨')">披萨</span>
                <span class="history-tag" onclick="doSearch('川菜')">川菜</span>
                <span class="history-tag" onclick="doSearch('日料')">日料</span>
            </div>
        </div>
        <div style="padding: 0 15px;">
            <div class="section-header" style="border:none;">
                <div class="section-title">热门搜索</div>
            </div>
            <div class="history-tags">
                <span class="history-tag" onclick="doSearch('麻辣烫')">麻辣烫</span>
                <span class="history-tag" onclick="doSearch('炸鸡')">炸鸡</span>
                <span class="history-tag" onclick="doSearch('烧烤')">烧烤</span>
                <span class="history-tag" onclick="doSearch('自助餐')">自助餐</span>
                <span class="history-tag" onclick="doSearch('寿司')">寿司</span>
                <span class="history-tag" onclick="doSearch('咖啡')">咖啡</span>
            </div>
        </div>
        <div class="search-results" id="searchResults" style="display:none;">
            <div class="search-results-title">搜索结果</div>
        </div>
    </div>
    
    <!-- 全部分类页 -->
    <div class="shop-detail-page" id="categoryPage" style="animation:none;">
        <div class="detail-header">
            <div class="detail-back" onclick="closeCategoryPage()">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M12 4l-8 8 8 8" stroke="currentColor" stroke-width="2" fill="none"/>
                </svg>
            </div>
            <div style="font-size:16px;font-weight:600;">全部分类</div>
            <div style="width:20px;"></div>
        </div>
        <div class="category-sidebar">
            <div class="sidebar-menu">
                <div class="sidebar-item active" onclick="selectCategory('all', this)">全部</div>
                <div class="sidebar-item" onclick="selectCategory('food', this)">美食</div>
                <div class="sidebar-item" onclick="selectCategory('dessert', this)">甜点饮品</div>
                <div class="sidebar-item" onclick="selectCategory('fresh', this)">水果生鲜</div>
                <div class="sidebar-item" onclick="selectCategory('market', this)">超市便利</div>
                <div class="sidebar-item" onclick="selectCategory('delivery', this)">外卖</div>
                <div class="sidebar-item" onclick="selectCategory('group', this)">团购</div>
                <div class="sidebar-item" onclick="selectCategory('hotel', this)">酒店</div>
                <div class="sidebar-item" onclick="selectCategory('travel', this)">旅游</div>
                <div class="sidebar-item" onclick="selectCategory('movie', this)">电影</div>
                <div class="sidebar-item" onclick="selectCategory('ktv', this)">KTV</div>
                <div class="sidebar-item" onclick="selectCategory('beauty', this)">美妆</div>
                <div class="sidebar-item" onclick="selectCategory('fitness', this)">运动健身</div>
                <div class="sidebar-item" onclick="selectCategory('child', this)">亲子</div>
                <div class="sidebar-item" onclick="selectCategory('wedding', this)">婚纱摄影</div>
            </div>
            <div class="sidebar-content">
                <div class="content-title">热门推荐</div>
                <div class="content-grid" id="categoryContent">
                    <!-- 动态填充 -->
                </div>
            </div>
        </div>
    </div>
    
    <!-- 限时特惠更多页 -->
    <div class="shop-detail-page" id="flashSalePage" style="animation:none;">
        <div class="detail-header">
            <div class="detail-back" onclick="closeFlashSalePage()">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M12 4l-8 8 8 8" stroke="currentColor" stroke-width="2" fill="none"/>
                </svg>
            </div>
            <div style="font-size:16px;font-weight:600;">爆款限时特惠</div>
            <div style="width:20px;"></div>
        </div>
        <div class="flash-sales" style="flex-wrap:wrap;justify-content:space-between;padding:15px;">
            <div class="flash-sale-item" onclick="openShopDetail('汉堡王')" style="min-width:calc(50% - 6px);margin-bottom:12px;">
                <div class="img-box">
                    <img src="https://images.unsplash.com/photo-1568901346375-23c9450c58cd?w=360&h=360&fit=crop" alt="汉堡">
                </div>
                <div class="price">¥19.9</div>
                <div class="original">¥35</div>
                <div class="name">汉堡炸鸡套餐</div>
            </div>
            <div class="flash-sale-item" onclick="openShopDetail('奶茶店')" style="min-width:calc(50% - 6px);margin-bottom:12px;">
                <div class="img-box">
                    <img src="https://images.unsplash.com/photo-1525385133512-2f3bdd039054?w=360&h=360&fit=crop" alt="奶茶">
                </div>
                <div class="price">¥9.9</div>
                <div class="original">¥22</div>
                <div class="name">人气奶茶大杯</div>
            </div>
            <div class="flash-sale-item" onclick="openShopDetail('披萨店')" style="min-width:calc(50% - 6px);margin-bottom:12px;">
                <div class="img-box">
                    <img src="https://images.unsplash.com/photo-1574071318508-1cdbab80d002?w=360&h=360&fit=crop" alt="披萨">
                </div>
                <div class="price">¥29.9</div>
                <div class="original">¥58</div>
                <div class="name">意式风情披萨</div>
            </div>
            <div class="flash-sale-item" onclick="openShopDetail('火锅店')" style="min-width:calc(50% - 6px);margin-bottom:12px;">
                <div class="img-box">
                    <img src="https://images.unsplash.com/photo-1581349485608-9469926a8e5e?w=360&h=360&fit=crop" alt="火锅">
                </div>
                <div class="price">¥89</div>
                <div class="original">¥168</div>
                <div class="name">双人火锅套餐</div>
            </div>
            <div class="flash-sale-item" onclick="openShopDetail('川菜馆')" style="min-width:calc(50% - 6px);margin-bottom:12px;">
                <div class="img-box">
                    <img src="https://images.unsplash.com/photo-1559314809-0d155014e29e?w=360&h=360&fit=crop" alt="川菜">
                </div>
                <div class="price">¥45</div>
                <div class="original">¥78</div>
                <div class="name">川味水煮鱼</div>
            </div>
            <div class="flash-sale-item" onclick="openShopDetail('粤菜馆')" style="min-width:calc(50% - 6px);margin-bottom:12px;">
                <div class="img-box">
                    <img src="https://images.unsplash.com/photo-1563245372-f21724e3856d?w=360&h=360&fit=crop" alt="粤菜">
                </div>
                <div class="price">¥68</div>
                <div class="original">¥128</div>
                <div class="name">白切鸡套餐</div>
            </div>
        </div>
    </div>
    
    <!-- 附近商家页 -->
    <div class="shop-detail-page" id="nearbyPage" style="animation:none;">
        <div class="detail-header">
            <div class="detail-back" onclick="closeNearbyPage()">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M12 4l-8 8 8 8" stroke="currentColor" stroke-width="2" fill="none"/>
                </svg>
            </div>
            <div style="font-size:16px;font-weight:600;">附近商家</div>
            <div style="width:20px;"></div>
        </div>
        <div class="section" style="margin-top:0;">
            <div class="shops">
                <div class="shop-card" onclick="openShopDetail('湘菜馆')">
                    <div class="shop-logo">
                        <img src="https://images.unsplash.com/photo-1585032226651-7448e53e7d09?w=340&h=260&fit=crop" alt="湘菜">
                    </div>
                    <div class="shop-info">
                        <div class="shop-name">湘菜馆·招牌剁椒鱼头</div>
                        <div class="shop-meta">
                            <span class="shop-rating">⭐ 4.8</span>
                            <span class="shop-sales">月售1892单</span>
                        </div>
                        <div class="shop-delivery">到店消费 · 约28分钟</div>
                    </div>
                </div>
                <div class="shop-card" onclick="openShopDetail('川味坊')">
                    <div class="shop-logo">
                        <img src="https://images.unsplash.com/photo-1559314809-0d155014e29e?w=340&h=260&fit=crop" alt="川菜">
</div>
                    <div class="shop-info">
                        <div class="shop-name">川味坊·正宗川菜</div>
                        <div class="shop-meta">
                            <span class="shop-rating">⭐ 4.6</span>
                            <span class="shop-sales">月售2567单</span>
                        </div>
                        <div class="shop-delivery">到店消费 · 约35分钟</div>
                    </div>
                </div>
                <div class="shop-card" onclick="openShopDetail('粤式茶餐厅')">
                    <div class="shop-logo">
                        <img src="https://images.unsplash.com/photo-1563245372-f21724e3856d?w=340&h=260&fit=crop" alt="粤菜">
                    </div>
                    <div class="shop-info">
                        <div class="shop-name">粤式茶餐厅</div>
                        <div class="shop-meta">
                            <span class="shop-rating">⭐ 4.9</span>
                            <span class="shop-sales">月售986单</span>
                        </div>
                        <div class="shop-delivery">到店消费 · 约42分钟</div>
                    </div>
                </div>
                <div class="shop-card" onclick="openShopDetail('日式料理')">
                    <div class="shop-logo">
                        <img src="https://images.unsplash.com/photo-1579871494447-9811cf80d66c?w=340&h=260&fit=crop" alt="日料">
                    </div>
                    <div class="shop-info">
                        <div class="shop-name">樱木日式料理</div>
                        <div class="shop-meta">
                            <span class="shop-rating">⭐ 4.7</span>
                            <span class="shop-sales">月售1534单</span>
                        </div>
                        <div class="shop-delivery">到店消费 · 约30分钟</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 商家详情页 -->
    <div class="shop-detail-page" id="shopDetailPage">
        <div class="detail-header">
            <div class="detail-back" onclick="closeShopDetail()">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M12 4l-8 8 8 8" stroke="currentColor" stroke-width="2" fill="none"/>
                </svg>
            </div>
            <div class="detail-actions">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 14a6 6 0 110-12 6 6 0 010 12zm0-10a4 4 0 100 8 4 4 0 000-8z"/>
                </svg>
                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M10 2l2.39 4.85L18 7.61l-4.08 3.98L15.08 18 10 15.14 4.92 18l1.1-6.41L2 7.61l5.61-.76L10 2z"/>
                </svg>
            </div>
        </div>
        <div class="detail-banner" id="detailBanner" style="background:url('https://images.unsplash.com/photo-1517248135467-4c7d601e6661?w=860&h=360&fit=crop') center/cover no-repeat;"></div>
        <div class="detail-info">
            <div class="detail-name" id="detailName">加载中...</div>
            <div class="detail-rating">
                <span class="stars" id="detailStars">★★★★★</span>
                <span class="rating-num" id="detailRating">4.8</span>
                <span style="margin-left:10px;color:#666;font-size:12px;">月售<span id="detailSales">1892</span>单</span>
            </div>
            <div class="detail-meta">
                <span>到店消费</span>
                <span>约<span id="detailTime">28</span>分钟</span>
                <span>距离<span id="detailDist">1.2</span>km</span>
            </div>
            <div class="detail-tags">
                <span class="detail-tag">满25减5</span>
                <span class="detail-tag">满49减10</span>
                <span class="detail-tag">支持自取</span>
            </div>
        </div>
        
        <div class="menu-tabs">
            <div class="menu-tab active" onclick="switchMenuTab(this, 'recommend')">推荐</div>
            <div class="menu-tab" onclick="switchMenuTab(this, 'discount')">折扣</div>
            <div class="menu-tab" onclick="switchMenuTab(this, 'staple')">主食</div>
            <div class="menu-tab" onclick="switchMenuTab(this, 'drinks')">饮品</div>
            <div class="menu-tab" onclick="switchMenuTab(this, 'dessert')">甜点</div>
        </div>
        
        <div class="product-list" id="productList">
            <!-- 商品会动态添加 -->
        </div>
    </div>
    
    <!-- 订单确认页 -->
    <div class="order-page" id="orderPage">
        <div class="order-header">
            <div class="detail-back" onclick="closeOrderPage()">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M12 4l-8 8 8 8" stroke="currentColor" stroke-width="2" fill="none"/>
                </svg>
            </div>
            <div style="font-size:16px;font-weight:600;">确认订单</div>
            <div style="width:20px;"></div>
        </div>
        
        <div class="order-content">
            <div class="address-card">
                <div class="address-title">📍 到店地址</div>
                <div style="font-size:15px;font-weight:600;margin-bottom:4px;">湘菜馆·招牌剁椒鱼头</div>
                <div class="address-detail">北京市朝阳区建国路88号SOHO现代城1号楼1501室</div>
            </div>
            
            <div class="order-shop">
                <div class="order-shop-name" id="orderShopName">湘菜馆·招牌剁椒鱼头</div>
                <div class="order-product" id="orderProducts">
                    <!-- 动态填充 -->
                </div>
            </div>
            
            <div class="order-remark">
                <div class="remark-title">订单备注</div>
                <div class="remark-input" onclick="showToast('备注输入功能')">点击添加备注信息（口味、过敏原等）</div>
            </div>
            
            <div class="order-summary">
                <div class="summary-row">
                    <span>商品金额</span>
                    <span>¥<span id="goodsAmount">0</span></span>
                </div>
                <div class="summary-row">
                    <span>红包</span>
                    <span style="color:var(--primary);">-¥<span id="couponDiscount">0</span></span>
                </div>
                <div class="summary-row total">
                    <span>合计</span>
                    <span class="price">¥<span id="totalAmount">0</span></span>
                </div>
            </div>
        </div>
        
        <div class="order-footer">
            <div style="font-size:14px;">实付：<strong style="color:var(--primary);font-size:18px;">¥<span id="payAmount">0</span></strong></div>
            <div class="checkout-btn" onclick="submitOrder()">提交订单</div>
        </div>
    </div>
    
    <!-- 我的页面 -->
    <div class="my-page" id="myPage">
        <div class="my-header">
            <div class="my-user">
                <div class="my-avatar"><img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=120&h=120&fit=crop" alt="头像" style="width:100%;height:100%;border-radius:50%;object-fit:cover;"></div>
                <div class="my-info">
                    <h3>美食用户</h3>
                    <p>点击登录 / 注册</p>
                </div>
            </div>
            <div class="my-stats">
                <div class="stat-item">
                    <div class="stat-num">12</div>
                    <div class="stat-label">全部订单</div>
                </div>
                <div class="stat-item">
                    <div class="stat-num">5</div>
                    <div class="stat-label">收藏商家</div>
                </div>
                <div class="stat-item">
                    <div class="stat-num">3</div>
                    <div class="stat-label">优惠券</div>
                </div>
            </div>
        </div>
        
        <div class="my-menu">
            <div class="my-menu-title">我的订单</div>
            <div class="menu-grid">
                <div class="menu-grid-item" onclick="switchTab('orders');switchOrderTab(0)">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#666">
                        <path d="M4 4h16a2 2 0 012 2v2H2V6a2 2 0 012-2zm0 6h16a2 2 0 012 2v2H2v-2a2 2 0 012-2zm0 6h16a2 2 0 012 2v2H2v-2a2 2 0 012-2z"/>
                    </svg>
                    <span>待支付</span>
                </div>
                <div class="menu-grid-item" onclick="switchTab('orders');switchOrderTab(1)">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#666">
                        <path d="M12 2L2 7l4 1v9h4v-5h4v5h4V8l4-1-10-5zm0 14l-3-3 1-1 2 2 2-2 1 1-3 3z"/>
                    </svg>
                    <span>待收货</span>
                </div>
                <div class="menu-grid-item" onclick="switchTab('orders');switchOrderTab(2)">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#666">
                        <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>
                    <span>已完成</span>
                </div>
                <div class="menu-grid-item" onclick="switchTab('orders')">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#666">
                        <path d="M12 2a5 5 0 015 5v1a5 5 0 01-10 0V7a5 5 0 015-5zm5 11H7v1a7 7 0 0014 0v-1z"/>
                    </svg>
                    <span>退款/售后</span>
                </div>
            </div>
        </div>
        
        <div class="my-menu">
            <div class="my-menu-title">我的资产</div>
            <div class="menu-grid">
                <div class="menu-grid-item" onclick="showToast('优惠券')">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#FF6633">
                        <path d="M12 0H6a4 4 0 00-4 4v3h2V4a2 2 0 012-2h6v7h2V1a3 3 0 00-3-3zm0 24H6a4 4 0 01-4-4v-3h2v3a2 2 0 002 2h6v-7h2v9a3 3 0 01-3 3zM0 12H1v10h23V12h1V10H0v2z"/>
                    </svg>
                    <span>优惠券</span>
                </div>
                <div class="menu-grid-item" onclick="showToast('红包')">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#FF6633">
                        <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>
                    <span>红包</span>
                </div>
                <div class="menu-grid-item" onclick="showToast('积分')">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#666">
                        <path d="M12 2L2 7l4 1v9h4v-5h4v5h4V8l4-1-10-5zm0 14l-3-3 1-1 2 2 2-2 1 1-3 3z"/>
                    </svg>
                    <span>积分</span>
                </div>
                <div class="menu-grid-item" onclick="showToast('余额')">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#666">
                        <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.12 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.58 0 .81.65 1.5 2.34 1.93 2.72.7 4.53 1.89 4.53 4.01 0 1.83-1.38 2.83-3.12 3.16z"/>
                    </svg>
                    <span>余额</span>
                </div>
            </div>
        </div>
        
        <div class="my-menu">
            <div class="my-menu-title">更多服务</div>
            <div class="menu-grid">
                <div class="menu-grid-item" onclick="showToast('收藏')">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#666">
                        <path d="M12 2l2.4 7.4H22l-6 4.6 2.3 7-6.3-4.6L5.7 21l2.3-7-6-4.6h7.6L12 2z"/>
                    </svg>
                    <span>收藏</span>
                </div>
                <div class="menu-grid-item" onclick="showToast('浏览历史')">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#666">
                        <path d="M13 3a9 9 0 00-9 9H1l4 4 4-4H6a7 7 0 111.4 3.9L9 14v6l3-3 3 3v-6l1.6-1.6A9 9 0 1013 3z"/>
                    </svg>
                    <span>浏览历史</span>
                </div>
                <div class="menu-grid-item" onclick="showToast('地址管理')">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#666">
                        <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>
                    <span>地址管理</span>
                </div>
                <div class="menu-grid-item" onclick="showToast('客服帮助')">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="#666">
                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
                    </svg>
                    <span>客服帮助</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 订单列表页 -->
    <div class="orders-page" id="ordersPage">
        <div class="order-header">
            <div class="detail-back" onclick="switchTab('home')">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M12 4l-8 8 8 8" stroke="currentColor" stroke-width="2" fill="none"/>
                </svg>
            </div>
            <div style="font-size:16px;font-weight:600;">我的订单</div>
            <div style="width:20px;"></div>
        </div>
        
        <div class="order-tabs">
            <div class="order-tab active" onclick="switchOrderTab(0)">全部</div>
            <div class="order-tab" onclick="switchOrderTab(1)">待支付</div>
            <div class="order-tab" onclick="switchOrderTab(2)">进行中</div>
            <div class="order-tab" onclick="switchOrderTab(3)">已完成</div>
        </div>
        
        <div class="order-list" id="orderList">
            <div class="order-card">
                <div class="order-card-header">
                    <div class="order-shop-title">川味坊·正宗川菜</div>
                    <div class="order-status">进行中</div>
                </div>
                <div class="order-products">
                    <div class="order-product-item">
                        <div class="order-product-img"></div>
                        <div class="order-product-info">
                            <div class="order-product-name">水煮鱼套餐</div>
                            <div class="order-product-price">x1</div>
                        </div>
                    </div>
                </div>
                <div class="order-card-footer">
                    <div class="order-total">共计 <strong>¥68.00</strong></div>
                    <div class="order-actions">
                        <span class="order-btn gray" onclick="showToast('催单')">催单</span>
                        <span class="order-btn primary" onclick="showToast('查看详情')">详情</span>
                    </div>
                </div>
            </div>
            
            <div class="order-card">
                <div class="order-card-header">
                    <div class="order-shop-title">湘菜馆·招牌剁椒鱼头</div>
                    <div class="order-status" style="color:#666;">已完成</div>
                </div>
                <div class="order-products">
                    <div class="order-product-item">
                        <div class="order-product-img"></div>
                        <div class="order-product-info">
                            <div class="order-product-name">剁椒鱼头</div>
                            <div class="order-product-price">x1</div>
                        </div>
                    </div>
                </div>
                <div class="order-card-footer">
                    <div class="order-total">共计 <strong>¥98.00</strong></div>
                    <div class="order-actions">
                        <span class="order-btn gray" onclick="showToast('查看详情')">详情</span>
                        <span class="order-btn primary" onclick="showToast('再来一单')">再来一单</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 优惠券页面 -->
    <div class="coupon-page" id="couponPage">
        <div class="order-header">
            <div class="detail-back" onclick="switchTab('home')">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
                    <path d="M12 4l-8 8 8 8" stroke="currentColor" stroke-width="2" fill="none"/>
                </svg>
            </div>
            <div style="font-size:16px;font-weight:600;">优惠券</div>
            <div style="width:20px;"></div>
        </div>
        
        <div class="coupon-tabs">
            <div class="coupon-tab active" onclick="switchCouponTab(this)">可使用</div>
            <div class="coupon-tab" onclick="switchCouponTab(this)">已使用</div>
            <div class="coupon-tab" onclick="switchCouponTab(this)">已过期</div>
        </div>
        
        <div class="coupon-list">
            <div class="coupon-card">
                <div class="coupon-left">
                    <div class="coupon-price"><small>¥</small>10</div>
                    <div class="coupon-limit">满49可用</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-title">新人专享券</div>
                    <div class="coupon-desc">仅限新用户首次下单使用</div>
                    <div class="coupon-time">有效期至 2026-06-30</div>
                </div>
                <div class="coupon-btn" onclick="receiveCoupon('新人专享券')">立即领取</div>
            </div>
            
            <div class="coupon-card">
                <div class="coupon-left">
                    <div class="coupon-price"><small>¥</small>5</div>
                    <div class="coupon-limit">满25可用</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-title">满减优惠券</div>
                    <div class="coupon-desc">全场通用，可与红包同用</div>
                    <div class="coupon-time">有效期至 2026-05-31</div>
                </div>
                <div class="coupon-btn" onclick="switchTab('home');showToast('去使用优惠券')">立即使用</div>
            </div>
            
            <div class="coupon-card" style="background:#ccc;">
                <div class="coupon-left">
                    <div class="coupon-price"><small>¥</small>20</div>
                    <div class="coupon-limit">满100可用</div>
                </div>
                <div class="coupon-right">
                    <div class="coupon-title">限时特惠券</div>
                    <div class="coupon-desc">周末专享福利</div>
                    <div class="coupon-time">已使用</div>
                </div>
                <div class="coupon-btn" style="background:#999;color:#fff;">已使用</div>
            </div>
        </div>
    </div>

    <script>
        // 全局状态
        let cart = [];
        let currentShop = null;
        let currentSlide = 0;
        
        // 商品数据
        const products = {
            recommend: [
                { name: '招牌剁椒鱼头', desc: '精选新鲜鳙鱼头，秘制剁椒', price: 98, img: 'https://images.unsplash.com/photo-1581349485608-9469926a8e5e?w=160&h=160&fit=crop' },
                { name: '农家小炒肉', desc: '土猪肉炒制，香辣下饭', price: 38, img: 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?w=160&h=160&fit=crop' },
                { name: '酸辣土豆丝', desc: '家常美味，爽口开胃', price: 22, img: 'https://images.unsplash.com/photo-1598030343246-eec71cb844f2?w=160&h=160&fit=crop' },
                { name: '剁椒蒸蛋', desc: '嫩滑蒸蛋配剁椒提味', price: 28, img: 'https://images.unsplash.com/photo-1482049016gy-84aa025f8ed1?w=160&h=160&fit=crop' },
            ],
            discount: [
                { name: '单人套餐', desc: '主食+小菜+饮品', price: 45, img: 'https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=160&h=160&fit=crop' },
                { name: '双人套餐', desc: '2-3人份量', price: 88, img: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=160&h=160&fit=crop' },
            ],
            staple: [
                { name: '米饭', desc: '东北大米', price: 3, img: 'https://images.unsplash.com/photo-1536304993881-ff6e9eefa2a6?w=160&h=160&fit=crop' },
                { name: '馒头', desc: '手工馒头', price: 2, img: 'https://images.unsplash.com/photo-1585032226651-7448e53e7d09?w=160&h=160&fit=crop' },
            ],
            drinks: [
                { name: '酸梅汤', desc: '消暑解渴', price: 8, img: 'https://images.unsplash.com/photo-1525385133512-2f3bdd039054?w=160&h=160&fit=crop' },
                { name: '凉茶', desc: '清热降火', price: 6, img: 'https://images.unsplash.com/photo-1563729784474-d77dbb933a9e?w=160&h=160&fit=crop' },
            ],
            dessert: [
                { name: '红糖糍粑', desc: '香甜软糯', price: 15, img: 'https://images.unsplash.com/photo-1551024601-bec78aea704b?w=160&h=160&fit=crop' },
            ]
        };
        
        // 轮播图切换
        function goToSlide(index) {
            currentSlide = index;
            const slides = document.getElementById('bannerSlides');
            slides.style.transform = `translateX(-${index * 100}%)`;
            
            document.querySelectorAll('.banner-dot').forEach((dot, i) => {
                dot.classList.toggle('active', i === index);
            });
        }
        
        // 自动轮播
        setInterval(() => {
            goToSlide((currentSlide + 1) % 3);
        }, 4000);
        
        // Toast提示
        function showToast(msg) {
            const toast = document.getElementById('toast');
            toast.textContent = msg;
            toast.classList.add('show');
            setTimeout(() => toast.classList.remove('show'), 1500);
        }
        
        // 打开搜索页
        function openSearch() {
            document.getElementById('searchPage').classList.add('active');
            setTimeout(() => document.getElementById('searchInput').focus(), 100);
        }
        
        // 关闭搜索页
        function closeSearch() {
            document.getElementById('searchPage').classList.remove('active');
        }
        
        // 执行搜索
        // 分类数据
        const categoryData = {
            all: [
                { name: '川菜', icon: 'https://images.unsplash.com/photo-1559314809-0d155014e29e?w=80&h=80&fit=crop' },
                { name: '湘菜', icon: 'https://images.unsplash.com/photo-1581349485608-9469926a8e5e?w=80&h=80&fit=crop' },
                { name: '粤菜', icon: 'https://images.unsplash.com/photo-1563245372-f21724e3856d?w=80&h=80&fit=crop' },
                { name: '火锅', icon: 'https://images.unsplash.com/photo-1581349485608-9469926a8e5e?w=80&h=80&fit=crop' },
                { name: '烧烤', icon: 'https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=80&h=80&fit=crop' },
                { name: '日料', icon: 'https://images.unsplash.com/photo-1579871494447-9811cf80d66c?w=80&h=80&fit=crop' },
                { name: '韩餐', icon: 'https://images.unsplash.com/photo-1498654896293-37aacf113fd9?w=80&h=80&fit=crop' },
                { name: '西餐', icon: 'https://images.unsplash.com/photo-1550966871-3ed3cdb5ed0c?w=80&h=80&fit=crop' },
            ],
            food: [
                { name: '川菜', icon: 'https://images.unsplash.com/photo-1559314809-0d155014e29e?w=80&h=80&fit=crop' },
                { name: '湘菜', icon: 'https://images.unsplash.com/photo-1581349485608-9469926a8e5e?w=80&h=80&fit=crop' },
                { name: '粤菜', icon: 'https://images.unsplash.com/photo-1563245372-f21724e3856d?w=80&h=80&fit=crop' },
                { name: '鲁菜', icon: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=80&h=80&fit=crop' },
                { name: '苏菜', icon: 'https://images.unsplash.com/photo-1512058564366-18510be2db19?w=80&h=80&fit=crop' },
            ],
            dessert: [
                { name: '奶茶', icon: 'https://images.unsplash.com/photo-1525385133512-2f3bdd039054?w=80&h=80&fit=crop' },
                { name: '咖啡', icon: 'https://images.unsplash.com/photo-1461023058943-07fcbe16d735?w=80&h=80&fit=crop' },
                { name: '蛋糕', icon: 'https://images.unsplash.com/photo-1551024601-bec78aea704b?w=80&h=80&fit=crop' },
                { name: '冰淇淋', icon: 'https://images.unsplash.com/photo-1497034825429-c343d7c6a68f?w=80&h=80&fit=crop' },
            ],
            fresh: [
                { name: '水果', icon: 'https://images.unsplash.com/photo-1610832958506-a0ea882204b?w=80&h=80&fit=crop' },
                { name: '蔬菜', icon: 'https://images.unsplash.com/photo-1540420773420-3366772f4999?w=80&h=80&fit=crop' },
                { name: '肉类', icon: 'https://images.unsplash.com/photo-1607623814075-e51df1bdc82f?w=80&h=80&fit=crop' },
            ],
            market: [
                { name: '便利店', icon: 'https://images.unsplash.com/photo-1604909052868-94e60e22c7f4?w=80&h=80&fit=crop' },
                { name: '超市', icon: 'https://images.unsplash.com/photo-1534723452862-4c874018d66d?w=80&h=80&fit=crop' },
            ],
            delivery: [
                { name: '快餐', icon: 'https://images.unsplash.com/photo-1568901346375-23c9450c58cd?w=80&h=80&fit=crop' },
                { name: '便当', icon: 'https://images.unsplash.com/photo-1563729784474-d77dbb933a9e?w=80&h=80&fit=crop' },
            ],
            group: [
                { name: '代金券', icon: 'https://images.unsplash.com/photo-1476224203421-9ac39bcb3327?w=80&h=80&fit=crop' },
                { name: '套餐', icon: 'https://images.unsplash.com/photo-1467003909585-2f8a72700288?w=80&h=80&fit=crop' },
            ],
            hotel: [
                { name: '经济型', icon: 'https://images.unsplash.com/photo-1566073771259-6a8506099945?w=80&h=80&fit=crop' },
                { name: '豪华型', icon: 'https://images.unsplash.com/photo-1582719508461-905c673771fd?w=80&h=80&fit=crop' },
            ],
            travel: [
                { name: '景点', icon: 'https://images.unsplash.com/photo-1488646953014-85cb44e25828?w=80&h=80&fit=crop' },
                { name: '门票', icon: 'https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=80&h=80&fit=crop' },
            ],
            movie: [{ name: '电影', icon: 'https://images.unsplash.com/photo-1536440136628-849c177e76a1?w=80&h=80&fit=crop' }],
            ktv: [{ name: 'KTV', icon: 'https://images.unsplash.com/photo-1516450360452-9312f5e86fc7?w=80&h=80&fit=crop' }],
            beauty: [{ name: '美妆', icon: 'https://images.unsplash.com/photo-1596462502278-27bfdc403348?w=80&h=80&fit=crop' }],
            fitness: [{ name: '健身', icon: 'https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=80&h=80&fit=crop' }],
            child: [{ name: '亲子', icon: 'https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?w=80&h=80&fit=crop' }],
            wedding: [{ name: '婚纱', icon: 'https://images.unsplash.com/photo-1519741497674-611481863552?w=80&h=80&fit=crop' }],
        };
        
        // 搜索结果数据
        const searchResults = [
            { name: '湘菜馆·招牌剁椒鱼头', rating: '4.8', sales: '1892', tag: '品牌', img: 'https://images.unsplash.com/photo-1581349485608-9469926a8e5e?w=170&h=130&fit=crop' },
            { name: '川味坊·正宗川菜', rating: '4.6', sales: '2567', tag: '新店', img: 'https://images.unsplash.com/photo-1559314809-0d155014e29e?w=170&h=130&fit=crop' },
            { name: '粤式茶餐厅', rating: '4.9', sales: '986', tag: '品质', img: 'https://images.unsplash.com/photo-1563245372-f21724e3856d?w=170&h=130&fit=crop' },
            { name: '樱木日式料理', rating: '4.7', sales: '1534', tag: '热门', img: 'https://images.unsplash.com/photo-1579871494447-9811cf80d66c?w=170&h=130&fit=crop' },
            { name: '汉堡王·汉堡炸鸡', rating: '4.5', sales: '3562', tag: '', img: 'https://images.unsplash.com/photo-1568901346375-23c9450c58cd?w=170&h=130&fit=crop' },
            { name: '必胜客·披萨意面', rating: '4.6', sales: '2890', tag: '', img: 'https://images.unsplash.com/photo-1574071318508-1cdbab80d002?w=170&h=130&fit=crop' },
        ];
        
        // 执行搜索 - 显示搜索结果
        function doSearch(keyword) {
            if (!keyword || keyword.trim() === '') {
                showToast('请输入搜索关键词');
                return;
            }
            // 添加到搜索历史
            const historyTags = document.getElementById('historyTags');
            const tags = historyTags.querySelectorAll('.history-tag');
            let exists = false;
            tags.forEach(t => { if(t.textContent === keyword) exists = true; });
            if(!exists && keyword.trim()) {
                historyTags.innerHTML = `<span class="history-tag" onclick="doSearch('${keyword}')">${keyword}</span>` + historyTags.innerHTML;
            }
            // 显示搜索结果
            showSearchResults(keyword);
        }
        
        // 显示搜索结果
        function showSearchResults(keyword) {
            const resultList = document.getElementById('searchResults');
            const results = searchResults.filter(r => r.name.toLowerCase().includes(keyword.toLowerCase()));
            if(results.length === 0) {
                resultList.innerHTML = '<div style="text-align:center;padding:40px;color:#999;">未找到相关商家，请尝试其他关键词</div>';
            } else {
                resultList.innerHTML = results.map(r => `
                    <div class="shop-card" onclick="openShopDetail('${r.name}')">
                        <div class="shop-logo">
                            <img src="${r.img}" alt="${r.name}">
                        </div>
                        <div class="shop-info">
                            <div class="shop-name">${r.name}</div>
                            <div class="shop-meta">
                                <span class="shop-rating">⭐ ${r.rating}</span>
                                <span class="shop-sales">月售${r.sales}单</span>
                            </div>
                            <div class="shop-delivery">到店消费</div>
                        </div>
                    </div>
                `).join('');
            }
        }
        
        // 清空搜索历史
        function clearHistory() {
            document.getElementById('historyTags').innerHTML = '';
            showToast('历史已清空');
        }
        
        // 打开分类详情页 - 打开全部分类页面
        function openCategoryPage(categoryName) {
            if (categoryName === '全部分类') {
                document.getElementById('categoryPage').classList.add('active');
                renderCategoryContent('all');
            } else {
                document.getElementById('categoryPage').classList.add('active');
                renderCategoryContent(categoryName);
            }
        }
        
        // 选择侧边栏分类
        function selectCategory(cat, el) {
            document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active'));
            el.classList.add('active');
            renderCategoryContent(cat);
        }
        
        // 渲染分类内容
        function renderCategoryContent(cat) {
            const data = categoryData[cat] || categoryData.all;
            document.getElementById('categoryContent').innerHTML = data.map(c => `
                <div class="content-item" onclick="openShopDetail('${c.name}餐厅')">
                    <img src="${c.icon}" alt="${c.name}">
                    <span>${c.name}</span>
                </div>
            `).join('');
        }
        
        // 关闭分类详情页
        function closeCategoryPage() {
            document.getElementById('categoryPage').classList.remove('active');
        }
        
        // 关闭限时特惠页
        function closeFlashSalePage() {
            document.getElementById('flashSalePage').classList.remove('active', 'slide-in');
        }
        
        // 关闭附近商家页
        function closeNearbyPage() {
            document.getElementById('nearbyPage').classList.remove('active', 'slide-in');
        }
        
        // 打开商家详情
        function openShopDetail(shopName) {
            currentShop = shopName;
            document.getElementById('detailName').textContent = shopName + '·' + (shopName.includes('湘') ? '招牌剁椒鱼头' : shopName.includes('川') ? '正宗川菜' : '品质餐厅');
            
            // 随机数据
            const ratings = [4.5, 4.6, 4.7, 4.8, 4.9];
            const sales = [986, 1534, 1892, 2567, 3200];
            document.getElementById('detailRating').textContent = ratings[Math.floor(Math.random() * ratings.length)];
            document.getElementById('detailSales').textContent = sales[Math.floor(Math.random() * sales.length)];
            document.getElementById('detailFee').textContent = Math.floor(Math.random() * 10) + 10;
            document.getElementById('detailTime').textContent = 25 + Math.floor(Math.random() * 20);
            document.getElementById('detailDist').textContent = (Math.random() * 3).toFixed(1);
            
            // 生成商品列表
            renderProducts('recommend');
            
            document.getElementById('shopDetailPage').classList.add('active', 'slide-in');
        }
        
        // 渲染商品列表
        function renderProducts(category) {
            const list = document.getElementById('productList');
            const prods = products[category] || [];
            
            list.innerHTML = prods.map(p => `
                <div class="product-card">
                    <div class="product-img">
                        <img src="${p.img}" alt="${p.name}" style="width:100%;height:100%;object-fit:cover;">
                    </div>
                    <div class="product-info">
                        <div class="product-name">${p.name}</div>
                        <div class="product-desc">${p.desc}</div>
                        <div class="product-bottom">
                            <div class="product-price">¥<small>${p.price}</small></div>
                            <div class="add-cart" onclick="addToCart('${p.name}', ${p.price}, '${p.img}')">+</div>
                        </div>
                    </div>
                </div>
            `).join('');
        }
        
        // 切换菜单tab
        function switchMenuTab(el, category) {
            document.querySelectorAll('.menu-tab').forEach(t => t.classList.remove('active'));
            el.classList.add('active');
            renderProducts(category);
        }
        
        // 关闭商家详情
        function closeShopDetail() {
            document.getElementById('shopDetailPage').classList.remove('active', 'slide-in');
        }
        
        // 添加购物车
        function addToCart(name, price, emoji) {
            const exist = cart.find(item => item.name === name);
            if (exist) {
                exist.qty++;
            } else {
                cart.push({ name, price, emoji, qty: 1 });
            }
            updateCart();
            showToast('已添加到购物车');
        }
        
        // 更新购物车
        function updateCart() {
            const total = cart.reduce((sum, item) => sum + item.price * item.qty, 0);
            const count = cart.reduce((sum, item) => sum + item.qty, 0);
            
            document.getElementById('cartBar').style.display = cart.length > 0 ? 'flex' : 'none';
            document.getElementById('cartCount').textContent = count;
            document.getElementById('cartTotal').textContent = total.toFixed(1);
        }
        
        // 打开订单页
        function openOrderPage() {
            if (cart.length === 0) {
                showToast('请先添加商品');
                return;
            }
            
            // 填充订单信息
            document.getElementById('orderShopName').textContent = currentShop || '美食店铺';
            
            const orderProds = document.getElementById('orderProducts');
            orderProds.innerHTML = cart.map(item => `
                <div class="order-product-item">
                    <div class="order-product-img" style="display:flex;align-items:center;justify-content:center;font-size:20px;">
                        ${item.emoji}
                    </div>
                    <div class="order-product-info">
                        <div class="order-product-name">${item.name}</div>
                        <div class="order-product-price">x${item.qty}</div>
                    </div>
                </div>
            `).join('');
            
            // 计算金额
            const goodsAmount = cart.reduce((sum, item) => sum + item.price * item.qty, 0);
            const couponDiscount = goodsAmount >= 50 ? 5 : 0;
            const total = goodsAmount - couponDiscount;
            
            document.getElementById('goodsAmount').textContent = goodsAmount;
            document.getElementById('couponDiscount').textContent = couponDiscount;
            document.getElementById('totalAmount').textContent = total;
            document.getElementById('payAmount').textContent = total;
            
            document.getElementById('orderPage').classList.add('active', 'slide-in');
        }
        
        // 关闭订单页
        function closeOrderPage() {
            document.getElementById('orderPage').classList.remove('active', 'slide-in');
        }
        
        // 提交订单
        function submitOrder() {
            showToast('订单提交成功！');
            cart = [];
            updateCart();
            closeOrderPage();
            closeShopDetail();
            switchTab('orders');
        }
        
        // 切换底部Tab
        function switchTab(tab) {
            // 隐藏所有页面，但保留首页
            document.getElementById('homePage').style.display = tab === 'home' ? 'block' : 'none';
            document.getElementById('searchPage').classList.remove('active');
            document.getElementById('shopDetailPage').classList.remove('active');
            document.getElementById('orderPage').classList.remove('active');
            document.getElementById('myPage').classList.toggle('active', tab === 'my');
            document.getElementById('ordersPage').classList.toggle('active', tab === 'orders');
            document.getElementById('couponPage').classList.toggle('active', tab === 'coupon');
            
            // 确保底部导航栏始终可见
            document.querySelector('.tab-bar').style.display = 'flex';
            
            // 更新导航
            document.querySelectorAll('.tab-item').forEach((item, i) => {
                const map = { home: 0, orders: 1, coupon: 2, my: 3 };
                item.classList.toggle('active', map[tab] === i);
            });
        }
        
        // 切换订单Tab
        function switchOrderTab(index) {
            document.querySelectorAll('.order-tab').forEach((tab, i) => {
                tab.classList.toggle('active', i === index);
            });
            showToast(['全部', '待支付', '进行中', '已完成'][index] + '订单');
        }
        
        // 切换优惠券Tab
        function switchCouponTab(el) {
            document.querySelectorAll('.coupon-tab').forEach(t => t.classList.remove('active'));
            el.classList.add('active');
        }
        
        // 领取优惠券
        function receiveCoupon(couponName) {
            showToast(couponName + '领取成功！');
            // 改变按钮状态
            event.target.textContent = '已领取';
            event.target.style.background = '#999';
            event.target.style.color = '#fff';
            event.target.style.cursor = 'default';
        }
    </script>
</body>
</html>