index.html · 约 19111 字符
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:#f4f6fa; --card:#fff; --primary:#4361ee; --primary-light:#7c3aed; --secondary:#06b6d4; --text:#1e293b; --muted:#64748b; --line:#e2e8f0; --shadow:0 4px 16px rgba(30,41,59,.06); }
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:120vh;background:var(--bg);position:relative;overflow:hidden;display:none;}
12.page.active{display:block}
13
14.header{padding:12px 16px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:20;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
15.header .back{font-size:20px;color:var(--muted);width:24px;cursor:pointer}
16.header .title{flex:1;font-size:17px;font-weight:600;text-align:center;}
17.header .tool{font-size:20px;color:var(--muted);cursor:pointer}
18
19.hero{background:linear-gradient(135deg,var(--primary),var(--primary-light));padding:28px 16px 36px;color:#fff;position:relative;overflow:hidden;}
20.hero::before{content:"";position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:rgba(255,255,255,.08);border-radius:50%;}
21.hero::after{content:"";position:absolute;bottom:-60px;left:-30px;width:200px;height:200px;background:rgba(255,255,255,.05);border-radius:50%;}
22.hero-top{display:flex;justify-content:space-between;align-items:flex-start;position:relative;z-index:2;}
23.hero-name{font-size:22px;font-weight:700;}
24.hero-code{font-size:12px;opacity:.85;margin-top:4px;}
25.hero-avatar{width:58px;height:58px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 6px 16px rgba(0,0,0,.15);position:relative;}
26.hero-avatar .badge{position:absolute;bottom:-2px;right:-2px;width:20px;height:20px;border-radius:50%;background:var(--secondary);display:flex;align-items:center;justify-content:center;font-size:11px;border:2px solid #fff;}
27.hero-stats{display:flex;justify-content:space-around;margin-top:24px;position:relative;z-index:2;}
28.hero-stat{text-align:center;}
29.hero-stat .num{font-size:20px;font-weight:700;}
30.hero-stat .label{font-size:11px;opacity:.8;margin-top:2px;}
31
32.balance-card{background:linear-gradient(135deg,#1e293b,#334155);margin:-20px 16px 14px;border-radius:18px;padding:18px;color:#fff;position:relative;z-index:10;box-shadow:var(--shadow);}
33.balance-row{display:flex;justify-content:space-between;align-items:center;}
34.balance-label{font-size:12px;opacity:.8;}
35.balance-num{font-size:24px;font-weight:700;margin-top:4px;}
36.balance-num span{font-size:13px;font-weight:400;}
37.btn-withdraw{background:linear-gradient(135deg,#f59e0b,#f97316);border:none;border-radius:20px;padding:8px 22px;color:#fff;font-size:13px;font-weight:600;box-shadow:0 4px 10px rgba(249,115,22,.25);}
38
39.section-card{background:var(--card);margin:12px 16px;border-radius:18px;padding:16px;box-shadow:var(--shadow);}
40.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
41.section-title{font-size:16px;font-weight:600;}
42.section-more{font-size:12px;color:var(--muted);}
43
44.order-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
45.order-cell{text-align:center;position:relative;}
46.order-icon{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#eff6ff,#fff);display:flex;align-items:center;justify-content:center;font-size:22px;margin:0 auto 6px;}
47.order-text{font-size:11px;color:var(--text);}
48.badge{position:absolute;top:-2px;right:6px;background:#ef4444;color:#fff;font-size:10px;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px;border:2px solid #fff;}
49
50.func-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 10px;}
51.func-item{text-align:center;}
52.func-icon{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#f1f5f9,#fff);display:flex;align-items:center;justify-content:center;font-size:20px;margin:0 auto 6px;}
53.func-text{font-size:11px;color:var(--text);}
54
55.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);}
56.nav-item{flex:1;text-align:center;color:var(--muted);font-size:10px;cursor:pointer;}
57.nav-item.active{color:var(--primary);}
58.nav-item .icon{font-size:22px;display:block;margin-bottom:2px;}
59
60/* page2 business */
61.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
62.stat-card{background:linear-gradient(135deg,#eff6ff,#fff);border-radius:14px;padding:14px;text-align:center;}
63.stat-card .num{font-size:20px;font-weight:700;color:var(--primary);}
64.stat-card .label{font-size:11px;color:var(--muted);margin-top:4px;}
65
66.tool-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
67.tool-item{background:var(--bg);border-radius:14px;padding:14px;text-align:center;}
68.tool-item .icon{font-size:26px;margin-bottom:6px;}
69.tool-item .text{font-size:12px;font-weight:600;}
70.tool-item .desc{font-size:10px;color:var(--muted);margin-top:2px;}
71
72.customer-list{margin-top:10px;}
73.customer-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);}
74.customer-item:last-child{border-bottom:none;}
75.customer-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#dbeafe,#fff);display:flex;align-items:center;justify-content:center;font-size:20px;}
76.customer-info{flex:1;}
77.customer-name{font-size:14px;font-weight:600;}
78.customer-meta{font-size:11px;color:var(--muted);margin-top:2px;}
79.customer-tag{font-size:10px;background:#dbeafe;color:var(--primary);padding:2px 8px;border-radius:10px;}
80.customer-amount{font-size:14px;font-weight:700;color:var(--primary);}
81
82.rank-list{margin-top:8px;}
83.rank-item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);}
84.rank-item:last-child{border-bottom:none;}
85.rank-no{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:var(--bg);color:var(--muted);}
86.rank-item:nth-child(1) .rank-no{background:#f59e0b;color:#fff;}
87.rank-item:nth-child(2) .rank-no{background:#94a3b8;color:#fff;}
88.rank-item:nth-child(3) .rank-no{background:#b45309;color:#fff;}
89.rank-name{flex:1;font-size:14px;}
90.rank-amount{font-size:14px;font-weight:700;color:var(--primary);}
91
92/* page3 order warehouse */
93.tab-bar{display:flex;background:var(--card);border-radius:12px;padding:4px;}
94.tab-item{flex:1;text-align:center;padding:8px 0;font-size:13px;color:var(--muted);border-radius:10px;}
95.tab-item.active{background:var(--primary);color:#fff;font-weight:600;}
96
97.order-item{background:var(--card);border-radius:16px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow);}
98.order-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
99.order-id{font-size:12px;color:var(--muted);}
100.order-status{font-size:12px;font-weight:600;color:var(--primary);}
101.order-body{display:flex;gap:12px;}
102.order-img{width:64px;height:64px;border-radius:12px;background:linear-gradient(135deg,#eff6ff,#fff);display:flex;align-items:center;justify-content:center;font-size:28px;}
103.order-info{flex:1;}
104.order-name{font-size:14px;font-weight:600;}
105.order-spec{font-size:11px;color:var(--muted);margin-top:2px;}
106.order-qty{font-size:11px;color:var(--muted);margin-top:4px;}
107.order-total{font-size:14px;font-weight:700;color:var(--text);margin-top:6px;}
108.order-total span{font-size:11px;color:var(--muted);font-weight:400;}
109.order-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;}
110.order-btn{padding:6px 14px;border-radius:14px;font-size:12px;border:1px solid var(--line);background:#fff;color:var(--text);}
111.order-btn.primary{background:var(--primary);color:#fff;border-color:var(--primary);}
112
113.warehouse-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:12px;}
114.wh-card{background:linear-gradient(135deg,#f0fdfa,#fff);border-radius:14px;padding:14px;border:1px solid #ccfbf1;}
115.wh-card.warning{background:linear-gradient(135deg,#fff7ed,#fff);border-color:#fed7aa;}
116.wh-name{font-size:13px;font-weight:600;}
117.wh-stock{font-size:11px;color:var(--muted);margin-top:4px;}
118.wh-num{font-size:18px;font-weight:700;color:var(--secondary);margin-top:2px;}
119.wh-num.warning{color:#f97316;}
120
121.safe-bottom{padding-bottom:90px;}
122.safe-bottom-sm{padding-bottom:80px;}
123</style>
124</head>
125<body>
126
127<div class="page active" id="p1">
128<div class="hero">
129 <div class="hero-top">
130 <div>
131 <div class="hero-name">张三</div>
132 <div class="hero-code">推荐码：CX2026A001</div>
133 </div>
134 <div class="hero-avatar">👤<div class="badge">✓</div></div>
135 </div>
136 <div class="hero-stats">
137 <div class="hero-stat"><div class="num">¥128.00</div><div class="label">今日收益</div></div>
138 <div class="hero-stat"><div class="num">¥4,560.00</div><div class="label">本月收益</div></div>
139 <div class="hero-stat"><div class="num">¥128,000.00</div><div class="label">累计收益</div></div>
140 </div>
141</div>
142<div class="balance-card">
143 <div class="balance-row">
144 <div>
145 <div class="balance-label">账户余额</div>
146 <div class="balance-num">128,000.00<span>元</span></div>
147 </div>
148 <button class="btn-withdraw">提现</button>
149 </div>
150</div>
151<div class="section-card">
152 <div class="section-head"><span class="section-title">订单发货</span><span class="section-more">查看更多</span></div>
153 <div class="order-grid">
154 <div class="order-cell"><div class="order-icon">📦</div><div class="badge">99</div><div class="order-text">待分拣</div></div>
155 <div class="order-cell"><div class="order-icon">🚚</div><div class="badge">99</div><div class="order-text">待提货</div></div>
156 <div class="order-cell"><div class="order-icon">✅</div><div class="order-text">已完成</div></div>
157 <div class="order-cell"><div class="order-icon">🛒</div><div class="order-text">自提核销</div></div>
158 </div>
159</div>
160<div class="section-card safe-bottom">
161 <div class="section-head"><span class="section-title">常用功能</span></div>
162 <div class="func-grid">
163 <div class="func-item"><div class="func-icon">🎫</div><div class="func-text">优惠券</div></div>
164 <div class="func-item"><div class="func-icon">🔄</div><div class="func-text">调拨管理</div></div>
165 <div class="func-item"><div class="func-icon">🏭</div><div class="func-text">仓库管理</div></div>
166 <div class="func-item"><div class="func-icon">📍</div><div class="func-text">收货地址</div></div>
167 <div class="func-item"><div class="func-icon">💬</div><div class="func-text">联系客服</div></div>
168 <div class="func-item"><div class="func-icon">❓</div><div class="func-text">常见问题</div></div>
169 <div class="func-item"><div class="func-icon">⚙️</div><div class="func-text">设置</div></div>
170 <div class="func-item"><div class="func-icon">📊</div><div class="func-text">数据中心</div></div>
171 </div>
172</div>
173<div class="bottom-nav">
174 <div class="nav-item" onclick="go(2)"><span class="icon">🏠</span>首页</div>
175 <div class="nav-item active" onclick="go(1)"><span class="icon">💼</span>展业</div>
176 <div class="nav-item" onclick="go(1)"><span class="icon">💬</span>消息</div>
177 <div class="nav-item" onclick="go(1)"><span class="icon">👤</span>我的</div>
178</div>
179</div>
180
181<div class="page" id="p2">
182<div class="header"><div class="back" onclick="go(1)">←</div><div class="title">展业拓客</div><div class="tool">🔔</div></div>
183<div class="section-card">
184 <div class="section-head"><span class="section-title">今日展业数据</span></div>
185 <div class="stats-row">
186 <div class="stat-card"><div class="num">18</div><div class="label">新增客户</div></div>
187 <div class="stat-card"><div class="num">56</div><div class="label">跟进次数</div></div>
188 <div class="stat-card"><div class="num">¥3,240</div><div class="label">预计成交</div></div>
189 </div>
190</div>
191<div class="section-card">
192 <div class="section-head"><span class="section-title">拓客工具</span></div>
193 <div class="tool-list">
194 <div class="tool-item"><div class="icon">📱</div><div class="text">邀请好友</div><div class="desc">分享推荐码</div></div>
195 <div class="tool-item"><div class="icon">🎁</div><div class="text">新人礼包</div><div class="desc">获客引流</div></div>
196 <div class="tool-item"><div class="icon">📄</div><div class="text">素材海报</div><div class="desc">一键转发</div></div>
197 <div class="tool-item"><div class="icon">🎯</div><div class="text">精准推广</div><div class="desc">定向投放</div></div>
198 <div class="tool-item"><div class="icon">📅</div><div class="text">拜访计划</div><div class="desc">日程管理</div></div>
199 <div class="tool-item"><div class="icon">🏆</div><div class="text">业绩排行</div><div class="desc">激励榜单</div></div>
200 </div>
201</div>
202<div class="section-card">
203 <div class="section-head"><span class="section-title">我的客户</span><span class="section-more">全部客户</span></div>
204 <div class="customer-list">
205 <div class="customer-item"><div class="customer-avatar">🏢</div><div class="customer-info"><div class="customer-name">某某科技有限公司</div><div class="customer-meta">联系人：李四 · 最近跟进 2小时前</div></div><div class="customer-tag">重点</div></div>
206 <div class="customer-item"><div class="customer-avatar">🏪</div><div class="customer-info"><div class="customer-name">小草科技零售店</div><div class="customer-meta">联系人：王五 · 最近跟进 昨天</div></div><div class="customer-tag">意向</div></div>
207 <div class="customer-item"><div class="customer-avatar">🏭</div><div class="customer-info"><div class="customer-name">驰旭科技分公司</div><div class="customer-meta">联系人：赵六 · 最近跟进 3天前</div></div><div class="customer-tag">复购</div></div>
208 </div>
209</div>
210<div class="section-card safe-bottom">
211 <div class="section-head"><span class="section-title">本月业绩榜</span></div>
212 <div class="rank-list">
213 <div class="rank-item"><div class="rank-no">1</div><div class="rank-name">张三</div><div class="rank-amount">¥128,000</div></div>
214 <div class="rank-item"><div class="rank-no">2</div><div class="rank-name">李四</div><div class="rank-amount">¥86,500</div></div>
215 <div class="rank-item"><div class="rank-no">3</div><div class="rank-name">王五</div><div class="rank-amount">¥62,000</div></div>
216 <div class="rank-item"><div class="rank-no">4</div><div class="rank-name">赵六</div><div class="rank-amount">¥45,800</div></div>
217 </div>
218</div>
219<div class="bottom-nav">
220 <div class="nav-item" onclick="go(1)"><span class="icon">🏠</span>首页</div>
221 <div class="nav-item active" onclick="go(2)"><span class="icon">💼</span>展业</div>
222 <div class="nav-item" onclick="go(1)"><span class="icon">💬</span>消息</div>
223 <div class="nav-item" onclick="go(1)"><span class="icon">👤</span>我的</div>
224</div>
225</div>
226
227<div class="page" id="p3">
228<div class="header"><div class="back" onclick="go(1)">←</div><div class="title">订单仓库</div><div class="tool">🔍</div></div>
229<div class="section-card" style="margin-top:12px;">
230 <div class="tab-bar">
231 <div class="tab-item active">待处理</div>
232 <div class="tab-item">已发货</div>
233 <div class="tab-item">已完成</div>
234 <div class="tab-item">售后</div>
235 </div>
236</div>
237<div class="section-card safe-bottom-sm" style="background:transparent;box-shadow:none;padding:0 16px;">
238 <div class="order-item">
239 <div class="order-head"><span class="order-id">订单号：CX20260716001</span><span class="order-status">待分拣</span></div>
240 <div class="order-body">
241 <div class="order-img">🧴</div>
242 <div class="order-info">
243 <div class="order-name">智能洗手液补充装 × 3</div>
244 <div class="order-spec">规格：500ml 清香型</div>
245 <div class="order-qty">数量：3 件</div>
246 <div class="order-total">¥89.70<span>含运费 ¥0</span></div>
247 </div>
248 </div>
249 <div class="order-actions"><button class="order-btn">查看物流</button><button class="order-btn primary">立即分拣</button></div>
250 </div>
251 <div class="order-item">
252 <div class="order-head"><span class="order-id">订单号：CX20260716002</span><span class="order-status">待提货</span></div>
253 <div class="order-body">
254 <div class="order-img">☕</div>
255 <div class="order-info">
256 <div class="order-name">小草挂耳咖啡礼盒</div>
257 <div class="order-spec">规格：混合风味 12包</div>
258 <div class="order-qty">数量：1 件</div>
259 <div class="order-total">¥128.00<span>含运费 ¥6</span></div>
260 </div>
261 </div>
262 <div class="order-actions"><button class="order-btn">联系客户</button><button class="order-btn primary">确认提货</button></div>
263 </div>
264</div>
265<div class="section-card" style="margin-top:12px;">
266 <div class="section-head"><span class="section-title">仓库库存</span><span class="section-more">库存明细</span></div>
267 <div class="warehouse-grid">
268 <div class="wh-card"><div class="wh-name">华东仓</div><div class="wh-stock">SKU 128</div><div class="wh-num">8,642</div></div>
269 <div class="wh-card"><div class="wh-name">华南仓</div><div class="wh-stock">SKU 96</div><div class="wh-num">5,230</div></div>
270 <div class="wh-card warning"><div class="wh-name">华北仓</div><div class="wh-stock">SKU 86</div><div class="wh-num warning">320</div></div>
271 <div class="wh-card"><div class="wh-name">西南仓</div><div class="wh-stock">SKU 72</div><div class="wh-num">4,180</div></div>
272 </div>
273</div>
274<div class="bottom-nav">
275 <div class="nav-item" onclick="go(1)"><span class="icon">🏠</span>首页</div>
276 <div class="nav-item" onclick="go(2)"><span class="icon">💼</span>展业</div>
277 <div class="nav-item" onclick="go(1)"><span class="icon">💬</span>消息</div>
278 <div class="nav-item active" onclick="go(3)"><span class="icon">📦</span>订单</div>
279</div>
280</div>
281
282<script src="../../../attachment/demos/_vendor/jquery.min.js"></script>
283<script>
284function go(n){
285 $('.page').removeClass('active');
286 $('#p'+n).addClass('active');
287}
288</script>
289</body>
290</html>
291