wangjunxiao/tianshu-engine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: unify panel UI to gold design system, add backdrop blur to all overlays

Browse Source
This commit is contained in:
cocos02
2026-06-14 16:25:56 +08:00
parent b61d08a0ca
commit 02a82e9801
5 changed files with 61 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/AchievementPanel.vue
View File

@@ -41,7 +41,7 @@ const emit = defineEmits<{
</div>
</div>
<button class="ach-close" @click="emit('close')">{{ t('ui.close') }}</button>
<button class="ach-close" @click="emit('close')">{{ t('ui.back') }}</button>
</div>
</div>
</template>
@@ -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;
}
</style>

11
src/components/BattleHUD.vue
View File

@@ -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 {

27
src/components/BattleResult.vue
View File

@@ -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;
}
</style>

31
src/components/PauseMenu.vue
View File

@@ -20,7 +20,7 @@ const { t } = useI18n()
<button class="pause-btn primary" @click="emit('resume')">{{ t('ui.pauseResume') }}</button>
<button class="pause-btn" @click="emit('saveLoad')">{{ t('ui.saveLoad') }}</button>
<button class="pause-btn" @click="emit('settings')">{{ t('ui.settings') }}</button>
<button class="pause-btn danger" @click="emit('quitToMenu')">{{ t('ui.quitToMenu') }}</button>
<button class="pause-btn" @click="emit('quitToMenu')">{{ t('ui.quitToMenu') }}</button>
</div>
<div class="pause-hint">{{ t('ui.pauseHint') }}</div>
@@ -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 {

18
src/components/SaveLoadMenu.vue
View File

@@ -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 {