el-dialog背景色、文字颜色修改以及最终实现效果
el-dialog背景色、文字颜色修改以及最终实现效果
·
废话不多说 直接上代码
<el-dialog
title="紧急预案内容"
:visible.sync="dialogVisible"
width="40%" height="40%" style="margin-bottom: 80px;overflow-y: auto;" class="data-dialog">
<el-form ref="form" label-width="80px" :inline="true" class="formgeo">
<el-form-item v-for="(item, index) in list" :key="index" style="width:100%">
<p><span class="planTitle">预案标题:</span><span class="palnContent">{{ item.name }}</span></p>
<p><span class="planTitle">预案内容:</span><span class="palnContent">{{ item.content }}</span></p>
</el-form-item>
<el-form-item class="buttonright">
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</el-form-item>
</el-form>
</el-dialog>
<style>
.el-dialog {
/* background: rgba(0, 0, 0, .2) !important; */
background: rgba(0, 0, 0, 0.2) !important;
border: rgb(8, 255, 243) 1px solid;
backdrop-filter: blur(3px);
}
.el-dialog__title {
color: rgb(255, 255, 255);
font-weight: 900;
}
.el-dialog__header{
color: #fff;
background: rgba(0, 0, 0, 0.5);
text-align: center;
box-shadow: 0 0 1.5vw rgb(97, 255, 255) inset;
background: linear-gradient(#74ffef, #74ffef) left top,
linear-gradient(#3deeda, #3deeda) left top,
linear-gradient(#3deeda, #3deeda) right top,
linear-gradient(#3deeda, #3deeda) right top;
/* linear-gradient(#3deeda, #3deeda) left bottom,
linear-gradient(#3deeda, #3deeda) left bottom,
linear-gradient(#3deeda, #3deeda) right bottom,
linear-gradient(#3deeda, #3deeda) right bottom; */
background-repeat: no-repeat;
background-size: 2px 20px, 20px 2px;
}
.el-dialog__body{
padding: 20px;
color: #fff;
background: rgba(0, 0, 0, 0.5);
text-align: left;
box-shadow: 0 0 1.5vw rgb(57, 255, 255) inset;
background:
linear-gradient(#3deeda, #3deeda) left bottom,
linear-gradient(#3deeda, #3deeda) left bottom,
linear-gradient(#3deeda, #3deeda) right bottom,
linear-gradient(#3deeda, #3deeda) right bottom;
background-repeat: no-repeat;
background-size: 2px 20px, 20px 2px;
}
.el-form-item__content{
background-color: rgba(0, 0, 0, 0.1) ;
box-shadow: 0 0 0.5vw rgb(57, 255, 255);
background-repeat: no-repeat;
border-radius: 10px;
}
.planTitle {
padding: 0 0 0 20px;
color: #8ae3e9;
font-size: 18px;
font-weight: 600;
}
.planContent {
color: #e6feff;
font-size: 16px;
}
.el-button--primary {
color: #FFF;
background-color: #415b5ec2;
border-color: #75fbe9;
position: absolute;
margin-left: 374px;
}
</style>
效果图 附上
更多推荐
所有评论(0)