| | |
| | | <template> |
| | | <div class="alarm-popup"> |
| | | <div class="alarm-popup-container" v-if="visible"> |
| | | <div class="radius-border top-left"></div> |
| | | <div class="radius-border top-right"></div> |
| | | <div class="radius-border bottom-left"></div> |
| | | <div class="radius-border bottom-right"></div> |
| | | <div class="alarm-popup-content"> |
| | | <div class="alarm-popup-header"> |
| | | <div class="alarm-popup-title"><i class="el-icon-warning"></i>告警提示</div> |
| | | <div class="alarm-popup-title"><i class="el-icon-warning-outline"></i>告警提示!</div> |
| | | <div class="alarm-popup-close" @click="close"><i class="el-icon-close"></i></div> |
| | | </div> |
| | | <div class="alarm-popup-body"> |
| | |
| | | </div> |
| | | <div class="page-flex-box-body"> |
| | | <el-table |
| | | class="popup-table" |
| | | stripe |
| | | size="small" |
| | | header-row-class-name="header-primary" |
| | |
| | | <el-table-column label="操作" width="120" align="center"> |
| | | <template slot-scope="scope"> |
| | | <el-button |
| | | type="primary" |
| | | type="danger" |
| | | size="mini" @click="clickItem(scope.row)">详情</el-button> |
| | | </template> |
| | | </el-table-column> |
| | |
| | | } |
| | | .alarm-popup-content { |
| | | position: relative; |
| | | background-color: #0b2184; |
| | | background-color: #EE9741; |
| | | background-size: 100% 100%; |
| | | background-repeat: no-repeat; |
| | | border: 1px solid #0a56f7; |
| | | } |
| | | .radius-border { |
| | | position: absolute; |
| | |
| | | } |
| | | .alarm-popup-header { |
| | | position: relative; |
| | | border-bottom: 1px solid #0ca7e2; |
| | | background-color: #D8741A; |
| | | } |
| | | .alarm-popup-header .alarm-popup-title { |
| | | line-height: 42px; |
| | | font-size: 16px; |
| | | padding-left: 8px; |
| | | font-weight: bold; |
| | | color: #ffe329; |
| | | color: #FFFFFF; |
| | | } |
| | | .alarm-popup-title i { |
| | | font-size: 20px; |
| | |
| | | } |
| | | .page-flex-box-header { |
| | | padding: 8px 16px; |
| | | background-color: #102ba2; |
| | | } |
| | | .page-flex-box-body { |
| | | box-sizing: border-box; |
| | | height: 420px; |
| | | padding: 0 8px 8px; |
| | | } |
| | | .el-badge-radio { |
| | | margin-right: 32px; |
| | | } |
| | | .el-badge-radio .el-radio { |
| | | margin-right: 0; |
| | | background-color: #0b388a; |
| | | } |
| | | .el-badge-radio .el-radio.is-checked { |
| | | background: none; |
| | | } |
| | | /deep/ .el-badge-radio .el-radio.is-checked .el-radio__label { |
| | | color: #0b388a; |
| | | font-weight: bold; |
| | | } |
| | | /deep/ .el-table .header-primary th { |
| | | background: #F3B67A; |
| | | color: #0b388a; |
| | | font-weight: bold; |
| | | } |
| | | /deep/ .el-table.popup-table { |
| | | background-color: #F3B67A; |
| | | color: #000; |
| | | } |
| | | /deep/ .el-table.popup-table td { |
| | | background-color: #FCEAD9; |
| | | } |
| | | </style> |