记录一下最近做项目遇到的问题:elementui模仿网易云做出下面效果
效果:
这里是用的el-card做的:
代码:
<div v-for="(song,index) in item.songs" :key="song" :class="{cardBg1: index % 2 == 0}">
<el-card shadow="hover" >
<el-row>
<el-col :span="2"><sapn>{{song.id}}</sapn></el-col>
<el-col :span="10"><sapn>{{song.name}}</sapn></el-col>
<el-col :span="4"><sapn>{{song.author}}</sapn></el-col>
</el-row>
</el-card>
</div>
css部分:
/* 自定义el-card样式*/
.el-card ::v-deep .el-card__body {
padding: 4px;
border-radius: 10px
border: none
}
.cardBg1 >>>.el-card
background-color: #F9F9F9