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"