From 1ee7c6f03297ac0b65f2b5eb6632cb3e9e9ed962 Mon Sep 17 00:00:00 2001
From: haiyangcui <cuiocean@gmail.com>
Date: Fri, 18 Dec 2020 22:11:18 +0100
Subject: [PATCH] =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E4=B8=8D=E5=90=8C=E4=B8=BB?=
 =?UTF-8?q?=E9=A2=98=E4=B8=8B=E7=9A=84=E5=B7=A5=E5=85=B7=E6=A0=8F=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/theme/dark.scss  | 13 +++++++++++++
 src/assets/scss/theme/green.scss | 13 +++++++++++++
 src/assets/scss/theme/light.scss | 13 +++++++++++++
 src/assets/scss/theme/pink.scss  | 13 +++++++++++++
 src/components/Film.vue          |  2 +-
 5 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/src/assets/scss/theme/dark.scss b/src/assets/scss/theme/dark.scss
index c4baddc..0a27815 100644
--- a/src/assets/scss/theme/dark.scss
+++ b/src/assets/scss/theme/dark.scss
@@ -319,6 +319,19 @@
   // Page of list using table and picture
   .listpage{
     color: var(--d-fc-2);
+    .listpage-header-divider{
+      background-color: var(--d-bgc-1);
+      .el-divider__text {
+        background-color: var(--d-bgc-2);
+      }
+      .el-button{
+        background-color: var(--d-bgc-2);
+        color: var(--d-fc-2);
+        &:hover{
+          color: var(--d-fc-3)
+        }
+      }
+    }
     .listpage-header, .toolbar{
       border-bottom-color: var(--d-c-3);
       .btn{
diff --git a/src/assets/scss/theme/green.scss b/src/assets/scss/theme/green.scss
index 0ef312d..bb13b3e 100644
--- a/src/assets/scss/theme/green.scss
+++ b/src/assets/scss/theme/green.scss
@@ -319,6 +319,19 @@
   // Page of list using table and picture
   .listpage{
     color: var(--g-fc-2);
+    .listpage-header-divider{
+      background-color: var(--g-bgc-1);
+      .el-divider__text {
+        background-color: var(--g-bgc-2);
+      }
+      .el-button{
+        background-color: var(--g-bgc-2);
+        color: var(--g-fc-2);
+        &:hover{
+          color: var(--g-fc-3)
+        }
+      }
+    }
     .listpage-header, .toolbar{
       border-bottom-color: var(--g-c-3);
       .btn{
diff --git a/src/assets/scss/theme/light.scss b/src/assets/scss/theme/light.scss
index efcaff1..5944db5 100644
--- a/src/assets/scss/theme/light.scss
+++ b/src/assets/scss/theme/light.scss
@@ -319,6 +319,19 @@
   // Page of list using table and picture
   .listpage{
     color: var(--l-fc-2);
+    .listpage-header-divider{
+      background-color: var(--l-bgc-1);
+      .el-divider__text {
+        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)
+        }
+      }
+    }
     .listpage-header, .toolbar{
       border-bottom-color: var(--l-c-3);
       .btn{
diff --git a/src/assets/scss/theme/pink.scss b/src/assets/scss/theme/pink.scss
index f116956..0f4e353 100644
--- a/src/assets/scss/theme/pink.scss
+++ b/src/assets/scss/theme/pink.scss
@@ -319,6 +319,19 @@
   // Page of list using table and picture
   .listpage{
     color: var(--p-fc-2);
+    .listpage-header-divider{
+      background-color: var(--p-bgc-1);
+      .el-divider__text {
+        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)
+        }
+      }
+    }
     .listpage-header, .toolbar{
       border-bottom-color: var(--p-c-3);
       .btn{
diff --git a/src/components/Film.vue b/src/components/Film.vue
index 025cc29..06b9c5c 100644
--- a/src/components/Film.vue
+++ b/src/components/Film.vue
@@ -78,7 +78,7 @@
        <el-input-number size="small" v-model="selectedYears.end" :min=0 :max="new Date().getFullYear()" controls-position="right" step-strictly @change="refreshFilteredList"></el-input-number>
        </span>
     </div>
-    <el-divider content-position="center">
+    <el-divider class="listpage-header-divider" content-position="center">
       <el-button type="text" size="mini" @click="toggleViewMode">视图切换</el-button>
       <el-button type="text" size="mini" @click='() => { showToolbar = !showToolbar; if (!showToolbar) this.refreshFilteredList() }' title="收起工具栏会重置筛选排序">{{ showToolbar ? '隐藏工具栏' : '显示工具栏' }}</el-button>
       <el-button type="text" size="mini" @click="backTop">回到顶部</el-button>