From 6e763d9b860ee23edc93ebd962885f6217e75e6f Mon Sep 17 00:00:00 2001 From: 12975 <1297598740@qq.com> Date: Thu, 29 Jan 2026 01:03:38 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E9=A6=96=E9=A1=B5=E6=96=B0?= =?UTF-8?q?=E5=A2=9E=E4=BA=86=E9=AB=98=E7=BA=A7=E7=8E=BB=E7=92=83=E6=8B=9F?= =?UTF-8?q?=E7=89=A9=E9=A3=8E=E6=A0=BC=E7=9A=84UI=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=EF=BC=8C=E5=8C=85=E6=8B=AC=E4=BB=AA=E8=A1=A8=E7=9B=98=E3=80=81?= =?UTF-8?q?=E5=BF=AB=E9=80=9F=E6=93=8D=E4=BD=9C=E5=92=8C=E5=81=A5=E5=BA=B7?= =?UTF-8?q?=E5=88=86=E6=95=B0=E7=BB=84=E4=BB=B6=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/Home.css | 148 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 148 insertions(+) diff --git a/src/pages/Home/Home.css b/src/pages/Home/Home.css index aff6b73..834a3ce 100644 --- a/src/pages/Home/Home.css +++ b/src/pages/Home/Home.css @@ -55,6 +55,154 @@ /* Reduced margin */ } +.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; +} + /* Quick Actions Section */ .quick-actions-section { display: grid;