264 lines
14 KiB
HTML
264 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="个人记账与预算管理系统 - 简洁、专业、可信赖的个人财务管理工具">
|
|
<title>个人记账 - 首页</title>
|
|
<!-- 引入公共样式 -->
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
<!-- 引入Google Fonts - Inter -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<!-- 主布局容器 -->
|
|
<div class="app-layout">
|
|
<!-- 桌面端侧边栏 -->
|
|
<aside class="sidebar" role="navigation" aria-label="侧边导航">
|
|
<!-- Logo 区域 -->
|
|
<div class="sidebar-logo">
|
|
<div class="sidebar-logo-content">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="24" height="24">
|
|
<path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/>
|
|
<path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/>
|
|
<path d="M18 12a2 2 0 0 0 0 4h4v-4h-4z"/>
|
|
</svg>
|
|
<span>个人记账</span>
|
|
</div>
|
|
<!-- 折叠按钮 -->
|
|
<div class="sidebar-toggle-wrapper" data-tooltip="收起侧边栏">
|
|
<button class="sidebar-toggle" type="button" aria-label="折叠/展开侧边栏">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<polyline points="15 18 9 12 15 6"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- 导航列表 -->
|
|
<nav class="sidebar-nav">
|
|
<a href="index.html" class="sidebar-nav-item active" aria-current="page">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
|
<polyline points="9 22 9 12 15 12 15 22"/>
|
|
</svg>
|
|
<span>首页</span>
|
|
</a>
|
|
<a href="record.html" class="sidebar-nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
|
|
</svg>
|
|
<span>记账</span>
|
|
</a>
|
|
<a href="budget.html" class="sidebar-nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
|
|
<line x1="8" y1="21" x2="16" y2="21"/>
|
|
<line x1="12" y1="17" x2="12" y2="21"/>
|
|
</svg>
|
|
<span>预算</span>
|
|
</a>
|
|
<a href="statistics.html" class="sidebar-nav-item">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="18" y1="20" x2="18" y2="10"/>
|
|
<line x1="12" y1="20" x2="12" y2="4"/>
|
|
<line x1="6" y1="20" x2="6" y2="14"/>
|
|
</svg>
|
|
<span>统计</span>
|
|
</a>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- 主内容区 -->
|
|
<main class="main-content" role="main">
|
|
<!-- 余额卡片 -->
|
|
<section class="balance-card" aria-labelledby="balance-title">
|
|
<p class="balance-label" id="balance-title">当前余额</p>
|
|
<p class="balance-amount" aria-label="余额 ¥12,580.00">¥ 12,580.00</p>
|
|
<div class="balance-summary">
|
|
<div class="balance-summary-item income">
|
|
<span class="label">本月收入</span>
|
|
<span class="value">+8,500</span>
|
|
</div>
|
|
<div class="balance-summary-item expense">
|
|
<span class="label">本月支出</span>
|
|
<span class="value">-3,200</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 快捷操作按钮 -->
|
|
<section class="quick-actions" aria-label="快捷操作">
|
|
<button class="btn btn-primary" type="button" aria-label="快速记账">
|
|
<!-- 加号图标SVG -->
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<line x1="12" y1="5" x2="12" y2="19"/>
|
|
<line x1="5" y1="12" x2="19" y2="12"/>
|
|
</svg>
|
|
<span>快速记账</span>
|
|
</button>
|
|
<button class="btn btn-danger" type="button" aria-label="记支出">
|
|
<!-- 减号图标SVG -->
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<line x1="5" y1="12" x2="19" y2="12"/>
|
|
</svg>
|
|
<span>记支出</span>
|
|
</button>
|
|
</section>
|
|
|
|
<!-- 收支双卡片 -->
|
|
<section class="stats-grid" aria-label="收支概览">
|
|
<article class="stat-card">
|
|
<p class="stat-label">本月收入</p>
|
|
<p class="stat-value income" aria-label="收入 +8,500">+8,500</p>
|
|
</article>
|
|
<article class="stat-card">
|
|
<p class="stat-label">本月支出</p>
|
|
<p class="stat-value expense" aria-label="支出 -3,200">-3,200</p>
|
|
</article>
|
|
</section>
|
|
|
|
<!-- 预算进度 -->
|
|
<section class="budget-card" aria-labelledby="budget-title">
|
|
<h2 class="section-title" id="budget-title">预算进度</h2>
|
|
<div class="budget-list" role="list">
|
|
<!-- 餐饮预算 - 70% 正常 -->
|
|
<div class="budget-progress-item" role="listitem">
|
|
<div class="budget-progress-header">
|
|
<div class="budget-category">
|
|
<span class="budget-category-icon" aria-hidden="true">🍜</span>
|
|
<span class="budget-category-name">餐饮</span>
|
|
</div>
|
|
<span class="budget-amounts">1,050 / 1,500</span>
|
|
</div>
|
|
<div class="budget-progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" aria-label="餐饮预算已使用70%">
|
|
<div class="budget-progress-fill normal" style="width: 70%;"></div>
|
|
</div>
|
|
<p class="budget-percentage">70%</p>
|
|
</div>
|
|
<!-- 交通预算 - 45% 正常 -->
|
|
<div class="budget-progress-item" role="listitem">
|
|
<div class="budget-progress-header">
|
|
<div class="budget-category">
|
|
<span class="budget-category-icon" aria-hidden="true">🚕</span>
|
|
<span class="budget-category-name">交通</span>
|
|
</div>
|
|
<span class="budget-amounts">225 / 500</span>
|
|
</div>
|
|
<div class="budget-progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" aria-label="交通预算已使用45%">
|
|
<div class="budget-progress-fill normal" style="width: 45%;"></div>
|
|
</div>
|
|
<p class="budget-percentage">45%</p>
|
|
</div>
|
|
<!-- 购物预算 - 25% 正常 -->
|
|
<div class="budget-progress-item" role="listitem">
|
|
<div class="budget-progress-header">
|
|
<div class="budget-category">
|
|
<span class="budget-category-icon" aria-hidden="true">🛒</span>
|
|
<span class="budget-category-name">购物</span>
|
|
</div>
|
|
<span class="budget-amounts">250 / 1,000</span>
|
|
</div>
|
|
<div class="budget-progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" aria-label="购物预算已使用25%">
|
|
<div class="budget-progress-fill normal" style="width: 25%;"></div>
|
|
</div>
|
|
<p class="budget-percentage">25%</p>
|
|
</div>
|
|
<!-- 娱乐预算 - 104% 超支 -->
|
|
<div class="budget-progress-item" role="listitem">
|
|
<div class="budget-progress-header">
|
|
<div class="budget-category">
|
|
<span class="budget-category-icon" aria-hidden="true">🎮</span>
|
|
<span class="budget-category-name">娱乐</span>
|
|
</div>
|
|
<span class="budget-amounts">520 / 500</span>
|
|
</div>
|
|
<div class="budget-progress-bar" role="progressbar" aria-valuenow="104" aria-valuemin="0" aria-valuemax="100" aria-label="娱乐预算已超支104%">
|
|
<div class="budget-progress-fill danger" style="width: 100%;"></div>
|
|
</div>
|
|
<p class="budget-percentage danger">
|
|
104%
|
|
<span class="budget-warning-icon" aria-label="超支警告">⚠️</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- 最近记录 -->
|
|
<section class="records-card" aria-labelledby="records-title">
|
|
<h2 class="section-title" id="records-title">最近记录</h2>
|
|
<div class="records-list" role="list">
|
|
<!-- 星巴克记录 -->
|
|
<article class="record-item" role="listitem">
|
|
<div class="record-icon" aria-hidden="true">🍜</div>
|
|
<div class="record-content">
|
|
<p class="record-title">餐饮</p>
|
|
<p class="record-note">星巴克</p>
|
|
</div>
|
|
<div class="record-meta">
|
|
<p class="record-amount expense" aria-label="支出 -38元">-38</p>
|
|
<p class="record-time">今天</p>
|
|
</div>
|
|
</article>
|
|
<!-- 打车记录 -->
|
|
<article class="record-item" role="listitem">
|
|
<div class="record-icon" aria-hidden="true">🚕</div>
|
|
<div class="record-content">
|
|
<p class="record-title">交通</p>
|
|
<p class="record-note">打车</p>
|
|
</div>
|
|
<div class="record-meta">
|
|
<p class="record-amount expense" aria-label="支出 -25元">-25</p>
|
|
<p class="record-time">今天</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- 移动端底部Tab导航 -->
|
|
<nav class="bottom-tab-bar" role="navigation" aria-label="底部导航">
|
|
<a href="index.html" class="tab-item active" aria-current="page">
|
|
<!-- 首页图标SVG -->
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
|
<polyline points="9 22 9 12 15 12 15 22"/>
|
|
</svg>
|
|
<span>首页</span>
|
|
</a>
|
|
<a href="record.html" class="tab-item">
|
|
<!-- 记账图标SVG -->
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
|
|
</svg>
|
|
<span>记账</span>
|
|
</a>
|
|
<a href="budget.html" class="tab-item">
|
|
<!-- 预算图标SVG -->
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
|
|
<line x1="8" y1="21" x2="16" y2="21"/>
|
|
<line x1="12" y1="17" x2="12" y2="21"/>
|
|
</svg>
|
|
<span>预算</span>
|
|
</a>
|
|
<a href="statistics.html" class="tab-item">
|
|
<!-- 统计图标SVG -->
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
|
<line x1="18" y1="20" x2="18" y2="10"/>
|
|
<line x1="12" y1="20" x2="12" y2="4"/>
|
|
<line x1="6" y1="20" x2="6" y2="14"/>
|
|
</svg>
|
|
<span>统计</span>
|
|
</a>
|
|
</nav>
|
|
|
|
<!-- ECharts CDN -->
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
|
<!-- 侧边栏折叠功能 -->
|
|
<script src="./js/sidebar.js"></script>
|
|
</body>
|
|
</html>
|