r83/budget.html · 约 2845 字符
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">账本 · 林晓</div>
13 <div class="top-r">预算管理</div>
14 </header>
15 <main class="main">
16<div class="card hero" style="background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff">
17 <div class="muted" style="color:rgba(255,255,255,.85)">7 月总预算</div>
18 <div style="font-size:24px;font-weight:800;margin:4px 0">¥10,000</div>
19 <div class="bar" style="background:rgba(255,255,255,.25)"><i style="width:42%;background:#fff"></i></div>
20 <div style="font-size:12px;margin-top:6px;color:rgba(255,255,255,.9)">已用 ¥4,180 · 剩余 ¥5,820</div>
21</div>
22<div class="card">
23 <div class="sec-title"><span>📊</span> 分类额度</div>
24 <div style="margin-bottom:14px">
25 <div class="row" style="margin-bottom:6px"><span class="nm" style="font-size:13px">🍜 餐饮</span><span class="muted">¥1,180 / ¥2,000</span></div>
26 <div class="bar"><i style="width:59%"></i></div>
27 </div>
28 <div style="margin-bottom:14px">
29 <div class="row" style="margin-bottom:6px"><span class="nm" style="font-size:13px">🛒 购物</span><span class="muted">¥1,036 / ¥3,000</span></div>
30 <div class="bar"><i style="width:35%"></i></div>
31 </div>
32 <div style="margin-bottom:14px">
33 <div class="row" style="margin-bottom:6px"><span class="nm" style="font-size:13px">🚌 交通</span><span class="muted">¥420 / ¥800</span></div>
34 <div class="bar"><i style="width:53%"></i></div>
35 </div>
36 <div style="margin-bottom:14px">
37 <div class="row" style="margin-bottom:6px"><span class="nm" style="font-size:13px">🎬 娱乐</span><span class="muted">¥980 / ¥1,000</span></div>
38 <div class="bar"><i class="warn" style="width:98%"></i></div>
39 </div>
40 <div>
41 <div class="row" style="margin-bottom:6px"><span class="nm" style="font-size:13px">📱 生活</span><span class="muted">¥564 / ¥500</span></div>
42 <div class="bar"><i class="over" style="width:100%"></i></div>
43 </div>
44</div>
45<div class="card row"><div class="muted">⚠️ 生活、娱乐 接近或超出额度</div><button class="btn sm">调整额度</button></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>