From 2298b674f4051e98a6c837a4fe70abb86b4646ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=82=93=E6=B4=81?= <209192278@qq.com>
Date: Wed, 3 Jan 2024 17:20:27 +0800
Subject: [PATCH] =?UTF-8?q?=E9=82=93=E6=B4=81:=20=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E4=B8=8B=E6=8B=89=E6=A1=86=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/index.scss |  52 +--------------
 src/views/user/index.vue     | 120 +++++++++++++++++++++++++----------
 2 files changed, 90 insertions(+), 82 deletions(-)

diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index 5cefbde..61c4fd9 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -503,60 +503,14 @@ body,
   }
 }
 
-//el-select 下拉框样式
-.el-select__popper {
-  margin-top: -12px !important;
-  background: #072247 !important;
-  border: 1px solid #0F82AF !important;
+.el-dropdown-menu__item:not(.is-disabled):focus {
+  background-color: transparent !important;
 }
-
-.el-popper {
-  max-width: 200px !important;
-  box-sizing: border-box;
-}
-
 .el-popper__arrow::before {
   display: none;
 }
-
-.el-select-dropdown {
-  width: 200px !important;
-}
-
-.el-select-dropdown__item {
-  > span {
-    color: #FFFFFF;
-  }
-}
-
-.el-select .el-input .el-select__caret {
-  font-size: 35px !important;
-}
-
-.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
-  background-color: #064B66 !important;
-  width: 198px !important;
-}
-
-.el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
-  background-color: #064B66 !important;
-  width: 200px !important;
-}
-
-.el-select-tags-wrapper {
-  .el-tag {
-    padding: 28px 20px !important;
-    font-size: 35px;
-
-    .el-icon {
-      width: 40px;
-      height: 40px;
-      font-size: 40px !important;
-    }
-  }
-}
-
 .current-site {
+
   .el-select-dropdown {
     width: 200px !important;
   }
diff --git a/src/views/user/index.vue b/src/views/user/index.vue
index e00e573..aa300d0 100644
--- a/src/views/user/index.vue
+++ b/src/views/user/index.vue
@@ -99,21 +99,24 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="选择隧道" v-if="form.roleId>3">
-          <el-select
-              v-model="form.tunnelList"
-              multiple
-              filterable
-              clearable
-              placeholder="请选择隧道"
-              :fit-input-width="true"
-          >
-            <el-option
-                v-for="item in tunnelList"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-            />
-          </el-select>
+          <div class="user-select">
+            <el-select
+                v-model="form.tunnelList"
+                multiple
+                filterable
+                clearable
+                placeholder="请选择隧道"
+                :fit-input-width="true"
+                :teleported="false"
+            >
+              <el-option
+                  v-for="item in tunnelList"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+              />
+            </el-select>
+          </div>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -331,7 +334,61 @@ const handleSelect = async (selection, row) => {
   }
 }
 </script>
+<style lang="scss">
+.user-select {
+  .el-input{
+    min-height: 75px;
+    height: auto!important;
+  }
+  .el-select__popper {
+    margin-top: -12px !important;
+    background: #072247 !important;
+    border: 1px solid #0F82AF !important;
+  }
 
+  .el-popper {
+    box-sizing: border-box;
+  }
+
+  .el-popper__arrow::before {
+    display: none;
+  }
+
+  .el-select-dropdown__item {
+    font-size: 38px !important;
+    height: 60px !important;
+    line-height:60px !important;
+    > span {
+      color: #FFFFFF;
+    }
+  }
+
+  .el-select .el-input .el-select__caret {
+    font-size: 35px !important;
+  }
+
+  .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
+    background-color: #064B66 !important;
+  }
+
+  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
+    background-color: #064B66 !important;
+  }
+
+  .el-select-tags-wrapper {
+    .el-tag {
+      padding: 28px 20px !important;
+      font-size: 35px;
+
+      .el-icon {
+        width: 40px;
+        height: 40px;
+        font-size: 40px !important;
+      }
+    }
+  }
+}
+</style>
 <style scoped lang="scss">
 :deep(.el-input .el-input__password) {
   font-size: 60px;
@@ -357,10 +414,7 @@ const handleSelect = async (selection, row) => {
   display: none
 }
 
-:deep(.el-select-dropdown__item:hover) {
-  background-color: #064B66 !important;
-  width: 137px !important;
-}
+
 
 :deep(.el-radio-group) {
   margin-top: 10px;
@@ -527,20 +581,20 @@ const handleSelect = async (selection, row) => {
             color: #FFFFFF;
           }
 
-          :deep(.el-input__wrapper) {
-            width: 300px;
-            height: 70px;
-            border-radius: 6px;
-            border: 1px solid #05FEFF;
-            background-color: transparent;
-            font-size: 38px;
-
-            .el-input__inner {
-              height: 70px;
-              line-height: 70px;
-              color: #FFFFFF;
-            }
-          }
+          //:deep(.el-input__wrapper) {
+          //  width: 300px;
+          //  height: 70px;
+          //  border-radius: 6px;
+          //  border: 1px solid #05FEFF;
+          //  background-color: transparent;
+          //  font-size: 38px;
+          //
+          //  .el-input__inner {
+          //    height: 70px;
+          //    line-height: 70px;
+          //    color: #FFFFFF;
+          //  }
+          //}
         }
       }