index.html · 约 3765 字符
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,maximum-scale=1,user-scalable=no">
6<title>西瓜外卖 - 主页</title>
7<link rel="stylesheet" href="css/style.css">
8</head>
9<body>
10<div class="phone">
11 <header class="topbar"><div class="t" style="flex:1;text-align:center">西瓜外卖 - 主页</div></header>
12 <main class="screen"><div class="search">🔍 搜索美食、商家、商品</div>
13<div class="catgrid">
14<div class="c"><div class="ic" style="background:#F0E6FF">🍉</div><span>鲜果</span></div>
15<div class="c"><div class="ic" style="background:#FDE6F0">🥗</div><span>沙拉</span></div>
16<div class="c"><div class="ic" style="background:#E6FFF6">🍢</div><span>烧烤</span></div>
17<div class="c"><div class="ic" style="background:#FFF3D6">🧋</div><span>茶饮</span></div>
18<div class="c"><div class="ic" style="background:#FFE3EC">🍜</div><span>面食</span></div>
19<div class="c"><div class="ic" style="background:#FFE9D6">🍰</div><span>甜品</span></div>
20<div class="c"><div class="ic" style="background:#E3F3FF">🥘</div><span>家常</span></div>
21<div class="c"><div class="ic" style="background:#FFF3D6">🍳</div><span>早餐</span></div>
22<div class="c"><div class="ic" style="background:#FFF3D6">🐟</div><span>海鲜</span></div>
23<div class="c"><div class="ic" style="background:#FFE3EC">🍦</div><span>冰品</span></div>
24</div>
25<div class="hero"><h1>西瓜外卖</h1><p>清爽绿意，今日特惠水果 2 折起，快乐每一单！</p></div>
26<div class="card"><div class="sec-h">🔥 今日推荐</div><div class="grid2">
27<div class="gcard"><div class="pic">🍉</div><div class="info"><b>西瓜鲜果</b><div class="meta">热销</div><div class="p">西瓜汁 ¥9</div></div></div>
28<div class="gcard"><div class="pic">🥗</div><div class="info"><b>绿野沙拉</b><div class="meta">热销</div><div class="p">牛油果 ¥26</div></div></div>
29<div class="gcard"><div class="pic">🍢</div><div class="info"><b>炙烤串串</b><div class="meta">热销</div><div class="p">肉串 ¥3</div></div></div>
30<div class="gcard"><div class="pic">🧋</div><div class="info"><b>青柠茶饮</b><div class="meta">热销</div><div class="p">气泡 ¥14</div></div></div>
31</div></div>
32<div class="card"><div class="sec-h">🏪 附近好店</div>
33<a class="shop" href="detail.html" style="text-decoration:none;color:inherit"><div class="logo">🍉</div><div class="info"><b>西瓜鲜果</b><div class="meta">⭐4.9 · 月售 1200 · 起送 ¥10 · 20分钟</div><div><span class="tag">新鲜水果 / 果汁</span></div></div></a>
34<a class="shop" href="detail.html" style="text-decoration:none;color:inherit"><div class="logo">🥗</div><div class="info"><b>绿野沙拉</b><div class="meta">⭐4.7 · 月售 800 · 起送 ¥15 · 25分钟</div><div><span class="tag">轻食 / 沙拉</span></div></div></a>
35<a class="shop" href="detail.html" style="text-decoration:none;color:inherit"><div class="logo">🍢</div><div class="info"><b>炙烤串串</b><div class="meta">⭐4.8 · 月售 2000 · 起送 ¥20 · 30分钟</div><div><span class="tag">烧烤 / 夜宵</span></div></div></a>
36<a class="shop" href="detail.html" style="text-decoration:none;color:inherit"><div class="logo">🧋</div><div class="info"><b>青柠茶饮</b><div class="meta">⭐4.6 · 月售 3500 · 起送 ¥12 · 18分钟</div><div><span class="tag">果茶 / 气泡</span></div></div></a>
37</div></main>
38 <nav class="tabbar"><a href="index.html" class="on"><span>🏠</span>首页</a><a href="list.html"><span>🍽️</span>商家</a><a href="order.html"><span>🧾</span>订单</a></nav>
39</div>
40<script src="js/main.js"></script>
41</body>
42</html>