index.html · 约 18741 字符
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* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
9html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; background: #f5f7fa; color: #333; }
10ul, li { list-style: none; }
11.app { max-width: 430px; margin: 0 auto; min-height: 100vh; background: #f5f7fa; position: relative; padding-bottom: 64px; overflow: hidden; }
12.page { display: none; min-height: 100vh; overflow-y: auto; }
13.page.active { display: block; }
14.status-bar { height: 24px; background: #0ea5e9; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; font-size: 11px; color: #fff; }
15
16/* 公共 */
17.section-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 10px; }
18.section-head h3 { font-size: 16px; font-weight: 700; color: #111; }
19.section-head a { font-size: 12px; color: #0ea5e9; }
20
21/* 首页 */
22.home-header { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); color: #fff; padding: 12px 16px 18px; }
23.home-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
24.home-loc { font-size: 14px; font-weight: 600; }
25.home-search { background: #fff; border-radius: 22px; height: 40px; display: flex; align-items: center; padding: 0 14px; color: #999; font-size: 14px; }
26.banner { margin: 12px 16px; border-radius: 16px; background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); color: #fff; padding: 22px 20px; position: relative; overflow: hidden; }
27.banner h2 { font-size: 22px; font-weight: 700; }
28.banner p { font-size: 13px; opacity: 0.9; margin-top: 6px; }
29.banner::after { content: "🧹"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 56px; opacity: 0.25; }
30.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 16px; background: #fff; margin-bottom: 12px; }
31.service-item { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: #555; }
32.service-icon { width: 48px; height: 48px; border-radius: 16px; background: #e0f2fe; color: #0284c7; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 6px; }
33.activity-row { display: flex; gap: 12px; padding: 0 16px; margin-bottom: 12px; }
34.activity-card { flex: 1; background: #fff; border-radius: 14px; padding: 14px; min-height: 110px; position: relative; }
35.activity-card h4 { font-size: 14px; font-weight: 700; color: #111; }
36.activity-card p { font-size: 12px; color: #999; margin-top: 4px; }
37.activity-card .badge { display: inline-block; padding: 2px 8px; background: #fee2e2; color: #ef4444; border-radius: 10px; font-size: 11px; margin-top: 8px; }
38.activity-card .illus { position: absolute; right: 8px; bottom: 8px; font-size: 42px; }
39.recommend-list { background: #fff; padding: 0 16px; }
40.rec-card { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid #f3f4f6; }
41.rec-card:last-child { border-bottom: none; }
42.rec-thumb { width: 76px; height: 76px; border-radius: 12px; background: #e0f2fe; display: flex; align-items: center; justify-content: center; font-size: 36px; }
43.rec-info { flex: 1; }
44.rec-title { font-size: 15px; font-weight: 600; color: #111; }
45.rec-meta { font-size: 12px; color: #999; margin-top: 4px; }
46.rec-tags { display: flex; gap: 6px; margin-top: 6px; }
47.rec-tag { padding: 2px 6px; background: #ecfdf5; color: #047857; border-radius: 8px; font-size: 11px; }
48.rec-price { color: #ef4444; font-size: 18px; font-weight: 700; margin-top: 4px; }
49.rec-price span { font-size: 12px; color: #999; font-weight: 400; }
50
51/* 服务详情 */
52.detail-header { background: #fff; padding: 16px; margin-bottom: 12px; }
53.detail-title { font-size: 18px; font-weight: 700; color: #111; }
54.detail-price-row { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
55.detail-price { color: #ef4444; font-size: 24px; font-weight: 700; }
56.detail-price span { font-size: 13px; color: #999; font-weight: 400; }
57.detail-sales { font-size: 12px; color: #999; }
58.detail-section { background: #fff; padding: 16px; margin-bottom: 12px; }
59.detail-section h4 { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 12px; }
60.detail-section p { font-size: 13px; color: #555; line-height: 1.7; }
61.detail-list { padding-top: 4px; }
62.detail-list li { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; font-size: 13px; color: #555; }
63.detail-list li::before { content: "✓"; color: #10b981; font-weight: 700; }
64.worker-card { display: flex; gap: 12px; align-items: center; background: #f0f9ff; border-radius: 12px; padding: 12px; }
65.worker-avatar { width: 52px; height: 52px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; }
66.worker-info { flex: 1; }
67.worker-name { font-size: 15px; font-weight: 600; color: #111; }
68.worker-desc { font-size: 12px; color: #666; margin-top: 2px; }
69.worker-score { font-size: 12px; color: #f59e0b; margin-top: 2px; }
70.review-item { padding: 12px 0; border-bottom: 1px solid #f3f4f6; }
71.review-item:last-child { border-bottom: none; }
72.review-head { display: flex; justify-content: space-between; margin-bottom: 6px; }
73.review-user { font-size: 13px; font-weight: 600; color: #111; }
74.review-star { color: #f59e0b; font-size: 12px; }
75.review-text { font-size: 13px; color: #555; line-height: 1.5; }
76.booking-fixed { position: fixed; bottom: 64px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; background: #fff; padding: 10px 16px; border-top: 1px solid #f3f4f6; display: flex; justify-content: space-between; align-items: center; }
77.booking-fixed .price { font-size: 14px; color: #666; }
78.booking-fixed .price strong { color: #ef4444; font-size: 20px; }
79.booking-fixed .btn { padding: 10px 28px; background: #0ea5e9; color: #fff; border-radius: 20px; font-size: 14px; font-weight: 600; }
80
81/* 订单/我的 */
82.me-header { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); color: #fff; padding: 40px 16px 24px; }
83.me-top { display: flex; align-items: center; gap: 14px; }
84.me-avatar { width: 64px; height: 64px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 32px; border: 3px solid rgba(255,255,255,0.3); }
85.me-name h2 { font-size: 18px; font-weight: 600; }
86.me-name p { font-size: 12px; opacity: 0.9; margin-top: 2px; }
87.order-tabs { display: flex; background: #fff; border-bottom: 1px solid #f3f4f6; }
88.order-tab { flex: 1; text-align: center; padding: 14px; font-size: 14px; color: #666; position: relative; }
89.order-tab.active { color: #0ea5e9; font-weight: 600; }
90.order-tab.active::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; background: #0ea5e9; border-radius: 2px; }
91.order-list { padding: 12px 16px; }
92.order-card { background: #fff; border-radius: 14px; padding: 14px; margin-bottom: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
93.order-head { display: flex; justify-content: space-between; margin-bottom: 10px; }
94.order-no { font-size: 12px; color: #999; }
95.order-status { font-size: 12px; color: #0ea5e9; }
96.order-body { display: flex; gap: 12px; }
97.order-thumb { width: 60px; height: 60px; border-radius: 10px; background: #e0f2fe; display: flex; align-items: center; justify-content: center; font-size: 28px; }
98.order-info { flex: 1; }
99.order-title { font-size: 14px; font-weight: 600; color: #111; }
100.order-time { font-size: 12px; color: #999; margin-top: 4px; }
101.order-price { font-size: 14px; color: #111; font-weight: 600; margin-top: 4px; }
102.order-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }
103.order-btn { padding: 6px 14px; border-radius: 14px; font-size: 12px; }
104.order-btn.primary { background: #0ea5e9; color: #fff; }
105.order-btn.default { background: #f3f4f6; color: #666; }
106
107/* 底部导航 */
108.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 430px; height: 64px; background: #fff; border-top: 1px solid #f3f4f6; display: flex; justify-content: space-around; align-items: center; z-index: 100; }
109.tab-item { flex: 1; text-align: center; padding: 8px 0; color: #999; font-size: 11px; }
110.tab-item .icon { font-size: 22px; display: block; margin-bottom: 2px; }
111.tab-item.active { color: #0ea5e9; }
112.hidden-tabbar .tabbar { display: none; }
113.hidden-tabbar .app { padding-bottom: 0; }
114</style>
115</head>
116<body>
117<div class="app" id="app">
118 <div class="status-bar"><span>09:33</span><span class="icons">📶 🔋</span></div>
119
120 <!-- 1. 首页 -->
121 <div class="page active" id="page_home">
122 <div class="home-header">
123 <div class="home-top"><span class="home-loc">📍 恒大中渝广场</span><span>⚙</span></div>
124 <div class="home-search"><span style="margin-right:8px;">🔍</span><span>请输入关键字...</span></div>
125 </div>
126 <div class="banner">
127 <h2>家居焕新季</h2>
128 <p>360° 无死角深度清洁 · 驰旭科技到家服务</p>
129 </div>
130 <div class="service-grid">
131 <div class="service-item"><div class="service-icon">🧽</div><span>家电清洗</span></div>
132 <div class="service-item"><div class="service-icon">🧹</div><span>家政保洁</span></div>
133 <div class="service-item"><div class="service-icon">🔧</div><span>家电维修</span></div>
134 <div class="service-item"><div class="service-icon">🚿</div><span>管道疏通</span></div>
135 <div class="service-item"><div class="service-icon">🧹</div><span>地面养护</span></div>
136 <div class="service-item"><div class="service-icon">👶</div><span>保姆月嫂</span></div>
137 <div class="service-item"><div class="service-icon">🪟</div><span>窗帘清洗</span></div>
138 <div class="service-item"><div class="service-icon">🌿</div><span>绿化养护</span></div>
139 </div>
140 <div class="activity-row">
141 <div class="activity-card">
142 <h4>家电焕新季</h4>
143 <p>360° 无死角清洁</p>
144 <span class="badge">立减 30</span>
145 <span class="illus">🧑🔧</span>
146 </div>
147 <div class="activity-card">
148 <h4>家电维修</h4>
149 <p>上门维修直省 30</p>
150 <span class="badge">快速上门</span>
151 <span class="illus">🔧</span>
152 </div>
153 </div>
154 <div class="section-head"><h3>精选推荐</h3><a>更多 ></a></div>
155 <div class="recommend-list">
156 <div class="rec-card">
157 <div class="rec-thumb">🚿</div>
158 <div class="rec-info">
159 <div class="rec-title">专业管道疏通服务</div>
160 <div class="rec-meta">已售：562 · 好评：100%</div>
161 <div class="rec-tags"><span class="rec-tag">立减20</span><span class="rec-tag">售后保障</span><span class="rec-tag">爽约包赔</span></div>
162 <div class="rec-price">¥238.00</div>
163 </div>
164 </div>
165 <div class="rec-card">
166 <div class="rec-thumb">🧽</div>
167 <div class="rec-info">
168 <div class="rec-title">空调深度清洗（挂机）</div>
169 <div class="rec-meta">已售：328 · 好评：99%</div>
170 <div class="rec-tags"><span class="rec-tag">高温蒸汽</span><span class="rec-tag">除菌除螨</span></div>
171 <div class="rec-price">¥128.00</div>
172 </div>
173 </div>
174 <div class="rec-card">
175 <div class="rec-thumb">🧹</div>
176 <div class="rec-info">
177 <div class="rec-title">4 小时全屋保洁</div>
178 <div class="rec-meta">已售：890 · 好评：98%</div>
179 <div class="rec-tags"><span class="rec-tag">自带工具</span><span class="rec-tag">不满意重做</span></div>
180 <div class="rec-price">¥168.00</div>
181 </div>
182 </div>
183 <div class="rec-card">
184 <div class="rec-thumb">🪟</div>
185 <div class="rec-info">
186 <div class="rec-title">窗帘拆洗熨烫服务</div>
187 <div class="rec-meta">已售：156 · 好评：100%</div>
188 <div class="rec-tags"><span class="rec-tag">上门拆装</span><span class="rec-tag">48h 送回</span></div>
189 <div class="rec-price">¥199.00</div>
190 </div>
191 </div>
192 </div>
193 </div>
194
195 <!-- 2. 服务详情 -->
196 <div class="page" id="page_detail">
197 <div class="detail-header">
198 <div class="detail-title">专业管道疏通服务</div>
199 <div class="detail-price-row">
200 <div class="detail-price">¥238.00 <span>原价 ¥298</span></div>
201 <div class="detail-sales">已售 562 · 好评 100%</div>
202 </div>
203 </div>
204 <div class="detail-section">
205 <h4>服务介绍</h4>
206 <p>由小草科技认证技师提供上门管道疏通服务，适用于厨房下水道、卫生间地漏、马桶、洗手盆等堵塞问题。服务含基础疏通、现场清洁与 7 天售后保障。</p>
207 <ul class="detail-list">
208 <li>标准服务时长约 30-60 分钟</li>
209 <li>如需更换配件，费用另行告知</li>
210 <li>服务完成后现场验收，满意再付款</li>
211 <li>7 天内同一位置再次堵塞免费返工</li>
212 </ul>
213 </div>
214 <div class="detail-section">
215 <h4>服务师傅</h4>
216 <div class="worker-card">
217 <div class="worker-avatar">张</div>
218 <div class="worker-info">
219 <div class="worker-name">张三 · 高级维修技师</div>
220 <div class="worker-desc">从业 8 年 · 已完成 3200+ 单</div>
221 <div class="worker-score">⭐⭐⭐⭐⭐ 4.9 分</div>
222 </div>
223 </div>
224 </div>
225 <div class="detail-section">
226 <h4>用户评价</h4>
227 <div class="review-item">
228 <div class="review-head"><span class="review-user">李四</span><span class="review-star">⭐⭐⭐⭐⭐</span></div>
229 <div class="review-text">师傅上门很快，疏通效果很好，价格也透明，没有乱收费，推荐！</div>
230 </div>
231 <div class="review-item">
232 <div class="review-head"><span class="review-user">王五</span><span class="review-star">⭐⭐⭐⭐⭐</span></div>
233 <div class="review-text">家里厨房下水道堵了两天，预约后半小时就到了，很专业。</div>
234 </div>
235 <div class="review-item">
236 <div class="review-head"><span class="review-user">赵六</span><span class="review-star">⭐⭐⭐⭐</span></div>
237 <div class="review-text">服务态度不错，就是高峰期需要稍微等一会儿。</div>
238 </div>
239 </div>
240 <div class="booking-fixed">
241 <div class="price">实付 <strong>¥238.00</strong></div>
242 <div class="btn">立即预约</div>
243 </div>
244 </div>
245
246 <!-- 3. 订单/我的 -->
247 <div class="page" id="page_me">
248 <div class="me-header">
249 <div class="me-top">
250 <div class="me-avatar">李</div>
251 <div class="me-name"><h2>李四</h2><p>健康积分 860 · 普通会员</p></div>
252 </div>
253 </div>
254 <div class="order-tabs">
255 <div class="order-tab active">全部</div>
256 <div class="order-tab">待服务</div>
257 <div class="order-tab">已完成</div>
258 <div class="order-tab">待评价</div>
259 </div>
260 <div class="order-list">
261 <div class="order-card">
262 <div class="order-head"><span class="order-no">订单号：H20260716001</span><span class="order-status">待服务</span></div>
263 <div class="order-body">
264 <div class="order-thumb">🚿</div>
265 <div class="order-info">
266 <div class="order-title">专业管道疏通服务</div>
267 <div class="order-time">预约时间：2026-07-16 14:00</div>
268 <div class="order-price">¥238.00</div>
269 </div>
270 </div>
271 <div class="order-btns"><span class="order-btn default">取消订单</span><span class="order-btn primary">联系师傅</span></div>
272 </div>
273 <div class="order-card">
274 <div class="order-head"><span class="order-no">订单号：H20260715002</span><span class="order-status">已完成</span></div>
275 <div class="order-body">
276 <div class="order-thumb">🧽</div>
277 <div class="order-info">
278 <div class="order-title">空调深度清洗（挂机）</div>
279 <div class="order-time">完成时间：2026-07-15 16:30</div>
280 <div class="order-price">¥128.00</div>
281 </div>
282 </div>
283 <div class="order-btns"><span class="order-btn default">再次预约</span><span class="order-btn primary">去评价</span></div>
284 </div>
285 <div class="order-card">
286 <div class="order-head"><span class="order-no">订单号：H20260710003</span><span class="order-status">已完成</span></div>
287 <div class="order-body">
288 <div class="order-thumb">🧹</div>
289 <div class="order-info">
290 <div class="order-title">4 小时全屋保洁</div>
291 <div class="order-time">完成时间：2026-07-10 11:00</div>
292 <div class="order-price">¥168.00</div>
293 </div>
294 </div>
295 <div class="order-btns"><span class="order-btn default">再次预约</span><span class="order-btn primary">去评价</span></div>
296 </div>
297 </div>
298 </div>
299
300 <!-- 底部导航 -->
301 <div class="tabbar" id="tabbar">
302 <div class="tab-item active" data-page="home" onclick="go('home')"><span class="icon">🏠</span>首页</div>
303 <div class="tab-item" data-page="detail" onclick="go('detail')"><span class="icon">🛒</span>详情</div>
304 <div class="tab-item" data-page="me" onclick="go('me')"><span class="icon">👤</span>订单</div>
305 </div>
306</div>
307<script src="../../../attachment/demos/_vendor/jquery.min.js"></script>
308<script>
309function go(name){
310 $('.page').removeClass('active');
311 $('#page_'+name).addClass('active');
312 $('.tab-item').removeClass('active');
313 $('.tab-item[data-page='+name+']').addClass('active');
314 if(name=='detail'){ $('#app').addClass('hidden-tabbar'); } else { $('#app').removeClass('hidden-tabbar'); }
315 window.scrollTo(0,0);
316}
317window.show = function(name){ go(name); };
318$(function(){ go('home'); });
319</script>
320</body>
321</html>