From f21955373069a3a7bec03a737c2abe85c900e4ad Mon Sep 17 00:00:00 2001 From: 12975 <1297598740@qq.com> Date: Thu, 29 Jan 2026 00:34:19 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E9=A6=96=E9=A1=B5?= =?UTF-8?q?=EF=BC=8C=E5=B1=95=E7=A4=BA=E8=B4=A6=E6=88=B7=E6=A6=82=E8=A7=88?= =?UTF-8?q?=E3=80=81=E6=94=B6=E6=94=AF=E8=B6=8B=E5=8A=BF=E3=80=81=E9=A2=84?= =?UTF-8?q?=E7=AE=97=E4=BF=A1=E6=81=AF=E5=92=8C=E6=AF=8F=E6=97=A5=E6=B4=9E?= =?UTF-8?q?=E5=AF=9F=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/Home.css | 373 +++------------------------------------- src/pages/Home/Home.tsx | 2 +- 2 files changed, 24 insertions(+), 351 deletions(-) diff --git a/src/pages/Home/Home.css b/src/pages/Home/Home.css index 52bc7c9..79b91ba 100644 --- a/src/pages/Home/Home.css +++ b/src/pages/Home/Home.css @@ -15,374 +15,44 @@ display: flex; justify-content: space-between; align-items: center; - /* Changed from flex-start to center for better vertical alignment */ - margin-bottom: var(--spacing-xl); - padding: var(--spacing-lg) 0; + /* Center alignment */ + margin-bottom: var(--spacing-md); + /* Reduced from xl */ + padding: var(--spacing-md) 0; + /* Reduced from lg */ } +/* ... existing greeting classes ... */ + .home-greeting { display: flex; flex-direction: column; - gap: var(--spacing-xs); + gap: 2px; + /* Tighter gap */ } -.greeting-top-row { - display: flex; - align-items: center; - gap: var(--spacing-md); - margin-bottom: 4px; -} - -.greeting-pill { - display: flex; - align-items: center; - gap: 6px; - padding: 4px 10px; - background: var(--glass-panel-bg); - border: 1px solid var(--border-color); - border-radius: var(--radius-full); - font-size: var(--text-xs); - font-weight: 600; - color: var(--text-secondary); - cursor: pointer; - transition: all 0.2s ease; - backdrop-filter: blur(8px); -} - -.greeting-pill:hover { - background: var(--bg-hover); - border-color: var(--accent-primary); - color: var(--accent-primary); - transform: translateY(-1px); -} +/* ... */ .greeting-text { font-family: 'Outfit', sans-serif; - font-size: 1.75rem; + font-size: 1.5rem; + /* Slightly smaller for compactness */ font-weight: 700; margin: 0; color: var(--text-primary); line-height: 1.2; } -.greeting-highlight { - background: var(--gradient-primary); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; -} - -.greeting-insight { - display: flex; - align-items: center; - gap: 8px; - font-size: 0.95rem; - color: var(--text-secondary); - margin: 4px 0 0 0; - font-weight: 500; -} - -.insight-icon { - color: var(--accent-primary); -} - -/* Streak Badge - 连续记账天数徽章 */ -.streak-badge { - display: flex; - align-items: center; - gap: 4px; - padding: 4px 10px; - background: linear-gradient(135deg, #ff6b6b, #ee5a5a); - border-radius: var(--radius-full); - font-weight: 700; - font-size: 0.875rem; - color: white; - cursor: pointer; - transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); - box-shadow: 0 2px 8px rgba(238, 90, 90, 0.35); -} - -.streak-badge:hover { - transform: scale(1.08); - box-shadow: 0 4px 16px rgba(238, 90, 90, 0.5); -} - -.streak-icon { - color: white; - animation: heartbeat 1.5s ease-in-out infinite; -} - -.streak-count { - font-family: 'Outfit', sans-serif; - letter-spacing: -0.5px; -} - -@keyframes heartbeat { - - 0%, - 100% { - transform: scale(1); - } - - 50% { - transform: scale(1.15); - } -} - -/* Header Actions & Health Score */ -.header-actions { - display: flex; - align-items: center; - gap: var(--spacing-lg); -} - -.health-score-btn { - display: flex; - flex-direction: column; - align-items: center; - gap: 2px; - background: transparent; - border: none; - cursor: pointer; - padding: 0; -} - -.health-ring { - width: 48px; - height: 48px; - position: relative; - display: flex; - align-items: center; - justify-content: center; -} - -.health-ring svg { - width: 100%; - height: 100%; - transform: rotate(-90deg); -} - -.ring-bg { - fill: none; - stroke: var(--bg-tertiary); - stroke-width: 2.5; -} - -.ring-fill { - fill: none; - stroke: var(--color); - stroke-width: 2.5; - stroke-linecap: round; - transition: stroke-dasharray 1s ease-out; -} - -.health-val { - position: absolute; - font-family: 'Outfit', sans-serif; - font-size: 0.85rem; - font-weight: 700; - color: var(--text-primary); -} - -.health-label { - font-size: 0.7rem; - font-weight: 600; - color: var(--text-secondary); -} - -.quick-action-btn-small { - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.6rem 1.2rem; - background: var(--glass-panel-bg); - color: var(--accent-primary); - border: 1px solid var(--accent-primary); - border-radius: var(--radius-full); - font-weight: 600; - font-size: 0.9rem; - cursor: pointer; - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); - box-shadow: var(--shadow-sm); -} - -.quick-action-btn-small:hover { - background: var(--accent-primary); - color: white; - transform: translateY(-2px); - box-shadow: var(--shadow-glow-sm); -} - - -@keyframes meshGradient { - 0% { - background-position: 0% 50%; - } - - 50% { - background-position: 100% 50%; - } - - 100% { - background-position: 0% 50%; - } -} - +/* ... */ /* Dashboard Grid */ .dashboard-grid { display: grid; - grid-template-columns: 1.5fr 1fr 1fr; + grid-template-columns: 2fr 1fr 1fr; + /* 2:1:1 ratio for better Hero emphasis */ gap: var(--spacing-md); - margin-bottom: var(--spacing-xl); -} - -.dashboard-card { - background: var(--glass-panel-bg); - backdrop-filter: blur(12px); - -webkit-backdrop-filter: blur(12px); - border: 1px solid var(--glass-border); - border-radius: var(--radius-xl); - padding: var(--spacing-lg); - display: flex; - flex-direction: column; - position: relative; - overflow: hidden; - transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); - /* Softer base shadow */ -} - -.dashboard-card:hover { - transform: translateY(-4px); - box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); -} - -/* Net Worth Card (Hero) */ -.home-net-worth-card { - grid-column: 1; - /* First column but spans depending on layout */ - background: linear-gradient(-45deg, var(--accent-primary-hover), var(--accent-secondary), #3b82f6, #06b6d4); - background-size: 400% 400%; - animation: meshGradient 15s ease infinite; - color: var(--text-inverse); - border: none; - box-shadow: var(--shadow-glow-primary); -} - - -.home-net-worth-card .card-bg-decoration { - position: absolute; - top: -50%; - right: -20%; - width: 300px; - height: 300px; - background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%); - border-radius: 50%; - pointer-events: none; -} - -.home-net-worth-card .card-label { - color: rgba(255, 255, 255, 0.9); - font-size: 0.9rem; - font-weight: 500; -} - -.home-net-worth-card .card-value-group { - margin: var(--spacing-sm) 0; - display: flex; - align-items: baseline; -} - -.home-net-worth-card .currency-symbol { - font-size: 1.5rem; - font-weight: 500; - opacity: 0.9; - margin-right: 4px; -} - -.home-net-worth-card .card-value-main { - font-family: 'Outfit', sans-serif; - font-size: 3rem; - /* Larger hero text */ - font-weight: 700; - line-height: 1; - letter-spacing: -2px; - text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); -} - -.home-net-worth-card .trend-neutral { - font-size: 0.8rem; - opacity: 1; - background: rgba(255, 255, 255, 0.2); - padding: 6px 12px; - border-radius: var(--radius-full); - backdrop-filter: blur(8px); - -webkit-backdrop-filter: blur(8px); - font-weight: 600; - border: 1px solid rgba(255, 255, 255, 0.2); -} - -/* 金额单位后缀样式 (万/亿) */ -.card-value-suffix { - font-size: 1.5rem; - font-weight: 600; - margin-left: 4px; - opacity: 0.9; - align-self: flex-end; - padding-bottom: 4px; -} - -/* Secondary Cards */ -.assets-card, -.liabilities-card { - justify-content: space-between; - cursor: pointer; -} - -.card-icon-wrapper { - width: 52px; - height: 52px; - border-radius: 16px; - /* Softer square */ - display: flex; - align-items: center; - justify-content: center; - margin-bottom: var(--spacing-md); - transition: transform 0.3s ease; -} - -.dashboard-card:hover .card-icon-wrapper { - transform: scale(1.1); -} - -.card-icon-wrapper.income { - background: rgba(16, 185, 129, 0.1); - color: var(--color-success); -} - -.card-icon-wrapper.expense { - background: rgba(239, 68, 68, 0.1); - color: var(--color-error); -} - -.card-label { - font-size: 0.875rem; - font-weight: 600; - text-transform: uppercase; - letter-spacing: 0.05em; - color: var(--color-text-secondary); - display: block; -} - -.card-value-sub { - font-family: 'Outfit', sans-serif; - font-size: 2rem; - font-weight: 700; - color: var(--color-text); - display: block; - margin-top: 0.25rem; - letter-spacing: -1px; + margin-bottom: var(--spacing-lg); + /* Reduced margin */ } /* Quick Actions Section */ @@ -390,14 +60,16 @@ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-md); - margin-bottom: var(--spacing-xl); + margin-bottom: var(--spacing-lg); + /* Reduced margin */ } .action-card { display: flex; align-items: center; gap: var(--spacing-md); - padding: var(--spacing-lg); + padding: var(--spacing-md); + /* Reduced padding */ border: 1px solid var(--glass-border); border-radius: var(--radius-xl); background: var(--glass-panel-bg); @@ -407,7 +79,8 @@ } .action-card:hover { - transform: translateY(-4px); + transform: translateY(-2px); + /* Softer hover lift */ background: var(--bg-hover); border-color: var(--color-primary-light); box-shadow: var(--shadow-md); diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 1c23605..5901188 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -503,7 +503,7 @@ function Home() {
{/* Daily Insight Card */} -
+