From 99592e3fcb7a9ae99243a4a05ad603ca8514bef3 Mon Sep 17 00:00:00 2001
From: haiyangcui <cuiocean@gmail.com>
Date: Mon, 2 Nov 2020 11:16:54 +0100
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E8=BF=9Bel-select=E6=A0=B7=E5=BC=8F,?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E4=B8=8D=E5=90=8C=E4=B8=BB=E9=A2=98=E4=B8=8B?=
 =?UTF-8?q?=E7=9A=84=E8=83=8C=E6=99=AF=E8=89=B2=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/style.scss        |  4 +++
 src/assets/scss/theme/dark.scss   | 25 +++++++++++++
 src/assets/scss/theme/green.scss  | 25 +++++++++++++
 src/assets/scss/theme/light.scss  | 59 ++++++++++++++++++++++---------
 src/assets/scss/theme/pink.scss   | 59 ++++++++++++++++++++++---------
 src/components/Recommandation.vue |  4 +--
 6 files changed, 140 insertions(+), 36 deletions(-)

diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index a793f2a..7d0df36 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -235,8 +235,12 @@
       background-color: none !important;
     }
     .el-input{
+      font-size: 1rem;
       width: 200px;
     }
+    .el-select-dropdown__item{
+      font-size: 1rem;
+    }
   }
   .listpage-body{
     height: calc(100% - 60px);
diff --git a/src/assets/scss/theme/dark.scss b/src/assets/scss/theme/dark.scss
index 3b1a9df..52360ab 100644
--- a/src/assets/scss/theme/dark.scss
+++ b/src/assets/scss/theme/dark.scss
@@ -359,6 +359,31 @@
             color: var(--d-fc-2);
           }
         }
+        .el-select-dropdown{
+          color: var(--d-fc-1);
+          border: none;
+          background-color: var(--d-bgc-1);
+          box-shadow: var(--d-bsc);
+        }
+        .el-select-dropdown__item{
+          color: var(--d-fc-1);
+          border: none;
+          background-color: var(--d-bgc-1);
+        }
+        .el-select-dropdown__item.hover{
+          background-color: var(--d-c-1);
+          box-shadow: var(--d-bsc);
+        }
+        .el-select-dropdown__item.selected{
+          color: var(--d-fc-1);
+          background-color: var(--d-c-1);
+          box-shadow: var(--d-bsc);
+        }
+        .el-select-dropdown__item.selected.hover{
+          color: var(--d-fc-1);
+          background-color: var(--d-c-1);
+          box-shadow: var(--d-bsc);
+        }
     }
     .listpage-body{
        color: var(--d-fc-1);
diff --git a/src/assets/scss/theme/green.scss b/src/assets/scss/theme/green.scss
index 0943d8c..b46af69 100644
--- a/src/assets/scss/theme/green.scss
+++ b/src/assets/scss/theme/green.scss
@@ -354,6 +354,31 @@
             color: var(--g-fc-2);
           }
         }
+        .el-select-dropdown{
+          color: var(--g-fc-1);
+          border: none;
+          background-color: var(--g-bgc-1);
+          box-shadow: var(--g-bsc);
+        }
+        .el-select-dropdown__item{
+          color: var(--g-fc-1);
+          border: none;
+          background-color: var(--g-bgc-1);
+        }
+        .el-select-dropdown__item.hover{
+          background-color: var(--g-c-1);
+          box-shadow: var(--g-bsc);
+        }
+        .el-select-dropdown__item.selected{
+          color: var(--g-fc-1);
+          background-color: var(--g-c-1);
+          box-shadow: var(--g-bsc);
+        }
+        .el-select-dropdown__item.selected.hover{
+          color: var(--g-fc-1);
+          background-color: var(--g-c-1);
+          box-shadow: var(--g-bsc);
+        }
     }
     .listpage-body{
       color: var(--g-fc-1);
diff --git a/src/assets/scss/theme/light.scss b/src/assets/scss/theme/light.scss
index 2eea58d..afc74b1 100644
--- a/src/assets/scss/theme/light.scss
+++ b/src/assets/scss/theme/light.scss
@@ -334,26 +334,51 @@
   .listpage{
     color: var(--l-fc-2);
     .listpage-header{
-        border-bottom-color: var(--l-c-3);
-        .btn{
-          &:hover{
-            color: var(--l-fc-3)
-          }
+      border-bottom-color: var(--l-c-3);
+      .btn{
+        &:hover{
+          color: var(--l-fc-3)
         }
-        .el-button{
-          background-color: var(--l-bgc-2);
+      }
+      .el-button{
+        background-color: var(--l-bgc-2);
+        color: var(--l-fc-2);
+        &:hover{
+          color: var(--l-fc-3)
+        }
+      }
+      .el-input{
+        input{
+          background-color: var(--l-bgc-1);
+          border: 1px solid var(--l-bgc-1);
           color: var(--l-fc-2);
-          &:hover{
-            color: var(--l-fc-3)
-          }
-        }
-        .el-input{
-          input{
-            background-color: var(--l-bgc-1);
-            border: 1px solid var(--l-bgc-1);
-            color: var(--l-fc-2);
-          }
         }
+      }
+      .el-select-dropdown{
+        color: var(--l-fc-1);
+        border: none;
+        background-color: var(--l-bgc-1);
+        box-shadow: var(--l-bsc);
+      }
+      .el-select-dropdown__item{
+        color: var(--l-fc-1);
+        border: none;
+        background-color: var(--l-bgc-1);
+      }
+      .el-select-dropdown__item.hover{
+        background-color: var(--l-c-1);
+        box-shadow: var(--l-bsc);
+      }
+      .el-select-dropdown__item.selected{
+        color: var(--l-fc-1);
+        background-color: var(--l-c-1);
+        box-shadow: var(--l-bsc);
+      }
+      .el-select-dropdown__item.selected.hover{
+        color: var(--l-fc-1);
+        background-color: var(--l-c-1);
+        box-shadow: var(--l-bsc);
+      }
     }
     .listpage-body{
       color: var(--l-fc-1);
diff --git a/src/assets/scss/theme/pink.scss b/src/assets/scss/theme/pink.scss
index c58192f..76ff08b 100644
--- a/src/assets/scss/theme/pink.scss
+++ b/src/assets/scss/theme/pink.scss
@@ -333,26 +333,51 @@
   .listpage{
     color: var(--p-fc-2);
     .listpage-header{
-        border-bottom-color: var(--p-c-3);
-        .btn{
-          &:hover{
-            color: var(--p-fc-3)
-          }
+      border-bottom-color: var(--p-c-3);
+      .btn{
+        &:hover{
+          color: var(--p-fc-3)
         }
-        .el-button{
-          background-color: var(--p-bgc-2);
+      }
+      .el-button{
+        background-color: var(--p-bgc-2);
+        color: var(--p-fc-2);
+        &:hover{
+          color: var(--p-fc-3)
+        }
+      }
+      .el-input{
+        input{
+          background-color: var(--p-bgc-1);
+          border: 1px solid var(--p-bgc-1);
           color: var(--p-fc-2);
-          &:hover{
-            color: var(--p-fc-3)
-          }
-        }
-        .el-input{
-          input{
-            background-color: var(--p-bgc-1);
-            border: 1px solid var(--p-bgc-1);
-            color: var(--p-fc-2);
-          }
         }
+      }
+      .el-select-dropdown{
+        color: var(--p-fc-1);
+        border: none;
+        background-color: var(--p-bgc-1);
+        box-shadow: var(--p-bsc);
+      }
+      .el-select-dropdown__item{
+        color: var(--p-fc-1);
+        border: none;
+        background-color: var(--p-bgc-1);
+      }
+      .el-select-dropdown__item.hover{
+        background-color: var(--p-c-1);
+        box-shadow: var(--p-bsc);
+      }
+      .el-select-dropdown__item.selected{
+        color: var(--p-fc-1);
+        background-color: var(--p-c-1);
+        box-shadow: var(--p-bsc);
+      }
+      .el-select-dropdown__item.selected.hover{
+        color: var(--p-fc-1);
+        background-color: var(--p-c-1);
+        box-shadow: var(--p-bsc);
+      }
     }
     .listpage-body{
       color: var(--p-fc-1);
diff --git a/src/components/Recommandation.vue b/src/components/Recommandation.vue
index 9b3f5ca..9eb5376 100644
--- a/src/components/Recommandation.vue
+++ b/src/components/Recommandation.vue
@@ -3,7 +3,7 @@
     <div class="listpage-header" id="recommandataions-header">
         <el-switch v-model="viewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="list" @change="updateViewMode"></el-switch>
         <el-button type="text">视频数：{{ recommandations.length }}</el-button>
-        <el-select size="mini" v-model="selectedAreas" multiple collapse-tags style="margin-left: 20px;" placeholder="地区">
+        <el-select v-model="selectedAreas" multiple collapse-tags style="margin-left: 20px;" placeholder="地区" :popper-append-to-body="false">
           <el-option
             v-for="item in areas"
             :key="item"
@@ -11,7 +11,7 @@
             :value="item">
           </el-option>
         </el-select>
-        <el-select size="mini" v-model="selectedTypes" multiple collapse-tags style="margin-left: 20px;" placeholder="类型">
+        <el-select v-model="selectedTypes" multiple collapse-tags style="margin-left: 20px;" placeholder="类型" :popper-append-to-body="false">
           <el-option
             v-for="item in types"
             :key="item"