改进瀑布流的样式及鼠标划过的效果

src/assets/scss/style.scss

@@ -313,6 +313,12 @@
       .card{
         border-radius: 6px;
         overflow: hidden;
+        position: relative;
+        cursor: pointer;
+        transition: 0.2s;
+        &:hover {
+          top: -3px;
+        }
         .img{
           position: relative;
           min-height: 40px;
@@ -380,7 +386,6 @@
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
-          cursor: pointer;
         }
         .info{
           display: flex;

src/components/Film.vue

@@ -30,7 +30,17 @@
     <div class="listpage-body" id="film-body" infinite-wrapper>
       <div class="show-picture" v-if="setting.view === 'picture' && !show.find">
           <Waterfall ref="filmWaterfall" :list="list" :gutter="20" :width="240"
-          :breakpoints="{ 1200: { rowPerView: 4 } }"
+          :breakpoints="{
+            1200: { //当屏幕宽度小于等于1200
+              rowPerView: 4,
+            },
+            800: { //当屏幕宽度小于等于800
+              rowPerView: 3,
+            },
+            500: { //当屏幕宽度小于等于500
+              rowPerView: 2,
+            }
+          }"
           animationEffect="fadeInUp"
           backgroundColor="rgba(0, 0, 0, 0)">
             <template slot="item" slot-scope="props">

src/components/Recommandation.vue

@@ -72,7 +72,17 @@
       </div>
       <div class="show-picture" id="star-picture" v-show="viewMode === 'picture'">
         <Waterfall ref="recommandataionsWaterfall" :list="filteredRecommandations" :gutter="20" :width="240"
-          :breakpoints="{ 1200: { rowPerView: 4 } }"
+          :breakpoints="{
+            1200: { //当屏幕宽度小于等于1200
+              rowPerView: 4,
+            },
+            800: { //当屏幕宽度小于等于800
+              rowPerView: 3,
+            },
+            500: { //当屏幕宽度小于等于500
+              rowPerView: 2,
+            }
+          }"
           animationEffect="fadeInUp"
           backgroundColor="rgba(0, 0, 0, 0)">
             <template slot="item" slot-scope="props">

src/components/Star.vue

@@ -78,7 +78,17 @@
       </div>
       <div class="show-picture" id="star-picture" v-show="viewMode === 'picture'">
         <Waterfall ref="starWaterfall" :list="list" :gutter="20" :width="240"
-          :breakpoints="{ 1200: { rowPerView: 4 } }"
+          :breakpoints="{
+            1200: { //当屏幕宽度小于等于1200
+              rowPerView: 4,
+            },
+            800: { //当屏幕宽度小于等于800
+              rowPerView: 3,
+            },
+            500: { //当屏幕宽度小于等于500
+              rowPerView: 2,
+            }
+          }"
           animationEffect="fadeInUp"
           backgroundColor="rgba(0, 0, 0, 0)">
             <template slot="item" slot-scope="props">