1. 整体结构
头部区域：显示应用名称和用户信息
侧边栏导航：提供主要功能入口
主内容区：包含财务概览、交易记录和图表分析
2. 设计特点
色彩方案：
使用柔和的蓝色(#6C9BCF)作为主色调
粉色(#FFB6B6)作为强调色
绿色(#A0D8B3)表示收入/正面数据
橙色(#FFD3B6)表示警告/中性信息
整体背景使用浅灰色(#F8F9FA)提高可读性
视觉元素：
圆角设计(12px)让界面更友好
柔和的阴影效果增强层次感
卡片式布局区分不同功能区域
响应式设计适配不同屏幕尺寸
3. 功能实现
财务概览卡片：
显示本月收入、支出和结余
使用不同颜色区分正负值
包含直观的图标
交易记录表格：
显示最近的交易记录
分类使用彩色标签区分
收入和支出使用不同颜色显示
悬停效果提高可操作性
添加交易表单：
支持添加收入和支出
包含类型、金额、分类、日期和描述字段
表单验证和提交处理
图表分析：
使用Chart.js创建环形图
显示支出分类占比
支持不同时间范围切换(通过标签)
导航菜单：
清晰的图标和文字组合
悬停和激活状态反馈
覆盖所有主要功能入口
4. 交互功能
添加交易：点击"添加交易"按钮显示表单，填写后可以提交
图表切换：点击不同的时间标签可以切换数据显示范围
表单操作：支持取消和保存交易记录
5. 响应式设计
在小屏幕上自动调整为单列布局
概览卡片在小屏幕上堆叠显示
侧边栏在小屏幕上可能隐藏或调整
6.截图展示
7.代码重现
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轻记账 - 个人财务记录应用</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
/* 全局样式 - 使用柔和的配色方案 */
:root {
--primary-color: #6C9BCF; /* 主色调 - 柔和的蓝色 */
--secondary-color: #A5C0DD; /* 次要色调 - 更浅的蓝色 */
--accent-color: #FFB6B6; /* 强调色 - 柔和的粉色 */
--success-color: #A0D8B3; /* 成功色 - 柔和的绿色 */
--warning-color: #FFD3B6; /* 警告色 - 柔和的橙色 */
--text-color: #4A4A4A; /* 主要文字颜色 */
--light-text: #888888; /* 浅色文字 */
--bg-color: #F8F9FA; /* 背景色 */
--card-bg: #FFFFFF; /* 卡片背景 */
--shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 柔和的阴影 */
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Noto Sans SC', sans-serif;
background-color: var(--bg-color);
color: var(--text-color);
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* 头部样式 */
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
margin-bottom: 30px;
}
.logo {
font-size: 28px;
font-weight: 700;
color: var(--primary-color);
}
.logo span {
color: var(--accent-color);
}
.user-profile {
display: flex;
align-items: center;
}
.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--secondary-color);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
margin-left: 10px;
}
/* 主布局 */
.main-layout {
display: grid;
grid-template-columns: 250px 1fr;
gap: 20px;
}
/* 侧边栏 */
.sidebar {
background-color: var(--card-bg);
border-radius: 12px;
padding: 20px;
box-shadow: var(--shadow);
}
.nav-menu {
list-style: none;
}
.nav-item {
margin-bottom: 15px;
}
.nav-link {
display: flex;
align-items: center;
padding: 10px;
border-radius: 8px;
color: var(--text-color);
text-decoration: none;
transition: all 0.3s ease;
}
.nav-link:hover, .nav-link.active {
background-color: var(--secondary-color);
color: white;
}
.nav-link i {
margin-right: 10px;
font-size: 18px;
}
/* 主内容区 */
.main-content {
display: grid;
grid-template-rows: auto 1fr;
gap: 20px;
}
/* 概览卡片 */
.overview-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 20px;
}
.card {
background-color: var(--card-bg);
border-radius: 12px;
padding: 20px;
box-shadow: var(--shadow);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.card-title {
font-size: 16px;
font-weight: 500;
color: var(--light-text);
}
.card-value {
font-size: 24px;
font-weight: 700;
}
.income .card-value {
color: var(--success-color);
}
.expense .card-value {
color: var(--accent-color);
}
.balance .card-value {
color: var(--primary-color);
}
/* 交易记录部分 */
.transactions {
background-color: var(--card-bg);
border-radius: 12px;
padding: 20px;
box-shadow: var(--shadow);
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.section-title {
font-size: 20px;
font-weight: 600;
}
.btn {
padding: 8px 16px;
border-radius: 6px;
border: none;
background-color: var(--primary-color);
color: white;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
}
.btn:hover {
background-color: #5a8bc7;
transform: translateY(-2px);
}
.btn-outline {
background-color: transparent;
border: 1px solid var(--primary-color);
color: var(--primary-color);
}
.btn-outline:hover {
background-color: var(--primary-color);
color: white;
}
/* 交易表格 */
.transaction-table {
width: 100%;
border-collapse: collapse;
}
.transaction-table th {
text-align: left;
padding: 12px 15px;
font-weight: 500;
color: var(--light-text);
border-bottom: 1px solid #eee;
}
.transaction-table td {
padding: 15px;
border-bottom: 1px solid #eee;
}
.transaction-row:hover {
background-color: #f5f7fa;
}
.transaction-category {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
}
.category-food {
background-color: #FFE8E8;
color: #FF6B6B;
}
.category-transport {
background-color: #E3F2FD;
color: #42A5F5;
}
.category-shopping {
background-color: #FFF3E0;
color: #FFA726;
}
.category-housing {
background-color: #E8F5E9;
color: #66BB6A;
}
.category-entertainment {
background-color: #F3E5F5;
color: #AB47BC;
}
.transaction-amount.income {
color: var(--success-color);
font-weight: 600;
}
.transaction-amount.expense {
color: var(--accent-color);
font-weight: 600;
}
/* 图表容器 */
.chart-container {
background-color: var(--card-bg);
border-radius: 12px;
padding: 20px;
box-shadow: var(--shadow);
margin-top: 20px;
}
.chart-header {
margin-bottom: 20px;
}
.tabs {
display: flex;
border-bottom: 1px solid #eee;
margin-bottom: 20px;
}
.tab {
padding: 10px 20px;
cursor: pointer;
border-bottom: 2px solid transparent;
}
.tab.active {
border-bottom: 2px solid var(--primary-color);
color: var(--primary-color);
font-weight: 500;
}
/* 添加交易表单 */
.add-transaction-form {
display: none;
background-color: var(--card-bg);
border-radius: 12px;
padding: 20px;
box-shadow: var(--shadow);
margin-top: 20px;
}
.form-group {
margin-bottom: 15px;
}
.form-label {
display: block;
margin-bottom: 8px;
font-weight: 500;
}
.form-control {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 6px;
font-family: inherit;
}
.form-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-top: 20px;
}
/* 响应式设计 */
@media (max-width: 768px) {
.main-layout {
grid-template-columns: 1fr;
}
.overview-cards {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<!-- 头部区域 -->
<header>
<div class="logo">轻<span>记账</span></div>
<div class="user-profile">
<span>欢迎回来，用户</span>
<div class="user-avatar">U</div>
</div>
</header>
<!-- 主布局 -->
<div class="main-layout">
<!-- 侧边栏导航 -->
<aside class="sidebar">
<ul class="nav-menu">
<li class="nav-item">
<a href="#" class="nav-link active">
<i>📊</i> 仪表盘
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i>💰</i> 交易记录
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i>📈</i> 统计分析
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i>📅</i> 预算规划
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i>🏷️</i> 分类管理
</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">
<i>⚙️</i> 设置
</a>
</li>
</ul>
</aside>
<!-- 主内容区 -->
<main class="main-content">
<!-- 概览卡片 -->
<div class="overview-cards">
<div class="card income">
<div class="card-header">
<div class="card-title">本月收入</div>
<i>⬆️</i>
</div>
<div class="card-value">¥8,500.00</div>
</div>
<div class="card expense">
<div class="card-header">
<div class="card-title">本月支出</div>
<i>⬇️</i>
</div>
<div class="card-value">¥4,200.00</div>
</div>
<div class="card balance">
<div class="card-header">
<div class="card-title">结余</div>
<i>💰</i>
</div>
<div class="card-value">¥4,300.00</div>
</div>
</div>
<!-- 交易记录部分 -->
<div class="transactions">
<div class="section-header">
<h2 class="section-title">最近交易</h2>
<div>
<button class="btn" id="addTransactionBtn">添加交易</button>
</div>
</div>
<table class="transaction-table">
<thead>
<tr>
<th>日期</th>
<th>描述</th>
<th>分类</th>
<th>金额</th>
</tr>
</thead>
<tbody>
<tr class="transaction-row">
<td>2023-05-15</td>
<td>工资收入</td>
<td><span class="transaction-category category-housing">工资</span></td>
<td class="transaction-amount income">+¥8,500.00</td>
</tr>
<tr class="transaction-row">
<td>2023-05-14</td>
<td>超市购物</td>
<td><span class="transaction-category category-shopping">购物</span></td>
<td class="transaction-amount expense">-¥256.80</td>
</tr>
<tr class="transaction-row">
<td>2023-05-12</td>
<td>餐厅用餐</td>
<td><span class="transaction-category category-food">餐饮</span></td>
<td class="transaction-amount expense">-¥128.00</td>
</tr>
<tr class="transaction-row">
<td>2023-05-10</td>
<td>地铁交通</td>
<td><span class="transaction-category category-transport">交通</span></td>
<td class="transaction-amount expense">-¥15.00</td>
</tr>
<tr class="transaction-row">
<td>2023-05-08</td>
<td>电影票</td>
<td><span class="transaction-category category-entertainment">娱乐</span></td>
<td class="transaction-amount expense">-¥85.00</td>
</tr>
</tbody>
</table>
</div>
<!-- 添加交易表单 (默认隐藏) -->
<div class="add-transaction-form" id="addTransactionForm">
<h3>添加新交易</h3>
<form id="transactionForm">
<div class="form-group">
<label for="transactionType" class="form-label">类型</label>
<select id="transactionType" class="form-control">
<option value="income">收入</option>
<option value="expense">支出</option>
</select>
</div>
<div class="form-group">
<label for="transactionAmount" class="form-label">金额</label>
<input type="number" id="transactionAmount" class="form-control" placeholder="0.00">
</div>
<div class="form-group">
<label for="transactionCategory" class="form-label">分类</label>
<select id="transactionCategory" class="form-control">
<option value="food">餐饮</option>
<option value="transport">交通</option>
<option value="shopping">购物</option>
<option value="housing">住房</option>
<option value="entertainment">娱乐</option>
<option value="salary">工资</option>
<option value="other">其他</option>
</select>
</div>
<div class="form-group">
<label for="transactionDate" class="form-label">日期</label>
<input type="date" id="transactionDate" class="form-control">
</div>
<div class="form-group">
<label for="transactionDescription" class="form-label">描述</label>
<input type="text" id="transactionDescription" class="form-control" placeholder="交易描述">
</div>
<div class="form-actions">
<button type="button" class="btn btn-outline" id="cancelTransactionBtn">取消</button>
<button type="submit" class="btn">保存</button>
</div>
</form>
</div>
<!-- 图表部分 -->
<div class="chart-container">
<div class="chart-header">
<h3>支出分析</h3>
<div class="tabs">
<div class="tab active">本月</div>
<div class="tab">本季度</div>
<div class="tab">本年</div>
</div>
</div>
<canvas id="expenseChart"></canvas>
</div>
</main>
</div>
</div>
<script>
// 显示/隐藏添加交易表单
document.getElementById('addTransactionBtn').addEventListener('click', function() {
document.getElementById('addTransactionForm').style.display = 'block';
});
document.getElementById('cancelTransactionBtn').addEventListener('click', function() {
document.getElementById('addTransactionForm').style.display = 'none';
});
// 表单提交处理
document.getElementById('transactionForm').addEventListener('submit', function(e) {
e.preventDefault();
alert('交易已添加！');
document.getElementById('addTransactionForm').style.display = 'none';
// 这里可以添加实际的数据处理逻辑
});
// 初始化图表
const ctx = document.getElementById('expenseChart').getContext('2d');
const expenseChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: ['餐饮', '交通', '购物', '住房', '娱乐', '其他'],
datasets: [{
data: [1200, 500, 1800, 2500, 800, 400],
backgroundColor: [
'#FFB6B6',
'#A5C0DD',
'#FFD3B6',
'#A0D8B3',
'#E3B7F5',
'#D1D1D1'
],
borderWidth: 0
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'right',
},
tooltip: {
callbacks: {
label: function(context) {
const label = context.label || '';
const value = context.raw || 0;
const total = context.dataset.data.reduce((a, b) => a + b, 0);
const percentage = Math.round((value / total) * 100);
return `${label}: ¥${value} (${percentage}%)`;
}
}
}
},
cutout: '70%'
}
});
// 标签切换功能
const tabs = document.querySelectorAll('.tab');
tabs.forEach(tab => {
tab.addEventListener('click', function() {
tabs.forEach(t => t.classList.remove('active'));
this.classList.add('active');
// 这里可以添加根据标签切换数据的逻辑
});
});
</script>
</body>
</html>