某杰废品回收站_H5/index.html · 约 6119 字符
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="style.css"/>
8</head>
9<body>
10
11<div class="location-bar">
12 <span class="lb-ico">📍</span>
13 <span class="lb-city">西安市</span>
14 <span class="lb-area">雁塔区 · 阳光北路片区（可上门）</span>
15 <span class="lb-chg" data-toast="已重新定位到当前位置">切换</span>
16</div>
17<div class="banner">
18 <div>
19 <div class="bn-title">某杰废品回收站</div>
20 <div class="bn-sub">上门回收 · 当场称重 · 即时到账<br/>废纸/塑料/金属/旧衣/家电/数码全品类</div>
21 <div class="bn-badge">🎁 新人首单加价 10%</div>
22 </div>
23 <div class="bn-emoji">♻️</div>
24</div>
25<div class="search-box" data-toast="拍照识别：上传照片自动匹配品类">
26 <span class="s-ico">🔍</span>
27 <input placeholder="搜品类，如 旧空调 / 易拉罐 / 纸箱…"/>
28 <span class="s-btn">搜索</span>
29</div>
30<div class="cat-grid">
31 <a href="category.html"><span class="c-emoji">📦</span><span class="c-name">废纸类</span></a>
32 <a href="category.html"><span class="c-emoji">🧴</span><span class="c-name">塑料类</span></a>
33 <a href="category.html"><span class="c-emoji">🔩</span><span class="c-name">金属类</span></a>
34 <a href="category.html"><span class="c-emoji">👕</span><span class="c-name">旧衣物</span></a>
35 <a href="category.html"><span class="c-emoji">❄️</span><span class="c-name">旧家电</span></a>
36 <a href="category.html"><span class="c-emoji">📱</span><span class="c-name">电子数码</span></a>
37</div>
38<div class="quick-grid">
39 <a href="cart.html"><div class="qicon">🚴</div>预约上门</a>
40 <a data-toast="请输入预估重量，已为您估算收益"><div class="qicon">🧮</div>一键估价</a>
41 <a href="category.html"><div class="qicon">💴</div>回收价目</a>
42 <a href="member.html"><div class="qicon">🌱</div>环保积分</a>
43 <a data-toast="已展示附近 2 个回收站"><div class="qicon">🏪</div>附近站点</a>
44</div>
45<div class="price-news">
46 <div class="pn-head">📈 今日回收价 <span class="pn-tag">行情实时更新</span></div>
47 <div id="priceList"></div>
48</div>
49<div class="seckill">
50 <div class="sk-head"><b>⚡ 限时加价活动</b><div class="sk-time"><i>03</i>:<i>24</i>:<i>10</i></div></div>
51 <div class="sk-body" id="skList"></div>
52</div>
53<div class="coupon-card" style="background:linear-gradient(135deg,#047857,#059669);margin:12px;border-radius:14px;padding:14px;display:flex;align-items:center;gap:12px;color:#fff">
54 <div style="flex:1"><b style="font-size:17px;display:block">新人首单加价 10%</b><span style="font-size:11px;opacity:.9">首单专属 · 与满量加价可叠加</span></div>
55 <div class="cc-btn" data-toast="加价券已到账" style="background:#fff;color:#047857;padding:8px 16px;border-radius:16px;font-size:12px;font-weight:700">立即领取</div>
56</div>
57<div class="section-title">🔥 高价回收品类 <span>当场称重现结</span></div>
58<div class="goods-card" data-toast="已加入回收单">
59 <div class="gc-img">🔶</div>
60 <div class="gc-body">
61 <div class="gc-name">废铜线 <span class="badge badge-hot">单价最高</span></div>
62 <div class="gc-desc">光亮铜线、紫铜件，剥皮纯铜价更高，当日现结</div>
63 <div class="gc-meta">月收 1.2 万公斤 · 全市回收 · 按斤计价/高价</div>
64 <div class="gc-foot"><div class="gc-price">¥48<small> /公斤</small></div><div class="gc-add">+</div></div>
65 </div>
66</div>
67<div class="section-title">♻️ 上门回收流程</div>
68<div class="flow-box" style="margin-top:0">
69 <div id="flowList"></div>
70</div>
71<div class="section-title">🏪 附近回收站 / 自提点</div>
72<div id="storeList"></div>
73
74
75<nav class="tabbar"><a class=" active" href="index.html"><span class="icon">🏠</span>首页</a><a class="" href="category.html"><span class="icon">💰</span>回收价</a><a class="" href="cart.html"><span class="icon">📋</span>回收单</a><a class="" href="member.html"><span class="icon">🌱</span>环保</a><a class="" href="mine.html"><span class="icon">👤</span>我的</a></nav>
76<script src="data.js"></script>
77<script>
78 var pl = document.getElementById('priceList');
79 var h0 = '';
80 window.DATA.priceNews.forEach(function (x) {
81 h0 += '<div class="pn-item"><span class="pn-name">' + x.name + '</span><span class="pn-price">' + x.price + '</span>'
82 + '<span class="pn-chg ' + x.dir + '">' + x.chg + '</span></div>';
83 });
84 pl.innerHTML = h0;
85 var sk = document.getElementById('skList');
86 var h = '';
87 window.DATA.seckills.forEach(function (x) {
88 h += '<div class="sk-item"><div class="sk-img">' + x.img + '</div><div class="sk-name">' + x.name + '</div>'
89 + '<div class="sk-price">¥' + x.price + '</div><div class="sk-old">原¥' + x.old + '</div></div>';
90 });
91 sk.innerHTML = h;
92 var fl = document.getElementById('flowList');
93 var h2 = '';
94 window.DATA.flow.forEach(function (f) {
95 h2 += '<div class="flow-item"><div class="fi-ico">' + f.ico + '</div><div>'
96 + '<div class="fi-name">' + f.name + '</div><div class="fi-desc">' + f.desc + '</div></div></div>';
97 });
98 fl.innerHTML = h2;
99 var sl = document.getElementById('storeList');
100 var h3 = '';
101 window.DATA.stores.forEach(function (s) {
102 h3 += '<div class="goods-card"><div class="gc-img">🏪</div><div class="gc-body">'
103 + '<div class="gc-name">' + s.name + ' <span class="tag">' + s.dist + '</span></div>'
104 + '<div class="gc-desc">' + s.addr + ' · 营业 ' + s.time + '</div>'
105 + '<div class="gc-foot"><div class="gc-add" data-toast="已发起导航" style="width:auto;height:auto;border-radius:14px;padding:6px 14px;font-size:12px">去这里</div></div></div></div>';
106 });
107 sl.innerHTML = h3;
108</script>
109<script src="app.js"></script>
110</body>
111</html>