diff --git a/src/components/report/SummaryCard/SummaryCard.css b/src/components/report/SummaryCard/SummaryCard.css index 84a4667..5bf6cb4 100644 --- a/src/components/report/SummaryCard/SummaryCard.css +++ b/src/components/report/SummaryCard/SummaryCard.css @@ -41,78 +41,68 @@ } .summary-card:hover::before { - opacity: 1; + transform: rotate(15deg) translate(-10%, -10%); } /* Variant Colors */ .summary-card--primary { - --card-glow-color: rgba(79, 70, 229, 0.2); - --card-accent-color: var(--color-primary); + --accent-rgb: 217, 119, 6; } .summary-card--success { - --card-glow-color: rgba(16, 185, 129, 0.2); - --card-accent-color: var(--color-success); + --accent-rgb: 5, 150, 105; } .summary-card--danger { - --card-glow-color: rgba(239, 68, 68, 0.2); - --card-accent-color: var(--color-error); + --accent-rgb: 220, 38, 38; } .summary-card--warning { - --card-glow-color: rgba(245, 158, 11, 0.2); - --card-accent-color: var(--color-warning); + --accent-rgb: 245, 158, 11; } .summary-card__header { display: flex; - align-items: flex-start; justify-content: space-between; - margin-bottom: var(--spacing-md); + align-items: center; + margin-bottom: var(--spacing-xs); + z-index: 1; } .summary-card__icon-wrapper { - width: 48px; - height: 48px; - border-radius: 14px; + width: 42px; + height: 42px; + border-radius: 12px; + background: rgba(var(--accent-rgb), 0.1); + color: rgb(var(--accent-rgb)); display: flex; align-items: center; justify-content: center; - font-size: 1.25rem; - background: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2)); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); - color: var(--card-accent-color); - transition: all 0.3s ease; -} - -.summary-card:hover .summary-card__icon-wrapper { - transform: scale(1.1) rotate(5deg); - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); + box-shadow: inset 0 0 10px rgba(var(--accent-rgb), 0.05); } .summary-card__title { font-size: 0.875rem; font-weight: 600; - color: var(--color-text-secondary); - margin: 0; + color: var(--text-secondary); text-transform: uppercase; - letter-spacing: 0.5px; + letter-spacing: 1px; } .summary-card__body { display: flex; flex-direction: column; - gap: var(--spacing-xs); + gap: 0.25rem; + z-index: 1; } .summary-card__value { font-family: 'Outfit', sans-serif; - font-size: 2.5rem; - font-weight: 700; - color: var(--color-text); - line-height: 1.1; - letter-spacing: -1px; + font-size: 2.25rem; + font-weight: 800; + color: var(--text-primary); + line-height: 1; + letter-spacing: -1.5px; } .summary-card__subtitle { diff --git a/src/pages/Accounts/Accounts.css b/src/pages/Accounts/Accounts.css index 489ccf9..e505e94 100644 --- a/src/pages/Accounts/Accounts.css +++ b/src/pages/Accounts/Accounts.css @@ -64,51 +64,42 @@ } .accounts-page__btn--create { - background: var(--color-primary); - color: white; - box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3); + background: var(--accent-primary); + color: var(--text-inverse); + box-shadow: var(--shadow-glow-sm); } .accounts-page__btn--create:hover:not(:disabled) { transform: translateY(-2px); - box-shadow: 0 6px 16px rgba(var(--color-primary-rgb), 0.4); - filter: brightness(1.1); + background: var(--accent-primary-hover); + box-shadow: var(--shadow-glow-md); } .accounts-page__btn--transfer { - background: white; - color: var(--color-text); - border: 1px solid var(--color-border); + background: var(--bg-secondary); + color: var(--text-primary); + border: 1px solid var(--border-color); } .accounts-page__btn--transfer:hover:not(:disabled) { - background: var(--color-bg-alt); - border-color: var(--color-primary); - color: var(--color-primary); -} - -.accounts-page__btn--cancel { - background: var(--glass-bg); - color: var(--color-text); - border: 1px solid var(--glass-border); -} - -.accounts-page__btn--cancel:hover:not(:disabled) { - background: var(--glass-bg-heavy); + background: var(--bg-hover); + border-color: var(--accent-primary); + color: var(--accent-primary); } .accounts-page__btn--graph { background: linear-gradient(135deg, #8B5CF6, #6366F1); color: white; - box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3); + box-shadow: 0 8px 16px rgba(139, 92, 246, 0.2); } .accounts-page__btn--graph:hover:not(:disabled) { transform: translateY(-2px); - box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4); + box-shadow: 0 12px 24px rgba(139, 92, 246, 0.3); filter: brightness(1.1); } + .accounts-page__btn--delete { background: var(--color-error); color: white; diff --git a/src/pages/Accounts/Accounts.tsx b/src/pages/Accounts/Accounts.tsx index 6063a32..a1947a1 100644 --- a/src/pages/Accounts/Accounts.tsx +++ b/src/pages/Accounts/Accounts.tsx @@ -199,7 +199,9 @@ export const Accounts: React.FC = () => { />
-
↑
+
+ +
总资产 @@ -209,7 +211,9 @@ export const Accounts: React.FC = () => {
-
↓
+
+ +
总负债 @@ -219,6 +223,7 @@ export const Accounts: React.FC = () => {
+ {/* Error Message */} {error && (
diff --git a/src/pages/Home/Home.css b/src/pages/Home/Home.css index cca4795..a070c97 100644 --- a/src/pages/Home/Home.css +++ b/src/pages/Home/Home.css @@ -16,7 +16,24 @@ margin-bottom: var(--spacing-xl); } -.home-greeting h1 { +.home-greeting { + display: flex; + flex-direction: column; +} + +.greeting-title-wrapper { + display: flex; + align-items: baseline; + gap: var(--spacing-md); + cursor: pointer; + transition: opacity 0.2s; +} + +.greeting-title-wrapper:hover { + opacity: 0.8; +} + +.greeting-text { font-size: 2.5rem; font-weight: 800; margin: 0; @@ -24,16 +41,47 @@ -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; - color: var(--color-primary); + color: var(--accent-primary); line-height: 1.1; letter-spacing: -1px; } +.current-ledger-badge { + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.4rem 0.8rem; + background: var(--bg-hover); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + font-size: 0.875rem; + font-weight: 600; + color: var(--text-secondary); + transition: all 0.3s ease; +} + +.greeting-title-wrapper:hover .current-ledger-badge { + border-color: var(--accent-primary); + color: var(--accent-primary); + transform: translateY(-1px); +} + +.chevron-icon { + opacity: 0.5; + transition: transform 0.3s ease; +} + +.greeting-title-wrapper:hover .chevron-icon { + transform: translateY(2px); + opacity: 1; +} + .home-date { - color: var(--color-text-secondary); + color: var(--text-muted); font-size: 1rem; - margin: 0.25rem 0 0 0; + margin: 0.5rem 0 0 0; font-weight: 500; + letter-spacing: 0.5px; } .quick-action-btn-small { @@ -41,22 +89,37 @@ align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; - background: var(--color-primary); - color: white; + background: var(--accent-primary); + color: var(--text-inverse); border: none; border-radius: var(--radius-full); font-weight: 600; cursor: pointer; - transition: all 0.2s ease; - box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: var(--shadow-glow-sm); } .quick-action-btn-small:hover { transform: translateY(-2px); background: var(--accent-primary-hover); - box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4); + box-shadow: var(--shadow-glow-md); } +@keyframes meshGradient { + 0% { + background-position: 0% 50%; + } + + 50% { + background-position: 100% 50%; + } + + 100% { + background-position: 0% 50%; + } +} + + /* Dashboard Grid */ .dashboard-grid { display: grid; @@ -90,12 +153,15 @@ .home-net-worth-card { grid-column: 1; /* First column but spans depending on layout */ - background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%); - color: white; + 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: 0 10px 30px rgba(37, 99, 235, 0.25); + box-shadow: var(--shadow-glow-primary); } + .home-net-worth-card .card-bg-decoration { position: absolute; top: -50%; @@ -133,6 +199,7 @@ 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 { @@ -141,8 +208,10 @@ background: rgba(255, 255, 255, 0.2); padding: 6px 12px; border-radius: var(--radius-full); - backdrop-filter: blur(4px); - font-weight: 500; + backdrop-filter: blur(8px); + -webkit-backdrop-filter: blur(8px); + font-weight: 600; + border: 1px solid rgba(255, 255, 255, 0.2); } /* Secondary Cards */ diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx index 26e1fe2..ed329e7 100644 --- a/src/pages/Home/Home.tsx +++ b/src/pages/Home/Home.tsx @@ -222,18 +222,16 @@ function Home() {
-

setLedgerSelectorOpen(true)} - style={{ cursor: 'pointer', display: 'flex', alignItems: 'center', gap: '0.5rem' }} - title="点击切换账本" - > - {getGreeting()} +
setLedgerSelectorOpen(true)}> +

{getGreeting()}

{currentLedger && ( - - · {currentLedger.name} - +
+ + {currentLedger.name} + +
)} -

+

{new Date().toLocaleDateString('zh-CN', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}

+
{/* Asset Dashboard - Requirement 8.1 */}
diff --git a/src/pages/Login/Login.css b/src/pages/Login/Login.css index a4deec0..74a4ebf 100644 --- a/src/pages/Login/Login.css +++ b/src/pages/Login/Login.css @@ -6,31 +6,70 @@ justify-content: center; background-color: var(--bg-primary); /* Rich Mesh Gradient Background */ - background-image: - radial-gradient(at 0% 0%, rgba(37, 99, 235, 0.15) 0px, transparent 50%), - radial-gradient(at 100% 100%, rgba(6, 182, 212, 0.15) 0px, transparent 50%); + background: linear-gradient(-45deg, #1e293b, #0f172a, #1e1b4b, #2e1065); + background-size: 400% 400%; + animation: meshGradient 15s ease infinite; padding: 1rem; position: relative; overflow: hidden; } +/* Background Glowing Orbs */ +.login-page::before, +.login-page::after { + content: ''; + position: absolute; + width: 40vw; + height: 40vw; + border-radius: 50%; + filter: blur(80px); + z-index: 0; + opacity: 0.15; +} + +.login-page::before { + top: -10vw; + left: -10vw; + background: var(--accent-primary); + animation: float 20s ease-in-out infinite alternate; +} + +.login-page::after { + bottom: -10vw; + right: -10vw; + background: #3b82f6; + animation: float 25s ease-in-out infinite alternate-reverse; +} + +@keyframes float { + 0% { + transform: translate(0, 0); + } + + 100% { + transform: translate(10vw, 10vw); + } +} + + /* Glass Card */ .login-container { - background: rgba(255, 255, 255, 0.7); + background: var(--glass-panel-bg); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); - border: 1px solid rgba(255, 255, 255, 0.5); - border-radius: 1.5rem; + border: 1px solid var(--glass-border); + border-radius: 2rem; /* Larger radius */ padding: 3rem; max-width: 440px; width: 100%; - box-shadow: - 0 20px 40px -10px rgba(0, 0, 0, 0.1), - 0 0 0 1px rgba(255, 255, 255, 0.5) inset; - animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1); + box-shadow: var(--shadow-2xl), var(--shadow-glow-primary); + animation: slideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1); + position: relative; + z-index: 1; } + .login-header { text-align: center; margin-bottom: 2.5rem;