From 60b9bdce1b1122a2424097633f9ea5bcbffb3386 Mon Sep 17 00:00:00 2001
From: Zachary <zlj19971222@outlook.com>
Date: Fri, 26 Feb 2021 00:49:17 +0800
Subject: [PATCH] Introducing element-plus on demand

* remove some useless html
* playlists page add loading
---
 babel.config.js                               | 17 ++++++--
 package-lock.json                             | 21 +++++++++
 package.json                                  |  1 +
 src/components/common/DetailInfoCard.vue      | 25 ++++-------
 src/components/common/DetailLists.vue         |  8 +---
 src/components/common/DetailSonglist.vue      |  2 +-
 src/components/common/HomeTop.vue             |  6 +--
 src/components/common/LoginOpt.vue            | 22 +++-------
 src/components/common/PushButton.vue          |  6 +--
 src/components/common/RecommendedBar.vue      | 11 ++---
 src/components/common/ShowMvs.vue             |  8 +---
 src/components/common/ShowSongs.vue           | 16 ++-----
 src/components/common/TypeSelectSubBar.vue    |  3 +-
 src/components/content/Player.vue             | 33 +++-----------
 src/main.js                                   | 26 ++++++++---
 src/views/musicLibrary/Classified.vue         | 43 +++++++------------
 src/views/musicLibrary/MV.vue                 | 17 +++-----
 src/views/musicLibrary/MvDetail.vue           |  2 +-
 src/views/musicLibrary/NewDisc.vue            | 14 +++---
 src/views/musicLibrary/PlaylistDetail.vue     |  2 +-
 src/views/musicLibrary/Ranking.vue            | 27 +++---------
 src/views/musicLibrary/SearchResultDetail.vue |  8 ++--
 src/views/musicLibrary/SongDetail.vue         |  7 ++-
 src/views/musicLibrary/SongerDetail.vue       | 14 +++---
 src/views/musicLibrary/Songers.vue            |  2 +-
 25 files changed, 139 insertions(+), 202 deletions(-)

diff --git a/babel.config.js b/babel.config.js
index e955840..f747b76 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,5 +1,16 @@
 module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
+  presets: ["@vue/cli-plugin-babel/preset"],
+  plugins: [
+    [
+      "import",
+      {
+        libraryName: "element-plus",
+        customStyleName: name => {
+          // 由于 customStyleName 在配置中被声明的原因，`style: true` 会被直接忽略掉，
+          // 如果你需要使用 scss 源文件，把文件结尾的扩展名从 `.css` 替换成 `.scss` 就可以了
+          return `element-plus/lib/theme-chalk/${name}.css`;
+        }
+      }
+    ]
   ]
-}
+};
diff --git a/package-lock.json b/package-lock.json
index 78bd2e7..14039a4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,7 @@
         "@vue/cli-service": "~4.5.0",
         "@vue/compiler-sfc": "^3.0.0",
         "@vue/test-utils": "^2.0.0-0",
+        "babel-plugin-import": "^1.13.3",
         "chai": "^4.1.2",
         "sass": "^1.26.5",
         "sass-loader": "^8.0.2"
@@ -3265,6 +3266,16 @@
         "object.assign": "^4.1.0"
       }
     },
+    "node_modules/babel-plugin-import": {
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-import/-/babel-plugin-import-1.13.3.tgz",
+      "integrity": "sha512-1qCWdljJOrDRH/ybaCZuDgySii4yYrtQ8OJQwrcDqdt0y67N30ng3X3nABg6j7gR7qUJgcMa9OMhc4AGViDwWw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/runtime": "^7.0.0"
+      }
+    },
     "node_modules/babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npm.taobao.org/babel-plugin-syntax-object-rest-spread/download/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -19337,6 +19348,16 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-plugin-import": {
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-import/-/babel-plugin-import-1.13.3.tgz",
+      "integrity": "sha512-1qCWdljJOrDRH/ybaCZuDgySii4yYrtQ8OJQwrcDqdt0y67N30ng3X3nABg6j7gR7qUJgcMa9OMhc4AGViDwWw==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/runtime": "^7.0.0"
+      }
+    },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npm.taobao.org/babel-plugin-syntax-object-rest-spread/download/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
diff --git a/package.json b/package.json
index 7a7da5b..dc965d7 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/compiler-sfc": "^3.0.0",
     "@vue/test-utils": "^2.0.0-0",
+    "babel-plugin-import": "^1.13.3",
     "chai": "^4.1.2",
     "sass": "^1.26.5",
     "sass-loader": "^8.0.2"
diff --git a/src/components/common/DetailInfoCard.vue b/src/components/common/DetailInfoCard.vue
index 55f41cd..cde9fff 100644
--- a/src/components/common/DetailInfoCard.vue
+++ b/src/components/common/DetailInfoCard.vue
@@ -12,7 +12,7 @@
       <i class="data__cover_mask" v-if="cardType == 'album'"></i>
     </span>
     <div class="data__cont">
-      <div class="data__name js_box">
+      <div class="data__name">
         <h1 id="p_name_show" class="data__name_txt" :title="obj.name">
           {{ obj.name }}
         </h1>
@@ -35,26 +35,21 @@
         <div class="data__desc_txt" id="short_desc">
           {{ obj.desc }}
         </div>
-        <a class="js_desc" @click="moreClick">[更多]</a>
+        <a @click="moreClick">[更多]</a>
       </div>
       <!-- Info -->
       <ul class="data__info" v-if="cardType != 'songer'">
-        <li class="data_info__item js_box" style="display: ">
+        <li class="data_info__item" style="display: ">
           <div class="data_tag_box" v-if="obj.tags">
             标签：<span id="choosebox1">
-              <a
-                class="data_info__tags js_jump"
-                v-for="tag in obj.tags"
-                :key="tag"
+              <a class="data_info__tags" v-for="tag in obj.tags" :key="tag"
                 >{{ tag }}
               </a>
             </span>
           </div>
         </li>
         <li class="data_info__item" v-if="obj.albumName">
-          专辑：<a class="js_album" :title="obj.albumName">{{
-            obj.albumName
-          }}</a>
+          专辑：<a :title="obj.albumName">{{ obj.albumName }}</a>
         </li>
         <li class="data_info__item" v-if="obj.type">分类：{{ obj.type }}</li>
         <li class="data_info__item" v-if="obj.version">
@@ -105,7 +100,7 @@
       </ul>
 
       <div class="data__actions" v-if="cardType != 'songer'">
-        <a class="mod_btn_green js_all_play" @click="btnClick('all')">
+        <a class="mod_btn_green" @click="btnClick('all')">
           <i class="mod_btn_green__icon_play"></i>
           {{ cardType == "song" ? "播放" : "播放全部" }}
         </a>
@@ -116,11 +111,7 @@
           ></i
           >收藏
         </a>
-        <a
-          class="mod_btn js_into_comment"
-          href="#comment_box"
-          @click="btnClick('comment')"
-        >
+        <a class="mod_btn" href="#comment_box" @click="btnClick('comment')">
           <i class="mod_btn__icon_comment"></i>评论({{ commentCount }})
         </a>
         <a
@@ -132,7 +123,7 @@
         </a>
       </div>
       <div class="data__actions" v-if="cardType == 'songer'">
-        <a class="mod_btn_green js_singer_radio" @click="btnClick('hot')">
+        <a class="mod_btn_green" @click="btnClick('hot')">
           <i class="mod_btn_green__icon_play"></i>播放歌手热门歌曲
         </a>
       </div>
diff --git a/src/components/common/DetailLists.vue b/src/components/common/DetailLists.vue
index 026af9f..b9bf3ed 100644
--- a/src/components/common/DetailLists.vue
+++ b/src/components/common/DetailLists.vue
@@ -27,7 +27,6 @@
           <h4 class="playlist__title">
             <span class="playlist__title_txt">
               <a
-                class="js_album"
                 v-if="kind == 0"
                 :title="l.name"
                 @click="gotoAlbumDetail(l.id)"
@@ -35,7 +34,6 @@
                 {{ l.name }}
               </a>
               <a
-                class="js_album"
                 v-else-if="kind == 1"
                 :title="l.name"
                 @click="gotoPlaylistDetail(l.id)"
@@ -48,10 +46,8 @@
           <mod-list-menu :id="l.id" :kind="kind + 1" />
 
           <div class="playlist__author">
-            <a class="js_singer" v-if="kind == 0" :title="l.artistsText">{{
-              l.artistsText
-            }}</a>
-            <a class="js_singer" v-else-if="kind == 1" :title="l.artistsText">{{
+            <a v-if="kind == 0" :title="l.artistsText">{{ l.artistsText }}</a>
+            <a v-else-if="kind == 1" :title="l.artistsText">{{
               l.creatorName
             }}</a>
           </div>
diff --git a/src/components/common/DetailSonglist.vue b/src/components/common/DetailSonglist.vue
index e514fca..fdc466b 100644
--- a/src/components/common/DetailSonglist.vue
+++ b/src/components/common/DetailSonglist.vue
@@ -2,7 +2,7 @@
   <div class="mod_songlist">
     <ul class="songlist__header">
       <li class="songlist__edit songlist__edit--check sprite">
-        <input type="checkbox" class="songlist__checkbox js_check_all" />
+        <input type="checkbox" class="songlist__checkbox" />
       </li>
       <li class="songlist__header_name">歌曲</li>
       <li class="songlist__header_author">歌手</li>
diff --git a/src/components/common/HomeTop.vue b/src/components/common/HomeTop.vue
index b3795d2..7aa3910 100644
--- a/src/components/common/HomeTop.vue
+++ b/src/components/common/HomeTop.vue
@@ -11,10 +11,7 @@
         >
           <div class="toplist__box">
             <div id="toplist__bg" :class="'toplist__bg' + idx"></div>
-            <i
-              class="mod_cover__icon_play js_play_toplist"
-              @click="playSonglist(toplist)"
-            ></i>
+            <i class="mod_cover__icon_play" @click="playSonglist(toplist)"></i>
             <i class="toplist__line"></i>
             <h3 class="toplist__hd">
               <a href="javascript:;" class="toplist__tit"
@@ -27,7 +24,6 @@
                 <div class="toplist__number">{{ songIdx }}</div>
                 <div class="toplist__songname">
                   <a
-                    href="javascript:;"
                     class="js_song"
                     :data-id="toplist[songIdx - 1].id"
                     @click="gotoSongDetail(toplist[songIdx - 1].id)"
diff --git a/src/components/common/LoginOpt.vue b/src/components/common/LoginOpt.vue
index 0c948d1..140edc4 100644
--- a/src/components/common/LoginOpt.vue
+++ b/src/components/common/LoginOpt.vue
@@ -3,7 +3,7 @@
     <span class="mod_top_login">
       <!-- 登录 -->
       <a
-        class="top_login__link js_logined"
+        class="top_login__link"
         :style="{ display: isLogged ? '' : 'none' }"
         @mouseover="showUserPopup"
         @mouseleave="hiddenUserPopup"
@@ -16,7 +16,7 @@
       </a>
       <!-- 未登录 -->
       <a
-        class="top_login__link js_login"
+        class="top_login__link"
         :style="{ display: isLogged ? 'none' : '' }"
         @click="showLoginPopup"
       >
@@ -81,20 +81,10 @@
   >
     <div class="popup__hd">
       <h2 class="popup__tit">
-        <a
-          href="javascript:;"
-          class="popup__tit_item current js_iframe_login"
-          data-type="qq"
-          style=""
-          >扫码登陆</a
-        >
+        <a class="popup__tit_item current" style="">扫码登陆</a>
       </h2>
     </div>
-    <a
-      href="javascript:;"
-      class="popup__close"
-      title="关闭"
-      @click="hiddenLoginPopup"
+    <a class="popup__close" title="关闭" @click="hiddenLoginPopup"
       ><i class="popup__icon_close"></i><i class="icon_txt">关闭</i>
     </a>
 
@@ -103,7 +93,7 @@
       <img
         id="frame_tips"
         :src="qrurl"
-        class="popup_login_qq"
+        class="popup_login_qr"
         width="100%"
         height="400px;"
         frameborder="0"
@@ -390,7 +380,7 @@ a:hover {
   width: 704px;
   margin-left: -2px;
 }
-.popup_login.large .popup_login_qq {
+.popup_login.large .popup_login_qr {
   width: 200px;
   height: 200px;
   margin-left: 150px;
diff --git a/src/components/common/PushButton.vue b/src/components/common/PushButton.vue
index 2a026f2..58497c1 100644
--- a/src/components/common/PushButton.vue
+++ b/src/components/common/PushButton.vue
@@ -2,9 +2,8 @@
   <div class="mod_slide_action">
     <div class="slide_action slide_action--left">
       <a
-        class="slide_action__btn slide_action__btn--left js_jump"
+        class="slide_action__btn slide_action__btn--left"
         data-p="prev"
-        tabindex="-1"
         @click="btnClick('left')"
       >
         <i class="icon_txt">上一页</i
@@ -13,9 +12,8 @@
     </div>
     <div class="slide_action slide_action--right">
       <a
-        class="slide_action__btn slide_action__btn--right js_jump"
+        class="slide_action__btn slide_action__btn--right"
         data-p="next"
-        tabindex="-1"
         @click="btnClick('right')"
       >
         <i class="icon_txt">下一页</i
diff --git a/src/components/common/RecommendedBar.vue b/src/components/common/RecommendedBar.vue
index e91c9b1..bf09198 100644
--- a/src/components/common/RecommendedBar.vue
+++ b/src/components/common/RecommendedBar.vue
@@ -28,7 +28,7 @@
           >
             <div class="playlist__item_box">
               <div class="playlist__cover mod_cover">
-                <a class="js_playlist" @click="playTheList(item.id)">
+                <a @click="playTheList(item.id)">
                   <img
                     class="playlist__pic"
                     src="//y.gtimg.cn/mediastyle/global/img/playlist_300.png?max_age=31536000"
@@ -51,12 +51,9 @@
         </ul>
       </div>
 
-      <div
-        class="mod_slide_switch js_switch"
-        data-stat="y_new.index.playlist.pager"
-      >
+      <div class="mod_slide_switch">
         <a
-          class="js_jump slide_switch__item"
+          class="slide_switch__item"
           :class="showNo ? '' : 'slide_switch__item--current'"
           @mouseover="switchShow(false)"
         >
@@ -64,7 +61,7 @@
           <i class="icon_txt">1</i>
         </a>
         <a
-          class="js_jump slide_switch__item"
+          class="slide_switch__item"
           :class="showNo ? 'slide_switch__item--current' : ''"
           @mouseover="switchShow(true)"
         >
diff --git a/src/components/common/ShowMvs.vue b/src/components/common/ShowMvs.vue
index 685976d..ca7e85c 100644
--- a/src/components/common/ShowMvs.vue
+++ b/src/components/common/ShowMvs.vue
@@ -24,14 +24,10 @@
               <!--div class="mv_list__time">04:10</div-->
             </a>
             <h3 class="mv_list__title">
-              <a class="js_mv" :title="mv.name" @click="gotoMvDetail(mv.id)">{{
-                mv.name
-              }}</a>
+              <a :title="mv.name" @click="gotoMvDetail(mv.id)">{{ mv.name }}</a>
             </h3>
             <p class="mv_list__singer">
-              <a class="js_singer" :title="mv.artistsText">{{
-                mv.artistsText
-              }}</a>
+              <a :title="mv.artistsText">{{ mv.artistsText }}</a>
             </p>
           </div>
         </li>
diff --git a/src/components/common/ShowSongs.vue b/src/components/common/ShowSongs.vue
index 009819c..e34a3eb 100644
--- a/src/components/common/ShowSongs.vue
+++ b/src/components/common/ShowSongs.vue
@@ -5,18 +5,10 @@
     style="display: block"
   >
     <div class="mod_songlist_toolbar">
-      <a href="javascript:;" class="mod_btn js_all_play"
-        ><i class="mod_btn__icon_play"></i>播放全部</a
-      >
-      <a href="javascript:;" class="mod_btn js_all_fav"
-        ><i class="mod_btn__icon_add"></i>添加到</a
-      >
-      <a href="javascript:;" class="mod_btn js_all_down"
-        ><i class="mod_btn__icon_down"></i>下载</a
-      >
-      <a href="javascript:;" class="mod_btn js_batch"
-        ><i class="mod_btn__icon_batch"></i>批量操作</a
-      >
+      <a class="mod_btn"><i class="mod_btn__icon_play"></i>播放全部</a>
+      <a class="mod_btn"><i class="mod_btn__icon_add"></i>添加到</a>
+      <a class="mod_btn"><i class="mod_btn__icon_down"></i>下载</a>
+      <a class="mod_btn"><i class="mod_btn__icon_batch"></i>批量操作</a>
     </div>
     <detail-songlist :songs="songs" :listType="'playlist'" />
   </div>
diff --git a/src/components/common/TypeSelectSubBar.vue b/src/components/common/TypeSelectSubBar.vue
index 3f0494a..ba2db07 100644
--- a/src/components/common/TypeSelectSubBar.vue
+++ b/src/components/common/TypeSelectSubBar.vue
@@ -1,7 +1,6 @@
 <template>
-  <div class="singer_tag__list js_index">
+  <div class="singer_tag__list">
     <a
-      href="javascript:;"
       class="singer_tag__item"
       v-for="(item, key) in items"
       :key="key"
diff --git a/src/components/content/Player.vue b/src/components/content/Player.vue
index 5fec98f..cb7f8a6 100644
--- a/src/components/content/Player.vue
+++ b/src/components/content/Player.vue
@@ -7,7 +7,7 @@
     >
       <div class="updn">
         <div class="left f-fl">
-          <a href="javascript:;" class="btn" @click="switchLock"></a>
+          <a class="btn" @click="switchLock"></a>
         </div>
         <div class="right f-fl"></div>
       </div>
@@ -15,16 +15,10 @@
       <div class="hand" title="展开播放条"></div>
       <div class="wrap" id="g_player" style="margin-left: -490px">
         <div class="btns">
-          <a
-            href="javascript:;"
-            hidefocus="true"
-            class="prv"
-            title="上一首(ctrl+←)"
-            @click="prev"
+          <a hidefocus="true" class="prv" title="上一首(ctrl+←)" @click="prev"
             >上一首</a
           >
           <a
-            href="javascript:;"
             hidefocus="true"
             class="ply j-flag"
             title="播放/暂停(p)"
@@ -32,12 +26,7 @@
             @click="togglePlay"
             >播放/暂停</a
           >
-          <a
-            href="javascript:;"
-            hidefocus="true"
-            class="nxt"
-            title="下一首(ctrl+→)"
-            @click="next"
+          <a hidefocus="true" class="nxt" title="下一首(ctrl+→)" @click="next"
             >下一首</a
           >
         </div>
@@ -78,20 +67,8 @@
           </div>
         </div>
         <div class="oper f-fl">
-          <a
-            href="javascript:;"
-            hidefocus="true"
-            class="icn icn-add j-flag"
-            title="收藏"
-            >收藏</a
-          >
-          <a
-            href="javascript:;"
-            hidefocus="true"
-            class="icn icn-share"
-            title="分享"
-            >分享</a
-          >
+          <a hidefocus="true" class="icn icn-add j-flag" title="收藏">收藏</a>
+          <a hidefocus="true" class="icn icn-share" title="分享">分享</a>
         </div>
         <div class="ctrl f-fl f-pr j-flag">
           <div
diff --git a/src/main.js b/src/main.js
index 17d03a2..4364b7e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -4,18 +4,32 @@ import "./registerServiceWorker";
 import router from "./router";
 import store from "./store";
 
-import ElementPlus from "element-plus";
-import "element-plus/lib/theme-chalk/index.css";
 import "@/assets/css/base.scss";
 import "@/assets/css/fakeqqmusic.scss";
 import LazyPlugin from "common/lazy-load";
+import {
+  ElIcon,
+  ElLoading,
+  ElBacktop,
+  ElInput,
+  ElAutocomplete,
+  ElCarousel,
+  ElCarouselItem,
+  ElPagination,
+  ElEmpty
+} from "element-plus";
 
 createApp(App)
   .use(store)
   .use(router)
-  .use(ElementPlus)
   .use(LazyPlugin)
+  .use(ElIcon)
+  .use(ElLoading)
+  .use(ElBacktop)
+  .use(ElInput)
+  .use(ElAutocomplete)
+  .use(ElCarousel)
+  .use(ElCarouselItem)
+  .use(ElPagination)
+  .use(ElEmpty)
   .mount("#app");
-
-// import { getBanner } from "./api";
-// getBanner().then(res => console.log(res));
diff --git a/src/views/musicLibrary/Classified.vue b/src/views/musicLibrary/Classified.vue
index 389b826..1df746c 100644
--- a/src/views/musicLibrary/Classified.vue
+++ b/src/views/musicLibrary/Classified.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="main">
+  <div class="main" v-loading="loading">
     <!-- 标签筛选 -->
     <div class="mod_playlist_tag" id="taglist">
-      <div class="js_normal" style="display: ">
+      <div style="display: ">
         <div v-for="(key, idx) in categories" :key="key">
           <div
             class="playlist_tag__list"
@@ -17,7 +17,7 @@
                 :key="item.name"
               >
                 <a
-                  class="playlist_tag__item js_tag"
+                  class="playlist_tag__item"
                   :class="
                     selectedType == item.name
                       ? 'playlist_tag__item--expand'
@@ -33,7 +33,7 @@
                 v-if="ifMore(idx, playlistTpyes[idx].list)"
               >
                 <a
-                  class="playlist_tag__item js_more_tag"
+                  class="playlist_tag__item"
                   :class="
                     playlistTpyes[idx].showMore
                       ? 'playlist_tag__item--expand'
@@ -65,7 +65,7 @@
                 :key="item.name"
               >
                 <a
-                  class="playlist_tag__item js_tag"
+                  class="playlist_tag__item"
                   :class="
                     selectedType == item.name
                       ? 'playlist_tag__item--expand'
@@ -88,9 +88,7 @@
           <span v-if="selectedType == '全部'">全部歌单</span>
           <span class="part_tags" v-else>
             {{ selectedType }}
-            <a
-              class="part_tags__delete js_delete_tags sprite"
-              @click="deleteSeleted"
+            <a class="part_tags__delete sprite" @click="deleteSeleted"
               ><i class="icon_txt">删除</i></a
             >
           </span>
@@ -99,14 +97,14 @@
         <div class="part_switch" id="sortbox" aria-label="排列方式">
           <a
             href="javascript:;"
-            class="part_switch__item js_sort part_switch__item--left"
+            class="part_switch__item part_switch__item--left"
             title="最热"
             :class="selectedOrder == 'hot' ? 'part_switch__item--select' : ''"
             @click="selectOrder('hot')"
             >最热</a
           ><a
             href="javascript:;"
-            class="part_switch__item part_switch__item--right js_sort"
+            class="part_switch__item part_switch__item--right"
             title="最新"
             :class="selectedOrder == 'new' ? 'part_switch__item--select' : ''"
             @click="selectOrder('new')"
@@ -123,10 +121,7 @@
                 class="playlist__cover mod_cover"
                 style="visibility: visible"
               >
-                <a
-                  class="js_playlist"
-                  :title="list.name"
-                  @click="playTheList(list.id)"
+                <a :title="list.name" @click="playTheList(list.id)"
                   ><img
                     class="playlist__pic"
                     style="display: block; visibility: visible"
@@ -134,28 +129,21 @@
                     v-lazy="list.img"
                     :alt="list.name"
                   />
-                  <i class="mod_cover__icon_play js_play"></i>
+                  <i class="mod_cover__icon_play"></i>
                 </a>
               </div>
               <h4 class="playlist__title">
                 <span class="playlist__title_txt">
-                  <a
-                    class="js_playlist"
-                    :title="list.name"
-                    @click="gotoPlaylistDetail(list.id)"
-                    >{{ list.name }}</a
-                  >
+                  <a :title="list.name" @click="gotoPlaylistDetail(list.id)">{{
+                    list.name
+                  }}</a>
                 </span>
               </h4>
               <div class="playlist__author">
-                <a class="js_user" :title="list.creatorName">{{
-                  list.creatorName
-                }}</a>
+                <a :title="list.creatorName">{{ list.creatorName }}</a>
               </div>
               <div class="playlist__other">播放量： {{ list.playCount }}</div>
-              <a class="btn_operate_menu js_playlist_more"
-                ><span class="icon_txt">更多</span></a
-              >
+              <a class="btn_operate_menu"><span class="icon_txt">更多</span></a>
             </div>
           </li>
         </ul>
@@ -224,6 +212,7 @@ export default {
         }
         this.playlistTpyes = d;
         this.updatePlaylist();
+        this.loading = false;
       });
     },
     updatePlaylist() {
diff --git a/src/views/musicLibrary/MV.vue b/src/views/musicLibrary/MV.vue
index d6cfd97..0e35373 100644
--- a/src/views/musicLibrary/MV.vue
+++ b/src/views/musicLibrary/MV.vue
@@ -16,7 +16,7 @@
 
       <div class="mod_part_detail">
         <div class="part_detail__hd">
-          <h2 class="part_detail__tit js_lib_title">全部MV</h2>
+          <h2 class="part_detail__tit">全部MV</h2>
           <div class="part_switch">
             <a
               class="part_switch__item part_switch__item--left"
@@ -46,7 +46,7 @@
             <li class="mv_list__item" v-for="item in mvs" :key="item.id">
               <div class="mv_list__item_box" style="visibility: visible">
                 <a
-                  class="mv_list__cover mod_cover js_mv"
+                  class="mv_list__cover mod_cover"
                   :title="item.name"
                   hidefocus="true"
                   @click="gotoMvDetail(item.id)"
@@ -61,17 +61,12 @@
                   <i class="mod_cover__icon_play"></i>
                 </a>
                 <h3 class="mv_list__title">
-                  <a
-                    class="js_mv"
-                    :title="item.name"
-                    @click="gotoMvDetail(item.id)"
-                    >{{ item.name }}</a
-                  >
+                  <a :title="item.name" @click="gotoMvDetail(item.id)">{{
+                    item.name
+                  }}</a>
                 </h3>
                 <div class="mv_list__singer" title="5AM">
-                  <a class="js_singer" :title="item.artistName">{{
-                    item.artistName
-                  }}</a>
+                  <a :title="item.artistName">{{ item.artistName }}</a>
                 </div>
                 <div class="mv_list__info">
                   <span class="mv_list__listen">
diff --git a/src/views/musicLibrary/MvDetail.vue b/src/views/musicLibrary/MvDetail.vue
index cc24e6a..3e1dc9a 100644
--- a/src/views/musicLibrary/MvDetail.vue
+++ b/src/views/musicLibrary/MvDetail.vue
@@ -19,7 +19,7 @@
         <h1 class="mv__title">
           <span class="mv__name" title="Falsetto">{{ mv.name }}</span>
           <span class="mv__line">-</span>
-          <a class="mv__singer js_singer">{{ mv.artistsText }}</a>
+          <a class="mv__singer">{{ mv.artistsText }}</a>
         </h1>
         <span class="mv__listen">播放量：{{ mv.playCount }}</span>
       </div>
diff --git a/src/views/musicLibrary/NewDisc.vue b/src/views/musicLibrary/NewDisc.vue
index 91ba9ab..327ab00 100644
--- a/src/views/musicLibrary/NewDisc.vue
+++ b/src/views/musicLibrary/NewDisc.vue
@@ -38,12 +38,9 @@
               </div>
               <h4 class="playlist__title">
                 <span class="playlist__title_txt">
-                  <a
-                    class="js_album"
-                    :title="album.name"
-                    @click="gotoAlbumDetail(album.id)"
-                    >{{ album.name }}</a
-                  >
+                  <a :title="album.name" @click="gotoAlbumDetail(album.id)">{{
+                    album.name
+                  }}</a>
                 </span>
               </h4>
 
@@ -56,11 +53,10 @@
                   :key="artist.id"
                   @click="gotoSongerDetail(artist.id)"
                 >
-                  <a class="js_singer"> {{ artist.name }}</a
-                  >/
+                  <a> {{ artist.name }}</a>
+                  /
                 </span>
                 <a
-                  class="js_singer"
                   @click="
                     gotoSongerDetail(album.artists[album.artists.length - 1].id)
                   "
diff --git a/src/views/musicLibrary/PlaylistDetail.vue b/src/views/musicLibrary/PlaylistDetail.vue
index 1805fad..28ca94a 100644
--- a/src/views/musicLibrary/PlaylistDetail.vue
+++ b/src/views/musicLibrary/PlaylistDetail.vue
@@ -21,7 +21,7 @@
       </div>
 
       <div class="detail_layout__other">
-        <div class="mod_about js_box" id="album_desc" style="display: ">
+        <div class="mod_about" id="album_desc" style="display: ">
           <h3 class="about__tit">简介</h3>
           <div class="about__cont">
             <p>
diff --git a/src/views/musicLibrary/Ranking.vue b/src/views/musicLibrary/Ranking.vue
index ac8e463..a435277 100644
--- a/src/views/musicLibrary/Ranking.vue
+++ b/src/views/musicLibrary/Ranking.vue
@@ -70,30 +70,17 @@
       <div class="toplist__hd_rk">
         <h1 class="toplist__tit1">{{ seletedTypeName }}</h1>
         <span class="toplist_switch">
-          <a
-            href="javascript:;"
-            class="toplist_switch__btn js_prev_week"
-            style="display: none"
+          <a class="toplist_switch__btn" style="display: none"
             ><i class="toplist_switch__arrow_prev sprite"></i
             ><i class="icon_txt">上一期</i></a
           >
           <!-- <span class="toplist_switch__data js_chosed_week">2021-02-13</span> -->
-          <a
-            href="javascript:;"
-            class="toplist_switch__btn js_next_week"
-            style="display: none"
+          <a class="toplist_switch__btn" style="display: none"
             ><i class="toplist_switch__arrow_next sprite"></i
             ><i class="icon_txt">下一期</i></a
           >
         </span>
-        <a
-          href="javascript:;"
-          class="toplist__rule js_desc"
-          data-left="-650"
-          data-top="-78"
-          data-target="popup_data_detail"
-          >榜单规则</a
-        >
+        <a class="toplist__rule js_desc">榜单规则</a>
       </div>
       <div class="mod_songlist_toolbar">
         <a class="mod_btn_green js_all_play" @click="playSonglist(listDatas)"
@@ -118,7 +105,7 @@
       <div class="mod_songlist" v-loading="loading">
         <ul class="songlist__header">
           <li class="songlist__edit sprite">
-            <input type="checkbox" class="songlist__checkbox js_check_all" />
+            <input type="checkbox" class="songlist__checkbox" />
           </li>
           <li class="songlist__header_name">歌曲</li>
           <li class="songlist__header_author">歌手</li>
@@ -182,11 +169,7 @@
                       :alt="song.name"
                     />
                   </a>
-                  <a
-                    class="js_song"
-                    :title="song.name"
-                    @click="gotoSongDetail(song.id)"
-                  >
+                  <a :title="song.name" @click="gotoSongDetail(song.id)">
                     {{ song.name }}
                   </a>
                 </span>
diff --git a/src/views/musicLibrary/SearchResultDetail.vue b/src/views/musicLibrary/SearchResultDetail.vue
index 5b93659..2df670e 100644
--- a/src/views/musicLibrary/SearchResultDetail.vue
+++ b/src/views/musicLibrary/SearchResultDetail.vue
@@ -9,7 +9,7 @@
       <div class="result">
         <div class="mod_tab" role="nav">
           <a
-            class="mod_tab__item js_tab"
+            class="mod_tab__item"
             v-for="item in selectTypes"
             :key="item.typeId"
             :class="selectedType == item.typeId ? 'mod_tab__current' : ''"
@@ -58,7 +58,7 @@
                   </div>
 
                   <span class="singer_list__title_txt"
-                    ><a class="js_user" :title="user.name"
+                    ><a :title="user.name"
                       >{{ user.name }}
                       <span class="singer_list__user_txt"> </span></a
                   ></span>
@@ -66,11 +66,11 @@
                 <div class="singer_list__playlist">
                   歌单：{{ user.playlistCount }}
                 </div>
-                <div class="singer_list__count js_num_follow" data-num="78">
+                <div class="singer_list__count" data-num="78">
                   粉丝：{{ user.followeds }}
                 </div>
                 <div class="singer_list__other">
-                  <a class="mod_btn singer_list__btn_focus js_focus_user">
+                  <a class="mod_btn singer_list__btn_focus">
                     <i class="mod_btn__icon_new"></i>关注
                   </a>
                 </div>
diff --git a/src/views/musicLibrary/SongDetail.vue b/src/views/musicLibrary/SongDetail.vue
index acfd3d4..95d9fd4 100644
--- a/src/views/musicLibrary/SongDetail.vue
+++ b/src/views/musicLibrary/SongDetail.vue
@@ -57,20 +57,19 @@
               >
                 <div class="playlist__item_box">
                   <div class="playlist__cover mod_cover">
-                    <a class="js_playlist" @click="gotoSongDetail(simiSong.id)">
+                    <a @click="gotoSongDetail(simiSong.id)">
                       <img
                         src=""
                         v-lazy="simiSong.img"
                         :alt="simiSong.name"
                         class="playlist__pic"
                       />
-                      <i class="mod_cover__icon_play js_play"></i>
+                      <i class="mod_cover__icon_play"></i>
                     </a>
                   </div>
                   <h4 class="playlist__title">
                     <span class="playlist__title_txt"
                       ><a
-                        class="js_playlist"
                         :title="simiSong.name"
                         @click="gotoSongDetail(simiSong.id)"
                         >{{ simiSong.name }}</a
@@ -88,7 +87,7 @@
           <h3 class="other_part__tit">相关MV</h3>
           <div class="mod_mv_list">
             <div class="mv_list__item_box">
-              <a class="mv_list__cover mod_cover js_mv" hidefocus="true">
+              <a class="mv_list__cover mod_cover" hidefocus="true">
                 <img
                   class="mv_list__pic"
                   src="//y.gtimg.cn/mediastyle/global/img/mv_300.png?max_age=31536000"
diff --git a/src/views/musicLibrary/SongerDetail.vue b/src/views/musicLibrary/SongerDetail.vue
index a98686b..8514456 100644
--- a/src/views/musicLibrary/SongerDetail.vue
+++ b/src/views/musicLibrary/SongerDetail.vue
@@ -7,14 +7,12 @@
       @moreClick="toggleShowMoreInfo"
     />
 
-    <div id="index_tab" class="js_tab">
+    <div id="index_tab">
       <div class="mod_part">
         <div class="part__hd">
           <h2 class="part__tit">热门歌曲</h2>
 
-          <a class="part__more js_goto_tab">
-            全部<i class="icon_part_arrow sprite"></i>
-          </a>
+          <a class="part__more"> 全部<i class="icon_part_arrow sprite"></i> </a>
         </div>
 
         <detail-songlist :songs="hotSongs" :listType="'songer'" />
@@ -37,7 +35,7 @@
                       :alt="album.name"
                     />
                     <i
-                      class="mod_cover__icon_play js_play"
+                      class="mod_cover__icon_play"
                       @click="playAlbum(album.id)"
                     ></i>
                   </a>
@@ -65,15 +63,13 @@
       <div class="mod_part" v-if="mvs.length > 0">
         <div class="part__hd">
           <h2 class="part__tit">MV</h2>
-          <a class="part__more js_goto_tab">
-            全部<i class="icon_part_arrow sprite"></i>
-          </a>
+          <a class="part__more"> 全部<i class="icon_part_arrow sprite"></i> </a>
         </div>
         <div class="mod_mv">
           <ul class="mv_list__list" id="mvlist">
             <li class="mv_list__item" v-for="mv in mvs" :key="mv.id">
               <div class="mv_list__item_box">
-                <a class="mv_list__cover mod_cover js_mv" hidefocus="true">
+                <a class="mv_list__cover mod_cover" hidefocus="true">
                   <img
                     class="mv_list__pic"
                     src="//y.gtimg.cn/mediastyle/global/img/mv_300.png?max_age=31536000"
diff --git a/src/views/musicLibrary/Songers.vue b/src/views/musicLibrary/Songers.vue
index abb6b97..87c013f 100644
--- a/src/views/musicLibrary/Songers.vue
+++ b/src/views/musicLibrary/Songers.vue
@@ -26,7 +26,7 @@
           :key="item.id"
         >
           <a
-            class="singer_list_txt__link js_singer"
+            class="singer_list_txt__link"
             :title="item.name"
             @click="gotoSongerDetail(item.id)"
             >{{ item.name }}</a
-- 
GitLab