workspace/code/base-project/base-app/test.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>
<style>
  body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: #f7f8fa;
    padding: 12px;
  }

  /* 顶部搜索 + 筛选 */
  .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>