index.html · 约 16523 字符
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<style>
8:root{ --bg:#f2faf6; --card:#fff; --primary:#1e8c5a; --primary-light:#34b578; --accent:#ff9f43; --text:#1f2d3d; --muted:#6b7b8c; --line:#e6efe9; --shadow:0 4px 14px rgba(30,60,50,.08); }
9*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
10body{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);line-height:1.45;}
11.page{max-width:430px;margin:0 auto;min-height:110vh;background:var(--bg);position:relative;overflow:hidden;display:none;}
12.page.active{display:block}
13
14.hero{background:linear-gradient(135deg,var(--primary),var(--primary-light));padding:22px 16px 30px;color:#fff;border-bottom-left-radius:24px;border-bottom-right-radius:24px;position:sticky;top:0;z-index:20}
15.hero-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
16.hero-avatar{width:40px;height:40px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:20px}
17.hero-title{font-size:18px;font-weight:600}
18.hero-sub{font-size:12px;opacity:.85;margin-top:2px}
19.search-bar{display:flex;align-items:center;background:rgba(255,255,255,.18);border-radius:24px;padding:10px 14px;gap:8px;margin-top:14px;backdrop-filter:blur(4px)}
20.search-bar input{flex:1;border:none;background:transparent;color:#fff;font-size:14px;outline:none}
21.search-bar input::placeholder{color:rgba(255,255,255,.75)}
22.search-bar .icon{font-size:16px}
23
24.cats{display:flex;gap:12px;padding:16px;overflow-x:auto}
25.cat-item{flex:0 0 90px;background:var(--card);border-radius:16px;padding:12px;text-align:center;box-shadow:var(--shadow)}
26.cat-icon{width:42px;height:42px;border-radius:12px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 8px}
27.cat-item.active .cat-icon{background:var(--primary);color:#fff}
28.cat-name{font-size:13px;font-weight:600}
29.cat-count{font-size:11px;color:var(--muted);margin-top:2px}
30
31.section-title{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 6px;font-size:16px;font-weight:600}
32.section-title .more{font-size:12px;color:var(--muted);font-weight:400}
33
34.drink-list{padding:8px 16px 24px}
35.drink-card{background:var(--card);border-radius:18px;padding:14px;display:flex;align-items:center;gap:14px;margin-bottom:12px;box-shadow:var(--shadow)}
36.drink-img{width:64px;height:64px;border-radius:14px;background:linear-gradient(135deg,#fff3e0,#e8f5e9);display:flex;align-items:center;justify-content:center;font-size:32px}
37.drink-info{flex:1}
38.drink-name{font-size:15px;font-weight:600}
39.drink-desc{font-size:12px;color:var(--muted);margin-top:2px}
40.drink-price{font-size:15px;font-weight:700;color:var(--primary);margin-top:6px}
41.drink-add{width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 4px 10px rgba(30,140,90,.3)}
42
43.bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:430px;width:100%;background:rgba(255,255,255,.98);border-top:1px solid var(--line);display:flex;justify-content:space-around;padding:8px 0 16px;z-index:40;backdrop-filter:blur(8px)}
44.nav-item{flex:1;text-align:center;color:var(--muted);font-size:10px}
45.nav-item.active{color:var(--primary)}
46.nav-item .icon{font-size:22px;display:block;margin-bottom:2px}
47
48.map-card{background:linear-gradient(135deg,#d4efdf,#a9dfbf);border-radius:20px;margin:16px;padding:18px;position:relative;overflow:hidden;min-height:180px}
49.map-card::before{content:"🗺️";position:absolute;font-size:80px;opacity:.12;right:-10px;bottom:-20px}
50.map-title{font-size:16px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
51.map-sub{font-size:13px;color:var(--muted);margin-top:8px;line-height:1.5}
52.map-edit{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;position:absolute;right:18px;bottom:18px;box-shadow:var(--shadow)}
53
54.service-list{padding:8px 16px 24px}
55.service-card{background:var(--card);border-radius:18px;padding:16px;display:flex;gap:14px;margin-bottom:12px;box-shadow:var(--shadow)}
56.service-img{width:70px;height:70px;border-radius:14px;background:linear-gradient(135deg,#e8f5e9,#fff3e0);display:flex;align-items:center;justify-content:center;font-size:32px}
57.service-info{flex:1}
58.service-name{font-size:15px;font-weight:600}
59.service-desc{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}
60.service-btn{display:inline-block;margin-top:10px;background:var(--primary);color:#fff;font-size:12px;padding:6px 14px;border-radius:20px}
61
62.detail-hero{background:linear-gradient(135deg,#e8f5e9,#d4efdf);padding:16px 16px 30px;position:relative;border-bottom-left-radius:28px;border-bottom-right-radius:28px}
63.detail-close{position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center;font-size:18px;z-index:10}
64.detail-img{width:160px;height:160px;border-radius:50%;background:#fff;margin:10px auto 0;display:flex;align-items:center;justify-content:center;font-size:80px;box-shadow:0 12px 30px rgba(30,140,90,.15)}
65.detail-body{background:var(--card);border-radius:24px 24px 0 0;margin-top:-20px;padding:24px 20px 30px;position:relative;z-index:5;min-height:60vh}
66.detail-name{font-size:22px;font-weight:700;text-align:center}
67.detail-desc{font-size:13px;color:var(--muted);text-align:center;margin-top:8px;line-height:1.6}
68
69.option-row{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding-bottom:14px;border-bottom:1px solid var(--line)}
70.option-label{font-size:15px;font-weight:600}
71.option-control{display:flex;align-items:center;gap:14px}
72.option-control .btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;font-size:16px;color:var(--text);display:flex;align-items:center;justify-content:center}
73.option-control .num{font-size:17px;font-weight:700;min-width:20px;text-align:center}
74
75.size-list{display:flex;gap:10px;margin-top:10px}
76.size-btn{flex:1;padding:10px 0;border:1px solid var(--line);border-radius:14px;background:#fff;text-align:center;font-size:14px;color:var(--muted)}
77.size-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
78
79.total-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);max-width:430px;width:100%;background:var(--card);border-top:1px solid var(--line);padding:12px 16px 20px;display:flex;justify-content:space-between;align-items:center;z-index:40}
80.total-price{font-size:20px;font-weight:700;color:var(--primary)}
81.total-price span{font-size:13px;color:var(--muted);font-weight:400}
82.total-btn{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border:none;border-radius:24px;padding:12px 32px;font-size:15px;font-weight:600}
83
84.safe-bottom{padding-bottom:80px}
85</style>
86</head>
87<body>
88
89<div class="page active" id="p1">
90<div class="hero">
91<div class="hero-top">
92<div>
93<div class="hero-title">早上好，李四</div>
94<div class="hero-sub">小草咖啡 · 某某科技出品</div>
95</div>
96<div class="hero-avatar">👨</div>
97</div>
98<div class="search-bar"><span class="icon">🔍</span><input placeholder="搜索拿铁、美式、甜品..."></div>
99</div>
100<div class="cats">
101<div class="cat-item active"><div class="cat-icon">☕</div><div class="cat-name">热销咖啡</div><div class="cat-count">12 款</div></div>
102<div class="cat-item"><div class="cat-icon">🍵</div><div class="cat-name">清新茶饮</div><div class="cat-count">8 款</div></div>
103<div class="cat-item"><div class="cat-icon">🍰</div><div class="cat-name">现烤甜点</div><div class="cat-count">6 款</div></div>
104<div class="cat-item"><div class="cat-icon">🥤</div><div class="cat-name">冷萃特调</div><div class="cat-count">5 款</div></div>
105</div>
106<div class="section-title"><span>今日推荐</span><span class="more">查看更多</span></div>
107<div class="drink-list safe-bottom">
108<div class="drink-card"><div class="drink-img">🍰</div><div class="drink-info"><div class="drink-name">红丝绒蛋糕拿铁</div><div class="drink-desc">香草风味 · 少糖推荐</div><div class="drink-price">¥ 28.00</div></div><div class="drink-add">+</div></div>
109<div class="drink-card"><div class="drink-img">🍵</div><div class="drink-info"><div class="drink-name">抹茶燕麦拿铁</div><div class="drink-desc">燕麦奶 · 热饮首选</div><div class="drink-price">¥ 32.00</div></div><div class="drink-add">+</div></div>
110<div class="drink-card"><div class="drink-img">🍫</div><div class="drink-info"><div class="drink-name">比利时黑巧摩卡</div><div class="drink-desc">浓郁可可 · 冬日暖饮</div><div class="drink-price">¥ 30.00</div></div><div class="drink-add">+</div></div>
111<div class="drink-card"><div class="drink-img">🍵</div><div class="drink-info"><div class="drink-name">宇治抹茶鲜奶</div><div class="drink-desc">五十铃抹茶粉</div><div class="drink-price">¥ 26.00</div></div><div class="drink-add">+</div></div>
112<div class="drink-card"><div class="drink-img">☕</div><div class="drink-info"><div class="drink-name">经典美式咖啡</div><div class="drink-desc">深度烘焙 · 提神醒脑</div><div class="drink-price">¥ 18.00</div></div><div class="drink-add">+</div></div>
113<div class="drink-card"><div class="drink-img">🥤</div><div class="drink-info"><div class="drink-name">生椰拿铁</div><div class="drink-desc">厚椰乳 · 冷萃基底</div><div class="drink-price">¥ 29.00</div></div><div class="drink-add">+</div></div>
114<div class="drink-card"><div class="drink-img">🧋</div><div class="drink-info"><div class="drink-name">黑糖珍珠鲜奶茶</div><div class="drink-desc">Q 弹珍珠 · 微糖</div><div class="drink-price">¥ 24.00</div></div><div class="drink-add">+</div></div>
115</div>
116<div class="bottom-nav">
117<div class="nav-item active" onclick="go(1)"><span class="icon">☕</span>菜单</div>
118<div class="nav-item" onclick="go(2)"><span class="icon">🛵</span>配送</div>
119<div class="nav-item" onclick="go(3)"><span class="icon">🧾</span>订单</div>
120<div class="nav-item" onclick="go(4)"><span class="icon">👤</span>我的</div>
121</div>
122</div>
123
124<div class="page" id="p2">
125<div class="hero">
126<div class="hero-top">
127<div>
128<div class="hero-title">配送到家</div>
129<div class="hero-sub">预计 25 分钟送达</div>
130</div>
131<div class="hero-avatar">🛵</div>
132</div>
133<div class="search-bar"><span class="icon">🔍</span><input placeholder="搜索收货地址"></div>
134</div>
135<div class="map-card">
136<div class="map-title">📍 当前配送地址</div>
137<div class="map-sub">某某科技园区 3 号楼<br>联系人：张三 先生 · 138****1234</div>
138<div class="map-edit">✏️</div>
139</div>
140<div class="section-title"><span>增值服务</span><span class="more">全部</span></div>
141<div class="service-list safe-bottom">
142<div class="service-card"><div class="service-img">📦</div><div class="service-info"><div class="service-name">咖啡月卡会员</div><div class="service-desc">每日首杯 8 折，免费配送，适合办公室场景</div><span class="service-btn">立即开通</span></div></div>
143<div class="service-card"><div class="service-img">🎁</div><div class="service-info"><div class="service-name">好友拼单优惠</div><div class="service-desc">邀请同事一起下单，满 5 人减 10 元</div><span class="service-btn">发起拼单</span></div></div>
144<div class="service-card"><div class="service-img">🏢</div><div class="service-info"><div class="service-name">企业会议茶歇</div><div class="service-desc">驰旭科技合作套餐，支持预约配送</div><span class="service-btn">了解详情</span></div></div>
145<div class="service-card"><div class="service-img">🎂</div><div class="service-info"><div class="service-name">生日专属福利</div><div class="service-desc">生日当月免费领取指定饮品一杯</div><span class="service-btn">查看权益</span></div></div>
146</div>
147<div class="bottom-nav">
148<div class="nav-item" onclick="go(1)"><span class="icon">☕</span>菜单</div>
149<div class="nav-item active" onclick="go(2)"><span class="icon">🛵</span>配送</div>
150<div class="nav-item" onclick="go(3)"><span class="icon">🧾</span>订单</div>
151<div class="nav-item" onclick="go(4)"><span class="icon">👤</span>我的</div>
152</div>
153</div>
154
155<div class="page" id="p3">
156<div class="detail-hero">
157<div class="detail-close" onclick="go(1)">✕</div>
158<div class="detail-img">🍵</div>
159</div>
160<div class="detail-body">
161<div class="detail-name">宇治抹茶燕麦拿铁</div>
162<div class="detail-desc">选用某某科技严选宇治抹茶粉，搭配燕麦奶与浓缩咖啡，层次分明，适合乳糖不耐受人群。</div>
163<div class="option-row">
164<div class="option-label">数量</div>
165<div class="option-control"><div class="btn">−</div><div class="num">1</div><div class="btn">+</div></div>
166</div>
167<div class="option-row" style="border-bottom:none;flex-direction:column;align-items:flex-start;gap:10px">
168<div class="option-label">杯型</div>
169<div class="size-list"><div class="size-btn active">中杯</div><div class="size-btn">大杯</div></div>
170</div>
171<div class="option-row" style="border-bottom:none;flex-direction:column;align-items:flex-start;gap:10px">
172<div class="option-label">浓缩程度</div>
173<div class="size-list"><div class="size-btn">标准</div><div class="size-btn active">加浓 1 份</div><div class="size-btn">加浓 2 份</div></div>
174</div>
175<div class="option-row" style="border-bottom:none;flex-direction:column;align-items:flex-start;gap:10px">
176<div class="option-label">温度</div>
177<div class="size-list"><div class="size-btn active">热饮</div><div class="size-btn">去冰</div><div class="size-btn">正常冰</div></div>
178</div>
179<div style="height:100px"></div>
180</div>
181<div class="total-bar">
182<div class="total-price"><span>合计</span> ¥ 34.00</div>
183<button class="total-btn">立即下单</button>
184</div>
185</div>
186
187<div class="page" id="p4">
188<div class="hero">
189<div class="hero-top">
190<div>
191<div class="hero-title">我的</div>
192<div class="hero-sub">小草咖啡会员</div>
193</div>
194<div class="hero-avatar">👨</div>
195</div>
196<div class="search-bar"><span class="icon">🔍</span><input placeholder="搜索订单、优惠券"></div>
197</div>
198<div class="service-list safe-bottom">
199<div class="service-card" style="flex-direction:column;text-align:center">
200<div class="service-name">李四</div>
201<div class="service-desc">V3 绿宝石会员 · 累计消费 ¥ 1,280</div>
202</div>
203<div class="service-card"><div class="service-img">🧧</div><div class="service-info"><div class="service-name">我的优惠券</div><div class="service-desc">3 张可用</div></div></div>
204<div class="service-card"><div class="service-img">🧾</div><div class="service-info"><div class="service-name">历史订单</div><div class="service-desc">共 18 单</div></div></div>
205<div class="service-card"><div class="service-img">⭐</div><div class="service-info"><div class="service-name">我的收藏</div><div class="service-desc">6 款常点饮品</div></div></div>
206<div class="service-card"><div class="service-img">⚙️</div><div class="service-info"><div class="service-name">设置</div><div class="service-desc">收货地址 / 账号安全</div></div></div>
207</div>
208<div class="bottom-nav">
209<div class="nav-item" onclick="go(1)"><span class="icon">☕</span>菜单</div>
210<div class="nav-item" onclick="go(2)"><span class="icon">🛵</span>配送</div>
211<div class="nav-item" onclick="go(3)"><span class="icon">🧾</span>订单</div>
212<div class="nav-item active" onclick="go(4)"><span class="icon">👤</span>我的</div>
213</div>
214</div>
215
216<script>
217function go(n){
218 var pages = document.querySelectorAll('.page');
219 for (var i = 0; i < pages.length; i++) pages[i].classList.remove('active');
220 var t = document.getElementById('p' + n);
221 if (t) t.classList.add('active');
222 window.scrollTo(0,0);
223}
224</script>
225</body>
226</html>
227