提交 2206d2b8 编写于 作者: Z Zachary

feat: add new album page

* fix some css bug
* imporve css
上级 02363f15
......@@ -25,3 +25,11 @@ img {
border: 0 none;
/*image-rendering: optimizeQuality;*/
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
}
......@@ -399,14 +399,12 @@
clear: both;
}
.songlist__item {
height: 80px;
}
.songlist__header,
.songlist__item {
padding-left: 122px;
}
.songlist__item {
height: 80px;
clear: both;
font-size: 0;
overflow: hidden;
......@@ -417,6 +415,9 @@
padding-left: 122px;
padding-right: 95px;
}
.songlist__item--even {
background-color: rgba(0, 0, 0, 0.01);
}
.songlist__album,
.songlist__artist,
......@@ -738,3 +739,283 @@ img .playlist__pic {
text-overflow: ellipsis;
height: 22px;
}
/*
*
*
*
*
*
*
* */
.mod_data {
position: relative;
height: 250px;
padding-left: 305px;
margin-top: 40px;
margin-bottom: 35px;
}
.data__cover {
position: absolute;
left: 0;
top: 0;
width: 250px;
height: 250px;
}
.data__cont {
padding-top: 13px;
}
.data__photo {
width: 100%;
height: 100%;
object-fit: cover;
}
.data__name_txt {
float: left;
font-size: 31px;
line-height: 50px;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 70%;
margin-right: 10px;
}
.data__name {
overflow: hidden;
height: 50px;
line-height: 50px;
}
.icon_singer {
float: left;
width: 16px;
height: 16px;
background-position: -20px -240px;
margin: 5px 7px 0 0;
}
.data__singer_txt {
font-size: 16px;
color: #333;
}
.data__info {
width: 450px;
overflow: hidden;
padding-top: 8px;
}
.data_info__item {
float: left;
line-height: 27px;
width: 166px;
margin-right: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
}
.data_info__item--even {
width: 250px;
}
.data__actions {
position: absolute;
bottom: 23px;
font-size: 0;
}
.data__actions .mod_btn,
.data__actions .mod_btn_green {
min-width: 122px;
text-align: center;
padding: 0 18px;
font-family: 微软雅黑;
}
.mod_btn_green {
border: 1px solid #31c27c;
background-color: #31c27c;
color: #fff;
}
.mod_btn {
border: 1px solid #c9c9c9;
color: #000;
}
.mod_btn,
.mod_btn_green {
border-radius: 2px;
font-size: 14px;
margin-right: 6px;
padding: 0 23px;
height: 38px;
line-height: 38px;
display: inline-block;
white-space: nowrap;
box-sizing: border-box;
overflow: hidden;
}
.mod_btn_green__icon_play {
width: 13px;
height: 16px;
background-position: -80px -220px;
vertical-align: -3px;
}
.mod_btn__icon_like {
width: 16px;
height: 16px;
background-position: -60px 0;
vertical-align: -4px;
}
.mod_btn__icon_comment {
width: 16px;
height: 16px;
background-position: -140px -120px;
vertical-align: -3px;
}
.mod_btn__icon_menu {
width: 16px;
height: 16px;
background-position: -20px -80px;
}
.detail_layout {
padding-right: 343px;
}
.detail_layout__main {
float: left;
width: 100%;
padding-bottom: 20px;
}
.detail_layout__other {
float: right;
position: relative;
width: 290px;
margin-right: -343px;
padding-bottom: 20px;
}
.other_part {
overflow: hidden;
margin-bottom: 10px;
}
.other_part__tit {
font-size: 20px;
font-weight: 400;
line-height: 46px;
}
.mod_playlist {
overflow: hidden;
font-size: 0;
}
.mod_playlist .playlist__list {
margin-right: -20px;
}
.mod_playlist .playlist__item {
display: inline-block;
width: 20%;
padding-bottom: 44px;
overflow: hidden;
font-size: 14px;
vertical-align: top;
}
.mod_playlist .playlist__item_box {
position: relative;
margin-right: 20px;
}
.mod_playlist .playlist__cover {
position: relative;
display: block;
overflow: hidden;
padding-top: 100%;
margin-bottom: 15px;
}
.data__cover_mask {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 266px;
background: url(https://y.gtimg.cn/mediastyle/yqq/img/album_cover.png?max_age=2592000&v=38b0c07edbf02967081562b016d3ef14)
0 0 no-repeat;
pointer-events: none;
}
.mod_playlist .playlist__pic {
height: 100%;
object-fit: cover;
}
.mod_playlist .playlist__pic {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.mod_playlist .playlist__title {
overflow: hidden;
}
.mod_playlist .playlist__title_txt {
float: left;
max-width: 100%;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
line-height: 22px;
max-height: 44px;
}
.mod_playlist .playlist__author,
.mod_playlist .playlist__author a,
.mod_playlist .playlist__other {
color: #999;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 22px;
}
.mod_mv_list {
overflow: hidden;
}
.detail_layout__other .playlist__item {
width: 33.333333%;
padding-bottom: 14px;
}
.detail_layout__other .mv_list__item_box {
margin-right: 0;
}
.detail_layout__other .mv_list__cover,
.detail_layout__other .playlist__cover {
margin-bottom: 4px;
}
.detail_layout__other .playlist__cover:hover .playlist__pic,
.detail_layout__other .playlist__pic {
-webkit-transform: none;
-webkit-transition: none;
transform: none;
transition: none;
}
.detail_layout__other .mv_list__singer,
.detail_layout__other .mv_list__title,
.detail_layout__other .playlist__title,
.detail_layout__other .playlist__title_txt {
line-height: 1.5;
margin-bottom: 0;
}
.mod_popup_tips {
position: fixed;
top: 50%;
left: 50%;
padding: 37px 46px 25px;
line-height: 22px;
border-radius: 3px;
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#B2000000', endColorstr='#B2000000');
background: rgba(0, 0, 0, 0.7);
z-index: 999;
text-align: center;
}
.popup_tips__icon {
display: block;
width: 46px;
height: 46px;
background-position: 0 -150px;
margin: 0 auto 16px;
}
.popup_tips__tit {
font-size: 14px;
color: #fff;
font-weight: 400;
}
......@@ -89,6 +89,9 @@ export default {
</script>
<style scoped>
.list {
font-size: 31px;
}
.toplist_main {
margin: 0 auto;
text-align: center;
......
......@@ -136,6 +136,7 @@ export default {
.recommended_list {
letter-spacing: 20px;
text-align: center;
font-size: 31px;
}
.playlist {
display: inline-block;
......
<template>
<div class="main">
<div
class="mod_data"
itemscope=""
itemtype="http://schema.org/MusicRecording"
>
<span class="data__cover">
<img
id="albumImg"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;"
:src="album.img"
:alt="album.name"
class="data__photo"
/>
<i class="data__cover_mask"></i>
</span>
<div class="data__cont">
<div class="data__name">
<h1 class="data__name_txt" :title="album.name">{{ album.name }}</h1>
</div>
<div class="data__singer">
<i class="icon_singer sprite"></i
><a
class="js_singer data__singer_txt"
itemprop="byArtist"
:title="album.artists"
>{{ album.artists }}</a
>
</div>
<ul class="data__info">
<li class="data_info__item">类型:{{ album.type }}</li>
<li class="data_info__item data_info__item--even">语种:国语</li>
<li class="data_info__item">发行时间:2021-02-13</li>
<li class="data_info__item data_info__item--even">
唱片公司:<span>{{ album.company }}</span>
</li>
</ul>
<div class="data__actions" role="toolbar">
<a class="mod_btn_green js_all_play"
><i class="mod_btn_green__icon_play"></i>播放全部</a
>
<a
href="javascript:;"
class="mod_btn js_fav_album"
data-stat="y_new.album.header.love"
data-status="0"
><i class="mod_btn__icon_like"></i>收藏</a
>
<a
class="mod_btn js_into_comment"
data-stat="y_new.album.gotocomment"
href="#comment_box"
><i class="mod_btn__icon_comment"></i>评论(15)</a
>
<a
href="javascript:;"
class="mod_btn js_more"
data-mid="000QQkw74FD8iE"
data-id="17519496"
data-stat="y_new.album.header.more"
><i class="mod_btn__icon_menu"></i>更多</a
>
</div>
</div>
</div>
<div class="detail_layout">
<div class="detail_layout__main">
<div class="mod_songlist">
<ul class="songlist__header">
<li class="songlist__edit songlist__edit--check sprite">
<input type="checkbox" class="songlist__checkbox js_check_all" />
</li>
<li class="songlist__header_name">歌曲</li>
<li class="songlist__header_author">歌手</li>
<li class="songlist__header_time">时长</li>
</ul>
<ul class="songlist__list" id="song_box">
<li v-for="(song, idx) in songs" :key="song.id">
<div
class="songlist__item"
:claa="(idx + 1) % 2 == 0 ? 'songlist__item--even' : ''"
>
<div class="songlist__edit songlist__edit--check sprite">
<input type="checkbox" class="songlist__checkbox" />
</div>
<div class="songlist__number">{{ idx + 1 }}</div>
<div class="songlist__songname">
<!-- <i
class="songlist__icon songlist__icon_exclusive sprite"
title="独家"
></i> -->
<span class="songlist__songname_txt">
<a :title="song.name">{{ song.name }}</a>
</span>
<div class="mod_list_menu">
<a
class="list_menu__item list_menu__play js_play"
title="播放"
>
<i class="list_menu__icon_play"></i>
<span class="icon_txt">播放</span>
</a>
<a
href="javascript:;"
class="list_menu__item list_menu__add js_fav"
title="添加到歌单"
aria-haspopup="true"
data-target="menu_add"
>
<i class="list_menu__icon_add"></i>
<span class="icon_txt">添加到歌单</span>
</a>
<a
href="javascript:;"
class="list_menu__item list_menu__down js_down"
title="下载"
aria-haspopup="true"
data-target="menu_down"
>
<i class="list_menu__icon_down"></i>
<span class="icon_txt">下载</span>
</a>
<a
href="javascript:;"
class="list_menu__item list_menu__share js_share"
title="分享"
aria-haspopup="true"
data-aria="menu_share"
>
<i class="list_menu__icon_share"></i>
<span class="icon_txt">分享</span>
</a>
</div>
</div>
<div class="songlist__artist">
<a :title="song.artistsText" class="singer_name">{{
song.artistsText
}}</a>
</div>
<div class="songlist__time">{{ song.durationText }}</div>
<div class="songlist__other"></div>
</div>
</li>
</ul>
</div>
</div>
<div class="detail_layout__other">
<div class="mod_about" id="album_desc" style="display: ">
<h3 class="about__tit">简介</h3>
<div class="about__cont">
<p>{{ album.desc }}</p>
</div>
<!-- <a
href="javascript:;"
data-stat="y_new.album.moreinfo"
class="about__more"
data-left="0"
data-top="-187"
data-target="popup_data_detail"
style="display: "
>[更多]</a
> -->
</div>
<div class="other_part">
<h3 class="other_part__tit">此歌手的其他专辑</h3>
<div class="mod_playlist">
<ul class="playlist__list">
<li
class="playlist__item"
onmouseover="this.className=(this.className+' playlist__item--hover')"
onmouseout="this.className=this.className.replace(/ playlist__item--hover/, '')"
>
<div class="playlist__item_box">
<div class="playlist__cover mod_cover">
<a
href="//y.qq.com/n/yqq/album/001ybzgu1cVjIO.html"
class="js_album"
data-stat="y_new.album.otheralbum.click"
data-albummid="001ybzgu1cVjIO"
data-albumid="7270497"
><img
src="//y.gtimg.cn/music/photo_new/T002R90x90M000001ybzgu1cVjIO_1.jpg?max_age=2592000"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;"
alt="全职高手OST"
class="playlist__pic" /><i
class="mod_cover__icon_play js_play"
data-stat="y_new.album.otheralbum.play"
></i
></a>
</div>
<h4 class="playlist__title">
<span class="playlist__title_txt"
><a
href="//y.qq.com/n/yqq/album/001ybzgu1cVjIO.html"
class="js_album"
data-stat="y_new.album.otheralbum.click"
data-albummid="001ybzgu1cVjIO"
data-albumid="7270497"
title="全职高手OST"
>全职高手OST</a
></span
>
</h4>
<div class="playlist__author">2019-08-02</div>
</div>
</li>
<li
class="playlist__item"
onmouseover="this.className=(this.className+' playlist__item--hover')"
onmouseout="this.className=this.className.replace(/ playlist__item--hover/, '')"
>
<div class="playlist__item_box">
<div class="playlist__cover mod_cover">
<a
href="//y.qq.com/n/yqq/album/000hweUb3m5RLy.html"
class="js_album"
data-stat="y_new.album.otheralbum.click"
data-albummid="000hweUb3m5RLy"
data-albumid="5984191"
><img
src="//y.gtimg.cn/music/photo_new/T002R90x90M000000hweUb3m5RLy_1.jpg?max_age=2592000"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;"
alt="明日之后的你"
class="playlist__pic" /><i
class="mod_cover__icon_play js_play"
data-stat="y_new.album.otheralbum.play"
></i
></a>
</div>
<h4 class="playlist__title">
<span class="playlist__title_txt"
><a
href="//y.qq.com/n/yqq/album/000hweUb3m5RLy.html"
class="js_album"
data-stat="y_new.album.otheralbum.click"
data-albummid="000hweUb3m5RLy"
data-albumid="5984191"
title="明日之后的你"
>明日之后的你</a
></span
>
</h4>
<div class="playlist__author">2019-01-25</div>
</div>
</li>
<li
class="playlist__item"
onmouseover="this.className=(this.className+' playlist__item--hover')"
onmouseout="this.className=this.className.replace(/ playlist__item--hover/, '')"
>
<div class="playlist__item_box">
<div class="playlist__cover mod_cover">
<a
href="//y.qq.com/n/yqq/album/001SMDDu4L2gbZ.html"
class="js_album"
data-stat="y_new.album.otheralbum.click"
data-albummid="001SMDDu4L2gbZ"
data-albumid="5863053"
><img
src="//y.gtimg.cn/music/photo_new/T002R90x90M000001SMDDu4L2gbZ_1.jpg?max_age=2592000"
onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;"
alt="福气拱拱来"
class="playlist__pic" /><i
class="mod_cover__icon_play js_play"
data-stat="y_new.album.otheralbum.play"
></i
></a>
</div>
<h4 class="playlist__title">
<span class="playlist__title_txt"
><a
href="//y.qq.com/n/yqq/album/001SMDDu4L2gbZ.html"
class="js_album"
data-stat="y_new.album.otheralbum.click"
data-albummid="001SMDDu4L2gbZ"
data-albumid="5863053"
title="福气拱拱来"
>福气拱拱来</a
></span
>
</h4>
<div class="playlist__author">2019-01-15</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { getAlbum } from "api";
import { createSong } from "common/utils";
export default {
data() {
return {
id: this.$route.query.id,
album: {},
songs: {},
};
},
mounted() {
this.init();
},
methods: {
init() {
getAlbum(this.id).then((res) => {
console.log(res);
let ds = res.data;
let album = {
id: ds.album.id,
name: ds.album.name,
img: ds.album.picUrl,
desc: ds.album.description,
artists: ds.album.artist.name,
type: ds.album.type,
version: ds.album.subType,
company: ds.album.company,
publishTime: ds.album.publishTime,
};
this.album = album;
console.log(album);
this.songs = ds.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,
});
}
);
console.log(this.songs);
});
},
},
};
</script>
<style scoped>
.main {
z-index: 2;
}
.main,
.section_inner {
max-width: 1200px;
margin: 0 auto;
position: relative;
}
blockquote,
body,
button,
dd,
dl,
dt,
fieldset,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
html,
input,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
margin: 0;
margin-right: 0px;
padding: 0;
}
.songlist__header {
background-color: #fbfbfd;
}
.songlist__header {
height: 50px;
line-height: 50px;
background-color: rgba(0, 0, 0, 0.01);
color: #999;
}
.songlist__header,
.songlist__item {
position: relative;
padding-left: 46px;
padding-right: 95px;
}
.songlist__album,
.songlist__artist,
.songlist__number,
.songlist__other,
.songlist__time {
line-height: 50px;
height: 50px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 14px;
}
.songlist__song_txt,
.songlist__time {
color: #999;
}
</style>
......@@ -43,7 +43,12 @@
</div>
<h4 class="playlist__title">
<span class="playlist__title_txt">
<a class="js_album" :title="album.name">{{ album.name }}</a>
<a
class="js_album"
:title="album.name"
@click="gotoAlbumDetail(album.id)"
>{{ album.name }}</a
>
</span>
</h4>
......@@ -122,6 +127,12 @@ export default {
console.log(v);
this.page = v;
},
gotoAlbumDetail(id) {
this.$router.push({
path: "/musicLibrary/albumDetail",
query: { id: id },
});
},
},
watch: {
page(newPage) {
......
......@@ -131,6 +131,7 @@
<li v-for="(song, idx) in listDatas" :key="song.id" :id="song.id">
<div
class="songlist__item"
:class="idx % 2 == 0 ? 'songlist__item--even' : ''"
onmouseover="this.className=(this.className+' songlist__item--hover')"
onmouseout="this.className=this.className.replace(/ songlist__item--hover/, '')"
>
......
......@@ -340,149 +340,7 @@ ul {
margin-right: 0px;
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
}
.mod_data {
position: relative;
height: 250px;
padding-left: 305px;
margin-top: 40px;
margin-bottom: 35px;
}
.data__cover {
position: absolute;
left: 0;
top: 0;
width: 250px;
height: 250px;
}
.data__cont {
padding-top: 13px;
}
.data__photo {
width: 100%;
height: 100%;
object-fit: cover;
}
.data__name {
overflow: hidden;
height: 50px;
line-height: 50px;
}
.data__name_txt {
float: left;
font-size: 31px;
line-height: 50px;
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 70%;
margin-right: 10px;
}
.icon_singer {
float: left;
width: 16px;
height: 16px;
background-position: -20px -240px;
margin: 5px 7px 0 0;
}
.data__singer_txt {
font-size: 16px;
color: #333;
}
.data__info {
width: 450px;
overflow: hidden;
padding-top: 8px;
}
.data_info__item {
float: left;
line-height: 27px;
width: 166px;
margin-right: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;
}
.data_info__item--even {
width: 250px;
}
.data__actions {
position: absolute;
bottom: 23px;
font-size: 0;
}
.data__actions .mod_btn,
.data__actions .mod_btn_green {
min-width: 122px;
text-align: center;
padding: 0 18px;
font-family: 微软雅黑;
}
.mod_btn_green {
border: 1px solid #31c27c;
background-color: #31c27c;
color: #fff;
}
.mod_btn {
border: 1px solid #c9c9c9;
color: #000;
}
.mod_btn,
.mod_btn_green {
border-radius: 2px;
font-size: 14px;
margin-right: 6px;
padding: 0 23px;
height: 38px;
line-height: 38px;
display: inline-block;
white-space: nowrap;
box-sizing: border-box;
overflow: hidden;
}
.mod_btn_green__icon_play {
width: 13px;
height: 16px;
background-position: -80px -220px;
vertical-align: -3px;
}
.mod_btn__icon_like {
width: 16px;
height: 16px;
background-position: -60px 0;
vertical-align: -4px;
}
.mod_btn__icon_comment {
width: 16px;
height: 16px;
background-position: -140px -120px;
vertical-align: -3px;
}
.mod_btn__icon_menu {
width: 16px;
height: 16px;
background-position: -20px -80px;
}
.detail_layout {
padding-right: 343px;
}
.detail_layout__main {
float: left;
width: 100%;
padding-bottom: 20px;
}
.lyric__hd {
overflow: hidden;
line-height: 46px;
......@@ -520,131 +378,4 @@ h6 {
.c_tx_highlight {
color: #31c27c;
}
.detail_layout__other {
float: right;
position: relative;
width: 290px;
margin-right: -343px;
padding-bottom: 20px;
}
.other_part {
overflow: hidden;
margin-bottom: 10px;
}
.other_part__tit {
font-size: 20px;
font-weight: 400;
line-height: 46px;
}
.mod_playlist {
overflow: hidden;
font-size: 0;
}
.mod_playlist .playlist__list {
margin-right: -20px;
}
.mod_playlist .playlist__item {
display: inline-block;
width: 20%;
padding-bottom: 44px;
overflow: hidden;
font-size: 14px;
vertical-align: top;
}
.mod_playlist .playlist__item_box {
position: relative;
margin-right: 20px;
}
.mod_playlist .playlist__cover {
position: relative;
display: block;
overflow: hidden;
padding-top: 100%;
margin-bottom: 15px;
}
.mod_playlist .playlist__pic {
height: 100%;
object-fit: cover;
}
.mod_playlist .playlist__pic {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.mod_playlist .playlist__title {
overflow: hidden;
}
.mod_playlist .playlist__title_txt {
float: left;
max-width: 100%;
font-weight: 400;
overflow: hidden;
text-overflow: ellipsis;
line-height: 22px;
max-height: 44px;
}
.mod_playlist .playlist__author,
.mod_playlist .playlist__author a,
.mod_playlist .playlist__other {
color: #999;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
height: 22px;
}
.mod_mv_list {
overflow: hidden;
}
.detail_layout__other .playlist__item {
width: 33.333333%;
padding-bottom: 14px;
}
.detail_layout__other .mv_list__item_box {
margin-right: 0;
}
.detail_layout__other .mv_list__cover,
.detail_layout__other .playlist__cover {
margin-bottom: 4px;
}
.detail_layout__other .playlist__cover:hover .playlist__pic,
.detail_layout__other .playlist__pic {
-webkit-transform: none;
-webkit-transition: none;
transform: none;
transition: none;
}
.detail_layout__other .mv_list__singer,
.detail_layout__other .mv_list__title,
.detail_layout__other .playlist__title,
.detail_layout__other .playlist__title_txt {
line-height: 1.5;
margin-bottom: 0;
}
.mod_popup_tips {
position: fixed;
top: 50%;
left: 50%;
padding: 37px 46px 25px;
line-height: 22px;
border-radius: 3px;
filter: progid:DXImageTransform.Microsoft.gradient(enabled='true', startColorstr='#B2000000', endColorstr='#B2000000');
background: rgba(0, 0, 0, 0.7);
z-index: 999;
text-align: center;
}
.popup_tips__icon {
display: block;
width: 46px;
height: 46px;
background-position: 0 -150px;
margin: 0 auto 16px;
}
.popup_tips__tit {
font-size: 14px;
color: #fff;
font-weight: 400;
}
</style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册