Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zacharyzlj
Yz Music
提交
a8f74658
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 搜索 >>
提交
a8f74658
编写于
2月 20, 2021
作者:
Z
Zachary
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update
* add playlist detail page * add DetailInfoCard component
上级
2c43d270
变更
10
隐藏空白更改
内联
并排
Showing
10 changed file
with
554 addition
and
255 deletion
+554
-255
src/assets/css/base.css
src/assets/css/base.css
+0
-3
src/assets/css/fakeqqmusic.css
src/assets/css/fakeqqmusic.css
+1
-1
src/components/common/DetailInfoCard.vue
src/components/common/DetailInfoCard.vue
+191
-0
src/components/common/Player.vue
src/components/common/Player.vue
+12
-16
src/components/content/RecommendedBar.vue
src/components/content/RecommendedBar.vue
+12
-3
src/router/index.js
src/router/index.js
+3
-1
src/views/musicLibrary/AlbumDetail.vue
src/views/musicLibrary/AlbumDetail.vue
+11
-73
src/views/musicLibrary/PlaylistDetail.vue
src/views/musicLibrary/PlaylistDetail.vue
+304
-0
src/views/musicLibrary/SongDetail.vue
src/views/musicLibrary/SongDetail.vue
+12
-80
src/views/musicLibrary/SongerDetail.vue
src/views/musicLibrary/SongerDetail.vue
+8
-78
未找到文件。
src/assets/css/base.css
浏览文件 @
a8f74658
...
...
@@ -14,9 +14,6 @@ a {
color
:
#000
;
text-decoration
:
none
;
}
a
:hover
{
color
:
#31c27c
;
}
li
{
list-style
:
none
;
...
...
src/assets/css/fakeqqmusic.css
浏览文件 @
a8f74658
...
...
@@ -852,7 +852,7 @@ img .playlist__pic {
.data_info__item
{
float
:
left
;
line-height
:
27px
;
width
:
166
px
;
width
:
200
px
;
margin-right
:
10px
;
white-space
:
nowrap
;
overflow
:
hidden
;
...
...
src/components/common/DetailInfoCard.vue
0 → 100644
浏览文件 @
a8f74658
<
template
>
<div
class=
"mod_data"
>
<span
class=
"data__cover"
id=
"logo"
>
<!-- 头像 S-->
<img
class=
"data__photo"
onerror=
"this.src='//y.gtimg.cn/mediastyle/global/img/playlist_300.png?max_age=31536000';this.onerror=null;"
:src=
"obj.img"
:alt=
"obj.name"
:class=
"isSonger ? 'songer__photo' : ''"
/>
<i
class=
"data__cover_mask"
v-if=
"cardType == 'album'"
></i>
</span>
<div
class=
"data__cont"
>
<div
class=
"data__name js_box"
>
<h1
id=
"p_name_show"
class=
"data__name_txt"
:title=
"obj.name"
>
{{
obj
.
name
}}
</h1>
</div>
<!-- 名字 -->
<div
class=
"data__singer"
v-if=
"cardType != 'songer'"
>
<i
class=
"icon_singer sprite"
></i>
<a
class=
"data__singer_txt"
v-if=
"obj.creator"
:title=
"obj.creator"
>
{{
obj
.
creator
}}
</a>
<a
class=
"data__singer_txt"
v-if=
"obj.artistsText"
:title=
"obj.artistsText"
>
{{
obj
.
artistsText
}}
</a
>
</div>
<!-- 描述信息 -->
<div
class=
"data__desc"
id=
"singer_desc"
v-if=
"cardType == 'songer'"
>
<div
class=
"data__desc_txt"
id=
"short_desc"
>
{{
obj
.
desc
}}
</div>
<a
href=
"javascript:;"
class=
"js_desc"
@
click=
"moreClick"
>
[更多]
</a>
</div>
<!-- Info -->
<ul
class=
"data__info"
v-if=
"cardType != 'songer'"
>
<li
class=
"data_info__item js_box"
style=
"display: "
>
<div
class=
"data_tag_box"
v-if=
"obj.tags"
>
标签:
<span
id=
"choosebox1"
>
<a
class=
"data_info__tags js_jump"
v-for=
"tag in obj.tags"
:key=
"tag"
>
{{
tag
}}
</a>
</span>
</div>
</li>
<li
class=
"data_info__item"
v-if=
"obj.albumName"
>
专辑:
<a
class=
"js_album"
:title=
"obj.albumName"
>
{{
obj
.
albumName
}}
</a>
</li>
<li
class=
"data_info__item"
v-if=
"obj.type"
>
分类:
{{
obj
.
type
}}
</li>
<li
class=
"data_info__item"
v-if=
"obj.version"
>
类型:
{{
obj
.
version
}}
</li>
<li
class=
"data_info__item"
v-if=
"obj.durationText"
>
时长:
{{
obj
.
durationText
}}
</li>
<!--li class="data_info__item">创建时间:2018-03-29
</li-->
<li
class=
"data_info__item"
v-if=
"obj.playCount"
>
播放量:
{{
obj
.
playCount
}}
</li>
<li
class=
"data_info__item"
v-if=
"obj.shareCount"
>
收藏量:
{{
obj
.
subscribedCount
}}
</li>
<li
class=
"data_info__item"
v-if=
"obj.shareCount"
>
分享量:
{{
obj
.
shareCount
}}
</li>
<li
class=
"data_info__item"
v-if=
"obj.company"
>
唱片公司:
<span>
{{
obj
.
company
}}
</span>
</li>
<li
class=
"data_info__item"
v-if=
"obj.publishTime"
>
发行时间:
{{
obj
.
publishTime
}}
</li>
</ul>
<ul
class=
"mod_data_statistic"
v-if=
"cardType == 'songer'"
>
<li
class=
"data_statistic__item"
>
<a
class=
"js_goto_tab"
>
<span
class=
"data_statistic__tit"
>
单曲
</span>
<strong
class=
"data_statistic__number"
>
{{
obj
.
musicSize
}}
</strong>
</a>
</li>
<li
class=
"data_statistic__item"
>
<a
class=
"js_goto_tab"
>
<span
class=
"data_statistic__tit"
>
专辑
</span>
<strong
class=
"data_statistic__number"
>
{{
obj
.
albumSize
}}
</strong>
</a>
</li>
<li
class=
"data_statistic__item data_statistic__item--last"
>
<a
class=
"js_goto_tab"
>
<span
class=
"data_statistic__tit"
>
MV
</span>
<strong
class=
"data_statistic__number"
>
{{
obj
.
mvSize
}}
</strong>
</a>
</li>
</ul>
<div
class=
"data__actions"
v-if=
"cardType != 'songer'"
>
<a
class=
"mod_btn_green js_all_play"
@
click=
"btnClick('all')"
>
<i
class=
"mod_btn_green__icon_play"
></i>
{{
cardType
==
"
song
"
?
"
播放
"
:
"
播放全部
"
}}
</a>
<a
class=
"mod_btn js_fav_taoge"
@
click=
"btnClick('collection')"
>
<i
class=
"mod_btn__icon_like"
></i>
收藏
</a>
<a
class=
"mod_btn js_into_comment"
href=
"#comment_box"
@
click=
"btnClick('comment')"
>
<i
class=
"mod_btn__icon_comment"
></i>
评论()
</a>
<a
href=
"javascript:;"
class=
"mod_btn js_more"
@
click=
"btnClick('more')"
>
<i
class=
"mod_btn__icon_menu"
></i>
更多
</a>
</div>
<div
class=
"data__actions"
v-if=
"cardType == 'songer'"
>
<a
class=
"mod_btn_green js_singer_radio"
@
click=
"btnClick('hot')"
>
<i
class=
"mod_btn_green__icon_play"
></i>
播放歌手热门歌曲
</a>
</div>
</div>
</div>
</
template
>
<
script
>
export
default
{
props
:
{
obj
:
{
type
:
Object
,
default
:
{},
},
cardType
:
{
type
:
String
,
default
:
"
song
"
,
},
},
methods
:
{
btnClick
(
v
)
{
this
.
$emit
(
"
btnClick
"
,
v
);
},
moreClick
()
{
this
.
$emit
(
"
moreClick
"
,
true
);
},
},
};
</
script
>
<
style
scoped
>
h1
,
h2
,
h3
,
h4
,
h5
,
h6
,
li
,
ul
{
margin
:
0
;
margin-right
:
0px
;
padding
:
0
;
}
.songer__photo
{
border-radius
:
999px
;
}
.data_statistic__item
{
display
:
inline-block
;
border-right
:
solid
1px
#c9c9c9
;
text-align
:
center
;
padding-right
:
20px
;
margin-right
:
20px
;
font-size
:
18px
;
}
.data_statistic__item--last
{
border-right
:
0
none
;
}
</
style
>
src/components/common/Player.vue
浏览文件 @
a8f74658
...
...
@@ -51,10 +51,11 @@
hidefocus=
"true"
class=
"f-thide name fc1 f-fl"
:title=
"currentSong.name"
@
click=
"gotoSongDetail(currentSong.id)"
>
{{
currentSong
.
name
}}
</a
>
<span
class=
"by f-thide f-fl"
>
<span
title=
"Santa_SA/马也_Crabbi
t"
>
<span
:title=
"currentSong.artistsTex
t"
>
<a
v-if=
"hasCurrentSong"
class=
""
hidefocus=
"true"
>
{{
currentSong
.
artistsText
}}
</a>
...
...
@@ -110,17 +111,9 @@
>
</span>
</div>
</div>
<a
hidefocus=
"true"
class=
"icn icn-vol"
@
click=
"clickVolBtn"
></a>
<a
href=
"javascript:;"
hidefocus=
"true"
data-action=
"volume"
class=
"icn icn-vol"
@
click=
"clickVolBtn"
></a>
<a
href=
"javascript:;"
hidefocus=
"true"
data-action=
"mode"
class=
"icn"
:class=
"currentMode.icon"
:title=
"currentMode.name"
...
...
@@ -128,12 +121,7 @@
></a>
<span
class=
"add f-pr"
>
<span
class=
"tip"
style=
"display: none"
>
已添加到播放列表
</span>
<a
href=
"javascript:;"
title=
"播放列表"
hidefocus=
"true"
data-action=
"panel"
class=
"icn icn-list s-fc3"
<a
title=
"播放列表"
hidefocus=
"true"
class=
"icn icn-list s-fc3"
>
{{
playlist
.
length
}}
</a>
</span>
...
...
@@ -294,6 +282,14 @@ export default {
this
.
$store
.
commit
(
"
music/setPlayingState
"
,
true
);
}
},
gotoSongDetail
(
id
)
{
console
.
log
(
id
);
this
.
$router
.
push
({
path
:
"
/musicLibrary/songDetail
"
,
query
:
{
id
:
id
},
});
},
gotoSongerDetail
(
id
)
{},
},
computed
:
{
audio
()
{
...
...
src/components/content/RecommendedBar.vue
浏览文件 @
a8f74658
...
...
@@ -25,9 +25,9 @@
/>
</a>
<h4
class=
""
>
<span
class=
""
><a
href=
""
>
{{
item
.
name
}}
</a></span
>
<span
class=
""
>
<a
@
click=
"gotoPlaylistDetail(item.id)"
>
{{
item
.
name
}}
</a>
</span
>
</h4>
<div
class=
""
>
播放量:
{{
processCount
(
item
.
playCount
)
}}
</div>
</li>
...
...
@@ -126,6 +126,12 @@ export default {
});
});
},
gotoPlaylistDetail
(
id
)
{
this
.
$router
.
push
({
path
:
"
/musicLibrary/playlistDetail
"
,
query
:
{
id
:
id
},
});
},
},
};
</
script
>
...
...
@@ -201,4 +207,7 @@ export default {
filter
:
progid
:
DXImageTransform
.
Microsoft
.
gradient
(
enabled
=
'true'
,
startColorstr
=
'#4C000000'
,
endColorstr
=
'#4C000000'
);
background-color
:
rgba
(
0
,
0
,
0
,
0.3
);
}
a
:hover
{
color
:
#31c27c
;
}
</
style
>
src/router/index.js
浏览文件 @
a8f74658
...
...
@@ -11,6 +11,7 @@ const MV = () => import("views/musicLibrary/MV");
const
SongerDetail
=
()
=>
import
(
"
views/musicLibrary/SongerDetail
"
);
const
SongDetail
=
()
=>
import
(
"
views/musicLibrary/SongDetail
"
);
const
AlbumDetail
=
()
=>
import
(
"
views/musicLibrary/AlbumDetail
"
);
const
PlaylistDetail
=
()
=>
import
(
"
views/musicLibrary/PlaylistDetail
"
);
const
My
=
()
=>
import
(
"
views/My
"
);
...
...
@@ -33,7 +34,8 @@ const routes = [
{
path
:
"
mv
"
,
component
:
MV
},
{
path
:
"
songerDetail
"
,
name
:
"
songerDetail
"
,
component
:
SongerDetail
},
{
path
:
"
songDetail
"
,
component
:
SongDetail
},
{
path
:
"
albumDetail
"
,
component
:
AlbumDetail
}
{
path
:
"
albumDetail
"
,
component
:
AlbumDetail
},
{
path
:
"
playlistDetail
"
,
component
:
PlaylistDetail
}
]
},
{
...
...
src/views/musicLibrary/AlbumDetail.vue
浏览文件 @
a8f74658
<
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>
<detail-info-card
:obj=
"album"
:cardType=
"'album'"
@
btnClick=
"cardClick"
/>
<div
class=
"data__actions"
role=
"toolbar"
>
<a
class=
"mod_btn_green js_all_play"
@
click=
"playAll"
>
<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"
>
...
...
@@ -269,9 +200,10 @@
</
template
>
<
script
>
import
DetailInfoCard
from
"
components/common/DetailInfoCard
"
;
import
ModListMenu
from
"
components/common/ModListMenu
"
;
import
{
getAlbum
}
from
"
api
"
;
import
{
createSong
,
playSonglist
}
from
"
common/utils
"
;
import
{
createSong
,
playSonglist
,
formatDate
}
from
"
common/utils
"
;
export
default
{
data
()
{
...
...
@@ -294,11 +226,11 @@ export default {
name
:
ds
.
album
.
name
,
img
:
ds
.
album
.
picUrl
,
desc
:
ds
.
album
.
description
,
artists
:
ds
.
album
.
artist
.
name
,
artists
Text
:
ds
.
album
.
artist
.
name
,
type
:
ds
.
album
.
type
,
version
:
ds
.
album
.
subType
,
company
:
ds
.
album
.
company
,
publishTime
:
ds
.
album
.
publishTime
,
publishTime
:
formatDate
(
ds
.
album
.
publishTime
,
"
yy-MM-dd
"
)
,
};
this
.
album
=
album
;
console
.
log
(
album
);
...
...
@@ -321,8 +253,14 @@ export default {
playAll
()
{
playSonglist
(
this
.
songs
);
},
cardClick
(
v
)
{
if
(
v
==
"
all
"
)
{
this
.
playAll
();
}
},
},
components
:
{
DetailInfoCard
,
ModListMenu
,
},
};
...
...
src/views/musicLibrary/PlaylistDetail.vue
0 → 100644
浏览文件 @
a8f74658
<
template
>
<div
class=
"playlist-main"
>
<detail-info-card
:obj=
"playlist"
:cardType=
"'playlist'"
@
btnClick=
"cardClick"
/>
<div
class=
"detail_layout"
>
<div
class=
"detail_layout__main js_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_album"
>
专辑
</li>
<li
class=
"songlist__header_time"
>
时长
</li>
</ul>
<ul
class=
"songlist__list"
>
<li
v-for=
"(song, idx) in songs"
:key=
"song.id"
>
<div
onmouseover=
"this.className=(this.className+' songlist__item--hover')"
onmouseout=
"this.className=this.className.replace(/ songlist__item--hover/, '')"
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"
>
<span
class=
"songlist__songname_txt"
><a
class=
"js_song"
:title=
"song.name"
>
{{
song
.
name
}}
<span
class=
"songlist__song_txt"
></span></a
></span>
<!-- mod list menu -->
<mod-list-menu
:song=
"song"
/>
</div>
<div
class=
"songlist__artist"
title=
"Dan Gibson's Solitudes"
>
<a
class=
"singer_name"
:title=
"song.artistsText"
>
{{
song
.
artistsText
}}
</a>
</div>
<div
class=
"songlist__album"
>
<a
class=
"album_name"
:title=
"song.albumName"
>
{{
song
.
albumName
}}
</a>
</div>
<div
class=
"songlist__time"
>
{{
song
.
durationText
}}
</div>
<div
class=
"songlist__other"
></div>
<a
href=
"javascript:;"
class=
"songlist__delete js_delete"
data-confirm=
"1"
title=
"删除"
><span
class=
"icon_txt"
>
删除
</span></a
>
</div>
</li>
</ul>
</div>
</div>
<div
class=
"detail_layout__other"
>
<div
class=
"mod_about js_box"
id=
"album_desc"
style=
"display: "
>
<h3
class=
"about__tit"
>
简介
</h3>
<div
class=
"about__cont"
>
<p>
{{
playlist
.
desc
}}
</p>
</div>
<!--
<a
href=
"javascript:;"
class=
"about__more"
data-stat=
"y_new.gedan.moreinfo"
data-left=
"0"
data-top=
"-187"
data-target=
"popup_data_detail"
style=
"display: "
>
[更多]
</a
>
-->
<a
href=
"javascript:;"
class=
"btn_edit js_edit"
style=
"display: none"
><i
class=
"icon_txt"
>
编辑
</i></a
>
</div>
<div
class=
"other_part"
id=
"similaralbum"
style=
"display: none"
>
<h3
class=
"other_part__tit"
>
相似歌单
</h3>
<div
class=
"mod_playlist"
>
<ul
class=
"playlist__list"
></ul>
</div>
</div>
</div>
</div>
</div>
</
template
>
<
script
>
import
DetailInfoCard
from
"
components/common/DetailInfoCard
"
;
import
ModListMenu
from
"
components/common/ModListMenu
"
;
import
{
getPlayList
,
getPlaylistDetial
,
getSongDetail
}
from
"
api
"
;
import
{
processCount
,
createSong
,
playSonglist
}
from
"
common/utils
"
;
export
default
{
data
()
{
return
{
id
:
this
.
$route
.
query
.
id
,
playlist
:
{},
songs
:
[],
};
},
created
()
{
this
.
init
();
},
methods
:
{
init
()
{
getPlaylistDetial
(
this
.
id
).
then
((
res
)
=>
{
console
.
log
(
res
);
let
d
=
res
.
data
.
playlist
;
this
.
playlist
=
{
id
:
d
.
id
,
name
:
d
.
name
,
img
:
d
.
coverImgUrl
,
desc
:
d
.
description
,
creator
:
d
.
creator
.
nickname
,
creatorId
:
d
.
creator
.
userId
,
tags
:
d
.
creator
.
expertTags
,
playCount
:
processCount
(
d
.
playCount
),
subscribedCount
:
processCount
(
d
.
subscribedCount
),
shareCount
:
processCount
(
d
.
shareCount
),
};
console
.
log
(
this
.
playlist
);
let
trackIds
=
res
.
data
.
playlist
.
trackIds
.
map
(({
id
})
=>
id
);
let
songDetails
=
getSongDetail
(
trackIds
.
slice
(
0
,
500
)).
then
((
res
)
=>
{
let
songs
=
res
.
data
.
songs
.
map
(({
id
,
name
,
al
,
ar
,
mv
,
dt
})
=>
{
return
createSong
({
id
,
name
,
artists
:
ar
,
duration
:
dt
,
mvId
:
mv
,
albumName
:
al
.
name
,
img
:
al
.
picUrl
,
});
});
this
.
songs
=
songs
;
console
.
log
(
songs
);
});
});
},
playAll
()
{
playSonglist
(
this
.
songs
);
},
cardClick
(
v
)
{
if
(
v
==
"
all
"
)
this
.
playAll
();
},
},
components
:
{
DetailInfoCard
,
ModListMenu
,
},
};
</
script
>
<
style
scoped
>
.playlist-main
,
.section_inner
{
z-index
:
2
;
max-width
:
1200px
;
margin
:
0
auto
;
position
:
relative
;
}
.mod_songlist
{
font-size
:
14px
;
overflow
:
hidden
;
}
.mod_songlist
{
padding-bottom
:
60px
;
}
.songlist__header
,
.songlist__item
{
position
:
relative
;
padding-left
:
46px
;
padding-right
:
95px
;
}
.songlist__header
{
height
:
50px
;
line-height
:
50px
;
background-color
:
rgba
(
0
,
0
,
0
,
0.01
);
color
:
#999
;
}
.songlist__header
{
background-color
:
#fbfbfd
;
}
.songlist__header_name
,
.songlist__songname
{
float
:
left
;
width
:
47.685185%
;
position
:
relative
;
white-space
:
normal
;
}
.songlist__header_name
,
.songlist__songname
{
width
:
54%
;
}
.songlist__album
,
.songlist__artist
,
.songlist__header_album
,
.songlist__header_author
{
float
:
left
;
padding-left
:
15px
;
width
:
25.5%
;
box-sizing
:
border-box
;
}
.songlist__album
,
.songlist__artist
,
.songlist__header_album
,
.songlist__header_author
{
width
:
20%
;
}
.songlist__album
,
.songlist__artist
,
.songlist__header_album
,
.songlist__header_author
{
float
:
left
;
padding-left
:
15px
;
width
:
25.5%
;
box-sizing
:
border-box
;
}
.songlist__album
,
.songlist__artist
,
.songlist__header_album
,
.songlist__header_author
{
width
:
20%
;
}
.songlist__header_time
,
.songlist__time
{
position
:
absolute
;
top
:
0
;
right
:
38px
;
width
:
50px
;
}
.songlist__list
{
overflow
:
hidden
;
clear
:
both
;
}
.songlist__header
,
.songlist__item
{
position
:
relative
;
padding-left
:
46px
;
padding-right
:
95px
;
}
.songlist__item
{
clear
:
both
;
font-size
:
0
;
overflow
:
hidden
;
}
.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__number
{
position
:
absolute
;
top
:
0
;
left
:
10px
;
color
:
#999
;
width
:
36px
;
}
.songlist__songname
{
line-height
:
50px
;
height
:
50px
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
}
.songlist__header_name
,
.songlist__songname
{
float
:
left
;
width
:
47.685185%
;
position
:
relative
;
white-space
:
normal
;
}
.songlist__header_name
,
.songlist__songname
{
width
:
54%
;
}
</
style
>
src/views/musicLibrary/SongDetail.vue
浏览文件 @
a8f74658
<
template
>
<div
class=
"main"
>
<div
class=
"mod_data"
itemscope=
""
itemtype=
"http://schema.org/MusicRecording"
style=
"display: "
v-if=
"song"
>
<span
class=
"data__cover"
>
<img
:src=
"song.img"
:alt=
"song.name"
onerror=
"this.src='//y.gtimg.cn/mediastyle/music_v11/extra/default_300x300.jpg?max_age=31536000';this.onerror=null;"
class=
"data__photo"
/>
</span>
<div
class=
"data__cont"
>
<div
class=
"data__name"
>
<h1
class=
"data__name_txt"
:title=
"song.name"
>
{{
song
.
name
}}
</h1>
</div>
<div
class=
"data__singer"
:title=
"song.artistsText"
>
<i
class=
"icon_singer sprite"
></i>
<a
href=
"//y.qq.com/n/yqq/singer/001JDzPT3JdvqK.html"
:title=
"song.artistsText"
class=
"data__singer_txt js_singer"
data-stat=
"y_new.song.header.singername"
itemprop=
"byArtist"
>
{{
song
.
artistsText
}}
</a>
</div>
<ul
class=
"data__info"
>
<li
class=
"data_info__item data_info__item--even"
>
专辑:
<a
href=
"//y.qq.com/n/yqq/album/002Zwh5p4HgecI.html"
itemprop=
"inAlbum"
class=
"js_album"
:title=
"song.albumName"
>
{{
song
.
albumName
}}
</a
>
</li>
<li
class=
"data_info__item js_lan"
style=
""
>
语种:未知
</li>
<li
class=
"data_info__item js_genre data_info__item--even"
style=
""
>
时长:
{{
song
.
durationText
}}
</li>
<li
class=
"data_info__item js_company"
style=
""
>
唱片公司:
<span>
未知
</span>
</li>
<li
class=
"data_info__item js_public_time data_info__item--even"
style=
""
>
发行时间:
{{
song
.
publishTime
}}
</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_all_like"
><i
class=
"mod_btn__icon_like"
></i>
收藏
</a
>
<a
class=
"mod_btn js_into_comment"
data-stat=
"y_new.song.gotocomment"
href=
"#comment_box"
><i
class=
"mod_btn__icon_comment"
></i>
评论(5182)
</a
>
<a
href=
"javascript:;"
class=
"mod_btn js_more"
data-id=
"102193483"
data-songtype=
"0"
><i
class=
"mod_btn__icon_menu"
></i>
更多
</a
>
</div>
</div>
</div>
<detail-info-card
:obj=
"song"
@
btnClick=
"cardClick"
/>
<div
class=
"detail_layout"
>
<div
class=
"detail_layout__main"
>
...
...
@@ -195,8 +117,9 @@
</
template
>
<
script
>
import
DetailInfoCard
from
"
components/common/DetailInfoCard
"
;
import
{
getSongDetail
,
getSongLiyric
,
getSimiSong
,
getMvDetail
}
from
"
api
"
;
import
{
createSong
,
formatDate
}
from
"
common/utils
"
;
import
{
createSong
,
formatDate
,
playTheSong
}
from
"
common/utils
"
;
export
default
{
data
()
{
...
...
@@ -297,6 +220,15 @@ export default {
query
:
{
id
:
id
},
});
},
play
()
{
playTheSong
(
this
.
song
);
},
cardClick
(
v
)
{
if
(
v
==
"
all
"
)
this
.
play
();
},
},
components
:
{
DetailInfoCard
,
},
};
</
script
>
...
...
src/views/musicLibrary/SongerDetail.vue
浏览文件 @
a8f74658
<
template
>
<div
class=
"songer-main"
>
<div
class=
"mod_data"
>
<span
class=
"data__cover"
>
<a
class=
"js_goto_tab js_none_index"
data-stat=
"y_new.singer.thistab.singer_pic"
data-tab=
"index"
style=
""
><img
class=
"data__photo"
:src=
"songer.img"
onerror=
"this.src='//y.gtimg.cn/mediastyle/global/img/singer_300.png?max_age=31536000';this.onerror=null;"
:alt=
"songer.name"
/></a>
</span>
<div
class=
"data__cont"
>
<div
class=
"data__name"
>
<h1
class=
"data__name_txt js_none_index"
style=
""
>
<a
class=
"js_goto_tab"
:title=
"songer.name"
>
{{
songer
.
name
}}
</a>
</h1>
<h1
class=
"data__name_txt js_index"
style=
"display: none"
:title=
"songer.name"
>
{{
songer
.
name
}}
</h1>
</div>
<div
class=
"data__desc"
id=
"singer_desc"
>
<div
class=
"data__desc_txt"
id=
"short_desc"
>
{{
songer
.
desc
}}
</div>
<a
href=
"javascript:;"
class=
"js_desc"
@
click=
"toggleShowMoreInfo"
>
[更多]
</a
>
</div>
<ul
class=
"mod_data_statistic"
>
<li
class=
"data_statistic__item"
>
<a
class=
"js_goto_tab"
>
<span
class=
"data_statistic__tit"
>
单曲
</span>
<strong
class=
"data_statistic__number"
>
{{
songer
.
musicSize
}}
</strong>
</a>
</li>
<li
class=
"data_statistic__item"
>
<a
class=
"js_goto_tab"
>
<span
class=
"data_statistic__tit"
>
专辑
</span>
<strong
class=
"data_statistic__number"
>
{{
songer
.
albumSize
}}
</strong>
</a>
</li>
<li
class=
"data_statistic__item data_statistic__item--last"
>
<a
class=
"js_goto_tab"
>
<span
class=
"data_statistic__tit"
>
MV
</span>
<strong
class=
"data_statistic__number"
>
{{
songer
.
mvSize
}}
</strong>
</a>
</li>
</ul>
<div
class=
"data__actions"
role=
"toolbar"
>
<a
class=
"mod_btn_green js_singer_radio"
@
click=
"playHotSongs"
>
<i
class=
"mod_btn_green__icon_play"
></i>
播放歌手热门歌曲
</a>
</div>
</div>
</div>
<detail-info-card
:obj=
"songer"
:cardType=
"'songer'"
@
btnClick=
"playHotSongs"
@
moreClick=
"toggleShowMoreInfo"
/>
<div
id=
"index_tab"
class=
"js_tab"
>
<div
class=
"mod_part"
>
...
...
@@ -284,6 +216,7 @@
</
template
>
<
script
>
import
DetailInfoCard
from
"
components/common/DetailInfoCard
"
;
import
ModListMenu
from
"
components/common/ModListMenu
"
;
import
{
getUserDetail
,
...
...
@@ -414,6 +347,7 @@ export default {
},
},
components
:
{
DetailInfoCard
,
ModListMenu
,
},
};
...
...
@@ -460,10 +394,6 @@ ul {
position
:
relative
;
}
/* add extra */
.data__photo
{
border-radius
:
999px
;
}
/*overwrite*/
.data__cont
{
padding-top
:
31px
;
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录