修改搜索下拉框样式

src/components/left.vue

@@ -129,9 +129,17 @@
       <div class="content" style="height: 100%; overflow: hidden">
         <div class="table">
           <div class="dropdown-container">
-            <el-dropdown trigger="click" @command="clickBuildingsropdown">
+            <el-dropdown
+              trigger="click"
+              @command="clickBuildingsropdown"
+              max-height="150"
+              popper-class="popper-class"
+            >
               <span class="dropdown-name">
-                {{ cureetBuild }}
+                <span>{{ cureetBuild }}</span>
+                <el-icon class="el-icon--right">
+                  <arrow-down />
+                </el-icon>
                 <!-- <Edit style="width: 1em; height: 1em; margin-right: 8px" /> -->
               </span>
               <template #dropdown>
@@ -145,7 +153,11 @@
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
-            <el-dropdown trigger="click" @command="clickCategoryTypedropdown">
+            <el-dropdown
+              trigger="click"
+              @command="clickCategoryTypedropdown"
+              max-height="150"
+            >
               <span class="dropdown-name">
                 {{ category || "全部类型" }}
                 <el-icon>
@@ -163,7 +175,11 @@
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
-            <el-dropdown trigger="click" @command="clickLeafsdropdown">
+            <el-dropdown
+              trigger="click"
+              @command="clickLeafsdropdown"
+              max-height="150"
+            >
               <span class="dropdown-name">
                 {{ cureetLeaf }}
                 <el-icon>
@@ -181,7 +197,11 @@
                 </el-dropdown-menu>
               </template>
             </el-dropdown>
-            <el-dropdown trigger="click" @command="clickStatusesdropdown">
+            <el-dropdown
+              trigger="click"
+              @command="clickStatusesdropdown"
+              max-height="150"
+            >
               <span class="dropdown-name">
                 {{ cureetStatus }}
                 <el-icon>
@@ -208,8 +228,11 @@
           <!-- <div v-if="classRoomList.length > 0" style="width: 100%; height: 100%"> -->
           <div class="scroll-container" ref="scrollContainerRef">
             <div
-              
-              :style="{height:scrollContainerHeight+'px',overflow: 'hidden',paddingTop: '10px'}"
+              :style="{
+                height: scrollContainerHeight + 'px',
+                overflow: 'hidden',
+                paddingTop: '10px',
+              }"
               v-if="classRoomList.length > 0"
             >
               <scroll
@@ -374,6 +397,7 @@ export default {
     Vue3SeamlessScroll,
     VerticalScroll,
     Scroll,
+    ArrowDown,
   },
   setup(_, { emit }) {
     // 教室分类统计
@@ -658,8 +682,8 @@ export default {
 
     let timer = ref(null);
     let testMain = ref(null);
-    let scrollContainerRef =ref(null)
-    let scrollContainerHeight = ref(null)
+    let scrollContainerRef = ref(null);
+    let scrollContainerHeight = ref(null);
     onMounted(() => {
       getClassData();
       start();
@@ -667,11 +691,10 @@ export default {
       getClassSelections();
       //获取教室列表数据
       getClassRoomList();
-      scrollContainerHeight.value =scrollContainerRef.value.clientHeight
+      scrollContainerHeight.value = scrollContainerRef.value.clientHeight;
       window.addEventListener("resize", function () {
-        scrollContainerHeight.value =scrollContainerRef.value.clientHeight
+        scrollContainerHeight.value = scrollContainerRef.value.clientHeight;
       });
-
     });
 
     onBeforeUnmount(() => {
@@ -789,7 +812,7 @@ export default {
       searchHandel();
     };
 
-    let cureetStatus = ref("全部状态");
+    let cureetStatus = ref("全部教室");
     const clickStatusesdropdown = (e) => {
       console.log("e", e);
       statusCode.value = e;
@@ -881,7 +904,7 @@ export default {
       scrollRef,
       offset,
       scrollContainerHeight,
-      scrollContainerRef
+      scrollContainerRef,
     };
   },
 };
@@ -890,7 +913,7 @@ export default {
 <style scoped lang="scss">
 @import "../assets/css/left.scss";
 </style>
-<style>
+<style >
 .classpopover {
   .el-popper__arrow {
     top: 196px !important;
@@ -904,6 +927,43 @@ export default {
 }
 
 .el-popper.is-light {
-  border-radius: 10px;
+  border-radius: 2px;
+}
+
+.el-popper {
+  border: 2px solid #1a2d47 !important;
+    background: rgba(1, 18, 35, 0.87) !important;
+    border-radius: 1px !important;
+}
+.el-dropdown-menu {
+  background: rgba(1, 18, 35, 0.87) !important;
+  border: none !important;
+  border-radius: 2px !important;
+}
+.el-dropdown-menu__item {
+  color: rgba(255, 255, 255, 0.75);
+  border-radius: 2px !important;border-radius: 2px !important;
+}
+.popper__arrow::after {
+
+  background: rgba(255, 255, 255, 0.12);
+}
+.el-dropdown-menu__item:not(.is-disabled):hover {
+
+  background: rgba(255, 255, 255, 0.12);
+  color: rgba(255, 255, 255, 0.75);
+}
+.el-dropdown-menu__item:not(.is-disabled):hover {
+
+  background: rgba(255, 255, 255, 0.12) !important;
+  color: #fff !important;
+}
+.el-dropdown-menu__item:not(.is-disabled):focus{
+  background: rgba(255, 255, 255, 0.12) !important;
+  color: #fff !important;
+}
+
+.el-popper__arrow {
+  display: none;
 }
 </style>