头部布局及代码:
<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