From ad0c1575aa536ebdf198f3f15ac6f9085fb39cfd Mon Sep 17 00:00:00 2001 From: 12975 <1297598740@qq.com> Date: Sun, 1 Feb 2026 23:58:49 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=AD=98=E9=92=B1?= =?UTF-8?q?=E7=BD=90=E8=BF=9B=E5=BA=A6=E5=8F=AF=E8=A7=86=E5=8C=96=E7=BB=84?= =?UTF-8?q?=E4=BB=B6=E5=8F=8A=E9=A2=84=E7=AE=97=E5=8D=A1=E7=89=87=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../budget/BudgetCard/BudgetCard.css | 288 +++++++++--------- .../SavingsPotVisual/SavingsPotVisual.tsx | 22 +- 2 files changed, 153 insertions(+), 157 deletions(-) diff --git a/src/components/budget/BudgetCard/BudgetCard.css b/src/components/budget/BudgetCard/BudgetCard.css index 8db547a..4c8b9f8 100644 --- a/src/components/budget/BudgetCard/BudgetCard.css +++ b/src/components/budget/BudgetCard/BudgetCard.css @@ -1,5 +1,5 @@ /** - * BudgetCard Component - Premium Glassmorphism Style + * BudgetCard Component - Skeuomorphic Bill/Receipt Style */ .budget-card { @@ -7,63 +7,40 @@ flex-direction: column; gap: 1.25rem; padding: 1.5rem; - background: var(--glass-panel-bg); - backdrop-filter: blur(16px); - -webkit-backdrop-filter: blur(16px); - border: 1px solid var(--glass-border); - border-radius: 24px; - box-shadow: var(--shadow-sm); + background: #FFF9F0; + /* Creamy receipt background */ + border-radius: 20px; + /* Smooth rounded corners */ + box-shadow: + 0 4px 24px rgba(74, 55, 40, 0.08), + 0 1px 2px rgba(74, 55, 40, 0.04); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; + border: 1px solid rgba(74, 55, 40, 0.03); + color: #4A3728; + /* Warm brown text */ } -/* Glass shine effect on hover */ -.budget-card::after { - content: ''; - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 70%); - transform: translateX(-100%); - transition: transform 0.6s ease; - pointer-events: none; -} - -.budget-card:hover::after { - transform: translateX(100%); -} - -.budget-card--clickable { - cursor: pointer; -} - -.budget-card--clickable:hover { - transform: translateY(-5px) scale(1.01); - box-shadow: - 0 20px 40px -10px rgba(0, 0, 0, 0.1), - inset 0 0 0 1px rgba(255, 255, 255, 0.2); - border-color: rgba(255, 255, 255, 0.4); - background: rgba(255, 255, 255, 0.9); -} - -[data-theme="dark"] .budget-card--clickable:hover { - background: rgba(40, 44, 52, 0.8); - border-color: rgba(255, 255, 255, 0.15); -} - -/* Top accent line */ +/* Subtle paper texture */ .budget-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; - height: 4px; - background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light)); - opacity: 0.8; + bottom: 0; + background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E"); + pointer-events: none; + opacity: 0.5; +} + +/* Hover effect - Lift */ +.budget-card--clickable:hover { + transform: translateY(-4px); + box-shadow: + 0 12px 32px rgba(74, 55, 40, 0.12), + 0 2px 4px rgba(74, 55, 40, 0.06); } /* Header */ @@ -72,27 +49,25 @@ justify-content: space-between; align-items: flex-start; min-height: 48px; + position: relative; + z-index: 1; } .budget-card__title-section { display: flex; flex-direction: column; - gap: 4px; + gap: 6px; flex: 1; - min-width: 0; - padding-right: 1rem; } .budget-card__name { margin: 0; - font-family: 'Outfit', sans-serif; - font-size: 1.25rem; + font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; + font-size: 1.35rem; font-weight: 700; - color: var(--text-primary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - letter-spacing: -0.01em; + color: #2D241E; + /* Darker brown for title */ + letter-spacing: -0.02em; } .budget-card__meta { @@ -103,27 +78,12 @@ } .budget-card__period { - font-size: 0.7rem; - font-weight: 700; + font-size: 0.75rem; + font-weight: 600; + color: #8C7B6D; + /* Muted brown */ text-transform: uppercase; - letter-spacing: 0.5px; - color: var(--text-tertiary); - background: rgba(0, 0, 0, 0.04); - padding: 2px 8px; - border-radius: 6px; -} - -.budget-card__meta-item { - display: flex; - align-items: center; - gap: 4px; - font-size: 0.8rem; - color: var(--text-secondary); -} - -.budget-card__separator { - color: var(--glass-border); - font-size: 0.6rem; + letter-spacing: 0.05em; } /* Amount Section */ @@ -135,149 +95,185 @@ } .budget-card__amount { - font-family: 'Outfit', sans-serif; - font-size: 1.5rem; + font-family: 'Outfit', monospace; + /* Monospace vibe for numbers */ + font-size: 1.75rem; font-weight: 800; - color: var(--text-primary); - line-height: 1.1; - letter-spacing: -0.02em; + color: #2D241E; + letter-spacing: -0.03em; + font-variant-numeric: tabular-nums; } -/* Status Badges */ +/* Status Badges - Soft/Pastel look */ .budget-card__status { - margin-top: 4px; - font-size: 0.7rem; + margin-top: 6px; + font-size: 0.75rem; font-weight: 700; - text-transform: uppercase; - padding: 2px 8px; - border-radius: 99px; - letter-spacing: 0.05em; - display: inline-block; + padding: 4px 10px; + border-radius: 8px; + /* Slightly squarer than pill */ + letter-spacing: 0.02em; } .budget-card__status--normal { - background: rgba(16, 185, 129, 0.1); - color: var(--color-success); + background: #E6F4EA; + /* Soft Green */ + color: #1E8E3E; } .budget-card__status--warning { - background: rgba(245, 158, 11, 0.1); - color: var(--color-warning); + background: #FEF7E0; + /* Soft Amber */ + color: #F9AB00; } .budget-card__status--over { - background: rgba(239, 68, 68, 0.1); - color: var(--color-error); + background: #FCE8E6; + /* Soft Red */ + color: #D93025; } -/* Footer Stats */ +/* Progress Bar Container Override */ +.budget-card__progress-section { + position: relative; + z-index: 1; + padding: 8px 0; +} + +/* Footer Stats - Separated by dashed line */ .budget-card__footer { display: flex; justify-content: space-between; - align-items: center; + align-items: flex-end; + /* Align bottom to match numbers */ margin-top: 0.25rem; - padding-top: 1rem; - border-top: 1px dashed var(--glass-border); + padding-top: 1.25rem; + border-top: 2px dashed #E6DCCD; + /* Dashed separator */ + position: relative; + z-index: 1; } .budget-card__stats { display: flex; - gap: 2rem; + width: 100%; + justify-content: space-between; } .budget-card__stat { display: flex; flex-direction: column; + gap: 4px; } .budget-card__stat-label { - font-size: 0.7rem; + font-size: 0.75rem; + color: #8C7B6D; font-weight: 600; - text-transform: uppercase; - color: var(--text-tertiary); - letter-spacing: 0.05em; - margin-bottom: 2px; } .budget-card__stat-value { - font-family: 'Outfit', sans-serif; + font-family: 'Outfit', monospace; font-weight: 700; - font-size: 1.1rem; - color: var(--text-secondary); + font-size: 1.25rem; + color: #4A3728; } .budget-card__stat-value--negative { - color: var(--color-error); + color: #D93025; } /* Actions */ .budget-card__actions { display: flex; gap: 0.5rem; + position: absolute; + right: 1.5rem; + bottom: 5.5rem; + /* Position above footer */ opacity: 0; - transform: translateX(10px); - transition: all 0.3s ease; + transform: translateY(10px); + transition: all 0.2s ease; + z-index: 2; } .budget-card:hover .budget-card__actions { opacity: 1; - transform: translateX(0); + transform: translateY(0); } .budget-card__action-btn { - width: 32px; - height: 32px; + width: 36px; + height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; - border: 1px solid transparent; - background: rgba(0, 0, 0, 0.04); - color: var(--text-secondary); + border: none; + background: #FFF; + color: #8C7B6D; + box-shadow: 0 2px 8px rgba(74, 55, 40, 0.1); cursor: pointer; transition: all 0.2s ease; } .budget-card__action-btn:hover { - background: white; - color: var(--text-primary); - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); - transform: translateY(-2px); + background: #4A3728; + color: #FFF; + transform: scale(1.05); } .budget-card__action-btn--delete:hover { - background: #fef2f2; - color: var(--color-error); - box-shadow: 0 4px 10px rgba(239, 68, 68, 0.15); + background: #D93025; + color: #FFF; } -/* Rolling Badge */ -.budget-card__rolling-badge { - display: flex; - align-items: center; - gap: 4px; - font-size: 0.65rem; - font-weight: 700; - background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); - color: white; - padding: 2px 8px; - border-radius: 99px; - box-shadow: 0 2px 4px rgba(245, 158, 11, 0.2); +/* Dark Mode Adaptation - "Dark Receipt" */ +[data-theme="dark"] .budget-card { + background: #1F1B18; + border-color: #38302A; + box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); +} + +[data-theme="dark"] .budget-card__name, +[data-theme="dark"] .budget-card__amount, +[data-theme="dark"] .budget-card__stat-value { + color: #E6DCCD; +} + +[data-theme="dark"] .budget-card__footer { + border-top-color: #38302A; +} + +[data-theme="dark"] .budget-card__period, +[data-theme="dark"] .budget-card__stat-label { + color: #8C7B6D; +} + +[data-theme="dark"] .budget-card__status--normal { + background: rgba(30, 142, 62, 0.2); + color: #81C995; +} + +[data-theme="dark"] .budget-card__status--warning { + background: rgba(249, 171, 0, 0.2); + color: #FDD663; +} + +[data-theme="dark"] .budget-card__status--over { + background: rgba(217, 48, 37, 0.2); + color: #F28B82; } /* Mobile */ @media (max-width: 600px) { - .budget-card { - padding: 1.25rem; - } - .budget-card__actions { opacity: 1; - /* Always show actions on mobile */ transform: none; - } - - .budget-card__amount { - font-size: 1.25rem; + position: relative; + right: auto; + bottom: auto; + margin-top: 1rem; + justify-content: flex-end; } } \ No newline at end of file diff --git a/src/components/budget/SavingsPotVisual/SavingsPotVisual.tsx b/src/components/budget/SavingsPotVisual/SavingsPotVisual.tsx index b426649..19c17c7 100644 --- a/src/components/budget/SavingsPotVisual/SavingsPotVisual.tsx +++ b/src/components/budget/SavingsPotVisual/SavingsPotVisual.tsx @@ -34,12 +34,12 @@ const SavingsPotVisual: React.FC = ({ onClick, }) => { // 计算进度百分比 - const progress = targetAmount > 0 - ? Math.min((currentAmount / targetAmount) * 100, 100) + const progress = targetAmount > 0 + ? Math.min((currentAmount / targetAmount) * 100, 100) : 0; - + // 计算剩余天数 - const daysRemaining = targetDate + const daysRemaining = targetDate ? Math.max(0, Math.ceil((new Date(targetDate).getTime() - Date.now()) / (1000 * 60 * 60 * 24))) : null; @@ -60,7 +60,7 @@ const SavingsPotVisual: React.FC = ({ }; return ( -
@@ -71,11 +71,11 @@ const SavingsPotVisual: React.FC = ({
- + {/* 罐子主体 */}
{/* 液体 */} -
@@ -83,14 +83,14 @@ const SavingsPotVisual: React.FC = ({
- + {/* 刻度线 */}
- + {/* 进度百分比 */}
{Math.round(progress)}% @@ -102,7 +102,7 @@ const SavingsPotVisual: React.FC = ({ {showDetails && (

{name}

- +
¥{formatAmount(currentAmount)} / @@ -111,7 +111,7 @@ const SavingsPotVisual: React.FC = ({ {/* 进度条 */}
-