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;
        }
    }
上一篇下一篇

猜你喜欢

热点阅读