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;
diff --git a/src/components/Film.vue b/src/components/Film.vue
index 01dbcde..0a14ced 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">