From b33e6b4a522e0a99b78713fb5327e56ee42f353f Mon Sep 17 00:00:00 2001
From: zhaichao <zhaichao@fengyingkj.top>
Date: Thu, 27 Aug 2026 16:21:42 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B6=E9=83=A8=E5=AD=A6=E6=9C=9F=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E6=A0=8F=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/layout/components/SemesterBar.vue     | 75 ++++++++++++++++---
 1 file changed, 65 insertions(+), 10 deletions(-)

diff --git a/frontend/src/layout/components/SemesterBar.vue b/frontend/src/layout/components/SemesterBar.vue
index 5f99f3a54..6b0549ace 100644
--- a/frontend/src/layout/components/SemesterBar.vue
+++ b/frontend/src/layout/components/SemesterBar.vue
@@ -29,6 +29,7 @@
           size="small"
           filterable
           class="semester-select"
+          popper-class="semester-select-popper"
           @change="handleSwitch"
         >
           <el-option
@@ -223,10 +224,10 @@ export default {
   }
 
   &__switch {
-    background: transparent;
-    border: none;
-    padding: 0;
-    border-radius: 0;
+    background: rgba(255, 255, 255, 0.09);
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    padding: 0 16px;
+    border-radius: 7px;
     height: 36px;
 
     /* 用一层定高 flex 容器包裹 select，彻底隔离其默认行高外溢 */
@@ -248,22 +249,31 @@ export default {
     }
 
     ::v-deep .el-input__inner {
-      background: rgba(255, 255, 255, 0.12);
-      border: 1px solid rgba(255, 255, 255, 0.35);
-      color: #fff;
+      background: transparent !important;
+      border: none !important;
+      color: #fff !important;
       border-radius: 7px;
       height: 36px;
-      padding: 0 12px;
+      padding: 0;
       display: flex;
       align-items: center;
 
       &::placeholder {
-        color: rgba(255, 255, 255, 0.7);
+        color: rgba(255, 255, 255, 0.7) !important;
       }
     }
 
     ::v-deep .el-input__inner:hover {
-      border-color: rgba(255, 255, 255, 0.6);
+      background: transparent !important;
+    }
+
+    /* 去掉 focus 时的蓝色外光晕（Element 默认 box-shadow） */
+    ::v-deep .el-input__inner:focus,
+    ::v-deep .el-select .el-input__inner:focus,
+    ::v-deep .el-select .el-input.is-focus .el-input__inner {
+      border-color: transparent !important;
+      box-shadow: none !important;
+      outline: none !important;
     }
 
     ::v-deep .el-input__icon {
@@ -272,3 +282,48 @@ export default {
   }
 }
 </style>
+
+<style lang="scss">
+/* 学期下拉浮层渲染在 body 下，scoped 无法命中，故用非 scoped 样式通过 popper-class 单独定制，
+   使其与顶部深色栏视觉统一（仅作用于 SemesterBar 的下拉，不影响页面其他 select）。 */
+.semester-select-popper {
+  background: #084c3f !important;
+  border: 1px solid rgba(255, 255, 255, 0.14) !important;
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
+  border-radius: 7px;
+
+  .el-select-dropdown__list {
+    padding: 4px;
+  }
+
+  .el-select-dropdown__item {
+    color: rgba(255, 255, 255, 0.85);
+    border-radius: 5px;
+    height: 32px;
+    line-height: 32px;
+
+    &.hover,
+    &:hover {
+      background: rgba(255, 255, 255, 0.12);
+      color: #fff;
+    }
+
+    &.selected {
+      color: #fff;
+      font-weight: 600;
+      background: rgba(255, 255, 255, 0.16);
+    }
+
+    /* 关键选项的选中图标保持可见 */
+    .el-select-dropdown__item span {
+      color: #fff;
+    }
+  }
+
+  .el-scrollbar__bar.is-vertical {
+    > div {
+      background-color: rgba(255, 255, 255, 0.25);
+    }
+  }
+}
+</style>