userpage coding

sqaiyan · May 12, 2017 · 1525835 · 1525835
1 parent 98c80f2
commit 1525835
Show file tree

Hide file tree

Showing 33 changed files with 943 additions and 452 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -8,17 +8,20 @@
 </template>
 
 <script>
-	import music from "@/components/music"
+	import music from "@/components/music";
 	export default {
 		name: 'app',
 		data() {
 			return {
 				bottomNav: 'movies'
 			}
-		},components:{music}
+		},
+		components: {
+			music
+		}
 	}
 </script>
 
 <style>
-
+	@import url("assets/onepx.css");
 </style>
diff --git a/src/api.js b/src/api.js
@@ -34,6 +34,10 @@ export default {
         // 电台列表
         return axios("djradio/hot?limit=" + limit + '&offset=' + offset);
     },
+    index_hqpl(cat){
+    	//精品歌单
+    	return axios("top/playlist/highquality?type="+cat)
+    },
     likeall() {
         return axios("likelist")
     },
@@ -105,12 +109,6 @@ export default {
             return Promise.resolve([a.data.playlists, b.data.songs, c.data.userprofiles])
         }))
     },
-    user_detail(id) {
-        return axios("user/detail?uid=" + id)
-    },
-    user_playlist(id, offset) {
-        return axios("user/playlist?uid=" + id + '&offset=' + offset + '&limit=' + limit)
-    },
     recsongs() {
         return axios("recommend/songs")
     },
@@ -142,5 +140,14 @@ export default {
     },
     program_like(id,t){
     	return axios("resource/like",{params:{id:id,t:t}})
+    },
+    user_detail(id) {
+        return axios("user/detail?uid=" + id)
+    },
+    user_playlist(id, offset) {
+        return axios("user/playlist?uid=" + id + '&offset=' + offset + '&limit=' + limit)
+    },
+    user_radio(id){
+    	return axios("user/radio",{params:{uid:id}});
     }
 }
diff --git a/src/assets/layout.css b/src/assets/layout.css
@@ -1,4 +1,8 @@
-*{padding: 0;margin: 0;}
+* {
+	padding: 0;
+	margin: 0;
+}
+
 img {
 	vertical-align: middle;
 	max-width: 100%;
@@ -24,7 +28,6 @@ body {
 	height: 100%;
 	font-family: '-apple-system', "Helvetica Neue", "Roboto", "Segoe UI", sans-serif;
 	color: #353535;
-	font-size: 14px;
 	padding: 0;
 	margin: 0 auto;
 	max-width: 750px;
@@ -49,16 +52,18 @@ a {
 }
 
 .mint-tabbar {
-	background: #212121
+	background: none transparent
 }
 
 .mint-tab-item {
-	color: #aaa
+	color: #aaa;
+	background-color: rgba(10, 10, 10, .9);
+	backdrop-filter: blur(15px);
 }
 
 .mint-tabbar>.mint-tab-item.is-selected {
-	background: #212121;
 	color: #fff;
+	background-color: rgba(10, 10, 10, .9);
 }
 
 .mint-swipe .mint-swipe-items-wrap {
@@ -72,7 +77,7 @@ a {
 
 .tags {
 	border: 1px solid #BB2C08;
-	color: #BB2C08;
+	color: #BB2C08 !important;
 	font-size: .6em;
 	line-height: 1;
 	margin-right: .3em;
@@ -94,7 +99,6 @@ a {
 	justify-content: center;
 	bottom: 0;
 	background: rgba(33, 33, 33, .8);
-	-webkit-backdrop-filter: blur(15px);
 	backdrop-filter: blur(15px);
 	z-index: 100;
 	align-items: center;
@@ -114,7 +118,7 @@ a {
 	z-index: 2;
 }
 
-#pageplay image {
+#pageplay img {
 	width: 70px;
 	height: 70px;
 	vertical-align: top
@@ -179,7 +183,6 @@ a {
 
 .pp_main {
 	background: rgba(255, 255, 255, .9);
-	-webkit-backdrop-filter: blur(15px);
 	backdrop-filter: blur(15px);
 	position: fixed;
 	z-index: 101;
@@ -314,6 +317,7 @@ a {
 
 .pi-act img {
 	width: 60%;
+	max-width: ;
 }
 
 #playingaction {
@@ -477,6 +481,7 @@ a {
 	background: rgba(240, 240, 240, .8);
 	line-height: 3;
 	height: 3em;
+	backdrop-filter: blur(15px);
 }
 
 .tab .tab-item {
@@ -610,7 +615,11 @@ a {
 	vertical-align: sub;
 	height: 1.2em
 }
-.rm_cnt{color: #888;}
+
+.rm_cnt {
+	color: #888;
+}
+
 .rmc_reply {
 	margin: .5em 0 0;
 	padding: .5em;
@@ -719,12 +728,12 @@ a {
 
 .sm_title {
 	padding: 0 2%;
-	margin: 0 0 1% 0;
 	font-size: .8em;
 	display: block;
 	color: #6a6a6a;
 	background-color: #eeeff0;
 	line-height: 2.4;
+	overflow: hidden;
 }
 
 .sm_title span {
@@ -748,21 +757,32 @@ a {
 }
 
 .tl_cnt {
-	margin: .3em 0 .2em 1%;
+	margin: 1% 1% 1% 0;
 	box-sizing: border-box;
 	line-height: 1.2;
-	flex: 0 0 32%;
+	flex: 0 0 32.667%;
 	overflow: hidden
 }
 
+.tl_cnt:nth-child(3n) {
+	margin-right: 0;
+}
+
 .tl_cnt a {
 	display: block
 }
 
 .flex-two .tl_cnt {
-	flex: 0 0 48.5%
+	flex: 0 0 49.5%;
+	margin: 1% 1% 1% 0;
 }
 
+.flex-two .tl_cnt:nth-child(2n) {
+	margin-right: 0;
+}
+
+.flex-two .tl_cnt:nth-child(3n) {}
+
 .tl_cnt text {
 	color: #666;
 }
@@ -819,6 +839,7 @@ a {
 	display: block;
 	max-height: 2.8em;
 	text-overflow: ellipsis;
+	padding: 0 .2em;
 }
 
 .cover:after {
@@ -853,6 +874,10 @@ a {
 	white-space: nowrap
 }
 
+.tl_info {
+	padding: 0 .2em;
+}
+
 .tl_info .tli_des {
 	color: #888;
 	font-size: 0.8em;
@@ -958,8 +983,16 @@ a {
 	color: #999;
 	font-size: .8em;
 }
-.relistdes span{margin-right: .5em;}
-.relistdes img{height: 1.2em;vertical-align: middle;}
+
+.relistdes span {
+	margin-right: .5em;
+}
+
+.relistdes img {
+	height: 1.2em;
+	vertical-align: middle;
+}
+
 .fa_pc {
 	opacity: .5;
 	padding-right: 15px;
@@ -1035,7 +1068,8 @@ a {
 	position: relative;
 	z-index: 1;
 	height: 3.5em;
-	width: auto
+	width: auto;
+	min-width: 1em;
 }
 
 .img_playcount {
@@ -1060,24 +1094,34 @@ a {
 }
 
 .listheader {
-	padding: .3em 1% .2em .5em;
+	padding: .5em 1% .2em 0;
 	overflow: hidden;
-	position: relative
+	position: relative;
+	display: block;
+	line-height: 1.6;
+	font-size: 1.1em;
+}
+
+.listheader img {
+	height: .8em;
+	vertical-align: middle;
+	margin-left: .2em;
+}
+
+.listheader span {
+	display: inline-block;
+	vertical-align: middle;
 }
 
 .listheader:before {
 	display: inline-block;
-	width: 3px;
+	width: 2px;
 	background-color: red;
 	height: 1em;
 	content: "";
-	vertical-align: middle;
-	margin-right: 2%;
+	margin-right: .3em;
 	border-radius: 10px;
-	vertical-align: middle;
-	position: absolute;
-	left: 0;
-	top: .4em
+	vertical-align: middle
 }
 
 #playall .flexlist {
@@ -1217,6 +1261,10 @@ a {
 	line-height: 1.8
 }
 
+#plh-cnt a {
+	color: #fff;
+}
+
 #music_h_name {
 	padding: 0 0 1em;
 	display: block;
@@ -1277,12 +1325,14 @@ a {
 	left: 0;
 	top: 0;
 }
-#artist_header>img {
-		width: 100%;
-		position: absolute;
-		left: 0;
-		top: 0;
-	}
+
+#artist_header #art_cover {
+	width: 100%;
+	position: absolute;
+	left: 0;
+	top: 0;
+}
+
 #ahw_wrap {
 	position: absolute;
 	bottom: 0;
@@ -1296,18 +1346,30 @@ a {
 
 .ahw_btn {
 	display: inline-block;
-	padding: .4em 1em;
+	padding: 0 1.2em 0 1em;
 	border: 1px solid #fff;
 	color: #fff;
 	border-radius: 3em;
-	line-height: 1;
+	line-height:2;
+	font-size: .8em;
+	margin-top: .5em;
 	vertical-align: middle;
 }
 
 .ahw_btn img {
-	height: 1em
+	height:2em;vertical-align: top;
 }
-
+.ahw_name {
+		float: left;
+		color: #fff;
+		text-align: left;
+		line-height: 1.6;
+	}
+
+	.ahw_name p {
+		color: #aaa;
+		font-size: .8em;
+	}
 .close {
 	width: 3em;
 	height: 3em;