Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
zacharyzlj
Yz Music
提交
a73f0849
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 搜索 >>
提交
a73f0849
编写于
2月 23, 2021
作者:
Z
Zachary
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: search result can play
* imporve components (DetailLists, ModListMenu)
上级
a651d824
变更
3
隐藏空白更改
内联
并排
Showing
3 changed file
with
93 addition
and
113 deletion
+93
-113
src/assets/css/fakeqqmusic.scss
src/assets/css/fakeqqmusic.scss
+15
-0
src/components/common/DetailLists.vue
src/components/common/DetailLists.vue
+38
-109
src/components/common/ModListMenu.vue
src/components/common/ModListMenu.vue
+40
-4
未找到文件。
src/assets/css/fakeqqmusic.scss
浏览文件 @
a73f0849
...
...
@@ -1049,6 +1049,21 @@ $black: #000;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
}
.mod_list_menu
{
position
:
absolute
;
left
:
44%
;
left
:
-9999px
\
9
;
top
:
19px
;
overflow
:
hidden
;
opacity
:
0
;
pointer-events
:
none
;
}
.playlist__item--current
.mod_list_menu
,
.playlist__item--hover
.mod_list_menu
{
opacity
:
1
;
left
:
44%
;
pointer-events
:
inherit
;
}
}
.mod_lyric_list
,
...
...
src/components/common/DetailLists.vue
浏览文件 @
a73f0849
...
...
@@ -7,7 +7,13 @@
<li
class=
"playlist__header_other"
>
{{
titles
[
kind
][
2
]
}}
</li>
</ul>
<ul
class=
"playlist__list"
>
<li
class=
"playlist__item"
v-for=
"l in lists"
:key=
"l.id"
>
<li
class=
"playlist__item"
onmouseover=
"this.className=(this.className+' playlist__item--hover')"
onmouseout=
"this.className=this.className.replace(/ playlist__item--hover/, '')"
v-for=
"l in lists"
:key=
"l.id"
>
<div
class=
"playlist__cover"
style=
"visibility: visible"
>
<a
class=
"js_album"
><img
...
...
@@ -20,9 +26,27 @@
</div>
<h4
class=
"playlist__title"
>
<span
class=
"playlist__title_txt"
>
<a
class=
"js_album"
:title=
"l.name"
>
{{
l
.
name
}}
</a>
<a
class=
"js_album"
v-if=
"kind == 0"
:title=
"l.name"
@
click=
"gotoAlbumDetail(l.id)"
>
{{
l
.
name
}}
</a>
<a
class=
"js_album"
v-else-if=
"kind == 1"
:title=
"l.name"
@
click=
"gotoPlaylistDetail(l.id)"
>
{{
l
.
name
}}
</a>
</span>
</h4>
<!-- 功能条 -->
<mod-list-menu
:id=
"l.id"
:kind=
"kind + 1"
/>
<div
class=
"playlist__author"
>
<a
class=
"js_singer"
v-if=
"kind == 0"
:title=
"l.artistsText"
>
{{
l
.
artistsText
...
...
@@ -44,6 +68,9 @@
</
template
>
<
script
>
import
ModListMenu
from
"
components/common/ModListMenu
"
;
import
{
gotoAlbumDetail
,
gotoPlaylistDetail
}
from
"
common/utils
"
;
export
default
{
data
()
{
return
{
...
...
@@ -61,116 +88,18 @@ export default {
// 0: album, 1: playlist
kind
:
{
default
:
0
},
},
methods
:
{
gotoAlbumDetail
,
gotoPlaylistDetail
,
},
components
:
{
ModListMenu
,
},
};
</
script
>
<
style
scoped
>
.mod_playlist_text
{
zoom
:
1
;
font-size
:
14px
;
}
.mod_lyric_list
,
.mod_mv_list
,
.mod_playlist_text
,
.mod_songlist
{
padding-bottom
:
40px
;
}
.mod_playlist_text
.playlist__header
{
height
:
50px
;
line-height
:
50px
;
background-color
:
#fbfbfd
;
color
:
#999
;
}
.mod_playlist_text
.playlist__author
,
.mod_playlist_text
.playlist__header_author
,
.mod_playlist_text
.playlist__header_name
,
.mod_playlist_text
.playlist__header_number
,
.mod_playlist_text
.playlist__number
{
float
:
left
;
padding-left
:
20px
;
}
.mod_playlist_text
.playlist__header_name
{
width
:
57%
;
}
.mod_playlist_text
.playlist__author
,
.mod_playlist_text
.playlist__header_author
{
width
:
30%
;
}
.mod_playlist_text
.playlist__header_other
,
.mod_playlist_text
.playlist__other
{
width
:
7.5%
;
}
.mod_playlist_text
.playlist__header_other
,
.mod_playlist_text
.playlist__other
{
float
:
right
;
padding-right
:
20px
;
text-align
:
right
;
}
.mod_playlist_text
.playlist__item
{
position
:
relative
;
height
:
70px
;
line-height
:
70px
;
zoom
:
1
;
overflow
:
hidden
;
clear
:
both
;
font-size
:
0
;
}
.mod_playlist_text
.playlist__cover
{
float
:
left
;
width
:
50px
;
height
:
50px
;
overflow
:
hidden
;
margin-top
:
10px
;
padding-left
:
20px
;
}
.mod_playlist_text
.playlist__pic
{
height
:
100%
;
object-fit
:
cover
;
}
.mod_playlist_text
.playlist__pic
{
display
:
block
;
width
:
100%
;
min-height
:
50px
;
}
.mod_playlist_text
.playlist__author
,
.mod_playlist_text
.playlist__number
,
.mod_playlist_text
.playlist__other
,
.mod_playlist_text
.playlist__title
{
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
font-size
:
14px
;
}
.mod_playlist_text
.playlist__title
{
width
:
52.66667%
;
font-weight
:
400
;
text-indent
:
15px
;
overflow
:
hidden
;
}
.mod_playlist_text
.playlist__title_txt
{
float
:
left
;
max-width
:
90%
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
}
.mod_playlist_text
.playlist__author
,
.mod_playlist_text
.playlist__count
,
.mod_playlist_text
.playlist__number
,
.mod_playlist_text
.playlist__title
{
float
:
left
;
height
:
70px
;
}
.mod_playlist_text
.playlist__author
,
.mod_playlist_text
.playlist__header_author
{
width
:
30%
;
}
.mod_playlist_text
.playlist__author
,
.mod_playlist_text
.playlist__number
,
.mod_playlist_text
.playlist__other
,
.mod_playlist_text
.playlist__title
{
overflow
:
hidden
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
font-size
:
14px
;
a
:hover
{
color
:
#31c27c
;
}
</
style
>
src/components/common/ModListMenu.vue
浏览文件 @
a73f0849
...
...
@@ -20,6 +20,7 @@
class=
"list_menu__item list_menu__down js_down"
title=
"下载"
aria-haspopup=
"true"
v-if=
"kind == 0"
>
<i
class=
"list_menu__icon_down"
></i>
<span
class=
"icon_txt"
>
下载
</span>
...
...
@@ -36,20 +37,55 @@
</
template
>
<
script
>
import
{
playTheSong
}
from
"
common/utils
"
;
import
{
playTheSong
,
playSonglist
,
createSongs
}
from
"
common/utils
"
;
import
{
getPlaylistDetial
,
getSongDetail
,
getAlbum
}
from
"
api
"
;
export
default
{
props
:
{
song
:
{
type
:
Object
,
default
:
{},
},
id
:
{
default
:
0
},
// 0: song, 1: album , 2: playlist
kind
:
{
default
:
0
},
},
methods
:
{
play
()
{
if
(
this
.
song
)
{
playTheSong
(
this
.
song
);
switch
(
this
.
kind
)
{
case
0
:
if
(
this
.
song
)
{
playTheSong
(
this
.
song
);
}
console
.
log
(
this
.
song
);
break
;
case
1
:
this
.
playAlbum
(
this
.
id
);
break
;
case
2
:
this
.
playTheList
(
this
.
id
);
break
;
default
:
console
.
log
(
this
.
kind
);
}
console
.
log
(
this
.
song
);
},
playTheList
(
listId
)
{
getPlaylistDetial
(
listId
).
then
((
res
)
=>
{
let
trackIds
=
res
.
data
.
playlist
.
trackIds
.
map
(({
id
})
=>
id
);
let
songDetails
=
getSongDetail
(
trackIds
.
slice
(
0
,
500
)).
then
((
res
)
=>
{
let
songs
=
createSongs
(
res
.
data
.
songs
);
//console.log(songs);
playSonglist
(
songs
);
});
});
},
playAlbum
(
id
)
{
getAlbum
(
this
.
id
).
then
((
res
)
=>
{
let
ds
=
res
.
data
;
let
songs
=
createSongs
(
ds
.
songs
);
console
.
log
(
this
.
songs
);
playSonglist
(
songs
);
});
},
},
};
...
...
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录