退出二次确认

src/views/Home/Home.vue

@@ -222,6 +222,31 @@
         </div>
       </div>
     </div>
+    <el-dialog
+      class='exitDialog'
+      title="退出系统"
+      :visible.sync="dialogVisible"
+      :append-to-body='true'
+      :modal-append-to-body="false"
+      :close-on-click-modal='false'
+      :modal='false'
+      width="25rem"
+    >
+      <span>您确认要退出系统吗？</span>
+      <span
+        slot="footer"
+        class="dialog-footer"
+      >
+        <el-button
+          @click="exit"
+          class='qr'
+        >确 认</el-button>
+        <el-button
+          @click="dialogVisible=false"
+          class='qx'
+        >取 消</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -237,6 +262,8 @@ export default {
       zljcNum: 0,
       sbAppNum: 0,
       dfzwNum: 0,
+
+      dialogVisible: false, // 退出弹窗状态
     };
   },
   methods: {
@@ -315,6 +342,9 @@ export default {
       this.$router.pushToTab("/bzxxfh");
     },
     logout () {
+      this.dialogVisible = true
+    },
+    exit () {
       this.$axios
         .get("/security/logout")
         .then((res) => {
@@ -456,8 +486,6 @@ export default {
     this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
     console.log(this.userInfo);
 
-
-
     this.getHomeNum();
   },
   computed: {
@@ -881,4 +909,62 @@ export default {
       bottom/70px 87px,
     linear-gradient(133deg, #42bbf2 0%, #12a1e5 100%);
 }
+// 退出
+/deep/ .el-dialog {
+  display: flex;
+  flex-direction: column;
+  margin: 0 !important;
+  position: absolute;
+  top: 40%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  /*height:600px;*/
+  max-height: calc(100% - 30px);
+  max-width: calc(100% - 30px);
+}
+.exitDialog {
+  /deep/.el-dialog__header {
+    padding: 15px 24px 13px;
+    font-size: 16px;
+    font-family: HarmonyOS_Sans_SC;
+    color: #282f3c;
+    border-bottom: 1px solid #eeeeee;
+  }
+  /deep/.el-dialog__body {
+    padding: 30px 0 24px;
+    text-align: center;
+  }
+  /deep/.el-dialog__footer {
+    display: flex;
+    justify-content: center;
+    padding: 0 0 30px 0;
+    .dialog-footer {
+      margin-top: 0;
+    }
+    .qr {
+      width: 72px;
+      height: 40px;
+      background: #ffffff;
+      border-radius: 4px;
+      border: 1px solid #aeb5c2;
+      font-size: 14px;
+      font-family: MicrosoftYaHei;
+      color: #2e3846;
+      margin: 0;
+      margin-right: 12px;
+    }
+    .qx {
+      width: 72px;
+      height: 40px;
+      background: #055fe7;
+      border-radius: 4px;
+      border: 1px solid #055fe7;
+      font-size: 14px;
+      font-family: MicrosoftYaHei;
+      color: #fff;
+      margin: 0;
+      margin-left: 12px;
+    }
+  }
+}
 </style>