wangairnan/TimeTravel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化操作栏样式

Browse Source
This commit is contained in:
wangairnan
2026-05-26 02:09:13 +08:00
parent f73d069fe0
commit d3a0941b71
2 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/HomePage.vue
+5 -5
View File
@@ -320,16 +320,16 @@ onBeforeUnmount(() => {
</div> </div>
</div> </div>
<label class="toolbar-group toolbar-group--stretch"> <div class="toolbar-group toolbar-group--stretch">
<span class="toolbar-label">背景音乐</span> <span class="toolbar-label">音乐</span>
<select class="glass-select" :value="currentTrack" @change="handleTrackChange"> <select class="glass-select" :value="currentTrack" @change="handleTrackChange">
<option v-for="trackName in trackOptions" :key="trackName" :value="trackName"> <option v-for="trackName in trackOptions" :key="trackName" :value="trackName">
{{ trackName }} {{ trackName }}
</option> </option>
</select> </select>
</label> </div>
<label class="toolbar-group toolbar-group--stretch"> <div class="toolbar-group toolbar-group--stretch">
<span class="toolbar-label">音量</span> <span class="toolbar-label">音量</span>
<div class="range-wrapper" :style="{ '--volume-percent': `${volume * 100}%` }"> <div class="range-wrapper" :style="{ '--volume-percent': `${volume * 100}%` }">
<input <input
@@ -343,7 +343,7 @@ onBeforeUnmount(() => {
/> />
<span class="range-value">{{ volumePercent }}</span> <span class="range-value">{{ volumePercent }}</span>
</div> </div>
</label> </div>
<div class="toolbar-group toolbar-group--compact"> <div class="toolbar-group toolbar-group--compact">
<span class="toolbar-label">显示</span> <span class="toolbar-label">显示</span>
src/styles/base.css
+5 -4
View File
@@ -200,8 +200,9 @@ canvas {
border: 1px solid rgba(148, 163, 184, 0.22); border: 1px solid rgba(148, 163, 184, 0.22);
border-radius: 28px; border-radius: 28px;
background: background:
linear-gradient(180deg, rgba(15, 23, 42, 0.74), rgba(15, 23, 42, 0.58)); linear-gradient(180deg, rgba(15, 23, 42, 0.25), rgba(15, 23, 42, 0.15));
backdrop-filter: blur(20px); backdrop-filter: blur(16px) saturate(300%) brightness(1.6);
-webkit-backdrop-filter: blur(16px) saturate(300%) brightness(1.6);
box-shadow: 0 18px 56px rgba(2, 6, 23, 0.48); box-shadow: 0 18px 56px rgba(2, 6, 23, 0.48);
pointer-events: auto; pointer-events: auto;
} }
@@ -281,7 +282,7 @@ canvas {
} }
.segment-button--active { .segment-button--active {
background: rgba(56, 189, 248, 0.16); background: rgba(255, 255, 255, 0.1);
color: #f8fafc; color: #f8fafc;
} }
@@ -360,7 +361,7 @@ canvas {
height: 46px; height: 46px;
border: 1px solid rgba(148, 163, 184, 0.18); border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 999px; border-radius: 999px;
background: linear-gradient(to right, rgba(56, 189, 248, 0.16) var(--volume-percent, 0%), rgba(2, 6, 23, 0.36) var(--volume-percent, 0%)); background: linear-gradient(to right, rgba(255, 255, 255, 0.1) var(--volume-percent, 0%), rgba(2, 6, 23, 0.36) var(--volume-percent, 0%));
background-clip: padding-box; background-clip: padding-box;
transition: border-color 160ms ease; transition: border-color 160ms ease;
overflow: hidden; overflow: hidden;