自用element-plus 弹窗样式修改

代码层

<div class="DeleteConfit">

<el-dialog v-model="centerDialogVisible" width="30%">

<template #header="{ titleId, titleClass }">

<div class="my-header">

<div :id="titleId" :class="titleClass">

已选中 <span class="num">&nbsp;{{ checkedArr.length }}条&nbsp;</span>志愿者信息，确认删除吗？

</div>

</div>

</template>

<div class="Body">删除后将无法恢复</div>

<template #footer>

<span class="dialog-footer">

<el-button class="Cancel" @click="centerDialogVisible = false">取消</el-button>

<el-button class="Delete" @click="DelteProject"> 删除 </el-button>

</span>

</template>

</el-dialog>

</div>

样式层

.DeleteConfit{

/deep/ .el-overlay{

.el-overlay-dialog{

.el-dialog{

margin-top: 360px;

width: 480px;

height: 160px;

.el-dialog__header{

height: 48px;

.my-header{

text-align: left;

font-size: 16px;

font-family: Source Han Sans CN-Medium, Source Han Sans CN;

font-weight: 500;

color: #313233;

.el-dialog__title{

.num{

font-size: 16px;

font-family: Source Han Sans CN-Medium, Source Han Sans CN;

font-weight: 500;

color: #027AFF;

}

.NameLength{

display: inline-block;

max-width: 100px;

overflow: hidden;

white-space: nowrap;

text-overflow: ellipsis;

vertical-align:text-top;

}

}

}

}

.el-dialog__body{

height: 60px;

// line-height: 60px;

padding-top: 0;

text-align: left;

 

.Body{

height: 60px;

text-align: left;

margin-left: 24px;

line-height: 60px;

}

}

.el-dialog__footer{

padding-top: 0;

.dialog-footer{

.el-button{

width: 80px;

height: 36px;

}

.Cancle{

font-size: 14px;

font-family: Source Han Sans CN-Regular, Source Han Sans CN;

font-weight: 400;

color: #626366;

background: #FFFFFF;

border-radius: 2px 2px 2px 2px;

opacity: 1;

border: 1px solid #BFBFBF;

}

.Delete{

background: #E52C00;

border-radius: 2px 2px 2px 2px;

opacity: 1;

font-size: 14px;

font-family: Source Han Sans CN-Regular, Source Han Sans CN;

font-weight: 400;

color: #FFFFFF;

}

}

}

}

}

}

}