r84/budget.html · 约 2543 字符
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">🎯 7 月总预算</div>
18 <div class="n">¥4,180 / ¥6,000</div>
19 <div class="l" style="margin-top:8px">剩余 ¥1,820 · 已用 70%</div>
20</div>
21<div class="bar" style="margin:-4px 0 12px"><i style="width:70%"></i></div>
22<div class="card">
23 <div class="sec-title"><span>🍜</span> 分类额度</div>
24 <div style="margin-bottom:12px">
25 <div class="row" style="margin-bottom:5px"><span class="muted">🍜 餐饮</span><b style="font-size:12px">¥1,180 / ¥1,500</b></div>
26 <div class="bar warn"><i style="width:79%"></i></div>
27 </div>
28 <div style="margin-bottom:12px">
29 <div class="row" style="margin-bottom:5px"><span class="muted">🚕 交通</span><b style="font-size:12px">¥420 / ¥800</b></div>
30 <div class="bar"><i style="width:52%"></i></div>
31 </div>
32 <div style="margin-bottom:12px">
33 <div class="row" style="margin-bottom:5px"><span class="muted">🛍️ 购物</span><b style="font-size:12px">¥2,100 / ¥2,000</b></div>
34 <div class="bar warn"><i style="width:100%"></i></div>
35 </div>
36 <div style="margin-bottom:12px">
37 <div class="row" style="margin-bottom:5px"><span class="muted">🏠 居家</span><b style="font-size:12px">¥480 / ¥1,200</b></div>
38 <div class="bar ok"><i style="width:40%"></i></div>
39 </div>
40 <div>
41 <div class="row" style="margin-bottom:5px"><span class="muted">🎮 娱乐</span><b style="font-size:12px">¥0 / ¥500</b></div>
42 <div class="bar ok"><i style="width:0%"></i></div>
43 </div>
44</div>
45<div class="notice">⚠️ 「购物」已超预算 ¥100，建议本月剩余天数控制非必要支出。 <span class="tag">购物超支</span></div>
46</main>
47 <nav class="nav"><a class="" 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=" on" href="budget.html"><span class="ic">🎯</span>预算</a><a class="" href="mine.html"><span class="ic">👤</span>我的</a></nav>
48</div>
49<script></script>
50</body>
51</html>