style-1-fresh.html 27 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  6. <title>菜东家 - 生鲜配送平台</title>
  7. <link rel="preconnect" href="https://fonts.googleapis.com">
  8. <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
  9. <style>
  10. * {
  11. margin: 0;
  12. padding: 0;
  13. box-sizing: border-box;
  14. }
  15. :root {
  16. --primary: #10B981;
  17. --primary-dark: #059669;
  18. --primary-light: #D1FAE5;
  19. --secondary: #F59E0B;
  20. --accent: #EF4444;
  21. --bg: #F0FDF4;
  22. --bg-card: #FFFFFF;
  23. --text: #1F2937;
  24. --text-secondary: #6B7280;
  25. --border: #E5E7EB;
  26. --shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.1), 0 2px 4px -1px rgba(16, 185, 129, 0.06);
  27. }
  28. body {
  29. font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  30. background: var(--bg);
  31. color: var(--text);
  32. min-height: 100vh;
  33. padding-bottom: 80px;
  34. }
  35. /* 手机容器 */
  36. .phone-container {
  37. max-width: 430px;
  38. margin: 0 auto;
  39. background: var(--bg);
  40. min-height: 100vh;
  41. }
  42. /* 顶部导航 */
  43. .header {
  44. background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  45. padding: 12px 16px;
  46. padding-top: max(12px, env(safe-area-inset-top));
  47. position: sticky;
  48. top: 0;
  49. z-index: 100;
  50. }
  51. .header-top {
  52. display: flex;
  53. align-items: center;
  54. justify-content: space-between;
  55. margin-bottom: 12px;
  56. }
  57. .location {
  58. display: flex;
  59. align-items: center;
  60. gap: 4px;
  61. color: white;
  62. font-size: 14px;
  63. font-weight: 500;
  64. }
  65. .location svg {
  66. width: 18px;
  67. height: 18px;
  68. }
  69. .header-actions {
  70. display: flex;
  71. gap: 12px;
  72. }
  73. .header-actions svg {
  74. width: 22px;
  75. height: 22px;
  76. color: white;
  77. cursor: pointer;
  78. }
  79. /* 搜索栏 */
  80. .search-bar {
  81. display: flex;
  82. align-items: center;
  83. background: white;
  84. border-radius: 24px;
  85. padding: 10px 16px;
  86. gap: 8px;
  87. }
  88. .search-bar svg {
  89. width: 20px;
  90. height: 20px;
  91. color: var(--text-secondary);
  92. }
  93. .search-bar input {
  94. flex: 1;
  95. border: none;
  96. outline: none;
  97. font-size: 14px;
  98. color: var(--text);
  99. background: transparent;
  100. }
  101. .search-bar input::placeholder {
  102. color: #9CA3AF;
  103. }
  104. /* Banner轮播 */
  105. .banner {
  106. margin: 16px;
  107. border-radius: 16px;
  108. overflow: hidden;
  109. position: relative;
  110. height: 160px;
  111. }
  112. .banner img {
  113. width: 100%;
  114. height: 100%;
  115. object-fit: cover;
  116. }
  117. .banner-overlay {
  118. position: absolute;
  119. bottom: 0;
  120. left: 0;
  121. right: 0;
  122. padding: 16px;
  123. background: linear-gradient(transparent, rgba(0,0,0,0.6));
  124. color: white;
  125. }
  126. .banner-tag {
  127. display: inline-block;
  128. background: var(--secondary);
  129. padding: 4px 10px;
  130. border-radius: 4px;
  131. font-size: 12px;
  132. font-weight: 500;
  133. margin-bottom: 8px;
  134. }
  135. .banner-title {
  136. font-size: 18px;
  137. font-weight: 700;
  138. }
  139. .banner-dots {
  140. position: absolute;
  141. bottom: 12px;
  142. right: 16px;
  143. display: flex;
  144. gap: 6px;
  145. }
  146. .banner-dot {
  147. width: 8px;
  148. height: 8px;
  149. border-radius: 50%;
  150. background: rgba(255,255,255,0.5);
  151. }
  152. .banner-dot.active {
  153. background: white;
  154. width: 20px;
  155. border-radius: 4px;
  156. }
  157. /* 分类入口 */
  158. .categories {
  159. display: grid;
  160. grid-template-columns: repeat(5, 1fr);
  161. gap: 8px;
  162. padding: 0 16px;
  163. margin-bottom: 20px;
  164. }
  165. .category-item {
  166. display: flex;
  167. flex-direction: column;
  168. align-items: center;
  169. gap: 8px;
  170. text-decoration: none;
  171. }
  172. .category-icon {
  173. width: 56px;
  174. height: 56px;
  175. border-radius: 16px;
  176. display: flex;
  177. align-items: center;
  178. justify-content: center;
  179. font-size: 28px;
  180. transition: transform 0.2s;
  181. }
  182. .category-item:active .category-icon {
  183. transform: scale(0.95);
  184. }
  185. .category-icon.vegetable { background: #DCFCE7; }
  186. .category-icon.fruit { background: #FEF3C7; }
  187. .category-icon.meat { background: #FEE2E2; }
  188. .category-icon.seafood { background: #DBEAFE; }
  189. .category-icon.oil { background: #F3E8FF; }
  190. .category-name {
  191. font-size: 12px;
  192. color: var(--text);
  193. font-weight: 500;
  194. }
  195. /* 商品区块 */
  196. .section {
  197. padding: 0 16px;
  198. margin-bottom: 24px;
  199. }
  200. .section-header {
  201. display: flex;
  202. justify-content: space-between;
  203. align-items: center;
  204. margin-bottom: 16px;
  205. }
  206. .section-title {
  207. display: flex;
  208. align-items: center;
  209. gap: 8px;
  210. }
  211. .section-title h2 {
  212. font-size: 18px;
  213. font-weight: 700;
  214. color: var(--text);
  215. }
  216. .section-title .badge {
  217. background: var(--accent);
  218. color: white;
  219. font-size: 10px;
  220. padding: 2px 6px;
  221. border-radius: 10px;
  222. font-weight: 500;
  223. }
  224. .section-more {
  225. display: flex;
  226. align-items: center;
  227. gap: 4px;
  228. color: var(--text-secondary);
  229. font-size: 13px;
  230. text-decoration: none;
  231. }
  232. /* 商品网格 */
  233. .product-grid {
  234. display: grid;
  235. grid-template-columns: repeat(2, 1fr);
  236. gap: 12px;
  237. }
  238. .product-card {
  239. background: var(--bg-card);
  240. border-radius: 16px;
  241. overflow: hidden;
  242. box-shadow: var(--shadow);
  243. transition: transform 0.2s, box-shadow 0.2s;
  244. }
  245. .product-card:active {
  246. transform: scale(0.98);
  247. }
  248. .product-image {
  249. position: relative;
  250. height: 140px;
  251. background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
  252. display: flex;
  253. align-items: center;
  254. justify-content: center;
  255. font-size: 64px;
  256. }
  257. .product-tag {
  258. position: absolute;
  259. top: 8px;
  260. left: 8px;
  261. background: var(--primary);
  262. color: white;
  263. font-size: 10px;
  264. padding: 2px 8px;
  265. border-radius: 4px;
  266. font-weight: 500;
  267. }
  268. .product-tag.seckill {
  269. background: var(--accent);
  270. }
  271. .product-freshness {
  272. position: absolute;
  273. top: 8px;
  274. right: 8px;
  275. background: rgba(255,255,255,0.9);
  276. padding: 2px 6px;
  277. border-radius: 4px;
  278. font-size: 10px;
  279. color: var(--primary);
  280. font-weight: 500;
  281. }
  282. .product-info {
  283. padding: 12px;
  284. }
  285. .product-name {
  286. font-size: 14px;
  287. font-weight: 600;
  288. color: var(--text);
  289. margin-bottom: 4px;
  290. line-height: 1.4;
  291. display: -webkit-box;
  292. -webkit-line-clamp: 2;
  293. -webkit-box-orient: vertical;
  294. overflow: hidden;
  295. }
  296. .product-desc {
  297. font-size: 12px;
  298. color: var(--text-secondary);
  299. margin-bottom: 8px;
  300. }
  301. .product-bottom {
  302. display: flex;
  303. justify-content: space-between;
  304. align-items: flex-end;
  305. }
  306. .product-price {
  307. display: flex;
  308. align-items: baseline;
  309. gap: 2px;
  310. }
  311. .price-symbol {
  312. font-size: 12px;
  313. color: var(--accent);
  314. font-weight: 600;
  315. }
  316. .price-value {
  317. font-size: 18px;
  318. color: var(--accent);
  319. font-weight: 700;
  320. }
  321. .price-unit {
  322. font-size: 11px;
  323. color: var(--text-secondary);
  324. margin-left: 2px;
  325. }
  326. .price-original {
  327. font-size: 11px;
  328. color: var(--text-secondary);
  329. text-decoration: line-through;
  330. margin-left: 4px;
  331. }
  332. .product-add {
  333. width: 32px;
  334. height: 32px;
  335. border-radius: 50%;
  336. background: var(--primary);
  337. color: white;
  338. display: flex;
  339. align-items: center;
  340. justify-content: center;
  341. font-size: 20px;
  342. font-weight: 300;
  343. box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
  344. }
  345. /* 秒杀专区 */
  346. .seckill-section {
  347. background: var(--bg-card);
  348. margin: 16px;
  349. border-radius: 16px;
  350. padding: 16px;
  351. box-shadow: var(--shadow);
  352. }
  353. .seckill-header {
  354. display: flex;
  355. justify-content: space-between;
  356. align-items: center;
  357. margin-bottom: 16px;
  358. }
  359. .seckill-title {
  360. display: flex;
  361. align-items: center;
  362. gap: 8px;
  363. }
  364. .seckill-icon {
  365. font-size: 24px;
  366. }
  367. .seckill-title h3 {
  368. font-size: 16px;
  369. font-weight: 700;
  370. color: var(--accent);
  371. }
  372. .seckill-timer {
  373. display: flex;
  374. gap: 4px;
  375. align-items: center;
  376. }
  377. .timer-label {
  378. font-size: 12px;
  379. color: var(--text-secondary);
  380. margin-right: 4px;
  381. }
  382. .timer-block {
  383. background: var(--text);
  384. color: white;
  385. padding: 4px 6px;
  386. border-radius: 4px;
  387. font-size: 12px;
  388. font-weight: 600;
  389. min-width: 24px;
  390. text-align: center;
  391. }
  392. .timer-separator {
  393. color: var(--text);
  394. font-weight: 700;
  395. }
  396. .seckill-scroll {
  397. display: flex;
  398. gap: 12px;
  399. overflow-x: auto;
  400. padding-bottom: 8px;
  401. -webkit-overflow-scrolling: touch;
  402. scrollbar-width: none;
  403. }
  404. .seckill-scroll::-webkit-scrollbar {
  405. display: none;
  406. }
  407. .seckill-item {
  408. flex-shrink: 0;
  409. width: 100px;
  410. text-align: center;
  411. }
  412. .seckill-item-image {
  413. width: 100px;
  414. height: 100px;
  415. border-radius: 12px;
  416. background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
  417. display: flex;
  418. align-items: center;
  419. justify-content: center;
  420. font-size: 48px;
  421. margin-bottom: 8px;
  422. }
  423. .seckill-price {
  424. font-size: 14px;
  425. color: var(--accent);
  426. font-weight: 700;
  427. margin-bottom: 2px;
  428. }
  429. .seckill-original {
  430. font-size: 11px;
  431. color: var(--text-secondary);
  432. text-decoration: line-through;
  433. }
  434. /* 底部导航 */
  435. .tabbar {
  436. position: fixed;
  437. bottom: 0;
  438. left: 50%;
  439. transform: translateX(-50%);
  440. width: 100%;
  441. max-width: 430px;
  442. background: white;
  443. display: flex;
  444. justify-content: space-around;
  445. padding: 8px 0;
  446. padding-bottom: max(8px, env(safe-area-inset-bottom));
  447. box-shadow: 0 -4px 12px rgba(0,0,0,0.05);
  448. z-index: 100;
  449. }
  450. .tabbar-item {
  451. display: flex;
  452. flex-direction: column;
  453. align-items: center;
  454. gap: 4px;
  455. text-decoration: none;
  456. color: var(--text-secondary);
  457. padding: 4px 16px;
  458. }
  459. .tabbar-item.active {
  460. color: var(--primary);
  461. }
  462. .tabbar-item svg {
  463. width: 24px;
  464. height: 24px;
  465. }
  466. .tabbar-item span {
  467. font-size: 11px;
  468. font-weight: 500;
  469. }
  470. /* 浮动购物车 */
  471. .floating-cart {
  472. position: fixed;
  473. bottom: 90px;
  474. right: calc(50% - 185px);
  475. width: 56px;
  476. height: 56px;
  477. border-radius: 50%;
  478. background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  479. color: white;
  480. display: flex;
  481. align-items: center;
  482. justify-content: center;
  483. box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
  484. z-index: 99;
  485. }
  486. .floating-cart svg {
  487. width: 28px;
  488. height: 28px;
  489. }
  490. .cart-badge {
  491. position: absolute;
  492. top: -4px;
  493. right: -4px;
  494. background: var(--accent);
  495. color: white;
  496. font-size: 11px;
  497. font-weight: 600;
  498. min-width: 20px;
  499. height: 20px;
  500. border-radius: 10px;
  501. display: flex;
  502. align-items: center;
  503. justify-content: center;
  504. padding: 0 6px;
  505. }
  506. /* 标签页 */
  507. .filter-tabs {
  508. display: flex;
  509. gap: 8px;
  510. padding: 0 16px;
  511. margin-bottom: 16px;
  512. overflow-x: auto;
  513. -webkit-overflow-scrolling: touch;
  514. }
  515. .filter-tabs::-webkit-scrollbar {
  516. display: none;
  517. }
  518. .filter-tab {
  519. padding: 8px 16px;
  520. border-radius: 20px;
  521. font-size: 14px;
  522. font-weight: 500;
  523. white-space: nowrap;
  524. background: var(--bg-card);
  525. color: var(--text-secondary);
  526. border: 1px solid var(--border);
  527. }
  528. .filter-tab.active {
  529. background: var(--primary-light);
  530. color: var(--primary);
  531. border-color: var(--primary);
  532. }
  533. </style>
  534. </head>
  535. <body>
  536. <div class="phone-container">
  537. <!-- 顶部导航 -->
  538. <div class="header">
  539. <div class="header-top">
  540. <div class="location">
  541. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  542. <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/>
  543. <circle cx="12" cy="10" r="3"/>
  544. </svg>
  545. <span>深圳市南山区</span>
  546. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px">
  547. <polyline points="6 9 12 15 18 9"/>
  548. </svg>
  549. </div>
  550. <div class="header-actions">
  551. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  552. <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
  553. <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
  554. </svg>
  555. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  556. <circle cx="11" cy="11" r="8"/>
  557. <path d="m21 21-4.35-4.35"/>
  558. </svg>
  559. </div>
  560. </div>
  561. <div class="search-bar">
  562. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  563. <circle cx="11" cy="11" r="8"/>
  564. <path d="m21 21-4.35-4.35"/>
  565. </svg>
  566. <input type="text" placeholder="搜索新鲜蔬菜、水果、肉类...">
  567. </div>
  568. </div>
  569. <!-- Banner轮播 -->
  570. <div class="banner">
  571. <img src="https://images.unsplash.com/photo-1542838132-92c53300491e?w=800&h=400&fit=crop" alt="生鲜特惠">
  572. <div class="banner-overlay">
  573. <span class="banner-tag">限时特惠</span>
  574. <div class="banner-title">新鲜有机蔬菜 满59减15</div>
  575. </div>
  576. <div class="banner-dots">
  577. <span class="banner-dot active"></span>
  578. <span class="banner-dot"></span>
  579. <span class="banner-dot"></span>
  580. </div>
  581. </div>
  582. <!-- 分类入口 -->
  583. <div class="categories">
  584. <a href="#" class="category-item">
  585. <div class="category-icon vegetable">&#127793;</div>
  586. <span class="category-name">新鲜蔬菜</span>
  587. </a>
  588. <a href="#" class="category-item">
  589. <div class="category-icon fruit">&#127822;</div>
  590. <span class="category-name">时令水果</span>
  591. </a>
  592. <a href="#" class="category-item">
  593. <div class="category-icon meat">&#129385;</div>
  594. <span class="category-name">肉禽蛋类</span>
  595. </a>
  596. <a href="#" class="category-item">
  597. <div class="category-icon seafood">&#129424;</div>
  598. <span class="category-name">水产海鲜</span>
  599. </a>
  600. <a href="#" class="category-item">
  601. <div class="category-icon oil">&#129715;</div>
  602. <span class="category-name">粮油调味</span>
  603. </a>
  604. </div>
  605. <!-- 秒杀专区 -->
  606. <div class="seckill-section">
  607. <div class="seckill-header">
  608. <div class="seckill-title">
  609. <span class="seckill-icon">&#9201;</span>
  610. <h3>限时秒杀</h3>
  611. <span style="font-size:12px;color:var(--text-secondary)">距结束</span>
  612. </div>
  613. <div class="seckill-timer">
  614. <span class="timer-label"></span>
  615. <span class="timer-block">02</span>
  616. <span class="timer-separator">:</span>
  617. <span class="timer-block">35</span>
  618. <span class="timer-separator">:</span>
  619. <span class="timer-block">48</span>
  620. </div>
  621. </div>
  622. <div class="seckill-scroll">
  623. <div class="seckill-item">
  624. <div class="seckill-item-image">&#127793;</div>
  625. <div class="seckill-price">&#165;1.98</div>
  626. <div class="seckill-original">&#165;3.50</div>
  627. </div>
  628. <div class="seckill-item">
  629. <div class="seckill-item-image">&#127822;</div>
  630. <div class="seckill-price">&#165;4.99</div>
  631. <div class="seckill-original">&#165;8.00</div>
  632. </div>
  633. <div class="seckill-item">
  634. <div class="seckill-item-image">&#129385;</div>
  635. <div class="seckill-price">&#165;15.8</div>
  636. <div class="seckill-original">&#165;22.00</div>
  637. </div>
  638. <div class="seckill-item">
  639. <div class="seckill-item-image">&#129388;</div>
  640. <div class="seckill-price">&#165;8.80</div>
  641. <div class="seckill-original">&#165;12.00</div>
  642. </div>
  643. </div>
  644. </div>
  645. <!-- 为您推荐 -->
  646. <div class="section">
  647. <div class="section-header">
  648. <div class="section-title">
  649. <h2>为您推荐</h2>
  650. <span class="badge">精选</span>
  651. </div>
  652. <a href="#" class="section-more">
  653. 查看更多
  654. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px">
  655. <polyline points="9 18 15 12 9 6"/>
  656. </svg>
  657. </a>
  658. </div>
  659. </div>
  660. <div class="filter-tabs">
  661. <div class="filter-tab active">热门推荐</div>
  662. <div class="filter-tab">今日特惠</div>
  663. <div class="filter-tab">有机蔬菜</div>
  664. <div class="filter-tab">进口水果</div>
  665. <div class="filter-tab">新鲜肉类</div>
  666. </div>
  667. <div class="section" style="margin-top:-8px">
  668. <div class="product-grid">
  669. <div class="product-card">
  670. <div class="product-image">
  671. &#127793;
  672. <span class="product-tag">今日鲜</span>
  673. <span class="product-freshness">24H内采摘</span>
  674. </div>
  675. <div class="product-info">
  676. <div class="product-name">云南高原有机小青菜 约500g</div>
  677. <div class="product-desc">新鲜直达 农家种植</div>
  678. <div class="product-bottom">
  679. <div class="product-price">
  680. <span class="price-symbol">&#165;</span>
  681. <span class="price-value">8.80</span>
  682. <span class="price-unit">/500g</span>
  683. </div>
  684. <div class="product-add">+</div>
  685. </div>
  686. </div>
  687. </div>
  688. <div class="product-card">
  689. <div class="product-image">
  690. &#127822;
  691. <span class="product-tag seckill">秒杀</span>
  692. </div>
  693. <div class="product-info">
  694. <div class="product-name">泰国进口金枕榴莲 约2斤</div>
  695. <div class="product-desc">果肉饱满 香甜可口</div>
  696. <div class="product-bottom">
  697. <div class="product-price">
  698. <span class="price-symbol">&#165;</span>
  699. <span class="price-value">39.90</span>
  700. <span class="price-original">59.90</span>
  701. </div>
  702. <div class="product-add">+</div>
  703. </div>
  704. </div>
  705. </div>
  706. <div class="product-card">
  707. <div class="product-image">
  708. &#129385;
  709. <span class="product-tag">热卖</span>
  710. </div>
  711. <div class="product-info">
  712. <div class="product-name">土鸡蛋 30枚装 约1.5kg</div>
  713. <div class="product-desc">散养土鸡 营养丰富</div>
  714. <div class="product-bottom">
  715. <div class="product-price">
  716. <span class="price-symbol">&#165;</span>
  717. <span class="price-value">26.80</span>
  718. <span class="price-unit">/盒</span>
  719. </div>
  720. <div class="product-add">+</div>
  721. </div>
  722. </div>
  723. </div>
  724. <div class="product-card">
  725. <div class="product-image">
  726. &#129388;
  727. <span class="product-tag">新品</span>
  728. </div>
  729. <div class="product-info">
  730. <div class="product-name">鲜活大闸蟹 公母各3只 约1.2kg</div>
  731. <div class="product-desc">阳澄湖产区 当日捕捞</div>
  732. <div class="product-bottom">
  733. <div class="product-price">
  734. <span class="price-symbol">&#165;</span>
  735. <span class="price-value">128.00</span>
  736. <span class="price-unit">/份</span>
  737. </div>
  738. <div class="product-add">+</div>
  739. </div>
  740. </div>
  741. </div>
  742. </div>
  743. </div>
  744. <!-- 浮动购物车 -->
  745. <div class="floating-cart">
  746. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  747. <circle cx="9" cy="21" r="1"/>
  748. <circle cx="20" cy="21" r="1"/>
  749. <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
  750. </svg>
  751. <span class="cart-badge">3</span>
  752. </div>
  753. <!-- 底部导航 -->
  754. <nav class="tabbar">
  755. <a href="#" class="tabbar-item active">
  756. <svg viewBox="0 0 24 24" fill="currentColor">
  757. <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  758. </svg>
  759. <span>首页</span>
  760. </a>
  761. <a href="#" class="tabbar-item">
  762. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  763. <rect x="3" y="3" width="7" height="7"/>
  764. <rect x="14" y="3" width="7" height="7"/>
  765. <rect x="14" y="14" width="7" height="7"/>
  766. <rect x="3" y="14" width="7" height="7"/>
  767. </svg>
  768. <span>分类</span>
  769. </a>
  770. <a href="#" class="tabbar-item">
  771. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  772. <circle cx="9" cy="21" r="1"/>
  773. <circle cx="20" cy="21" r="1"/>
  774. <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
  775. </svg>
  776. <span>购物车</span>
  777. </a>
  778. <a href="#" class="tabbar-item">
  779. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  780. <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
  781. <circle cx="12" cy="7" r="4"/>
  782. </svg>
  783. <span>我的</span>
  784. </a>
  785. </nav>
  786. </div>
  787. </body>
  788. </html>