fix: 调整修改slide状态组件在背景为模糊情况下的展现情况

src/components/SlideStateBar.vue

@@ -49,30 +49,19 @@ export default {
   font-size: 14px;
   font-weight: bold;
   position: relative;
-  margin: 0 -8px 16px -8px;
+  margin: 0 0 16px 0;
 
   & > div {
     cursor: pointer;
     color: #9aaaba;
     display: inline-block;
-    background: white;
     padding: 4px 8px;
-    border: 4px white solid;
     transition: .2s;
   }
 
   .active {
-    background: $theme-green-light;
+    background: $theme-green-transparent;
     color: $theme-green;
   }
-
-  &::before {
-    z-index: -1;
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 0;
-    border-bottom: 3px solid #aabaca;
-  }
 }
 </style>

src/components/TabSideComponent.vue

@@ -92,7 +92,7 @@ export default {
 
 @supports (not(backdrop-filter: saturate(180%) blur(15px))) {
   .small {
-    background: rgb(240, 240, 240);
+    background: white;
   }
 }
 </style>

src/views/teacher/components/TeacherSlideDetail.vue

@@ -19,10 +19,10 @@
     <div class="mb-8">
       <b>幻灯片状态设置</b>
     </div>
-    <div v-if="this.slide.state === 'DRAFT'" class="tip mb-16">
+    <slide-state-bar :state="this.slide.state" @change-state="handleChangeState"></slide-state-bar>
+    <div v-if="this.slide.state === 'DRAFT'" class="tip mb-32">
       提示：学生无法查看处于草稿状态的幻灯片，如果希望公开请设置为其他状态
     </div>
-    <slide-state-bar :state="this.slide.state" @change-state="handleChangeState"></slide-state-bar>
     <c-button class="full-width secondary mb-16" @click="handleQuizSetting">习题设置 & 习题完成统计</c-button>
     <c-button class="error full-width mb-16" @click="handleDeleteSlide">删除课件</c-button>
   </tab-side-component>