elementUI中折叠面板箭头图标位置调整
2021-03-18 本文已影响0人
陶菇凉
image.png
1.html内容
<el-collapse accordion>
<el-collapse-item v-for="(item,index) in 2">
<span class="collapse-title flex flex_spb a_c" slot="title">组{{index}}(创建时间2021-1-1,修改时间2021-1-20)
<div class="collapse-title-right flex a_c">
<span @click.stop="eventsClick(2)">编辑</span>
<span class="el-icon-close" @click.stop="eventsClick(3)"></span>
</div>
</span>
</el-collapse accordion>
2.css内容
.el-collapse-item__arrow {
margin-right: 5px;
font-size: 18px;
}
.el-collapse-item__header {
background: #D6E6FF;
/* border: 1px solid #DCDCDC;*/
border-left: 2px solid #4B8FFF;
padding-left: 20px;
}
.collapse-title {
flex: 1 0 90%;
order: 1;
}
.el-collapse-item__header {
flex: 1 0 auto;
order: -1;
}
.collapse-title-right{
& span:first-child{
color: #0E64F1;
margin-right: 20px;
cursor: pointer;
}
& span:last-child{
color: #D60000;
cursor: pointer;
margin-right: 20px;
font-size: 20px;
}
}
.el-collapse-item__content{
padding: 0 0 0 20px;
}
.operate{
span{
color: #0E64F1;
cursor: pointer;
}
i{
margin: 0 10px;
}
}