From e8c5c0ec7232a42393c1844bf3b1dcf22cbd8ea8 Mon Sep 17 00:00:00 2001
From: haiyangcui <cuiocean@gmail.com>
Date: Wed, 4 Nov 2020 14:23:49 +0100
Subject: [PATCH 1/2] =?UTF-8?q?=E6=94=B9=E8=BF=9B=E7=80=91=E5=B8=83?=
 =?UTF-8?q?=E6=B5=81=E8=AE=BE=E7=BD=AE,=E6=9B=B4=E5=A5=BD=E7=9A=84?=
 =?UTF-8?q?=E9=80=82=E5=BA=94=E5=AE=BD=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Film.vue           | 12 +++++++++++-
 src/components/Recommandation.vue | 12 +++++++++++-
 src/components/Star.vue           | 12 +++++++++++-
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/components/Film.vue b/src/components/Film.vue
index 3b6b53f..8ba6e20 100644
--- a/src/components/Film.vue
+++ b/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">
diff --git a/src/components/Recommandation.vue b/src/components/Recommandation.vue
index dcfa3e8..26f706c 100644
--- a/src/components/Recommandation.vue
+++ b/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">
diff --git a/src/components/Star.vue b/src/components/Star.vue
index dec67ef..8d730ae 100644
--- a/src/components/Star.vue
+++ b/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">

From fe37b32a0fb61a795fe0ef9b342feb58f229cef3 Mon Sep 17 00:00:00 2001
From: haiyangcui <cuiocean@gmail.com>
Date: Wed, 4 Nov 2020 15:27:35 +0100
Subject: [PATCH 2/2] =?UTF-8?q?=E9=BC=A0=E6=A0=87=E7=A7=BB=E5=8A=A8?=
 =?UTF-8?q?=E5=88=B0=E5=8D=A1=E7=89=87=E4=B8=8A=E6=97=B6,=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E4=B8=8A=E7=A7=BB=E5=8A=A8=E7=94=BB=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/style.scss | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index c957ffb..4039ae2 100644
--- a/src/assets/scss/style.scss
+++ b/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;