diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index ec80bb3..9d20235 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -201,80 +201,175 @@
 
 // Page of list using el-table
 .listpage{
-  position: absolute;
-  left: 80px;
-  right: 20px;
-  top: 40px;
-  bottom: 20px;
-  width: calc(100% - 100px);
-  height: calc(100% - 60px);
-  border-radius: 5px;
-  .listpage-content{
-    height: 100%;
-    position: relative;
-    font-size: 1rem;
-    .listpage-header{
-      width: 100%;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding-left: 50px;
-      padding-right: 50px;
-      .el-button{
-        font-size: 1rem;
-        border: none;
-        &:hover{
-          cursor: pointer;
-        }
-      }
-      .is-loading:before {
-        background-color: none !important;
-      }
-      .el-input{
-        width: 200px;
+  height: calc(100% - 40px);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .listpage-header{
+    height: 30px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    z-index: 10;
+    .el-button{
+      font-size: 1rem;
+      border: none;
+      &:hover{
+        cursor: pointer;
       }
     }
-    .listpage-body{
-      height: calc(100% - 40px);
-      overflow-y: auto;
+    .is-loading:before {
+      background-color: none !important;
+    }
+    .el-input{
+      width: 200px;
+    }
+  }
+  .listpage-body{
+    margin-top: 20px;
+    flex: 1;
+    width: 100%;
+    border-radius: 0 0 5px 5px;
+    overflow-y: scroll;
+    &::-webkit-scrollbar{
+      width: 5px;
+      height: 1px;
+    }
+    &::-webkit-scrollbar-thumb {
+      border-radius: 10px;
+      position: absolute;
+    }
+    &::-webkit-scrollbar-track {
+      border-radius: 10px;
+      position: absolute;
+    }
+    .show-table{
       .el-table::before{
         height: 0px;
-      }
-      .el-table{
-        height: 100%;
-        width: 100%;
-        overflow-y: auto;
-        font-size: 1rem;
-      }
-      .el-table__body-wrapper{
-        &::-webkit-scrollbar{
-          width: 10px;
-          height: 1px;
         }
-        &::-webkit-scrollbar-thumb {
-          border-radius: 10px;
-          position: absolute;
+        .el-table{
+          height: 100%;
+          width: 100%;
+          overflow-y: auto;
+          font-size: 1rem;
         }
-        &::-webkit-scrollbar-track {
-          border-radius: 10px;
-          position: absolute;
+        .el-table__body-wrapper{
+          &::-webkit-scrollbar{
+            width: 10px;
+            height: 1px;
+          }
+          &::-webkit-scrollbar-thumb {
+            border-radius: 10px;
+            position: absolute;
+          }
+          &::-webkit-scrollbar-track {
+            border-radius: 10px;
+            position: absolute;
+          }
+        }
+        .el-input{
+          width: 200px;
+        }
+        .el-table__body td,.el-table__body th{
+          border-bottom: 1px solid;
+        }
+        .el-table--enable-row-hover .el-table__body tr:hover>td{
+          transform: scale(1.02);
+        }
+        .el-table .highlight{
+          color: var(--highlight-color) !important;
+        }
+        .el-button{
+          font-size: 1rem;
+        }
+    }
+    .show-picture{
+      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{
+            position: absolute;
+            top: 5%;
+            right: -40%;
+            width: 100%;
+            background-color: #2f90b9;
+            color: #cdcdcd;
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            text-align: center;
+            transform: rotate(45deg);
+          }
+          .update{
+            position: absolute;
+            top: 5%;
+            left: -40%;
+            width: 100%;
+            background-color: #68b88e;
+            color: #cdcdcd;
+            height: 30px;
+            line-height: 30px;
+            font-size: 14px;
+            text-align: center;
+            transform: rotate(-45deg);
+          }
+          .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;
+          }
         }
-      }
-      .el-input{
-        width: 200px;
-      }
-      .el-table__body td,.el-table__body th{
-        border-bottom: 1px solid;
-      }
-      .el-table--enable-row-hover .el-table__body tr:hover>td{
-        transform: scale(1.02);
-      }
-      .el-table .highlight{
-        color: var(--highlight-color) !important;
-      }
-      .el-button{
-        font-size: 1rem;
       }
     }
   }
diff --git a/src/assets/scss/theme/dark.scss b/src/assets/scss/theme/dark.scss
index 1161b45..a660b8e 100644
--- a/src/assets/scss/theme/dark.scss
+++ b/src/assets/scss/theme/dark.scss
@@ -170,23 +170,6 @@
       }
     }
   }
-  .pictureView{
-    .body{
-      background-color: var(--d-bgc-1);
-      box-shadow: var(--d-bsc);
-      .show-img{
-        color: var(--d-fc-1);
-        .card{
-          background-color: var(--d-bgc-1);
-          box-shadow: var(--d-bsc);
-          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-          &:hover{
-            box-shadow: var(--d-bsc-hover);
-          }
-        }
-      }
-    }
-  }
   .play{
     background-color: var(--d-bgc-1);
     box-shadow: var(--d-bsc);
@@ -351,11 +334,10 @@
     background-color: var(--d-bgc-1);
     box-shadow: var(--d-bsc);
   }
-  // Page of list using el-table
+  // Page of list using table and picture
   .listpage{
     color: var(--d-fc-2);
-    .listpage-content{
-      .listpage-header{
+    .listpage-header{
         border-bottom-color: var(--d-c-3);
         .btn{
           &:hover{
@@ -376,14 +358,27 @@
             color: var(--d-fc-2);
           }
         }
+    }
+    .listpage-body{
+       color: var(--d-fc-1);
+       background-color: var(--d-bgc-1);
+       &:hover{
+        &::-webkit-scrollbar-thumb {
+          box-shadow: var(--d-bsc-scroll);
+          background: var(--d-c-5);
+        }
+        &::-webkit-scrollbar-track {
+          box-shadow: var(--d-bsc-scroll);
+          background: var(--d-bgc-1);
+        }
       }
-      .listpage-body{
-        /* 设置el-table的样式*/
+      .show-table{
+       /* 设置el-table的样式*/
         .el-table{
           color: var(--d-fc-1);
           background-color: var(--d-bgc-1);
-         }
-         .el-input{
+        }
+       .el-input{
           input{
             background-color: var(--d-bgc-2);
             border: 1px solid var(--d-bgc-2);
@@ -395,18 +390,6 @@
           background-color: var(--d-bgc-1);
           border-bottom-color: var(--d-c-2);
         }
-        .el-table__body-wrapper{
-          &:hover{
-            &::-webkit-scrollbar-thumb {
-              box-shadow: var(--d-bsc-scroll);
-              background: var(--d-c-5);
-            }
-            &::-webkit-scrollbar-track {
-              box-shadow: var(--d-bsc-scroll);
-              background: var(--d-bgc-1);
-            }
-          }
-        }
         .el-table--enable-row-hover .el-table__body tr:hover>td{
           background-color: var(--d-bgc-2);
         }
@@ -417,6 +400,17 @@
           }
         }
       }
+      .show-picture{
+        color: var(--d-fc-1);
+        .card{
+          background-color: var(--d-bgc-1);
+          box-shadow: var(--d-bsc);
+          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+          &:hover{
+            box-shadow: var(--d-bsc-hover);
+          }
+        }
+      }
     }
   }
 }
diff --git a/src/assets/scss/theme/green.scss b/src/assets/scss/theme/green.scss
index ef2515a..120cfc6 100644
--- a/src/assets/scss/theme/green.scss
+++ b/src/assets/scss/theme/green.scss
@@ -166,23 +166,6 @@
       }
     }
   }
-  .pictureView{
-    .body{
-      background-color: var(--g-bgc-1);
-      box-shadow: var(--g-bsc);
-      .show-img{
-        color: var(--g-fc-1);
-        .card{
-          background-color: var(--g-bgc-1);
-          box-shadow: var(--g-bsc);
-          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-          &:hover{
-            box-shadow: var(--g-bsc-hover);
-          }
-        }
-      }
-    }
-  }
   .play{
     background-color: var(--g-bgc-1);
     box-shadow: var(--g-bsc);
@@ -347,11 +330,10 @@
     background-color: var(--g-bgc-1);
     box-shadow: var(--g-bsc);
   }
-  // Page of list using el-table
+  // Page of list using table and picture
   .listpage{
     color: var(--g-fc-2);
-    .listpage-content{
-      .listpage-header{
+    .listpage-header{
         border-bottom-color: var(--g-c-3);
         .btn{
           &:hover{
@@ -372,14 +354,27 @@
             color: var(--g-fc-2);
           }
         }
+    }
+    .listpage-body{
+      color: var(--g-fc-1);
+      background-color: var(--g-bgc-1);
+      &:hover{
+        &::-webkit-scrollbar-thumb {
+          box-shadow: var(--g-bsc-scroll);
+          background: var(--g-c-5);
+        }
+        &::-webkit-scrollbar-track {
+          box-shadow: var(--g-bsc-scroll);
+          background: var(--g-bgc-1);
+        }
       }
-      .listpage-body{
-        /* 设置el-table的样式*/
+      .show-table{
+       /* 设置el-table的样式*/
         .el-table{
           color: var(--g-fc-1);
           background-color: var(--g-bgc-1);
-         }
-         .el-input{
+        }
+       .el-input{
           input{
             background-color: var(--g-bgc-2);
             border: 1px solid var(--g-bgc-2);
@@ -391,18 +386,6 @@
           background-color: var(--g-bgc-1);
           border-bottom-color: var(--g-c-2);
         }
-        .el-table__body-wrapper{
-          &:hover{
-            &::-webkit-scrollbar-thumb {
-              box-shadow: var(--g-bsc-scroll);
-              background: var(--g-c-5);
-            }
-            &::-webkit-scrollbar-track {
-              box-shadow: var(--g-bsc-scroll);
-              background: var(--g-bgc-1);
-            }
-          }
-        }
         .el-table--enable-row-hover .el-table__body tr:hover>td{
           background-color: var(--g-bgc-2);
         }
@@ -413,6 +396,17 @@
           }
         }
       }
+      .show-picture{
+        color: var(--g-fc-1);
+        .card{
+          background-color: var(--g-bgc-1);
+          box-shadow: var(--g-bsc);
+          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+          &:hover{
+            box-shadow: var(--g-bsc-hover);
+          }
+        }
+      }
     }
   }
 }
diff --git a/src/assets/scss/theme/light.scss b/src/assets/scss/theme/light.scss
index 4ea943c..967484a 100644
--- a/src/assets/scss/theme/light.scss
+++ b/src/assets/scss/theme/light.scss
@@ -166,23 +166,6 @@
       }
     }
   }
-  .pictureView{
-    .body{
-      background-color: var(--l-bgc-1);
-      box-shadow: var(--l-bsc);
-      .show-img{
-        color: var(--l-fc-1);
-        .card{
-          background-color: var(--l-bgc-1);
-          box-shadow: var(--l-bsc);
-          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-          &:hover{
-            box-shadow: var(--l-bsc-hover);
-          }
-        }
-      }
-    }
-  }
   .play{
     background-color: var(--l-bgc-1);
     box-shadow: var(--l-bsc);
@@ -347,11 +330,10 @@
     background-color: var(--l-bgc-1);
     box-shadow: var(--l-bsc);
   }
-  // Page of list using el-table
+  // Page of list using table and picture
   .listpage{
     color: var(--l-fc-2);
-    .listpage-content{
-      .listpage-header{
+    .listpage-header{
         border-bottom-color: var(--l-c-3);
         .btn{
           &:hover{
@@ -372,14 +354,27 @@
             color: var(--l-fc-2);
           }
         }
+    }
+    .listpage-body{
+      color: var(--l-fc-1);
+      background-color: var(--l-bgc-1);
+      &:hover{
+        &::-webkit-scrollbar-thumb {
+          box-shadow: var(--l-bsc-scroll);
+          background: var(--l-c-5);
+        }
+        &::-webkit-scrollbar-track {
+          box-shadow: var(--l-bsc-scroll);
+          background: var(--l-bgc-1);
+        }
       }
-      .listpage-body{
-        /* 设置el-table的样式*/
+      .show-table{
+       /* 设置el-table的样式*/
         .el-table{
           color: var(--l-fc-1);
           background-color: var(--l-bgc-1);
-         }
-         .el-input{
+        }
+       .el-input{
           input{
             background-color: var(--l-bgc-2);
             border: 1px solid var(--l-bgc-2);
@@ -391,18 +386,6 @@
           background-color: var(--l-bgc-1);
           border-bottom-color: var(--l-c-2);
         }
-        .el-table__body-wrapper{
-          &:hover{
-            &::-webkit-scrollbar-thumb {
-              box-shadow: var(--l-bsc-scroll);
-              background: var(--l-c-5);
-            }
-            &::-webkit-scrollbar-track {
-              box-shadow: var(--l-bsc-scroll);
-              background: var(--l-bgc-1);
-            }
-          }
-        }
         .el-table--enable-row-hover .el-table__body tr:hover>td{
           background-color: var(--l-bgc-2);
         }
@@ -413,6 +396,17 @@
           }
         }
       }
+      .show-picture{
+        color: var(--l-fc-1);
+        .card{
+          background-color: var(--l-bgc-1);
+          box-shadow: var(--l-bsc);
+          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+          &:hover{
+            box-shadow: var(--l-bsc-hover);
+          }
+        }
+      }
     }
   }
 }
diff --git a/src/assets/scss/theme/pink.scss b/src/assets/scss/theme/pink.scss
index 0973bec..1e60825 100644
--- a/src/assets/scss/theme/pink.scss
+++ b/src/assets/scss/theme/pink.scss
@@ -165,23 +165,6 @@
       }
     }
   }
-  .pictureView{
-    .body{
-      background-color: var(--p-bgc-1);
-      box-shadow: var(--p-bsc);
-      .show-img{
-        color: var(--p-fc-1);
-        .card{
-          background-color: var(--p-bgc-1);
-          box-shadow: var(--p-bsc);
-          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-          &:hover{
-            box-shadow: var(--p-bsc-hover);
-          }
-        }
-      }
-    }
-  }
   .play{
     background-color: var(--p-bgc-1);
     box-shadow: var(--p-bsc);
@@ -346,11 +329,10 @@
     background-color: var(--p-bgc-1);
     box-shadow: var(--p-bsc);
   }
-  // Page of list using el-table
+  // Page of list using table and picture
   .listpage{
     color: var(--p-fc-2);
-    .listpage-content{
-      .listpage-header{
+    .listpage-header{
         border-bottom-color: var(--p-c-3);
         .btn{
           &:hover{
@@ -371,14 +353,27 @@
             color: var(--p-fc-2);
           }
         }
+    }
+    .listpage-body{
+      color: var(--p-fc-1);
+      background-color: var(--p-bgc-1);
+      &:hover{
+        &::-webkit-scrollbar-thumb {
+          box-shadow: var(--p-bsc-scroll);
+          background: var(--p-c-5);
+        }
+        &::-webkit-scrollbar-track {
+          box-shadow: var(--p-bsc-scroll);
+          background: var(--p-bgc-1);
+        }
       }
-      .listpage-body{
-        /* 设置el-table的样式*/
+      .show-table{
+       /* 设置el-table的样式*/
         .el-table{
           color: var(--p-fc-1);
           background-color: var(--p-bgc-1);
-         }
-         .el-input{
+        }
+       .el-input{
           input{
             background-color: var(--p-bgc-2);
             border: 1px solid var(--p-bgc-2);
@@ -390,18 +385,6 @@
           background-color: var(--p-bgc-1);
           border-bottom-color: var(--p-c-2);
         }
-        .el-table__body-wrapper{
-          &:hover{
-            &::-webkit-scrollbar-thumb {
-              box-shadow: var(--p-bsc-scroll);
-              background: var(--p-c-5);
-            }
-            &::-webkit-scrollbar-track {
-              box-shadow: var(--p-bsc-scroll);
-              background: var(--p-bgc-1);
-            }
-          }
-        }
         .el-table--enable-row-hover .el-table__body tr:hover>td{
           background-color: var(--p-bgc-2);
         }
@@ -412,6 +395,17 @@
           }
         }
       }
+      .show-picture{
+        color: var(--p-fc-1);
+        .card{
+          background-color: var(--p-bgc-1);
+          box-shadow: var(--p-bsc);
+          transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+          &:hover{
+            box-shadow: var(--p-bsc-hover);
+          }
+        }
+      }
     }
   }
 }
diff --git a/src/components/Film.vue b/src/components/Film.vue
index 8f0c55b..914bce6 100644
--- a/src/components/Film.vue
+++ b/src/components/Film.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="film pictureView">
-    <div class="header">
+  <div class="listpage" id="film">
+    <div class="listpage-header" id="film-header">
       <div class="zy-select" @mouseleave="show.site = false">
         <div class="vs-placeholder" @click="show.site = true">{{site.name}}</div>
         <div class="vs-options" v-show="show.site">
@@ -27,9 +27,9 @@
         </div>
       </div>
     </div>
-    <div class="body zy-scroll" infinite-wrapper>
+    <div class="listpage-body" id="film-body" infinite-wrapper>
       <div class="body-box" v-show="!show.find">
-        <div class="show-img" v-if="setting.view === 'picture'">
+        <div class="show-picture" v-if="setting.view === 'picture'">
           <Waterfall ref="waterfall" :list="list" :gutter="20" :width="240"
           :breakpoints="{ 1200: { rowPerView: 4 } }"
           animationEffect="fadeInUp"
@@ -493,104 +493,3 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
-.film{
-  height: calc(100% - 40px);
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  .header{
-    height: 30px;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    z-index: 10;
-  }
-  .body{
-    margin-top: 20px;
-    flex: 1;
-    width: 100%;
-    border-radius: 0 0 5px 5px;
-    overflow-y: scroll;
-    &::-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;
-          }
-          .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;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/History.vue b/src/components/History.vue
index 701dcb0..377bde7 100644
--- a/src/components/History.vue
+++ b/src/components/History.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="listpage" id="history">
-    <div class="listpage-content">
-      <div class="listpage-header">
+    <div class="listpage-header" id="history-header">
         <el-button @click.stop="exportHistory" icon="el-icon-upload2">导出</el-button>
         <el-button @click.stop="importHistory" icon="el-icon-download">导入</el-button>
         <el-button @click.stop="clearAllHistory" icon="el-icon-delete-solid">清空</el-button>
-      </div>
-      <div class="listpage-body" id="history-table">
+    </div>
+    <div class="listpage-body" id="history-body">
+      <div class="show-table" id="history-table" >
         <el-table size="mini" fit height="100%" :data="history" row-key="id" @row-click="detailEvent">
           <el-table-column
             prop="name"
@@ -42,7 +42,7 @@
         </el-table>
       </div>
     </div>
-  </div>
+    </div>
 </template>
 <script>
 import { mapMutations } from 'vuex'
diff --git a/src/components/IPTV.vue b/src/components/IPTV.vue
index 09aa6e6..5493e90 100644
--- a/src/components/IPTV.vue
+++ b/src/components/IPTV.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class="listpage" id="IPTV">
-    <div class="listpage-content">
-      <div class="listpage-header" v-show="!enableBatchEdit">
+  <div class="listpage" id="iptv">
+    <div class="listpage-header" id="iptv-header" v-show="!enableBatchEdit">
         <el-switch v-model="enableBatchEdit" active-text="批处理分组"></el-switch>
         <el-button @click.stop="exportChannels" icon="el-icon-upload2" >导出</el-button>
         <el-button @click.stop="importChannels" icon="el-icon-download">导入</el-button>
         <el-button @click.stop="removeAllChannels" icon="el-icon-delete-solid">清空</el-button>
         <el-button @click.stop="resetChannelsEvent" icon="el-icon-refresh-left">重置</el-button>
-      </div>
-      <div class="listpage-header" v-show="enableBatchEdit">
+    </div>
+    <div class="listpage-header" id="iptv-header" v-show="enableBatchEdit">
         <el-switch v-model="enableBatchEdit" active-text="批处理分组"></el-switch>
         <el-input placeholder="新组名" v-model="batchGroupName"></el-input>
         <el-button type="primary" icon="el-icon-edit" @click.stop="saveBatchEdit">保存</el-button>
-      </div>
-      <div class="listpage-body" id="iptv-table">
+    </div>
+    <div class="listpage-body" id="iptv-table">
+      <div class="show-table" id="iptv-table">
         <el-table
           ref="iptvTable"
           size="mini" fit height="100%" row-key="id"
diff --git a/src/components/Recommandation.vue b/src/components/Recommandation.vue
index 5bb8bc7..f99c9b3 100644
--- a/src/components/Recommandation.vue
+++ b/src/components/Recommandation.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="listpage recommandataions pictureView">
-    <div class="listpage-content">
-      <div class="listpage-header">
+  <div class="listpage" id="recommandataions">
+    <div class="listpage-header" id="recommandataions-header">
         <el-switch v-model="viewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="list" @change="updateViewMode"></el-switch>
         <el-select size="mini" v-model="selectedAreas" multiple collapse-tags style="margin-left: 20px;" placeholder="地区">
           <el-option
@@ -20,8 +19,9 @@
           </el-option>
         </el-select>
         <el-button :loading="loading" @click.stop="updateEvent" icon="el-icon-refresh">更新推荐</el-button>
-      </div>
-      <div class="listpage-body" id="recommandataions-table" v-show="viewMode === 'list'">
+    </div>
+    <div class="listpage-body" id="recommandataions-body" >
+      <div class="show-table" id="star-table" v-show="viewMode === 'list'">
         <el-table size="mini" fit height="100%" row-key="id"
         ref="recommandataionsTable"
         :data="filteredRecommandations"
@@ -69,9 +69,8 @@
           </el-table-column>
         </el-table>
       </div>
-      <div class="body zy-scroll" id="star-picture" v-show="viewMode === 'picture'">
-        <div class="show-img">
-          <Waterfall ref="waterfall" :list="filteredRecommandations" :gutter="20" :width="240"
+      <div class="show-picture" id="star-picture" v-show="viewMode === 'picture'">
+        <Waterfall ref="waterfall" :list="filteredRecommandations" :gutter="20" :width="240"
           :breakpoints="{ 1200: { rowPerView: 4 } }"
           animationEffect="fadeInUp"
           backgroundColor="rgba(0, 0, 0, 0)">
@@ -100,8 +99,7 @@
                 </div>
               </div>
             </template>
-          </Waterfall>
-        </div>
+        </Waterfall>
       </div>
     </div>
   </div>
diff --git a/src/components/Star.vue b/src/components/Star.vue
index e8d8d88..5c84235 100644
--- a/src/components/Star.vue
+++ b/src/components/Star.vue
@@ -1,14 +1,14 @@
 <template>
-  <div class="listpage star pictureView">
-    <div class="listpage-content">
-      <div class="listpage-header">
+  <div class="listpage" id="star">
+    <div class="listpage-header" id="star-header">
         <el-switch v-model="viewMode" active-text="海报" active-value="picture" inactive-text="列表" inactive-value="list" @change="updateViewMode"></el-switch>
         <el-button @click.stop="exportFavoritesEvent" icon="el-icon-upload2">导出</el-button>
         <el-button @click.stop="importFavoritesEvent" icon="el-icon-download">导入</el-button>
         <el-button @click.stop="clearFavoritesEvent" icon="el-icon-delete-solid">清空</el-button>
         <el-button @click.stop="updateAllEvent" icon="el-icon-refresh">同步所有收藏</el-button>
-      </div>
-      <div class="listpage-body" id="star-table" v-show="viewMode === 'list'">
+    </div>
+    <div class="listpage-body" id="star-body">
+      <div class="show-table" id="star-table"  v-show="viewMode === 'list'">
         <el-table size="mini" fit height="100%" row-key="id"
         ref="starTable"
         :data="list"
@@ -76,9 +76,8 @@
           </el-table-column>
         </el-table>
       </div>
-      <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"
+      <div class="show-picture" id="star-picture" v-show="viewMode === 'picture'">
+        <Waterfall ref="waterfall" :list="list" :gutter="20" :width="240"
           :breakpoints="{ 1200: { rowPerView: 4 } }"
           animationEffect="fadeInUp"
           backgroundColor="rgba(0, 0, 0, 0)">
@@ -109,8 +108,7 @@
                 </div>
               </div>
             </template>
-          </Waterfall>
-        </div>
+        </Waterfall>
       </div>
     </div>
   </div>