Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zacharyzlj
Yz Music
提交
2206d2b8
Y
Yz Music
项目概览
zacharyzlj
/
Yz Music
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
Y
Yz Music
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
2206d2b8
编写于
2月 19, 2021
作者:
Z
Zachary
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: add new album page
* fix some css bug * imporve css
上级
02363f15
变更
8
隐藏空白更改
内联
并排
Showing
8 changed file
with
744 addition
and
273 deletion
+744
-273
src/assets/css/base.css
src/assets/css/base.css
+8
-0
src/assets/css/fakeqqmusic.css
src/assets/css/fakeqqmusic.css
+284
-3
src/components/content/HomeTop.vue
src/components/content/HomeTop.vue
+3
-0
src/components/content/RecommendedBar.vue
src/components/content/RecommendedBar.vue
+1
-0
src/views/musicLibrary/AlbumDetail.vue
src/views/musicLibrary/AlbumDetail.vue
+435
-0
src/views/musicLibrary/NewDisc.vue
src/views/musicLibrary/NewDisc.vue
+12
-1
src/views/musicLibrary/Ranking.vue
src/views/musicLibrary/Ranking.vue
+1
-0
src/views/musicLibrary/SongDetail.vue
src/views/musicLibrary/SongDetail.vue
+0
-269
未找到文件。
src/assets/css/base.css
浏览文件 @
2206d2b8
...
...
@@ -25,3 +25,11 @@ img {
border
:
0
none
;
/*image-rendering: optimizeQuality;*/
}
h1
,
h2
,
h3
,
h4
,
h5
,
h6
{
font-size
:
100%
;
}
src/assets/css/fakeqqmusic.css
浏览文件 @
2206d2b8
...
...
@@ -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
;
}
src/components/content/HomeTop.vue
浏览文件 @
2206d2b8
...
...
@@ -89,6 +89,9 @@ export default {
</
script
>
<
style
scoped
>
.list
{
font-size
:
31px
;
}
.toplist_main
{
margin
:
0
auto
;
text-align
:
center
;
...
...
src/components/content/RecommendedBar.vue
浏览文件 @
2206d2b8
...
...
@@ -136,6 +136,7 @@ export default {
.recommended_list
{
letter-spacing
:
20px
;
text-align
:
center
;
font-size
:
31px
;
}
.playlist
{
display
:
inline-block
;
...
...
src/views/musicLibrary/AlbumDetail.vue
0 → 100644
浏览文件 @
2206d2b8
<
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
>
src/views/musicLibrary/NewDisc.vue
浏览文件 @
2206d2b8
...
...
@@ -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
)
{
...
...
src/views/musicLibrary/Ranking.vue
浏览文件 @
2206d2b8
...
...
@@ -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/, '')"
>
...
...
src/views/musicLibrary/SongDetail.vue
浏览文件 @
2206d2b8
...
...
@@ -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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录