fix css bug.

src/assets/css/fakeqqmusic.css

-/* 歌手列表 css */
+/* **************
+ * 歌手列表 css */
 .singer_list_txt {
   margin-right: -20px;
   overflow: hidden;
@@ -20,7 +21,8 @@
   line-height: 36px;
 }
 
-/* 伸缩按钮 */
+/* **********
+ * 伸缩按钮 */
 .mod_slide_action {
   position: absolute;
   top: 0;
@@ -95,7 +97,8 @@
   font: 0/0 a;
 }
 
-/* mv 顶头标题 css */
+/*******************
+ * mv 顶头标题 css */
 .mod_part,
 .mod_part_detail {
   position: relative;
@@ -115,7 +118,8 @@
   line-height: 58px;
 }
 
-/* mv 切换按钮 css */
+/* *****************
+ * mv 切换按钮 css */
 .part_switch {
   position: absolute;
   top: 7px;
@@ -163,7 +167,8 @@
   border-style: solid;
 }
 
-/* MV 列表 css */
+/* *************
+ * MV 列表 css */
 .mv_list__list {
   margin-right: -20px;
   zoom: 1;
@@ -325,6 +330,10 @@
 .mod_songlist {
   margin-bottom: 60px;
 }
+.mod_btn {
+  border: 1px solid #c9c9c9;
+  color: #000;
+}
 .mod_btn_green {
   border: 1px solid #31c27c;
   background-color: #31c27c;
@@ -348,10 +357,6 @@
   min-width: 122px;
   text-align: center;
 }
-.mod_btn {
-  border: 1px solid #c9c9c9;
-  color: #000;
-}
 .songlist__header {
   height: 50px;
   line-height: 50px;
@@ -646,3 +651,90 @@
 .popup_tips__icon.sprite {
   background-image: url(../img/icon_popup.png);
 }
+
+/*
+ ************
+ * 新碟页面 */
+/*下*/
+.mod_playlist {
+  overflow: hidden;
+  font-size: 0;
+}
+.mod_playlist .playlist__list {
+  margin-right: -20px;
+}
+
+.mod_playlist .playlist__item {
+  display: inline-block;
+  width: 20%;
+  padding-bottom: 44px;
+  overflow: hidden;
+  font-size: 14px;
+  vertical-align: top;
+}
+.mod_playlist .playlist__item_box {
+  position: relative;
+  margin-right: 20px;
+  text-align: left;
+}
+.mod_playlist .playlist__cover {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  padding-top: 100%;
+  margin-bottom: 15px;
+}
+.mod_playlist .playlist__pic {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+.mod_playlist .playlist__pic {
+  transform: scale(1) translateZ(0);
+  transition: transform 0.75s;
+}
+.mod_playlist .playlist__cover:hover .playlist__pic {
+  transform: scale(1.07) translateZ(0);
+  transition: transform 0.75s cubic-bezier(0, 1, 0.75, 1);
+}
+.mod_cover__icon_play {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin: -35px;
+  width: 70px;
+  height: 70px;
+  opacity: 0;
+  transform: scale(0.7) translateZ(0);
+  transition-property: opacity, transform;
+  transition-duration: 0.5s;
+  zoom: 1;
+}
+.mod_cover:hover .mod_cover__icon_play,
+.mod_cover__icon_play {
+  background-image: url(../img/cover_play.png);
+}
+.mod_cover:hover .mod_cover__icon_play {
+  opacity: 1;
+  filter: none;
+}
+img .playlist__pic {
+  display: block;
+  visibility: visible;
+  width: 250px;
+}
+
+.mod_playlist .playlist__title {
+  overflow: hidden;
+}
+.mod_playlist .playlist__author,
+.mod_playlist .playlist__author a,
+.mod_playlist .playlist__other {
+  color: #999;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  height: 22px;
+}

src/components/common/NavMenu.vue

 <template>
-<el-menu
-  :default-active="activeIndex2"
-  class="el-menu-demo"
-  mode="horizontal"
-  @select="handleSelect"
-  background-color="#f2f2f2"
-  text-colr="#000"
-  active-text-color="#31c27c">
-  <el-menu-item
-    v-for="(item, idx) in homeData" :key="item.title"
-    :index="idx.toString()"
-    @click="onClik(item.path)">
-    {{item.title}}
-  </el-menu-item>
-</el-menu>
+  <el-menu
+    :default-active="activeIndex2"
+    class="el-menu-demo"
+    mode="horizontal"
+    @select="handleSelect"
+    background-color="#f2f2f2"
+    text-colr="#000"
+    active-text-color="#31c27c"
+  >
+    <el-menu-item
+      v-for="(item, idx) in homeData"
+      :key="item.title"
+      :index="idx.toString()"
+      @click="onClik(item.path)"
+    >
+      {{ item.title }}
+    </el-menu-item>
+  </el-menu>
 </template>
 
 <script>
-  export default {
-    name: 'NavMenu',
-    data() {
-      return {
-        activeIndex: '0',
-        activeIndex2: '0',
-        homeData:[
-        {title: '首页', path: '/MusicLibrary/home'},
-        {title: '歌手', path: '/MusicLibrary/songers'},
-        {title: '新碟', path: '/MusicLibrary/newdisc'},
-        {title: '排行榜', path: '/MusicLibrary/ranking'},
-        {title: '分类歌单', path: '/MusicLibrary/classified'},
-        {title: '电台', path: '/MusicLibrary/radions'},
-        {title: 'MV', path: '/MusicLibrary/mv'},
-        ]
-      };
+export default {
+  name: "NavMenu",
+  data() {
+    return {
+      activeIndex: "0",
+      activeIndex2: "0",
+      homeData: [
+        { title: "首页", path: "/MusicLibrary/home" },
+        { title: "歌手", path: "/MusicLibrary/songers" },
+        { title: "新碟", path: "/MusicLibrary/newdisc" },
+        { title: "排行榜", path: "/MusicLibrary/ranking" },
+        { title: "分类歌单", path: "/MusicLibrary/classified" },
+        { title: "电台", path: "/MusicLibrary/radions" },
+        { title: "MV", path: "/MusicLibrary/mv" },
+      ],
+    };
+  },
+  methods: {
+    handleSelect(key, keyPath) {
+      console.log(key, keyPath);
     },
-    methods: {
-      handleSelect(key, keyPath) {
-        console.log(key, keyPath);
-      },
-      onClik(path) {
-        this.$router.push(path)
-      },
-    }
-  }
+    onClik(path) {
+      this.$router.push(path);
+    },
+  },
+};
 </script>
 
-<style lang="postcss" scoped>
-
+<style scoped>
 </style>
 

src/components/common/SearchInput.vue

@@ -75,7 +75,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .my-autocomplete li {
   line-height: normal;
   padding: 7px;

src/components/content/Banner.vue

@@ -3,10 +3,10 @@
     indicator-position="outside"
     type="card"
     height="400px"
-    v-loading="bannerLoading">
-    <el-carousel-item
-      v-for="banner in banners" :key="banner.targetId">
-        <img :src="banner.imageUrl" :alt="banner.typeTitle">
+    v-loading="bannerLoading"
+  >
+    <el-carousel-item v-for="banner in banners" :key="banner.targetId">
+      <img :src="banner.imageUrl" :alt="banner.typeTitle" />
     </el-carousel-item>
   </el-carousel>
 </template>
@@ -19,37 +19,39 @@ export default {
     return {
       bannerLoading: true,
       banners: [],
-      }
+    };
   },
   mounted() {
     this.updateBanner();
   },
-  methods:{
+  methods: {
     updateBanner() {
-      getBanner().then(res => {
-            console.log(res.data.banners);
-            this.banners = res.data.banners;
-            this.bannerLoading = false;
-          }).catch(err => console.log(err));
+      getBanner()
+        .then((res) => {
+          console.log(res.data.banners);
+          this.banners = res.data.banners;
+          this.bannerLoading = false;
+        })
+        .catch((err) => console.log(err));
     },
-  }
-}
+  },
+};
 </script>
 
-<style lang="postcss">
-  .el-carousel__item h3 {
-    color: #475669;
-    font-size: 18px;
-    opacity: 0.75;
-    line-height: 400px;
-    margin: 0;
-  }
+<style scoped>
+.el-carousel__item h3 {
+  color: #475669;
+  font-size: 18px;
+  opacity: 0.75;
+  line-height: 400px;
+  margin: 0;
+}
 
-  .el-carousel__item:nth-child(2n) {
-    background-color: #99a9bf;
-  }
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
 
-  .el-carousel__item:nth-child(2n+1) {
-    background-color: #d3dce6;
-  }
+.el-carousel__item:nth-child(2n + 1) {
+  background-color: #d3dce6;
+}
 </style>

src/components/content/HomeTop.vue

 <template>
   <div class="toplist_main">
     <h1 class="list">排行榜</h1>
-    <div class="mod_toplist">
+    <div class="home_toplist">
       <ul class="toplist__list js_list">
         <li
           class="toplist__item mod_cover"
@@ -88,7 +88,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 .toplist_main {
   margin: 0 auto;
   text-align: center;
@@ -158,9 +158,6 @@ li {
   color: #fff;
   font-weight: 400;
 }
-a {
-  text-decoration: none;
-}
 .toplist__hd::before {
   content: "";
   display: block;
@@ -186,10 +183,6 @@ a {
   padding-left: 15px;
   margin-bottom: 27px;
 }
-/*.toplist__songname{*/
-/*overflow: hidden;*/
-/*text-overflow: ellipsis;*/
-/*}*/
 .toplist__number {
   position: absolute;
   top: 0;

src/components/content/RecommendedBar.vue

 <template>
   <div class="recommended_main">
-    <h1 class="list">歌单推荐</h1>
+    <h1 class="recommended_list">歌单推荐</h1>
     <div class="target-bar">
       <a
         class="playlist"
@@ -131,9 +131,9 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 /* play list */
-.list {
+.recommended_list {
   letter-spacing: 20px;
   text-align: center;
 }

src/views/musicLibrary/Home.vue

 <template>
-  <div class="main">
+  <div class="home-main">
     <banner />
     <recommended-bar />
     <home-top />
@@ -20,8 +20,8 @@ export default {
 };
 </script>
 
-<style>
-.main {
+<style scoped>
+.home-main {
   font-family: poppin, Tahoma, Arial, 微软雅黑, sans-serif;
   line-height: 1.5;
   max-width: 1400px;

src/views/musicLibrary/NewDisc.vue

 <template>
-  <div class="main" style="">
+  <div class="disc-main" style="">
     <!-- 标签筛选 -->
     <div class="mod_tag" id="tag_list">
       <div class="tag__list">
@@ -147,7 +147,7 @@ export default {
 };
 </script>
 
-<style>
+<style scoped>
 blockquote,
 body,
 button,
@@ -187,13 +187,13 @@ h6 {
 }
 
 /*总体*/
-.main,
+.disc-main,
 .section_inner {
   max-width: 1200px;
   margin: 0 auto;
   position: relative;
 }
-.main {
+.disc-main {
   z-index: 2;
 }
 
@@ -211,96 +211,9 @@ h6 {
   line-height: 26px;
   padding-left: 65px;
 }
+</style>
 
-/*下*/
-.mod_part,
-.mod_part_detail {
-  position: relative;
-  margin-bottom: 30px;
-}
-.mod_playlist {
-  overflow: hidden;
-  font-size: 0;
-}
-.mod_playlist .playlist__list {
-  margin-right: -20px;
-}
-
-.mod_playlist .playlist__item {
-  display: inline-block;
-  width: 20%;
-  padding-bottom: 44px;
-  overflow: hidden;
-  font-size: 14px;
-  vertical-align: top;
-}
-.mod_playlist .playlist__item_box {
-  position: relative;
-  margin-right: 20px;
-  text-align: left;
-}
-.mod_playlist .playlist__cover {
-  position: relative;
-  display: block;
-  overflow: hidden;
-  padding-top: 100%;
-  margin-bottom: 15px;
-}
-.mod_playlist .playlist__pic {
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-}
-.mod_playlist .playlist__pic {
-  transform: scale(1) translateZ(0);
-  transition: transform 0.75s;
-}
-.mod_playlist .playlist__cover:hover .playlist__pic {
-  transform: scale(1.07) translateZ(0);
-  transition: transform 0.75s cubic-bezier(0, 1, 0.75, 1);
-}
-.mod_cover__icon_play {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin: -35px;
-  width: 70px;
-  height: 70px;
-  opacity: 0;
-  transform: scale(0.7) translateZ(0);
-  transition-property: opacity, transform;
-  transition-duration: 0.5s;
-  zoom: 1;
-}
-.mod_cover:hover .mod_cover__icon_play,
-.mod_cover__icon_play {
-  background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/cover_play.png?max_age=2592000&v=88abebcbc1242dbbbbc836cc3e04a006);
-}
-.mod_cover:hover .mod_cover__icon_play {
-  opacity: 1;
-  filter: none;
-}
-img .playlist__pic {
-  display: block;
-  visibility: visible;
-  width: 250px;
-}
-
-.mod_playlist .playlist__title {
-  overflow: hidden;
-}
-.mod_playlist .playlist__author,
-.mod_playlist .playlist__author a,
-.mod_playlist .playlist__other {
-  color: #999;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  height: 22px;
-}
-
+<style>
 .el-pagination.is-background .el-pager li:not(.disabled).active {
   background-color: #31c27c;
   color: #fff;

src/views/musicLibrary/Ranking.vue

@@ -344,7 +344,7 @@ export default {
 };
 </script>
 
-<style >
+<style scoped>
 /*总体css*/
 #mian {
   padding-top: 60px;