头部布局及代码:
<div class="player" v-show="playList.length > 0">
<div class="normal-player" v-show="fullScreen">
<div class="background">
<img width="100%" height="100%" :src="currentSong.image">
</div>
<div class="top">
<div class="back" @click="back">
<i class="icon-back"></i>
</div>
<h1 class="title" v-html="currentSong.name"></h1>
<h2 class="subtitle" v-html="currentSong.singer"></h2>
</div>
.player
.normal-player
position: fixed
left: 0
right: 0
top: 0
bottom: 0
z-index: 150
background: $color-background
.background
position: absolute
left: 0
top: 0
width: 100%
height: 100%
z-index: -1
opacity: 0.6
filter: blur(20px)
.top
position: relative
margin-bottom: 25px
.back
position absolute
top: 0
left: 6px
z-index: 50
.icon-back
display: block
padding: 9px
font-size: $font-size-large-x
color: $color-theme
transform: rotate(-90deg)
.title
width: 70%
margin: 0 auto
line-height: 40px
text-align: center
no-wrap()
font-size: $font-size-large
color: $color-text
.subtitle
line-height: 20px
text-align: center
font-size: $font-size-medium
color: $color-textz
中间部分的实现:
<div class="middle">
<div class="middle-l">
<div class="cd-wrapper">
<div class="cd">
<img class="image" :src="currentSong.image">
</div>
</div>
</div>
</div>
.middle
position: fixed
width: 100%
top: 80px
bottom: 170px
white-space: nowrap
font-size: 0
.middle-l
display: inline-block
vertical-align: top
position: relative
width: 100%
height: 0
padding-top: 80%
.cd-wrapper
position: absolute
left: 10%
top: 0
width: 80%
height: 100%
.cd
width: 100%
height: 100%
box-sizing: border-box
border: 10px solid rgba(255, 255, 255, 0.1)
border-radius: 50%
&.play
animation: rotate 20s linear infinite
&.pause
animation-play-state: paused
.image
position: absolute
left: 0
top: 0
width: 100%
height: 100%
border-radius: 50%
<div class="bottom">
<div class="operators">
<div class="icon i-left">
<i class="icon-sequence"></i>
</div>
<div class="icon i-left">
<i class="icon-prev"></i>
</div>
<div class="icon i-center">
<i class="icon-play"></i>
</div>
<div class="icon i-right">
<i class="icon-next"></i>
</div>
<div class="icon i-right">
<i class="icon-not-favorite"></i>
</div>
</div>
.bottom
position: absolute
bottom: 50px
width: 100%
.dot-wrapper
text-align: center
font-size: 0
.dot
display: inline-block
vertical-align: middle
margin: 0 4px
width: 8px
height: 8px
border-radius: 50%
background: $color-text-l
&.active
width: 20px
border-radius: 5px
background: $color-text-ll
.progress-wrapper
display: flex
align-items: center
width: 80%
margin: 0px auto
padding: 10px 0
.time
color: $color-text
font-size: $font-size-small
flex: 0 0 30px
line-height: 30px
width: 30px
&.time-l
text-align: left
&.time-r
text-align: right
.progress-bar-wrapper
flex: 1
.operators
display: flex
align-items: center
.icon
flex: 1
color: $color-theme
&.disable
color: $color-theme-d
i
font-size: 30px
.i-left
text-align: right
.i-center
padding: 0 20px
text-align: center
i
font-size: 40px
.i-right
text-align: left
.icon-favorite
color: $color-sub-theme
&.normal-enter-active, &.normal-leave-active
transition: all 0.4s
.top, .bottom
transition: all 0.4s cubic-bezier(0.86, 0.18, 0.82, 1.32)
&.normal-enter, &.normal-leave-to
opacity: 0
.top
transform: translate3d(0, -100px, 0)
.bottom
transform: translate3d(0, 100px, 0)
.mini-player
display: flex
align-items: center
position: fixed
left: 0
bottom: 0
z-index: 180
width: 100%
height: 60px
background: $color-highlight-background
&.mini-enter-active, &.mini-leave-active
transition: all 0.4s
&.mini-enter, &.mini-leave-to
opacity: 0
.icon
flex: 0 0 40px
width: 40px
padding: 0 10px 0 20px
img
border-radius: 50%
&.play
animation: rotate 10s linear infinite
&.pause
animation-play-state: paused
.text
display: flex
flex-direction: column
justify-content: center
flex: 1
line-height: 20px
overflow: hidden
.name
margin-bottom: 2px
no-wrap()
font-size: $font-size-medium
color: $color-text
.desc
no-wrap()
font-size: $font-size-small
color: $color-text-d
.control
flex: 0 0 30px
width: 30px
padding: 0 10px
.icon-play-mini, .icon-pause-mini, .icon-playlist
font-size: 30px
color: $color-theme-d
.icon-mini
font-size: 32px
position: absolute
left: 0
top: 0