workspace/code/base-project/base-app/test2.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: Arial, sans-serif;
    background-color: rgba(0,0,0,0.3);
  }

  /* 弹出层 */
  .drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    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);
  }

  /* 收入/支出切换 */
  .type-switch {
    display: flex;
    background: #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
  }
  .type-switch div {
    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;
  }
  .input-group label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
  }
  .input-group input {
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #ddd;
    font-size: 16px;
  }

  /* 保存按钮 */
  .btn-save {
    width: 100%;
    padding: 12px;
    background-color: #ff9f1c;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 12px;
    cursor: pointer;
  }
</style>
</head>
<body>

<div class="drawer">
  <!-- 收入/支出切换 -->
  <div class="type-switch">
    <div class="active" data-type="income">收入</div>
    <div data-type="expense">支出</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>

  <!-- 输入金额 -->
  <div class="input-group">
    <label>金额</label>
    <input type="number" placeholder="请输入金额">
  </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