From 02a82e9801a34bf94a6d2a40169176445f8593f4 Mon Sep 17 00:00:00 2001 From: cocos02 Date: Sun, 14 Jun 2026 16:25:56 +0800 Subject: [PATCH] refactor: unify panel UI to gold design system, add backdrop blur to all overlays --- src/components/AchievementPanel.vue | 21 ++++++++++++------- src/components/BattleHUD.vue | 11 +++++----- src/components/BattleResult.vue | 27 +++++++++++++++---------- src/components/PauseMenu.vue | 31 +++++++++++++---------------- src/components/SaveLoadMenu.vue | 18 +++++++++-------- 5 files changed, 61 insertions(+), 47 deletions(-) diff --git a/src/components/AchievementPanel.vue b/src/components/AchievementPanel.vue index 1e135ab..0d62f73 100644 --- a/src/components/AchievementPanel.vue +++ b/src/components/AchievementPanel.vue @@ -41,7 +41,7 @@ const emit = defineEmits<{ - + @@ -50,7 +50,9 @@ const emit = defineEmits<{ .ach-overlay { position: fixed; inset: 0; - background: rgba(0, 0, 0, 0.88); + background: rgba(0, 0, 0, 0.45); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; @@ -58,9 +60,9 @@ const emit = defineEmits<{ } .ach-panel { - background: #1a1a2e; - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 10px; + background: rgba(12, 12, 18, 0.85); + border: none; + border-radius: 12px; padding: 36px 40px; min-width: 420px; max-width: 520px; @@ -73,7 +75,7 @@ const emit = defineEmits<{ text-align: center; font-size: 22px; font-weight: 400; - color: #ddd; + color: #c9a84c; letter-spacing: 3px; margin-bottom: 24px; } @@ -131,7 +133,7 @@ const emit = defineEmits<{ .ach-title-text { font-size: 14px; - color: #eee; + color: #c9a84c; } .ach-desc-text { @@ -156,4 +158,9 @@ const emit = defineEmits<{ background: rgba(255, 255, 255, 0.1); color: #ccc; } + +.ach-close:focus-visible { + outline: 2px solid #c9a84c; + outline-offset: 2px; +} diff --git a/src/components/BattleHUD.vue b/src/components/BattleHUD.vue index 756fef9..b44e837 100644 --- a/src/components/BattleHUD.vue +++ b/src/components/BattleHUD.vue @@ -74,8 +74,9 @@ function statStyle(stat: { variable: string; max?: number; style?: string }): 'b display: flex; align-items: center; gap: 10px; - background: rgba(0, 0, 0, 0.65); - border: 1px solid rgba(255, 255, 255, 0.1); + background: rgba(12, 12, 18, 0.75); + backdrop-filter: blur(6px); + border: none; border-radius: 6px; padding: 10px 14px; min-width: 180px; @@ -124,17 +125,17 @@ function statStyle(stat: { variable: string; max?: number; style?: string }): 'b .stat-bar-fill { height: 100%; - background: #4caf50; + background: linear-gradient(90deg, #8b6914, #c9a84c); border-radius: 4px; transition: width 0.3s ease; } .stat-bar-fill.warning { - background: #ff9800; + background: linear-gradient(90deg, #8b6914, #c9a84c); } .stat-bar-fill.danger { - background: #e74c3c; + background: linear-gradient(90deg, #6b3010, #b8541a); } .stat-value { diff --git a/src/components/BattleResult.vue b/src/components/BattleResult.vue index 812d4a7..3ac30df 100644 --- a/src/components/BattleResult.vue +++ b/src/components/BattleResult.vue @@ -47,7 +47,9 @@ function statValue(variable: string): number { .battle-result-overlay { position: fixed; inset: 0; - background: rgba(0, 0, 0, 0.85); + background: rgba(0, 0, 0, 0.45); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; @@ -61,9 +63,9 @@ function statValue(variable: string): number { } .battle-result-panel { - background: #1a1a2e; - border: 1px solid rgba(255, 255, 255, 0.12); - border-radius: 10px; + background: rgba(12, 12, 18, 0.85); + border: none; + border-radius: 12px; padding: 36px 40px; min-width: 340px; max-width: 440px; @@ -81,7 +83,7 @@ function statValue(variable: string): number { .result-title { font-size: 24px; font-weight: 400; - color: #ffc107; + color: #c9a84c; letter-spacing: 4px; margin-bottom: 28px; opacity: 0; @@ -117,16 +119,16 @@ function statValue(variable: string): number { .rstat-value { font-size: 14px; - color: #eee; + color: #c9a84c; } .result-continue { margin-top: 24px; padding: 12px 48px; font-size: 16px; - color: #fff; - background: rgba(255, 255, 255, 0.08); - border: 1px solid rgba(255, 255, 255, 0.2); + color: #c9a84c; + background: rgba(201, 168, 76, 0.1); + border: 1px solid rgba(201, 168, 76, 0.25); border-radius: 4px; cursor: pointer; letter-spacing: 2px; @@ -137,6 +139,11 @@ function statValue(variable: string): number { } .result-continue:hover { - background: rgba(255, 255, 255, 0.15); + background: rgba(201, 168, 76, 0.2); +} + +.result-continue:focus-visible { + outline: 2px solid #c9a84c; + outline-offset: 2px; } diff --git a/src/components/PauseMenu.vue b/src/components/PauseMenu.vue index e2ba6ae..317d804 100644 --- a/src/components/PauseMenu.vue +++ b/src/components/PauseMenu.vue @@ -20,7 +20,7 @@ const { t } = useI18n() - +
{{ t('ui.pauseHint') }}
@@ -32,7 +32,9 @@ const { t } = useI18n() .pause-overlay { position: fixed; inset: 0; - background: rgba(0, 0, 0, 0.75); + background: rgba(0, 0, 0, 0.45); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; @@ -50,7 +52,7 @@ const { t } = useI18n() font-size: 32px; font-weight: 400; letter-spacing: 6px; - color: #ddd; + color: #c9a84c; } .pause-actions { @@ -64,8 +66,8 @@ const { t } = useI18n() padding: 14px 32px; font-size: 16px; color: #ccc; - background: rgba(255, 255, 255, 0.06); - border: 1px solid rgba(255, 255, 255, 0.15); + background: rgba(201, 168, 76, 0.06); + border: 1px solid rgba(201, 168, 76, 0.15); border-radius: 4px; cursor: pointer; letter-spacing: 2px; @@ -73,24 +75,19 @@ const { t } = useI18n() } .pause-btn:hover { - background: rgba(255, 255, 255, 0.12); + background: rgba(201, 168, 76, 0.12); color: #fff; } .pause-btn.primary { - color: #fff; - background: rgba(255, 255, 255, 0.1); - border-color: rgba(255, 255, 255, 0.25); + color: #c9a84c; + background: rgba(201, 168, 76, 0.12); + border-color: rgba(201, 168, 76, 0.25); } -.pause-btn.danger { - color: #e57373; - border-color: rgba(229, 115, 115, 0.2); - margin-top: 12px; -} - -.pause-btn.danger:hover { - background: rgba(229, 115, 115, 0.1); +.pause-btn:focus-visible { + outline: 2px solid #c9a84c; + outline-offset: 2px; } .pause-hint { diff --git a/src/components/SaveLoadMenu.vue b/src/components/SaveLoadMenu.vue index bd93477..da46b8d 100644 --- a/src/components/SaveLoadMenu.vue +++ b/src/components/SaveLoadMenu.vue @@ -93,7 +93,9 @@ const maxSlots = 5 .save-overlay { position: fixed; inset: 0; - background: rgba(0, 0, 0, 0.85); + background: rgba(0, 0, 0, 0.45); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; @@ -101,9 +103,9 @@ const maxSlots = 5 } .save-panel { - background: #1a1a2e; - border: 1px solid rgba(255, 255, 255, 0.15); - border-radius: 8px; + background: rgba(12, 12, 18, 0.85); + border: none; + border-radius: 12px; padding: 32px; min-width: 480px; max-width: 560px; @@ -115,7 +117,7 @@ const maxSlots = 5 font-weight: 400; letter-spacing: 2px; margin-bottom: 24px; - color: #ddd; + color: #c9a84c; } .slot-list { @@ -135,12 +137,12 @@ const maxSlots = 5 } .auto-save-slot { - border-color: rgba(100, 200, 255, 0.3); - background: rgba(100, 200, 255, 0.06); + border-color: rgba(201, 168, 76, 0.3); + background: rgba(201, 168, 76, 0.06); } .auto-save-label { - color: #6cf; + color: #c9a84c; } .slot-thumb {