From d3a0941b715218e4b98c753e003208fca4527e00 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=81=E5=86=9C=E9=98=BF=E6=A5=A0?=
 <zhangyuge946@163.com>
Date: Tue, 26 May 2026 02:09:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=93=8D=E4=BD=9C=E6=A0=8F?=
 =?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/HomePage.vue | 10 +++++-----
 src/styles/base.css    |  9 +++++----
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 86a7f35..2eeeef9 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -320,16 +320,16 @@ onBeforeUnmount(() => {
               </div>
             </div>
 
-            <label class="toolbar-group toolbar-group--stretch">
-              <span class="toolbar-label">背景音乐</span>
+            <div class="toolbar-group toolbar-group--stretch">
+              <span class="toolbar-label">音乐</span>
               <select class="glass-select" :value="currentTrack" @change="handleTrackChange">
                 <option v-for="trackName in trackOptions" :key="trackName" :value="trackName">
                   {{ trackName }}
                 </option>
               </select>
-            </label>
+            </div>
 
-            <label class="toolbar-group toolbar-group--stretch">
+            <div class="toolbar-group toolbar-group--stretch">
               <span class="toolbar-label">音量</span>
               <div class="range-wrapper" :style="{ '--volume-percent': `${volume * 100}%` }">
                 <input
@@ -343,7 +343,7 @@ onBeforeUnmount(() => {
                 />
                 <span class="range-value">{{ volumePercent }}</span>
               </div>
-            </label>
+            </div>
 
             <div class="toolbar-group toolbar-group--compact">
               <span class="toolbar-label">显示</span>
diff --git a/src/styles/base.css b/src/styles/base.css
index 96f8be7..63484e6 100644
--- a/src/styles/base.css
+++ b/src/styles/base.css
@@ -200,8 +200,9 @@ canvas {
   border: 1px solid rgba(148, 163, 184, 0.22);
   border-radius: 28px;
   background:
-    linear-gradient(180deg, rgba(15, 23, 42, 0.74), rgba(15, 23, 42, 0.58));
-  backdrop-filter: blur(20px);
+    linear-gradient(180deg, rgba(15, 23, 42, 0.25), rgba(15, 23, 42, 0.15));
+  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);
   pointer-events: auto;
 }
@@ -281,7 +282,7 @@ canvas {
 }
 
 .segment-button--active {
-  background: rgba(56, 189, 248, 0.16);
+  background: rgba(255, 255, 255, 0.1);
   color: #f8fafc;
 }
 
@@ -360,7 +361,7 @@ canvas {
   height: 46px;
   border: 1px solid rgba(148, 163, 184, 0.18);
   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;
   transition: border-color 160ms ease;
   overflow: hidden;