u

code/base-project/base-app/test2.html

@@ -0,0 +1,118 @@
+<!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: "PingFang SC", "Helvetica", "Arial", sans-serif;
+    background-color: #f0f2f5;
+    display: flex;
+    justify-content: center;
+    padding: 16px;
+  }
+
+  .card {
+    width: 100%;
+    max-width: 420px;
+    border-radius: 24px;
+    padding: 24px;
+    background: linear-gradient(135deg, #667eea, #764ba2);
+    color: #fff;
+    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+  }
+
+  .card-header {
+    font-size: 14px;
+    opacity: 0.85;
+  }
+
+  .balance {
+    font-size: 32px;
+    font-weight: 700;
+    letter-spacing: 1px;
+  }
+
+  .summary {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+  }
+
+  .summary-item {
+    flex: 1;
+    background-color: rgba(255,255,255,0.1);
+    border-radius: 16px;
+    padding: 14px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transition: transform 0.2s;
+  }
+
+  .summary-item:hover {
+    transform: translateY(-3px);
+  }
+
+  .summary-item .title {
+    font-size: 13px;
+    opacity: 0.8;
+    margin-bottom: 6px;
+  }
+
+  .summary-item .amount {
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 4px;
+  }
+
+  .summary-item .percent {
+    font-size: 12px;
+    font-weight: bold;
+  }
+
+  .percent.up {
+    color: #16c784; /* 上升绿色 */
+  }
+
+  .percent.down {
+    color: #ff6b6b; /* 下降红色 */
+  }
+
+  @media (max-width: 360px) {
+    .balance {
+      font-size: 28px;
+    }
+    .summary-item .amount {
+      font-size: 18px;
+    }
+  }
+</style>
+</head>
+<body>
+
+<div class="card">
+  <div class="card-header">账户余额</div>
+  <div class="balance">¥ 8,520.00</div>
+
+  <div class="summary">
+    <div class="summary-item">
+      <div class="title">收入</div>
+      <div class="amount">¥ 12,000.00</div>
+      <div class="percent up">+15% ↑</div>
+    </div>
+    <div class="summary-item">
+      <div class="title">支出</div>
+      <div class="amount">¥ 3,480.00</div>
+      <div class="percent down">-5% ↓</div>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>