update: imporve css and components

src/assets/css/base.scss

@@ -5,6 +5,9 @@ html {
   line-height: 1.5;
 }
 
+button {
+  cursor: pointer;
+}
 a,
 a * {
   cursor: pointer;

src/assets/css/fakeqqmusic.scss

@@ -25,6 +25,12 @@ $black: #000;
   position: relative;
 }
 
+.mod_search {
+  position: relative;
+  height: 247px;
+  background-position: 50%;
+  background-size: cover;
+}
 .mod_btn {
   border: 1px solid #c9c9c9;
   color: $black;
@@ -52,6 +58,11 @@ $black: #000;
   box-sizing: border-box;
   overflow: hidden;
 }
+.mod_btn__icon_play {
+  width: 13px;
+  height: 16px;
+  background-position: -60px -220px;
+}
 .mod_btn_green__icon_play {
   width: 13px;
   height: 16px;
@@ -233,29 +244,6 @@ $black: #000;
   }
 }
 
-/* **************
- * 歌手列表 css */
-.singer_list_txt {
-  margin-right: -20px;
-  overflow: hidden;
-  margin-bottom: 60px;
-}
-
-.singer_list_txt__item {
-  float: left;
-  width: 20%;
-}
-
-.singer_list_txt__link {
-  float: left;
-  max-width: 90%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 14px;
-  line-height: 36px;
-}
-
 /* **********
  * 伸缩按钮 */
 .mod_slide_action {
@@ -1063,6 +1051,13 @@ $black: #000;
   }
 }
 
+.mod_lyric_list,
+.mod_mv_list,
+.mod_playlist_text,
+.mod_songlist {
+  padding-bottom: 40px;
+}
+
 .mod_playlist .playlist__cover:hover .playlist__pic {
   transform: scale(1.07) translateZ(0);
   transition: transform 0.75s cubic-bezier(0, 1, 0.75, 1);
@@ -1350,6 +1345,38 @@ img .playlist__pic {
 .songlist__song_txt {
   margin-left: 10px;
 }
+
+.singer_list__item {
+  position: relative;
+  height: 80px;
+  display: table;
+  width: 100%;
+  .singer_list__title {
+    width: 40%;
+    min-width: 280px;
+    font-weight: 400;
+    text-indent: 20px;
+    overflow: hidden;
+    line-height: 80px;
+    padding-left: 20px;
+    font-size: 0;
+  }
+  .singer_list__pic {
+    height: 100%;
+    object-fit: cover;
+    display: block;
+    width: 100%;
+    min-height: 50px;
+    border-radius: 50%;
+  }
+  .singer_list__cover {
+    position: relative;
+    float: left;
+    width: 60px;
+    height: 60px;
+    margin-top: 10px;
+  }
+}
 .singer_list__cover {
   margin-left: auto;
   margin-right: auto;
@@ -1361,13 +1388,6 @@ img .playlist__pic {
   height: 140px;
   border-radius: 126px;
 }
-.singer_list__cover,
-.singer_list__pic {
-  display: block;
-  width: 140px;
-  height: 140px;
-  border-radius: 126px;
-}
 .singer_list__title {
   font-size: 16px;
   font-weight: 400;
@@ -1378,6 +1398,74 @@ img .playlist__pic {
   *width: 100%;
   margin: 20px 30px 4px;
 }
+.singer_list__user_txt {
+  color: #999;
+}
+
+/* 搜索用户界面 */
+.singer_list__title_txt {
+  float: left;
+  max-width: 310px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+}
+.singer_list__count,
+.singer_list__other,
+.singer_list__playlist,
+.singer_list__title {
+  display: table-cell;
+  height: 80px;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+.singer_list__playlist,
+.singer_list__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+}
+.singer_list__playlist {
+  width: 22%;
+  padding-left: 20px;
+}
+.singer_list__count {
+  width: 22%;
+  padding-left: 15px;
+}
+.singer_list__other {
+  width: 122px;
+}
+.singer_list__btn_focus {
+  display: block;
+  width: 122px;
+  text-align: center;
+  margin-right: 20px;
+}
+
+/* **************
+ * 歌手列表 css */
+.singer_list_txt {
+  margin-right: -20px;
+  overflow: hidden;
+  margin-bottom: 60px;
+}
+
+.singer_list_txt__item {
+  float: left;
+  width: 20%;
+}
+
+.singer_list_txt__link {
+  float: left;
+  max-width: 90%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+  line-height: 36px;
+}
 
 /*
  *

src/components/common/ShowAlbums.vue → src/components/common/DetailLists.vue

 <template>
-  <div
-    class="js_search_tab_cont search_tab_cont"
-    id="album_box"
-    style="display: block"
-  >
+  <div class="js_search_tab_cont search_tab_cont" style="display: block">
     <div class="mod_playlist_text">
       <ul class="playlist__header">
-        <li class="playlist__header_name">专辑</li>
-        <li class="playlist__header_author">歌手</li>
-        <li class="playlist__header_other">发行时间</li>
+        <li class="playlist__header_name">{{ titles[kind][0] }}</li>
+        <li class="playlist__header_author">{{ titles[kind][1] }}</li>
+        <li class="playlist__header_other">{{ titles[kind][2] }}</li>
       </ul>
       <ul class="playlist__list">
-        <li class="playlist__item" v-for="album in albums" :key="album.id">
+        <li class="playlist__item" v-for="l in lists" :key="l.id">
           <div class="playlist__cover" style="visibility: visible">
             <a class="js_album"
               ><img
                 class="playlist__pic"
                 style="display: block; visibility: visible"
                 onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;"
-                :alt="album.name"
-                :src="album.img"
+                :alt="l.name"
+                :src="l.img"
             /></a>
           </div>
           <h4 class="playlist__title">
-            <span class="playlist__title_txt"
-              ><a class="js_album" :title="album.name">{{
-                album.name
-              }}</a></span
-            >
+            <span class="playlist__title_txt">
+              <a class="js_album" :title="l.name">{{ l.name }}</a>
+            </span>
           </h4>
           <div class="playlist__author">
-            <a class="js_singer" :title="album.artistsText">{{
-              album.artistsText
+            <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">{{
+              l.creatorName
+            }}</a>
+          </div>
+          <div class="playlist__other" v-if="kind == 0">
+            {{ l.publishTime }}
+          </div>
+          <div class="playlist__other" v-else-if="kind == 1">
+            {{ l.playCount }}
           </div>
-          <div class="playlist__other">{{ album.publishTime }}</div>
         </li>
       </ul>
     </div>
@@ -43,11 +45,21 @@
 
 <script>
 export default {
+  data() {
+    return {
+      titles: {
+        0: ["专辑", "歌手", "发行时间"],
+        1: ["歌单", "创建人", "播放量"],
+      },
+    };
+  },
   props: {
-    albums: {
+    lists: {
       type: Array,
       default: [],
     },
+    // 0: album, 1: playlist
+    kind: { default: 0 },
   },
 };
 </script>

src/components/common/ShowPlaylist.vue

-<template>
-  <div
-    class="js_search_tab_cont search_tab_cont"
-    id="playlist_box"
-    style="display: block"
-  >
-    <div class="mod_playlist_text">
-      <ul class="playlist__header">
-        <li class="playlist__header_name">歌单</li>
-        <li class="playlist__header_author">创建人</li>
-        <li class="playlist__header_other">播放量</li>
-      </ul>
-      <ul class="playlist__list">
-        <li
-          class="playlist__item"
-          v-for="playlist in playlists"
-          :key="playlist.id"
-        >
-          <div class="playlist__cover" style="visibility: visible">
-            <a class="js_playlist"
-              ><img
-                class="playlist__pic"
-                style="display: block; visibility: visible"
-                onerror="this.src='//y.gtimg.cn/mediastyle/global/img/playlist_300.png?max_age=31536000';this.onerror=null;"
-                :src="playlist.img"
-                :alt="playlist.name"
-            /></a>
-          </div>
-          <h4 class="playlist__title">
-            <span class="playlist__title_txt"
-              ><a class="js_playlist" :title="playlist.name">{{
-                playlist.name
-              }}</a></span
-            >
-          </h4>
-          <div class="playlist__author">
-            <a class="js_user" title="playlist.creatorName">{{
-              playlist.creatorName
-            }}</a>
-          </div>
-          <div class="playlist__other">{{ playlist.playCount }}</div>
-        </li>
-      </ul>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    playlists: {
-      type: Array,
-      default: [],
-    },
-  },
-};
-</script>
-
-<style scoped>
-.mod_playlist_text {
-  zoom: 1;
-  font-size: 14px;
-}
-.mod_lyric_list,
-.mod_mv_list,
-.mod_playlist_text,
-.mod_songlist {
-  padding-bottom: 40px;
-}
-.mod_playlist_text .playlist__header {
-  height: 50px;
-  line-height: 50px;
-  background-color: #fbfbfd;
-  color: #999;
-}
-.mod_playlist_text .playlist__author,
-.mod_playlist_text .playlist__header_author,
-.mod_playlist_text .playlist__header_name,
-.mod_playlist_text .playlist__header_number,
-.mod_playlist_text .playlist__number {
-  float: left;
-  padding-left: 20px;
-}
-.mod_playlist_text .playlist__header_name {
-  width: 57%;
-}
-.mod_playlist_text .playlist__author,
-.mod_playlist_text .playlist__header_author {
-  width: 30%;
-}
-.mod_playlist_text .playlist__header_other,
-.mod_playlist_text .playlist__other {
-  width: 7.5%;
-}
-.mod_playlist_text .playlist__header_other,
-.mod_playlist_text .playlist__other {
-  float: right;
-  padding-right: 20px;
-  text-align: right;
-}
-.mod_playlist_text .playlist__item {
-  position: relative;
-  height: 70px;
-  line-height: 70px;
-  zoom: 1;
-  overflow: hidden;
-  clear: both;
-  font-size: 0;
-}
-.mod_playlist_text .playlist__cover {
-  float: left;
-  width: 50px;
-  height: 50px;
-  overflow: hidden;
-  margin-top: 10px;
-  padding-left: 20px;
-}
-.mod_playlist_text .playlist__pic {
-  height: 100%;
-  object-fit: cover;
-}
-.mod_playlist_text .playlist__pic {
-  display: block;
-  width: 100%;
-  min-height: 50px;
-}
-.mod_playlist_text .playlist__author,
-.mod_playlist_text .playlist__number,
-.mod_playlist_text .playlist__other,
-.mod_playlist_text .playlist__title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 14px;
-}
-.mod_playlist_text .playlist__title {
-  width: 52.66667%;
-  font-weight: 400;
-  text-indent: 15px;
-  overflow: hidden;
-}
-.mod_playlist_text .playlist__title_txt {
-  float: left;
-  max-width: 90%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.mod_playlist_text .playlist__author,
-.mod_playlist_text .playlist__count,
-.mod_playlist_text .playlist__number,
-.mod_playlist_text .playlist__title {
-  float: left;
-  height: 70px;
-}
-.mod_playlist_text .playlist__author,
-.mod_playlist_text .playlist__header_author {
-  width: 30%;
-}
-.mod_playlist_text .playlist__author,
-.mod_playlist_text .playlist__number,
-.mod_playlist_text .playlist__other,
-.mod_playlist_text .playlist__title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 14px;
-}
-</style>

src/views/musicLibrary/SearchResultDetail.vue

@@ -21,11 +21,15 @@
         <!-- song -->
         <show-songs :songs="songs" v-if="selectedType == 1" />
         <!-- album -->
-        <show-albums :albums="albums" v-if="selectedType == 10" />
+        <detail-lists :lists="albums" v-if="selectedType == 10" />
         <!-- mv -->
         <show-mvs :mvs="mvs" v-if="selectedType == 1004" />
         <!-- playlist -->
-        <show-playlist :playlists="playlists" v-if="selectedType == 1000" />
+        <detail-lists
+          :lists="playlists"
+          :kind="1"
+          v-if="selectedType == 1000"
+        />
         <!-- user -->
         <div
           class="js_search_tab_cont search_tab_cont"
@@ -83,10 +87,9 @@
 
 <script>
 import ShowSongs from "components/common/ShowSongs";
-import ShowAlbums from "components/common/ShowAlbums";
 import ShowMvs from "components/common/ShowMvs";
-import ShowPlaylist from "components/common/ShowPlaylist";
 import ShowLyrics from "components/common/ShowLyrics";
+import DetailLists from "components/common/DetailLists";
 import ModListMenu from "components/common/ModListMenu";
 import { getSearchResult } from "api";
 import {
@@ -151,30 +154,19 @@ export default {
   },
   components: {
     ShowSongs,
-    ShowAlbums,
     ShowMvs,
-    ShowPlaylist,
     ShowLyrics,
+    DetailLists,
     ModListMenu,
   },
 };
 </script>
 
 <style scoped>
-button,
-dd,
 dl,
 dt,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
 li,
 ol,
-p,
 pre,
 td,
 th,
@@ -182,139 +174,6 @@ ul {
   margin: 0;
   padding: 0;
 }
-.mod_search {
-  position: relative;
-  height: 247px;
-  background-position: 50%;
-  background-size: cover;
-}
-.icon_txt {
-  font: 0/0 a;
-}
-button {
-  cursor: pointer;
-}
-
-.mod_tab {
-  position: relative;
-  zoom: 1;
-  border-bottom: 1px solid #f7f7f7;
-  margin-bottom: 30px;
-}
-.mod_tab,
-.mod_tab__item {
-  height: 56px;
-  line-height: 56px;
-}
-.mod_tab__current {
-  color: #31c27c;
-}
-.mod_tab__item {
-  position: relative;
-  float: left;
-  font-size: 16px;
-  overflow: hidden;
-  margin-right: 55px;
-}
-.mod_tab,
-.mod_tab__item {
-  height: 56px;
-  line-height: 56px;
-}
-
-.mod_btn__icon_play {
-  width: 13px;
-  height: 16px;
-  background-position: -60px -220px;
-}
-
-.mod_playlist_text {
-  zoom: 1;
-  font-size: 14px;
-}
-.mod_lyric_list,
-.mod_mv_list,
-.mod_playlist_text,
-.mod_songlist {
-  padding-bottom: 40px;
-}
-
-.singer_list__item {
-  position: relative;
-  height: 80px;
-  display: table;
-  width: 100%;
-}
-.singer_list__title {
-  width: 40%;
-  min-width: 280px;
-  font-weight: 400;
-  text-indent: 20px;
-  overflow: hidden;
-  line-height: 80px;
-  padding-left: 20px;
-  font-size: 0;
-}
-.singer_list__cover {
-  position: relative;
-  float: left;
-  width: 60px;
-  height: 60px;
-  margin-top: 10px;
-}
-.singer_list__pic {
-  height: 100%;
-  object-fit: cover;
-}
-.singer_list__pic {
-  display: block;
-  width: 100%;
-  min-height: 50px;
-  border-radius: 50%;
-}
-.singer_list__title_txt {
-  float: left;
-  max-width: 310px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 14px;
-}
-.singer_list__user_txt {
-  color: #999;
-}
-.singer_list__count,
-.singer_list__other,
-.singer_list__playlist,
-.singer_list__title {
-  display: table-cell;
-  height: 80px;
-  vertical-align: middle;
-  box-sizing: border-box;
-}
-.singer_list__playlist,
-.singer_list__title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 14px;
-}
-.singer_list__playlist {
-  width: 22%;
-  padding-left: 20px;
-}
-.singer_list__count {
-  width: 22%;
-  padding-left: 15px;
-}
-.singer_list__other {
-  width: 122px;
-}
-.singer_list__btn_focus {
-  display: block;
-  width: 122px;
-  text-align: center;
-  margin-right: 20px;
-}
 
 .mod_btn,
 .mod_btn_green {

src/views/my/Like.vue

@@ -14,8 +14,8 @@
       >
     </div>
     <div class="profile_cont">
-      <show-playlist :playlists="playlists" v-if="selected == '歌单'" />
-      <show-albums :albums="albums" v-if="selected == '专辑'" />
+      <detail-lists :lists="playlists" :kind="1" v-if="selected == '歌单'" />
+      <detail-lists :lists="albums" v-if="selected == '专辑'" />
       <show-mvs :mvs="mvs" v-if="selected == '视频'" />
     </div>
   </div>
@@ -23,8 +23,7 @@
 
 
 <script>
-import ShowPlaylist from "components/common/ShowPlaylist";
-import ShowAlbums from "components/common/ShowAlbums";
+import DetailLists from "components/common/DetailLists";
 import ShowMvs from "components/common/ShowMvs";
 import { getUserPlaylists, getCollectedAlbum, getCollectedMvs } from "api";
 import { createPlaylists, createAlbums, createMvs } from "common/utils";
@@ -77,8 +76,7 @@ export default {
     },
   },
   components: {
-    ShowPlaylist,
-    ShowAlbums,
+    DetailLists,
     ShowMvs,
   },
 };