确认框样式

src/views/xndc/index.vue

@@ -117,16 +117,30 @@
       <!-- 弹框主体 -->
       <div style="height: 100px">
         <el-radio-group v-model="selected">
-          <el-radio label="r1">在线运行：日前调度</el-radio>
-          <el-radio label="r2">在线运行：实时调度</el-radio>
-          <el-radio label="r3">在线运行：完全</el-radio>
-          <el-radio label="s">停止运行</el-radio>
+          <table id="radioTable">
+            <tr>
+              <td>
+                <el-radio label="r1">在线运行：日前调度</el-radio>
+              </td>
+              <td>
+                <el-radio label="r2">在线运行：实时调度</el-radio>
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <el-radio label="r3">在线运行：完全</el-radio>
+              </td>
+              <td>
+                <el-radio label="s">停止运行</el-radio>
+              </td>
+            </tr>
+          </table>
         </el-radio-group>
       </div>
       <el-divider></el-divider>
       <div style="position: absolute;margin-left: 135px;margin-top: 20px">
-        <el-button type="primary" @click="confirm">确  认</el-button>
-        <el-button type="info" @click="cancel">取  消</el-button>
+        <el-button type="primary" @click="confirm">确 认</el-button>
+        <el-button type="info" @click="cancel">取 消</el-button>
       </div>
     </div>
   </div>
@@ -149,7 +163,7 @@ export default {
     RightMiddle,
     RightBottom
   },
-  data(){
+  data() {
     return {
       status: 'd',
       dialogTitle: '虚拟电厂指令切换',
@@ -164,11 +178,24 @@ export default {
       this.selected = null
       this.dialogShow = true
     },
-    confirm(){
-      this.status = this.selected
-      this.dialogShow = false
+    confirm() {
+      if (this.selected) {
+        this.$confirm('确认执行所选指令操作？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+          this.$message({
+            type: 'success',
+            message: '操作成功'
+          });
+          this.status = this.selected
+          this.dialogShow = false
+        }).catch(() => {
+        })
+      }
     },
-    cancel(){
+    cancel() {
       this.dialogShow = false
     }
   }
@@ -216,11 +243,16 @@ export default {
   background-image: url('../../assets/images/crumb.png');
 }
 
-.left33{
+#radioTable td {
+  height: 50px;
+  text-align: left;
+}
+
+.left33 {
   left: 33%;
 }
 
-.left44{
+.left44 {
   left: 44.2%;
 }
 
@@ -254,7 +286,7 @@ export default {
   cursor: pointer;
 }
 
-.partition{
+.partition {
   position: absolute;
   top: 7px;
   width: 17px;
@@ -298,21 +330,20 @@ export default {
   text-shadow: 0 0 5px #fff, 0 1px 2px rgba(0, 0, 0, 1);
   margin-left: 36.5%;
   position: relative;
-  top: -15%;
+  top: 0;
   display: flex;
   justify-content: space-between;
 }
 
-.el-divider--horizontal{
-  /*margin: 0 0 8px;*/
-  margin: 0 auto;
+/deep/ .el-divider--horizontal {
+  margin: 20px auto 0;
   background: 0 0;
   border-top: 1px dashed #767676;
   width: 90%;
   text-align: center;
 }
 
-.el-button--primary {
+/deep/ .el-button--primary {
   background: url(../../assets/images/dialog/b-confirm.png) no-repeat center !important;
   color: white !important;
   font-size: 20px;
@@ -321,9 +352,10 @@ export default {
   height: 42px;
   border-color: transparent;
 }
-.el-button--info {
+
+/deep/ .el-button--info {
   background: url(../../assets/images/dialog/b-cancel.png) no-repeat center !important;
-  color: white !important;
+  color: #FFFFFF !important;
   font-size: 20px;
   font-weight: bold;
   width: 145px;
@@ -331,13 +363,17 @@ export default {
   border-color: transparent;
 }
 
+/deep/ .el-radio__input.is-checked + .el-radio__label {
+  color: #FFFFFF;
+}
+
 /deep/ .el-radio__input.is-checked .el-radio__inner {
   border-color: #40ffff;
-  background: #40ffff;
+  background: transparent;
 }
 
 /deep/ .el-radio__inner {
-  border: 1px solid #595959;
+  border: 2px solid rgba(242, 242, 242, 0.45);
   border-radius: 100%;
   width: 18px;
   height: 18px;
@@ -346,6 +382,19 @@ export default {
   box-sizing: border-box;
 }
 
+/deep/ .el-radio__inner::after {
+  width: 8px;
+  height: 8px;
+  border-radius: 100%;
+  background-color: #40ffff;
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  transition: transform .15s ease-in;
+}
+
 /deep/ .el-radio__input {
   white-space: nowrap;
   cursor: pointer;