diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index 6e24caf..ec80bb3 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -279,6 +279,120 @@
     }
   }
 }
+
+// PictureView
+.pictureView{
+  .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{
+            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;
+          }
+        }
+      }
+    }
+  }
+}
 // loading
 .zy-loading{
   width: 100%;
diff --git a/src/components/Recommandation.vue b/src/components/Recommandation.vue
index 81a4f04..1d2dee3 100644
--- a/src/components/Recommandation.vue
+++ b/src/components/Recommandation.vue
@@ -303,104 +303,3 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
-.recommandataions{
-  .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{
-            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);
-          }
-          .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/Star.vue b/src/components/Star.vue
index 3054d72..413d991 100644
--- a/src/components/Star.vue
+++ b/src/components/Star.vue
@@ -466,117 +466,3 @@ export default {
   }
 }
 </script>
-<style lang="scss" scoped>
-.star{
-  .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{
-            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;
-          }
-        }
-      }
-    }
-  }
-}
-</style>