u
This commit is contained in:
oneao committed
1 parent
18e9d94b77
commit
1f82f1dd1f
16 files changed
+1048
-297
No files matched your search
@@ -1,179 +1,143 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>记账弹出示例</title>
|
||||
<title>家庭记账列表</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: rgba(0,0,0,0.3);
|
||||
background: #f9f9f9;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
/* 弹出层 */
|
||||
.drawer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
.record-list {
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.record {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 15px;
|
||||
margin-bottom: 8px;
|
||||
background: #fff;
|
||||
border-top-left-radius: 16px;
|
||||
border-top-right-radius: 16px;
|
||||
padding: 16px;
|
||||
max-height: 80%;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 -4px 12px rgba(0,0,0,0.2);
|
||||
border-radius: 8px;
|
||||
position: relative;
|
||||
transition: background 0.2s;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* 收入/支出切换 */
|
||||
.type-switch {
|
||||
display: flex;
|
||||
background: #f0f0f0;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 16px;
|
||||
.record:hover {
|
||||
background: #f2f2f2;
|
||||
}
|
||||
.type-switch div {
|
||||
|
||||
.category-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #eee;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
.type-switch div.active {
|
||||
background-color: #ff9f1c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 子分类横向滚动 */
|
||||
.sub-categories {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
gap: 12px;
|
||||
padding-bottom: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.sub-category {
|
||||
flex: 0 0 auto;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: #fef6e4;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 12px;
|
||||
}
|
||||
.sub-category.active {
|
||||
background-color: #ff9f1c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 输入框 */
|
||||
.input-group {
|
||||
margin-bottom: 16px;
|
||||
.name {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
.input-group label {
|
||||
|
||||
.remark {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
display: none;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.record:hover .remark {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
.input-group input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ddd;
|
||||
|
||||
.right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* 保存按钮 */
|
||||
.btn-save {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background-color: #ff9f1c;
|
||||
.amount.income {
|
||||
color: green;
|
||||
}
|
||||
|
||||
.amount.expense {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.member-avatar {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: #2196f3;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="drawer">
|
||||
<!-- 收入/支出切换 -->
|
||||
<div class="type-switch">
|
||||
<div class="active" data-type="income">收入</div>
|
||||
<div data-type="expense">支出</div>
|
||||
<div class="record-list">
|
||||
<div class="record">
|
||||
<div class="category-icon">🛒</div>
|
||||
<div class="info">
|
||||
<div class="name">购物</div>
|
||||
<div class="remark">买菜和日用品</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="amount expense">-50.00</div>
|
||||
<div class="member-avatar">爸</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 子分类 -->
|
||||
<div class="sub-categories" id="subCategories">
|
||||
<div class="sub-category active" data-id="1">餐饮</div>
|
||||
<div class="sub-category" data-id="2">交通</div>
|
||||
<div class="sub-category" data-id="3">购物</div>
|
||||
<div class="sub-category" data-id="4">娱乐</div>
|
||||
<div class="sub-category" data-id="5">工资</div>
|
||||
<div class="sub-category" data-id="6">兼职</div>
|
||||
<div class="record">
|
||||
<div class="category-icon">🍔</div>
|
||||
<div class="info">
|
||||
<div class="name">午餐</div>
|
||||
<div class="remark">外卖订单</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="amount expense">-30.00</div>
|
||||
<div class="member-avatar">妈</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入金额 -->
|
||||
<div class="input-group">
|
||||
<label>金额</label>
|
||||
<input type="number" placeholder="请输入金额">
|
||||
<div class="record">
|
||||
<div class="category-icon">💰</div>
|
||||
<div class="info">
|
||||
<div class="name">工资</div>
|
||||
<div class="remark">11月工资到账</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="amount income">+5000.00</div>
|
||||
<div class="member-avatar">我</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 输入备注 -->
|
||||
<div class="input-group">
|
||||
<label>备注</label>
|
||||
<input type="text" placeholder="输入备注">
|
||||
</div>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<button class="btn-save">保存</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 收入/支出切换
|
||||
const typeSwitch = document.querySelectorAll('.type-switch div');
|
||||
typeSwitch.forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
typeSwitch.forEach(i => i.classList.remove('active'));
|
||||
item.classList.add('active');
|
||||
// 可在此刷新子分类
|
||||
console.log('切换类型:', item.dataset.type);
|
||||
});
|
||||
});
|
||||
|
||||
// 子分类选择
|
||||
const subCategories = document.querySelectorAll('.sub-category');
|
||||
subCategories.forEach(item => {
|
||||
item.addEventListener('click', () => {
|
||||
subCategories.forEach(i => i.classList.remove('active'));
|
||||
item.classList.add('active');
|
||||
console.log('选择子分类:', item.textContent);
|
||||
});
|
||||
});
|
||||
|
||||
// 保存按钮
|
||||
document.querySelector('.btn-save').addEventListener('click', () => {
|
||||
const type = document.querySelector('.type-switch div.active').dataset.type;
|
||||
const category = document.querySelector('.sub-category.active').textContent;
|
||||
const amount = document.querySelectorAll('input')[0].value;
|
||||
const remark = document.querySelectorAll('input')[1].value;
|
||||
console.log({ type, category, amount, remark });
|
||||
alert('保存成功！');
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
89
|
||||
Reference in new issue
Block a user