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>
</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>
</div> </div>
</template> </template>
@@ -50,7 +50,9 @@ const emit = defineEmits<{
.ach-overlay { .ach-overlay {
position: fixed; position: fixed;
inset: 0; 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; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -58,9 +60,9 @@ const emit = defineEmits<{
} }
.ach-panel { .ach-panel {
background: #1a1a2e; background: rgba(12, 12, 18, 0.85);
border: 1px solid rgba(255, 255, 255, 0.12); border: none;
border-radius: 10px; border-radius: 12px;
padding: 36px 40px; padding: 36px 40px;
min-width: 420px; min-width: 420px;
max-width: 520px; max-width: 520px;
@@ -73,7 +75,7 @@ const emit = defineEmits<{
text-align: center; text-align: center;
font-size: 22px; font-size: 22px;
font-weight: 400; font-weight: 400;
color: #ddd; color: #c9a84c;
letter-spacing: 3px; letter-spacing: 3px;
margin-bottom: 24px; margin-bottom: 24px;
} }
@@ -131,7 +133,7 @@ const emit = defineEmits<{
.ach-title-text { .ach-title-text {
font-size: 14px; font-size: 14px;
color: #eee; color: #c9a84c;
} }
.ach-desc-text { .ach-desc-text {
@@ -156,4 +158,9 @@ const emit = defineEmits<{
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
color: #ccc; color: #ccc;
} }
.ach-close:focus-visible {
outline: 2px solid #c9a84c;
outline-offset: 2px;
}
</style> </style>

11
src/components/BattleHUD.vue
View File

@@ -74,8 +74,9 @@ function statStyle(stat: { variable: string; max?: number; style?: string }): 'b
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
background: rgba(0, 0, 0, 0.65); background: rgba(12, 12, 18, 0.75);
border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(6px);
border: none;
border-radius: 6px; border-radius: 6px;
padding: 10px 14px; padding: 10px 14px;
min-width: 180px; min-width: 180px;
@@ -124,17 +125,17 @@ function statStyle(stat: { variable: string; max?: number; style?: string }): 'b
.stat-bar-fill { .stat-bar-fill {
height: 100%; height: 100%;
background: #4caf50; background: linear-gradient(90deg, #8b6914, #c9a84c);
border-radius: 4px; border-radius: 4px;
transition: width 0.3s ease; transition: width 0.3s ease;
} }
.stat-bar-fill.warning { .stat-bar-fill.warning {
background: #ff9800; background: linear-gradient(90deg, #8b6914, #c9a84c);
} }
.stat-bar-fill.danger { .stat-bar-fill.danger {
background: #e74c3c; background: linear-gradient(90deg, #6b3010, #b8541a);
} }
.stat-value { .stat-value {

27
src/components/BattleResult.vue
View File

@@ -47,7 +47,9 @@ function statValue(variable: string): number {
.battle-result-overlay { .battle-result-overlay {
position: fixed; position: fixed;
inset: 0; 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; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -61,9 +63,9 @@ function statValue(variable: string): number {
} }
.battle-result-panel { .battle-result-panel {
background: #1a1a2e; background: rgba(12, 12, 18, 0.85);
border: 1px solid rgba(255, 255, 255, 0.12); border: none;
border-radius: 10px; border-radius: 12px;
padding: 36px 40px; padding: 36px 40px;
min-width: 340px; min-width: 340px;
max-width: 440px; max-width: 440px;
@@ -81,7 +83,7 @@ function statValue(variable: string): number {
.result-title { .result-title {
font-size: 24px; font-size: 24px;
font-weight: 400; font-weight: 400;
color: #ffc107; color: #c9a84c;
letter-spacing: 4px; letter-spacing: 4px;
margin-bottom: 28px; margin-bottom: 28px;
opacity: 0; opacity: 0;
@@ -117,16 +119,16 @@ function statValue(variable: string): number {
.rstat-value { .rstat-value {
font-size: 14px; font-size: 14px;
color: #eee; color: #c9a84c;
} }
.result-continue { .result-continue {
margin-top: 24px; margin-top: 24px;
padding: 12px 48px; padding: 12px 48px;
font-size: 16px; font-size: 16px;
color: #fff; color: #c9a84c;
background: rgba(255, 255, 255, 0.08); background: rgba(201, 168, 76, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2); border: 1px solid rgba(201, 168, 76, 0.25);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
letter-spacing: 2px; letter-spacing: 2px;
@@ -137,6 +139,11 @@ function statValue(variable: string): number {
} }
.result-continue:hover { .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> </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 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('saveLoad')">{{ t('ui.saveLoad') }}</button>
<button class="pause-btn" @click="emit('settings')">{{ t('ui.settings') }}</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>
<div class="pause-hint">{{ t('ui.pauseHint') }}</div> <div class="pause-hint">{{ t('ui.pauseHint') }}</div>
@@ -32,7 +32,9 @@ const { t } = useI18n()
.pause-overlay { .pause-overlay {
position: fixed; position: fixed;
inset: 0; 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; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -50,7 +52,7 @@ const { t } = useI18n()
font-size: 32px; font-size: 32px;
font-weight: 400; font-weight: 400;
letter-spacing: 6px; letter-spacing: 6px;
color: #ddd; color: #c9a84c;
} }
.pause-actions { .pause-actions {
@@ -64,8 +66,8 @@ const { t } = useI18n()
padding: 14px 32px; padding: 14px 32px;
font-size: 16px; font-size: 16px;
color: #ccc; color: #ccc;
background: rgba(255, 255, 255, 0.06); background: rgba(201, 168, 76, 0.06);
border: 1px solid rgba(255, 255, 255, 0.15); border: 1px solid rgba(201, 168, 76, 0.15);
border-radius: 4px; border-radius: 4px;
cursor: pointer; cursor: pointer;
letter-spacing: 2px; letter-spacing: 2px;
@@ -73,24 +75,19 @@ const { t } = useI18n()
} }
.pause-btn:hover { .pause-btn:hover {
background: rgba(255, 255, 255, 0.12); background: rgba(201, 168, 76, 0.12);
color: #fff; color: #fff;
} }
.pause-btn.primary { .pause-btn.primary {
color: #fff; color: #c9a84c;
background: rgba(255, 255, 255, 0.1); background: rgba(201, 168, 76, 0.12);
border-color: rgba(255, 255, 255, 0.25); border-color: rgba(201, 168, 76, 0.25);
} }
.pause-btn.danger { .pause-btn:focus-visible {
color: #e57373; outline: 2px solid #c9a84c;
border-color: rgba(229, 115, 115, 0.2); outline-offset: 2px;
margin-top: 12px;
}
.pause-btn.danger:hover {
background: rgba(229, 115, 115, 0.1);
} }
.pause-hint { .pause-hint {

18
src/components/SaveLoadMenu.vue
View File

@@ -93,7 +93,9 @@ const maxSlots = 5
.save-overlay { .save-overlay {
position: fixed; position: fixed;
inset: 0; 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; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -101,9 +103,9 @@ const maxSlots = 5
} }
.save-panel { .save-panel {
background: #1a1a2e; background: rgba(12, 12, 18, 0.85);
border: 1px solid rgba(255, 255, 255, 0.15); border: none;
border-radius: 8px; border-radius: 12px;
padding: 32px; padding: 32px;
min-width: 480px; min-width: 480px;
max-width: 560px; max-width: 560px;
@@ -115,7 +117,7 @@ const maxSlots = 5
font-weight: 400; font-weight: 400;
letter-spacing: 2px; letter-spacing: 2px;
margin-bottom: 24px; margin-bottom: 24px;
color: #ddd; color: #c9a84c;
} }
.slot-list { .slot-list {
@@ -135,12 +137,12 @@ const maxSlots = 5
} }
.auto-save-slot { .auto-save-slot {
border-color: rgba(100, 200, 255, 0.3); border-color: rgba(201, 168, 76, 0.3);
background: rgba(100, 200, 255, 0.06); background: rgba(201, 168, 76, 0.06);
} }
.auto-save-label { .auto-save-label {
color: #6cf; color: #c9a84c;
} }
.slot-thumb { .slot-thumb {