Skip to content

Y
Yz Music

zacharyzlj / Yz Music

通知 1
Star 0
Fork 0
Y
Yz Music

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

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

update 

* improve songer detail page
* improve ranking page
* add new css
* fix toplist id error
上级 2fe952d1
隐藏空白更改
内联 并排
Showing with 138 addition and 29 deletion
src/assets/css/fakeqqmusic.css
浏览文件 @ 2c43d270
......@@ -7,6 +7,11 @@
background-color: #31c27c;
color: #fff;
}
.mod_btn_green:hover {
background-color: #2caf6f;
border-color: #2caf6f;
color: #fff;
}
.mod_btn,
.mod_btn_green {
border-radius: 2px;
......@@ -1095,3 +1100,41 @@ img .playlist__pic {
*width: 100%;
margin: 20px 30px 4px;
}
/*
*
*
*
*
*
*
*
* pop detail */
.popup_data_detail {
position: absolute;
top: 364px;
right: 303px;
width: 580px;
background: #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.35);
border-radius: 4px;
border: 1px solid #ddd;
z-index: 99;
}
.popup_data_detail__cont {
max-height: 400px;
font-size: 14px;
line-height: 22px;
margin: 30px 5px 30px 10px;
overflow-y: auto;
}
.popup_data_detail__cont p,
.popup_data_detail__tit {
margin: 0 24px 0 19px;
}
.popup_data_detail__tit {
line-height: 22px;
font-size: 20px;
font-weight: 400;
padding: 0 0 20px;
}
src/views/musicLibrary/Ranking.vue
浏览文件 @ 2c43d270
......@@ -148,7 +148,13 @@
<div class="songlist__rank">
<i :class="processRanking(song.rankingChange)"></i
>{{ song.rankingChange == -9999 ? "" : song.rankingChange }}
>{{
song.rankingChange > 0
? song.rankingChange
: song.rankingChange == -9999
? ""
: song.rankingChange * -1
}}
</div>
<div class="songlist__songname">
......@@ -224,7 +230,7 @@ export default {
specialRankingtype: [
{ name: "古典榜", dataId: "71384707" },
{ name: "说唱榜", dataId: "99131959" },
{ name: "电子榜", dataId: "187894795" },
{ name: "电子榜", dataId: "1978921795" },
{ name: "ACG榜", dataId: "71385702" },
{ name: "乡村榜", dataId: "3112516681" },
{ name: "摇滚榜", dataId: "5059633707" },
......
src/views/musicLibrary/SongerDetail.vue
浏览文件 @ 2c43d270
......@@ -33,7 +33,9 @@
{{ songer.desc }}
</div>
<a href="javascript:;" class="js_desc">[更多]</a>
<a href="javascript:;" class="js_desc" @click="toggleShowMoreInfo"
>[更多]</a
>
</div>
<ul class="mod_data_statistic">
......@@ -69,9 +71,6 @@
<a class="mod_btn_green js_singer_radio" @click="playHotSongs">
<i class="mod_btn_green__icon_play"></i>播放歌手热门歌曲
</a>
<a href="javascript:;" class="mod_btn js_follow">
<i class="mod_btn__icon_more"> </i>关注 1.7万
</a>
</div>
</div>
</div>
......@@ -136,7 +135,7 @@
</div>
</div>
<div class="mod_part" v-if="albums">
<div class="mod_part" v-if="albums.length > 0">
<div class="part__hd">
<h2 class="part__tit">专辑</h2>
</div>
......@@ -158,15 +157,21 @@
:src="album.img"
:alt="album.name"
/>
<i class="mod_cover__icon_play js_play"></i>
<i
class="mod_cover__icon_play js_play"
@click="playAlbum(album.id)"
></i>
</a>
</div>
<h4 class="playlist__title">
<span class="playlist__title_txt"
><a :title="album.name" class="js_album">{{
album.name
}}</a></span
>
<span class="playlist__title_txt">
<a
class="js_album"
:title="album.name"
@click="gotoAlbumDetail(album.id)"
>{{ album.name }}</a
>
</span>
</h4>
<div class="playlist__other">{{ album.publishTime }}</div>
<a
......@@ -180,7 +185,7 @@
</div>
</div>
<div class="mod_part" v-if="mvs">
<div class="mod_part" v-if="mvs.length > 0">
<div class="part__hd">
<h2 class="part__tit">MV</h2>
......@@ -217,7 +222,7 @@
</div>
</div>
<div class="mod_part" id="similar" style="" v-if="simiSongers">
<div class="mod_part" id="similar" style="" v-if="simiSongers.length > 0">
<div class="part__hd">
<h2 class="part__tit">相似歌手</h2>
</div>
......@@ -231,8 +236,9 @@
<div class="singer_list__item_box">
<a
class="singer_list__cover js_singer"
:title="songer.name"
hidefocus="true"
:title="songer.name"
@click="gotoSongerDetail({ id: songer.id })"
>
<img
class="singer_list__pic"
......@@ -242,9 +248,12 @@
/>
</a>
<h3 class="singer_list__title">
<a class="js_singer" :title="songer.name">{{
songer.name
}}</a>
<a
class="js_singer"
:title="songer.name"
@click="gotoSongerDetail({ id: songer.id })"
>{{ songer.name }}</a
>
</h3>
</div>
</li>
......@@ -252,6 +261,25 @@
</div>
</div>
</div>
<div
class="popup_data_detail"
id="popup_data_detail"
data-aria="popup"
style="z-index: 2147483647"
:style="{ display: moreInfo ? '' : 'none' }"
v-if="songer.desc"
>
<div class="popup_data_detail__cont">
<h3 class="popup_data_detail__tit">歌手简介</h3>
<p v-for="(line, idx) in songer.desc.split('\n')" :key="idx">
{{ line }}
</p>
<p></p>
</div>
<i class="popup_data_detail__arrow"></i>
</div>
</div>
</template>
......@@ -264,6 +292,7 @@ import {
getSimiSongers,
getSongerAlbums,
getSongerMvs,
getAlbum,
} from "api";
import {
createSonger,
......@@ -278,19 +307,18 @@ import {
export default {
data() {
return {
activeName: "first",
moreInfo: false,
id: null,
songer: {},
simiSongers: null,
simiSongers: [],
hotSongs: [],
songs: [],
albums: null,
mvs: null,
albums: [],
mvs: [],
};
},
created() {
this.id = this.$route.query.id;
this.accountId = this.$route.query.accountId;
this.init();
},
methods: {
......@@ -322,6 +350,7 @@ export default {
// Get songer album
const res4 = await getSongerAlbums({ id: this.id, limit: 5, offset: 0 });
console.log(res4);
this.albums = res4.data.hotAlbums.map(
({ id, name, publishTime, artists, picUrl }) => {
return createAlbum({
......@@ -333,7 +362,6 @@ export default {
});
}
);
console.log(this.albums);
// Get songer mv
const res5 = await getSongerMvs(this.id);
......@@ -350,11 +378,40 @@ export default {
}
);
this.mvs = mvs.length > 5 ? mvs.slice(0, 5) : mvs;
console.log(this.mvs);
},
playHotSongs() {
playSonglist(this.hotSongs);
},
toggleShowMoreInfo() {
this.moreInfo = !this.moreInfo;
},
playAlbum(id) {
getAlbum(id).then((res) => {
let songs = res.data.songs.map(
({ id, name, ar, dt, al, mv, publishTime }) => {
return createSong({
id,
name,
artists: ar,
duration: dt,
albumName: al.name,
mvId: mv,
img: al.picUrl,
});
}
);
playSonglist(songs);
});
},
gotoAlbumDetail(id) {
this.$router.push({
path: "/musicLibrary/albumDetail",
query: { id: id },
});
},
gotoSongerDetail(query) {
this.$router.push({ path: "/musicLibrary/songerDetail", query: query });
},
},
components: {
ModListMenu,
......@@ -526,4 +583,9 @@ ul {
.mod_mv {
height: 183px;
}
.popup_data_detail {
top: 128px;
right: 85px;
}
</style>
src/views/musicLibrary/Songers.vue
浏览文件 @ 2c43d270
......@@ -29,9 +29,7 @@
href="javascript:;"
class="singer_list_txt__link js_singer"
:title="item.name"
@click="
gotoSongerDetail({ id: item.id, accountId: item.accountId })
"
@click="gotoSongerDetail({ id: item.id })"
>{{ item.name }}</a
>
</li>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或