| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
- <title>菜东家 - 生鲜配送平台</title>
- <link rel="preconnect" href="https://fonts.googleapis.com">
- <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
- <style>
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- :root {
- --primary: #10B981;
- --primary-dark: #059669;
- --primary-light: #D1FAE5;
- --secondary: #F59E0B;
- --accent: #EF4444;
- --bg: #F0FDF4;
- --bg-card: #FFFFFF;
- --text: #1F2937;
- --text-secondary: #6B7280;
- --border: #E5E7EB;
- --shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.1), 0 2px 4px -1px rgba(16, 185, 129, 0.06);
- }
- body {
- font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
- background: var(--bg);
- color: var(--text);
- min-height: 100vh;
- padding-bottom: 80px;
- }
- /* 手机容器 */
- .phone-container {
- max-width: 430px;
- margin: 0 auto;
- background: var(--bg);
- min-height: 100vh;
- }
- /* 顶部导航 */
- .header {
- background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
- padding: 12px 16px;
- padding-top: max(12px, env(safe-area-inset-top));
- position: sticky;
- top: 0;
- z-index: 100;
- }
- .header-top {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-bottom: 12px;
- }
- .location {
- display: flex;
- align-items: center;
- gap: 4px;
- color: white;
- font-size: 14px;
- font-weight: 500;
- }
- .location svg {
- width: 18px;
- height: 18px;
- }
- .header-actions {
- display: flex;
- gap: 12px;
- }
- .header-actions svg {
- width: 22px;
- height: 22px;
- color: white;
- cursor: pointer;
- }
- /* 搜索栏 */
- .search-bar {
- display: flex;
- align-items: center;
- background: white;
- border-radius: 24px;
- padding: 10px 16px;
- gap: 8px;
- }
- .search-bar svg {
- width: 20px;
- height: 20px;
- color: var(--text-secondary);
- }
- .search-bar input {
- flex: 1;
- border: none;
- outline: none;
- font-size: 14px;
- color: var(--text);
- background: transparent;
- }
- .search-bar input::placeholder {
- color: #9CA3AF;
- }
- /* Banner轮播 */
- .banner {
- margin: 16px;
- border-radius: 16px;
- overflow: hidden;
- position: relative;
- height: 160px;
- }
- .banner img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- .banner-overlay {
- position: absolute;
- bottom: 0;
- left: 0;
- right: 0;
- padding: 16px;
- background: linear-gradient(transparent, rgba(0,0,0,0.6));
- color: white;
- }
- .banner-tag {
- display: inline-block;
- background: var(--secondary);
- padding: 4px 10px;
- border-radius: 4px;
- font-size: 12px;
- font-weight: 500;
- margin-bottom: 8px;
- }
- .banner-title {
- font-size: 18px;
- font-weight: 700;
- }
- .banner-dots {
- position: absolute;
- bottom: 12px;
- right: 16px;
- display: flex;
- gap: 6px;
- }
- .banner-dot {
- width: 8px;
- height: 8px;
- border-radius: 50%;
- background: rgba(255,255,255,0.5);
- }
- .banner-dot.active {
- background: white;
- width: 20px;
- border-radius: 4px;
- }
- /* 分类入口 */
- .categories {
- display: grid;
- grid-template-columns: repeat(5, 1fr);
- gap: 8px;
- padding: 0 16px;
- margin-bottom: 20px;
- }
- .category-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 8px;
- text-decoration: none;
- }
- .category-icon {
- width: 56px;
- height: 56px;
- border-radius: 16px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 28px;
- transition: transform 0.2s;
- }
- .category-item:active .category-icon {
- transform: scale(0.95);
- }
- .category-icon.vegetable { background: #DCFCE7; }
- .category-icon.fruit { background: #FEF3C7; }
- .category-icon.meat { background: #FEE2E2; }
- .category-icon.seafood { background: #DBEAFE; }
- .category-icon.oil { background: #F3E8FF; }
- .category-name {
- font-size: 12px;
- color: var(--text);
- font-weight: 500;
- }
- /* 商品区块 */
- .section {
- padding: 0 16px;
- margin-bottom: 24px;
- }
- .section-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 16px;
- }
- .section-title {
- display: flex;
- align-items: center;
- gap: 8px;
- }
- .section-title h2 {
- font-size: 18px;
- font-weight: 700;
- color: var(--text);
- }
- .section-title .badge {
- background: var(--accent);
- color: white;
- font-size: 10px;
- padding: 2px 6px;
- border-radius: 10px;
- font-weight: 500;
- }
- .section-more {
- display: flex;
- align-items: center;
- gap: 4px;
- color: var(--text-secondary);
- font-size: 13px;
- text-decoration: none;
- }
- /* 商品网格 */
- .product-grid {
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 12px;
- }
- .product-card {
- background: var(--bg-card);
- border-radius: 16px;
- overflow: hidden;
- box-shadow: var(--shadow);
- transition: transform 0.2s, box-shadow 0.2s;
- }
- .product-card:active {
- transform: scale(0.98);
- }
- .product-image {
- position: relative;
- height: 140px;
- background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 64px;
- }
- .product-tag {
- position: absolute;
- top: 8px;
- left: 8px;
- background: var(--primary);
- color: white;
- font-size: 10px;
- padding: 2px 8px;
- border-radius: 4px;
- font-weight: 500;
- }
- .product-tag.seckill {
- background: var(--accent);
- }
- .product-freshness {
- position: absolute;
- top: 8px;
- right: 8px;
- background: rgba(255,255,255,0.9);
- padding: 2px 6px;
- border-radius: 4px;
- font-size: 10px;
- color: var(--primary);
- font-weight: 500;
- }
- .product-info {
- padding: 12px;
- }
- .product-name {
- font-size: 14px;
- font-weight: 600;
- color: var(--text);
- margin-bottom: 4px;
- line-height: 1.4;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- overflow: hidden;
- }
- .product-desc {
- font-size: 12px;
- color: var(--text-secondary);
- margin-bottom: 8px;
- }
- .product-bottom {
- display: flex;
- justify-content: space-between;
- align-items: flex-end;
- }
- .product-price {
- display: flex;
- align-items: baseline;
- gap: 2px;
- }
- .price-symbol {
- font-size: 12px;
- color: var(--accent);
- font-weight: 600;
- }
- .price-value {
- font-size: 18px;
- color: var(--accent);
- font-weight: 700;
- }
- .price-unit {
- font-size: 11px;
- color: var(--text-secondary);
- margin-left: 2px;
- }
- .price-original {
- font-size: 11px;
- color: var(--text-secondary);
- text-decoration: line-through;
- margin-left: 4px;
- }
- .product-add {
- width: 32px;
- height: 32px;
- border-radius: 50%;
- background: var(--primary);
- color: white;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 20px;
- font-weight: 300;
- box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
- }
- /* 秒杀专区 */
- .seckill-section {
- background: var(--bg-card);
- margin: 16px;
- border-radius: 16px;
- padding: 16px;
- box-shadow: var(--shadow);
- }
- .seckill-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 16px;
- }
- .seckill-title {
- display: flex;
- align-items: center;
- gap: 8px;
- }
- .seckill-icon {
- font-size: 24px;
- }
- .seckill-title h3 {
- font-size: 16px;
- font-weight: 700;
- color: var(--accent);
- }
- .seckill-timer {
- display: flex;
- gap: 4px;
- align-items: center;
- }
- .timer-label {
- font-size: 12px;
- color: var(--text-secondary);
- margin-right: 4px;
- }
- .timer-block {
- background: var(--text);
- color: white;
- padding: 4px 6px;
- border-radius: 4px;
- font-size: 12px;
- font-weight: 600;
- min-width: 24px;
- text-align: center;
- }
- .timer-separator {
- color: var(--text);
- font-weight: 700;
- }
- .seckill-scroll {
- display: flex;
- gap: 12px;
- overflow-x: auto;
- padding-bottom: 8px;
- -webkit-overflow-scrolling: touch;
- scrollbar-width: none;
- }
- .seckill-scroll::-webkit-scrollbar {
- display: none;
- }
- .seckill-item {
- flex-shrink: 0;
- width: 100px;
- text-align: center;
- }
- .seckill-item-image {
- width: 100px;
- height: 100px;
- border-radius: 12px;
- background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 48px;
- margin-bottom: 8px;
- }
- .seckill-price {
- font-size: 14px;
- color: var(--accent);
- font-weight: 700;
- margin-bottom: 2px;
- }
- .seckill-original {
- font-size: 11px;
- color: var(--text-secondary);
- text-decoration: line-through;
- }
- /* 底部导航 */
- .tabbar {
- 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;
- padding-bottom: max(8px, env(safe-area-inset-bottom));
- box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
- z-index: 100;
- }
- .tabbar-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 4px;
- text-decoration: none;
- color: var(--text-secondary);
- padding: 4px 16px;
- }
- .tabbar-item.active {
- color: var(--primary);
- }
- .tabbar-item svg {
- width: 24px;
- height: 24px;
- }
- .tabbar-item span {
- font-size: 11px;
- font-weight: 500;
- }
- /* 浮动购物车 */
- .floating-cart {
- position: fixed;
- bottom: 90px;
- right: calc(50% - 185px);
- width: 56px;
- height: 56px;
- border-radius: 50%;
- background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
- color: white;
- display: flex;
- align-items: center;
- justify-content: center;
- box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
- z-index: 99;
- }
- .floating-cart svg {
- width: 28px;
- height: 28px;
- }
- .cart-badge {
- position: absolute;
- top: -4px;
- right: -4px;
- background: var(--accent);
- color: white;
- font-size: 11px;
- font-weight: 600;
- min-width: 20px;
- height: 20px;
- border-radius: 10px;
- display: flex;
- align-items: center;
- justify-content: center;
- padding: 0 6px;
- }
- /* 标签页 */
- .filter-tabs {
- display: flex;
- gap: 8px;
- padding: 0 16px;
- margin-bottom: 16px;
- overflow-x: auto;
- -webkit-overflow-scrolling: touch;
- }
- .filter-tabs::-webkit-scrollbar {
- display: none;
- }
- .filter-tab {
- padding: 8px 16px;
- border-radius: 20px;
- font-size: 14px;
- font-weight: 500;
- white-space: nowrap;
- background: var(--bg-card);
- color: var(--text-secondary);
- border: 1px solid var(--border);
- }
- .filter-tab.active {
- background: var(--primary-light);
- color: var(--primary);
- border-color: var(--primary);
- }
- </style>
- </head>
- <body>
- <div class="phone-container">
- <!-- 顶部导航 -->
- <div class="header">
- <div class="header-top">
- <div class="location">
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
- <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
- <circle cx="12" cy="10" r="3"/>
- </svg>
- <span>深圳市南山区</span>
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px">
- <polyline points="6 9 12 15 18 9"/>
- </svg>
- </div>
- <div class="header-actions">
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
- <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
- <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
- </svg>
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
- <circle cx="11" cy="11" r="8"/>
- <path d="m21 21-4.35-4.35"/>
- </svg>
- </div>
- </div>
- <div class="search-bar">
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
- <circle cx="11" cy="11" r="8"/>
- <path d="m21 21-4.35-4.35"/>
- </svg>
- <input type="text" placeholder="搜索新鲜蔬菜、水果、肉类...">
- </div>
- </div>
- <!-- Banner轮播 -->
- <div class="banner">
- <img src="https://images.unsplash.com/photo-1542838132-92c53300491e?w=800&h=400&fit=crop" alt="生鲜特惠">
- <div class="banner-overlay">
- <span class="banner-tag">限时特惠</span>
- <div class="banner-title">新鲜有机蔬菜 满59减15</div>
- </div>
- <div class="banner-dots">
- <span class="banner-dot active"></span>
- <span class="banner-dot"></span>
- <span class="banner-dot"></span>
- </div>
- </div>
- <!-- 分类入口 -->
- <div class="categories">
- <a href="#" class="category-item">
- <div class="category-icon vegetable">🌱</div>
- <span class="category-name">新鲜蔬菜</span>
- </a>
- <a href="#" class="category-item">
- <div class="category-icon fruit">🍎</div>
- <span class="category-name">时令水果</span>
- </a>
- <a href="#" class="category-item">
- <div class="category-icon meat">🥩</div>
- <span class="category-name">肉禽蛋类</span>
- </a>
- <a href="#" class="category-item">
- <div class="category-icon seafood">🦐</div>
- <span class="category-name">水产海鲜</span>
- </a>
- <a href="#" class="category-item">
- <div class="category-icon oil">🪳</div>
- <span class="category-name">粮油调味</span>
- </a>
- </div>
- <!-- 秒杀专区 -->
- <div class="seckill-section">
- <div class="seckill-header">
- <div class="seckill-title">
- <span class="seckill-icon">⏱</span>
- <h3>限时秒杀</h3>
- <span style="font-size:12px;color:var(--text-secondary)">距结束</span>
- </div>
- <div class="seckill-timer">
- <span class="timer-label"></span>
- <span class="timer-block">02</span>
- <span class="timer-separator">:</span>
- <span class="timer-block">35</span>
- <span class="timer-separator">:</span>
- <span class="timer-block">48</span>
- </div>
- </div>
- <div class="seckill-scroll">
- <div class="seckill-item">
- <div class="seckill-item-image">🌱</div>
- <div class="seckill-price">¥1.98</div>
- <div class="seckill-original">¥3.50</div>
- </div>
- <div class="seckill-item">
- <div class="seckill-item-image">🍎</div>
- <div class="seckill-price">¥4.99</div>
- <div class="seckill-original">¥8.00</div>
- </div>
- <div class="seckill-item">
- <div class="seckill-item-image">🥩</div>
- <div class="seckill-price">¥15.8</div>
- <div class="seckill-original">¥22.00</div>
- </div>
- <div class="seckill-item">
- <div class="seckill-item-image">🥬</div>
- <div class="seckill-price">¥8.80</div>
- <div class="seckill-original">¥12.00</div>
- </div>
- </div>
- </div>
- <!-- 为您推荐 -->
- <div class="section">
- <div class="section-header">
- <div class="section-title">
- <h2>为您推荐</h2>
- <span class="badge">精选</span>
- </div>
- <a href="#" class="section-more">
- 查看更多
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px">
- <polyline points="9 18 15 12 9 6"/>
- </svg>
- </a>
- </div>
- </div>
- <div class="filter-tabs">
- <div class="filter-tab active">热门推荐</div>
- <div class="filter-tab">今日特惠</div>
- <div class="filter-tab">有机蔬菜</div>
- <div class="filter-tab">进口水果</div>
- <div class="filter-tab">新鲜肉类</div>
- </div>
- <div class="section" style="margin-top:-8px">
- <div class="product-grid">
- <div class="product-card">
- <div class="product-image">
- 🌱
- <span class="product-tag">今日鲜</span>
- <span class="product-freshness">24H内采摘</span>
- </div>
- <div class="product-info">
- <div class="product-name">云南高原有机小青菜 约500g</div>
- <div class="product-desc">新鲜直达 农家种植</div>
- <div class="product-bottom">
- <div class="product-price">
- <span class="price-symbol">¥</span>
- <span class="price-value">8.80</span>
- <span class="price-unit">/500g</span>
- </div>
- <div class="product-add">+</div>
- </div>
- </div>
- </div>
- <div class="product-card">
- <div class="product-image">
- 🍎
- <span class="product-tag seckill">秒杀</span>
- </div>
- <div class="product-info">
- <div class="product-name">泰国进口金枕榴莲 约2斤</div>
- <div class="product-desc">果肉饱满 香甜可口</div>
- <div class="product-bottom">
- <div class="product-price">
- <span class="price-symbol">¥</span>
- <span class="price-value">39.90</span>
- <span class="price-original">59.90</span>
- </div>
- <div class="product-add">+</div>
- </div>
- </div>
- </div>
- <div class="product-card">
- <div class="product-image">
- 🥩
- <span class="product-tag">热卖</span>
- </div>
- <div class="product-info">
- <div class="product-name">土鸡蛋 30枚装 约1.5kg</div>
- <div class="product-desc">散养土鸡 营养丰富</div>
- <div class="product-bottom">
- <div class="product-price">
- <span class="price-symbol">¥</span>
- <span class="price-value">26.80</span>
- <span class="price-unit">/盒</span>
- </div>
- <div class="product-add">+</div>
- </div>
- </div>
- </div>
- <div class="product-card">
- <div class="product-image">
- 🥬
- <span class="product-tag">新品</span>
- </div>
- <div class="product-info">
- <div class="product-name">鲜活大闸蟹 公母各3只 约1.2kg</div>
- <div class="product-desc">阳澄湖产区 当日捕捞</div>
- <div class="product-bottom">
- <div class="product-price">
- <span class="price-symbol">¥</span>
- <span class="price-value">128.00</span>
- <span class="price-unit">/份</span>
- </div>
- <div class="product-add">+</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- 浮动购物车 -->
- <div class="floating-cart">
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
- <circle cx="9" cy="21" r="1"/>
- <circle cx="20" cy="21" r="1"/>
- <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
- </svg>
- <span class="cart-badge">3</span>
- </div>
- <!-- 底部导航 -->
- <nav class="tabbar">
- <a href="#" class="tabbar-item active">
- <svg viewBox="0 0 24 24" fill="currentColor">
- <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
- </svg>
- <span>首页</span>
- </a>
- <a href="#" class="tabbar-item">
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
- <rect x="3" y="3" width="7" height="7"/>
- <rect x="14" y="3" width="7" height="7"/>
- <rect x="14" y="14" width="7" height="7"/>
- <rect x="3" y="14" width="7" height="7"/>
- </svg>
- <span>分类</span>
- </a>
- <a href="#" class="tabbar-item">
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
- <circle cx="9" cy="21" r="1"/>
- <circle cx="20" cy="21" r="1"/>
- <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
- </svg>
- <span>购物车</span>
- </a>
- <a href="#" class="tabbar-item">
- <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
- <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
- <circle cx="12" cy="7" r="4"/>
- </svg>
- <span>我的</span>
- </a>
- </nav>
- </div>
- </body>
- </html>
|