index.html · 约 18751 字符
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:#f0f4f8; --card:#fff; --primary:#059669; --primary-light:#10b981; --accent:#f59e0b; --danger:#ef4444; --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:14px 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 .menu-btn{font-size:22px;color:var(--muted);width:28px;cursor:pointer}
16.header .title{flex:1;font-size:17px;font-weight:600;text-align:center;}
17.header .tool{font-size:22px;color:var(--muted);cursor:pointer}
18
19.card{background:var(--card);margin:12px 16px;border-radius:20px;padding:18px;box-shadow:var(--shadow);}
20.card-title{font-size:16px;font-weight:600;margin-bottom:14px;}
21.card-more{font-size:12px;color:var(--muted);}
22
23.total-card{background:linear-gradient(135deg,var(--primary),var(--primary-light));margin:14px 16px;border-radius:22px;padding:22px 20px;color:#fff;position:relative;overflow:hidden;box-shadow:0 8px 24px rgba(5,150,105,.25);}
24.total-card::after{content:"";position:absolute;top:-30px;right:-30px;width:140px;height:140px;background:rgba(255,255,255,.08);border-radius:50%;}
25.total-label{font-size:13px;opacity:.85;}
26.total-num{font-size:32px;font-weight:700;margin-top:6px;}
27.total-num span{font-size:14px;font-weight:400;}
28.total-row{display:flex;gap:20px;margin-top:16px;position:relative;z-index:2;}
29.total-item{flex:1;background:rgba(255,255,255,.12);border-radius:14px;padding:12px;text-align:center;}
30.total-item .num{font-size:16px;font-weight:700;}
31.total-item .label{font-size:11px;opacity:.8;margin-top:2px;}
32
33.chart-wrap{height:180px;margin:10px 0;position:relative;}
34.chart-wrap svg{width:100%;height:100%;}
35
36.asset-item{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);}
37.asset-item:last-child{border-bottom:none;padding-bottom:0;}
38.asset-icon{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#d1fae5,#fff);display:flex;align-items:center;justify-content:center;font-size:22px;}
39.asset-info{flex:1;}
40.asset-name{font-size:14px;font-weight:600;}
41.asset-amount{font-size:12px;color:var(--muted);margin-top:2px;}
42.asset-trend{font-size:12px;font-weight:600;}
43.asset-trend.up{color:var(--danger);}
44.asset-trend.down{color:var(--primary);}
45.mini-chart{width:60px;height:32px;}
46
47.donut-wrap{height:220px;display:flex;align-items:center;justify-content:center;position:relative;}
48.donut-center{position:absolute;text-align:center;}
49.donut-center .num{font-size:24px;font-weight:700;}
50.donut-center .label{font-size:11px;color:var(--muted);}
51.legend{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px;}
52.legend-item{text-align:center;}
53.legend-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:4px;}
54.legend-name{font-size:11px;color:var(--muted);}
55.legend-pct{font-size:14px;font-weight:700;}
56
57.bar-chart{height:140px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding:10px 0;}
58.bar-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;}
59.bar{ width:100%;border-radius:8px;background:linear-gradient(180deg,#f59e0b,#f97316);min-height:20px;}
60.bar-label{font-size:10px;color:var(--muted);}
61
62.metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;}
63.metric-card{background:linear-gradient(135deg,#f0fdf4,#fff);border-radius:16px;padding:16px;border:1px solid #bbf7d0;}
64.metric-card.dark{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border:none;}
65.metric-num{font-size:22px;font-weight:700;}
66.metric-label{font-size:12px;opacity:.8;margin-top:4px;}
67.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;border:none;border-radius:16px;padding:14px 28px;font-size:15px;font-weight:600;width:100%;margin-top:16px;box-shadow:0 6px 16px rgba(5,150,105,.2);}
68
69/* drawer / profile */
70.drawer{position:fixed;top:0;left:0;width:280px;height:100vh;background:linear-gradient(180deg,#064e3b,#065f46);color:#fff;z-index:50;padding:24px 20px;transform:translateX(-100%);transition:transform .3s;}
71.drawer.open{transform:translateX(0);}
72.drawer-close{position:absolute;top:16px;right:16px;font-size:24px;cursor:pointer;}
73.drawer-profile{display:flex;align-items:center;gap:14px;margin-top:20px;}
74.drawer-avatar{width:56px;height:56px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;}
75.drawer-name{font-size:17px;font-weight:600;}
76.drawer-date{font-size:11px;opacity:.7;margin-top:4px;}
77.drawer-menu{margin-top:28px;}
78.drawer-item{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);cursor:pointer;}
79.drawer-item .icon{font-size:20px;}
80.drawer-item .text{font-size:14px;}
81.drawer-wallet{background:rgba(255,255,255,.12);border-radius:16px;padding:14px;margin-top:24px;}
82.drawer-wallet-label{font-size:11px;opacity:.7;}
83.drawer-wallet-addr{font-size:11px;word-break:break-all;margin-top:6px;opacity:.9;}
84.drawer-copy{background:#f59e0b;color:#fff;border:none;border-radius:12px;padding:6px 14px;font-size:12px;font-weight:600;margin-top:8px;}
85.drawer-company{font-size:11px;opacity:.5;text-align:center;margin-top:30px;}
86
87.overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:rgba(0,0,0,.4);z-index:40;display:none;}
88.overlay.show{display:block;}
89
90.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:30;backdrop-filter:blur(8px);}
91.nav-item{flex:1;text-align:center;color:var(--muted);font-size:10px;cursor:pointer;}
92.nav-item.active{color:var(--primary);}
93.nav-item .icon{font-size:22px;display:block;margin-bottom:2px;}
94
95.safe-bottom{padding-bottom:90px;}
96</style>
97</head>
98<body>
99
100<div class="overlay" id="overlay" onclick="toggleDrawer()"></div>
101<div class="drawer" id="drawer">
102 <div class="drawer-close" onclick="toggleDrawer()">×</div>
103 <div class="drawer-profile">
104 <div class="drawer-avatar">👤</div>
105 <div>
106 <div class="drawer-name">张三</div>
107 <div class="drawer-date">最近更新：2026-07-16</div>
108 </div>
109 </div>
110 <div class="drawer-menu">
111 <div class="drawer-item"><span class="icon">📊</span><span class="text">资产总览</span></div>
112 <div class="drawer-item"><span class="icon">💳</span><span class="text">交易明细</span></div>
113 <div class="drawer-item"><span class="icon">🔄</span><span class="text">产品转换</span></div>
114 <div class="drawer-item"><span class="icon">📜</span><span class="text">历史记录</span></div>
115 <div class="drawer-item"><span class="icon">⚙️</span><span class="text">设置</span></div>
116 <div class="drawer-item"><span class="icon">🚪</span><span class="text">退出登录</span></div>
117 </div>
118 <div class="drawer-wallet">
119 <div class="drawer-wallet-label">我的资产编号</div>
120 <div class="drawer-wallet-addr">CX20260716A8899FF001</div>
121 <button class="drawer-copy">复制</button>
122 </div>
123 <div class="drawer-company">由 驰旭科技 提供技术支持</div>
124</div>
125
126<div class="page active" id="p1">
127<div class="header">
128 <div class="menu-btn" onclick="toggleDrawer()">☰</div>
129 <div class="title">驰旭财富</div>
130 <div class="tool">🔔</div>
131</div>
132<div class="total-card">
133 <div class="total-label">总资产（元）</div>
134 <div class="total-num">128,888.88<span>元</span></div>
135 <div class="total-row">
136 <div class="total-item"><div class="num">+2,351.00</div><div class="label">本月收益</div></div>
137 <div class="total-item"><div class="num">+1.85%</div><div class="label">月收益率</div></div>
138 </div>
139</div>
140<div class="card">
141 <div class="card-title">月度资产动态</div>
142 <div class="chart-wrap">
143 <svg viewBox="0 0 360 180" preserveAspectRatio="none">
144 <defs><linearGradient id="area" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#10b981" stop-opacity="0.25"/><stop offset="100%" stop-color="#10b981" stop-opacity="0"/></linearGradient></defs>
145 <path d="M0,140 L40,120 L80,135 L120,90 L160,100 L200,60 L240,70 L280,45 L320,55 L360,30 L360,180 L0,180 Z" fill="url(#area)"/>
146 <path d="M0,140 L40,120 L80,135 L120,90 L160,100 L200,60 L240,70 L280,45 L320,55 L360,30" fill="none" stroke="#059669" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
147 <circle cx="200" cy="60" r="5" fill="#fff" stroke="#059669" stroke-width="2"/>
148 <rect x="170" y="32" width="60" height="22" rx="6" fill="#059669"/>
149 <text x="200" y="47" text-anchor="middle" fill="#fff" font-size="11">+5.83%</text>
150 <text x="40" y="168" fill="#94a3b8" font-size="10">6月</text>
151 <text x="120" y="168" fill="#94a3b8" font-size="10">7月</text>
152 <text x="200" y="168" fill="#94a3b8" font-size="10">8月</text>
153 <text x="280" y="168" fill="#94a3b8" font-size="10">9月</text>
154 <text x="340" y="168" fill="#94a3b8" font-size="10">10月</text>
155 </svg>
156 </div>
157</div>
158<div class="card safe-bottom">
159 <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;"><span class="card-title">我的持仓</span><span class="card-more">查看全部</span></div>
160 <div class="asset-item">
161 <div class="asset-icon">📈</div>
162 <div class="asset-info"><div class="asset-name">稳健增长基金</div><div class="asset-amount">持有 3,239.56 份</div></div>
163 <svg class="mini-chart" viewBox="0 0 60 32"><path d="M0,28 L10,24 L20,26 L30,18 L40,20 L50,10 L60,14" fill="none" stroke="#ef4444" stroke-width="2"/></svg>
164 <div class="asset-trend up">+7.46%</div>
165 </div>
166 <div class="asset-item">
167 <div class="asset-icon">💎</div>
168 <div class="asset-info"><div class="asset-name">优选债券组合</div><div class="asset-amount">持有 21,239.56 份</div></div>
169 <svg class="mini-chart" viewBox="0 0 60 32"><path d="M0,20 L10,22 L20,18 L30,24 L40,20 L50,26 L60,22" fill="none" stroke="#059669" stroke-width="2"/></svg>
170 <div class="asset-trend down">-1.26%</div>
171 </div>
172 <div class="asset-item">
173 <div class="asset-icon">🌊</div>
174 <div class="asset-info"><div class="asset-name">货币市场理财</div><div class="asset-amount">持有 3,239.56 份</div></div>
175 <svg class="mini-chart" viewBox="0 0 60 32"><path d="M0,26 L10,24 L20,22 L30,20 L40,18 L50,16 L60,14" fill="none" stroke="#ef4444" stroke-width="2"/></svg>
176 <div class="asset-trend up">+2.83%</div>
177 </div>
178</div>
179<div class="bottom-nav">
180 <div class="nav-item active" onclick="go(1)"><span class="icon">📊</span>首页</div>
181 <div class="nav-item" onclick="go(2)"><span class="icon">📈</span>统计</div>
182 <div class="nav-item" onclick="go(3)"><span class="icon">👤</span>我的</div>
183</div>
184</div>
185
186<div class="page" id="p2">
187<div class="header"><div class="menu-btn" onclick="toggleDrawer()">☰</div><div class="title">收益统计</div><div class="tool">📅</div></div>
188<div class="card">
189 <div style="display:flex;justify-content:space-between;align-items:center;"><span class="card-title">资产配置</span><span class="card-more">详情</span></div>
190 <div class="donut-wrap">
191 <svg width="180" height="180" viewBox="0 0 180 180">
192 <circle cx="90" cy="90" r="70" fill="none" stroke="#f1f5f9" stroke-width="24"/>
193 <circle cx="90" cy="90" r="70" fill="none" stroke="#3b82f6" stroke-width="24" stroke-dasharray="132 440" stroke-dashoffset="0" transform="rotate(-90 90 90)"/>
194 <circle cx="90" cy="90" r="70" fill="none" stroke="#8b5cf6" stroke-width="24" stroke-dasharray="129 440" stroke-dashoffset="-132" transform="rotate(-90 90 90)"/>
195 <circle cx="90" cy="90" r="70" fill="none" stroke="#06b6d4" stroke-width="24" stroke-dasharray="97 440" stroke-dashoffset="-261" transform="rotate(-90 90 90)"/>
196 </svg>
197 <div class="donut-center"><div class="num">¥128,888</div><div class="label">总资产</div></div>
198 </div>
199 <div class="legend">
200 <div class="legend-item"><span class="legend-dot" style="background:#3b82f6;"></span><div class="legend-name">基金理财</div><div class="legend-pct">37%</div></div>
201 <div class="legend-item"><span class="legend-dot" style="background:#8b5cf6;"></span><div class="legend-name">债券组合</div><div class="legend-pct">36%</div></div>
202 <div class="legend-item"><span class="legend-dot" style="background:#06b6d4;"></span><div class="legend-name">货币基金</div><div class="legend-pct">27%</div></div>
203 </div>
204</div>
205<div class="card safe-bottom">
206 <div class="card-title">市场活跃度</div>
207 <div class="bar-chart">
208 <div class="bar-item"><div class="bar" style="height:60%;"></div><div class="bar-label">9点</div></div>
209 <div class="bar-item"><div class="bar" style="height:40%;"></div><div class="bar-label">10点</div></div>
210 <div class="bar-item"><div class="bar" style="height:80%;"></div><div class="bar-label">11点</div></div>
211 <div class="bar-item"><div class="bar" style="height:55%;"></div><div class="bar-label">14点</div></div>
212 <div class="bar-item"><div class="bar" style="height:70%;"></div><div class="bar-label">15点</div></div>
213 <div class="bar-item"><div class="bar" style="height:35%;"></div><div class="bar-label">收盘</div></div>
214 </div>
215 <div class="metrics">
216 <div class="metric-card"><div class="metric-num">1,012</div><div class="metric-label">今日成交笔数</div></div>
217 <div class="metric-card dark"><div class="metric-num">¥2.6亿</div><div class="metric-label">今日成交额</div></div>
218 </div>
219 <button class="btn-primary">查看收益进度 →</button>
220</div>
221<div class="bottom-nav">
222 <div class="nav-item" onclick="go(1)"><span class="icon">📊</span>首页</div>
223 <div class="nav-item active" onclick="go(2)"><span class="icon">📈</span>统计</div>
224 <div class="nav-item" onclick="go(3)"><span class="icon">👤</span>我的</div>
225</div>
226</div>
227
228<div class="page" id="p3">
229<div class="header"><div class="menu-btn" onclick="toggleDrawer()">☰</div><div class="title">我的</div><div class="tool">⚙️</div></div>
230<div class="card" style="background:linear-gradient(135deg,#064e3b,#065f46);color:#fff;">
231 <div style="display:flex;align-items:center;gap:16px;">
232 <div style="width:72px;height:72px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:38px;">👤</div>
233 <div>
234 <div style="font-size:19px;font-weight:700;">张三</div>
235 <div style="font-size:12px;opacity:.75;margin-top:4px;">风险承受能力：稳健型</div>
236 <div style="font-size:12px;opacity:.75;margin-top:2px;">客户编号：CX20260716001</div>
237 </div>
238 </div>
239 <div style="display:flex;gap:16px;margin-top:20px;">
240 <div style="flex:1;background:rgba(255,255,255,.12);border-radius:14px;padding:12px;text-align:center;"><div style="font-size:18px;font-weight:700;">1,288</div><div style="font-size:11px;opacity:.75;">理财积分</div></div>
241 <div style="flex:1;background:rgba(255,255,255,.12);border-radius:14px;padding:12px;text-align:center;"><div style="font-size:18px;font-weight:700;">V3</div><div style="font-size:11px;opacity:.75;">会员等级</div></div>
242 </div>
243</div>
244<div class="card">
245 <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;"><span class="card-title">常用功能</span></div>
246 <div class="legend" style="grid-template-columns:repeat(4,1fr);">
247 <div class="legend-item"><div style="font-size:26px;">📊</div><div class="legend-name">资产总览</div></div>
248 <div class="legend-item"><div style="font-size:26px;">💳</div><div class="legend-name">交易明细</div></div>
249 <div class="legend-item"><div style="font-size:26px;">🔄</div><div class="legend-name">产品转换</div></div>
250 <div class="legend-item"><div style="font-size:26px;">📜</div><div class="legend-name">历史记录</div></div>
251 <div class="legend-item"><div style="font-size:26px;">🎁</div><div class="legend-name">优惠券</div></div>
252 <div class="legend-item"><div style="font-size:26px;">🔒</div><div class="legend-name">安全中心</div></div>
253 <div class="legend-item"><div style="font-size:26px;">📞</div><div class="legend-name">在线客服</div></div>
254 <div class="legend-item"><div style="font-size:26px;">⚙️</div><div class="legend-name">设置</div></div>
255 </div>
256</div>
257<div class="card safe-bottom">
258 <div class="card-title">我的资产编号</div>
259 <div style="background:#f0f4f8;border-radius:14px;padding:14px;margin-top:10px;">
260 <div style="font-size:12px;color:var(--muted);">由 驰旭科技 提供安全托管</div>
261 <div style="font-size:13px;color:var(--text);word-break:break-all;margin-top:6px;font-weight:600;">CX20260716A8899FF001</div>
262 <button style="background:var(--primary);color:#fff;border:none;border-radius:10px;padding:6px 16px;font-size:12px;margin-top:10px;">复制编号</button>
263 </div>
264 <div style="font-size:11px;color:var(--muted);text-align:center;margin-top:20px;">© 2026 小草科技 · 某某科技联合出品</div>
265</div>
266<div class="bottom-nav">
267 <div class="nav-item" onclick="go(1)"><span class="icon">📊</span>首页</div>
268 <div class="nav-item" onclick="go(2)"><span class="icon">📈</span>统计</div>
269 <div class="nav-item active" onclick="go(3)"><span class="icon">👤</span>我的</div>
270</div>
271</div>
272
273<script src="../../../attachment/demos/_vendor/jquery.min.js"></script>
274<script>
275function go(n){
276 $('.page').removeClass('active');
277 $('#p'+n).addClass('active');
278}
279function toggleDrawer(){
280 $('#drawer').toggleClass('open');
281 $('#overlay').toggleClass('show');
282}
283</script>
284</body>
285</html>
286