From 8b78aafda4d04e96dc33849baa11c9d1203351cf Mon Sep 17 00:00:00 2001
From: haiyangcui <cuiocean@gmail.com>
Date: Thu, 8 Oct 2020 23:35:22 +0200
Subject: [PATCH] =?UTF-8?q?=E6=A0=BC=E5=BC=8F=E5=8C=96vue=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Aside.vue     | 117 +++++++--
 src/components/Detail.vue    | 177 +++++++++----
 src/components/EditSites.vue | 123 ++++++---
 src/components/Film.vue      | 268 ++++++++++++++-----
 src/components/Frame.vue     |  92 ++++++-
 src/components/History.vue   |  40 ++-
 src/components/IPTV.vue      |  95 +++++--
 src/components/Play.vue      | 489 +++++++++++++++++++++++++++--------
 src/components/Setting.vue   | 279 ++++++++++++++------
 src/components/Share.vue     |  77 ++++--
 src/components/Star.vue      |  64 +++--
 11 files changed, 1386 insertions(+), 435 deletions(-)

diff --git a/src/components/Aside.vue b/src/components/Aside.vue
index f39349a..bef22fc 100644
--- a/src/components/Aside.vue
+++ b/src/components/Aside.vue
@@ -1,7 +1,17 @@
 <template>
   <div class="aside">
-    <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">
+    <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">电影</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>
         <g stroke-linecap="round">
@@ -14,37 +24,98 @@
         </g>
       </svg>
     </span>
-    <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">
+    <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">播放</title>
         <path d="M20 12L5 21V3z"></path>
       </svg>
     </span>
-    <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">
+    <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">收藏</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 === 'IPTV' ? 'active ': ''] + 'zy-svg'" @click="changeView('IPTV')">
-          <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
+      :class="[view === 'IPTV' ? 'active ': ''] + 'zy-svg'"
+      @click="changeView('IPTV')"
+    >
+      <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 :class="[view === 'History' ? 'active ': ''] + 'zy-svg'" @click="changeView('History')">
-          <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>
-            <circle cx="12" cy="12" r="10"></circle>
-            <polyline points="12 5 12 12 16 16"></polyline>
-          </svg>
+    <span
+      :class="[view === 'History' ? 'active ': ''] + 'zy-svg'"
+      @click="changeView('History')"
+    >
+      <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>
+        <circle
+          cx="12"
+          cy="12"
+          r="10"
+        ></circle>
+        <polyline points="12 5 12 12 16 16"></polyline>
+      </svg>
     </span>
-    <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">
+    <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">设置</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>
-        <circle cx="12" cy="12" r="1"></circle>
+        <circle
+          cx="12"
+          cy="12"
+          r="1"
+        ></circle>
       </svg>
     </span>
   </div>
@@ -97,7 +168,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.aside{
+.aside {
   width: 60px;
   height: 100%;
   display: flex;
@@ -106,7 +177,7 @@ export default {
   flex-direction: column;
   justify-content: center;
   -webkit-app-region: drag;
-  span{
+  span {
     width: 60px;
     height: 60px;
     cursor: pointer;
diff --git a/src/components/Detail.vue b/src/components/Detail.vue
index e94cdec..5dea148 100644
--- a/src/components/Detail.vue
+++ b/src/components/Detail.vue
@@ -3,29 +3,72 @@
     <div class="detail-content">
       <div class="detail-header">
         <span class="detail-title">详情</span>
-        <span class="detail-close zy-svg" @click="close">
-          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="closeIconTitle">
+        <span
+          class="detail-close zy-svg"
+          @click="close"
+        >
+          <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>
             <path d="M6.34314575 6.34314575L17.6568542 17.6568542M6.34314575 17.6568542L17.6568542 6.34314575"></path>
           </svg>
         </span>
       </div>
-      <div class="detail-body zy-scroll" v-show="!loading">
+      <div
+        class="detail-body zy-scroll"
+        v-show="!loading"
+      >
         <div class="info">
           <div class="info-left">
-            <img :src="info.pic" alt="">
+            <img
+              :src="info.pic"
+              alt=""
+            >
           </div>
           <div class="info-right">
             <div class="name">{{info.name}}</div>
-            <div class="director" v-show="info.director">导演: {{info.director}}</div>
-            <div class="actor" v-show="info.actor">主演: {{info.actor}}</div>
-            <div class="type" v-show="info.type">类型: {{info.type}}</div>
-            <div class="area" v-show="info.area">地区: {{info.area}}</div>
-            <div class="lang" v-show="info.lang">语言: {{info.lang}}</div>
-            <div class="year" v-show="info.year">上映: {{info.year}}</div>
-            <div class="last" v-show="info.last">更新: {{info.last}}</div>
-            <div class="note" v-show="info.note">备注: {{info.note}}</div>
-            <div class="rate" v-show="info.rate">豆瓣评分: {{info.rate}}</div>
+            <div
+              class="director"
+              v-show="info.director"
+            >导演: {{info.director}}</div>
+            <div
+              class="actor"
+              v-show="info.actor"
+            >主演: {{info.actor}}</div>
+            <div
+              class="type"
+              v-show="info.type"
+            >类型: {{info.type}}</div>
+            <div
+              class="area"
+              v-show="info.area"
+            >地区: {{info.area}}</div>
+            <div
+              class="lang"
+              v-show="info.lang"
+            >语言: {{info.lang}}</div>
+            <div
+              class="year"
+              v-show="info.year"
+            >上映: {{info.year}}</div>
+            <div
+              class="last"
+              v-show="info.last"
+            >更新: {{info.last}}</div>
+            <div
+              class="note"
+              v-show="info.note"
+            >备注: {{info.note}}</div>
+            <div
+              class="rate"
+              v-show="info.rate"
+            >豆瓣评分: {{info.rate}}</div>
           </div>
         </div>
         <div class="operate">
@@ -35,23 +78,45 @@
           <span @click="shareEvent">分享</span>
           <span @click="doubanLinkEvent">豆瓣</span>
           <span @click="togglePlayOnlineEvent">
-            <input type="checkbox" v-model="playOnline"> 播放在线高清视频
+            <input
+              type="checkbox"
+              v-model="playOnline"
+            > 播放在线高清视频
           </span>
           <span>
-            <select v-model="selectedOnlineSite" class="vs-options">
-              <option disabled value="">Please select one</option>
-              <option v-for="(i, j) in onlineSites" :key="j">{{i}}</option>
+            <select
+              v-model="selectedOnlineSite"
+              class="vs-options"
+            >
+              <option
+                disabled
+                value=""
+              >Please select one</option>
+              <option
+                v-for="(i, j) in onlineSites"
+                :key="j"
+              >{{i}}</option>
             </select>
           </span>
         </div>
-        <div class="desc" v-show="info.des">{{info.des}}</div>
+        <div
+          class="desc"
+          v-show="info.des"
+        >{{info.des}}</div>
         <div class="m3u8">
           <div class="box">
-            <span v-for="(i, j) in m3u8List" :key="j" @click="playEvent(j)">{{i | ftName}}</span>
+            <span
+              v-for="(i, j) in m3u8List"
+              :key="j"
+              @click="playEvent(j)"
+            >{{i | ftName}}</span>
           </div>
         </div>
       </div>
-      <div class="detail-mask zy-loading" v-show="loading">
+      <div
+        class="detail-mask zy-loading"
+        v-show="loading"
+      >
         <div class="loader"></div>
       </div>
     </div>
@@ -326,7 +391,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.detail{
+.detail {
   position: absolute;
   left: 80px;
   right: 20px;
@@ -334,28 +399,28 @@ export default {
   width: calc(100% - 100px);
   height: calc(100% - 40px);
   z-index: 888;
-  .detail-content{
+  .detail-content {
     height: calc(100% - 10px);
     padding: 0 60px;
     position: relative;
-    .detail-header{
+    .detail-header {
       width: 100%;
       height: 40px;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      .detail-title{
+      .detail-title {
         font-size: 16px;
       }
-      .detail-close{
+      .detail-close {
         cursor: pointer;
       }
     }
   }
-  .detail-body{
+  .detail-body {
     height: calc(100% - 50px);
     overflow-y: auto;
-    .info{
+    .info {
       width: 100%;
       padding: 10px;
       display: flex;
@@ -366,47 +431,54 @@ export default {
       border-radius: 2px;
       margin-bottom: 10px;
       height: auto;
-      .info-left{
+      .info-left {
         width: 200px;
         height: 100%;
-        img{
+        img {
           width: 100%;
           height: auto;
         }
       }
-      .info-right{
+      .info-right {
         flex: 1;
         margin-left: 20px;
-        .name{
+        .name {
           font-size: 20px;
           margin-bottom: 10px;
           font-weight: bold;
         }
-        .director, .actor, .type, .area, .lang, .year, .last, .note{
+        .director,
+        .actor,
+        .type,
+        .area,
+        .lang,
+        .year,
+        .last,
+        .note {
           font-size: 14px;
           line-height: 26px;
         }
-        .rate{
+        .rate {
           font-size: 16px;
           line-height: 26px;
           font-weight: bolder;
         }
       }
     }
-    .operate{
+    .operate {
       border: 1px solid;
       padding: 10px;
       width: 100%;
       margin-bottom: 10px;
       border-radius: 2px;
-      span{
+      span {
         margin-right: 20px;
         font-size: 14px;
         cursor: pointer;
         user-select: none;
       }
     }
-    .desc{
+    .desc {
       border: 1px solid;
       padding: 10px;
       width: 100%;
@@ -415,15 +487,15 @@ export default {
       font-size: 14px;
       line-height: 20px;
     }
-    .m3u8{
+    .m3u8 {
       border: 1px solid;
       padding: 10px 0 10px 10px;
       width: 100%;
       margin-bottom: 10px;
       border-radius: 2px;
-      .box{
+      .box {
         width: 100%;
-        span{
+        span {
           display: inline-block;
           font-size: 12px;
           border: 1px solid;
@@ -435,7 +507,7 @@ export default {
       }
     }
   }
-  .detail-mask{
+  .detail-mask {
     position: absolute;
     top: 50px;
     left: 0;
@@ -457,28 +529,37 @@ export default {
     @keyframes load4 {
       0%,
       100% {
-        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em,
+          0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
       }
       12.5% {
-        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em,
+          0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
       }
       25% {
-        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0,
+          0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
       }
       37.5% {
-        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em,
+          0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
       }
       50% {
-        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em,
+          0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
       }
       62.5% {
-        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
+          0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
       }
       75% {
-        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em,
+          2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em,
+          -2em -2em 0 0;
       }
       87.5% {
-        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
+          0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
       }
     }
   }
diff --git a/src/components/EditSites.vue b/src/components/EditSites.vue
index e140fa5..67e4328 100644
--- a/src/components/EditSites.vue
+++ b/src/components/EditSites.vue
@@ -3,19 +3,41 @@
     <div class="detail-content">
       <div class="detail-header">
         <div class="zy-select">
-            <div class="vs-placeholder vs-noAfter" @click="openAddSite">添加新源</div>
+          <div
+            class="vs-placeholder vs-noAfter"
+            @click="openAddSite"
+          >添加新源</div>
         </div>
         <div class="zy-select">
-          <div class="vs-placeholder vs-noAfter" @click="exportSites">导出</div>
+          <div
+            class="vs-placeholder vs-noAfter"
+            @click="exportSites"
+          >导出</div>
         </div>
         <div class="zy-select">
-          <div class="vs-placeholder vs-noAfter" @click="importSites">导入</div>
+          <div
+            class="vs-placeholder vs-noAfter"
+            @click="importSites"
+          >导入</div>
         </div>
         <div class="zy-select">
-          <div class="vs-placeholder vs-noAfter" @click="resetSites">重置</div>
+          <div
+            class="vs-placeholder vs-noAfter"
+            @click="resetSites"
+          >重置</div>
         </div>
-        <span class="detail-close zy-svg" @click="close">
-          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="closeIconTitle">
+        <span
+          class="detail-close zy-svg"
+          @click="close"
+        >
+          <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>
             <path d="M6.34314575 6.34314575L17.6568542 17.6568542M6.34314575 17.6568542L17.6568542 6.34314575"></path>
           </svg>
@@ -24,9 +46,12 @@
       <div class="detail-body zy-scroll">
         <div class="zy-table">
           <div class="tBody zy-scroll">
-            <div class="addSites-box zy-scroll" v-show="showAddSite">
+            <div
+              class="addSites-box zy-scroll"
+              v-show="showAddSite"
+            >
               <ul>
-                <li >
+                <li>
                   <span class="name">源名称</span>
                   <span class="name">API接口</span>
                   <span class="name">DOWNLOAD接口</span>
@@ -34,32 +59,66 @@
                     <span class="btn"></span>
                     <span class="btn"></span>
                   </span>
-                 </li>
-                 <li>
-                  <span class="name" style="display:inline-block;vertical-align:middle">
-                    <input style="height: 30px" v-model="newSite.name">
+                </li>
+                <li>
+                  <span
+                    class="name"
+                    style="display:inline-block;vertical-align:middle"
+                  >
+                    <input
+                      style="height: 30px"
+                      v-model="newSite.name"
+                    >
                   </span>
-                  <span class="name" style="display:inline-block;vertical-align:middle">
-                    <input style="height: 30px" v-model="newSite.api">
+                  <span
+                    class="name"
+                    style="display:inline-block;vertical-align:middle"
+                  >
+                    <input
+                      style="height: 30px"
+                      v-model="newSite.api"
+                    >
+                  </span>
+                  <span
+                    class="name"
+                    style="display:inline-block;vertical-align:middle"
+                  >
+                    <input
+                      style="height: 30px"
+                      v-model="newSite.download"
+                      placeholder="可以为空"
+                    >
                   </span>
-                   <span class="name" style="display:inline-block;vertical-align:middle">
-                     <input style="height: 30px" v-model="newSite.download" placeholder="可以为空">
-                   </span>
                   <span class="operate">
-                    <span class="btn" @click="addNewSite">添加</span>
-                    <span class="btn" @click="closeAddSite">关闭</span>
+                    <span
+                      class="btn"
+                      @click="addNewSite"
+                    >添加</span>
+                    <span
+                      class="btn"
+                      @click="closeAddSite"
+                    >关闭</span>
                   </span>
-                 </li>
-                 <li ></li>
-               </ul>
-             </div>
+                </li>
+                <li></li>
+              </ul>
+            </div>
             <ul>
-              <draggable v-model="sites" @change="listUpdatedEvent">
+              <draggable
+                v-model="sites"
+                @change="listUpdatedEvent"
+              >
                 <transition-group>
-                  <li v-for="(i, j) in sites" :key="j">
+                  <li
+                    v-for="(i, j) in sites"
+                    :key="j"
+                  >
                     <span class="name">{{i.name}}</span>
                     <span class="operate">
-                      <span class="btn" @click.stop="removeEvent(i)">删除</span>
+                      <span
+                        class="btn"
+                        @click.stop="removeEvent(i)"
+                      >删除</span>
                     </span>
                   </li>
                 </transition-group>
@@ -234,7 +293,7 @@ export default {
 
 </script>
 <style lang="scss" scoped>
-.detail{
+.detail {
   position: absolute;
   left: 80px;
   right: 20px;
@@ -242,25 +301,25 @@ export default {
   width: calc(100% - 100px);
   height: calc(100% - 40px);
   z-index: 888;
-  .detail-content{
+  .detail-content {
     height: calc(100% - 10px);
     padding: 0 60px;
     position: relative;
-    .detail-header{
+    .detail-header {
       width: 100%;
       height: 40px;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      .detail-title{
+      .detail-title {
         font-size: 16px;
       }
-      .detail-close{
+      .detail-close {
         cursor: pointer;
       }
     }
   }
-  .detail-body{
+  .detail-body {
     height: calc(100% - 50px);
     overflow-y: auto;
   }
diff --git a/src/components/Film.vue b/src/components/Film.vue
index 05f3fe9..660f3ed 100644
--- a/src/components/Film.vue
+++ b/src/components/Film.vue
@@ -1,52 +1,149 @@
 <template>
   <div class="film">
     <div class="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">
-          <ul class="zy-scroll" style="max-height: 600px;">
-            <li :class="site.key === i.key ? 'active' : ''" v-for="i in sites" :key="i.key" @click="siteClick(i)">{{ i.name }}</li>
+      <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"
+        >
+          <ul
+            class="zy-scroll"
+            style="max-height: 600px;"
+          >
+            <li
+              :class="site.key === i.key ? 'active' : ''"
+              v-for="i in sites"
+              :key="i.key"
+              @click="siteClick(i)"
+            >{{ i.name }}</li>
           </ul>
         </div>
       </div>
-      <div class="zy-select" @mouseleave="show.classList = false" v-show="show.class">
-        <div class="vs-placeholder" @click="show.classList = true">{{type.name}}</div>
-        <div class="vs-options" v-show="show.classList">
-          <ul class="zy-scroll" style="max-height: 600px;">
-            <li :class="type.tid === i.tid ? 'active' : ''" v-for="i in classList" :key="i.tid" @click="classClick(i)">{{ i.name }}</li>
+      <div
+        class="zy-select"
+        @mouseleave="show.classList = false"
+        v-show="show.class"
+      >
+        <div
+          class="vs-placeholder"
+          @click="show.classList = true"
+        >{{type.name}}</div>
+        <div
+          class="vs-options"
+          v-show="show.classList"
+        >
+          <ul
+            class="zy-scroll"
+            style="max-height: 600px;"
+          >
+            <li
+              :class="type.tid === i.tid ? 'active' : ''"
+              v-for="i in classList"
+              :key="i.tid"
+              @click="classClick(i)"
+            >{{ i.name }}</li>
           </ul>
         </div>
       </div>
-      <div class="zy-select" @mouseleave="show.search = false">
-        <div class="vs-input" @click="show.search = true"><input v-model.trim="searchTxt" type="text" placeholder="搜索" @keyup.enter="searchEvent(searchTxt)"></div>
-        <div class="vs-options" v-show="show.search">
-          <ul class="zy-scroll" style="max-height: 600px">
-            <li v-for="(i, j) in searchList" :key="j" @click="searchEvent(i.keywords)">{{i.keywords}}</li>
-            <li v-show="searchList.length >= 1" @click="clearSearch">清空历史记录</li>
+      <div
+        class="zy-select"
+        @mouseleave="show.search = false"
+      >
+        <div
+          class="vs-input"
+          @click="show.search = true"
+        ><input
+            v-model.trim="searchTxt"
+            type="text"
+            placeholder="搜索"
+            @keyup.enter="searchEvent(searchTxt)"
+          ></div>
+        <div
+          class="vs-options"
+          v-show="show.search"
+        >
+          <ul
+            class="zy-scroll"
+            style="max-height: 600px"
+          >
+            <li
+              v-for="(i, j) in searchList"
+              :key="j"
+              @click="searchEvent(i.keywords)"
+            >{{i.keywords}}</li>
+            <li
+              v-show="searchList.length >= 1"
+              @click="clearSearch"
+            >清空历史记录</li>
           </ul>
         </div>
       </div>
     </div>
-    <div class="body zy-scroll" infinite-wrapper>
-      <div class="body-box" v-show="!show.find">
-        <div class="show-img" v-if="setting.view === 'picture'">
-          <Waterfall ref="waterfall" :list="list" :gutter="20" :width="240"
-          :breakpoints="{ 1200: { rowPerView: 4 } }"
-          animationEffect="fadeInUp"
-          backgroundColor="rgba(0, 0, 0, 0)">
-            <template slot="item" slot-scope="props">
-              <div class="card" v-show="!setting.excludeR18Films || !containsR18Keywords(props.data.type)">
+    <div
+      class="body zy-scroll"
+      infinite-wrapper
+    >
+      <div
+        class="body-box"
+        v-show="!show.find"
+      >
+        <div
+          class="show-img"
+          v-if="setting.view === 'picture'"
+        >
+          <Waterfall
+            ref="waterfall"
+            :list="list"
+            :gutter="20"
+            :width="240"
+            :breakpoints="{ 1200: { rowPerView: 4 } }"
+            animationEffect="fadeInUp"
+            backgroundColor="rgba(0, 0, 0, 0)"
+          >
+            <template
+              slot="item"
+              slot-scope="props"
+            >
+              <div
+                class="card"
+                v-show="!setting.excludeR18Films || !containsR18Keywords(props.data.type)"
+              >
                 <div class="img">
-                  <img style="width: 100%" :src="props.data.pic" alt="" @load="$refs.waterfall.refresh()" @click="detailEvent(site, props.data)">
+                  <img
+                    style="width: 100%"
+                    :src="props.data.pic"
+                    alt=""
+                    @load="$refs.waterfall.refresh()"
+                    @click="detailEvent(site, props.data)"
+                  >
                   <div class="operate">
                     <div class="operate-wrap">
-                      <span class="o-play" @click="playEvent(site, props.data)">播放</span>
-                      <span class="o-star" @click="starEvent(site, props.data)">收藏</span>
-                      <span class="o-share" @click="shareEvent(site, props.data)">分享</span>
+                      <span
+                        class="o-play"
+                        @click="playEvent(site, props.data)"
+                      >播放</span>
+                      <span
+                        class="o-star"
+                        @click="starEvent(site, props.data)"
+                      >收藏</span>
+                      <span
+                        class="o-share"
+                        @click="shareEvent(site, props.data)"
+                      >分享</span>
                     </div>
                   </div>
                 </div>
-                <div class="name" @click="detailEvent(site, props.data)">{{props.data.name}}</div>
+                <div
+                  class="name"
+                  @click="detailEvent(site, props.data)"
+                >{{props.data.name}}</div>
                 <div class="info">
                   <span>{{props.data.year}}</span>
                   <span>{{props.data.note}}</span>
@@ -55,47 +152,94 @@
               </div>
             </template>
           </Waterfall>
-          <infinite-loading force-use-infinite-wrapper :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading>
+          <infinite-loading
+            force-use-infinite-wrapper
+            :identifier="infiniteId"
+            @infinite="infiniteHandler"
+          ></infinite-loading>
         </div>
-        <div class="show-table" v-if="setting.view === 'table'">
+        <div
+          class="show-table"
+          v-if="setting.view === 'table'"
+        >
           <div class="zy-table">
             <div class="tBody">
               <ul>
-                <li v-for="(i, j) in list" :key="j" @click="detailEvent(site, i)" v-show="!setting.excludeR18Films || !containsR18Keywords(i.type)">
+                <li
+                  v-for="(i, j) in list"
+                  :key="j"
+                  @click="detailEvent(site, i)"
+                  v-show="!setting.excludeR18Films || !containsR18Keywords(i.type)"
+                >
                   <span class="name">{{i.name}}</span>
                   <span class="type">{{i.type}}</span>
                   <span class="time">{{i.year}}</span>
                   <span class="time">{{i.note}}</span>
                   <span class="last">{{i.last}}</span>
                   <span class="operate">
-                    <span class="btn" @click.stop="playEvent(site, i)">播放</span>
-                    <span class="btn" @click.stop="starEvent(site, i)">收藏</span>
-                    <span class="btn" @click.stop="shareEvent(site, i)">分享</span>
-                    <span class="btn" @click.stop="downloadEvent(site, i)">下载</span>
+                    <span
+                      class="btn"
+                      @click.stop="playEvent(site, i)"
+                    >播放</span>
+                    <span
+                      class="btn"
+                      @click.stop="starEvent(site, i)"
+                    >收藏</span>
+                    <span
+                      class="btn"
+                      @click.stop="shareEvent(site, i)"
+                    >分享</span>
+                    <span
+                      class="btn"
+                      @click.stop="downloadEvent(site, i)"
+                    >下载</span>
                   </span>
                 </li>
               </ul>
-              <infinite-loading force-use-infinite-wrapper="tBody" :identifier="infiniteId" @infinite="infiniteHandler"></infinite-loading>
+              <infinite-loading
+                force-use-infinite-wrapper="tBody"
+                :identifier="infiniteId"
+                @infinite="infiniteHandler"
+              ></infinite-loading>
             </div>
           </div>
         </div>
       </div>
-      <div class="body-box" v-show="show.find">
+      <div
+        class="body-box"
+        v-show="show.find"
+      >
         <div class="show-table">
           <div class="zy-table">
             <div class="tBody zy-scroll">
               <ul>
-                <li v-for="(i, j) in searchContents" :key="j" @click="detailEvent(i.site, i)">
+                <li
+                  v-for="(i, j) in searchContents"
+                  :key="j"
+                  @click="detailEvent(i.site, i)"
+                >
                   <span class="name">{{i.name}}</span>
                   <span class="type">{{i.type}}</span>
                   <span class="last">{{i.last}}</span>
                   <span class="site">{{i.site.name}}</span>
                   <span class="note">{{i.note}}</span>
                   <span class="operate">
-                    <span class="btn" @click.stop="playEvent(i.site, i)">播放</span>
-                    <span class="btn" @click.stop="starEvent(i.site, i)">收藏</span>
-                    <span class="btn" @click.stop="shareEvent(i.site, i)">分享</span>
-                    <span class="btn" @click.stop="downloadEvent(i.site, i)">下载</span>
+                    <span
+                      class="btn"
+                      @click.stop="playEvent(i.site, i)"
+                    >播放</span>
+                    <span
+                      class="btn"
+                      @click.stop="starEvent(i.site, i)"
+                    >收藏</span>
+                    <span
+                      class="btn"
+                      @click.stop="shareEvent(i.site, i)"
+                    >分享</span>
+                    <span
+                      class="btn"
+                      @click.stop="downloadEvent(i.site, i)"
+                    >下载</span>
                   </span>
                 </li>
               </ul>
@@ -484,12 +628,12 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.film{
+.film {
   height: calc(100% - 40px);
   width: 100%;
   display: flex;
   flex-direction: column;
-  .header{
+  .header {
     height: 30px;
     width: 100%;
     display: flex;
@@ -497,13 +641,13 @@ export default {
     justify-content: space-between;
     z-index: 10;
   }
-  .body{
+  .body {
     margin-top: 20px;
     flex: 1;
     width: 100%;
     border-radius: 0 0 5px 5px;
     overflow-y: scroll;
-    &::-webkit-scrollbar{
+    &::-webkit-scrollbar {
       width: 5px;
       height: 1px;
     }
@@ -515,26 +659,26 @@ export default {
       border-radius: 10px;
       position: absolute;
     }
-    .body-box{
+    .body-box {
       height: 100%;
       width: 100%;
     }
-    .show-img{
+    .show-img {
       height: 100%;
       width: 100%;
       padding: 10px;
-      .card{
+      .card {
         border-radius: 6px;
         overflow: hidden;
-        .img{
+        .img {
           position: relative;
           min-height: 40px;
-          img{
+          img {
             width: 100%;
             height: auto;
             cursor: pointer;
           }
-          .operate{
+          .operate {
             display: none;
             position: absolute;
             left: 0;
@@ -542,10 +686,12 @@ export default {
             background-color: #111111aa;
             width: 100%;
             font-size: 13px;
-            .operate-wrap{
+            .operate-wrap {
               display: flex;
               justify-content: space-between;
-              .o-play, .o-star, .o-share{
+              .o-play,
+              .o-star,
+              .o-share {
                 cursor: pointer;
                 display: inline-block;
                 width: 80px;
@@ -553,14 +699,14 @@ export default {
                 text-align: center;
                 line-height: 36px;
                 color: #cdcdcd;
-                &:hover{
+                &:hover {
                   background-color: #111;
                 }
               }
             }
           }
         }
-        .name{
+        .name {
           font-size: 16px;
           padding: 10px;
           overflow: hidden;
@@ -568,14 +714,14 @@ export default {
           white-space: nowrap;
           cursor: pointer;
         }
-        .info{
+        .info {
           display: flex;
           justify-content: space-between;
           font-size: 12px;
           padding: 10px;
         }
-        &:hover{
-          .operate{
+        &:hover {
+          .operate {
             display: block;
           }
         }
diff --git a/src/components/Frame.vue b/src/components/Frame.vue
index 7e81e9b..8925da7 100644
--- a/src/components/Frame.vue
+++ b/src/components/Frame.vue
@@ -1,16 +1,88 @@
 <template>
   <div class="frame">
-    <span class="top" @click="frameClickEvent('top')" title="置顶">
-      <svg t="1595919317571" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1188" style="width:10px;height:14px"><path d="M43.072 974.72l380.864-301.952 151.936 161.6c0 0 63.424 17.28 67.328-30.72l-3.904-163.584 225.088-259.648 98.048-5.696c0 0 76.928-15.488 21.184-82.752l-275.072-276.928c0 0-74.944-9.6-69.248 59.584l0 75.008L383.552 367.104 225.856 376.64c0 0-57.728 19.2-36.608 69.248l148.16 146.176L43.072 974.72 43.072 974.72z" p-id="1189" :fill="isAlwaysOnTop ? '#555555' : '#ffffff'"></path></svg>
+    <span
+      class="top"
+      @click="frameClickEvent('top')"
+      title="置顶"
+    >
+      <svg
+        t="1595919317571"
+        class="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="1188"
+        style="width:10px;height:14px"
+      >
+        <path
+          d="M43.072 974.72l380.864-301.952 151.936 161.6c0 0 63.424 17.28 67.328-30.72l-3.904-163.584 225.088-259.648 98.048-5.696c0 0 76.928-15.488 21.184-82.752l-275.072-276.928c0 0-74.944-9.6-69.248 59.584l0 75.008L383.552 367.104 225.856 376.64c0 0-57.728 19.2-36.608 69.248l148.16 146.176L43.072 974.72 43.072 974.72z"
+          p-id="1189"
+          :fill="isAlwaysOnTop ? '#555555' : '#ffffff'"
+        ></path>
+      </svg>
     </span>
-    <span class="min" @click="frameClickEvent('min')" title="最小化">
-      <svg t="1595917239849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1155" style="width:8px;height:14px"><path d="M0 479.936C0 444.64 28.448 416 64.064 416L959.936 416C995.328 416 1024 444.736 1024 479.936L1024 544.064C1024 579.392 995.552 608 959.936 608L64.064 608C28.672 608 0 579.264 0 544.064L0 479.936Z" p-id="1156" fill="#ffffff"></path></svg>
+    <span
+      class="min"
+      @click="frameClickEvent('min')"
+      title="最小化"
+    >
+      <svg
+        t="1595917239849"
+        class="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="1155"
+        style="width:8px;height:14px"
+      >
+        <path
+          d="M0 479.936C0 444.64 28.448 416 64.064 416L959.936 416C995.328 416 1024 444.736 1024 479.936L1024 544.064C1024 579.392 995.552 608 959.936 608L64.064 608C28.672 608 0 579.264 0 544.064L0 479.936Z"
+          p-id="1156"
+          fill="#ffffff"
+        ></path>
+      </svg>
     </span>
-    <span class="max" @click="frameClickEvent('max')" title="最大化">
-      <svg t="1595917343956" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1540" style="width:8px;height:14px"><path d="M416 416 64.064 416C28.448 416 0 444.64 0 479.936L0 544.064C0 579.264 28.672 608 64.064 608L416 608 416 959.936C416 995.552 444.64 1024 479.936 1024L544.064 1024C579.264 1024 608 995.328 608 959.936L608 608 959.936 608C995.552 608 1024 579.36 1024 544.064L1024 479.936C1024 444.736 995.328 416 959.936 416L608 416 608 64.064C608 28.448 579.36 0 544.064 0L479.936 0C444.736 0 416 28.672 416 64.064L416 416Z" p-id="1541" fill="#ffffff"></path></svg>
+    <span
+      class="max"
+      @click="frameClickEvent('max')"
+      title="最大化"
+    >
+      <svg
+        t="1595917343956"
+        class="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="1540"
+        style="width:8px;height:14px"
+      >
+        <path
+          d="M416 416 64.064 416C28.448 416 0 444.64 0 479.936L0 544.064C0 579.264 28.672 608 64.064 608L416 608 416 959.936C416 995.552 444.64 1024 479.936 1024L544.064 1024C579.264 1024 608 995.328 608 959.936L608 608 959.936 608C995.552 608 1024 579.36 1024 544.064L1024 479.936C1024 444.736 995.328 416 959.936 416L608 416 608 64.064C608 28.448 579.36 0 544.064 0L479.936 0C444.736 0 416 28.672 416 64.064L416 416Z"
+          p-id="1541"
+          fill="#ffffff"
+        ></path>
+      </svg>
     </span>
-    <span class="close" @click="frameClickEvent('close')" title="关闭">
-      <svg t="1595917372551" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1685" style="width:8px;height:14px"><path d="M511.968 376.224 796.096 92.096C833.536 54.624 894.4 54.624 931.84 92.096 969.312 129.568 969.312 190.4 931.84 227.872L647.744 512 931.84 796.096C969.312 833.568 969.312 894.4 931.84 931.872 894.4 969.344 833.536 969.344 796.096 931.872L511.968 647.744 227.84 931.872C190.4 969.344 129.536 969.344 92.096 931.872 54.624 894.4 54.624 833.568 92.096 796.096L376.224 512 92.096 227.872C54.624 190.4 54.624 129.568 92.096 92.096 129.536 54.624 190.4 54.624 227.84 92.096L511.968 376.224Z" p-id="1686" fill="#ffffff"></path></svg>
+    <span
+      class="close"
+      @click="frameClickEvent('close')"
+      title="关闭"
+    >
+      <svg
+        t="1595917372551"
+        class="icon"
+        viewBox="0 0 1024 1024"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+        p-id="1685"
+        style="width:8px;height:14px"
+      >
+        <path
+          d="M511.968 376.224 796.096 92.096C833.536 54.624 894.4 54.624 931.84 92.096 969.312 129.568 969.312 190.4 931.84 227.872L647.744 512 931.84 796.096C969.312 833.568 969.312 894.4 931.84 931.872 894.4 969.344 833.536 969.344 796.096 931.872L511.968 647.744 227.84 931.872C190.4 969.344 129.536 969.344 92.096 931.872 54.624 894.4 54.624 833.568 92.096 796.096L376.224 512 92.096 227.872C54.624 190.4 54.624 129.568 92.096 92.096 129.536 54.624 190.4 54.624 227.84 92.096L511.968 376.224Z"
+          p-id="1686"
+          fill="#ffffff"
+        ></path>
+      </svg>
     </span>
   </div>
 </template>
@@ -45,7 +117,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.frame{
+.frame {
   width: 100%;
   height: 40px;
   display: flex;
@@ -53,7 +125,7 @@ export default {
   align-items: center;
   justify-content: flex-end;
   -webkit-app-region: drag;
-  span{
+  span {
     width: 14px;
     height: 14px;
     cursor: pointer;
diff --git a/src/components/History.vue b/src/components/History.vue
index 275e366..83d2879 100644
--- a/src/components/History.vue
+++ b/src/components/History.vue
@@ -4,7 +4,10 @@
       <div class="zy-table">
         <div class="tHeader">
           <span class="btn"></span>
-          <span class="btn" @click="clearAllHistory">清空</span>
+          <span
+            class="btn"
+            @click="clearAllHistory"
+          >清空</span>
         </div>
         <div class="tBody zy-scroll">
           <ul>
@@ -20,15 +23,34 @@
                 <span class="btn"></span>
               </span>
             </li>
-            <li v-for="(i, j) in history" :key="j" @click="historyItemEvent(i)">
-              <span class="name" @click.stop="detailEvent(i)">{{i.name}}</span>
+            <li
+              v-for="(i, j) in history"
+              :key="j"
+              @click="historyItemEvent(i)"
+            >
+              <span
+                class="name"
+                @click.stop="detailEvent(i)"
+              >{{i.name}}</span>
               <span class="site">{{getSiteName(i.site)}}</span>
               <span class="note">第{{i.index+1}}集</span>
               <span class="operate">
-                <span class="btn" @click.stop="playEvent(i)">播放</span>
-                <span class="btn" @click.stop="shareEvent(i)">分享</span>
-                <span class="btn" @click.stop="downloadEvent(i)">下载</span>
-                <span class="btn" @click.stop="removeHistoryItem(i)">删除</span>
+                <span
+                  class="btn"
+                  @click.stop="playEvent(i)"
+                >播放</span>
+                <span
+                  class="btn"
+                  @click.stop="shareEvent(i)"
+                >分享</span>
+                <span
+                  class="btn"
+                  @click.stop="downloadEvent(i)"
+                >下载</span>
+                <span
+                  class="btn"
+                  @click.stop="removeHistoryItem(i)"
+                >删除</span>
               </span>
             </li>
           </ul>
@@ -209,7 +231,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.history{
+.history {
   position: relative;
   height: calc(100% - 40px);
   width: 100%;
@@ -217,7 +239,7 @@ export default {
   justify-content: center;
   align-items: center;
   border-radius: 5px;
-  .body{
+  .body {
     width: 100%;
     height: 100%;
   }
diff --git a/src/components/IPTV.vue b/src/components/IPTV.vue
index 4a60036..06cb801 100644
--- a/src/components/IPTV.vue
+++ b/src/components/IPTV.vue
@@ -3,30 +3,69 @@
     <div class="detail-content">
       <div class="detail-header">
         <div class="zy-select">
-          <div class="vs-placeholder vs-noAfter" @click="exportSites">导出</div>
+          <div
+            class="vs-placeholder vs-noAfter"
+            @click="exportSites"
+          >导出</div>
         </div>
         <div class="zy-select">
-          <div class="vs-placeholder vs-noAfter" @click="importSites">导入</div>
+          <div
+            class="vs-placeholder vs-noAfter"
+            @click="importSites"
+          >导入</div>
         </div>
         <div class="zy-select">
-          <div class="vs-placeholder vs-noAfter" @click="removeAllSites">清空</div>
+          <div
+            class="vs-placeholder vs-noAfter"
+            @click="removeAllSites"
+          >清空</div>
         </div>
         <div class="zy-select">
-          <div class="vs-placeholder vs-noAfter" @click="resetSites">重置</div>
+          <div
+            class="vs-placeholder vs-noAfter"
+            @click="resetSites"
+          >重置</div>
         </div>
         <div class="zy-select">
         </div>
       </div>
       <div class="detail-header">
         <div>
-          <div class="vs-placeholder vs-noAfter" @click="exportSites">总频道数:{{iptvList.length}}</div>
+          <div
+            class="vs-placeholder vs-noAfter"
+            @click="exportSites"
+          >总频道数:{{iptvList.length}}</div>
         </div>
-        <div class="zy-select" @mouseleave="show.search = false">
-          <div class="vs-input" @click="show.search = true"><input v-model.trim="searchTxt" type="text" placeholder="搜索" @keyup.enter="searchEvent(searchTxt)"></div>
-          <div class="vs-options" v-show="show.search">
-            <ul class="zy-scroll" style="max-height: 600px">
-              <li v-for="(i, j) in searchList" :key="j" @click="searchEvent(i.keywords)">{{i.keywords}}</li>
-              <li v-show="searchList.length >= 1" @click="clearSearch">清空历史记录</li>
+        <div
+          class="zy-select"
+          @mouseleave="show.search = false"
+        >
+          <div
+            class="vs-input"
+            @click="show.search = true"
+          ><input
+              v-model.trim="searchTxt"
+              type="text"
+              placeholder="搜索"
+              @keyup.enter="searchEvent(searchTxt)"
+            ></div>
+          <div
+            class="vs-options"
+            v-show="show.search"
+          >
+            <ul
+              class="zy-scroll"
+              style="max-height: 600px"
+            >
+              <li
+                v-for="(i, j) in searchList"
+                :key="j"
+                @click="searchEvent(i.keywords)"
+              >{{i.keywords}}</li>
+              <li
+                v-show="searchList.length >= 1"
+                @click="clearSearch"
+              >清空历史记录</li>
             </ul>
           </div>
         </div>
@@ -35,13 +74,27 @@
         <div class="zy-table">
           <div class="tBody zy-scroll">
             <ul>
-              <draggable v-model="iptvList" @change="listUpdatedEvent">
+              <draggable
+                v-model="iptvList"
+                @change="listUpdatedEvent"
+              >
                 <transition-group>
-                  <li v-for="(i, j) in iptvList" :key="j" @click.stop="playEvent(i)" v-show="containsearchTxt(i)">
+                  <li
+                    v-for="(i, j) in iptvList"
+                    :key="j"
+                    @click.stop="playEvent(i)"
+                    v-show="containsearchTxt(i)"
+                  >
                     <span class="name">{{i.name}}</span>
                     <span class="operate">
-                      <span class="btn" @click.stop="playEvent(i)">播放</span>
-                      <span class="btn" @click.stop="removeEvent(i)">删除</span>
+                      <span
+                        class="btn"
+                        @click.stop="playEvent(i)"
+                      >播放</span>
+                      <span
+                        class="btn"
+                        @click.stop="removeEvent(i)"
+                      >删除</span>
                     </span>
                   </li>
                 </transition-group>
@@ -242,7 +295,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.detail{
+.detail {
   position: absolute;
   left: 80px;
   right: 20px;
@@ -250,25 +303,25 @@ export default {
   width: calc(100% - 100px);
   height: calc(100% - 40px);
   z-index: 888;
-  .detail-content{
+  .detail-content {
     height: calc(100% - 10px);
     padding: 0 60px;
     position: relative;
-    .detail-header{
+    .detail-header {
       width: 100%;
       height: 40px;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      .detail-title{
+      .detail-title {
         font-size: 16px;
       }
-      .detail-close{
+      .detail-close {
         cursor: pointer;
       }
     }
   }
-  .detail-body{
+  .detail-body {
     height: calc(100% - 50px);
     overflow-y: auto;
   }
diff --git a/src/components/Play.vue b/src/components/Play.vue
index 138fd96..2594ed5 100644
--- a/src/components/Play.vue
+++ b/src/components/Play.vue
@@ -3,15 +3,46 @@
     <div class="box">
       <div class="title">
         <span v-if="this.right.list.length > 1">『第 {{(video.info.index + 1)}} 集』</span>{{name}}
-        <span v-if="video.key" class="right" @click="playWithExternalPalyerEvent" title="使用第三方播放器">
-          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <span
+          v-if="video.key"
+          class="right"
+          @click="playWithExternalPalyerEvent"
+          title="使用第三方播放器"
+        >
+          <svg
+            role="img"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
             <polygon points="20 8 20 20 4 20 4 8"></polygon>
-            <polyline stroke-linejoin="round" points="8 4 12 7.917 16 4"></polyline>
+            <polyline
+              stroke-linejoin="round"
+              points="8 4 12 7.917 16 4"
+            ></polyline>
           </svg>
         </span>
-        <span v-if="video.key" class="right" @click="issueEvent" title="复制调试信息">
-          <svg t="1596338860607" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3127" width="24" height="24">
-            <path d="M503.803829 63.578014c-247.050676 0-447.328072 200.277396-447.328072 447.327048 0 247.054769 200.277396 447.333188 447.328072 447.333188 247.054769 0 447.332165-200.278419 447.332165-447.333188C951.13497 263.85541 750.858598 63.578014 503.803829 63.578014L503.803829 63.578014zM503.803829 894.313336c-211.749682 0-383.408273-171.659615-383.408273-383.408273 0-211.749682 171.659615-383.40725 383.408273-383.40725 211.753775 0 383.412366 171.658591 383.412366 383.40725C887.216195 722.653721 715.557604 894.313336 503.803829 894.313336L503.803829 894.313336zM447.745069 255.897158l127.914298 0L575.659367 383.576095 447.745069 383.576095 447.745069 255.897158 447.745069 255.897158zM447.745069 425.470251l127.914298 0 0 342.058516L447.745069 767.528767 447.745069 425.470251 447.745069 425.470251zM447.745069 425.470251" p-id="3128"></path>
+        <span
+          v-if="video.key"
+          class="right"
+          @click="issueEvent"
+          title="复制调试信息"
+        >
+          <svg
+            t="1596338860607"
+            class="icon"
+            viewBox="0 0 1024 1024"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+            p-id="3127"
+            width="24"
+            height="24"
+          >
+            <path
+              d="M503.803829 63.578014c-247.050676 0-447.328072 200.277396-447.328072 447.327048 0 247.054769 200.277396 447.333188 447.328072 447.333188 247.054769 0 447.332165-200.278419 447.332165-447.333188C951.13497 263.85541 750.858598 63.578014 503.803829 63.578014L503.803829 63.578014zM503.803829 894.313336c-211.749682 0-383.408273-171.659615-383.408273-383.408273 0-211.749682 171.659615-383.40725 383.408273-383.40725 211.753775 0 383.412366 171.658591 383.412366 383.40725C887.216195 722.653721 715.557604 894.313336 503.803829 894.313336L503.803829 894.313336zM447.745069 255.897158l127.914298 0L575.659367 383.576095 447.745069 383.576095 447.745069 255.897158 447.745069 255.897158zM447.745069 425.470251l127.914298 0 0 342.058516L447.745069 767.528767 447.745069 425.470251 447.745069 425.470251zM447.745069 425.470251"
+              p-id="3128"
+            ></path>
           </svg>
         </span>
       </div>
@@ -19,92 +50,314 @@
         <div id="xgplayer"></div>
       </div>
       <div class="more">
-        <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">
+        <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>
             <path d="M10 14.74L3 19V5l7 4.26V5l12 7-12 7v-4.26z"></path>
           </svg>
         </span>
-        <span class="zy-svg" @click="listEvent" :class="right.type === 'list' ? 'active' : ''" v-show="right.list.length > 0">
-          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="dashboardIconTitle">
+        <span
+          class="zy-svg"
+          @click="listEvent"
+          :class="right.type === 'list' ? 'active' : ''"
+          v-show="right.list.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>
-            <rect width="20" height="20" x="2" y="2"></rect>
+            <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>
-            <line x1="7" y1="12" x2="7" y2="12"></line>
-            <line x1="7" y1="17" x2="7" y2="17"></line>
+            <line
+              x1="7"
+              y1="7"
+              x2="7"
+              y2="7"
+            ></line>
+            <line
+              x1="7"
+              y1="12"
+              x2="7"
+              y2="12"
+            ></line>
+            <line
+              x1="7"
+              y1="17"
+              x2="7"
+              y2="17"
+            ></line>
           </svg>
         </span>
-        <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">
+        <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>
-            <circle cx="12" cy="12" r="10"></circle>
+            <circle
+              cx="12"
+              cy="12"
+              r="10"
+            ></circle>
             <polyline points="12 5 12 12 16 16"></polyline>
           </svg>
         </span>
-        <span class="zy-svg" @click="starEvent" :class="isStar ? 'active' : ''" v-show="right.list.length > 0">
-          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="favouriteIconTitle">
+        <span
+          class="zy-svg"
+          @click="starEvent"
+          :class="isStar ? 'active' : ''"
+          v-show="right.list.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>
             <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="zy-svg" @click="detailEvent" v-show="right.list.length > 0">
-          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="feedIconTitle">
+        <span
+          class="zy-svg"
+          @click="detailEvent"
+          v-show="right.list.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>
-            <circle cx="7.5" cy="7.5" r="2.5"></circle>
+            <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 class="zy-svg" @click="miniEvent" v-show="right.list.length > 0">
-          <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="tvIconTitle">
+        <span
+          class="zy-svg"
+          @click="miniEvent"
+          v-show="right.list.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>
+            <polyline
+              stroke-linejoin="round"
+              points="8 4 12 7.917 16 4"
+            ></polyline>
           </svg>
         </span>
-        <span class="zy-svg" @click="shareEvent" v-show="right.list.length > 0">
-          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-labelledby="qrIconTitle">
+        <span
+          class="zy-svg"
+          @click="shareEvent"
+          v-show="right.list.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>
-            <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>
-            <rect x="6" y="17" width="1" height="1"></rect>
-            <rect x="14" y="20" width="1" height="1"></rect>
-            <rect x="17" y="17" width="1" height="1"></rect>
-            <rect x="14" y="14" width="1" height="1"></rect>
-            <rect x="20" y="17" width="1" height="1"></rect>
-            <rect x="20" y="14" width="1" height="1"></rect>
-            <rect x="20" y="20" width="1" height="1"></rect>
-            <rect x="21" y="3" width="7" height="7" transform="rotate(90 21 3)"></rect>
-            <rect x="17" y="6" width="1" height="1"></rect>
+            <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>
+            <rect
+              x="6"
+              y="17"
+              width="1"
+              height="1"
+            ></rect>
+            <rect
+              x="14"
+              y="20"
+              width="1"
+              height="1"
+            ></rect>
+            <rect
+              x="17"
+              y="17"
+              width="1"
+              height="1"
+            ></rect>
+            <rect
+              x="14"
+              y="14"
+              width="1"
+              height="1"
+            ></rect>
+            <rect
+              x="20"
+              y="17"
+              width="1"
+              height="1"
+            ></rect>
+            <rect
+              x="20"
+              y="14"
+              width="1"
+              height="1"
+            ></rect>
+            <rect
+              x="20"
+              y="20"
+              width="1"
+              height="1"
+            ></rect>
+            <rect
+              x="21"
+              y="3"
+              width="7"
+              height="7"
+              transform="rotate(90 21 3)"
+            ></rect>
+            <rect
+              x="17"
+              y="6"
+              width="1"
+              height="1"
+            ></rect>
           </svg>
         </span>
-        <span class="last-tip" v-if="!video.key && right.history.length > 0" @click="historyItemEvent(right.history[0])">上次播放到【{{right.history[0].site}}】{{right.history[0].name}} 第{{right.history[0].index+1}}集</span>
+        <span
+          class="last-tip"
+          v-if="!video.key && right.history.length > 0"
+          @click="historyItemEvent(right.history[0])"
+        >上次播放到【{{right.history[0].site}}】{{right.history[0].name}} 第{{right.history[0].index+1}}集</span>
       </div>
     </div>
     <transition name="slideX">
-      <div v-if="right.show" class="list">
+      <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 zy-svg" @click="closeListEvent">
-            <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="closeIconTitle">
+          <span
+            class="list-top-close zy-svg"
+            @click="closeListEvent"
+          >
+            <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>
               <path d="M6.34314575 6.34314575L17.6568542 17.6568542M6.34314575 17.6568542L17.6568542 6.34314575"></path>
             </svg>
           </span>
         </div>
-        <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.list.length > 0" @click="exportM3u8">导出</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.list.length > 0"
+              @click="exportM3u8"
+            >导出</li>
             <li v-show="right.list.length === 0">无数据</li>
-            <li @click="listItemEvent(j)" :class="video.info.index === j ? 'active' : ''" v-for="(i, j) in right.list" :key="j">{{i | ftName(j)}}</li>
+            <li
+              @click="listItemEvent(j)"
+              :class="video.info.index === j ? 'active' : ''"
+              v-for="(i, j) in right.list"
+              :key="j"
+            >{{i | ftName(j)}}</li>
           </ul>
-          <ul v-show="right.type === 'history'" class="list-history">
-            <li v-show="right.history.length > 0" @click="clearAllHistory">清空</li>
+          <ul
+            v-show="right.type === 'history'"
+            class="list-history"
+          >
+            <li
+              v-show="right.history.length > 0"
+              @click="clearAllHistory"
+            >清空</li>
             <li v-show="right.history.length === 0">无数据</li>
-            <li @click="historyItemEvent(m)" :class="video.info.id === m.ids ? 'active' : ''" v-for="(m, n) in right.history" :key="n"><span class="title" :title="'【' + m.site + '】' + m.name + ' 第' + (m.index+1) + '集'">【{{m.site}}】{{m.name}} 第{{m.index+1}}集</span><span @click.stop="removeHistoryItem(m)" class="detail-delete">删除</span></li>
+            <li
+              @click="historyItemEvent(m)"
+              :class="video.info.id === m.ids ? 'active' : ''"
+              v-for="(m, n) in right.history"
+              :key="n"
+            ><span
+                class="title"
+                :title="'【' + m.site + '】' + m.name + ' 第' + (m.index+1) + '集'"
+              >【{{m.site}}】{{m.name}} 第{{m.index+1}}集</span><span
+                @click.stop="removeHistoryItem(m)"
+                class="detail-delete"
+              >删除</span></li>
           </ul>
         </div>
       </div>
@@ -1087,7 +1340,8 @@ export default {
 .xgplayer-skin-default .xg-btn-playNextOne:hover {
   opacity: 0.8;
 }
-.xgplayer-skin-default .xgplayer-play, .xgplayer-skin-default .xgplayer-play-img {
+.xgplayer-skin-default .xgplayer-play,
+.xgplayer-skin-default .xgplayer-play-img {
   order: 1 !important;
 }
 .xgplayer-skin-default .xg-btn-showList {
@@ -1116,63 +1370,70 @@ export default {
 .xgplayer-skin-default .xg-btn-showHistory:hover {
   opacity: 0.8;
 }
-.xgplayer-skin-default .xg-btn-showList ul, .xgplayer-skin-default .xg-btn-showHistory ul {
-    display: none;
-    list-style: none;
-    min-width: 85px;
-    max-width: 300px;
-    max-height: 60vh;
-    overflow-y: scroll;
-    background: rgba(0,0,0,.54);
-    border-radius: 1px;
-    position: absolute;
-    bottom: 45px;
-    left: 50%;
-    -webkit-transform: translateX(-50%);
-    -ms-transform: translateX(-50%);
-    transform: translateX(-50%);
-    text-align: left;
-    white-space: nowrap;
-    z-index: 26;
-    cursor: pointer;
+.xgplayer-skin-default .xg-btn-showList ul,
+.xgplayer-skin-default .xg-btn-showHistory ul {
+  display: none;
+  list-style: none;
+  min-width: 85px;
+  max-width: 300px;
+  max-height: 60vh;
+  overflow-y: scroll;
+  background: rgba(0, 0, 0, 0.54);
+  border-radius: 1px;
+  position: absolute;
+  bottom: 45px;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+  text-align: left;
+  white-space: nowrap;
+  z-index: 26;
+  cursor: pointer;
 }
-.xgplayer-skin-default .xg-btn-showList ul li, .xgplayer-skin-default .xg-btn-showHistory ul li {
-    opacity: .7;
-    font-family: PingFangSC-Regular;
-    font-size: 13px;
-    color: hsla(0,0%,100%,.8);
-    position: relative;
-    padding: 5px;
-    text-align: center;
+.xgplayer-skin-default .xg-btn-showList ul li,
+.xgplayer-skin-default .xg-btn-showHistory ul li {
+  opacity: 0.7;
+  font-family: PingFangSC-Regular;
+  font-size: 13px;
+  color: hsla(0, 0%, 100%, 0.8);
+  position: relative;
+  padding: 5px;
+  text-align: center;
 }
-.xgplayer-skin-default .xg-btn-showList ul li:first-child, .xgplayer-skin-default .xg-btn-showHistory ul li:first-child {
-    position: relative;
-    margin-top: 12px;
+.xgplayer-skin-default .xg-btn-showList ul li:first-child,
+.xgplayer-skin-default .xg-btn-showHistory ul li:first-child {
+  position: relative;
+  margin-top: 12px;
 }
-.xgplayer-skin-default .xg-btn-showList ul li:last-child, .xgplayer-skin-default .xg-btn-showHistory ul li:last-child {
-    margin-bottom: 12px;
+.xgplayer-skin-default .xg-btn-showList ul li:last-child,
+.xgplayer-skin-default .xg-btn-showHistory ul li:last-child {
+  margin-bottom: 12px;
 }
-.xgplayer-skin-default .xg-btn-showList ul li.selected, .xgplayer-skin-default .xg-btn-showHistory ul li.selected, .xgplayer-skin-default .xg-btn-showList ul li:hover, .xgplayer-skin-default .xg-btn-showHistory ul li:hover {
-    color: #fff;
-    opacity: 1;
+.xgplayer-skin-default .xg-btn-showList ul li.selected,
+.xgplayer-skin-default .xg-btn-showHistory ul li.selected,
+.xgplayer-skin-default .xg-btn-showList ul li:hover,
+.xgplayer-skin-default .xg-btn-showHistory ul li:hover {
+  color: #fff;
+  opacity: 1;
 }
 .xgplayer-skin-default .xgplayer-volume {
-    width: 32px !important;
+  width: 32px !important;
 }
 .xgplayer-skin-default .xgplayer-playbackrate {
-    width: 40px !important;
+  width: 40px !important;
 }
 .xgplayer-skin-default .xgplayer-playbackrate .name {
-    top: 10px !important;
+  top: 10px !important;
 }
 .xgplayer-skin-default .xgplayer-playbackrate ul {
   bottom: 25px;
 }
 .xgplayer-skin-default .xgplayer-playbackrate ul li {
-    font-size: 13px !important;
+  font-size: 13px !important;
 }
 .xgplayer-skin-default .xgplayer-screenshot .name span {
-    width: 40px !important;
+  width: 40px !important;
 }
 .xgplayer-skin-default .xg-view-videoTitle {
   display: none;
@@ -1182,7 +1443,13 @@ export default {
   right: 0;
   height: 40px;
   padding-left: 10px;
-  background-image: linear-gradient(180deg,rgba(0,0,0,.75),rgba(0,0,0,.75),rgba(0,0,0,.37),transparent);
+  background-image: linear-gradient(
+    180deg,
+    rgba(0, 0, 0, 0.75),
+    rgba(0, 0, 0, 0.75),
+    rgba(0, 0, 0, 0.37),
+    transparent
+  );
   z-index: 10;
 }
 .xgplayer-skin-default .xg-view-videoTitle span {
@@ -1192,7 +1459,7 @@ export default {
 }
 </style>
 <style lang="scss" scoped>
-.play{
+.play {
   position: relative;
   height: calc(100% - 40px);
   width: 100%;
@@ -1200,7 +1467,7 @@ export default {
   justify-content: center;
   align-items: center;
   border-radius: 5px;
-  .box{
+  .box {
     width: 100%;
     height: 100%;
     display: flex;
@@ -1208,7 +1475,7 @@ export default {
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    .title{
+    .title {
       width: 100%;
       height: 40px;
       line-height: 40px;
@@ -1221,13 +1488,13 @@ export default {
         }
       }
     }
-    .player{
+    .player {
       width: 100%;
       flex: 1;
       padding: 0 10px;
       overflow: hidden;
     }
-    .more{
+    .more {
       width: 100%;
       height: 50px;
       min-height: 50px;
@@ -1235,14 +1502,14 @@ export default {
       justify-content: flex-start;
       align-items: center;
       padding: 0 10px;
-      span{
+      span {
         display: flex;
         margin-right: 10px;
         cursor: pointer;
       }
     }
   }
-  .list{
+  .list {
     position: absolute;
     top: 0;
     right: 0;
@@ -1253,27 +1520,27 @@ export default {
     padding: 6px;
     display: flex;
     flex-direction: column;
-    .list-top{
+    .list-top {
       display: flex;
       justify-content: space-between;
       align-items: center;
       height: 30px;
-      .list-top-title{
+      .list-top-title {
         font-size: 16px;
       }
-      .list-top-close{
+      .list-top-close {
         display: inline-block;
         cursor: pointer;
       }
     }
-    .list-body{
+    .list-body {
       flex: 1;
       overflow-y: auto;
-      ul{
+      ul {
         margin: 0;
         padding: 0;
         list-style: none;
-        li{
+        li {
           position: relative;
           height: 28px;
           width: 100%;
@@ -1281,14 +1548,14 @@ export default {
           padding-left: 10px;
           font-size: 14px;
           cursor: pointer;
-          .title{
+          .title {
             display: inline-block;
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
             width: 231px;
           }
-          .detail-delete{
+          .detail-delete {
             display: none;
             position: absolute;
             right: 0;
@@ -1300,10 +1567,12 @@ export default {
       }
     }
   }
-  .slideX-enter-active, .slideX-leave-active{
-    transition: all .5s ease-in-out;
+  .slideX-enter-active,
+  .slideX-leave-active {
+    transition: all 0.5s ease-in-out;
   }
-  .slideX-enter, .slideX-leave-to{
+  .slideX-enter,
+  .slideX-leave-to {
     transform: translateX(100%);
     opacity: 0;
   }
diff --git a/src/components/Setting.vue b/src/components/Setting.vue
index 5367999..5ce96e4 100644
--- a/src/components/Setting.vue
+++ b/src/components/Setting.vue
@@ -1,22 +1,44 @@
 <template>
   <div class="setting">
     <div class="setting-box zy-scroll">
-      <div class="logo"><img src="@/assets/image/logo.png" alt=""></div>
+      <div class="logo"><img
+          src="@/assets/image/logo.png"
+          alt=""
+        ></div>
       <div class="info">
         <a @click="linkOpen('http://zyplayer.fun/')">官网</a>
         <a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player')">Github</a>
         <a @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/issues')">当前版本v{{pkg.version}} 反馈</a>
-        <a style="color:#38dd77" @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/releases/tag/v' + latestVersion)" v-show="latestVersion !== pkg.version" >最新版本v{{latestVersion}}</a>
+        <a
+          style="color:#38dd77"
+          @click="linkOpen('https://github.com/Hunlongyu/ZY-Player/releases/tag/v' + latestVersion)"
+          v-show="latestVersion !== pkg.version"
+        >最新版本v{{latestVersion}}</a>
       </div>
       <div class="view">
         <div class="title">视图</div>
         <div class="view-box">
-          <div class="zy-select" @mouseleave="show.view = false">
-            <div class="vs-placeholder" @click="show.view = true">默认视图</div>
-            <div class="vs-options" v-show="show.view">
+          <div
+            class="zy-select"
+            @mouseleave="show.view = false"
+          >
+            <div
+              class="vs-placeholder"
+              @click="show.view = true"
+            >默认视图</div>
+            <div
+              class="vs-options"
+              v-show="show.view"
+            >
               <ul class="zy-scroll">
-                <li :class="d.view === 'picture' ? 'active' : ''" @click="changeView('picture')">海报</li>
-                <li :class="d.view === 'table' ? 'active' : ''" @click="changeView('table')">列表</li>
+                <li
+                  :class="d.view === 'picture' ? 'active' : ''"
+                  @click="changeView('picture')"
+                >海报</li>
+                <li
+                  :class="d.view === 'table' ? 'active' : ''"
+                  @click="changeView('table')"
+                >列表</li>
               </ul>
             </div>
           </div>
@@ -25,89 +47,176 @@
       <div class="shortcut">
         <div class="title">快捷键</div>
         <div class="shortcut-box">
-          <div class="zy-select" @mouseleave="show.shortcut = false">
-            <div class="vs-placeholder" @click="show.shortcut = true">快捷键</div>
-            <div class="vs-options" v-show="show.shortcut">
+          <div
+            class="zy-select"
+            @mouseleave="show.shortcut = false"
+          >
+            <div
+              class="vs-placeholder"
+              @click="show.shortcut = true"
+            >快捷键</div>
+            <div
+              class="vs-options"
+              v-show="show.shortcut"
+            >
               <ul class="zy-scroll">
-                <li :class="d.shortcut === true ? 'active' : ''" @click="changeShortcut(true)">开启</li>
-                <li :class="d.shortcut === false ? 'active' : ''" @click="changeShortcut(false)">关闭</li>
+                <li
+                  :class="d.shortcut === true ? 'active' : ''"
+                  @click="changeShortcut(true)"
+                >开启</li>
+                <li
+                  :class="d.shortcut === false ? 'active' : ''"
+                  @click="changeShortcut(false)"
+                >关闭</li>
               </ul>
             </div>
           </div>
           <div class="zy-select">
-            <div class="vs-placeholder vs-noAfter" @click="expShortcut">导出</div>
+            <div
+              class="vs-placeholder vs-noAfter"
+              @click="expShortcut"
+            >导出</div>
           </div>
           <div class="zy-select">
-            <div class="vs-placeholder vs-noAfter" @click="impShortcut">导入</div>
+            <div
+              class="vs-placeholder vs-noAfter"
+              @click="impShortcut"
+            >导入</div>
           </div>
         </div>
       </div>
       <div class="site">
         <div class="title">定位时间设置</div>
         <div class="zy-input">
-          左/右方向键:<input style="width:50px" type="number" v-model = "d.forwardTimeInSec" @change="updateSettingEvent">秒
+          左/右方向键:<input
+            style="width:50px"
+            type="number"
+            v-model="d.forwardTimeInSec"
+            @change="updateSettingEvent"
+          >秒
         </div>
       </div>
       <div class='search'>
-         <div class="title">搜索</div>
-          <div class="zy-input" @click="toggleSearchAllSites">
-            <input type="checkbox" v-model = "d.searchAllSites" @change="updateSettingEvent"> 搜索所有资源
-         </div>
+        <div class="title">搜索</div>
+        <div
+          class="zy-input"
+          @click="toggleSearchAllSites"
+        >
+          <input
+            type="checkbox"
+            v-model="d.searchAllSites"
+            @change="updateSettingEvent"
+          > 搜索所有资源
+        </div>
       </div>
       <div class='site'>
-         <div class="title">第三方播放</div>
-         <div class="site-box">
-            <div class="zy-select">
-              <div class="vs-placeholder vs-noAfter" @click="selectLocalPlayer">选择本地播放器</div>
-            </div>
-            <div class="zy-select" @click = "editPlayerPath = true">
-              <div class="vs-placeholder vs-noAfter" v-show = "editPlayerPath == false">
-                <label>编辑</label>
-              </div>
-              <input class="zy-input" v-show = "editPlayerPath == true" v-model = "d.externalPlayer"
-                @blur= "updateSettingEvent"
-                @keyup.enter = "updateSettingEvent">
-            </div>
+        <div class="title">第三方播放</div>
+        <div class="site-box">
+          <div class="zy-select">
+            <div
+              class="vs-placeholder vs-noAfter"
+              @click="selectLocalPlayer"
+            >选择本地播放器</div>
           </div>
+          <div
+            class="zy-select"
+            @click="editPlayerPath = true"
+          >
+            <div
+              class="vs-placeholder vs-noAfter"
+              v-show="editPlayerPath == false"
+            >
+              <label>编辑</label>
+            </div>
+            <input
+              class="zy-input"
+              v-show="editPlayerPath == true"
+              v-model="d.externalPlayer"
+              @blur="updateSettingEvent"
+              @keyup.enter="updateSettingEvent"
+            >
+          </div>
+        </div>
       </div>
       <div class="site">
         <div class="title">源管理</div>
         <div class="site-box">
           <div class="zy-select">
-            <div class="vs-placeholder vs-noAfter" @click="editSitesEvent">编辑源</div>
+            <div
+              class="vs-placeholder vs-noAfter"
+              @click="editSitesEvent"
+            >编辑源</div>
           </div>
-          <div class="zy-input" @click="toggleExcludeRootClasses">
-           <input type="checkbox" v-model = "d.excludeRootClasses" @change="updateSettingEvent"> 屏蔽主分类
+          <div
+            class="zy-input"
+            @click="toggleExcludeRootClasses"
+          >
+            <input
+              type="checkbox"
+              v-model="d.excludeRootClasses"
+              @change="updateSettingEvent"
+            > 屏蔽主分类
+          </div>
+          <div
+            class="zy-input"
+            @click="toggleExcludeR18Films"
+          >
+            <input
+              type="checkbox"
+              v-model="d.excludeR18Films"
+              @change="updateSettingEvent"
+            > 屏蔽福利片
           </div>
-          <div class="zy-input" @click="toggleExcludeR18Films">
-           <input type="checkbox" v-model = "d.excludeR18Films" @change="updateSettingEvent"> 屏蔽福利片
-         </div>
         </div>
       </div>
       <div class="theme">
         <div class="title">主题</div>
         <div class="theme-box">
-          <div @click="changeTheme('light')" class="theme-item light">
+          <div
+            @click="changeTheme('light')"
+            class="theme-item light"
+          >
             <div class="theme-image">
-              <img src="../assets/image/light.png" alt="">
+              <img
+                src="../assets/image/light.png"
+                alt=""
+              >
             </div>
             <div class="theme-name">Light</div>
           </div>
-          <div @click="changeTheme('dark')" class="theme-item dark">
+          <div
+            @click="changeTheme('dark')"
+            class="theme-item dark"
+          >
             <div class="theme-image">
-              <img src="../assets/image/dark.png" alt="">
+              <img
+                src="../assets/image/dark.png"
+                alt=""
+              >
             </div>
             <div class="theme-name">Dark</div>
           </div>
-          <div @click="changeTheme('green')" class="theme-item green">
+          <div
+            @click="changeTheme('green')"
+            class="theme-item green"
+          >
             <div class="theme-image">
-              <img src="../assets/image/green.png" alt="">
+              <img
+                src="../assets/image/green.png"
+                alt=""
+              >
             </div>
             <div class="theme-name">Green</div>
           </div>
-          <div @click="changeTheme('pink')" class="theme-item pink">
+          <div
+            @click="changeTheme('pink')"
+            class="theme-item pink"
+          >
             <div class="theme-image">
-              <img src="../assets/image/pink.png" alt="">
+              <img
+                src="../assets/image/pink.png"
+                alt=""
+              >
             </div>
             <div class="theme-name">Pink</div>
           </div>
@@ -116,13 +225,25 @@
       <div class="qrcode">
         <div class="title">请作者吃辣条</div>
         <div class="qrcode-box">
-          <img class="qrcode-item" src="../assets/image/alipay.png">
-          <img class="qrcode-item" src="../assets/image/wepay.jpg">
-          <img class="qrcode-item" src="../assets/image/wepay_cuiocean.jpg">
+          <img
+            class="qrcode-item"
+            src="../assets/image/alipay.png"
+          >
+          <img
+            class="qrcode-item"
+            src="../assets/image/wepay.jpg"
+          >
+          <img
+            class="qrcode-item"
+            src="../assets/image/wepay_cuiocean.jpg"
+          >
         </div>
       </div>
       <div class="clearDB">
-        <span @click="clearDBEvent" class="clearBtn">软件重置</span>
+        <span
+          @click="clearDBEvent"
+          class="clearBtn"
+        >软件重置</span>
         <span class="clearTips">如果新安装用户, 无法显示资源, 请点击软件重置. 如非必要, 切勿点击. 会清空用户数据, 恢复默认设置. 点击即软件重置, 并关闭软件.</span>
       </div>
       <div class="Tips">
@@ -352,115 +473,115 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.setting{
+.setting {
   height: calc(100% - 40px);
   width: 100%;
   border-radius: 5px;
   padding: 20px 0;
-  .setting-box{
+  .setting-box {
     width: 100%;
     height: 100%;
     display: flex;
     flex-direction: column;
     overflow-y: auto;
   }
-  .logo{
+  .logo {
     margin-top: 10px;
     width: 100%;
     text-align: center;
-    img{
+    img {
       width: 120px;
       height: auto;
     }
   }
-  .info{
+  .info {
     width: 100%;
     margin-top: 20px;
     text-align: center;
-    a{
+    a {
       text-decoration: none;
       margin: 0 10px;
       font-size: 14px;
       cursor: pointer;
     }
   }
-  .view{
+  .view {
     width: 100%;
     padding: 20px;
     margin-top: 20px;
-    .view-box{
+    .view-box {
       margin-top: 10px;
-      .zy-select{
+      .zy-select {
         margin-right: 20px;
       }
     }
   }
-  .search{
+  .search {
     width: 100%;
     padding: 20px;
     margin-top: 20px;
   }
-  .site{
+  .site {
     width: 100%;
     padding: 20px;
     margin-top: 20px;
-    .site-box{
+    .site-box {
       margin-top: 10px;
-      .zy-select{
+      .zy-select {
         margin-right: 20px;
       }
     }
   }
-  .shortcut{
+  .shortcut {
     width: 100%;
     padding: 20px;
     margin-top: 20px;
-    .shortcut-box{
+    .shortcut-box {
       margin-top: 10px;
-      .zy-select{
+      .zy-select {
         margin-right: 20px;
       }
     }
   }
-  .theme{
+  .theme {
     width: 100%;
     padding-left: 20px;
     margin-top: 20px;
-    .theme-box{
+    .theme-box {
       display: flex;
       flex-wrap: wrap;
       justify-content: flex-start;
       margin-top: 10px;
-      .theme-item{
+      .theme-item {
         width: 200px;
         height: 180px;
         margin-right: 20px;
         cursor: pointer;
         border-radius: 2px;
-        .theme-image{
+        .theme-image {
           width: 180px;
           margin: 10px auto;
-          img{
+          img {
             width: 100%;
           }
         }
-        .theme-name{
+        .theme-name {
           width: 100%;
           text-align: center;
         }
       }
     }
   }
-  .qrcode{
+  .qrcode {
     width: 100%;
     padding-left: 20px;
     margin-top: 20px;
     margin-bottom: 20px;
-    .qrcode-box{
+    .qrcode-box {
       display: flex;
       justify-content: flex-start;
       margin-top: 10px;
-      .qrcode-item{
+      .qrcode-item {
         width: auto;
         height: 300px;
         margin-right: 20px;
@@ -468,10 +589,10 @@ export default {
       }
     }
   }
-  .clearDB{
+  .clearDB {
     margin-top: 20px;
     margin-bottom: 20px;
-    .clearBtn{
+    .clearBtn {
       margin-left: 20px;
       color: red;
       cursor: pointer;
@@ -483,13 +604,13 @@ export default {
       text-align: center;
       line-height: 32px;
     }
-    .clearTips{
+    .clearTips {
       font-size: 12px;
       color: #ff000088;
       margin-left: 10px;
     }
   }
-  .Tips{
+  .Tips {
     margin: 20px;
     font-size: 12px;
     color: #ff000066;
diff --git a/src/components/Share.vue b/src/components/Share.vue
index 0491824..eab4cb6 100644
--- a/src/components/Share.vue
+++ b/src/components/Share.vue
@@ -1,18 +1,37 @@
 <template>
-  <div class="share" id="share" @click="shareClickEvent">
+  <div
+    class="share"
+    id="share"
+    @click="shareClickEvent"
+  >
     <div class="left">
-      <img :src="pic" alt="" @load="picLoadEvent">
+      <img
+        :src="pic"
+        alt=""
+        @load="picLoadEvent"
+      >
     </div>
-    <div class="right" id="right">
+    <div
+      class="right"
+      id="right"
+    >
       <div class="title">{{ share.info.name }}</div>
-      <qrcode-vue id="qr" :value="link" :size="160" level="L" />
+      <qrcode-vue
+        id="qr"
+        :value="link"
+        :size="160"
+        level="L"
+      />
       <div class="tips">
         <p>长按二维码，识别播放。</p>
         <p><img src="@/assets/image/logo.png"></p>
         <p class="zy">『ZY Player』技术支持，严禁传播违法资源。</p>
       </div>
     </div>
-    <div class="share-mask" v-show="loading">
+    <div
+      class="share-mask"
+      v-show="loading"
+    >
       <div class="loader"></div>
     </div>
   </div>
@@ -104,7 +123,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.share{
+.share {
   position: absolute;
   bottom: 20px;
   right: 20px;
@@ -116,44 +135,45 @@ export default {
   align-items: center;
   padding: 0px;
   z-index: 999;
-  .left, .right{
+  .left,
+  .right {
     width: 50%;
     height: 100%;
   }
-  .left{
+  .left {
     display: flex;
     justify-content: center;
     align-items: center;
-    img{
+    img {
       height: 320px;
       width: auto;
       max-width: 240px;
     }
   }
-  .right{
+  .right {
     padding: 10px;
-    .title{
+    .title {
       font-size: 18px;
       margin-bottom: 10px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
-    #qr{
+    #qr {
       text-align: center;
     }
-    .tips{
+    .tips {
       font-size: 14px;
       text-align: center;
-      img{
+      img {
         width: 50px;
       }
-      .zy{
+      .zy {
         font-size: 12px;
       }
     }
   }
-  .share-mask{
+  .share-mask {
     position: absolute;
     top: 0;
     left: 0;
@@ -176,28 +196,37 @@ export default {
     @keyframes load4 {
       0%,
       100% {
-        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
+        box-shadow: 0 -3em 0 0.2em, 2em -2em 0 0em, 3em 0 0 -1em, 2em 2em 0 -1em,
+          0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 0;
       }
       12.5% {
-        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+        box-shadow: 0 -3em 0 0, 2em -2em 0 0.2em, 3em 0 0 0, 2em 2em 0 -1em,
+          0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
       }
       25% {
-        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0, 0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
+        box-shadow: 0 -3em 0 -0.5em, 2em -2em 0 0, 3em 0 0 0.2em, 2em 2em 0 0,
+          0 3em 0 -1em, -2em 2em 0 -1em, -3em 0 0 -1em, -2em -2em 0 -1em;
       }
       37.5% {
-        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em, 0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 0, 2em 2em 0 0.2em,
+          0 3em 0 0em, -2em 2em 0 -1em, -3em 0em 0 -1em, -2em -2em 0 -1em;
       }
       50% {
-        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em, 0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 0em,
+          0 3em 0 0.2em, -2em 2em 0 0, -3em 0em 0 -1em, -2em -2em 0 -1em;
       }
       62.5% {
-        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
+        box-shadow: 0 -3em 0 -1em, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
+          0 3em 0 0, -2em 2em 0 0.2em, -3em 0 0 0, -2em -2em 0 -1em;
       }
       75% {
-        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em, -2em -2em 0 0;
+        box-shadow: 0em -3em 0 -1em, 2em -2em 0 -1em, 3em 0em 0 -1em,
+          2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0.2em,
+          -2em -2em 0 0;
       }
       87.5% {
-        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em, 0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
+        box-shadow: 0em -3em 0 0, 2em -2em 0 -1em, 3em 0 0 -1em, 2em 2em 0 -1em,
+          0 3em 0 -1em, -2em 2em 0 0, -3em 0em 0 0, -2em -2em 0 0.2em;
       }
     }
   }
diff --git a/src/components/Star.vue b/src/components/Star.vue
index e818fd3..ec6f6ed 100644
--- a/src/components/Star.vue
+++ b/src/components/Star.vue
@@ -3,22 +3,34 @@
     <div class="detail-content">
       <div class="detail-header">
         <div class="zy-select">
-          <div class="vs-placeholder vs-noAfter" @click="exportFavoritesEvent">
+          <div
+            class="vs-placeholder vs-noAfter"
+            @click="exportFavoritesEvent"
+          >
             导出
           </div>
         </div>
         <div class="zy-select">
-          <div class="vs-placeholder vs-noAfter" @click="importFavoritesEvent">
+          <div
+            class="vs-placeholder vs-noAfter"
+            @click="importFavoritesEvent"
+          >
             导入
           </div>
         </div>
         <div class="zy-select">
-          <div class="vs-placeholder vs-noAfter" @click="clearFavoritesEvent">
+          <div
+            class="vs-placeholder vs-noAfter"
+            @click="clearFavoritesEvent"
+          >
             清空
           </div>
         </div>
         <div class="zy-select">
-          <div class="vs-placeholder vs-noAfter" @click="updateAllEvent">
+          <div
+            class="vs-placeholder vs-noAfter"
+            @click="updateAllEvent"
+          >
             同步所有收藏
           </div>
         </div>
@@ -42,7 +54,10 @@
                   <span class="btn"></span>
                 </span>
               </li>
-              <draggable v-model="list" @change="listUpdatedEvent">
+              <draggable
+                v-model="list"
+                @change="listUpdatedEvent"
+              >
                 <transition-group>
                   <li
                     v-for="(i, j) in list"
@@ -57,13 +72,26 @@
                     <span class="note">{{ i.note }}</span>
                     <span class="note">{{ getHistoryNote(i.index) }}</span>
                     <span class="operate">
-                      <span class="btn" @click.stop="playEvent(i)">播放</span>
-                      <span class="btn" @click.stop="shareEvent(i)">分享</span>
-                      <span class="btn" @click.stop="updateEvent(i)">同步</span>
-                      <span class="btn" @click.stop="downloadEvent(i)"
-                        >下载</span
-                      >
-                      <span class="btn" @click.stop="deleteEvent(i)">删除</span>
+                      <span
+                        class="btn"
+                        @click.stop="playEvent(i)"
+                      >播放</span>
+                      <span
+                        class="btn"
+                        @click.stop="shareEvent(i)"
+                      >分享</span>
+                      <span
+                        class="btn"
+                        @click.stop="updateEvent(i)"
+                      >同步</span>
+                      <span
+                        class="btn"
+                        @click.stop="downloadEvent(i)"
+                      >下载</span>
+                      <span
+                        class="btn"
+                        @click.stop="deleteEvent(i)"
+                      >删除</span>
                     </span>
                   </li>
                 </transition-group>
@@ -378,7 +406,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.detail{
+.detail {
   position: absolute;
   left: 80px;
   right: 20px;
@@ -386,25 +414,25 @@ export default {
   width: calc(100% - 100px);
   height: calc(100% - 40px);
   z-index: 888;
-  .detail-content{
+  .detail-content {
     height: calc(100% - 10px);
     padding: 0 60px;
     position: relative;
-    .detail-header{
+    .detail-header {
       width: 100%;
       height: 40px;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      .detail-title{
+      .detail-title {
         font-size: 16px;
       }
-      .detail-close{
+      .detail-close {
         cursor: pointer;
       }
     }
   }
-  .detail-body{
+  .detail-body {
     height: calc(100% - 50px);
     overflow-y: auto;
   }