| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008 |
- <!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;600;700&display=swap" rel="stylesheet">
- <style>
- * {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- }
- :root {
- --primary: #F5A623;
- --primary-light: #FEF3E2;
- --secondary: #8B5CF6;
- --secondary-light: #EDE9FE;
- --success: #10B981;
- --success-light: #D1FAE5;
- --accent: #EC4899;
- --accent-light: #FCE7F3;
- --bg: #FFFDF9;
- --bg-card: #FFFFFF;
- --text: #374151;
- --text-secondary: #6B7280;
- --text-light: #9CA3AF;
- --border: #F3E8E0;
- }
- 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;
- }
- /* 温馨头部 */
- .warm-header {
- background: linear-gradient(180deg, var(--primary-light) 0%, var(--bg) 100%);
- padding: 16px 20px;
- padding-top: max(16px, env(safe-area-inset-top));
- }
- .header-main {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 16px;
- }
- .header-left {
- display: flex;
- align-items: center;
- gap: 10px;
- }
- .logo-icon {
- width: 42px;
- height: 42px;
- background: white;
- border-radius: 12px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 24px;
- box-shadow: 0 2px 8px rgba(245,166,35,0.15);
- }
- .logo-text {
- font-size: 20px;
- font-weight: 700;
- color: var(--text);
- }
- .logo-text span {
- color: var(--primary);
- }
- .header-right {
- display: flex;
- gap: 16px;
- }
- .header-right svg {
- width: 24px;
- height: 24px;
- color: var(--text-secondary);
- }
- .search-wrapper {
- position: relative;
- }
- .search-box {
- display: flex;
- align-items: center;
- background: white;
- border-radius: 24px;
- padding: 12px 18px;
- gap: 10px;
- box-shadow: 0 2px 12px rgba(245,166,35,0.1);
- }
- .search-box svg {
- width: 20px;
- height: 20px;
- color: var(--text-light);
- }
- .search-box input {
- flex: 1;
- border: none;
- outline: none;
- font-size: 14px;
- background: transparent;
- }
- /* 用户卡片 */
- .user-banner {
- background: linear-gradient(135deg, var(--primary) 0%, #F7B955 100%);
- margin: 0 20px 20px;
- border-radius: 20px;
- padding: 20px;
- color: white;
- position: relative;
- overflow: hidden;
- }
- .user-banner::before {
- content: '';
- position: absolute;
- top: -30px;
- right: -30px;
- width: 120px;
- height: 120px;
- border-radius: 50%;
- background: rgba(255,255,255,0.15);
- }
- .user-banner::after {
- content: '';
- position: absolute;
- bottom: -40px;
- left: 20px;
- width: 80px;
- height: 80px;
- border-radius: 50%;
- background: rgba(255,255,255,0.1);
- }
- .user-info {
- display: flex;
- align-items: center;
- gap: 14px;
- position: relative;
- z-index: 1;
- }
- .user-avatar {
- width: 56px;
- height: 56px;
- border-radius: 50%;
- background: white;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 28px;
- }
- .user-details {
- flex: 1;
- }
- .user-name {
- font-size: 18px;
- font-weight: 600;
- margin-bottom: 2px;
- }
- .user-welcome {
- font-size: 12px;
- opacity: 0.9;
- }
- .user-stats {
- display: flex;
- gap: 24px;
- margin-top: 16px;
- position: relative;
- z-index: 1;
- }
- .stat-item {
- text-align: center;
- }
- .stat-value {
- font-size: 18px;
- font-weight: 700;
- }
- .stat-label {
- font-size: 11px;
- opacity: 0.85;
- margin-top: 2px;
- }
- /* 快捷入口 */
- .quick-nav {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- gap: 12px;
- padding: 0 20px;
- margin-bottom: 24px;
- }
- .quick-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 8px;
- text-decoration: none;
- }
- .quick-icon {
- width: 52px;
- height: 52px;
- border-radius: 16px;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 24px;
- }
- .quick-icon.order { background: var(--success-light); }
- .quick-icon.coupon { background: var(--primary-light); }
- .quick-icon.heart { background: var(--accent-light); }
- .quick-icon.location { background: var(--secondary-light); }
- .quick-label {
- font-size: 12px;
- color: var(--text);
- font-weight: 500;
- }
- /* Banner */
- .home-banner {
- margin: 0 20px 24px;
- border-radius: 20px;
- overflow: hidden;
- position: relative;
- height: 140px;
- }
- .home-banner img {
- width: 100%;
- height: 100%;
- object-fit: cover;
- }
- .banner-content {
- position: absolute;
- inset: 0;
- display: flex;
- flex-direction: column;
- justify-content: center;
- padding: 20px 24px;
- background: linear-gradient(135deg, rgba(245,166,35,0.85), rgba(247,185,85,0.75));
- }
- .banner-title {
- font-size: 22px;
- font-weight: 700;
- color: white;
- margin-bottom: 6px;
- }
- .banner-subtitle {
- font-size: 14px;
- color: rgba(255,255,255,0.9);
- }
- .banner-btn {
- display: inline-block;
- background: white;
- color: var(--primary);
- padding: 8px 20px;
- border-radius: 20px;
- font-size: 13px;
- font-weight: 600;
- margin-top: 12px;
- width: fit-content;
- }
- /* 分类选择 */
- .category-tabs {
- display: flex;
- gap: 8px;
- padding: 0 20px;
- overflow-x: auto;
- margin-bottom: 20px;
- -webkit-overflow-scrolling: touch;
- }
- .category-tabs::-webkit-scrollbar {
- display: none;
- }
- .category-tab {
- flex-shrink: 0;
- padding: 10px 18px;
- border-radius: 24px;
- font-size: 14px;
- font-weight: 500;
- background: var(--bg-card);
- color: var(--text-secondary);
- border: 1.5px solid var(--border);
- }
- .category-tab.active {
- background: var(--primary);
- color: white;
- border-color: var(--primary);
- }
- /* 精选推荐 */
- .featured-section {
- padding: 0 20px;
- 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 .emoji {
- font-size: 20px;
- }
- .section-more {
- font-size: 13px;
- color: var(--text-light);
- text-decoration: none;
- font-weight: 500;
- }
- .featured-scroll {
- display: flex;
- gap: 14px;
- overflow-x: auto;
- padding-bottom: 8px;
- -webkit-overflow-scrolling: touch;
- }
- .featured-scroll::-webkit-scrollbar {
- display: none;
- }
- .featured-card {
- flex-shrink: 0;
- width: 150px;
- background: var(--bg-card);
- border-radius: 18px;
- overflow: hidden;
- box-shadow: 0 2px 12px rgba(0,0,0,0.06);
- }
- .featured-img {
- height: 130px;
- background: linear-gradient(135deg, #FEF9F3, #FDF6ED);
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 56px;
- position: relative;
- }
- .featured-badge {
- position: absolute;
- top: 10px;
- left: 10px;
- padding: 4px 10px;
- border-radius: 10px;
- font-size: 10px;
- font-weight: 600;
- }
- .featured-badge.pick {
- background: var(--primary);
- color: white;
- }
- .featured-badge.fresh {
- background: var(--success);
- color: white;
- }
- .featured-info {
- padding: 14px;
- }
- .featured-name {
- font-size: 14px;
- font-weight: 600;
- color: var(--text);
- margin-bottom: 6px;
- line-height: 1.4;
- }
- .featured-meta {
- display: flex;
- justify-content: space-between;
- align-items: center;
- }
- .featured-price {
- display: flex;
- align-items: baseline;
- gap: 2px;
- }
- .price-symbol {
- font-size: 11px;
- color: var(--accent);
- font-weight: 600;
- }
- .price-value {
- font-size: 16px;
- color: var(--accent);
- font-weight: 700;
- }
- .featured-unit {
- font-size: 11px;
- color: var(--text-light);
- }
- .add-btn {
- width: 30px;
- height: 30px;
- border-radius: 50%;
- background: var(--primary);
- color: white;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 18px;
- font-weight: 400;
- box-shadow: 0 2px 8px rgba(245,166,35,0.3);
- }
- /* 商品列表 */
- .product-section {
- padding: 0 20px;
- margin-bottom: 24px;
- }
- .product-list {
- display: flex;
- flex-direction: column;
- gap: 16px;
- }
- .product-item {
- display: flex;
- background: var(--bg-card);
- border-radius: 18px;
- padding: 16px;
- gap: 16px;
- box-shadow: 0 2px 12px rgba(0,0,0,0.05);
- }
- .product-img {
- width: 100px;
- height: 100px;
- border-radius: 16px;
- background: linear-gradient(135deg, #FEF9F3, #FDF6ED);
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 48px;
- flex-shrink: 0;
- }
- .product-content {
- flex: 1;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- }
- .product-header {
- display: flex;
- justify-content: space-between;
- align-items: flex-start;
- }
- .product-name {
- font-size: 15px;
- font-weight: 600;
- color: var(--text);
- line-height: 1.4;
- margin-right: 8px;
- }
- .product-tag {
- padding: 4px 10px;
- border-radius: 8px;
- font-size: 10px;
- font-weight: 600;
- flex-shrink: 0;
- }
- .product-tag.farm {
- background: var(--success-light);
- color: var(--success);
- }
- .product-tag.natural {
- background: var(--secondary-light);
- color: var(--secondary);
- }
- .product-desc {
- font-size: 13px;
- color: var(--text-secondary);
- margin-top: 6px;
- }
- .product-bottom {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-top: 8px;
- }
- .product-price {
- display: flex;
- align-items: baseline;
- gap: 2px;
- }
- .product-price .symbol {
- font-size: 12px;
- color: var(--accent);
- font-weight: 600;
- }
- .product-price .value {
- font-size: 18px;
- color: var(--accent);
- font-weight: 700;
- }
- .product-price .unit {
- font-size: 11px;
- color: var(--text-light);
- }
- .product-actions {
- display: flex;
- gap: 10px;
- align-items: center;
- }
- .product-add {
- width: 34px;
- height: 34px;
- border-radius: 50%;
- background: var(--primary);
- color: white;
- display: flex;
- align-items: center;
- justify-content: center;
- font-size: 20px;
- font-weight: 400;
- }
- /* 底部导航 */
- .tabbar {
- position: fixed;
- bottom: 0;
- left: 50%;
- transform: translateX(-50%);
- width: 100%;
- max-width: 430px;
- background: var(--bg-card);
- display: flex;
- justify-content: space-around;
- padding: 10px 0;
- padding-bottom: max(10px, env(safe-area-inset-bottom));
- box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
- z-index: 100;
- }
- .tabbar-item {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 4px;
- text-decoration: none;
- color: var(--text-light);
- padding: 6px 20px;
- }
- .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: 54px;
- height: 54px;
- border-radius: 50%;
- background: linear-gradient(135deg, var(--primary), #F7B955);
- color: white;
- display: flex;
- align-items: center;
- justify-content: center;
- box-shadow: 0 6px 20px rgba(245,166,35,0.35);
- z-index: 99;
- }
- .floating-cart svg {
- width: 26px;
- height: 26px;
- }
- .cart-badge {
- position: absolute;
- top: -2px;
- right: -2px;
- background: var(--accent);
- color: white;
- font-size: 11px;
- font-weight: 700;
- min-width: 20px;
- height: 20px;
- border-radius: 10px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- </style>
- </head>
- <body>
- <div class="phone-container">
- <!-- 头部 -->
- <div class="warm-header">
- <div class="header-main">
- <div class="header-left">
- <div class="logo-icon">🌿</div>
- <div class="logo-text">安心<span>菜</span></div>
- </div>
- <div class="header-right">
- <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>
- <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>
- </div>
- </div>
- <div class="search-wrapper">
- <div class="search-box">
- <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>
- </div>
- <!-- 用户卡片 -->
- <div class="user-banner">
- <div class="user-info">
- <div class="user-avatar">😊</div>
- <div class="user-details">
- <div class="user-name">张阿姨</div>
- <div class="user-welcome">今天想吃点什么呢?</div>
- </div>
- </div>
- <div class="user-stats">
- <div class="stat-item">
- <div class="stat-value">15</div>
- <div class="stat-label">全部订单</div>
- </div>
- <div class="stat-item">
- <div class="stat-value">3</div>
- <div class="stat-label">待收货</div>
- </div>
- <div class="stat-item">
- <div class="stat-value">¥58</div>
- <div class="stat-label">优惠券</div>
- </div>
- </div>
- </div>
- <!-- 快捷导航 -->
- <div class="quick-nav">
- <a href="#" class="quick-item">
- <div class="quick-icon order">📋</div>
- <span class="quick-label">我的订单</span>
- </a>
- <a href="#" class="quick-item">
- <div class="quick-icon coupon">🎁</div>
- <span class="quick-label">优惠券</span>
- </a>
- <a href="#" class="quick-item">
- <div class="quick-icon heart">❤</div>
- <span class="quick-label">我的收藏</span>
- </a>
- <a href="#" class="quick-item">
- <div class="quick-icon location">📍</div>
- <span class="quick-label">地址管理</span>
- </a>
- </div>
- <!-- Banner -->
- <div class="home-banner">
- <img src="https://images.unsplash.com/photo-1506484381205-f7945b51d469?w=800&h=400&fit=crop" alt="放心食材">
- <div class="banner-content">
- <div class="banner-title">放心食材</div>
- <div class="banner-subtitle">来自优质农场,新鲜直达</div>
- <div class="banner-btn">立即选购</div>
- </div>
- </div>
- <!-- 分类选择 -->
- <div class="category-tabs">
- <div class="category-tab active">为你推荐</div>
- <div class="category-tab">时令蔬菜</div>
- <div class="category-tab">新鲜水果</div>
- <div class="category-tab">肉禽蛋类</div>
- <div class="category-tab">水产海鲜</div>
- <div class="category-tab">粮油调味</div>
- </div>
- <!-- 精选推荐 -->
- <div class="featured-section">
- <div class="section-header">
- <div class="section-title">
- <span class="emoji">🌱</span>
- <h2>今日精选</h2>
- </div>
- <a href="#" class="section-more">更多 ›</a>
- </div>
- <div class="featured-scroll">
- <div class="featured-card">
- <div class="featured-img">
- 🌱
- <span class="featured-badge pick">精选</span>
- </div>
- <div class="featured-info">
- <div class="featured-name">有机小白菜 约500g</div>
- <div class="featured-meta">
- <div class="featured-price">
- <span class="price-symbol">¥</span>
- <span class="price-value">6.80</span>
- <span class="featured-unit">/500g</span>
- </div>
- <div class="add-btn">+</div>
- </div>
- </div>
- </div>
- <div class="featured-card">
- <div class="featured-img">
- 🍎
- <span class="featured-badge fresh">新鲜</span>
- </div>
- <div class="featured-info">
- <div class="featured-name">红富士苹果 约1kg</div>
- <div class="featured-meta">
- <div class="featured-price">
- <span class="price-symbol">¥</span>
- <span class="price-value">12.80</span>
- <span class="featured-unit">/kg</span>
- </div>
- <div class="add-btn">+</div>
- </div>
- </div>
- </div>
- <div class="featured-card">
- <div class="featured-img">
- 🌽
- <span class="featured-badge pick">精选</span>
- </div>
- <div class="featured-info">
- <div class="featured-name">圣女果 约500g</div>
- <div class="featured-meta">
- <div class="featured-price">
- <span class="price-symbol">¥</span>
- <span class="price-value">9.90</span>
- <span class="featured-unit">/份</span>
- </div>
- <div class="add-btn">+</div>
- </div>
- </div>
- </div>
- <div class="featured-card">
- <div class="featured-img">
- 🥭
- <span class="featured-badge fresh">新鲜</span>
- </div>
- <div class="featured-info">
- <div class="featured-name">土鸡蛋 20枚</div>
- <div class="featured-meta">
- <div class="featured-price">
- <span class="price-symbol">¥</span>
- <span class="price-value">22.00</span>
- <span class="featured-unit">/盒</span>
- </div>
- <div class="add-btn">+</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- 商品列表 -->
- <div class="product-section">
- <div class="section-header">
- <div class="section-title">
- <span class="emoji">🛒</span>
- <h2>猜你喜欢</h2>
- </div>
- </div>
- <div class="product-list">
- <div class="product-item">
- <div class="product-img">🥬</div>
- <div class="product-content">
- <div class="product-header">
- <div class="product-name">鲜活大闸蟹 4只装 约600g</div>
- <span class="product-tag farm">农场直供</span>
- </div>
- <div class="product-desc">阳澄湖产区 当日捕捞送达</div>
- <div class="product-bottom">
- <div class="product-price">
- <span class="symbol">¥</span>
- <span class="value">88.00</span>
- <span class="unit">/份</span>
- </div>
- <div class="product-actions">
- <div class="product-add">+</div>
- </div>
- </div>
- </div>
- </div>
- <div class="product-item">
- <div class="product-img">🧄</div>
- <div class="product-content">
- <div class="product-header">
- <div class="product-name">澳洲进口牛腩 约500g</div>
- <span class="product-tag natural">天然</span>
- </div>
- <div class="product-desc">谷饲喂养 肉质鲜嫩多汁</div>
- <div class="product-bottom">
- <div class="product-price">
- <span class="symbol">¥</span>
- <span class="value">42.80</span>
- <span class="unit">/份</span>
- </div>
- <div class="product-actions">
- <div class="product-add">+</div>
- </div>
- </div>
- </div>
- </div>
- <div class="product-item">
- <div class="product-img">🍇</div>
- <div class="product-content">
- <div class="product-header">
- <div class="product-name">泰国进口金枕榴莲 约2斤</div>
- <span class="product-tag farm">进口</span>
- </div>
- <div class="product-desc">果肉饱满 香甜浓郁 品质保证</div>
- <div class="product-bottom">
- <div class="product-price">
- <span class="symbol">¥</span>
- <span class="value">58.00</span>
- <span class="unit">/份</span>
- </div>
- <div class="product-actions">
- <div class="product-add">+</div>
- </div>
- </div>
- </div>
- </div>
- <div class="product-item">
- <div class="product-img">🌼</div>
- <div class="product-content">
- <div class="product-header">
- <div class="product-name">云南高原娃娃菜 约600g</div>
- <span class="product-tag natural">有机</span>
- </div>
- <div class="product-desc">新鲜采摘 产地直发 健康蔬菜</div>
- <div class="product-bottom">
- <div class="product-price">
- <span class="symbol">¥</span>
- <span class="value">7.80</span>
- <span class="unit">/份</span>
- </div>
- <div class="product-actions">
- <div class="product-add">+</div>
- </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">4</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>
|