el-dialog背景色、文字颜色修改以及最终实现效果_el-dialog title颜色

废话不多说 直接上代码

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

效果图 附上