From 488c818a02d10a0e4f60a18a470ccc003e6c5b01 Mon Sep 17 00:00:00 2001
From: Zachary <zlj19971222@outlook.com>
Date: Thu, 11 Feb 2021 18:35:08 +0800
Subject: [PATCH] feat: add songer simple detail page

---
 src/App.vue                             |   1 +
 src/api/index.js                        |   2 +
 src/assets/css/base.css                 |  10 +
 src/router/index.js                     |   4 +-
 src/views/musicLibrary/SongerDetail.vue | 297 ++++++++++++++++++++++++
 src/views/musicLibrary/Songers.vue      | 129 +++++-----
 6 files changed, 376 insertions(+), 67 deletions(-)
 create mode 100644 src/assets/css/base.css
 create mode 100644 src/views/musicLibrary/SongerDetail.vue

diff --git a/src/App.vue b/src/App.vue
index 0755821..0ba26cd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,6 +15,7 @@ export default {
 
 <style lang="scss">
 @import "./assets/css/coustom.css";
+@import "./assets/css/base.css";
 
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;
diff --git a/src/api/index.js b/src/api/index.js
index 7935b28..916b3e0 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -13,3 +13,5 @@ export const getSongers = (initial, type, area, page) => {
   };
   return requset.get("/artist/list", { params: params });
 };
+
+export const getUserDetail = id => requset.get(`/user/detail?uid=${id}`);
diff --git a/src/assets/css/base.css b/src/assets/css/base.css
new file mode 100644
index 0000000..3bf4ab0
--- /dev/null
+++ b/src/assets/css/base.css
@@ -0,0 +1,10 @@
+body,
+html {
+  padding: 0;
+  margin: 0;
+}
+
+a {
+  color: #000;
+  text-decoration: none;
+}
diff --git a/src/router/index.js b/src/router/index.js
index cd6be1f..9d21699 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,7 @@ const Ranking = () => import("views/musicLibrary/Ranking");
 const Classified = () => import("views/musicLibrary/Classified");
 const Radions = () => import("views/musicLibrary/Radions");
 const MV = () => import("views/musicLibrary/MV");
+const SongerDetail = () => import("views/musicLibrary/SongerDetail");
 
 const My = () => import("views/My");
 
@@ -27,7 +28,8 @@ const routes = [
       { path: "ranking", component: Ranking },
       { path: "classified", component: Classified },
       { path: "radions", component: Radions },
-      { path: "mv", component: MV }
+      { path: "mv", component: MV },
+      { path: "songer-detail", name: "songer-detail", component: SongerDetail }
     ]
   },
   {
diff --git a/src/views/musicLibrary/SongerDetail.vue b/src/views/musicLibrary/SongerDetail.vue
new file mode 100644
index 0000000..67122d7
--- /dev/null
+++ b/src/views/musicLibrary/SongerDetail.vue
@@ -0,0 +1,297 @@
+<template>
+
+<div class="g-bd">
+  <div class="g-wrap p-prf">
+    <dl class="m-proifo f-cb" id="head-box">
+      <dt class="f-pr" id="ava">
+        <img :src="userObj.profile.avatarUrl">
+      </dt>
+      <dd>
+        <div class="name f-cb">
+          <div class="f-cb">
+            <h2 id="j-name-wrap" class="wrap f-fl f-cb wrap-3">
+              <span class="tit f-ff2 s-fc0 f-thide">{{userObj.profile.artistName}}</span>
+            </h2>
+          </div>
+          <p class="djp f-fs1 s-fc3">{{userObj.identify.imageDesc}}</p>
+        </div>
+        <ul class="data s-fc3 f-cb" id="tab-box">
+          <li class="fst">
+            <a href="/user/event?id=97137413">
+              <strong id="event_count">{{userObj.profile.eventCount}}</strong>
+              <span>动态</span>
+            </a>
+          </li>
+          <li>
+            <a href="/user/follows?id=97137413">
+            <strong id="follow_count">{{userObj.profile.follows}}</strong>
+            <span>关注</span>
+            </a>
+          </li>
+          <li>
+            <a href="/user/fans?id=97137413">
+              <strong id="fan_count">{{userObj.profile.followeds}}</strong>
+              <span>粉丝</span>
+            </a>
+          </li>
+        </ul>
+        <div class="inf s-fc3">
+          <span>签名：{{userObj.profile.signature}} </span>
+        </div>
+      </dd>
+    </dl>
+  </div>
+</div>
+
+</template>
+
+<script>
+import { getUserDetail } from 'api';
+
+export default {
+  data() {
+    return {
+      activeName: 'first',
+      id: this.$route.query.id,
+      accountId: this.$route.query.accountId,
+      userObj: null,
+    };
+  },
+  created() {
+    getUserDetail(this.accountId).then(res => {
+          console.log(res)
+          this.userObj = res.data
+        })
+
+  },
+  methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    }
+  }
+  
+}
+</script>
+
+<style scoped>
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+ul,
+ol,
+li,
+dl,
+dt,
+dd,
+header,
+menu,
+section,
+p,
+input,
+td,
+th,
+ins {
+  padding: 0;
+  margin: 0;
+}
+
+.g-bd,
+.g-bd1,
+.g-bd2,
+.g-bd3,
+.g-bd4,
+.g-bd5,
+.g-bd6,
+.g-bd7 {
+  width: 980px;
+  min-height: 700px;
+  _height: 700px;
+  margin: 0 auto;
+  background-color: #fff;
+  border: 1px solid #d3d3d3;
+  border-width: 0 1px;
+}
+
+.g-wrap {
+  padding: 40px;
+}
+
+.m-proifo {
+  margin-bottom: 43px;
+}
+
+.m-proifo dt {
+  float: left;
+  width: 188px;
+  margin-right: 40px;
+}
+
+.f-pr {
+  position: relative;
+  zoom: 1;
+}
+
+.m-proifo dt img {
+  display: block;
+  width: 180px;
+  height: 180px;
+  padding: 3px;
+  background: #fff;
+  border: 1px solid #d5d5d5;
+}
+
+.m-proifo dd {
+  float: left;
+  width: 670px;
+}
+
+.m-proifo .name {
+  padding-bottom: 12px;
+  margin-bottom: 10px;
+  border-bottom: 1px solid #ddd;
+}
+
+.m-proifo .name .wrap {
+  padding-bottom: 3px;
+}
+
+.f-fl {
+  float: left;
+}
+
+.m-proifo .name .wrap-3 .tit {
+  max-width: 260px;
+}
+
+.m-proifo .name .tit {
+  float: left;
+  margin-top: 3px;
+  font-size: 22px;
+  font-weight: normal;
+  line-height: 30px;
+}
+
+.s-fc0,
+a.s-fc0:hover {
+  color: #000;
+}
+
+.f-thide {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+}
+
+.f-ff2 {
+  font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
+}
+
+.m-proifo .name .btn {
+  float: left;
+  margin: 4px 0 0 15px;
+}
+
+.u-btn-6,
+.u-btn-ygz {
+  width: 70px;
+  height: 31px;
+  background-position: 0 -919px;
+}
+
+.u-btn {
+  display: inline-block;
+}
+
+.u-btn-5 {
+  width: 81px;
+  height: 31px;
+  background-position: 0 -955px;
+}
+
+.u-btn-8 {
+  width: 40px;
+  height: 31px;
+  padding-left: 30px;
+  background-position: 0 -720px;
+  color: #fff;
+  line-height: 30px;
+}
+
+.m-proifo .name .djp:first-of-type {
+  margin-top: 8px;
+}
+
+.m-proifo .name .djp {
+  margin-top: 6px;
+  line-height: 20px;
+  float: left;
+}
+
+.f-fs1 {
+  font-size: 14px;
+}
+
+.m-proifo .data {
+  height: 41px;
+  margin-bottom: 15px;
+}
+
+.m-proifo .data a {
+  display: inline-block;
+  *display: inline;
+  position: relative;
+  zoom: 1;
+  color: #666;
+}
+
+.m-proifo .data a:hover {
+  color: #31c27c;
+}
+
+.m-proifo .data strong {
+  display: block;
+  margin-top: -4px;
+  font-size: 24px;
+  font-weight: normal;
+  cursor: pointer;
+}
+
+.m-proifo .data .fst {
+  padding-left: 0;
+  border-left: none;
+}
+
+.m-proifo .data li {
+  float: left;
+  padding: 0 40px 0 20px;
+  border-left: 1px solid #ddd;
+}
+
+.f-cb::after {
+  clear: both;
+  content: ".";
+  display: block;
+  height: 0;
+  visibility: hidden;
+}
+
+.m-proifo .inf {
+  margin-bottom: 5px;
+  line-height: 21px;
+  float: left;
+  font-size: 12px;
+}
+
+li,
+s {
+  list-style: none;
+}
+
+a {
+  color: #333;
+}
+</style>
diff --git a/src/views/musicLibrary/Songers.vue b/src/views/musicLibrary/Songers.vue
index 557c182..d743c4b 100644
--- a/src/views/musicLibrary/Songers.vue
+++ b/src/views/musicLibrary/Songers.vue
@@ -39,9 +39,10 @@
 
   <ul class="singer_list_txt">
     <li class="singer_list_txt__item" v-for="item in artists" :key="item.id">
-      <a href="javascript:;"
+      <router-link href="javascript:;"
          class="singer_list_txt__link js_singer"
-         title="item.name">{{item.name}}</a>
+         :to="{name: 'songer-detail', query: {id: item.id, accountId: item.accountId}}"
+         title="item.name">{{item.name}}</router-link>
     </li>
   </ul>
 </div>
@@ -161,77 +162,73 @@ export default {
 </script>
 
 <style scoped>
-  .main {
-      z-index: 2;
-  }
-  .main, .section_inner {
-      max-width: 1200px;
-      margin: 0 auto;
-      position: relative;
-  }
-  .mod_singer_tag {
-    background-color: #fbfbfd;
-    padding: 34px 0 17px 40px;
-    margin: 30px 0 20px;
-  }
-
-  .singer_tag__list {
-    padding-bottom: 3px;
-    height: auto;
-    clear: both;
-    overflow: hidden;
-  }
-
-  .singer_tag__item--select, .singer_tag__item--select:hover {
-      background-color: #31c27c;
-      color: #fff;
-  }
+.main {
+  z-index: 2;
+}
+.main,
+.section_inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  position: relative;
+}
+.mod_singer_tag {
+  background-color: #fbfbfd;
+  padding: 34px 0 17px 40px;
+  margin: 30px 0 20px;
+}
 
-  .singer_tag__item--all {
-      margin-right: 28px;
-  }
+.singer_tag__list {
+  padding-bottom: 3px;
+  height: auto;
+  clear: both;
+  overflow: hidden;
+}
 
-  .singer_tag__item {
-      height: 26px;
-      line-height: 27px;
-      overflow: hidden;
-  }
+.singer_tag__item--select,
+.singer_tag__item--select:hover {
+  background-color: #31c27c;
+  color: #fff;
+}
 
-  .singer_tag__item {
-      float: left;
-      padding: 0 8px;
-      margin: 0 12px 14px 0;
-      margin-right: 12px;
-  }
+.singer_tag__item--all {
+  margin-right: 28px;
+}
 
-  a {
-      color: #000;
-      text-decoration: none;
-  }
+.singer_tag__item {
+  height: 26px;
+  line-height: 27px;
+  overflow: hidden;
+}
 
-  .singer_list_txt {
-      margin-right: -20px;
-      overflow: hidden;
-      margin-bottom: 60px;
-  }
+.singer_tag__item {
+  float: left;
+  padding: 0 8px;
+  margin: 0 12px 14px 0;
+  margin-right: 12px;
+}
 
-  .singer_list_txt__item {
-      float: left;
-      width: 20%;
-  }
+.singer_list_txt {
+  margin-right: -20px;
+  overflow: hidden;
+  margin-bottom: 60px;
+}
 
-  li {
-      list-style: none;
-  }
+.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;
-  }
+li {
+  list-style: none;
+}
 
+.singer_list_txt__link {
+  float: left;
+  max-width: 90%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+  line-height: 36px;
+}
 </style>
-- 
GitLab