diff --git a/src/assets/image/logo.png b/src/assets/image/logo.png
index f3d2503..443a804 100644
Binary files a/src/assets/image/logo.png and b/src/assets/image/logo.png differ
diff --git a/src/assets/scss/theme.scss b/src/assets/scss/theme.scss
index b2d97b6..53aa69d 100644
--- a/src/assets/scss/theme.scss
+++ b/src/assets/scss/theme.scss
@@ -4,6 +4,7 @@
   --l-c-1: #823aa011;
   --l-c-2: #823aa022;
   --l-c-3: #823aa033;
+  --l-c-5: #823aa055;
   --l-c-8: #823aa088;
   --l-c-9: #823aa099;
   --l-fc-1: #808695;
@@ -12,6 +13,7 @@
   --l-bgc-1: #ffffff;
   --l-bgc-2: #f2f6f9;
   --l-bsc: 0 3px 1px -2px #8e8da233, 0 2px 2px 0 #8e8da224, 0 1px 5px 0 #8e8da21f;
+  --l-bsc-2: 0 -4px 23px 0 #8e8da233;
   --l-bsc-hover: 0 14px 26px -12px #8e8da26b, 0 4px 23px 0 #8e8da21f, 0 8px 10px -5px #8e8da233;
   --l-bsc-scroll: inset 0 0 5px #823aa005;
 }
diff --git a/src/assets/scss/theme/light.scss b/src/assets/scss/theme/light.scss
index 886294f..7b65220 100644
--- a/src/assets/scss/theme/light.scss
+++ b/src/assets/scss/theme/light.scss
@@ -123,6 +123,40 @@
       }
     }
   }
+  .detail{
+    color: var(--l-fc-1);
+    background-color:var(--l-bgc-1);
+    box-shadow: var(--l-bsc-2);
+    .detail-content{
+      .detail-close{
+        svg{
+          stroke-width: 1;
+          stroke: var(--l-c-8);
+          &:hover{
+            stroke-width: 2px;
+            stroke: var(--l-c-9);
+          }
+        }
+      }
+      .detail-body{
+        .info, .desc, .m3u8_urls, .mp4_urls{
+          border-color: var(--l-c-2);
+        }
+        .m3u8_urls, .mp4_urls{
+          .box{
+            span{
+              border-color: var(--l-c-5);
+              &:hover{
+                color: var(--l-fc-2);
+                background-color: var(--l-c-1);
+                border-color: var(--l-c-8);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
   .film{
     .top{
       .search{
@@ -151,5 +185,109 @@
         }
       }
     }
+    .middle{
+      background-color: var(--l-bgc-1);
+      box-shadow: var(--l-bsc);
+    }
+  }
+  .play{
+    background-color: var(--l-bgc-1);
+    box-shadow: var(--l-bsc);
+    .box{
+      .more{
+        span{
+          svg{
+            stroke: var(--l-c-5);
+            stroke-width: 1;
+            fill: none;
+          }
+          &:hover{
+            svg{
+              stroke: var(--l-c-8);
+              stroke-width: 1.5;
+              fill: var(--l-c-2);
+            }
+          }
+          &.active{
+            svg{
+              stroke: var(--l-c-9);
+              stroke-width: 2;
+              fill: var(--l-c-3);
+            }
+          }
+        }
+      }
+    }
+    .list{
+      border: 1px solid var(--l-c-3);
+      background-color: var(--l-bgc-2);
+      .list-top{
+        color: var(--l-fc-2);
+        .list-top-close{
+          svg{
+            stroke: var(--l-c-5);
+            stroke-width: 1;
+            fill: none;
+            &:hover{
+              stroke: var(--l-c-8);
+              stroke-width: 1.5;
+              fill: var(--l-c-2);
+            }
+          }
+        }
+      }
+      .list-body{
+        .list-item{
+          li{
+            color: var(--l-fc-1);
+            &.active{
+              background-color: var(--l-c-2);
+              color: var(--l-fc-3);
+            }
+          }
+        }
+        .list-history{
+          li{
+            .title{
+              color: var(--l-fc-1);
+            }
+            &.active{
+              background-color: var(--l-c-2);
+              .title{
+                color: var(--l-fc-3);
+              }
+            }
+            &:hover{
+              background-color: var(--l-c-3);
+              .detail-delete{
+                display: inline-block;
+                color: var(--l-fc-2);
+              }
+            }
+            .detail-delete{
+              &:hover{
+                background-color: var(--l-c-2);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .star{
+    background-color: var(--l-bgc-1);
+    box-shadow: var(--l-bsc);
+  }
+  .setting{
+    background-color: var(--l-bgc-1);
+    box-shadow: var(--l-bsc);
+    .info{
+      a{
+        color: var(--l-fc-1);
+        &:hover{
+          color: var(--l-fc-2);
+        }
+      }
+    }
   }
 }
diff --git a/src/components/Aside.vue b/src/components/Aside.vue
index f342ae0..afdd619 100644
--- a/src/components/Aside.vue
+++ b/src/components/Aside.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="aside">
-    <span :class="[view === 'Film' ? 'active ': ''] + 'film zy-svg'" @click="changeView('Film')">
+    <span :class="[view === 'Film' ? 'active ': ''] + 'zy-svg'" @click="changeView('Film')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="apertureIconTitle">
         <title id="apertureIconTitle">{{$t('view')}}</title>
         <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path>
@@ -14,19 +14,19 @@
         </g>
       </svg>
     </span>
-    <span :class="[view === 'Play' ? 'active ': ''] + 'play zy-svg'" @click="changeView('Play')">
+    <span :class="[view === 'Play' ? 'active ': ''] + 'zy-svg'" @click="changeView('Play')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="playIconTitle">
         <title id="playIconTitle">{{$t('play')}}</title>
         <path d="M20 12L5 21V3z"></path>
       </svg>
     </span>
-    <span :class="[view === 'Star' ? 'active ': ''] + 'star zy-svg'" @click="changeView('Star')">
+    <span :class="[view === 'Star' ? 'active ': ''] + 'zy-svg'" @click="changeView('Star')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="favouriteIconTitle">
         <title id="favouriteIconTitle">{{$t('star')}}</title>
         <path d="M12,21 L10.55,19.7051771 C5.4,15.1242507 2,12.1029973 2,8.39509537 C2,5.37384196 4.42,3 7.5,3 C9.24,3 10.91,3.79455041 12,5.05013624 C13.09,3.79455041 14.76,3 16.5,3 C19.58,3 22,5.37384196 22,8.39509537 C22,12.1029973 18.6,15.1242507 13.45,19.7149864 L12,21 Z"></path>
       </svg>
     </span>
-    <span :class="[view === 'Setting' ? 'active ': ''] + 'setting zy-svg'" @click="changeView('Setting')">
+    <span :class="[view === 'Setting' ? 'active ': ''] + 'zy-svg'" @click="changeView('Setting')">
       <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="settingsIconTitle">
         <title id="settingsIconTitle">{{$t('setting')}}</title>
         <path d="M5.03506429,12.7050339 C5.01187484,12.4731696 5,12.2379716 5,12 C5,11.7620284 5.01187484,11.5268304 5.03506429,11.2949661 L3.20577137,9.23205081 L5.20577137,5.76794919 L7.9069713,6.32070904 C8.28729123,6.0461342 8.69629298,5.80882212 9.12862533,5.61412402 L10,3 L14,3 L14.8713747,5.61412402 C15.303707,5.80882212 15.7127088,6.0461342 16.0930287,6.32070904 L18.7942286,5.76794919 L20.7942286,9.23205081 L18.9649357,11.2949661 C18.9881252,11.5268304 19,11.7620284 19,12 C19,12.2379716 18.9881252,12.4731696 18.9649357,12.7050339 L20.7942286,14.7679492 L18.7942286,18.2320508 L16.0930287,17.679291 C15.7127088,17.9538658 15.303707,18.1911779 14.8713747,18.385876 L14,21 L10,21 L9.12862533,18.385876 C8.69629298,18.1911779 8.28729123,17.9538658 7.9069713,17.679291 L5.20577137,18.2320508 L3.20577137,14.7679492 L5.03506429,12.7050339 Z"></path>
diff --git a/src/components/Detail.vue b/src/components/Detail.vue
index e51848d..d1e60a7 100644
--- a/src/components/Detail.vue
+++ b/src/components/Detail.vue
@@ -2,32 +2,32 @@
   <div class="detail">
     <div class="detail-content">
       <div class="detail-header">
-        <span class="detail-title">详情</span>
-        <span class="detail-close" @click="closeDetail">
+        <span class="detail-title">{{$t('detail')}}</span>
+        <span class="detail-close zy-svg" @click="closeDetail">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="closeIconTitle">
-            <title id="closeIconTitle">关闭</title>
+            <title id="closeIconTitle">{{$t('close')}}</title>
             <path d="M6.34314575 6.34314575L17.6568542 17.6568542M6.34314575 17.6568542L17.6568542 6.34314575"></path>
           </svg>
         </span>
       </div>
-      <div class="detail-body" v-show="!loading" :style="{overflowY:scroll? 'auto' : 'hidden',paddingRight: scroll ? '0': '5px' }" @mouseenter="scroll = true" @mouseleave="scroll = false">
+      <div class="detail-body zy-scroll" v-show="!loading" :style="{overflowY:scroll? 'auto' : 'hidden',paddingRight: scroll ? '0': '5px' }" @mouseenter="scroll = true" @mouseleave="scroll = false">
         <div class="info" v-html="vDetail.info"></div>
         <div class="desc" v-html="vDetail.desc" v-if="show.desc"></div>
         <div class="m3u8_urls">
-          <div class="title">播放:</div>
+          <div class="title">{{$t('play')}}：</div>
           <div class="box">
             <span v-for="(i, j) in vDetail.m3u8_urls" :key="j" @click="playEvent(i)">{{i | ftName}}</span>
           </div>
         </div>
         <div class="mp4_urls" v-if="show.download">
-          <div class="title">下载链接:</div>
+          <div class="title">{{$t('download')}}：</div>
           <div class="box">
             <span v-for="(i, j) in vDetail.mp4_urls" :key="j" @click="download(i)">{{i | ftName}}</span>
             <span @click="allDownload" v-show="vDetail.mp4_urls.length > 1">全集下载</span>
           </div>
         </div>
       </div>
-      <div class="detail-mask" v-show="loading">
+      <div class="detail-mask zy-loading" v-show="loading">
         <div class="loader"></div>
       </div>
     </div>
@@ -135,9 +135,6 @@ export default {
   bottom: 0;
   width: 100%;
   height: 680px;
-  background-color: #fff;
-  box-shadow:0 -4px 12px 0 #0c0c0e1f;
-  color: #808695;
   z-index: 999;
   .detail-content{
     height: 680px;
@@ -154,41 +151,12 @@ export default {
         font-size: 16px;
       }
       .detail-close{
-        svg{
-          width: 24px;
-          height: 24px;
-          stroke: #823aa099;
-          stroke-width: 1;
-          stroke-linecap: round;
-          stroke-linejoin: round;
-          fill: none;
-          &:hover{
-            stroke-width: 2px;
-            stroke: #823aa0aa;
-          }
-        }
         cursor: pointer;
       }
     }
     .detail-body{
       height: 630px;
       overflow-y: auto;
-      &::-webkit-scrollbar{
-        width: 5px;
-        height: 1px;
-      }
-      &::-webkit-scrollbar-thumb {
-        border-radius: 10px;
-        box-shadow: inset 0 0 5px #823aa005;
-        background: #823aa055;
-        position: absolute;
-      }
-      &::-webkit-scrollbar-track {
-        box-shadow: inset 0 0 5px #823aa005;
-        border-radius: 10px;
-        background: #EDEDED;
-        position: absolute;
-      }
       .info{
         display: flex;
         justify-content: flex-start;
@@ -196,7 +164,7 @@ export default {
         flex-wrap: wrap;
         width: 1000px;
         padding: 10px;
-        border: 1px solid #823aa022;
+        border: 1px solid;
         border-radius: 2px;
         margin-bottom: 10px;
         .vodImg{
@@ -278,14 +246,13 @@ export default {
             }
             a{
               pointer-events: none;
-              color: #808695;
               text-decoration: none;
             }
           }
         }
       }
       .desc{
-        border: 1px solid #823aa033;
+        border: 1px solid;
         padding: 10px;
         width: 1000px;
         margin-bottom: 10px;
@@ -294,7 +261,7 @@ export default {
         line-height: 20px;
       }
       .m3u8_urls, .mp4_urls{
-        border: 1px solid #823aa033;
+        border: 1px solid;
         padding: 10px;
         width: 1000px;
         margin-bottom: 10px;
@@ -309,15 +276,11 @@ export default {
           flex-wrap: wrap;
           span{
             font-size: 12px;
-            border: 1px solid #823aa055;
+            border: 1px solid;
             border-radius: 2px;
             cursor: pointer;
             margin: 6px 10px 0px 0px;
             padding: 8px 22px;
-            &:hover{
-              color: #6e7380;
-              background-color: #823aa011;
-            }
           }
           &::after {
             content: '';
@@ -338,7 +301,6 @@ export default {
       justify-content: center;
       align-items: center;
       .loader {
-        color: #823aa055;
         font-size: 8px;
         width: 1em;
         height: 1em;
diff --git a/src/components/Film.vue b/src/components/Film.vue
index da62117..abf3825 100644
--- a/src/components/Film.vue
+++ b/src/components/Film.vue
@@ -324,10 +324,8 @@ export default {
     height: 620px;
     width: 100%;
     margin-top: 10px;
-    padding-bottom:0px;
-    background-color: #fff;
+    padding-bottom: 0px;
     border-radius: 5px;
-    box-shadow: 0 3px 1px -2px #8e8da233, 0 2px 2px 0 #8e8da224, 0 1px 5px 0 #8e8da21f;
   }
 }
 </style>
diff --git a/src/components/Play.vue b/src/components/Play.vue
index d79edae..6eb9778 100644
--- a/src/components/Play.vue
+++ b/src/components/Play.vue
@@ -4,15 +4,15 @@
       <div class="title">{{name}}</div>
       <div id="xg"></div>
       <div class="more" v-show="more">
-        <span @click="nextEvent" v-show="showNext">
+        <span class="zy-svg" @click="nextEvent" v-show="showNext">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="forwardIconTitle">
-            <title id="forwardIconTitle">下一集</title>
+            <title id="forwardIconTitle">{{$t('next')}}</title>
             <path d="M10 14.74L3 19V5l7 4.26V5l12 7-12 7v-4.26z"></path>
           </svg>
         </span>
-        <span @click="listEvent" :class="right.type === 'list' ? 'active' : ''" v-show="right.listData.length > 0">
+        <span class="zy-svg" @click="listEvent" :class="right.type === 'list' ? 'active' : ''" v-show="right.listData.length > 0">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="dashboardIconTitle">
-            <title id="dashboardIconTitle">播放列表</title>
+            <title id="dashboardIconTitle">{{$t('play_list')}}</title>
             <rect width="20" height="20" x="2" y="2"></rect>
             <path d="M11 7L17 7M11 12L17 12M11 17L17 17"></path>
             <line x1="7" y1="7" x2="7" y2="7"></line>
@@ -20,47 +20,47 @@
             <line x1="7" y1="17" x2="7" y2="17"></line>
           </svg>
         </span>
-        <span @click="historyEvent" :class="right.type === 'history' ? 'active' : ''">
+        <span class="zy-svg" @click="historyEvent" :class="right.type === 'history' ? 'active' : ''">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="timeIconTitle">
-            <title id="timeIconTitle">历史记录</title>
+            <title id="timeIconTitle">{{$t('history')}}</title>
             <circle cx="12" cy="12" r="10"></circle>
             <polyline points="12 5 12 12 16 16"></polyline>
           </svg>
         </span>
-        <span @click="starEvent" :class="isStar ? 'active' : ''" v-show="right.listData.length > 0">
+        <span class="zy-svg" @click="starEvent" :class="isStar ? 'active' : ''" v-show="right.listData.length > 0">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="favouriteIconTitle">
-            <title id="favouriteIconTitle">收藏</title>
+            <title id="favouriteIconTitle">{{$t('star')}}</title>
             <path d="M12,21 L10.55,19.7051771 C5.4,15.1242507 2,12.1029973 2,8.39509537 C2,5.37384196 4.42,3 7.5,3 C9.24,3 10.91,3.79455041 12,5.05013624 C13.09,3.79455041 14.76,3 16.5,3 C19.58,3 22,5.37384196 22,8.39509537 C22,12.1029973 18.6,15.1242507 13.45,19.7149864 L12,21 Z"></path>
           </svg>
         </span>
-        <span @click="topEvent" :class="isTop ? 'active' : ''" v-show="right.listData.length > 0">
+        <span class="zy-svg" @click="topEvent" :class="isTop ? 'active' : ''" v-show="right.listData.length > 0">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="arrowUpIconTitle">
-            <title id="arrowUpIconTitle">置顶</title>
+            <title id="arrowUpIconTitle">{{$t('top')}}</title>
             <path d="M9 10.5l3-3 3 3"></path>
             <path d="M12 16.5V9"></path>
             <path stroke-linecap="round" d="M12 7.5V9"></path>
             <circle cx="12" cy="12" r="10"></circle>
           </svg>
         </span>
-        <span @click="detailEvent" v-show="right.listData.length > 0">
+        <span class="zy-svg" @click="detailEvent" v-show="right.listData.length > 0">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="feedIconTitle">
-            <title id="feedIconTitle">详情</title>
+            <title id="feedIconTitle">{{$t('detail')}}</title>
             <circle cx="7.5" cy="7.5" r="2.5"></circle>
             <path d="M22 13H2"></path>
             <path d="M18 6h-5m5 3h-5"></path>
             <path d="M5 2h14a3 3 0 0 1 3 3v17H2V5a3 3 0 0 1 3-3z"></path>
           </svg>
         </span>
-        <!-- <span @click="smallEvent" v-show="right.listData.length > 0">
+        <!-- <span class="zy-svg" @click="smallEvent" v-show="right.listData.length > 0">
           <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="tvIconTitle">
             <title id="tvIconTitle">精简模式</title>
             <polygon points="20 8 20 20 4 20 4 8"></polygon>
             <polyline stroke-linejoin="round" points="8 4 12 7.917 16 4"></polyline>
           </svg>
         </span> -->
-        <span @click="shareEvent" v-show="right.listData.length > 0">
+        <span class="zy-svg" @click="shareEvent" v-show="right.listData.length > 0">
           <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="qrIconTitle">
-            <title id="qrIconTitle">分享</title>
+            <title id="qrIconTitle">{{$t('share')}}</title>
             <rect x="10" y="3" width="7" height="7" transform="rotate(90 10 3)"></rect>
             <rect width="1" height="1" transform="matrix(-1 0 0 1 7 6)"></rect>
             <rect x="10" y="14" width="7" height="7" transform="rotate(90 10 14)"></rect>
@@ -80,23 +80,23 @@
     <transition name="slideX">
       <div v-if="right.show" class="list">
         <div class="list-top">
-          <span class="list-top-title">{{ right.type === 'list' ? '播放列表' : '历史记录' }}</span>
-          <span class="list-top-close" @click="closeEvent">
+          <span class="list-top-title">{{ right.type === 'list' ? $t('play_list') : $t('histroy') }}</span>
+          <span class="list-top-close zy-svg" @click="closeEvent">
             <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="closeIconTitle">
-              <title id="closeIconTitle">关闭</title>
+              <title id="closeIconTitle">{{$t('close')}}</title>
               <path d="M6.34314575 6.34314575L17.6568542 17.6568542M6.34314575 17.6568542L17.6568542 6.34314575"></path>
             </svg>
           </span>
         </div>
-        <div class="list-body" :style="{overflowY:scroll? 'auto' : 'hidden',paddingRight: scroll ? '0': '5px' }" @mouseenter="scroll = true" @mouseleave="scroll = false">
-          <ul v-show="right.type === 'list'">
-            <li v-show="right.listData.length === 0">无数据</li>
+        <div class="list-body zy-scroll" :style="{overflowY:scroll? 'auto' : 'hidden',paddingRight: scroll ? '0': '5px' }" @mouseenter="scroll = true" @mouseleave="scroll = false">
+          <ul v-show="right.type === 'list'" class="list-item">
+            <li v-show="right.listData.length === 0">{{$t('no_data')}}</li>
             <li @click="listItemEvent(j)" :class="video.index === j ? 'active' : ''" v-for="(i, j) in right.listData" :key="j">{{i | ftName}}</li>
           </ul>
-          <ul v-show="right.type === 'history'">
-            <li v-show="right.historyData.length > 1" @click="clearAll">清空数据</li>
-            <li v-show="right.historyData.length === 0">无数据</li>
-            <li @click="historyItemEvent(m)" v-for="(m, n) in right.historyData" :key="n"><span class="title">{{m.name}}</span><span @click.stop="removeItem(m)" class="delete">删除</span></li>
+          <ul v-show="right.type === 'history'" class="list-history">
+            <li v-show="right.historyData.length > 1" @click="clearAll">{{$t('clear_data')}}</li>
+            <li v-show="right.historyData.length === 0">{{$t('no_data')}}</li>
+            <li @click="historyItemEvent(m)" :class="video.detail === m.detail ? 'active' : ''" v-for="(m, n) in right.historyData" :key="n"><span class="title">{{m.name}}</span><span @click.stop="removeItem(m)" class="detail-delete">{{$t('delete')}}</span></li>
           </ul>
         </div>
       </div>
@@ -110,7 +110,7 @@ import history from '../lib/dexie/history'
 import video from '../lib/dexie/video'
 import 'xgplayer'
 import Hls from 'xgplayer-hls.js'
-// const { ipcRenderer: ipc } = require('electron')
+const { ipcRenderer: ipc } = require('electron')
 export default {
   name: 'play',
   data () {
@@ -252,12 +252,12 @@ export default {
         }
       })
     },
-    // checkTop () {
-    //   ipc.send('checkTop')
-    //   ipc.on('isTop', (e, flag) => {
-    //     this.isTop = flag
-    //   })
-    // },
+    checkTop () {
+      ipc.send('checkTop')
+      ipc.on('isTop', (e, flag) => {
+        this.isTop = flag
+      })
+    },
     onPlayVideo () {
       this.more = true
       const h = { ...this.video }
@@ -338,8 +338,8 @@ export default {
       })
     },
     topEvent () {
-      // ipc.send('top')
-      // this.checkTop()
+      ipc.send('top')
+      this.checkTop()
     },
     detailEvent () {
       this.detail = {
@@ -386,9 +386,7 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #ffffff;
   border-radius: 5px;
-  box-shadow: 0 3px 1px -2px #8e8da233, 0 2px 2px 0 #8e8da224, 0 1px 5px 0 #8e8da21f;
   .box{
     width: 92%;
     height: 100%;
@@ -413,29 +411,6 @@ export default {
         display: flex;
         margin-right: 10px;
         cursor: pointer;
-        &:hover{
-          svg{
-            stroke: #823aa0ee;
-            stroke-width: 1.5;
-            fill: #823aa022;
-          }
-        }
-        &.active{
-          svg{
-            stroke: #823aa0;
-            stroke-width: 2;
-            fill: #823aa033;
-          }
-        }
-      }
-      svg{
-        width: 24px;
-        height: 24px;
-        stroke: #823aa099;
-        stroke-width: 1;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-        fill: none;
       }
     }
   }
@@ -445,22 +420,11 @@ export default {
     right: 0;
     width: 300px;
     height: 100%;
-    border: 1px solid #00000022;
-    background-color: #fff;
     z-index: 555;
     border-radius: 3px;
     padding: 6px;
     display: flex;
     flex-direction: column;
-    svg{
-      width: 24px;
-      height: 24px;
-      stroke: #823aa099;
-      stroke-width: 1;
-      stroke-linecap: round;
-      stroke-linejoin: round;
-      fill: none;
-    }
     .list-top{
       display: flex;
       justify-content: space-between;
@@ -477,22 +441,6 @@ export default {
     .list-body{
       flex: 1;
       overflow-y: auto;
-      &::-webkit-scrollbar{
-        width: 5px;
-        height: 1px;
-      }
-      &::-webkit-scrollbar-thumb {
-        border-radius: 10px;
-        box-shadow: inset 0 0 5px #823aa005;
-        background: #823aa055;
-        position: absolute;
-      }
-      &::-webkit-scrollbar-track {
-        box-shadow: inset 0 0 5px #823aa005;
-        border-radius: 10px;
-        background: #EDEDED;
-        position: absolute;
-      }
       ul{
         margin: 0;
         padding: 0;
@@ -505,16 +453,6 @@ export default {
           padding-left: 10px;
           font-size: 14px;
           cursor: pointer;
-          color: #808695;
-          &.active{
-            background-color: #823aa011;
-          }
-          &:hover{
-            background-color: #823aa011;
-            .delete{
-              display: inline-block;
-            }
-          }
           .title{
             display: inline-block;
             overflow: hidden;
@@ -522,16 +460,13 @@ export default {
             white-space: nowrap;
             width: 231px;
           }
-          .delete{
+          .detail-delete{
             display: none;
             position: absolute;
             right: 0;
             height: 28px;
             width: 50px;
             text-align: center;
-            &:hover{
-              background-color: #823aa022;
-            }
           }
         }
       }
diff --git a/src/components/Setting.vue b/src/components/Setting.vue
index 3d2d930..9c38a68 100644
--- a/src/components/Setting.vue
+++ b/src/components/Setting.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="setting" v-if="show.setting">
     <div class="logo"><img src="@/assets/image/logo.png"></div>
-    <div class="info"><a href="https://github.com/Hunlongyu/ZY-Player">官网</a><a href="https://github.com/Hunlongyu/ZY-Player/issues">反馈</a></div>
+    <div class="info"><a href="https://github.com/Hunlongyu/ZY-Player">{{$t('website')}}</a><a href="https://github.com/Hunlongyu/ZY-Player/issues">{{$t('issues')}}</a></div>
     <div class="change">
-      <div class="vue-select" @mouseleave="show.language = false">
+      <div class="zy-select" @mouseleave="show.language = false">
         <div class="vs-placeholder" @click="show.language = true">{{$t('language')}}</div>
         <div class="vs-options" v-show="show.language">
           <ul>
@@ -11,7 +11,7 @@
           </ul>
         </div>
       </div>
-      <div class="vue-select" @mouseleave="show.site = false">
+      <div class="zy-select" @mouseleave="show.site = false">
         <div class="vs-placeholder" @click="show.site = true">{{$t('default_site')}}</div>
         <div class="vs-options" v-show="show.site">
           <ul>
@@ -112,10 +112,8 @@ export default {
   width: 100%;
   display: flex;
   flex-direction: column;
-  background-color: #ffffff;
   border-radius: 5px;
-  box-shadow: 0 3px 1px -2px #8e8da233, 0 2px 2px 0 #8e8da224, 0 1px 5px 0 #8e8da21f;
-  .logo{
+ .logo{
     margin-top: 40px;
     width: 100%;
     text-align: center;
@@ -132,10 +130,6 @@ export default {
       text-decoration: none;
       margin: 0 10px;
       font-size: 14px;
-      color: #808695;
-      &:hover{
-        color: #4c4f57;
-      }
     }
   }
   .change{
@@ -144,7 +138,7 @@ export default {
     justify-content: flex-start;
     padding-left: 20px;
     margin-top: 40px;
-    .vue-select{
+    .zy-select{
       margin-right: 20px;
     }
   }
diff --git a/src/components/Share.vue b/src/components/Share.vue
index 270583a..6420312 100644
--- a/src/components/Share.vue
+++ b/src/components/Share.vue
@@ -19,10 +19,10 @@
 </template>
 <script>
 import { mapMutations } from 'vuex'
-// import tools from '../lib/site/tools'
+import tools from '../lib/site/tools'
 import QrcodeVue from 'qrcode.vue'
-// import html2canvas from 'html2canvas'
-// const { clipboard, nativeImage } = require('electron')
+import html2canvas from 'html2canvas'
+const { clipboard, nativeImage } = require('electron')
 export default {
   name: 'share',
   data () {
@@ -59,28 +59,28 @@ export default {
   },
   methods: {
     ...mapMutations(['SET_SHARE']),
-    // getDetail () {
-    //   this.loading = true
-    //   tools.detail_get(this.share.v.site, this.share.v.detail).then(res => {
-    //     const info = res.info
-    //     const parser = new DOMParser()
-    //     const html = parser.parseFromString(info, 'text/html')
-    //     const img = html.querySelector('img').src
-    //     this.card.img = img
-    //     this.card.name = this.share.v.name
-    //     this.loading = false
-    //     this.$nextTick(() => {
-    //       const dom = document.getElementById('share')
-    //       html2canvas(dom, { allowTaint: true, useCORS: true }).then(res => {
-    //         const png = res.toDataURL('image/png')
-    //         const p = nativeImage.createFromDataURL(png)
-    //         clipboard.writeImage(p)
-    //         this.$message.success('已复制到剪贴板中, 快去分享吧~')
-    //         this.share.show = true
-    //       })
-    //     })
-    //   })
-    // },
+    getDetail () {
+      this.loading = true
+      tools.detail_get(this.share.v.site, this.share.v.detail).then(res => {
+        const info = res.info
+        const parser = new DOMParser()
+        const html = parser.parseFromString(info, 'text/html')
+        const img = html.querySelector('img').src
+        this.card.img = img
+        this.card.name = this.share.v.name
+        this.loading = false
+        this.$nextTick(() => {
+          const dom = document.getElementById('share')
+          html2canvas(dom, { allowTaint: true, useCORS: true }).then(res => {
+            const png = res.toDataURL('image/png')
+            const p = nativeImage.createFromDataURL(png)
+            clipboard.writeImage(p)
+            this.$message.success('已复制到剪贴板中, 快去分享吧~')
+            this.share.show = true
+          })
+        })
+      })
+    },
     shareClickEvent () {
       this.share = {
         show: false,
diff --git a/src/components/Star.vue b/src/components/Star.vue
index 21c36c9..87e8e85 100644
--- a/src/components/Star.vue
+++ b/src/components/Star.vue
@@ -1,25 +1,25 @@
 <template>
   <div class="star">
-    <div class="vue-table">
+    <div class="zy-table">
       <div class="tHead">
-        <span class="name">影片名称</span>
-        <span class="type">类型</span>
-        <span class="time">时间</span>
-        <span class="from">来源</span>
-        <span class="operate" style="width: 160px">操作</span>
+        <span class="name">{{$t('videoName')}}</span>
+        <span class="type">{{$t('type')}}</span>
+        <span class="time">{{$t('time')}}</span>
+        <span class="from">{{$t('from')}}</span>
+        <span class="operate" style="width: 170px">{{$t('operate')}}</span>
       </div>
-      <div class="tBody">
+      <div class="tBody zy-scroll">
         <ul v-show="!loading">
           <li v-for="(i, j) in data" :key="j" @click="detailEvent(i)">
             <span class="name">{{i.name}}</span>
             <span class="type">{{i.type}}</span>
             <span class="time">{{i.time}}</span>
             <span class="from">{{i.site | ftSite}}</span>
-            <span class="operate" style="width: 160px">
-              <span class="btn" @click.stop="playEvent(i)">播放</span>
-              <span class="btn" @click.stop="deleteEvent(i)">删除</span>
-              <span class="btn" @click.stop="shareEvent(i)">分享</span>
-              <span class="btn" @click.stop="updateEvent(i)">同步</span>
+            <span class="operate" style="width: 170px">
+              <span class="btn" @click.stop="playEvent(i)">{{$t('play')}}</span>
+              <span class="btn" @click.stop="deleteEvent(i)">{{$t('delete')}}</span>
+              <span class="btn" @click.stop="shareEvent(i)">{{$t('share')}}</span>
+              <span class="btn" @click.stop="updateEvent(i)">{{$t('sync')}}</span>
             </span>
           </li>
         </ul>
@@ -28,7 +28,7 @@
         </div>
       </div>
       <div class="tFooter">
-        <span class="tFooter-span">共 {{data.length}} 条数据</span>
+        <span class="tFooter-span">{{data.length}} {{$t('total')}}</span>
       </div>
     </div>
   </div>
@@ -153,8 +153,6 @@ export default {
   width: 100%;
   display: flex;
   flex-direction: column;
-  background-color: #ffffff;
   border-radius: 5px;
-  box-shadow: 0 3px 1px -2px #8e8da233, 0 2px 2px 0 #8e8da224, 0 1px 5px 0 #8e8da21f;
 }
 </style>
diff --git a/src/locales/en.json b/src/locales/en.json
index 63059e5..acd19ea 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -11,5 +11,20 @@
     "type": "Type",
     "time": "Time",
     "operate": "Operate",
-    "share": "Share"
+    "share": "Share",
+    "detail": "Detail",
+    "close": "Close",
+    "download": "Download",
+    "next": "Next",
+    "play_list": "Play List",
+    "history": "History",
+    "top": "Top",
+    "no_data": "No Data",
+    "clear_data": "Clear Data",
+    "delete": "Delete",
+    "from": "From",
+    "sync": "Sync",
+    "total": "Items",
+    "website": "Official Website",
+    "issues": "Issues"
 }
diff --git a/src/locales/zh-cn.json b/src/locales/zh-cn.json
index 1b8a326..2d85a7c 100644
--- a/src/locales/zh-cn.json
+++ b/src/locales/zh-cn.json
@@ -11,5 +11,20 @@
     "type": "类型",
     "time": "时间",
     "operate": "操作",
-    "share": "分享"
+    "share": "分享",
+    "detail": "详情",
+    "close": "关闭",
+    "download": "下载",
+    "next": "下一集",
+    "play_list": "播放列表",
+    "history": "历史记录",
+    "top": "置顶",
+    "no_data": "无数据",
+    "clear_data": "清空数据",
+    "delete": "删除",
+    "from": "来源",
+    "sync": "同步",
+    "total": "条数据",
+    "website": "官网",
+    "issues": "反馈"
 }