Skip to content

Y
Yz Music

zacharyzlj / Yz Music

通知 1
Star 0
Fork 0
Y
Yz Music

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 ac8461b6 编写于 作者: Z Zachary
浏览文件
操作

feat: add some my page

上级 68020088
隐藏空白更改
内联 并排
Showing with 807 addition and 461 deletion
src/components/common/LoginOpt.vue 0 → 100644
浏览文件 @ ac8461b6
<template>
<div class="header__opt">
<span class="mod_top_login">
<!-- 登录 -->
<a
class="top_login__link js_logined"
:style="{ display: isLogged ? '' : 'none' }"
@mouseover="showUserPopup"
@mouseleave="hiddenUserPopup"
><img
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/person_300.png?max_age=2592000';this.onerror=null;"
style="background-color: gray"
class="top_login__cover js_user_img"
:src="$store.state.user.user.avatarUrl"
/>
</a>
<!-- 未登录 -->
<a
class="top_login__link js_login"
href="javascript:;"
:style="{ display: isLogged ? 'none' : '' }"
@click="showLoginPopup"
>
登录
</a>
</span>
<!-- 用户信息 -->
<div
class="popup_user"
:class="isShowPopup ? 'drop' : ''"
@mouseover="showUserPopup"
@mouseleave="hiddenUserPopup"
>
<div class="popup_user_data">
<a class="popup_user_data__cover_link">
<img
onerror="this.src=\'//y.gtimg.cn/mediastyle/global/img/person_300.png?max_age=2592000\';this.onerror=null;"
class="popup_user_data__cover js_user_img"
style="background-color: gray"
:src="$store.state.user.user.avatarUrl"
/>
</a>
<!-- 自动垂直居中 -->
<div class="popup_user_data__cont">
<div class="popup_user_data__name">
<a class="">{{ $store.state.user.user.nickname }}</a>
</div>
<div class="popup_user_data__lv" style="overflow: hidden">
<a class="js_vip_jump" rel="noopener" target="_blank"
>签名：{{ $store.state.user.user.signature }}
</a>
</div>
</div>
</div>
<div class="popup_user_toolbar">
<div class="popup_user_toolbar__item">
<div class="popup_user_toolbar__tit js_msgcenterdiv">
<a>评论通知</a>
</div>
</div>
<div class="popup_user_toolbar__item">
<div class="popup_user_toolbar__tit">
<a class="js_logout" @click="logout">退出登录</a>
</div>
</div>
</div>
</div>
</div>
<!-- 登陆弹框 -->
<div
id="divdialog_0"
class="mod_popup popup_login popup_login--download large"
data-aria="popup"
style="
position: fixed;
z-index: 100000;
top: 154.5px;
margin: 10px;
left: 369px;
"
v-if="isShowLoginPopup"
>
<div class="popup__hd">
<h2 class="popup__tit">
<a
href="javascript:;"
class="popup__tit_item current js_iframe_login"
data-type="qq"
style=""
>扫码登陆</a
>
</h2>
</div>
<a
href="javascript:;"
class="popup__close"
title="关闭"
@click="hiddenLoginPopup"
><i class="popup__icon_close"></i><i class="icon_txt">关闭</i>
</a>
<div class="popup__bd" id="dialogbox">
<div class="phone"></div>
<img
id="frame_tips"
:src="qrurl"
class="popup_login_qq"
width="100%"
height="400px;"
frameborder="0"
/>
</div>
</div>
<div
class="mod_popup_mask"
:style="{ display: isShowLoginPopup ? 'block' : 'none' }"
></div>
</template>
<script>
import {
getLoginKey,
getLoginQrCode,
getLoginQrScanState,
getLoginStatus,
logout,
} from "api";
export default {
data() {
return {
isShowLoginPopup: false,
isShowPopup: false,
qrurl: "",
};
},
mounted() {
if (!this.isLogged) this.getLoginStatus();
},
methods: {
getQr() {
getLoginKey().then((res) => {
let key = res.data.data.unikey;
getLoginQrCode(key).then((res) => {
let qrimg = res.data.data.qrimg;
this.qrurl = qrimg;
this.checkScanState(key);
});
});
},
checkScanState(key) {
let timer = setInterval(async () => {
let res = await getLoginQrScanState(key);
console.log(res);
let code = res.data.code;
let cookie = res.data.cookie;
switch (code) {
case 800:
console.log("二维码过期");
clearInterval(timer);
break;
case 801:
break;
case 802:
console.log("已扫描");
break;
case 803:
clearInterval(timer);
this.isShowLoginPopup = false;
this.getLoginStatus();
break;
default:
break;
}
}, 3000);
},
getLoginStatus() {
getLoginStatus().then((res) => {
let profile = res.data.data.profile;
if (profile) {
this.$store.commit("user/setLoginStatus", true);
this.$store.commit("user/setUser", profile);
console.log(this.$store.state.user.isLogged);
console.log(this.$store.state.user.user);
}
});
},
logout() {
logout().then((res) => {
this.$store.commit("user/setLoginStatus", false);
alert("成功退出");
});
},
showLoginPopup() {
this.isShowLoginPopup = true;
this.getQr();
},
hiddenLoginPopup() {
this.isShowLoginPopup = false;
},
showUserPopup() {
this.isShowPopup = true;
},
hiddenUserPopup() {
this.isShowPopup = false;
},
},
computed: {
isLogged() {
return this.$store.state.user.isLogged;
},
},
};
</script>
<style scoped>
.header__opt {
position: absolute;
top: 0;
right: 200px;
height: 90px;
line-height: 90px;
}
.mod_top_login {
font-size: 0;
height: 90px;
line-height: 90px;
}
.top_login__link {
position: relative;
z-index: 12;
font-size: 16px;
float: left;
width: 38px;
margin-right: 10px;
text-align: center;
}
.top_login__cover {
width: 38px;
height: 38px;
border-radius: 90px;
vertical-align: -14px;
}
.top_login__link {
position: relative;
z-index: 12;
font-size: 16px;
float: left;
width: 38px;
margin-right: 10px;
text-align: center;
}
.popup_user {
position: absolute;
/*right: 0;*/
left: -15px;
top: 90px;
width: 288px;
background-color: #fff;
z-index: 9;
line-height: 1.5;
border: 1px solid #f2f2f2;
font-size: 13px;
}
.mod_search_other,
.mod_search_result,
.popup_user {
max-height: 0;
visibility: hidden;
transition: max-height 0.6s ease-out, visibility 1ms 0.6s;
overflow: hidden;
}
.popup_user_data {
display: table;
height: 84px;
overflow: hidden;
text-align: left;
padding: 25px 20px 0;
}
.popup_user_data__cover_link {
position: relative;
float: left;
}
.popup_user_data__cover {
float: left;
display: block;
width: 70px;
height: 70px;
border-radius: 999px;
margin-right: 10px;
}
.popup_user_data__cont {
display: table-cell;
vertical-align: middle;
}
.popup_user_data__name {
color: #000;
padding: 0 0 7px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.popup_user_data__lv {
white-space: nowrap;
margin-bottom: 6px;
}
.popup_user_toolbar {
padding: 13px 20px 6px;
font-size: 15px;
text-align: center;
}
.popup_user_toolbar__item {
position: relative;
margin-bottom: 16px;
}
.drop {
visibility: visible;
max-height: 800px;
transition: max-height 0.6s ease-out;
}
a:hover {
color: #31c27c;
}
/* login popup */
.mod_popup {
position: absolute;
border: 1px solid #bfbfbf;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 999;
background-color: #fff;
font-size: 14px;
color: #333;
}
.popup_login {
width: 560px;
height: 410px;
overflow: hidden;
}
.popup_login--download {
position: relative;
z-index: 2;
height: 387px;
}
.popup_login.large {
width: 700px;
}
.popup__hd {
position: relative;
line-height: 55px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
}
.popup__tit {
font-size: 16px;
font-weight: 400;
}
.popup__tit_item {
margin: 0 60px;
}
.popup__tit_item.current {
color: #31c27c;
}
.popup__close {
position: absolute;
top: 6px;
right: 6px;
width: 24px;
height: 24px;
overflow: hidden;
z-index: 2;
}
.popup__icon_close {
display: block;
margin: 6px auto;
width: 12px;
height: 12px;
background-position: 0 -200px;
}
.popup_login.large .popup__bd {
position: relative;
overflow: hidden;
height: 348px;
}
.popup_login.large iframe {
position: absolute;
top: 0;
left: 0;
width: 704px;
margin-left: -2px;
}
.popup_login.large .popup_login_qq {
width: 200px;
height: 200px;
margin-left: 150px;
}
.mod_popup_mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#33000000', endColorstr='#33000000');
background: rgba(0, 0, 0, 0.2);
z-index: 999;
}
.phone {
float: left;
margin-left: 120px;
width: 125px;
height: 220px;
background: url(../../assets/img/qr_guide.png);
background-size: auto;
background-size: contain;
}
</style>
src/components/content/NavBar.vue
浏览文件 @ ac8461b6
......@@ -50,154 +50,21 @@
<search-input />
</div>
</div>
<div class="header__opt">
<span class="mod_top_login">
<!-- 登录 -->
<a
class="top_login__link js_logined"
onclick="setStatCookie&amp;&amp;setStatCookie();"
:style="{ display: isLogged ? '' : 'none' }"
@mouseover="showUserPopup"
@mouseleave="hiddenUserPopup"
><img
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/person_300.png?max_age=2592000';this.onerror=null;"
style="background-color: gray"
class="top_login__cover js_user_img"
:src="$store.state.user.user.avatarUrl"
/>
</a>
<!-- 未登录 -->
<a
class="top_login__link js_login"
href="javascript:;"
:style="{ display: isLogged ? 'none' : '' }"
@click="showLoginPopup"
>
登录
</a>
</span>
<!-- 用户信息 -->
<div
class="popup_user"
:class="isShowPopup ? 'drop' : ''"
@mouseover="showUserPopup"
@mouseleave="hiddenUserPopup"
>
<div class="popup_user_data">
<a
class="popup_user_data__cover_link"
onclick="setStatCookie&amp;&amp;setStatCookie();"
>
<img
onerror="this.src=\'//y.gtimg.cn/mediastyle/global/img/person_300.png?max_age=2592000\';this.onerror=null;"
class="popup_user_data__cover js_user_img"
style="background-color: gray"
:src="$store.state.user.user.avatarUrl"
/>
</a>
<!-- 自动垂直居中 -->
<div class="popup_user_data__cont">
<div class="popup_user_data__name">
<a
href="//y.qq.com/portal/profile.html#stat=y_new.top.pop.user_nickname"
onclick="setStatCookie&amp;&amp;setStatCookie();"
class=""
>{{ $store.state.user.user.nickname }}</a
>
</div>
<div class="popup_user_data__lv" style="overflow: hidden">
<a class="js_vip_jump" rel="noopener" target="_blank"
>签名：{{ $store.state.user.user.signature }}
</a>
</div>
</div>
</div>
<div class="popup_user_toolbar">
<div class="popup_user_toolbar__item">
<div class="popup_user_toolbar__tit js_msgcenterdiv">
<a>评论通知</a>
</div>
</div>
<div class="popup_user_toolbar__item">
<div class="popup_user_toolbar__tit">
<a class="js_logout" @click="logout">退出QQ登录</a>
</div>
</div>
</div>
</div>
</div>
<!-- 登陆 -->
<login-opt />
</div>
</div>
</div>
<!-- 登陆弹框 -->
<div
id="divdialog_0"
class="mod_popup popup_login popup_login--download large"
data-aria="popup"
style="
position: fixed;
z-index: 100000;
top: 154.5px;
margin: 10px;
left: 369px;
"
v-if="isShowLoginPopup"
>
<div class="popup__hd">
<h2 class="popup__tit">
<a
href="javascript:;"
class="popup__tit_item current js_iframe_login"
data-type="qq"
style=""
>扫码登陆</a
>
</h2>
</div>
<a
href="javascript:;"
class="popup__close"
title="关闭"
@click="hiddenLoginPopup"
><i class="popup__icon_close"></i><i class="icon_txt">关闭</i>
</a>
<div class="popup__bd" id="dialogbox">
<div class="phone"></div>
<img
id="frame_tips"
:src="qrurl"
class="popup_login_qq"
width="100%"
height="400px;"
frameborder="0"
/>
</div>
</div>
<div
class="mod_popup_mask"
:style="{ display: isShowLoginPopup ? 'block' : 'none' }"
></div>
</template>
<script>
import SearchInput from "components/common/SearchInput";
import {
getLoginKey,
getLoginQrCode,
getLoginQrScanState,
getLoginStatus,
logout,
} from "api";
import LoginOpt from "components/common/LoginOpt";
export default {
name: "NavBar",
data() {
return {
isShowLoginPopup: false,
isShowPopup: false,
qrurl: "",
navData: [
{ title: "音乐库", path: "/" },
{ title: "我的音乐", path: "/My" },
......@@ -217,89 +84,9 @@ export default {
],
};
},
computed: {
isLogged() {
return this.$store.state.user.isLogged;
},
},
mounted() {
this.getLoginStatus();
},
methods: {
getQr() {
getLoginKey().then((res) => {
let key = res.data.data.unikey;
getLoginQrCode(key).then((res) => {
console.log(res);
let qrimg = res.data.data.qrimg;
console.log(qrimg);
this.qrurl = qrimg;
console.log(this.qrurl);
this.checkScanState(key);
});
});
},
checkScanState(key) {
let timer = setInterval(async () => {
let res = await getLoginQrScanState(key);
console.log(res);
let code = res.data.code;
let cookie = res.data.cookie;
switch (code) {
case 800:
console.log("二维码过期");
clearInterval(timer);
break;
case 801:
break;
case 802:
console.log("已扫描");
break;
case 803:
console.log(cookie);
clearInterval(timer);
this.isShowLoginPopup = false;
this.getLoginStatus();
break;
default:
break;
}
}, 3000);
},
getLoginStatus() {
getLoginStatus().then((res) => {
console.log(res);
let profile = res.data.data.profile;
if (profile) {
this.$store.commit("user/setLoginStatus", true);
this.$store.commit("user/setUser", profile);
console.log(this.$store.state.user.isLogged);
console.log(this.$store.state.user.user);
}
});
},
logout() {
logout().then((res) => {
this.$store.commit("user/setLoginStatus", false);
alert("成功退出");
});
},
showLoginPopup() {
this.isShowLoginPopup = true;
this.getQr();
},
hiddenLoginPopup() {
this.isShowLoginPopup = false;
},
showUserPopup() {
this.isShowPopup = true;
},
hiddenUserPopup() {
this.isShowPopup = false;
},
},
components: {
SearchInput,
LoginOpt,
},
};
</script>
......@@ -392,111 +179,6 @@ p {
transition: width 0.6s ease-out;
}
.header__opt {
position: absolute;
top: 0;
right: 200px;
height: 90px;
line-height: 90px;
}
.mod_top_login {
font-size: 0;
height: 90px;
line-height: 90px;
}
.top_login__link {
position: relative;
z-index: 12;
font-size: 16px;
float: left;
width: 38px;
margin-right: 10px;
text-align: center;
}
.top_login__cover {
width: 38px;
height: 38px;
border-radius: 90px;
vertical-align: -14px;
}
.top_login__link {
position: relative;
z-index: 12;
font-size: 16px;
float: left;
width: 38px;
margin-right: 10px;
text-align: center;
}
.popup_user {
position: absolute;
/*right: 0;*/
left: -15px;
top: 90px;
width: 288px;
background-color: #fff;
z-index: 9;
line-height: 1.5;
border: 1px solid #f2f2f2;
font-size: 13px;
}
.mod_search_other,
.mod_search_result,
.popup_user {
max-height: 0;
visibility: hidden;
transition: max-height 0.6s ease-out, visibility 1ms 0.6s;
overflow: hidden;
}
.popup_user_data {
display: table;
height: 84px;
overflow: hidden;
text-align: left;
padding: 25px 20px 0;
}
.popup_user_data__cover_link {
position: relative;
float: left;
}
.popup_user_data__cover {
float: left;
display: block;
width: 70px;
height: 70px;
border-radius: 999px;
margin-right: 10px;
}
.popup_user_data__cont {
display: table-cell;
vertical-align: middle;
}
.popup_user_data__name {
color: #000;
padding: 0 0 7px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.popup_user_data__lv {
white-space: nowrap;
margin-bottom: 6px;
}
.popup_user_toolbar {
padding: 13px 20px 6px;
font-size: 15px;
text-align: center;
}
.popup_user_toolbar__item {
position: relative;
margin-bottom: 16px;
}
.drop {
visibility: visible;
max-height: 800px;
transition: max-height 0.6s ease-out;
}
a:hover {
color: #31c27c;
}
......@@ -505,99 +187,4 @@ a:hover {
font-size: 38px;
padding-left: 20px;
}
/* login popup */
.mod_popup {
position: absolute;
border: 1px solid #bfbfbf;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
z-index: 999;
background-color: #fff;
font-size: 14px;
color: #333;
}
.popup_login {
width: 560px;
height: 410px;
overflow: hidden;
}
.popup_login--download {
position: relative;
z-index: 2;
height: 387px;
}
.popup_login.large {
width: 700px;
}
.popup__hd {
position: relative;
line-height: 55px;
text-align: center;
border-bottom: 1px solid #f2f2f2;
}
.popup__tit {
font-size: 16px;
font-weight: 400;
}
.popup__tit_item {
margin: 0 60px;
}
.popup__tit_item.current {
color: #31c27c;
}
.popup__close {
position: absolute;
top: 6px;
right: 6px;
width: 24px;
height: 24px;
overflow: hidden;
z-index: 2;
}
.popup__icon_close {
display: block;
margin: 6px auto;
width: 12px;
height: 12px;
background-position: 0 -200px;
}
.popup_login.large .popup__bd {
position: relative;
overflow: hidden;
height: 348px;
}
.popup_login.large iframe {
position: absolute;
top: 0;
left: 0;
width: 704px;
margin-left: -2px;
}
.popup_login.large .popup_login_qq {
width: 200px;
height: 200px;
margin-left: 150px;
}
.mod_popup_mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#33000000', endColorstr='#33000000');
background: rgba(0, 0, 0, 0.2);
z-index: 999;
}
.phone {
float: left;
margin-left: 120px;
width: 125px;
height: 220px;
background: url(../../assets/img/qr_guide.png);
background-size: auto;
background-size: contain;
}
</style>
src/router/index.js
浏览文件 @ ac8461b6
......@@ -16,6 +16,9 @@ const SearchResultDetail = () =>
import("views/musicLibrary/SearchResultDetail");
const My = () => import("views/My");
const Like = () => import("views/my/Like");
const Follows = () => import("views/my/Follows");
const Followeds = () => import("views/my/Followeds");
const routes = [
{
......@@ -33,94 +36,67 @@ const routes = [
{
path: "",
component: Home,
meta: {
name: "home"
}
meta: { name: "home" }
},
{
path: "home",
component: Home,
meta: {
name: "home"
}
meta: { name: "home" }
},
{
path: "songers",
component: Songers,
meta: {
name: "songers"
}
meta: { name: "songers" }
},
{
path: "newdisc",
component: NewDisc,
meta: {
name: "newdisc"
}
meta: { name: "newdisc" }
},
{
path: "ranking",
component: Ranking,
meta: {
name: "ranking"
}
meta: { name: "ranking" }
},
{
path: "classified",
component: Classified,
meta: {
name: "classified"
}
meta: { name: "classified" }
},
{
path: "radions",
component: Radions,
meta: {
name: "ranking"
}
meta: { name: "ranking" }
},
{
path: "mv",
component: MV,
meta: {
name: "mv"
}
meta: { name: "mv" }
},
{
path: "songerDetail",
component: SongerDetail,
meta: {
name: "songerDetail"
}
meta: { name: "songerDetail" }
},
{
path: "songDetail",
component: SongDetail,
meta: {
name: "songDetail"
}
meta: { name: "songDetail" }
},
{
path: "albumDetail",
component: AlbumDetail,
meta: {
name: "albumDetail"
}
meta: { name: "albumDetail" }
},
{
path: "playlistDetail",
component: PlaylistDetail,
meta: {
name: "playlistDetail"
}
meta: { name: "playlistDetail" }
},
{
path: "searchResultDetail",
component: SearchResultDetail,
meta: {
name: "searchResultDetail"
}
meta: { name: "searchResultDetail" }
}
]
},
......@@ -128,9 +104,13 @@ const routes = [
name: "My",
path: "/My",
component: My,
meta: {
index: 1
}
meta: { index: 1 },
children: [
{ path: "", component: Like, meta: { name: "like" } },
{ path: "like", component: Like, meta: { name: "like" } },
{ path: "follows", component: Follows, meta: { name: "follows" } },
{ path: "followeds", component: Followeds, meta: { name: "followeds" } }
]
}
];
......
src/views/My.vue
浏览文件 @ ac8461b6
<template>
<div class="mod_profile_unlogin" style="display: none">
<div class="mod_profile_unlogin" v-if="!isLogged">
<div class="section_inner">
<h2 class="profile_unlogin__tit">
<div class="icon_txt">听我喜欢听的歌</div>
......@@ -13,12 +13,113 @@
>
</div>
</div>
<div v-if="isLogged">
<div class="mod_profile js_user_data" style="">
<div class="section_inner">
<div class="profile__cover_link">
<img
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/person_300.png?max_age=31536000';this.onerror=null;"
:src="$store.state.user.user.avatarUrl"
alt="$store.state.user.user.nickname"
class="profile__cover"
id="profileHead"
/>
</div>
<h1 class="profile__tit">
<span class="profile__name">{{
$store.state.user.user.nickname
}}</span>
</h1>
<ul class="mod_user_statistic">
<li class="user_statistic__item">
<a
href="javascript:;"
class="js_tab"
data-tab="focus_singer"
data-stat="y_new.profile.header.focus_click"
><strong class="user_statistic__number js_num_follow">5</strong
><span class="user_statistic__tit">关注</span></a
>
</li>
<li class="user_statistic__item user_statistic__item--last">
<a
href="javascript:;"
class="js_tab"
data-tab="fans"
data-stat="y_new.profile.header.fans_click"
><strong class="user_statistic__number js_num_fans">0</strong
><span class="user_statistic__tit">粉丝</span></a
>
</li>
</ul>
<button
class="btn_unlock sprite js_btn_lock"
title="主页非公开"
data-status="1"
>
<span class="icon_txt">主页非公开</span>
</button>
</div>
</div>
<div class="main main--profile">
<div class="mod_tab profile_nav" role="nav" id="nav">
<router-link
class="mod_tab__item"
id="like_tab"
:class="$route.meta.name == 'like' ? 'mod_tab__current' : ''"
:to="'/my/like'"
>我的收藏</router-link
>
<router-link
class="mod_tab__item"
id="focus_tab"
:class="$route.meta.name == 'follows' ? 'mod_tab__current' : ''"
:to="'/my/follows'"
>关注</router-link
>
<router-link
class="mod_tab__item"
id="fans_tab"
:class="$route.meta.name == 'followeds' ? 'mod_tab__current' : ''"
:to="'/my/followeds'"
>粉丝</router-link
>
</div>
<router-view :key="$route.fullPath"></router-view>
</div>
</div>
</template>
<script>
import { getUserDetail } from "api";
export default {
mounted() {
this.getUserDetail();
},
methods: {
getUserDetail() {
getUserDetail(this.userId).then((res) => {
console.log(res);
});
},
},
computed: {
isLogged() {
return this.$store.state.user.isLogged;
},
userId() {
return this.$store.state.user.user.userId;
},
},
};
</script>
<style scoped>
/*
未登录 */
.mod_profile_unlogin {
height: 922px;
background: url(../assets/img/bg_profile_unlogin.jpg) 50% no-repeat;
......@@ -66,4 +167,142 @@
text-align: center;
margin: 0 auto;
}
/*
已登陆 */
.mod_profile {
height: 315px;
padding-top: 65px;
background: url(https://y.gtimg.cn/mediastyle/yqq/img/bg_profile.jpg?max_age=2592000&v=a81e58d2beb14c0122de6513faaead8d)
50% no-repeat;
background-size: auto;
background-size: cover;
text-align: center;
color: #fff;
}
.mod_profile,
.mod_profile .section_inner {
height: 315px;
}
.main,
.section_inner {
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.mod_profile,
.mod_profile .section_inner {
height: 315px;
}
.profile__cover_link {
position: relative;
width: 102px;
height: 102px;
margin: 0 auto;
}
.profile__cover {
display: block;
width: 100%;
height: 100%;
border: 4px solid #fff;
border-radius: 99px;
background: #fff;
}
.profile__name {
font-size: 30px;
font-weight: 400;
line-height: 64px;
margin-right: 4px;
}
.mod_user_statistic {
height: 40px;
margin: 4px 15px 26px;
overflow: hidden;
font-size: 0;
}
.user_statistic__item {
display: inline-block;
*display: inline;
*zoom: 1;
border-right: solid 1px #24313d;
width: auto;
text-align: center;
padding: 0 25px;
}
.user_statistic__number {
display: block;
font-size: 22px;
line-height: 24px;
margin-top: -1px;
font-weight: 400;
}
.user_statistic__tit {
display: block;
color: #999;
font-size: 14px;
}
.user_statistic__number,
.user_statistic__tit {
color: #fff;
}
.btn_lock,
.btn_unlock {
position: absolute;
right: 0;
bottom: 17px;
width: 16px;
height: 20px;
background-color: transparent;
background-repeat: no-repeat;
border: 0 none;
z-index: 2;
overflow: hidden;
}
.btn_unlock {
background-position: -80px -180px;
}
.mod_tab,
.mod_tab__item {
height: 56px;
line-height: 56px;
}
.mod_tab {
position: relative;
zoom: 1;
border-bottom: 1px solid #f7f7f7;
margin-bottom: 30px;
}
.mod_tab {
/*margin-bottom: -20px;*/
overflow: hidden;
border-bottom: 0 none;
}
.profile_nav {
position: absolute;
top: -56px;
left: 0;
margin-bottom: 0;
width: 80%;
}
.mod_tab,
.mod_tab__item {
height: 56px;
line-height: 56px;
}
.mod_tab__item {
position: relative;
float: left;
font-size: 16px;
overflow: hidden;
margin-right: 55px;
}
.profile_nav .mod_tab__item {
color: #fff;
margin-right: 40px;
}
.profile_nav .mod_tab__current,
.profile_nav .mod_tab__item:hover {
color: #31c27c;
}
</style>
src/views/my/Followeds.vue 0 → 100644
浏览文件 @ ac8461b6
<template>followeds</template>
src/views/my/Follows.vue 0 → 100644
浏览文件 @ ac8461b6
<template>follows</template>
src/views/my/Like.vue 0 → 100644
浏览文件 @ ac8461b6
<template>
<div class="js_box" id="like_box" style="display: block">
<div class="mod_tab" role="nav">
<a
class="mod_tab__item"
href="javascript:;"
data-tab="like_song"
data-stat="y_new.profile.like.tab.song"
v-for="option in options"
:key="option"
:class="option == selected ? 'mod_tab__current' : ''"
@click="select(option)"
>{{ option }}</a
>
</div>
<div class="profile_cont">
<show-playlist :playlists="playlists" v-if="selected == '歌单'" />
<show-albums :albums="albums" v-if="selected == '专辑'" />
<show-mvs :mvs="mvs" v-if="selected == '视频'" />
</div>
</div>
</template>
<script>
import ShowPlaylist from "components/common/ShowPlaylist";
import ShowAlbums from "components/common/ShowAlbums";
import ShowMvs from "components/common/ShowMvs";
import { getUserPlaylists, getCollectedAlbum, getCollectedMvs } from "api";
import { createPlaylists, createAlbums, createMvs } from "common/utils";
export default {
data() {
return {
selected: "歌单",
options: ["歌单", "专辑", "视频"],
playlists: [],
albums: [],
mvs: [],
};
},
mounted() {
this.getUserPlaylists();
this.getCollectedAlbum();
this.getCollectedMvs();
},
methods: {
select(option) {
if (option != this.selected) {
this.selected = option;
}
},
getUserPlaylists() {
getUserPlaylists(this.userId).then((res) => {
let lists = createPlaylists(res.data.playlist);
this.playlists = lists;
});
},
getCollectedAlbum() {
getCollectedAlbum().then((res) => {
let d = createAlbums(res.data.data);
this.albums = d;
});
},
getCollectedMvs() {
getCollectedMvs().then((res) => {
console.log(res);
let d = createMvs(res.data.data);
console.log(d);
this.mvs = d;
});
},
},
computed: {
userId() {
return this.$store.state.user.user.userId;
},
},
components: {
ShowPlaylist,
ShowAlbums,
ShowMvs,
},
};
</script>
<style scoped>
.mod_tab,
.mod_tab__item {
height: 56px;
line-height: 56px;
}
.mod_tab {
position: relative;
zoom: 1;
border-bottom: 1px solid #f7f7f7;
margin-bottom: 30px;
}
.mod_tab {
margin-bottom: -20px;
overflow: hidden;
border-bottom: 0 none;
}
.mod_tab,
.mod_tab__item {
height: 56px;
line-height: 56px;
}
.mod_tab__item {
position: relative;
float: left;
font-size: 16px;
overflow: hidden;
margin-right: 55px;
}
.mod_tab__current {
color: #31c27c;
}
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或