From 784c3e502a232b1b0f073e3b6a70b7fa7c7b32e1 Mon Sep 17 00:00:00 2001 From: 12975 <1297598740@qq.com> Date: Thu, 29 Jan 2026 01:00:12 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E4=B8=BA=E9=A6=96=E9=A1=B5=E5=AE=9E?= =?UTF-8?q?=E7=8E=B0=E7=8E=BB=E7=92=83=E6=8B=9F=E6=80=81=E9=A3=8E=E6=A0=BC?= =?UTF-8?q?=E7=9A=84CSS=E5=B8=83=E5=B1=80=E5=92=8C=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Home/Home.css | 90 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 90 insertions(+) diff --git a/src/pages/Home/Home.css b/src/pages/Home/Home.css index a64cefc..aff6b73 100644 --- a/src/pages/Home/Home.css +++ b/src/pages/Home/Home.css @@ -131,6 +131,96 @@ color: var(--color-text-secondary); } +/* 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; + transition: transform 0.2s ease; +} + +.health-score-btn:hover { + transform: scale(1.05); +} + +.health-ring { + width: 42px; + height: 42px; + 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: 3; +} + +.ring-fill { + fill: none; + stroke: var(--color); + stroke-width: 3; + stroke-linecap: round; + transition: stroke-dasharray 1s ease-out; +} + +.health-val { + position: absolute; + font-family: 'Outfit', sans-serif; + font-size: 0.8rem; + 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.5rem 1rem; + 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.85rem; + cursor: pointer; + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + box-shadow: var(--shadow-sm); + backdrop-filter: blur(4px); +} + +.quick-action-btn-small:hover { + background: var(--accent-primary); + color: white; + transform: translateY(-2px); + box-shadow: var(--shadow-glow-sm); +} + /* Content Columns */ .content-columns { display: grid;