From 5d41f783bc5cfda2ff84ba9bf61f348df9489f19 Mon Sep 17 00:00:00 2001
From: haiyangcui <cuiocean@gmail.com>
Date: Thu, 29 Oct 2020 15:47:02 +0100
Subject: [PATCH] =?UTF-8?q?=E7=BB=9F=E4=B8=80=E6=B5=B7=E6=8A=A5=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BE=E7=9A=84=E6=A0=BC=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/theme/dark.scss  |   4 -
 src/assets/scss/theme/green.scss |   4 -
 src/assets/scss/theme/light.scss |   4 -
 src/assets/scss/theme/pink.scss  |   4 -
 src/components/Star.vue          | 159 +++++++++++++++++--------------
 5 files changed, 88 insertions(+), 87 deletions(-)

diff --git a/src/assets/scss/theme/dark.scss b/src/assets/scss/theme/dark.scss
index e42a5c3..32e10d7 100644
--- a/src/assets/scss/theme/dark.scss
+++ b/src/assets/scss/theme/dark.scss
@@ -286,10 +286,6 @@
       }
     }
   }
-  .star{
-    background-color: var(--d-bgc-1);
-    box-shadow: var(--d-bsc);
-  }
   .setting{
     background-color: var(--d-bgc-1);
     box-shadow: var(--d-bsc);
diff --git a/src/assets/scss/theme/green.scss b/src/assets/scss/theme/green.scss
index d950491..d486c09 100644
--- a/src/assets/scss/theme/green.scss
+++ b/src/assets/scss/theme/green.scss
@@ -282,10 +282,6 @@
       }
     }
   }
-  .star{
-    background-color: var(--g-bgc-1);
-    box-shadow: var(--g-bsc);
-  }
   .setting{
     background-color: var(--g-bgc-1);
     box-shadow: var(--g-bsc);
diff --git a/src/assets/scss/theme/light.scss b/src/assets/scss/theme/light.scss
index 933c9fe..46ff1eb 100644
--- a/src/assets/scss/theme/light.scss
+++ b/src/assets/scss/theme/light.scss
@@ -282,10 +282,6 @@
       }
     }
   }
-  .star{
-    background-color: var(--l-bgc-1);
-    box-shadow: var(--l-bsc);
-  }
   .setting{
     background-color: var(--l-bgc-1);
     box-shadow: var(--l-bsc);
diff --git a/src/assets/scss/theme/pink.scss b/src/assets/scss/theme/pink.scss
index a0ac56f..34b75b2 100644
--- a/src/assets/scss/theme/pink.scss
+++ b/src/assets/scss/theme/pink.scss
@@ -281,10 +281,6 @@
       }
     }
   }
-  .star{
-    background-color: var(--p-bgc-1);
-    box-shadow: var(--p-bsc);
-  }
   .setting{
     background-color: var(--p-bgc-1);
     box-shadow: var(--p-bsc);
diff --git a/src/components/Star.vue b/src/components/Star.vue
index a08161f..8f025a2 100644
--- a/src/components/Star.vue
+++ b/src/components/Star.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="listpage" id="star">
+  <div class="listpage star film">
     <div class="listpage-content">
       <div class="listpage-header">
         <el-switch v-model="viewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="list"></el-switch>
@@ -76,8 +76,8 @@
           </el-table-column>
         </el-table>
       </div>
-      <div class="star zy-scroll" id="star-picture" v-show="viewMode === 'picture'">
-        <div class="star-box">
+      <div class="body zy-scroll" id="star-picture" v-show="viewMode === 'picture'">
+        <div class="show-img">
           <Waterfall ref="waterfall" :list="list" :gutter="20" :width="240"
           :breakpoints="{ 1200: { rowPerView: 4 } }"
           animationEffect="fadeInUp"
@@ -454,78 +454,95 @@ export default {
 </script>
 <style lang="scss" scoped>
 .star{
-  height: calc(100% - 40px);
-  display: flex;
-  position: relative;
-  overflow-y: auto;
-  .star-box{
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    padding: 10px;
-    .card{
-      border-radius: 6px;
-      overflow: hidden;
-      .img{
-        position: relative;
-        min-height: 40px;
-        img{
-          width: 100%;
-          height: auto;
-          cursor: pointer;
-        }
-        .rate{
-          right: 0;
-          top: 0;
-          position: absolute;
-          width: 100%;
-          font-size: 1rem;
-          background-color: #111111aa;
-          color: #cdcdcd;
-        }
-        .operate{
-          display: none;
-          position: absolute;
-          left: 0;
-          bottom: 0;
-          background-color: #111111aa;
-          width: 100%;
-          font-size: 13px;
-          .operate-wrap{
-            display: flex;
-            justify-content: space-between;
-            .o-play, .o-star, .o-share{
-              cursor: pointer;
-              display: inline-block;
-              width: 80px;
-              height: 36px;
-              text-align: center;
-              line-height: 36px;
-              color: #cdcdcd;
-              &:hover{
-                background-color: #111;
+  .body{
+    height: calc(100% - 40px);
+    display: flex;
+    position: relative;
+    overflow-y: auto;
+    &::-webkit-scrollbar{
+      width: 5px;
+      height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      position: absolute;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      position: absolute;
+    }
+    .body-box{
+      height: 100%;
+      width: 100%;
+    }
+    .show-img{
+      height: 100%;
+      width: 100%;
+      padding: 10px;
+      .card{
+        border-radius: 6px;
+        overflow: hidden;
+        .img{
+          position: relative;
+          min-height: 40px;
+          img{
+            width: 100%;
+            height: auto;
+            cursor: pointer;
+          }
+          .rate{
+            right: 0;
+            top: 0;
+            position: absolute;
+            width: 100%;
+            font-size: 1rem;
+            background-color: #111111aa;
+            color: #cdcdcd;
+          }
+          .operate{
+            display: none;
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            background-color: #111111aa;
+            width: 100%;
+            font-size: 13px;
+            .operate-wrap{
+              display: flex;
+              justify-content: space-between;
+              .o-play, .o-star, .o-share{
+                cursor: pointer;
+                display: inline-block;
+                width: 80px;
+                height: 36px;
+                text-align: center;
+                line-height: 36px;
+                color: #cdcdcd;
+                &:hover{
+                  background-color: #111;
+                }
               }
             }
           }
         }
-      }
-      .name{
-        font-size: 16px;
-        padding: 10px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        cursor: pointer;
-      }
-      .info{
-        display: flex;
-        justify-content: space-between;
-        font-size: 12px;
-        padding: 10px;
-      }
-      &:hover{
-        .operate{
-          display: block;
+        .name{
+          font-size: 16px;
+          padding: 10px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          cursor: pointer;
+        }
+        .info{
+          display: flex;
+          justify-content: space-between;
+          font-size: 12px;
+          padding: 10px;
+        }
+        &:hover{
+          .operate{
+            display: block;
+          }
         }
       }
     }