r05/mine.html · 约 3482 字符
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 row"><div class="thumb" style="width:54px;height:54px;font-size:26px">苏</div>
17<div class="info" style="flex:1"><div class="nm" style="font-size:17px;font-weight:800">苏晓 的账本</div>
18<div class="muted">记账 92 天 · 共 268 笔</div></div><span class="tag pink">教程版</span></div>
19<div class="card">
20 <div class="sec-title"><span>🎬</span> 配套视频课程</div>
21 <div class="lesson"><div class="no">01</div><div class="info"><div class="nm">环境搭建与项目初始化</div><div class="sub">12 分钟 · 已完成</div></div><span class="badge b-ok">✔</span></div>
22 <div class="lesson"><div class="no">02</div><div class="info"><div class="nm">页面布局与组件拆分</div><div class="sub">18 分钟 · 已完成</div></div><span class="badge b-ok">✔</span></div>
23 <div class="lesson"><div class="no">03</div><div class="info"><div class="nm">本地数据存储与流水</div><div class="sub">21 分钟 · 学习中</div></div><span class="badge b-pri">▶</span></div>
24 <div class="lesson"><div class="no">04</div><div class="info"><div class="nm">图表统计与预算提醒</div><div class="sub">16 分钟 · 未解锁</div></div><span class="badge b-warn">锁</span></div>
25 <div class="lesson" style="border-bottom:none"><div class="no">05</div><div class="info"><div class="nm">云同步与打包发布</div><div class="sub">14 分钟 · 未解锁</div></div><span class="badge b-warn">锁</span></div>
26</div>
27<div class="card">
28 <a class="bill" href="budget.html" style="text-decoration:none;color:inherit"><div class="info"><div class="nm">🎯 预算设置</div></div><span class="muted">›</span></a>
29 <a class="bill" href="cats.html" style="text-decoration:none;color:inherit"><div class="info"><div class="nm">🏷️ 分类管理</div></div><span class="muted">›</span></a>
30 <a class="bill" href="accounts.html" style="text-decoration:none;color:inherit"><div class="info"><div class="nm">🏦 账户管理</div></div><span class="muted">›</span></a>
31 <div class="bill" style="border-bottom:none"><div class="info"><div class="nm">📤 导出账单</div></div><span class="muted">CSV / Excel ›</span></div>
32</div>
33<div class="card">
34 <div class="bill" style="border-bottom:none"><div class="info"><div class="nm">🔔 记账提醒</div></div><div class="switch on" onclick="this.classList.toggle('on')"></div></div>
35</div>
36<div class="muted" style="text-align:center;line-height:1.6">本页所有金额、分类、账户、课程进度均为测试模拟数据，仅用于功能演示，不构成任何理财建议。</div>
37</main>
38 <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="" href="budget.html"><span class="ic">🎯</span>预算</a><a class=" on" href="mine.html"><span class="ic">👤</span>我的</a></nav>
39</div>
40<script></script>
41</body>
42</html>