Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenDocCN
web-music
提交
182245fc
W
web-music
项目概览
OpenDocCN
/
web-music
通知
7
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
W
web-music
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
182245fc
编写于
6月 17, 2019
作者:
阿
阿炸克斯
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
新增循环播放,歌曲详情
上级
574316b3
变更
7
展开全部
隐藏空白更改
内联
并排
Showing
7 changed file
with
208 addition
and
19 deletion
+208
-19
app/css/_template/modal.scss
app/css/_template/modal.scss
+1
-2
app/css/_template/reset.scss
app/css/_template/reset.scss
+2
-2
app/css/base.css
app/css/base.css
+54
-4
app/css/base.scss
app/css/base.scss
+73
-0
app/index.html
app/index.html
+78
-6
app/plugin/APlayer/APlayer.css
app/plugin/APlayer/APlayer.css
+0
-3
app/plugin/APlayer/APlayer.js
app/plugin/APlayer/APlayer.js
+0
-2
未找到文件。
app/css/_template/modal.scss
浏览文件 @
182245fc
...
...
@@ -4,7 +4,7 @@
.modal
{
position
:
fixed
;
z-index
:
999999999
9
;
z-index
:
201
9
;
top
:
0
;
left
:
0
;
width
:
100%
;
...
...
@@ -22,7 +22,6 @@
.modal-content
{
background-color
:
#fff
;
border-radius
:
15px
;
overflow
:
hidden
;
}
...
...
app/css/_template/reset.scss
浏览文件 @
182245fc
...
...
@@ -33,11 +33,11 @@ body {
padding
:
0
;
font-size
:
14px
;
background-color
:
#fff
;
font-family
:
"PingFang SC Regular"
,
"Microsoft YaHei"
;
font-family
:
Monda
,
PingFang
SC
,
Microsoft
YaHei
,
sans-serif
;
}
select
,
input
,
textarea
{
font-family
:
"PingFang SC Regular"
,
"Microsoft YaHei"
;
font-family
:
Monda
,
PingFang
SC
,
Microsoft
YaHei
,
sans-serif
;
}
ul
,
dl
,
dd
{
...
...
app/css/base.css
浏览文件 @
182245fc
...
...
@@ -22,10 +22,10 @@ body {
padding
:
0
;
font-size
:
14px
;
background-color
:
#fff
;
font-family
:
"PingFang SC Regular"
,
"Microsoft YaHei"
;
}
font-family
:
Monda
,
PingFang
SC
,
Microsoft
YaHei
,
sans-serif
;
}
select
,
input
,
textarea
{
font-family
:
"PingFang SC Regular"
,
"Microsoft YaHei"
;
}
font-family
:
Monda
,
PingFang
SC
,
Microsoft
YaHei
,
sans-serif
;
}
ul
,
dl
,
dd
{
margin
:
0
;
...
...
@@ -45,7 +45,7 @@ table {
.modal
{
position
:
fixed
;
z-index
:
999999999
9
;
z-index
:
201
9
;
top
:
0
;
left
:
0
;
width
:
100%
;
...
...
@@ -60,7 +60,6 @@ table {
justify-content
:
center
;
}
.modal
.modal-content
{
background-color
:
#fff
;
border-radius
:
15px
;
overflow
:
hidden
;
}
.modal
.modal-footer
{
height
:
50px
;
...
...
@@ -181,3 +180,54 @@ table {
font-size
:
12px
;
}
.player-wrap
.player-item
audio
{
flex
:
1
;
}
.player-info-wrap
{
display
:
block
;
}
.player-info-wrap
.modal-wrapper
{
align-items
:
flex-start
;
padding-top
:
2.5vw
;
}
.player-info-wrap
.modal-content
{
width
:
95vw
;
height
:
90vh
;
padding
:
15px
0
;
display
:
flex
;
flex-direction
:
column
;
overflow
:
initial
;
}
.player-info-wrap
.modal-content
h2
{
text-align
:
center
;
width
:
100%
;
margin
:
5px
auto
;
}
.player-info-wrap
.modal-content
.lrc
{
flex
:
1
;
overflow-y
:
auto
;
-webkit-overflow-scrolling
:
touch
;
text-align
:
center
;
}
.player-info-wrap
.modal-content
.lrc
ol
{
padding
:
0
;
}
.player-info-wrap
.modal-content
.lrc
li
{
list-style
:
none
;
line-height
:
1.4
;
padding
:
3px
10px
;
opacity
:
.8
;
}
.player-info-wrap
.modal-content
.lrc
li
.active
{
opacity
:
1
;
font-weight
:
700
;
}
.player-info-wrap
.modal-content
.close
{
background
:
#fff
;
border
:
1px
solid
transparent
;
display
:
block
;
width
:
60px
;
height
:
40px
;
border-radius
:
50%
;
margin
:
0
auto
;
transform
:
translateY
(
32px
);
font-size
:
25px
;
outline
:
none
;
-webkit-tap-highlight-color
:
transparent
;
color
:
#666
;
}
.player-info-wrap
.modal-content
.close
:active
{
background
:
#f7f7f7
;
}
.player-info-wrap
.info-img
{
width
:
150px
;
margin
:
10px
auto
;
display
:
block
;
}
app/css/base.scss
浏览文件 @
182245fc
...
...
@@ -128,3 +128,76 @@ $bottom-height: 80px;
}
}
}
.player-info-wrap
{
display
:
block
;
.modal-wrapper
{
align-items
:
flex-start
;
padding-top
:
2
.5vw
;
}
.modal-content
{
width
:
95vw
;
height
:
90vh
;
padding
:
15px
0
;
display
:
flex
;
flex-direction
:
column
;
overflow
:
initial
;
h2
{
text-align
:
center
;
width
:
100%
;
margin
:
5px
auto
;
}
.lrc
{
flex
:
1
;
overflow-y
:
auto
;
-webkit-overflow-scrolling
:
touch
;
text-align
:
center
;
ol
{
padding
:
0
;
}
li
{
list-style
:
none
;
line-height
:
1
.4
;
padding
:
3px
10px
;
opacity
:
.8
;
&
.active
{
opacity
:
1
;
font-weight
:
700
;
}
}
}
.close
{
background
:
#fff
;
border
:
1px
solid
transparent
;
display
:
block
;
width
:
60px
;
height
:
40px
;
border-radius
:
50%
;
margin
:
0
auto
;
transform
:
translateY
(
32px
);
font-size
:
25px
;
outline
:
none
;
-webkit-tap-highlight-color
:
transparent
;
color
:
#666
;
&
:active
{
background
:
#f7f7f7
;
}
}
}
.info-img
{
width
:
150px
;
margin
:
10px
auto
;
display
:
block
;
}
}
app/index.html
浏览文件 @
182245fc
...
...
@@ -3,19 +3,26 @@
<head>
<meta
charset=
"UTF-8"
>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0,
maximum-scale=1.0,minimum=1.0,
user-scalable=no, viewport-fit=cover"
>
content=
"width=device-width, initial-scale=1.0,
maximum-scale=1.0,
user-scalable=no, viewport-fit=cover"
>
<meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<title>
听音乐
</title>
<link
href=
"//fonts.googleapis.com/css?family=Monda:300,300italic,400,400italic,700,700italic|Roboto Slab:300,300italic,400,400italic,700,700italic|Rosario:300,300italic,400,400italic,700,700italic|PT Mono:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext"
rel=
"stylesheet"
type=
"text/css"
>
<link
rel=
"stylesheet"
href=
"./css/base.css"
>
</head>
<body>
<div
id=
"app"
>
<!--搜索-->
<div
class=
"header-search"
>
<input
type=
"text"
@
input=
"search"
placeholder=
"请输入要搜索的歌曲名称"
>
</div>
<!--列表-->
<div
class=
"music-list"
>
<div
class=
"item"
:class=
"{active: v.songid === playing.songid}"
v-if=
"v.show"
v-for=
"(v,index) in list"
:key=
"v.songid"
<div
class=
"item"
:class=
"{active: v.songid === playing.songid}"
v-if=
"v.show"
v-for=
"(v,index) in list"
@
click=
"toPlay(index)"
>
<div
class=
"title"
>
<span
class=
"index"
>
{{index + 1}}.
</span>
{{v.title}}
...
...
@@ -23,24 +30,60 @@
<small
class=
"user"
>
{{v.author}}
</small>
</div>
</div>
<!--播放器-->
<div
class=
"player-wrap"
>
<div
class=
"player-item"
v-if=
"playing"
>
<div
class=
"pic"
><img
:src=
"playing.pic"
alt=
""
></div>
<div
class=
"pic"
@
click=
"show = true"
><img
:src=
"playing.pic"
alt=
""
></div>
<audio
controls
ref=
"Audio"
:src=
"playing.url"
></audio>
</div>
</div>
<!--歌曲详情-->
<div
class=
"modal player-info-wrap"
v-show=
"show"
>
<div
class=
"modal-wrapper"
>
<div
class=
"modal-content"
v-if=
"playing"
>
<h2>
{{playing.title}}
</h2>
<img
class=
"info-img"
:src=
"playing.pic"
alt=
""
>
<div
class=
"lrc"
>
<ol>
<li
v-for=
"v in playing.lrcData"
>
{{v}}
</li>
</ol>
</div>
<button
class=
"close"
@
click=
"show = false"
>
×
</button>
</div>
</div>
</div>
</div>
<script
src=
"https://cdn.bootcss.com/vue/2.6.10/vue.js"
></script>
<!--<script src="./plugin/vue.min.js"></script>-->
<script
src=
"./plugin/axios.min.js"
></script>
<!--<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>-->
<script>
function
formatLrc
(
str
)
{
let
lrcObj
=
{}
const
regExp
=
/
\[(\d{2})
:
(\d{2})\.(\d{2})\](
.*
)
/g
while
(
1
)
{
let
result
=
regExp
.
exec
(
str
)
if
(
result
)
{
const
time
=
(
parseInt
(
result
[
1
])
*
60
)
+
(
parseInt
(
result
[
2
]))
lrcObj
[
time
]
=
result
[
4
]
}
else
{
break
}
}
for
(
let
i
in
lrcObj
)
{
if
(
!
lrcObj
[
i
])
{
delete
lrcObj
[
i
]
}
}
return
lrcObj
}
new
Vue
({
el
:
'
#app
'
,
data
:
{
list
:
[],
playing
:
null
playing
:
null
,
show
:
false
},
created
()
{
},
...
...
@@ -59,6 +102,32 @@
return
obj
})
this
.
playing
=
this
.
list
[
0
]
this
.
playing
.
lrcData
=
formatLrc
(
this
.
list
[
0
].
lrc
)
// 播放完毕之后自动播放下一首
this
.
$nextTick
(()
=>
{
const
audio
=
this
.
$refs
.
Audio
// 改变播放位置
audio
.
ontimeupdate
=
e
=>
{
console
.
log
(
e
.
target
.
currentTime
)
}
// 播放完毕
audio
.
onended
=
e
=>
{
const
playing
=
this
.
playing
let
index
=
null
let
len
=
this
.
list
.
length
this
.
list
.
forEach
((
item
,
i
)
=>
{
if
(
item
.
songid
===
playing
.
songid
)
{
index
=
i
}
})
if
(
index
+
1
===
len
)
{
this
.
toPlay
(
0
)
}
else
{
this
.
toPlay
(
index
+
1
)
}
}
})
}).
catch
(
e
=>
{
console
.
log
(
e
)
})
...
...
@@ -66,6 +135,8 @@
toPlay
(
index
)
{
const
item
=
this
.
list
[
index
]
const
audio
=
this
.
$refs
.
Audio
item
.
lrcData
=
formatLrc
(
item
.
lrc
)
if
(
this
.
playing
.
songid
===
item
.
songid
&&
!
audio
.
paused
)
{
this
.
$nextTick
(()
=>
{
this
.
$refs
.
Audio
.
pause
()
...
...
@@ -77,6 +148,7 @@
})
}
},
search
(
e
)
{
const
val
=
e
.
target
.
value
...
...
app/plugin/APlayer/APlayer.css
已删除
100644 → 0
浏览文件 @
574316b3
.aplayer
{
background
:
#fff
;
font-family
:
Arial
,
Helvetica
,
sans-serif
;
margin
:
5px
;
box-shadow
:
0
2px
2px
0
rgba
(
0
,
0
,
0
,
.07
),
0
1px
5px
0
rgba
(
0
,
0
,
0
,
.1
);
border-radius
:
2px
;
overflow
:
hidden
;
-webkit-user-select
:
none
;
-moz-user-select
:
none
;
-ms-user-select
:
none
;
user-select
:
none
;
line-height
:
normal
;
position
:
relative
}
.aplayer
*
{
box-sizing
:
content-box
}
.aplayer
svg
{
width
:
100%
;
height
:
100%
}
.aplayer
svg
circle
,
.aplayer
svg
path
{
fill
:
#fff
}
.aplayer.aplayer-withlist
.aplayer-info
{
border-bottom
:
1px
solid
#e9e9e9
}
.aplayer.aplayer-withlist
.aplayer-list
{
display
:
block
}
.aplayer.aplayer-withlist
.aplayer-icon-order
,
.aplayer.aplayer-withlist
.aplayer-info
.aplayer-controller
.aplayer-time
.aplayer-icon.aplayer-icon-menu
{
display
:
inline
}
.aplayer.aplayer-withlrc
.aplayer-pic
{
height
:
90px
;
width
:
90px
}
.aplayer.aplayer-withlrc
.aplayer-info
{
margin-left
:
90px
;
height
:
90px
;
padding
:
10px
7px
0
}
.aplayer.aplayer-withlrc
.aplayer-lrc
{
display
:
block
}
.aplayer.aplayer-narrow
{
width
:
66px
}
.aplayer.aplayer-narrow
.aplayer-info
,
.aplayer.aplayer-narrow
.aplayer-list
{
display
:
none
}
.aplayer.aplayer-narrow
.aplayer-body
,
.aplayer.aplayer-narrow
.aplayer-pic
{
height
:
66px
;
width
:
66px
}
.aplayer.aplayer-fixed
{
position
:
fixed
;
bottom
:
0
;
left
:
0
;
right
:
0
;
margin
:
0
;
z-index
:
99
;
overflow
:
visible
;
max-width
:
400px
;
box-shadow
:
none
}
.aplayer.aplayer-fixed
.aplayer-list
{
margin-bottom
:
65px
;
border
:
1px
solid
#eee
;
border-bottom
:
none
}
.aplayer.aplayer-fixed
.aplayer-body
{
position
:
fixed
;
bottom
:
0
;
left
:
0
;
right
:
0
;
margin
:
0
;
z-index
:
99
;
background
:
#fff
;
padding-right
:
18px
;
transition
:
all
.3s
ease
;
max-width
:
400px
}
.aplayer.aplayer-fixed
.aplayer-lrc
{
display
:
block
;
position
:
fixed
;
bottom
:
10px
;
left
:
0
;
right
:
0
;
margin
:
0
;
z-index
:
98
;
pointer-events
:
none
;
text-shadow
:
-1px
-1px
0
#fff
}
.aplayer.aplayer-fixed
.aplayer-lrc
:after
,
.aplayer.aplayer-fixed
.aplayer-lrc
:before
{
display
:
none
}
.aplayer.aplayer-fixed
.aplayer-info
{
-webkit-transform
:
scaleX
(
1
);
transform
:
scaleX
(
1
);
-webkit-transform-origin
:
0
0
;
transform-origin
:
0
0
;
transition
:
all
.3s
ease
;
border-bottom
:
none
;
border-top
:
1px
solid
#e9e9e9
}
.aplayer.aplayer-fixed
.aplayer-info
.aplayer-music
{
width
:
calc
(
100%
-
105px
)}
.aplayer.aplayer-fixed
.aplayer-miniswitcher
{
display
:
block
}
.aplayer.aplayer-fixed.aplayer-narrow
.aplayer-info
{
display
:
block
;
-webkit-transform
:
scaleX
(
0
);
transform
:
scaleX
(
0
)}
.aplayer.aplayer-fixed.aplayer-narrow
.aplayer-body
{
width
:
66px
!important
}
.aplayer.aplayer-fixed.aplayer-narrow
.aplayer-miniswitcher
.aplayer-icon
{
-webkit-transform
:
rotateY
(
0
);
transform
:
rotateY
(
0
)}
.aplayer.aplayer-fixed
.aplayer-icon-back
,
.aplayer.aplayer-fixed
.aplayer-icon-forward
,
.aplayer.aplayer-fixed
.aplayer-icon-lrc
,
.aplayer.aplayer-fixed
.aplayer-icon-play
{
display
:
inline-block
}
.aplayer.aplayer-fixed
.aplayer-icon-back
,
.aplayer.aplayer-fixed
.aplayer-icon-forward
,
.aplayer.aplayer-fixed
.aplayer-icon-menu
,
.aplayer.aplayer-fixed
.aplayer-icon-play
{
position
:
absolute
;
bottom
:
27px
;
width
:
20px
;
height
:
20px
}
.aplayer.aplayer-fixed
.aplayer-icon-back
{
right
:
75px
}
.aplayer.aplayer-fixed
.aplayer-icon-play
{
right
:
50px
}
.aplayer.aplayer-fixed
.aplayer-icon-forward
{
right
:
25px
}
.aplayer.aplayer-fixed
.aplayer-icon-menu
{
right
:
0
}
.aplayer.aplayer-arrow
.aplayer-icon-loop
,
.aplayer.aplayer-arrow
.aplayer-icon-order
,
.aplayer.aplayer-mobile
.aplayer-icon-volume-down
{
display
:
none
}
.aplayer.aplayer-loading
.aplayer-info
.aplayer-controller
.aplayer-loading-icon
{
display
:
block
}
.aplayer.aplayer-loading
.aplayer-info
.aplayer-controller
.aplayer-bar-wrap
.aplayer-bar
.aplayer-played
.aplayer-thumb
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
.aplayer
.aplayer-body
{
position
:
relative
}
.aplayer
.aplayer-icon
{
width
:
15px
;
height
:
15px
;
border
:
none
;
background-color
:
transparent
;
outline
:
none
;
cursor
:
pointer
;
opacity
:
.8
;
vertical-align
:
middle
;
padding
:
0
;
font-size
:
12px
;
margin
:
0
;
display
:
inline-block
}
.aplayer
.aplayer-icon
path
{
transition
:
all
.2s
ease-in-out
}
.aplayer
.aplayer-icon-back
,
.aplayer
.aplayer-icon-forward
,
.aplayer
.aplayer-icon-lrc
,
.aplayer
.aplayer-icon-order
,
.aplayer
.aplayer-icon-play
{
display
:
none
}
.aplayer
.aplayer-icon-lrc-inactivity
svg
{
opacity
:
.4
}
.aplayer
.aplayer-icon-forward
{
-webkit-transform
:
rotate
(
180deg
);
transform
:
rotate
(
180deg
)}
.aplayer
.aplayer-lrc-content
{
display
:
none
}
.aplayer
.aplayer-pic
{
position
:
relative
;
float
:
left
;
height
:
66px
;
width
:
66px
;
background-size
:
cover
;
background-position
:
50%
;
transition
:
all
.3s
ease
;
cursor
:
pointer
}
.aplayer
.aplayer-pic
:hover
.aplayer-button
{
opacity
:
1
}
.aplayer
.aplayer-pic
.aplayer-button
{
position
:
absolute
;
border-radius
:
50%
;
opacity
:
.8
;
text-shadow
:
0
1px
1px
rgba
(
0
,
0
,
0
,
.2
);
box-shadow
:
0
1px
1px
rgba
(
0
,
0
,
0
,
.2
);
background
:
rgba
(
0
,
0
,
0
,
.2
);
transition
:
all
.1s
ease
}
.aplayer
.aplayer-pic
.aplayer-button
path
{
fill
:
#fff
}
.aplayer
.aplayer-pic
.aplayer-hide
{
display
:
none
}
.aplayer
.aplayer-pic
.aplayer-play
{
width
:
26px
;
height
:
26px
;
border
:
2px
solid
#fff
;
bottom
:
50%
;
right
:
50%
;
margin
:
0
-15px
-15px
0
}
.aplayer
.aplayer-pic
.aplayer-play
svg
{
position
:
absolute
;
top
:
3px
;
left
:
4px
;
height
:
20px
;
width
:
20px
}
.aplayer
.aplayer-pic
.aplayer-pause
{
width
:
16px
;
height
:
16px
;
border
:
2px
solid
#fff
;
bottom
:
4px
;
right
:
4px
}
.aplayer
.aplayer-pic
.aplayer-pause
svg
{
position
:
absolute
;
top
:
2px
;
left
:
2px
;
height
:
12px
;
width
:
12px
}
.aplayer
.aplayer-info
{
margin-left
:
66px
;
padding
:
14px
7px
0
10px
;
height
:
66px
;
box-sizing
:
border-box
}
.aplayer
.aplayer-info
.aplayer-music
{
overflow
:
hidden
;
white-space
:
nowrap
;
text-overflow
:
ellipsis
;
margin
:
0
0
13px
5px
;
-webkit-user-select
:
text
;
-moz-user-select
:
text
;
-ms-user-select
:
text
;
user-select
:
text
;
cursor
:
default
;
padding-bottom
:
2px
;
height
:
20px
}
.aplayer
.aplayer-info
.aplayer-music
.aplayer-title
{
font-size
:
14px
}
.aplayer
.aplayer-info
.aplayer-music
.aplayer-author
{
font-size
:
12px
;
color
:
#666
}
.aplayer
.aplayer-info
.aplayer-controller
{
position
:
relative
;
display
:
flex
}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-bar-wrap
{
margin
:
0
0
0
5px
;
padding
:
4px
0
;
cursor
:
pointer
!important
;
flex
:
1
}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-bar-wrap
:hover
.aplayer-bar
.aplayer-played
.aplayer-thumb
{
-webkit-transform
:
scale
(
1
);
transform
:
scale
(
1
)}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-bar-wrap
.aplayer-bar
{
position
:
relative
;
height
:
2px
;
width
:
100%
;
background
:
#cdcdcd
}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-bar-wrap
.aplayer-bar
.aplayer-loaded
{
position
:
absolute
;
left
:
0
;
top
:
0
;
bottom
:
0
;
background
:
#aaa
;
height
:
2px
;
transition
:
all
.5s
ease
}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-bar-wrap
.aplayer-bar
.aplayer-played
{
position
:
absolute
;
left
:
0
;
top
:
0
;
bottom
:
0
;
height
:
2px
}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-bar-wrap
.aplayer-bar
.aplayer-played
.aplayer-thumb
{
position
:
absolute
;
top
:
0
;
right
:
5px
;
margin-top
:
-4px
;
margin-right
:
-10px
;
height
:
10px
;
width
:
10px
;
border-radius
:
50%
;
cursor
:
pointer
;
transition
:
all
.3s
ease-in-out
;
-webkit-transform
:
scale
(
0
);
transform
:
scale
(
0
)}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-time
{
position
:
relative
;
right
:
0
;
bottom
:
4px
;
height
:
17px
;
color
:
#999
;
font-size
:
11px
;
padding-left
:
7px
}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-time
.aplayer-time-inner
{
vertical-align
:
middle
}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-time
.aplayer-icon
{
cursor
:
pointer
;
transition
:
all
.2s
ease
}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-time
.aplayer-icon
path
{
fill
:
#666
}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-time
.aplayer-icon.aplayer-icon-loop
{
margin-right
:
2px
}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-time
.aplayer-icon
:hover
path
{
fill
:
#000
}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-time
.aplayer-icon.aplayer-icon-menu
,
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-time.aplayer-time-narrow
.aplayer-icon-menu
,
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-time.aplayer-time-narrow
.aplayer-icon-mode
{
display
:
none
}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-volume-wrap
{
position
:
relative
;
display
:
inline-block
;
margin-left
:
3px
;
cursor
:
pointer
!important
}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-volume-wrap
:hover
.aplayer-volume-bar-wrap
{
height
:
40px
}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-volume-wrap
.aplayer-volume-bar-wrap
{
position
:
absolute
;
bottom
:
15px
;
right
:
-3px
;
width
:
25px
;
height
:
0
;
z-index
:
99
;
overflow
:
hidden
;
transition
:
all
.2s
ease-in-out
}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-volume-wrap
.aplayer-volume-bar-wrap.aplayer-volume-bar-wrap-active
{
height
:
40px
}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-volume-wrap
.aplayer-volume-bar-wrap
.aplayer-volume-bar
{
position
:
absolute
;
bottom
:
0
;
right
:
10px
;
width
:
5px
;
height
:
35px
;
background
:
#aaa
;
border-radius
:
2.5px
;
overflow
:
hidden
}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-volume-wrap
.aplayer-volume-bar-wrap
.aplayer-volume-bar
.aplayer-volume
{
position
:
absolute
;
bottom
:
0
;
right
:
0
;
width
:
5px
;
transition
:
all
.1s
ease
}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-loading-icon
{
display
:
none
}
.aplayer
.aplayer-info
.aplayer-controller
.aplayer-loading-icon
svg
{
position
:
absolute
;
-webkit-animation
:
rotate
1s
linear
infinite
;
animation
:
rotate
1s
linear
infinite
}
.aplayer
.aplayer-lrc
{
display
:
none
;
position
:
relative
;
height
:
30px
;
text-align
:
center
;
overflow
:
hidden
;
margin
:
-10px
0
7px
}
.aplayer
.aplayer-lrc
:before
{
top
:
0
;
height
:
10%
;
background
:
linear-gradient
(
180deg
,
#fff
0
,
hsla
(
0
,
0%
,
100%
,
0
));
filter
:
progid
:
DXImageTransform
.
Microsoft
.
gradient
(
startColorstr
=
"#ffffff"
,
endColorstr
=
"#00ffffff"
,
GradientType
=
0
)}
.aplayer
.aplayer-lrc
:after
,
.aplayer
.aplayer-lrc
:before
{
position
:
absolute
;
z-index
:
1
;
display
:
block
;
overflow
:
hidden
;
width
:
100%
;
content
:
" "
}
.aplayer
.aplayer-lrc
:after
{
bottom
:
0
;
height
:
33%
;
background
:
linear-gradient
(
180deg
,
hsla
(
0
,
0%
,
100%
,
0
)
0
,
hsla
(
0
,
0%
,
100%
,
.8
));
filter
:
progid
:
DXImageTransform
.
Microsoft
.
gradient
(
startColorstr
=
"#00ffffff"
,
endColorstr
=
"#ccffffff"
,
GradientType
=
0
)}
.aplayer
.aplayer-lrc
p
{
font-size
:
12px
;
color
:
#666
;
line-height
:
16px
!important
;
height
:
16px
!important
;
padding
:
0
!important
;
margin
:
0
!important
;
transition
:
all
.5s
ease-out
;
opacity
:
.4
;
overflow
:
hidden
}
.aplayer
.aplayer-lrc
p
.aplayer-lrc-current
{
opacity
:
1
;
overflow
:
visible
;
height
:
auto
!important
;
min-height
:
16px
}
.aplayer
.aplayer-lrc.aplayer-lrc-hide
{
display
:
none
}
.aplayer
.aplayer-lrc
.aplayer-lrc-contents
{
width
:
100%
;
transition
:
all
.5s
ease-out
;
-webkit-user-select
:
text
;
-moz-user-select
:
text
;
-ms-user-select
:
text
;
user-select
:
text
;
cursor
:
default
}
.aplayer
.aplayer-list
{
overflow
:
auto
;
transition
:
all
.5s
ease
;
will-change
:
height
;
display
:
none
;
overflow
:
hidden
}
.aplayer
.aplayer-list.aplayer-list-hide
{
max-height
:
0
!important
}
.aplayer
.aplayer-list
ol
{
list-style-type
:
none
;
margin
:
0
;
padding
:
0
;
overflow-y
:
auto
}
.aplayer
.aplayer-list
ol
::-webkit-scrollbar
{
width
:
5px
}
.aplayer
.aplayer-list
ol
::-webkit-scrollbar-thumb
{
border-radius
:
3px
;
background-color
:
#eee
}
.aplayer
.aplayer-list
ol
::-webkit-scrollbar-thumb:hover
{
background-color
:
#ccc
}
.aplayer
.aplayer-list
ol
li
{
position
:
relative
;
height
:
32px
;
line-height
:
32px
;
padding
:
0
15px
;
font-size
:
12px
;
border-top
:
1px
solid
#e9e9e9
;
cursor
:
pointer
;
transition
:
all
.2s
ease
;
overflow
:
hidden
;
margin
:
0
}
.aplayer
.aplayer-list
ol
li
:first-child
{
border-top
:
none
}
.aplayer
.aplayer-list
ol
li
:hover
{
background
:
#efefef
}
.aplayer
.aplayer-list
ol
li
.aplayer-list-light
{
background
:
#e9e9e9
}
.aplayer
.aplayer-list
ol
li
.aplayer-list-light
.aplayer-list-cur
{
display
:
inline-block
}
.aplayer
.aplayer-list
ol
li
.aplayer-list-cur
{
display
:
none
;
width
:
3px
;
height
:
22px
;
position
:
absolute
;
left
:
0
;
top
:
5px
;
cursor
:
pointer
}
.aplayer
.aplayer-list
ol
li
.aplayer-list-index
{
color
:
#666
;
margin-right
:
12px
;
cursor
:
pointer
}
.aplayer
.aplayer-list
ol
li
.aplayer-list-author
{
color
:
#666
;
float
:
right
;
cursor
:
pointer
}
.aplayer
.aplayer-notice
{
opacity
:
0
;
position
:
absolute
;
top
:
50%
;
left
:
50%
;
-webkit-transform
:
translate
(
-50%
,
-50%
);
transform
:
translate
(
-50%
,
-50%
);
font-size
:
12px
;
border-radius
:
4px
;
padding
:
5px
10px
;
transition
:
all
.3s
ease-in-out
;
overflow
:
hidden
;
color
:
#fff
;
pointer-events
:
none
;
background-color
:
#f4f4f5
;
color
:
#909399
}
.aplayer
.aplayer-miniswitcher
{
display
:
none
;
position
:
absolute
;
top
:
0
;
right
:
0
;
bottom
:
0
;
height
:
100%
;
background
:
#e6e6e6
;
width
:
18px
;
border-radius
:
0
2px
2px
0
}
.aplayer
.aplayer-miniswitcher
.aplayer-icon
{
height
:
100%
;
width
:
100%
;
-webkit-transform
:
rotateY
(
180deg
);
transform
:
rotateY
(
180deg
);
transition
:
all
.3s
ease
}
.aplayer
.aplayer-miniswitcher
.aplayer-icon
path
{
fill
:
#666
}
.aplayer
.aplayer-miniswitcher
.aplayer-icon
:hover
path
{
fill
:
#000
}
@-webkit-keyframes
aplayer-roll
{
0
%
{
left
:
0
}
to
{
left
:
-100%
}}
@keyframes
aplayer-roll
{
0
%
{
left
:
0
}
to
{
left
:
-100%
}}
@-webkit-keyframes
rotate
{
0
%
{
-webkit-transform
:
rotate
(
0
);
transform
:
rotate
(
0
)}
to
{
-webkit-transform
:
rotate
(
1turn
);
transform
:
rotate
(
1turn
)}}
@keyframes
rotate
{
0
%
{
-webkit-transform
:
rotate
(
0
);
transform
:
rotate
(
0
)}
to
{
-webkit-transform
:
rotate
(
1turn
);
transform
:
rotate
(
1turn
)}}
/*# sourceMappingURL=APlayer.min.css.map*/
app/plugin/APlayer/APlayer.js
已删除
100644 → 0
浏览文件 @
574316b3
此差异已折叠。
点击以展开。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录