1. 歌单顶部背景滤镜效果
<div class="contentLeft">
<img :src="playlist.coverImgUrl">
<div class="count">
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-24gl-play"></use>
</svg>
<span>{{changeValue(playlist.playCount) }}</span>
</div>
</div>
使用filter:blur 进行背景模糊
.bg{
position: fixed;
left: 0;
top: 0;
width: 7.5rem;
height: auto;
z-index: -1;
filter: blur(40px);
}
2.歌单长列表
使用v-for循环来渲染item
<div class="playItem" v-for="(item,i) in playlist.tracks" :key="i">
<div class="left">
<div class="index">{{i+1}}</div>
<div class="content">
<div class="title">{{item.name}}</div>
<div class="anthor">
<span class="tag" v-for="(tag,index) in playlist.tags" :key="index">{{tag}}</span>
<span>{{item.al.name}}</span>
</div>
</div>
</div>
<div class="right">
<svg class="icon" aria-hidden="true" @click="setPlayIndex(i)">
<use xlink:href="#icon-bofangqi"></use>
</svg>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-31liebiao"></use>
</svg>
</div>
</div>
点击播放按钮时把当前索引传入setPlayIndex
@click="setPlayIndex(i)"