</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>
<div class="middle">
<div class="middle-l">
<div class="cd-wrapper">
<div class="cd" :class="cdCls">
<img :src="currentSong.image" alt="" class="image"> //封面图
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="progress-wrapper">
<span class="time time-l">{{ format(currentTime) }}</span>
<div class="progress-bar-wrapper">
<progress-bar :percent="percent" @percentChange="onProgressBarChange"></progress-bar>
</div>
<span class="time time-r">{{ format(currentSong.duration) }}</span>
</div>
<div class="operators">
<div class="icon i-left">
<i :class="iconMode" @click="changeMode"></i>
</div>
<div class="icon i-left" :class="disableCls">
<i @click="prev" class="icon-prev"></i>
</div>
<div class="icon i-center" :class="disableCls">
<i :class="playIcon" @click="togglePlaying"></i>
</div>
<div class="icon i-right" :class="disableCls">
<i @click="next" class="icon-next"></i>
</div>
<div class="icon i-right">
<i class="icon icon-not-favorite"></i>
</div>
</div>
</div>
</div>
</transition>
<transition name="mini">
<div class="mini-player" v-show="!fullScreen" @click="open">
<div class="icon">
<img :src="currentSong.image" alt="" width="40" height="40" :class="cdCls">
</div>
<div class="text">
<h2 class="name" v-html="currentSong.name"></h2>
<p class="desc" v-html="currentSong.singer"></p>
</div>
<div class="control">
<i :class="miniIcon" @click.stop="togglePlaying"></i>
</div>
<div class="control">
<i class="icon-playlist"></i>
</div>
</div>
</transition>
<audio :src="currentSong.url" ref="audio" @canplay="ready" @error="error" @timeupdate="updateTime" @ended="end"></audio>
</div>
打开播放器的状态
import {mapGetters,mapMutations} from 'vuex';
