style-5-warm.html 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008
  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;600;700&display=swap" rel="stylesheet">
  9. <style>
  10. * {
  11. margin: 0;
  12. padding: 0;
  13. box-sizing: border-box;
  14. }
  15. :root {
  16. --primary: #F5A623;
  17. --primary-light: #FEF3E2;
  18. --secondary: #8B5CF6;
  19. --secondary-light: #EDE9FE;
  20. --success: #10B981;
  21. --success-light: #D1FAE5;
  22. --accent: #EC4899;
  23. --accent-light: #FCE7F3;
  24. --bg: #FFFDF9;
  25. --bg-card: #FFFFFF;
  26. --text: #374151;
  27. --text-secondary: #6B7280;
  28. --text-light: #9CA3AF;
  29. --border: #F3E8E0;
  30. }
  31. body {
  32. font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  33. background: var(--bg);
  34. color: var(--text);
  35. min-height: 100vh;
  36. padding-bottom: 80px;
  37. }
  38. .phone-container {
  39. max-width: 430px;
  40. margin: 0 auto;
  41. background: var(--bg);
  42. min-height: 100vh;
  43. }
  44. /* 温馨头部 */
  45. .warm-header {
  46. background: linear-gradient(180deg, var(--primary-light) 0%, var(--bg) 100%);
  47. padding: 16px 20px;
  48. padding-top: max(16px, env(safe-area-inset-top));
  49. }
  50. .header-main {
  51. display: flex;
  52. justify-content: space-between;
  53. align-items: center;
  54. margin-bottom: 16px;
  55. }
  56. .header-left {
  57. display: flex;
  58. align-items: center;
  59. gap: 10px;
  60. }
  61. .logo-icon {
  62. width: 42px;
  63. height: 42px;
  64. background: white;
  65. border-radius: 12px;
  66. display: flex;
  67. align-items: center;
  68. justify-content: center;
  69. font-size: 24px;
  70. box-shadow: 0 2px 8px rgba(245,166,35,0.15);
  71. }
  72. .logo-text {
  73. font-size: 20px;
  74. font-weight: 700;
  75. color: var(--text);
  76. }
  77. .logo-text span {
  78. color: var(--primary);
  79. }
  80. .header-right {
  81. display: flex;
  82. gap: 16px;
  83. }
  84. .header-right svg {
  85. width: 24px;
  86. height: 24px;
  87. color: var(--text-secondary);
  88. }
  89. .search-wrapper {
  90. position: relative;
  91. }
  92. .search-box {
  93. display: flex;
  94. align-items: center;
  95. background: white;
  96. border-radius: 24px;
  97. padding: 12px 18px;
  98. gap: 10px;
  99. box-shadow: 0 2px 12px rgba(245,166,35,0.1);
  100. }
  101. .search-box svg {
  102. width: 20px;
  103. height: 20px;
  104. color: var(--text-light);
  105. }
  106. .search-box input {
  107. flex: 1;
  108. border: none;
  109. outline: none;
  110. font-size: 14px;
  111. background: transparent;
  112. }
  113. /* 用户卡片 */
  114. .user-banner {
  115. background: linear-gradient(135deg, var(--primary) 0%, #F7B955 100%);
  116. margin: 0 20px 20px;
  117. border-radius: 20px;
  118. padding: 20px;
  119. color: white;
  120. position: relative;
  121. overflow: hidden;
  122. }
  123. .user-banner::before {
  124. content: '';
  125. position: absolute;
  126. top: -30px;
  127. right: -30px;
  128. width: 120px;
  129. height: 120px;
  130. border-radius: 50%;
  131. background: rgba(255,255,255,0.15);
  132. }
  133. .user-banner::after {
  134. content: '';
  135. position: absolute;
  136. bottom: -40px;
  137. left: 20px;
  138. width: 80px;
  139. height: 80px;
  140. border-radius: 50%;
  141. background: rgba(255,255,255,0.1);
  142. }
  143. .user-info {
  144. display: flex;
  145. align-items: center;
  146. gap: 14px;
  147. position: relative;
  148. z-index: 1;
  149. }
  150. .user-avatar {
  151. width: 56px;
  152. height: 56px;
  153. border-radius: 50%;
  154. background: white;
  155. display: flex;
  156. align-items: center;
  157. justify-content: center;
  158. font-size: 28px;
  159. }
  160. .user-details {
  161. flex: 1;
  162. }
  163. .user-name {
  164. font-size: 18px;
  165. font-weight: 600;
  166. margin-bottom: 2px;
  167. }
  168. .user-welcome {
  169. font-size: 12px;
  170. opacity: 0.9;
  171. }
  172. .user-stats {
  173. display: flex;
  174. gap: 24px;
  175. margin-top: 16px;
  176. position: relative;
  177. z-index: 1;
  178. }
  179. .stat-item {
  180. text-align: center;
  181. }
  182. .stat-value {
  183. font-size: 18px;
  184. font-weight: 700;
  185. }
  186. .stat-label {
  187. font-size: 11px;
  188. opacity: 0.85;
  189. margin-top: 2px;
  190. }
  191. /* 快捷入口 */
  192. .quick-nav {
  193. display: grid;
  194. grid-template-columns: repeat(4, 1fr);
  195. gap: 12px;
  196. padding: 0 20px;
  197. margin-bottom: 24px;
  198. }
  199. .quick-item {
  200. display: flex;
  201. flex-direction: column;
  202. align-items: center;
  203. gap: 8px;
  204. text-decoration: none;
  205. }
  206. .quick-icon {
  207. width: 52px;
  208. height: 52px;
  209. border-radius: 16px;
  210. display: flex;
  211. align-items: center;
  212. justify-content: center;
  213. font-size: 24px;
  214. }
  215. .quick-icon.order { background: var(--success-light); }
  216. .quick-icon.coupon { background: var(--primary-light); }
  217. .quick-icon.heart { background: var(--accent-light); }
  218. .quick-icon.location { background: var(--secondary-light); }
  219. .quick-label {
  220. font-size: 12px;
  221. color: var(--text);
  222. font-weight: 500;
  223. }
  224. /* Banner */
  225. .home-banner {
  226. margin: 0 20px 24px;
  227. border-radius: 20px;
  228. overflow: hidden;
  229. position: relative;
  230. height: 140px;
  231. }
  232. .home-banner img {
  233. width: 100%;
  234. height: 100%;
  235. object-fit: cover;
  236. }
  237. .banner-content {
  238. position: absolute;
  239. inset: 0;
  240. display: flex;
  241. flex-direction: column;
  242. justify-content: center;
  243. padding: 20px 24px;
  244. background: linear-gradient(135deg, rgba(245,166,35,0.85), rgba(247,185,85,0.75));
  245. }
  246. .banner-title {
  247. font-size: 22px;
  248. font-weight: 700;
  249. color: white;
  250. margin-bottom: 6px;
  251. }
  252. .banner-subtitle {
  253. font-size: 14px;
  254. color: rgba(255,255,255,0.9);
  255. }
  256. .banner-btn {
  257. display: inline-block;
  258. background: white;
  259. color: var(--primary);
  260. padding: 8px 20px;
  261. border-radius: 20px;
  262. font-size: 13px;
  263. font-weight: 600;
  264. margin-top: 12px;
  265. width: fit-content;
  266. }
  267. /* 分类选择 */
  268. .category-tabs {
  269. display: flex;
  270. gap: 8px;
  271. padding: 0 20px;
  272. overflow-x: auto;
  273. margin-bottom: 20px;
  274. -webkit-overflow-scrolling: touch;
  275. }
  276. .category-tabs::-webkit-scrollbar {
  277. display: none;
  278. }
  279. .category-tab {
  280. flex-shrink: 0;
  281. padding: 10px 18px;
  282. border-radius: 24px;
  283. font-size: 14px;
  284. font-weight: 500;
  285. background: var(--bg-card);
  286. color: var(--text-secondary);
  287. border: 1.5px solid var(--border);
  288. }
  289. .category-tab.active {
  290. background: var(--primary);
  291. color: white;
  292. border-color: var(--primary);
  293. }
  294. /* 精选推荐 */
  295. .featured-section {
  296. padding: 0 20px;
  297. margin-bottom: 24px;
  298. }
  299. .section-header {
  300. display: flex;
  301. justify-content: space-between;
  302. align-items: center;
  303. margin-bottom: 16px;
  304. }
  305. .section-title {
  306. display: flex;
  307. align-items: center;
  308. gap: 8px;
  309. }
  310. .section-title h2 {
  311. font-size: 18px;
  312. font-weight: 700;
  313. color: var(--text);
  314. }
  315. .section-title .emoji {
  316. font-size: 20px;
  317. }
  318. .section-more {
  319. font-size: 13px;
  320. color: var(--text-light);
  321. text-decoration: none;
  322. font-weight: 500;
  323. }
  324. .featured-scroll {
  325. display: flex;
  326. gap: 14px;
  327. overflow-x: auto;
  328. padding-bottom: 8px;
  329. -webkit-overflow-scrolling: touch;
  330. }
  331. .featured-scroll::-webkit-scrollbar {
  332. display: none;
  333. }
  334. .featured-card {
  335. flex-shrink: 0;
  336. width: 150px;
  337. background: var(--bg-card);
  338. border-radius: 18px;
  339. overflow: hidden;
  340. box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  341. }
  342. .featured-img {
  343. height: 130px;
  344. background: linear-gradient(135deg, #FEF9F3, #FDF6ED);
  345. display: flex;
  346. align-items: center;
  347. justify-content: center;
  348. font-size: 56px;
  349. position: relative;
  350. }
  351. .featured-badge {
  352. position: absolute;
  353. top: 10px;
  354. left: 10px;
  355. padding: 4px 10px;
  356. border-radius: 10px;
  357. font-size: 10px;
  358. font-weight: 600;
  359. }
  360. .featured-badge.pick {
  361. background: var(--primary);
  362. color: white;
  363. }
  364. .featured-badge.fresh {
  365. background: var(--success);
  366. color: white;
  367. }
  368. .featured-info {
  369. padding: 14px;
  370. }
  371. .featured-name {
  372. font-size: 14px;
  373. font-weight: 600;
  374. color: var(--text);
  375. margin-bottom: 6px;
  376. line-height: 1.4;
  377. }
  378. .featured-meta {
  379. display: flex;
  380. justify-content: space-between;
  381. align-items: center;
  382. }
  383. .featured-price {
  384. display: flex;
  385. align-items: baseline;
  386. gap: 2px;
  387. }
  388. .price-symbol {
  389. font-size: 11px;
  390. color: var(--accent);
  391. font-weight: 600;
  392. }
  393. .price-value {
  394. font-size: 16px;
  395. color: var(--accent);
  396. font-weight: 700;
  397. }
  398. .featured-unit {
  399. font-size: 11px;
  400. color: var(--text-light);
  401. }
  402. .add-btn {
  403. width: 30px;
  404. height: 30px;
  405. border-radius: 50%;
  406. background: var(--primary);
  407. color: white;
  408. display: flex;
  409. align-items: center;
  410. justify-content: center;
  411. font-size: 18px;
  412. font-weight: 400;
  413. box-shadow: 0 2px 8px rgba(245,166,35,0.3);
  414. }
  415. /* 商品列表 */
  416. .product-section {
  417. padding: 0 20px;
  418. margin-bottom: 24px;
  419. }
  420. .product-list {
  421. display: flex;
  422. flex-direction: column;
  423. gap: 16px;
  424. }
  425. .product-item {
  426. display: flex;
  427. background: var(--bg-card);
  428. border-radius: 18px;
  429. padding: 16px;
  430. gap: 16px;
  431. box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  432. }
  433. .product-img {
  434. width: 100px;
  435. height: 100px;
  436. border-radius: 16px;
  437. background: linear-gradient(135deg, #FEF9F3, #FDF6ED);
  438. display: flex;
  439. align-items: center;
  440. justify-content: center;
  441. font-size: 48px;
  442. flex-shrink: 0;
  443. }
  444. .product-content {
  445. flex: 1;
  446. display: flex;
  447. flex-direction: column;
  448. justify-content: space-between;
  449. }
  450. .product-header {
  451. display: flex;
  452. justify-content: space-between;
  453. align-items: flex-start;
  454. }
  455. .product-name {
  456. font-size: 15px;
  457. font-weight: 600;
  458. color: var(--text);
  459. line-height: 1.4;
  460. margin-right: 8px;
  461. }
  462. .product-tag {
  463. padding: 4px 10px;
  464. border-radius: 8px;
  465. font-size: 10px;
  466. font-weight: 600;
  467. flex-shrink: 0;
  468. }
  469. .product-tag.farm {
  470. background: var(--success-light);
  471. color: var(--success);
  472. }
  473. .product-tag.natural {
  474. background: var(--secondary-light);
  475. color: var(--secondary);
  476. }
  477. .product-desc {
  478. font-size: 13px;
  479. color: var(--text-secondary);
  480. margin-top: 6px;
  481. }
  482. .product-bottom {
  483. display: flex;
  484. justify-content: space-between;
  485. align-items: center;
  486. margin-top: 8px;
  487. }
  488. .product-price {
  489. display: flex;
  490. align-items: baseline;
  491. gap: 2px;
  492. }
  493. .product-price .symbol {
  494. font-size: 12px;
  495. color: var(--accent);
  496. font-weight: 600;
  497. }
  498. .product-price .value {
  499. font-size: 18px;
  500. color: var(--accent);
  501. font-weight: 700;
  502. }
  503. .product-price .unit {
  504. font-size: 11px;
  505. color: var(--text-light);
  506. }
  507. .product-actions {
  508. display: flex;
  509. gap: 10px;
  510. align-items: center;
  511. }
  512. .product-add {
  513. width: 34px;
  514. height: 34px;
  515. border-radius: 50%;
  516. background: var(--primary);
  517. color: white;
  518. display: flex;
  519. align-items: center;
  520. justify-content: center;
  521. font-size: 20px;
  522. font-weight: 400;
  523. }
  524. /* 底部导航 */
  525. .tabbar {
  526. position: fixed;
  527. bottom: 0;
  528. left: 50%;
  529. transform: translateX(-50%);
  530. width: 100%;
  531. max-width: 430px;
  532. background: var(--bg-card);
  533. display: flex;
  534. justify-content: space-around;
  535. padding: 10px 0;
  536. padding-bottom: max(10px, env(safe-area-inset-bottom));
  537. box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
  538. z-index: 100;
  539. }
  540. .tabbar-item {
  541. display: flex;
  542. flex-direction: column;
  543. align-items: center;
  544. gap: 4px;
  545. text-decoration: none;
  546. color: var(--text-light);
  547. padding: 6px 20px;
  548. }
  549. .tabbar-item.active {
  550. color: var(--primary);
  551. }
  552. .tabbar-item svg {
  553. width: 24px;
  554. height: 24px;
  555. }
  556. .tabbar-item span {
  557. font-size: 11px;
  558. font-weight: 500;
  559. }
  560. /* 浮动购物车 */
  561. .floating-cart {
  562. position: fixed;
  563. bottom: 90px;
  564. right: calc(50% - 185px);
  565. width: 54px;
  566. height: 54px;
  567. border-radius: 50%;
  568. background: linear-gradient(135deg, var(--primary), #F7B955);
  569. color: white;
  570. display: flex;
  571. align-items: center;
  572. justify-content: center;
  573. box-shadow: 0 6px 20px rgba(245,166,35,0.35);
  574. z-index: 99;
  575. }
  576. .floating-cart svg {
  577. width: 26px;
  578. height: 26px;
  579. }
  580. .cart-badge {
  581. position: absolute;
  582. top: -2px;
  583. right: -2px;
  584. background: var(--accent);
  585. color: white;
  586. font-size: 11px;
  587. font-weight: 700;
  588. min-width: 20px;
  589. height: 20px;
  590. border-radius: 10px;
  591. display: flex;
  592. align-items: center;
  593. justify-content: center;
  594. }
  595. </style>
  596. </head>
  597. <body>
  598. <div class="phone-container">
  599. <!-- 头部 -->
  600. <div class="warm-header">
  601. <div class="header-main">
  602. <div class="header-left">
  603. <div class="logo-icon">&#127807;</div>
  604. <div class="logo-text">安心<span>菜</span></div>
  605. </div>
  606. <div class="header-right">
  607. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  608. <circle cx="11" cy="11" r="8"/>
  609. <path d="m21 21-4.35-4.35"/>
  610. </svg>
  611. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  612. <path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/>
  613. <path d="M13.73 21a2 2 0 0 1-3.46 0"/>
  614. </svg>
  615. </div>
  616. </div>
  617. <div class="search-wrapper">
  618. <div class="search-box">
  619. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  620. <circle cx="11" cy="11" r="8"/>
  621. <path d="m21 21-4.35-4.35"/>
  622. </svg>
  623. <input type="text" placeholder="搜索你想要的食材...">
  624. </div>
  625. </div>
  626. </div>
  627. <!-- 用户卡片 -->
  628. <div class="user-banner">
  629. <div class="user-info">
  630. <div class="user-avatar">&#128522;</div>
  631. <div class="user-details">
  632. <div class="user-name">张阿姨</div>
  633. <div class="user-welcome">今天想吃点什么呢?</div>
  634. </div>
  635. </div>
  636. <div class="user-stats">
  637. <div class="stat-item">
  638. <div class="stat-value">15</div>
  639. <div class="stat-label">全部订单</div>
  640. </div>
  641. <div class="stat-item">
  642. <div class="stat-value">3</div>
  643. <div class="stat-label">待收货</div>
  644. </div>
  645. <div class="stat-item">
  646. <div class="stat-value">&#165;58</div>
  647. <div class="stat-label">优惠券</div>
  648. </div>
  649. </div>
  650. </div>
  651. <!-- 快捷导航 -->
  652. <div class="quick-nav">
  653. <a href="#" class="quick-item">
  654. <div class="quick-icon order">&#128203;</div>
  655. <span class="quick-label">我的订单</span>
  656. </a>
  657. <a href="#" class="quick-item">
  658. <div class="quick-icon coupon">&#127873;</div>
  659. <span class="quick-label">优惠券</span>
  660. </a>
  661. <a href="#" class="quick-item">
  662. <div class="quick-icon heart">&#10084;</div>
  663. <span class="quick-label">我的收藏</span>
  664. </a>
  665. <a href="#" class="quick-item">
  666. <div class="quick-icon location">&#128205;</div>
  667. <span class="quick-label">地址管理</span>
  668. </a>
  669. </div>
  670. <!-- Banner -->
  671. <div class="home-banner">
  672. <img src="https://images.unsplash.com/photo-1506484381205-f7945b51d469?w=800&h=400&fit=crop" alt="放心食材">
  673. <div class="banner-content">
  674. <div class="banner-title">放心食材</div>
  675. <div class="banner-subtitle">来自优质农场,新鲜直达</div>
  676. <div class="banner-btn">立即选购</div>
  677. </div>
  678. </div>
  679. <!-- 分类选择 -->
  680. <div class="category-tabs">
  681. <div class="category-tab active">为你推荐</div>
  682. <div class="category-tab">时令蔬菜</div>
  683. <div class="category-tab">新鲜水果</div>
  684. <div class="category-tab">肉禽蛋类</div>
  685. <div class="category-tab">水产海鲜</div>
  686. <div class="category-tab">粮油调味</div>
  687. </div>
  688. <!-- 精选推荐 -->
  689. <div class="featured-section">
  690. <div class="section-header">
  691. <div class="section-title">
  692. <span class="emoji">&#127793;</span>
  693. <h2>今日精选</h2>
  694. </div>
  695. <a href="#" class="section-more">更多 &#8250;</a>
  696. </div>
  697. <div class="featured-scroll">
  698. <div class="featured-card">
  699. <div class="featured-img">
  700. &#127793;
  701. <span class="featured-badge pick">精选</span>
  702. </div>
  703. <div class="featured-info">
  704. <div class="featured-name">有机小白菜 约500g</div>
  705. <div class="featured-meta">
  706. <div class="featured-price">
  707. <span class="price-symbol">&#165;</span>
  708. <span class="price-value">6.80</span>
  709. <span class="featured-unit">/500g</span>
  710. </div>
  711. <div class="add-btn">+</div>
  712. </div>
  713. </div>
  714. </div>
  715. <div class="featured-card">
  716. <div class="featured-img">
  717. &#127822;
  718. <span class="featured-badge fresh">新鲜</span>
  719. </div>
  720. <div class="featured-info">
  721. <div class="featured-name">红富士苹果 约1kg</div>
  722. <div class="featured-meta">
  723. <div class="featured-price">
  724. <span class="price-symbol">&#165;</span>
  725. <span class="price-value">12.80</span>
  726. <span class="featured-unit">/kg</span>
  727. </div>
  728. <div class="add-btn">+</div>
  729. </div>
  730. </div>
  731. </div>
  732. <div class="featured-card">
  733. <div class="featured-img">
  734. &#127805;
  735. <span class="featured-badge pick">精选</span>
  736. </div>
  737. <div class="featured-info">
  738. <div class="featured-name">圣女果 约500g</div>
  739. <div class="featured-meta">
  740. <div class="featured-price">
  741. <span class="price-symbol">&#165;</span>
  742. <span class="price-value">9.90</span>
  743. <span class="featured-unit">/份</span>
  744. </div>
  745. <div class="add-btn">+</div>
  746. </div>
  747. </div>
  748. </div>
  749. <div class="featured-card">
  750. <div class="featured-img">
  751. &#129389;
  752. <span class="featured-badge fresh">新鲜</span>
  753. </div>
  754. <div class="featured-info">
  755. <div class="featured-name">土鸡蛋 20枚</div>
  756. <div class="featured-meta">
  757. <div class="featured-price">
  758. <span class="price-symbol">&#165;</span>
  759. <span class="price-value">22.00</span>
  760. <span class="featured-unit">/盒</span>
  761. </div>
  762. <div class="add-btn">+</div>
  763. </div>
  764. </div>
  765. </div>
  766. </div>
  767. </div>
  768. <!-- 商品列表 -->
  769. <div class="product-section">
  770. <div class="section-header">
  771. <div class="section-title">
  772. <span class="emoji">&#128722;</span>
  773. <h2>猜你喜欢</h2>
  774. </div>
  775. </div>
  776. <div class="product-list">
  777. <div class="product-item">
  778. <div class="product-img">&#129388;</div>
  779. <div class="product-content">
  780. <div class="product-header">
  781. <div class="product-name">鲜活大闸蟹 4只装 约600g</div>
  782. <span class="product-tag farm">农场直供</span>
  783. </div>
  784. <div class="product-desc">阳澄湖产区 当日捕捞送达</div>
  785. <div class="product-bottom">
  786. <div class="product-price">
  787. <span class="symbol">&#165;</span>
  788. <span class="value">88.00</span>
  789. <span class="unit">/份</span>
  790. </div>
  791. <div class="product-actions">
  792. <div class="product-add">+</div>
  793. </div>
  794. </div>
  795. </div>
  796. </div>
  797. <div class="product-item">
  798. <div class="product-img">&#129476;</div>
  799. <div class="product-content">
  800. <div class="product-header">
  801. <div class="product-name">澳洲进口牛腩 约500g</div>
  802. <span class="product-tag natural">天然</span>
  803. </div>
  804. <div class="product-desc">谷饲喂养 肉质鲜嫩多汁</div>
  805. <div class="product-bottom">
  806. <div class="product-price">
  807. <span class="symbol">&#165;</span>
  808. <span class="value">42.80</span>
  809. <span class="unit">/份</span>
  810. </div>
  811. <div class="product-actions">
  812. <div class="product-add">+</div>
  813. </div>
  814. </div>
  815. </div>
  816. </div>
  817. <div class="product-item">
  818. <div class="product-img">&#127815;</div>
  819. <div class="product-content">
  820. <div class="product-header">
  821. <div class="product-name">泰国进口金枕榴莲 约2斤</div>
  822. <span class="product-tag farm">进口</span>
  823. </div>
  824. <div class="product-desc">果肉饱满 香甜浓郁 品质保证</div>
  825. <div class="product-bottom">
  826. <div class="product-price">
  827. <span class="symbol">&#165;</span>
  828. <span class="value">58.00</span>
  829. <span class="unit">/份</span>
  830. </div>
  831. <div class="product-actions">
  832. <div class="product-add">+</div>
  833. </div>
  834. </div>
  835. </div>
  836. </div>
  837. <div class="product-item">
  838. <div class="product-img">&#127804;</div>
  839. <div class="product-content">
  840. <div class="product-header">
  841. <div class="product-name">云南高原娃娃菜 约600g</div>
  842. <span class="product-tag natural">有机</span>
  843. </div>
  844. <div class="product-desc">新鲜采摘 产地直发 健康蔬菜</div>
  845. <div class="product-bottom">
  846. <div class="product-price">
  847. <span class="symbol">&#165;</span>
  848. <span class="value">7.80</span>
  849. <span class="unit">/份</span>
  850. </div>
  851. <div class="product-actions">
  852. <div class="product-add">+</div>
  853. </div>
  854. </div>
  855. </div>
  856. </div>
  857. </div>
  858. </div>
  859. <!-- 浮动购物车 -->
  860. <div class="floating-cart">
  861. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  862. <circle cx="9" cy="21" r="1"/>
  863. <circle cx="20" cy="21" r="1"/>
  864. <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
  865. </svg>
  866. <span class="cart-badge">4</span>
  867. </div>
  868. <!-- 底部导航 -->
  869. <nav class="tabbar">
  870. <a href="#" class="tabbar-item active">
  871. <svg viewBox="0 0 24 24" fill="currentColor">
  872. <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  873. </svg>
  874. <span>首页</span>
  875. </a>
  876. <a href="#" class="tabbar-item">
  877. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  878. <rect x="3" y="3" width="7" height="7"/>
  879. <rect x="14" y="3" width="7" height="7"/>
  880. <rect x="14" y="14" width="7" height="7"/>
  881. <rect x="3" y="14" width="7" height="7"/>
  882. </svg>
  883. <span>分类</span>
  884. </a>
  885. <a href="#" class="tabbar-item">
  886. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  887. <circle cx="9" cy="21" r="1"/>
  888. <circle cx="20" cy="21" r="1"/>
  889. <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
  890. </svg>
  891. <span>购物车</span>
  892. </a>
  893. <a href="#" class="tabbar-item">
  894. <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
  895. <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
  896. <circle cx="12" cy="7" r="4"/>
  897. </svg>
  898. <span>我的</span>
  899. </a>
  900. </nav>
  901. </div>
  902. </body>
  903. </html>