首页/ mobileweb/ 用户中心UI设计 · 8 套不同竞品风格的用户中心主页 H5(电商/内容社区/金融钱包/会员/音乐/生活服务/游戏)/ 代码预览

💻 代码预览 · 用户中心UI设计 · 8 套不同竞品风格的用户中心主页 H5(电商/内容社区/金融钱包/会员/音乐/生活服务/游戏)

mw_other · 上传者 驰旭教育
← 返回详情
r113/finance.html · 约 3825 字符
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,viewport-fit=cover">
6<title>金融钱包用户中心</title>
7<link rel="icon" href="data:,">
8<link rel="stylesheet" href="style.css">
9</head>
10<body data-page="finance" style="--brand:#1677ff;--brand-d:#0a5fe0">
11<header class="uc-hero finance" style="--brand:#1677ff;--brand-d:#0a5fe0"><div class="uc-top"><span class="uc-set" data-toast="设置">⚙️</span><span class="uc-set" data-toast="扫一扫">⊞</span></div><div class="fin-label">总资产 (元)</div><div class="fin-asset">86,420.50</div><div class="trend-wrap"><svg class="trend" viewBox="0 0 300 70" preserveAspectRatio="none"><defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="#1677ff" stop-opacity=".35"/><stop offset="1" stop-color="#1677ff" stop-opacity="0"/></linearGradient></defs><path d="M0,70.0 L0.0,50.0 L27.3,40.0 L54.5,45.0 L81.8,33.3 L109.1,38.3 L136.4,23.3 L163.6,28.3 L190.9,15.0 L218.2,20.0 L245.5,6.7 L272.7,11.7 L300.0,0.0 L300.0,70.0 Z" fill="url(#g)"/><path d="M0.0,50.0 L27.3,40.0 L54.5,45.0 L81.8,33.3 L109.1,38.3 L136.4,23.3 L163.6,28.3 L190.9,15.0 L218.2,20.0 L245.5,6.7 L272.7,11.7 L300.0,0.0" fill="none" stroke="#1677ff" stroke-width="2.5"/></svg></div></header><main class="uc-wrap"><div class="card"><div class="card-h">快捷功能</div><div class="en-grid"><div class="en"><span class="en-ic">↗️</span><span class="en-tx">转账</span></div><div class="en"><span class="en-ic">↘️</span><span class="en-tx">收款</span></div><div class="en"><span class="en-ic">💳</span><span class="en-tx">信用卡</span></div><div class="en"><span class="en-ic">📈</span><span class="en-tx">理财</span></div><div class="en"><span class="en-ic">🛡️</span><span class="en-tx">保险</span></div><div class="en"><span class="en-ic">💡</span><span class="en-tx">生活缴费</span></div><div class="en"><span class="en-ic">📱</span><span class="en-tx">手机充值</span></div><div class="en"><span class="en-ic">•••</span><span class="en-tx">更多</span></div></div></div><div class="card"><div class="card-h">我的卡片</div><div class="bk"><div class="bk-t">招商银行</div><div class="bk-s">储蓄卡 · 尾号 8821</div></div><div class="bk"><div class="bk-t">蚂蚁借呗</div><div class="bk-s">信用贷 · 额度 ¥30,000</div></div><div class="bk"><div class="bk-t">余额宝</div><div class="bk-s">货币基金 · 收益 +1.2%</div></div></div><div class="card"><div class="card-h">近期账单</div><div class="bl"><div class="bl-l"><div class="bl-n">星巴克</div><div class="bl-t">今天 09:12</div></div><div class="bl-a out">-38.00</div></div><div class="bl"><div class="bl-l"><div class="bl-n">工资入账</div><div class="bl-t">8月5日</div></div><div class="bl-a in">+12,800.00</div></div><div class="bl"><div class="bl-l"><div class="bl-n">滴滴出行</div><div class="bl-t">8月4日</div></div><div class="bl-a out">-23.50</div></div><div class="bl"><div class="bl-l"><div class="bl-n">超市购物</div><div class="bl-t">8月3日</div></div><div class="bl-a out">-156.80</div></div></div></main><nav class="uctab"><a class="ut" data-toast="演示页面,仅展示 UI"><span class="ut-ic">💼</span><span class="ut-tx">财富</span></a><a class="ut" data-toast="演示页面,仅展示 UI"><span class="ut-ic">📄</span><span class="ut-tx">账单</span></a><a class="ut on" data-toast="演示页面,仅展示 UI"><span class="ut-ic">👤</span><span class="ut-tx">我的</span></a></nav>
12
13<div class="mask" id="mask"></div>
14<div class="toast" id="toast"></div>
15<script src="data/fallback.js"></script>
16<script src="app.js"></script>
17<script></script>
18</body>
19</html>