u
This commit is contained in:
oneao committed
1 parent
7ed98a04c1
commit
dee2eab404
25 files changed
+1037
-518
No files matched your search
@@ -1,205 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>账单卡片 + 日期筛选</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
background: #f7f8fa;
|
||||
padding: 12px;
|
||||
}
|
||||
<!-- <Drawer
|
||||
isOpen={dateSelected}
|
||||
anchor="bottom"
|
||||
onClose={() => {
|
||||
setDateSelected(false)
|
||||
}}
|
||||
size="md"
|
||||
>
|
||||
<DrawerBackdrop />
|
||||
<DrawerContent style={{ padding: 12 }}>
|
||||
<DrawerBody style={{ padding: 0, marginTop: 0, marginBottom: 0 }}>
|
||||
<Text>This is the basic drawer component.</Text>
|
||||
<Text>This is the basic drawer component.</Text>
|
||||
<Text>This is the basic drawer component.</Text>
|
||||
<Text>This is the basic drawer component.</Text>
|
||||
<Text>This is the basic drawer component.</Text>
|
||||
<Text>This is the basic drawer component.</Text>
|
||||
<Text>This is the basic drawer component.</Text>
|
||||
<Text>This is the basic drawer component.</Text>
|
||||
<Text>This is the basic drawer component.</Text>
|
||||
<Text>This is the basic drawer component.</Text>
|
||||
<Text>This is the basic drawer component.</Text>
|
||||
<Text>This is the basic drawer component.</Text>
|
||||
<Text>This is the basic drawer component.</Text>
|
||||
<Text>This is the basic drawer component.</Text>
|
||||
<Text>This is the basic drawer component.</Text>
|
||||
<Text>This is the basic drawer component.</Text>
|
||||
<Text>This is the basic drawer component.</Text>
|
||||
<Text>This is the basic drawer component.</Text>
|
||||
<Text>This is the basic drawer component.</Text>
|
||||
</DrawerBody>
|
||||
</DrawerContent>
|
||||
</Drawer> -->
|
||||
|
||||
/* 顶部搜索 + 筛选 */
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
|
||||
padding: 8px 10px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: #f2f3f7;
|
||||
border-radius: 8px;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.search-box svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
fill: #999;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
margin-left: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
background: #007aff;
|
||||
color: #fff;
|
||||
padding: 7px 14px;
|
||||
border-radius: 8px;
|
||||
margin-left: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.card {
|
||||
background: #fff;
|
||||
border-radius: 16px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 3px 8px rgba(0,0,0,0.08);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-date {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.card-amount {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* 折叠日期筛选面板 */
|
||||
.filter-panel {
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
padding: 12px 16px;
|
||||
box-shadow: 0 3px 8px rgba(0,0,0,0.08);
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.35s ease;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.filter-panel.show {
|
||||
max-height: 220px;
|
||||
}
|
||||
|
||||
.filter-panel .panel-title {
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
margin-bottom: 6px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.filter-panel .date-input {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.filter-panel .panel-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.filter-panel .btn {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
border-radius: 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.btn.reset {
|
||||
background-color: #f2f3f7;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn.confirm {
|
||||
background-color: #007aff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 搜索 + 筛选 -->
|
||||
<div class="filter-bar">
|
||||
<div class="search-box">
|
||||
<svg viewBox="0 0 24 24"><path d="M10,2A8,8 0 0,1 18,10C18,11.85 17.37,13.55 16.28,14.86L22,20.59L20.59,22L14.86,16.28C13.55,17.37 11.85,18 10,18A8,8 0 0,1 2,10A8,8 0 0,1 10,2Z"/></svg>
|
||||
<input type="text" placeholder="搜索备注、分类...">
|
||||
</div>
|
||||
<div class="filter-btn" onclick="togglePanel()">筛选</div>
|
||||
</div>
|
||||
|
||||
<!-- 日期筛选面板 -->
|
||||
<div id="filterPanel" class="filter-panel">
|
||||
<div class="panel-title">选择日期</div>
|
||||
<input type="date" id="dateInput" class="date-input">
|
||||
|
||||
<div class="panel-actions">
|
||||
<div class="btn reset" onclick="resetDate()">重置</div>
|
||||
<div class="btn confirm" onclick="applyDate()">确定</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 卡片 -->
|
||||
<div class="card">
|
||||
<div id="cardDate" class="card-date">当前周期：本月</div>
|
||||
<div id="cardRemaining" class="card-amount">剩余：￥2500</div>
|
||||
<div class="card-summary">
|
||||
<div>收入：￥5000</div>
|
||||
<div>支出：￥2500</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const panel = document.getElementById('filterPanel');
|
||||
const cardDate = document.getElementById('cardDate');
|
||||
const cardRemaining = document.getElementById('cardRemaining');
|
||||
|
||||
function togglePanel() {
|
||||
panel.classList.toggle('show');
|
||||
}
|
||||
|
||||
function resetDate() {
|
||||
document.getElementById('dateInput').value = '';
|
||||
cardDate.innerText = "当前周期：本月";
|
||||
cardRemaining.innerText = "剩余：￥2500";
|
||||
panel.classList.remove('show');
|
||||
}
|
||||
|
||||
function applyDate() {
|
||||
const dateVal = document.getElementById('dateInput').value;
|
||||
if(dateVal) {
|
||||
// 模拟根据日期计算的金额，这里可替换为真实数据逻辑
|
||||
cardDate.innerText = `当前周期：${dateVal}`;
|
||||
cardRemaining.innerText = `剩余：￥${Math.floor(Math.random()*5000)}`;
|
||||
}
|
||||
panel.classList.remove('show');
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user