From 2206d2b8a7a766722b0bd497eee2b7c57d4a5dda Mon Sep 17 00:00:00 2001
From: Zachary <zlj19971222@outlook.com>
Date: Fri, 19 Feb 2021 19:07:35 +0800
Subject: [PATCH] feat: add new album page

* fix some css bug
* imporve css
---
 src/assets/css/base.css                   |   8 +
 src/assets/css/fakeqqmusic.css            | 287 +++++++++++++-
 src/components/content/HomeTop.vue        |   3 +
 src/components/content/RecommendedBar.vue |   1 +
 src/views/musicLibrary/AlbumDetail.vue    | 435 ++++++++++++++++++++++
 src/views/musicLibrary/NewDisc.vue        |  13 +-
 src/views/musicLibrary/Ranking.vue        |   1 +
 src/views/musicLibrary/SongDetail.vue     | 269 -------------
 8 files changed, 744 insertions(+), 273 deletions(-)
 create mode 100644 src/views/musicLibrary/AlbumDetail.vue

diff --git a/src/assets/css/base.css b/src/assets/css/base.css
index f1b3dca..497408c 100644
--- a/src/assets/css/base.css
+++ b/src/assets/css/base.css
@@ -25,3 +25,11 @@ img {
   border: 0 none;
   /*image-rendering: optimizeQuality;*/
 }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+}
diff --git a/src/assets/css/fakeqqmusic.css b/src/assets/css/fakeqqmusic.css
index 33b3bc9..66567ee 100644
--- a/src/assets/css/fakeqqmusic.css
+++ b/src/assets/css/fakeqqmusic.css
@@ -399,14 +399,12 @@
   clear: both;
 }
 
-.songlist__item {
-  height: 80px;
-}
 .songlist__header,
 .songlist__item {
   padding-left: 122px;
 }
 .songlist__item {
+  height: 80px;
   clear: both;
   font-size: 0;
   overflow: hidden;
@@ -417,6 +415,9 @@
   padding-left: 122px;
   padding-right: 95px;
 }
+.songlist__item--even {
+  background-color: rgba(0, 0, 0, 0.01);
+}
 
 .songlist__album,
 .songlist__artist,
@@ -738,3 +739,283 @@ img .playlist__pic {
   text-overflow: ellipsis;
   height: 22px;
 }
+
+/*
+ *
+ *
+ *
+ *
+ *
+ *
+ * */
+.mod_data {
+  position: relative;
+  height: 250px;
+  padding-left: 305px;
+  margin-top: 40px;
+  margin-bottom: 35px;
+}
+.data__cover {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 250px;
+  height: 250px;
+}
+.data__cont {
+  padding-top: 13px;
+}
+.data__photo {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.data__name_txt {
+  float: left;
+  font-size: 31px;
+  line-height: 50px;
+  font-weight: 400;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 70%;
+  margin-right: 10px;
+}
+.data__name {
+  overflow: hidden;
+  height: 50px;
+  line-height: 50px;
+}
+.icon_singer {
+  float: left;
+  width: 16px;
+  height: 16px;
+  background-position: -20px -240px;
+  margin: 5px 7px 0 0;
+}
+.data__singer_txt {
+  font-size: 16px;
+  color: #333;
+}
+.data__info {
+  width: 450px;
+  overflow: hidden;
+  padding-top: 8px;
+}
+.data_info__item {
+  float: left;
+  line-height: 27px;
+  width: 166px;
+  margin-right: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+}
+.data_info__item--even {
+  width: 250px;
+}
+.data__actions {
+  position: absolute;
+  bottom: 23px;
+  font-size: 0;
+}
+
+.data__actions .mod_btn,
+.data__actions .mod_btn_green {
+  min-width: 122px;
+  text-align: center;
+  padding: 0 18px;
+  font-family: 微软雅黑;
+}
+.mod_btn_green {
+  border: 1px solid #31c27c;
+  background-color: #31c27c;
+  color: #fff;
+}
+.mod_btn {
+  border: 1px solid #c9c9c9;
+  color: #000;
+}
+.mod_btn,
+.mod_btn_green {
+  border-radius: 2px;
+  font-size: 14px;
+  margin-right: 6px;
+  padding: 0 23px;
+  height: 38px;
+  line-height: 38px;
+  display: inline-block;
+  white-space: nowrap;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+.mod_btn_green__icon_play {
+  width: 13px;
+  height: 16px;
+  background-position: -80px -220px;
+  vertical-align: -3px;
+}
+.mod_btn__icon_like {
+  width: 16px;
+  height: 16px;
+  background-position: -60px 0;
+  vertical-align: -4px;
+}
+.mod_btn__icon_comment {
+  width: 16px;
+  height: 16px;
+  background-position: -140px -120px;
+  vertical-align: -3px;
+}
+.mod_btn__icon_menu {
+  width: 16px;
+  height: 16px;
+  background-position: -20px -80px;
+}
+
+.detail_layout {
+  padding-right: 343px;
+}
+.detail_layout__main {
+  float: left;
+  width: 100%;
+  padding-bottom: 20px;
+}
+
+.detail_layout__other {
+  float: right;
+  position: relative;
+  width: 290px;
+  margin-right: -343px;
+  padding-bottom: 20px;
+}
+.other_part {
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+.other_part__tit {
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 46px;
+}
+.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;
+}
+.mod_playlist .playlist__cover {
+  position: relative;
+  display: block;
+  overflow: hidden;
+  padding-top: 100%;
+  margin-bottom: 15px;
+}
+.data__cover_mask {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 300px;
+  height: 266px;
+  background: url(https://y.gtimg.cn/mediastyle/yqq/img/album_cover.png?max_age=2592000&v=38b0c07edbf02967081562b016d3ef14)
+    0 0 no-repeat;
+  pointer-events: none;
+}
+.mod_playlist .playlist__pic {
+  height: 100%;
+  object-fit: cover;
+}
+.mod_playlist .playlist__pic {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.mod_playlist .playlist__title {
+  overflow: hidden;
+}
+.mod_playlist .playlist__title_txt {
+  float: left;
+  max-width: 100%;
+  font-weight: 400;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 22px;
+  max-height: 44px;
+}
+.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;
+}
+.mod_mv_list {
+  overflow: hidden;
+}
+.detail_layout__other .playlist__item {
+  width: 33.333333%;
+  padding-bottom: 14px;
+}
+.detail_layout__other .mv_list__item_box {
+  margin-right: 0;
+}
+.detail_layout__other .mv_list__cover,
+.detail_layout__other .playlist__cover {
+  margin-bottom: 4px;
+}
+.detail_layout__other .playlist__cover:hover .playlist__pic,
+.detail_layout__other .playlist__pic {
+  -webkit-transform: none;
+  -webkit-transition: none;
+  transform: none;
+  transition: none;
+}
+.detail_layout__other .mv_list__singer,
+.detail_layout__other .mv_list__title,
+.detail_layout__other .playlist__title,
+.detail_layout__other .playlist__title_txt {
+  line-height: 1.5;
+  margin-bottom: 0;
+}
+
+.mod_popup_tips {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  padding: 37px 46px 25px;
+  line-height: 22px;
+  border-radius: 3px;
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#B2000000', endColorstr='#B2000000');
+  background: rgba(0, 0, 0, 0.7);
+  z-index: 999;
+  text-align: center;
+}
+.popup_tips__icon {
+  display: block;
+  width: 46px;
+  height: 46px;
+  background-position: 0 -150px;
+  margin: 0 auto 16px;
+}
+.popup_tips__tit {
+  font-size: 14px;
+  color: #fff;
+  font-weight: 400;
+}
diff --git a/src/components/content/HomeTop.vue b/src/components/content/HomeTop.vue
index b5ac8c9..1304e2d 100644
--- a/src/components/content/HomeTop.vue
+++ b/src/components/content/HomeTop.vue
@@ -89,6 +89,9 @@ export default {
 </script>
 
 <style scoped>
+.list {
+  font-size: 31px;
+}
 .toplist_main {
   margin: 0 auto;
   text-align: center;
diff --git a/src/components/content/RecommendedBar.vue b/src/components/content/RecommendedBar.vue
index 880f861..d76635a 100644
--- a/src/components/content/RecommendedBar.vue
+++ b/src/components/content/RecommendedBar.vue
@@ -136,6 +136,7 @@ export default {
 .recommended_list {
   letter-spacing: 20px;
   text-align: center;
+  font-size: 31px;
 }
 .playlist {
   display: inline-block;
diff --git a/src/views/musicLibrary/AlbumDetail.vue b/src/views/musicLibrary/AlbumDetail.vue
new file mode 100644
index 0000000..caf2815
--- /dev/null
+++ b/src/views/musicLibrary/AlbumDetail.vue
@@ -0,0 +1,435 @@
+<template>
+  <div class="main">
+    <div
+      class="mod_data"
+      itemscope=""
+      itemtype="http://schema.org/MusicRecording"
+    >
+      <span class="data__cover">
+        <img
+          id="albumImg"
+          onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;"
+          :src="album.img"
+          :alt="album.name"
+          class="data__photo"
+        />
+        <i class="data__cover_mask"></i>
+      </span>
+      <div class="data__cont">
+        <div class="data__name">
+          <h1 class="data__name_txt" :title="album.name">{{ album.name }}</h1>
+        </div>
+
+        <div class="data__singer">
+          <i class="icon_singer sprite"></i
+          ><a
+            class="js_singer data__singer_txt"
+            itemprop="byArtist"
+            :title="album.artists"
+            >{{ album.artists }}</a
+          >
+        </div>
+
+        <ul class="data__info">
+          <li class="data_info__item">类型：{{ album.type }}</li>
+
+          <li class="data_info__item data_info__item--even">语种：国语</li>
+
+          <li class="data_info__item">发行时间：2021-02-13</li>
+
+          <li class="data_info__item data_info__item--even">
+            唱片公司：<span>{{ album.company }}</span>
+          </li>
+        </ul>
+
+        <div class="data__actions" role="toolbar">
+          <a class="mod_btn_green js_all_play"
+            ><i class="mod_btn_green__icon_play"></i>播放全部</a
+          >
+
+          <a
+            href="javascript:;"
+            class="mod_btn js_fav_album"
+            data-stat="y_new.album.header.love"
+            data-status="0"
+            ><i class="mod_btn__icon_like"></i>收藏</a
+          >
+          <a
+            class="mod_btn js_into_comment"
+            data-stat="y_new.album.gotocomment"
+            href="#comment_box"
+            ><i class="mod_btn__icon_comment"></i>评论(15)</a
+          >
+          <a
+            href="javascript:;"
+            class="mod_btn js_more"
+            data-mid="000QQkw74FD8iE"
+            data-id="17519496"
+            data-stat="y_new.album.header.more"
+            ><i class="mod_btn__icon_menu"></i>更多</a
+          >
+        </div>
+      </div>
+    </div>
+    <div class="detail_layout">
+      <div class="detail_layout__main">
+        <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" />
+            </li>
+            <li class="songlist__header_name">歌曲</li>
+            <li class="songlist__header_author">歌手</li>
+            <li class="songlist__header_time">时长</li>
+          </ul>
+
+          <ul class="songlist__list" id="song_box">
+            <li v-for="(song, idx) in songs" :key="song.id">
+              <div
+                class="songlist__item"
+                :claa="(idx + 1) % 2 == 0 ? 'songlist__item--even' : ''"
+              >
+                <div class="songlist__edit songlist__edit--check sprite">
+                  <input type="checkbox" class="songlist__checkbox" />
+                </div>
+                <div class="songlist__number">{{ idx + 1 }}</div>
+                <div class="songlist__songname">
+                  <!-- <i
+                    class="songlist__icon songlist__icon_exclusive sprite"
+                    title="独家"
+                  ></i> -->
+
+                  <span class="songlist__songname_txt">
+                    <a :title="song.name">{{ song.name }}</a>
+                  </span>
+                  <div class="mod_list_menu">
+                    <a
+                      class="list_menu__item list_menu__play js_play"
+                      title="播放"
+                    >
+                      <i class="list_menu__icon_play"></i>
+                      <span class="icon_txt">播放</span>
+                    </a>
+                    <a
+                      href="javascript:;"
+                      class="list_menu__item list_menu__add js_fav"
+                      title="添加到歌单"
+                      aria-haspopup="true"
+                      data-target="menu_add"
+                    >
+                      <i class="list_menu__icon_add"></i>
+                      <span class="icon_txt">添加到歌单</span>
+                    </a>
+
+                    <a
+                      href="javascript:;"
+                      class="list_menu__item list_menu__down js_down"
+                      title="下载"
+                      aria-haspopup="true"
+                      data-target="menu_down"
+                    >
+                      <i class="list_menu__icon_down"></i>
+                      <span class="icon_txt">下载</span>
+                    </a>
+
+                    <a
+                      href="javascript:;"
+                      class="list_menu__item list_menu__share js_share"
+                      title="分享"
+                      aria-haspopup="true"
+                      data-aria="menu_share"
+                    >
+                      <i class="list_menu__icon_share"></i>
+                      <span class="icon_txt">分享</span>
+                    </a>
+                  </div>
+                </div>
+                <div class="songlist__artist">
+                  <a :title="song.artistsText" class="singer_name">{{
+                    song.artistsText
+                  }}</a>
+                </div>
+                <div class="songlist__time">{{ song.durationText }}</div>
+                <div class="songlist__other"></div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div class="detail_layout__other">
+        <div class="mod_about" id="album_desc" style="display: ">
+          <h3 class="about__tit">简介</h3>
+          <div class="about__cont">
+            <p>{{ album.desc }}</p>
+          </div>
+          <!-- <a
+            href="javascript:;"
+            data-stat="y_new.album.moreinfo"
+            class="about__more"
+            data-left="0"
+            data-top="-187"
+            data-target="popup_data_detail"
+            style="display: "
+            >[更多]</a
+          > -->
+        </div>
+
+        <div class="other_part">
+          <h3 class="other_part__tit">此歌手的其他专辑</h3>
+          <div class="mod_playlist">
+            <ul class="playlist__list">
+              <li
+                class="playlist__item"
+                onmouseover="this.className=(this.className+' playlist__item--hover')"
+                onmouseout="this.className=this.className.replace(/ playlist__item--hover/, '')"
+              >
+                <div class="playlist__item_box">
+                  <div class="playlist__cover mod_cover">
+                    <a
+                      href="//y.qq.com/n/yqq/album/001ybzgu1cVjIO.html"
+                      class="js_album"
+                      data-stat="y_new.album.otheralbum.click"
+                      data-albummid="001ybzgu1cVjIO"
+                      data-albumid="7270497"
+                      ><img
+                        src="//y.gtimg.cn/music/photo_new/T002R90x90M000001ybzgu1cVjIO_1.jpg?max_age=2592000"
+                        onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;"
+                        alt="全职高手OST"
+                        class="playlist__pic" /><i
+                        class="mod_cover__icon_play js_play"
+                        data-stat="y_new.album.otheralbum.play"
+                      ></i
+                    ></a>
+                  </div>
+                  <h4 class="playlist__title">
+                    <span class="playlist__title_txt"
+                      ><a
+                        href="//y.qq.com/n/yqq/album/001ybzgu1cVjIO.html"
+                        class="js_album"
+                        data-stat="y_new.album.otheralbum.click"
+                        data-albummid="001ybzgu1cVjIO"
+                        data-albumid="7270497"
+                        title="全职高手OST"
+                        >全职高手OST</a
+                      ></span
+                    >
+                  </h4>
+                  <div class="playlist__author">2019-08-02</div>
+                </div>
+              </li>
+
+              <li
+                class="playlist__item"
+                onmouseover="this.className=(this.className+' playlist__item--hover')"
+                onmouseout="this.className=this.className.replace(/ playlist__item--hover/, '')"
+              >
+                <div class="playlist__item_box">
+                  <div class="playlist__cover mod_cover">
+                    <a
+                      href="//y.qq.com/n/yqq/album/000hweUb3m5RLy.html"
+                      class="js_album"
+                      data-stat="y_new.album.otheralbum.click"
+                      data-albummid="000hweUb3m5RLy"
+                      data-albumid="5984191"
+                      ><img
+                        src="//y.gtimg.cn/music/photo_new/T002R90x90M000000hweUb3m5RLy_1.jpg?max_age=2592000"
+                        onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;"
+                        alt="明日之后的你"
+                        class="playlist__pic" /><i
+                        class="mod_cover__icon_play js_play"
+                        data-stat="y_new.album.otheralbum.play"
+                      ></i
+                    ></a>
+                  </div>
+                  <h4 class="playlist__title">
+                    <span class="playlist__title_txt"
+                      ><a
+                        href="//y.qq.com/n/yqq/album/000hweUb3m5RLy.html"
+                        class="js_album"
+                        data-stat="y_new.album.otheralbum.click"
+                        data-albummid="000hweUb3m5RLy"
+                        data-albumid="5984191"
+                        title="明日之后的你"
+                        >明日之后的你</a
+                      ></span
+                    >
+                  </h4>
+                  <div class="playlist__author">2019-01-25</div>
+                </div>
+              </li>
+
+              <li
+                class="playlist__item"
+                onmouseover="this.className=(this.className+' playlist__item--hover')"
+                onmouseout="this.className=this.className.replace(/ playlist__item--hover/, '')"
+              >
+                <div class="playlist__item_box">
+                  <div class="playlist__cover mod_cover">
+                    <a
+                      href="//y.qq.com/n/yqq/album/001SMDDu4L2gbZ.html"
+                      class="js_album"
+                      data-stat="y_new.album.otheralbum.click"
+                      data-albummid="001SMDDu4L2gbZ"
+                      data-albumid="5863053"
+                      ><img
+                        src="//y.gtimg.cn/music/photo_new/T002R90x90M000001SMDDu4L2gbZ_1.jpg?max_age=2592000"
+                        onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;"
+                        alt="福气拱拱来"
+                        class="playlist__pic" /><i
+                        class="mod_cover__icon_play js_play"
+                        data-stat="y_new.album.otheralbum.play"
+                      ></i
+                    ></a>
+                  </div>
+                  <h4 class="playlist__title">
+                    <span class="playlist__title_txt"
+                      ><a
+                        href="//y.qq.com/n/yqq/album/001SMDDu4L2gbZ.html"
+                        class="js_album"
+                        data-stat="y_new.album.otheralbum.click"
+                        data-albummid="001SMDDu4L2gbZ"
+                        data-albumid="5863053"
+                        title="福气拱拱来"
+                        >福气拱拱来</a
+                      ></span
+                    >
+                  </h4>
+                  <div class="playlist__author">2019-01-15</div>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getAlbum } from "api";
+import { createSong } from "common/utils";
+
+export default {
+  data() {
+    return {
+      id: this.$route.query.id,
+      album: {},
+      songs: {},
+    };
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      getAlbum(this.id).then((res) => {
+        console.log(res);
+        let ds = res.data;
+        let album = {
+          id: ds.album.id,
+          name: ds.album.name,
+          img: ds.album.picUrl,
+          desc: ds.album.description,
+          artists: ds.album.artist.name,
+          type: ds.album.type,
+          version: ds.album.subType,
+          company: ds.album.company,
+          publishTime: ds.album.publishTime,
+        };
+        this.album = album;
+        console.log(album);
+        this.songs = ds.songs.map(
+          ({ id, name, ar, dt, al, mv, publishTime }) => {
+            return createSong({
+              id,
+              name,
+              artists: ar,
+              duration: dt,
+              albumName: al.name,
+              mvId: mv,
+              img: al.picUrl,
+            });
+          }
+        );
+        console.log(this.songs);
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.main {
+  z-index: 2;
+}
+.main,
+.section_inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  position: relative;
+}
+blockquote,
+body,
+button,
+dd,
+dl,
+dt,
+fieldset,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+html,
+input,
+li,
+ol,
+p,
+pre,
+td,
+textarea,
+th,
+ul {
+  margin: 0;
+  margin-right: 0px;
+  padding: 0;
+}
+
+.songlist__header {
+  background-color: #fbfbfd;
+}
+.songlist__header {
+  height: 50px;
+  line-height: 50px;
+  background-color: rgba(0, 0, 0, 0.01);
+  color: #999;
+}
+.songlist__header,
+.songlist__item {
+  position: relative;
+  padding-left: 46px;
+  padding-right: 95px;
+}
+
+.songlist__album,
+.songlist__artist,
+.songlist__number,
+.songlist__other,
+.songlist__time {
+  line-height: 50px;
+  height: 50px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+}
+
+.songlist__song_txt,
+.songlist__time {
+  color: #999;
+}
+</style>
diff --git a/src/views/musicLibrary/NewDisc.vue b/src/views/musicLibrary/NewDisc.vue
index d269f2b..01d0446 100644
--- a/src/views/musicLibrary/NewDisc.vue
+++ b/src/views/musicLibrary/NewDisc.vue
@@ -43,7 +43,12 @@
               </div>
               <h4 class="playlist__title">
                 <span class="playlist__title_txt">
-                  <a class="js_album" :title="album.name">{{ album.name }}</a>
+                  <a
+                    class="js_album"
+                    :title="album.name"
+                    @click="gotoAlbumDetail(album.id)"
+                    >{{ album.name }}</a
+                  >
                 </span>
               </h4>
 
@@ -122,6 +127,12 @@ export default {
       console.log(v);
       this.page = v;
     },
+    gotoAlbumDetail(id) {
+      this.$router.push({
+        path: "/musicLibrary/albumDetail",
+        query: { id: id },
+      });
+    },
   },
   watch: {
     page(newPage) {
diff --git a/src/views/musicLibrary/Ranking.vue b/src/views/musicLibrary/Ranking.vue
index 99247ee..1a48450 100644
--- a/src/views/musicLibrary/Ranking.vue
+++ b/src/views/musicLibrary/Ranking.vue
@@ -131,6 +131,7 @@
           <li v-for="(song, idx) in listDatas" :key="song.id" :id="song.id">
             <div
               class="songlist__item"
+              :class="idx % 2 == 0 ? 'songlist__item--even' : ''"
               onmouseover="this.className=(this.className+' songlist__item--hover')"
               onmouseout="this.className=this.className.replace(/ songlist__item--hover/, '')"
             >
diff --git a/src/views/musicLibrary/SongDetail.vue b/src/views/musicLibrary/SongDetail.vue
index c027405..0352fad 100644
--- a/src/views/musicLibrary/SongDetail.vue
+++ b/src/views/musicLibrary/SongDetail.vue
@@ -340,149 +340,7 @@ ul {
   margin-right: 0px;
   padding: 0;
 }
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: 100%;
-}
-
-.mod_data {
-  position: relative;
-  height: 250px;
-  padding-left: 305px;
-  margin-top: 40px;
-  margin-bottom: 35px;
-}
-.data__cover {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 250px;
-  height: 250px;
-}
-.data__cont {
-  padding-top: 13px;
-}
-.data__photo {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-.data__name {
-  overflow: hidden;
-  height: 50px;
-  line-height: 50px;
-}
-.data__name_txt {
-  float: left;
-  font-size: 31px;
-  line-height: 50px;
-  font-weight: 400;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 70%;
-  margin-right: 10px;
-}
-.icon_singer {
-  float: left;
-  width: 16px;
-  height: 16px;
-  background-position: -20px -240px;
-  margin: 5px 7px 0 0;
-}
-.data__singer_txt {
-  font-size: 16px;
-  color: #333;
-}
-.data__info {
-  width: 450px;
-  overflow: hidden;
-  padding-top: 8px;
-}
-.data_info__item {
-  float: left;
-  line-height: 27px;
-  width: 166px;
-  margin-right: 10px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 14px;
-}
-.data_info__item--even {
-  width: 250px;
-}
-.data__actions {
-  position: absolute;
-  bottom: 23px;
-  font-size: 0;
-}
-
-.data__actions .mod_btn,
-.data__actions .mod_btn_green {
-  min-width: 122px;
-  text-align: center;
-  padding: 0 18px;
-  font-family: 微软雅黑;
-}
-.mod_btn_green {
-  border: 1px solid #31c27c;
-  background-color: #31c27c;
-  color: #fff;
-}
-.mod_btn {
-  border: 1px solid #c9c9c9;
-  color: #000;
-}
-.mod_btn,
-.mod_btn_green {
-  border-radius: 2px;
-  font-size: 14px;
-  margin-right: 6px;
-  padding: 0 23px;
-  height: 38px;
-  line-height: 38px;
-  display: inline-block;
-  white-space: nowrap;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-.mod_btn_green__icon_play {
-  width: 13px;
-  height: 16px;
-  background-position: -80px -220px;
-  vertical-align: -3px;
-}
-.mod_btn__icon_like {
-  width: 16px;
-  height: 16px;
-  background-position: -60px 0;
-  vertical-align: -4px;
-}
-.mod_btn__icon_comment {
-  width: 16px;
-  height: 16px;
-  background-position: -140px -120px;
-  vertical-align: -3px;
-}
-.mod_btn__icon_menu {
-  width: 16px;
-  height: 16px;
-  background-position: -20px -80px;
-}
 
-.detail_layout {
-  padding-right: 343px;
-}
-.detail_layout__main {
-  float: left;
-  width: 100%;
-  padding-bottom: 20px;
-}
 .lyric__hd {
   overflow: hidden;
   line-height: 46px;
@@ -520,131 +378,4 @@ h6 {
 .c_tx_highlight {
   color: #31c27c;
 }
-
-.detail_layout__other {
-  float: right;
-  position: relative;
-  width: 290px;
-  margin-right: -343px;
-  padding-bottom: 20px;
-}
-.other_part {
-  overflow: hidden;
-  margin-bottom: 10px;
-}
-.other_part__tit {
-  font-size: 20px;
-  font-weight: 400;
-  line-height: 46px;
-}
-.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;
-}
-.mod_playlist .playlist__cover {
-  position: relative;
-  display: block;
-  overflow: hidden;
-  padding-top: 100%;
-  margin-bottom: 15px;
-}
-.mod_playlist .playlist__pic {
-  height: 100%;
-  object-fit: cover;
-}
-.mod_playlist .playlist__pic {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-}
-.mod_playlist .playlist__title {
-  overflow: hidden;
-}
-.mod_playlist .playlist__title_txt {
-  float: left;
-  max-width: 100%;
-  font-weight: 400;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  line-height: 22px;
-  max-height: 44px;
-}
-.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;
-}
-.mod_mv_list {
-  overflow: hidden;
-}
-.detail_layout__other .playlist__item {
-  width: 33.333333%;
-  padding-bottom: 14px;
-}
-.detail_layout__other .mv_list__item_box {
-  margin-right: 0;
-}
-.detail_layout__other .mv_list__cover,
-.detail_layout__other .playlist__cover {
-  margin-bottom: 4px;
-}
-.detail_layout__other .playlist__cover:hover .playlist__pic,
-.detail_layout__other .playlist__pic {
-  -webkit-transform: none;
-  -webkit-transition: none;
-  transform: none;
-  transition: none;
-}
-.detail_layout__other .mv_list__singer,
-.detail_layout__other .mv_list__title,
-.detail_layout__other .playlist__title,
-.detail_layout__other .playlist__title_txt {
-  line-height: 1.5;
-  margin-bottom: 0;
-}
-
-.mod_popup_tips {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  padding: 37px 46px 25px;
-  line-height: 22px;
-  border-radius: 3px;
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#B2000000', endColorstr='#B2000000');
-  background: rgba(0, 0, 0, 0.7);
-  z-index: 999;
-  text-align: center;
-}
-.popup_tips__icon {
-  display: block;
-  width: 46px;
-  height: 46px;
-  background-position: 0 -150px;
-  margin: 0 auto 16px;
-}
-.popup_tips__tit {
-  font-size: 14px;
-  color: #fff;
-  font-weight: 400;
-}
 </style>
-- 
GitLab