r84/index.html · 约 2763 字符
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<div class="app">
11 <header class="top">
12 <div class="top-l">记账 · 阿May</div>
13 <div class="top-r">资产总览</div>
14 </header>
15 <main class="main">
16<div class="hero">
17 <div class="l">💎 净资产（全部账户）</div>
18 <div class="n">¥128,640.50</div>
19 <div class="l" style="margin-top:8px">较上月 ↑ ¥3,330 · 储蓄率 38%</div>
20</div>
21<div class="grid" style="margin-bottom:12px">
22 <div class="tile t-green"><div class="n">¥8,650</div><div class="l">本月收入</div></div>
23 <div class="tile t-red"><div class="n">¥5,320</div><div class="l">本月支出</div></div>
24</div>
25<div class="grid" style="margin-bottom:12px">
26 <div class="tile t-amber"><div class="n">¥3,330</div><div class="l">本月结余</div></div>
27 <div class="tile t-violet"><div class="n">¥42,180</div><div class="l">本月预算剩余</div></div>
28</div>
29<div class="card">
30 <div class="sec-title"><span>🧾</span> 最近流水</div>
31 <div class="bill"><div class="thumb" style="background:linear-gradient(135deg,#0ea5e9,#6366f1)">🍜</div>
32 <div class="info"><div class="nm">午餐·兰州拉面</div><div class="sub">餐饮 · 07-16 12:20</div></div><div class="amt out">-¥32</div></div>
33 <div class="bill"><div class="thumb" style="background:linear-gradient(135deg,#10b981,#14b8a6)">💰</div>
34 <div class="info"><div class="nm">工资入账</div><div class="sub">收入 · 07-15 10:00</div></div><div class="amt in">+¥8,650</div></div>
35 <div class="bill"><div class="thumb" style="background:linear-gradient(135deg,#f59e0b,#f97316)">🚕</div>
36 <div class="info"><div class="nm">滴滴打车</div><div class="sub">交通 · 07-15 09:10</div></div><div class="amt out">-¥18.5</div></div>
37</div>
38<div class="grid">
39 <a class="tile t-cyan" href="charts.html" style="text-decoration:none"><div class="n">📈 图表</div><div class="l">支出结构分析</div></a>
40 <a class="tile t-blue" href="accounts.html" style="text-decoration:none"><div class="n">🏦 账户</div><div class="l">4 个账户余额</div></a>
41</div>
42</main>
43 <nav class="nav"><a class=" on" href="index.html"><span class="ic">📊</span>总览</a><a class="" href="bills.html"><span class="ic">🧾</span>流水</a><a class="" href="add.html"><span class="ic">➕</span>记一笔</a><a class="" href="budget.html"><span class="ic">🎯</span>预算</a><a class="" href="mine.html"><span class="ic">👤</span>我的</a></nav>
44</div>
45<script></script>
46</body>
47</html>