index.html · 约 15217 字符
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<script src="../_vendor/jquery.min.js"></script>
8<style>
9 * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
10 :root{
11 --bg:#1a1f2e; --card:#23293a; --card2:#2a3142; --text:#f1f5f9; --mute:#94a3b8;
12 --gold:#fbbf24; --gold2:#f59e0b; --green:#34d399; --green2:#10b981;
13 --line:#334155; --accent:#3b82f6;
14 }
15 body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
16 background:#0f141c; color:var(--text); }
17 .app{ max-width:430px; margin:0 auto; min-height:100vh; background:var(--bg);
18 position:relative; box-shadow:0 0 28px rgba(0,0,0,.35); display:flex; flex-direction:column; }
19 .topbar{ padding:16px 18px 12px; display:flex; align-items:center; gap:12px; flex-shrink:0; }
20 .topbar .back{ font-size:28px; cursor:pointer; color:var(--text); }
21 .topbar .tt{ font-size:18px; font-weight:800; letter-spacing:1px; flex:1; text-align:center; color:var(--text); }
22 .main{ flex:1; overflow-y:auto; padding:0 16px 90px; }
23 .main::-webkit-scrollbar{ display:none; }
24 .view{ display:none; }
25 .view.active{ display:block; animation:fade .22s ease; }
26 @keyframes fade{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
27
28 /* 首页 */
29 .hero{ background:linear-gradient(135deg,#2a3142,#1e2535); border-radius:22px; padding:20px; margin-bottom:16px; border:1px solid var(--line); }
30 .hero .row{ display:flex; align-items:flex-start; justify-content:space-between; }
31 .hero .lab{ font-size:12px; color:var(--mute); font-weight:700; letter-spacing:1px; }
32 .hero .num{ font-size:32px; font-weight:900; margin-top:6px; }
33 .hero .num small{ font-size:16px; color:var(--gold); font-weight:800; margin-left:4px; }
34 .hero .buy-btn{ background:linear-gradient(135deg,var(--gold),var(--gold2)); color:#1a1f2e; border:none; border-radius:999px; padding:10px 20px; font-size:14px; font-weight:900; cursor:pointer; box-shadow:0 4px 14px rgba(251,191,36,.25); }
35 .hero .sub{ display:flex; gap:16px; margin-top:16px; font-size:12px; color:var(--mute); font-weight:700; }
36 .banner{ background:linear-gradient(135deg,#4b5563,#374151); border-radius:20px; padding:18px; margin-bottom:16px; position:relative; overflow:hidden; border:1px solid var(--line); }
37 .banner::before{ content:""; position:absolute; top:-40px; right:-40px; width:140px; height:140px; background:rgba(255,255,255,.05); border-radius:50%; }
38 .banner::after{ content:""; position:absolute; bottom:-60px; left:20px; width:100px; height:100px; background:rgba(255,255,255,.03); border-radius:50%; }
39 .banner .lab{ font-size:12px; color:var(--mute); font-weight:700; }
40 .banner .big{ font-size:22px; font-weight:900; margin-top:6px; color:#fff; }
41 .banner .big span{ font-size:32px; color:var(--gold); }
42 .rate-card{ display:flex; gap:14px; margin-bottom:16px; }
43 .rate-card .item{ flex:1; background:var(--card); border-radius:18px; padding:16px; text-align:center; border:1px solid var(--line); }
44 .rate-card .item .v{ font-size:26px; font-weight:900; color:var(--gold); }
45 .rate-card .item .v small{ font-size:14px; }
46 .rate-card .item .l{ font-size:12px; color:var(--mute); margin-top:4px; font-weight:700; }
47 .section-title{ font-size:16px; font-weight:900; margin:20px 4px 12px; display:flex; align-items:center; justify-content:space-between; }
48 .section-title span{ color:var(--mute); font-size:12px; font-weight:700; }
49 .product{ background:var(--card); border-radius:18px; padding:16px; margin-bottom:12px; border:1px solid var(--line); }
50 .product .hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
51 .product .hd .name{ font-size:16px; font-weight:900; }
52 .product .hd .rate{ font-size:20px; font-weight:900; color:var(--gold); }
53 .product .hd .rate small{ font-size:13px; }
54 .product .meta{ display:flex; gap:12px; font-size:12px; color:var(--mute); font-weight:700; }
55 .product .meta span{ display:flex; align-items:center; gap:4px; }
56 .product .remain{ margin-top:10px; font-size:12px; color:var(--mute); }
57 .product .remain b{ color:var(--text); }
58 .tag{ display:inline-block; font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px; background:var(--card2); color:var(--gold); margin-top:10px; }
59
60 /* 详情 */
61 .detail-head{ background:var(--card); border-radius:22px; padding:20px; margin-bottom:16px; border:1px solid var(--line); }
62 .detail-head .top{ display:flex; align-items:center; justify-content:space-between; }
63 .detail-head .id{ font-size:18px; font-weight:900; }
64 .detail-head .id small{ font-size:12px; color:var(--gold); font-weight:700; }
65 .detail-head .eye{ font-size:20px; color:var(--mute); cursor:pointer; }
66 .detail-head .tabs{ display:flex; gap:10px; margin-top:16px; }
67 .detail-head .tabs span{ flex:1; text-align:center; padding:9px 0; border-radius:999px; background:var(--card2); color:var(--mute); font-size:12px; font-weight:800; cursor:pointer; }
68 .detail-head .tabs span.on{ background:var(--gold); color:#1a1f2e; }
69 .detail-head .realtime{ margin-top:16px; text-align:center; }
70 .detail-head .realtime .lab{ font-size:12px; color:var(--mute); font-weight:700; }
71 .detail-head .realtime .val{ font-size:34px; font-weight:900; color:var(--gold); margin-top:4px; }
72 .chart-card{ background:var(--card); border-radius:22px; padding:18px; margin-bottom:16px; border:1px solid var(--line); }
73 .chart-card .top-tip{ display:flex; justify-content:center; margin-bottom:10px; }
74 .chart-card .top-tip .pill{ background:var(--card2); color:var(--text); padding:6px 14px; border-radius:999px; font-size:12px; font-weight:800; }
75 .chart-card svg{ width:100%; height:160px; }
76 .chart-card .axis{ display:flex; justify-content:space-between; font-size:10px; color:var(--mute); margin-top:8px; font-weight:700; }
77 .actions{ display:flex; gap:12px; margin-bottom:16px; }
78 .actions .btn2{ flex:1; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; text-align:center; color:var(--text); font-size:13px; font-weight:800; }
79 .actions .btn2 .ic{ font-size:22px; margin-bottom:6px; display:block; }
80 .info-row{ background:var(--card); border-radius:18px; padding:16px; margin-bottom:12px; border:1px solid var(--line); }
81 .info-row .it{ display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); }
82 .info-row .it:last-child{ border-bottom:none; }
83 .info-row .it .l{ font-size:13px; color:var(--mute); font-weight:700; }
84 .info-row .it .v{ font-size:14px; font-weight:900; }
85 .tabbar{ position:fixed; bottom:0; left:50%; transform:translateX(-50%); width:100%; max-width:430px;
86 height:66px; background:var(--card); border-top:1px solid var(--line); display:flex; }
87 .tabbar button{ flex:1; border:none; background:none; font-size:11px; color:var(--mute); font-weight:700;
88 display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; }
89 .tabbar button .ti{ font-size:20px; }
90 .tabbar button.on{ color:var(--gold); }
91 .toast{ position:fixed; left:50%; top:42%; transform:translate(-50%,-50%) scale(.9); z-index:50;
92 background:rgba(15,30,60,.92); color:#fff; padding:13px 22px; border-radius:12px; font-size:14px;
93 font-weight:700; opacity:0; pointer-events:none; transition:.2s; }
94 .toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
95</style>
96</head>
97<body>
98<div class="app">
99 <header class="topbar" id="topbar">
100 <span class="back" id="backBtn">‹</span>
101 <span class="tt" id="topTitle">智盈理财</span>
102 </header>
103
104 <main class="main" id="main">
105 <!-- 首页 -->
106 <section class="view active" id="view-home">
107 <div class="hero">
108 <div class="row">
109 <div>
110 <div class="lab">TOTAL REVENUE</div>
111 <div class="num">5062.19<small>+0.06%</small></div>
112 </div>
113 <button class="buy-btn">购买</button>
114 </div>
115 <div class="sub">
116 <span>今日收益 +3.24</span>
117 <span>累计收益 124.80</span>
118 </div>
119 </div>
120 <div class="banner">
121 <div class="lab">新手专享</div>
122 <div class="big"><span>10%</span> 年化收益</div>
123 </div>
124 <div class="rate-card">
125 <div class="item">
126 <div class="v">12.0<small>%</small></div>
127 <div class="l">预期年化</div>
128 </div>
129 <div class="item">
130 <div class="v">30<small>天</small></div>
131 <div class="l">回款周期</div>
132 </div>
133 </div>
134 <div class="section-title">热门产品 <span>查看更多 ›</span></div>
135 <div id="productBox"></div>
136 </section>
137
138 <!-- 详情 -->
139 <section class="view" id="view-detail">
140 <div class="detail-head">
141 <div class="top">
142 <div class="id">No.758 阶段A <small>预计年化 12.0%</small></div>
143 <span class="eye">👁</span>
144 </div>
145 <div class="tabs">
146 <span data-per="7d">7天</span>
147 <span data-per="30d" class="on">30天</span>
148 <span data-per="1y">1年</span>
149 </div>
150 <div class="realtime">
151 <div class="lab">实时收益率</div>
152 <div class="val" id="realRate">8.6%</div>
153 </div>
154 </div>
155 <div class="chart-card">
156 <div class="top-tip"><span class="pill">+ 8.51</span></div>
157 <svg id="chartSvg" viewBox="0 0 340 160" preserveAspectRatio="none">
158 <polyline id="chartLine" fill="none" stroke="#fbbf24" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" points=""/>
159 <circle id="chartDot" cx="0" cy="0" r="5" fill="#fbbf24" stroke="#1a1f2e" stroke-width="3"/>
160 <line id="guideLine" x1="0" y1="0" x2="0" y2="160" stroke="rgba(255,255,255,.15)" stroke-dasharray="4,4" stroke-width="1"/>
161 </svg>
162 <div class="axis" id="chartAxis">
163 <span>03</span><span>04</span><span>05</span><span>06</span><span>07</span><span>08</span>
164 </div>
165 </div>
166 <div class="actions">
167 <div class="btn2"><span class="ic">📋</span>借贷计划</div>
168 <div class="btn2"><span class="ic">🛡</span>安全网</div>
169 </div>
170 <div class="info-row">
171 <div class="it"><span class="l">累计借贷</span><span class="v">6,788,354</span></div>
172 <div class="it"><span class="l">剩余额度</span><span class="v">1,250,000</span></div>
173 <div class="it"><span class="l">项目周期</span><span class="v">30天</span></div>
174 <div class="it"><span class="l">起投金额</span><span class="v">1,000元</span></div>
175 </div>
176 <div class="section-title" style="margin-top:8px">项目详情</div>
177 <div class="info-row" style="font-size:13px;line-height:1.8;color:var(--mute)">
178 <p>本项目为短期稳健型理财产品，资金主要用于供应链金融与优质企业债权，风控团队严格筛选，历史兑付率 100%。</p>
179 </div>
180 </section>
181 </main>
182
183 <nav class="tabbar">
184 <button data-go="home" class="on"><span class="ti">🏠</span>首页</button>
185 <button data-go="detail"><span class="ti">📈</span>产品</button>
186 <button data-go="assets"><span class="ti">💼</span>资产</button>
187 <button data-go="me"><span class="ti">👤</span>我的</button>
188 </nav>
189</div>
190<div class="toast" id="toast"></div>
191
192<script>
193var PRODUCTS = [
194 {name:"稳健理财", rate:"8.6", days:60, min:1000, remain:3000, tag:"低风险"},
195 {name:"智能投顾", rate:"7.5", days:120, min:5000, remain:5000, tag:"AI推荐"},
196 {name:"化工融资", rate:"6.2", days:180, min:10000, remain:15000, tag:"企业债"}
197];
198var CHARTS = {
199 "7d": {label:"7天", data:[6.2,6.5,6.8,7.1,7.4,7.8,8.6], rate:"8.6%", axis:["周一","周二","周三","周四","周五","周六","周日"]},
200 "30d": {label:"30天", data:[4.2,5.1,5.8,4.9,6.5,7.2,6.8,7.5,8.1,8.6,7.9,8.4,8.6], rate:"8.6%", axis:["03","04","05","06","07","08"]},
201 "1y": {label:"1年", data:[3.5,4.2,4.8,5.5,6.1,6.8,7.2,7.5,7.8,8.2,8.4,8.6], rate:"8.6%", axis:["1月","3月","5月","7月","9月","11月"]}
202};
203var curPeriod="30d";
204function toast(m){ var t=$("#toast"); t.text(m).addClass("show"); setTimeout(function(){t.removeClass("show");},1500); }
205function renderProducts(){
206 $("#productBox").html(PRODUCTS.map(function(p){
207 return '<div class="product" data-name="'+p.name+'">'+
208 '<div class="hd"><span class="name">'+p.name+'</span><span class="rate">'+p.rate+'<small>%</small></span></div>'+
209 '<div class="meta"><span>📅 期限 '+p.days+'天</span><span>💰 起投 ¥'+p.min+'</span></div>'+
210 '<div class="remain">剩余额度 <b>¥'+p.remain+'</b></div>'+
211 '<span class="tag">'+p.tag+'</span></div>';
212 }).join(""));
213}
214function chartPoints(data){
215 var w=340, h=130, pad=15;
216 var min=Math.min.apply(null,data), max=Math.max.apply(null,data);
217 var range=max-min || 1;
218 var step=(w-2*pad)/(data.length-1);
219 return data.map(function(v,i){
220 var x=pad+i*step;
221 var y=h-pad-((v-min)/range)*(h-2*pad);
222 return [x,y];
223 });
224}
225function renderChart(per){
226 var cfg=CHARTS[per]; curPeriod=per;
227 var pts=chartPoints(cfg.data);
228 var points=pts.map(function(p){ return p[0]+","+p[1]; }).join(" ");
229 $("#chartLine").attr("points", points);
230 var last=pts[pts.length-1];
231 $("#chartDot").attr({cx:last[0], cy:last[1]});
232 $("#guideLine").attr({x1:last[0], x2:last[0]});
233 $("#realRate").text(cfg.rate);
234 $("#chartAxis").html(cfg.axis.map(function(a){return "<span>"+a+"</span>";}).join(""));
235}
236function showView(v){
237 $(".view").removeClass("active"); $("#view-"+v).addClass("active");
238 $("#topTitle").text(v==="home"?"智盈理财":"产品详情");
239 $("#backBtn").css("display", v==="home"?"none":"block");
240 $(".tabbar button").removeClass("on");
241 $(".tabbar button[data-go='"+v+"']").addClass("on");
242}
243$(function(){
244 renderProducts(); renderChart("30d");
245 $(document).on("click",".tabbar button[data-go]",function(){
246 var v=$(this).data("go"); if(v==="assets"||v==="me"){ toast("功能开发中"); return; } showView(v);
247 });
248 $("#backBtn").on("click",function(){ showView("home"); });
249 $(document).on("click",".product",function(){ showView("detail"); });
250 $(document).on("click",".detail-head .tabs span",function(){
251 $(".detail-head .tabs span").removeClass("on"); $(this).addClass("on"); renderChart($(this).data("per"));
252 });
253 $(".buy-btn").on("click",function(){ toast("跳转购买页"); });
254 $(".eye").on("click",function(){ toast("收益率已隐藏/显示"); });
255});
256// 截图钩子
257window.setFinanceView = function(v){ showView(v); };
258window.setFinancePeriod = function(p){ $(".detail-head .tabs span[data-per='"+p+"']").trigger("click"); };
259</script>
260</body>
261</html>