Skip to content

Y
Yz Music

zacharyzlj / Yz Music

通知 1
Star 0
Fork 0
Y
Yz Music

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

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

refactor: refomat

上级 d4ffd1a5
隐藏空白更改
内联 并排
Showing with 236 addition and 180 deletion
src/views/musicLibrary/Home.vue
浏览文件 @ cc7fd6ad
<template>
<div >
<Banner/>
<RecommendedBar/>
<HomeTop/>
<div>
<banner />
<recommended-bar />
<home-top />
</div>
</template>
<script>
import Banner from 'components/content/Banner';
import RecommendedBar from 'components/content/RecommendedBar';
import HomeTop from 'components/content/HomeTop';
import Banner from "components/content/Banner";
import RecommendedBar from "components/content/RecommendedBar";
import HomeTop from "components/content/HomeTop";
export default {
components:{
components: {
Banner,
RecommendedBar,
HomeTop
}
}
HomeTop,
},
};
</script>
<style>
div{
font-family: poppin,Tahoma,Arial,微软雅黑,sans-serif;
line-height: 1.5;
}
div {
font-family: poppin, Tahoma, Arial, 微软雅黑, sans-serif;
line-height: 1.5;
}
</style>
src/views/musicLibrary/MV.vue
浏览文件 @ cc7fd6ad
<template>
<div class="mod_slide_box" style="position: relative;">
<div class="main" style="z-index: 2" v-loading="mvLoading">
<TypeSelectBar>
<TypeSelectSubBar
:selectId="selectArea"
:items="areas"
@selectId="areaSelect"/>
<TypeSelectSubBar
:selectId="selectType"
:items="types"
@selectId="typeSelect"/>
</TypeSelectBar>
<div class="mod_slide_box" style="position: relative">
<div class="main" style="z-index: 2" v-loading="mvLoading">
<type-select-bar>
<type-select-sub-bar
:selectId="selectArea"
:items="areas"
@selectId="areaSelect"
/>
<type-select-sub-bar
:selectId="selectType"
:items="types"
@selectId="typeSelect"
/>
</type-select-bar>
<div class="mod_part_detail">
<div class="part_detail__hd">
<h2 class="part_detail__tit js_lib_title">全部MV</h2>
<div class="part_switch" aria-label="排列方式">
<div class="mod_part_detail">
<div class="part_detail__hd">
<h2 class="part_detail__tit js_lib_title">全部MV</h2>
<div class="part_switch" aria-label="排列方式">
<a
href="javascript:;"
class="part_switch__item part_switch__item--left"
:class="order == orders.NEW.dataId ? 'part_switch__item--select':''"
@click="switchOrder(orders.NEW.dataId)">{{orders.NEW.name}}</a>
:class="
order == orders.NEW.dataId ? 'part_switch__item--select' : ''
"
@click="switchOrder(orders.NEW.dataId)"
>{{ orders.NEW.name }}</a
>
<a
href="javascript:;"
class="part_switch__item part_switch__item--right"
:class="order == orders.HOT.dataId ? 'part_switch__item--select':''"
@click="switchOrder(orders.HOT.dataId)">{{orders.HOT.name}}</a>
:class="
order == orders.HOT.dataId ? 'part_switch__item--select' : ''
"
@click="switchOrder(orders.HOT.dataId)"
>{{ orders.HOT.name }}</a
>
</div>
</div>
</div>
<div class="mod_mv">
<ul class="mv_list__list" id="mv_list">
<li
class="mv_list__item"
v-for="item in mvs" :key='item.id'>
<div class="mv_list__item_box" style="visibility: visible;">
<a href="javascript:;" class="mv_list__cover mod_cover js_mv" :title="item.name" hidefocus="true">
<img
style="display: block; visibility: visible;"
class="mv_list__pic"
:src="item.cover"
:alt="item.name">
<i class="mod_cover__icon_play"></i>
</a>
<h3 class="mv_list__title">
<a href="javascript:;" class="js_mv" :title="item.name">{{item.name}}</a>
</h3>
<div class="mv_list__singer" title="5AM">
<a href="javascript:;" class="js_singer" :title="item.artistName">{{item.artistName}}</a>
<div class="mod_mv">
<ul class="mv_list__list" id="mv_list">
<li class="mv_list__item" v-for="item in mvs" :key="item.id">
<div class="mv_list__item_box" style="visibility: visible">
<a
href="javascript:;"
class="mv_list__cover mod_cover js_mv"
:title="item.name"
hidefocus="true"
>
<img
style="display: block; visibility: visible"
class="mv_list__pic"
:src="item.cover"
:alt="item.name"
/>
<i class="mod_cover__icon_play"></i>
</a>
<h3 class="mv_list__title">
<a href="javascript:;" class="js_mv" :title="item.name">{{
item.name
}}</a>
</h3>
<div class="mv_list__singer" title="5AM">
<a
href="javascript:;"
class="js_singer"
:title="item.artistName"
>{{ item.artistName }}</a
>
</div>
<div class="mv_list__info">
<span class="mv_list__listen">
<i class="mv_list__listen_icon sprite"></i
>{{ processCount(item.playCount) }}
</span>
</div>
</div>
<div class="mv_list__info">
<span class="mv_list__listen">
<i class="mv_list__listen_icon sprite"></i>{{processCount(item.playCount)}}
</span>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="mod_slide_action">
<div class="slide_action slide_action--left">
<a
href="javascript:;"
class="slide_action__btn slide_action__btn--left js_jump"
data-p="prev"
tabindex="-1"
@click="prevPage()">
<i class="icon_txt">上一页</i><i class="slide_action__arrow slide_action__arrow--left sprite"></i>
</a>
</div>
<div class="slide_action slide_action--right">
<a
href="javascript:;"
class="slide_action__btn slide_action__btn--right js_jump"
data-p="next"
tabindex="-1"
@click="nextPage()">
<i class="icon_txt">下一页</i><i class="slide_action__arrow slide_action__arrow--right sprite"></i>
<div class="mod_slide_action">
<div class="slide_action slide_action--left">
<a
href="javascript:;"
class="slide_action__btn slide_action__btn--left js_jump"
data-p="prev"
tabindex="-1"
@click="prevPage()"
>
<i class="icon_txt">上一页</i
><i class="slide_action__arrow slide_action__arrow--left sprite"></i>
</a>
</div>
<div class="slide_action slide_action--right">
<a
href="javascript:;"
class="slide_action__btn slide_action__btn--right js_jump"
data-p="next"
tabindex="-1"
@click="nextPage()"
>
<i class="icon_txt">下一页</i
><i class="slide_action__arrow slide_action__arrow--right sprite"></i>
</a>
</div>
</div>
</div>
</div>
</template>
<script>
import { getAllMV, mvArea, mvOrder, mvType } from 'api';
import { getAllMV, mvArea, mvOrder, mvType } from "api";
import { processCount } from "common/utils";
import TypeSelectBar from 'components/common/TypeSelectBar';
import TypeSelectSubBar from 'components/common/TypeSelectSubBar';
import TypeSelectBar from "components/common/TypeSelectBar";
import TypeSelectSubBar from "components/common/TypeSelectSubBar";
export default {
data() {
......@@ -103,38 +126,40 @@ export default {
order: mvOrder.NEW.dataId,
orders: mvOrder,
selectArea: mvArea.ALL.dataId,
areas:mvArea,
areas: mvArea,
selectType: mvType.ALL.dataId,
types: mvType,
mvs: []
mvs: [],
};
},
mounted() {
this.updateMv()
this.updateMv();
},
methods: {
updateMv() {
let limit = 20;
getAllMV(limit, this.page, this.order, this.selectArea, this.selectType).then(res =>{
console.log(res)
this.mvs = res.data.data
this.mvLoading = false
}).catch(err => console.log(err));
getAllMV(limit, this.page, this.order, this.selectArea, this.selectType)
.then((res) => {
console.log(res);
this.mvs = res.data.data;
this.mvLoading = false;
})
.catch((err) => console.log(err));
},
areaSelect(id) {
this.selectArea=id
this.updateMv()
this.selectArea = id;
this.updateMv();
},
typeSelect(id) {
this.selectType=id
this.updateMv()
this.selectType = id;
this.updateMv();
},
switchOrder(id) {
this.order = id
this.updateMv()
this.order = id;
this.updateMv();
},
processCount(count) {
return processCount(count)
return processCount(count);
},
nextPage() {
if (this.more == true) {
......@@ -143,7 +168,7 @@ export default {
}
},
prevPage() {
if (this.page > 1){
if (this.page > 1) {
this.page--;
this.updateMv();
}
......@@ -151,9 +176,9 @@ export default {
},
components: {
TypeSelectBar,
TypeSelectSubBar
}
}
TypeSelectSubBar,
},
};
</script>
<style scoped>
......@@ -167,9 +192,34 @@ export default {
line-height: 1.5;
font-size: 14px;
}
blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, html, input, lengend, li, ol, p, pre, td, textarea, th, ul {
margin: 0;
padding: 0;
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
html,
input,
lengend,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
margin: 0;
padding: 0;
}
.mv_list__item {
......
src/views/musicLibrary/SongerDetail.vue
浏览文件 @ cc7fd6ad
<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 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>
<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>
</dd>
</dl>
</div>
<ul id="m_tabs" class="m-tabs f-cb">
<li class="fst">
<a href="/artist?id=5781" class="z-slt"><em>热门作品</em></a>
</li>
<li>
<a href="/artist/album?id=5781"><em>所有专辑</em></a>
</li>
<li>
<a href="/artist/mv?id=5781"><em>相关MV</em></a>
</li>
<li>
<a href="/artist/desc?id=5781"><em>艺人介绍</em></a>
</li>
</ul>
</div>
<ul id="m_tabs" class="m-tabs f-cb">
<li class="fst"><a href="/artist?id=5781" class="z-slt"><em>热门作品</em></a></li>
<li><a href="/artist/album?id=5781"><em>所有专辑</em></a></li>
<li><a href="/artist/mv?id=5781"><em>相关MV</em></a></li>
<li><a href="/artist/desc?id=5781"><em>艺人介绍</em></a></li>
</ul>
</div>
</template>
<script>
import { getUserDetail } from 'api';
import { getUserDetail } from "api";
export default {
data() {
return {
activeName: 'first',
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
})
getUserDetail(this.accountId).then((res) => {
console.log(res);
this.userObj = res.data;
});
},
methods: {
handleClick(tab, event) {
console.log(tab, event);
}
}
}
},
},
};
</script>
<style scoped>
......
src/views/musicLibrary/Songers.vue
浏览文件 @ cc7fd6ad
......@@ -3,20 +3,20 @@
<div class="mod_slide_box" style="position: relative;">
<div class='main' v-loading='loading'>
<TypeSelectBar>
<TypeSelectSubBar
<type-select-bar>
<type-select-sub-bar
:selectId="initial"
:items="initials"
@selectId="initialClick"/>
<TypeSelectSubBar
<type-select-sub-bar
:selectId="type"
:items="types"
@selectId="typeClick"/>
<TypeSelectSubBar
<type-select-sub-bar
:selectId="area"
:items="areas"
@selectId="areaClick"/>
</TypeSelectBar>
</type-select-bar>
<ul class="singer_list_txt" v-loading='loading'>
<li class="singer_list_txt__item" v-for="item in artists" :key="item.id">
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或