门户页面毛玻璃

src/views/Home/Home.vue

 <template>
   <div class="page">
     <!-- 头部 -->
-    <div class="header">
+    <div :class="{ zhanshi: isCropper, header: true }">
       <!-- 头部左侧 -->
       <div class="left">
         <div class="btm">
-          <div v-if="this.$store.state.tm.tmType==false"><img
-              src="../../assets/img/Home/jh.png"
-              alt=""
-            />
+          <div v-if="this.$store.state.tm.tmType == false">
+            <img src="../../assets/img/Home/jh.png" alt="" />
           </div>
 
-          <span v-if="this.$store.state.tm.tmType==false"><img
-              src="../../assets/img/Home/title.png"
-              alt=""
-            /></span>
+          <span v-if="this.$store.state.tm.tmType == false"
+            ><img src="../../assets/img/Home/title.png" alt=""
+          /></span>
 
-          <div
-            class="tmDiv"
-            v-if="this.$store.state.tm.tmType==true"
-          >
-            <img
-              src="../../assets/img/Home/tmLogo.svg"
-              alt=""
-            >
+          <div class="tmDiv" v-if="this.$store.state.tm.tmType == true">
+            <img src="../../assets/img/Home/tmLogo.svg" alt="" />
           </div>
         </div>
       </div>
@@ -34,16 +25,10 @@
           style="cursor: pointer"
           v-if="roleArr.includes('H-1')"
         >
-          <img
-            src="../../assets/img/Home/setting.svg"
-            alt=""
-          /> 系统管理
+          <img src="../../assets/img/Home/setting.svg" alt="" /> 系统管理
         </div>
         <div class="role">
-          <img
-            src="../../assets/img/Home/role.svg"
-            alt=""
-          />用户信息
+          <img src="../../assets/img/Home/role.svg" alt="" />用户信息
           <div class="rolelist">
             <ul>
               <li>用户名：{{ userInfo.user.username }}</li>
@@ -53,35 +38,27 @@
           </div>
         </div>
 
-        <div
-          style="cursor: pointer"
-          @click="logout"
-        >
-          <img
-            src="../../assets/img/Home/exit.svg"
-            alt=""
-          />安全退出
+        <div style="cursor: pointer" @click="logout">
+          <img src="../../assets/img/Home/exit.svg" alt="" />安全退出
         </div>
       </div>
       <!-- 主体 -->
       <div class="main">
         <div class="title">欢迎登录</div>
-        <div class="title1">{{this.$store.state.tm.tmType==true?'方正系统':'方正指掌纹系统'}}</div>
+        <div class="title1">
+          {{
+            this.$store.state.tm.tmType == true ? "方正系统" : "方正指掌纹系统"
+          }}
+        </div>
         <!-- 待办功能区 -->
         <div class="todoview">
           <div class="todo">
             <div>
-              <img
-                src="../../assets/img/Home/todoview.svg"
-                alt=""
-              />
+              <img src="../../assets/img/Home/todoview.svg" alt="" />
             </div>
             <p>待办工作</p>
           </div>
-          <div
-            class="todopublic quality_inspection"
-            @click="gozljc('mh')"
-          >
+          <div class="todopublic quality_inspection" @click="gozljc('mh')">
             <p>质量检查</p>
             <p>{{ zljcNum }}</p>
           </div>
@@ -90,10 +67,7 @@
             <div />
           </div>
 
-          <div
-            class="todopublic shanbuapp"
-            @click="gobdrd('mh')"
-          >
+          <div class="todopublic shanbuapp" @click="gobdrd('mh')">
             <p>闪捕App</p>
             <p>{{ sbAppNum }}</p>
           </div>
@@ -102,10 +76,7 @@
             <div />
           </div>
 
-          <div
-            class="todopublic fingerprint"
-            @click="goqbalk"
-          >
+          <div class="todopublic fingerprint" @click="goqbalk">
             <p>待发指纹</p>
             <p>{{ dfzwNum }}</p>
           </div>
@@ -114,57 +85,30 @@
         <div class="todolist">
           <!-- 第一列 -->
           <div class="list l1">
-            <div
-              class="import_images"
-              @click="goQBAJK"
-            >
-              <img
-                src="../../assets/img/Home/import_images.svg"
-                alt=""
-              />
+            <div class="import_images" @click="goQBAJK">
+              <img src="../../assets/img/Home/import_images.svg" alt="" />
               <div>案件图片导入</div>
             </div>
-            <div
-              @click="godrFPTX"
-              class="import_FTP"
-            >
-              <img
-                src="../../assets/img/Home/import_FTP.svg"
-                alt=""
-              />
+            <div @click="godrFPTX" class="import_FTP">
+              <img src="../../assets/img/Home/import_FTP.svg" alt="" />
               <div>FPTX导入</div>
             </div>
           </div>
           <!-- 第二列 -->
-          <div
-            class="list l2"
-            @click="gosjzygl"
-          >
-            <img
-              src="../../assets/img/Home/query.svg"
-              alt=""
-            />
+          <div class="list l2" @click="gosjzygl">
+            <img src="../../assets/img/Home/query.svg" alt="" />
             <p>发查询</p>
           </div>
           <!-- 第三列 -->
-          <div
-            @click="gobdrd"
-            class="list l2 l3"
-          >
-            <img
-              src="../../assets/img/Home/comparison.svg"
-              alt=""
-            />
+          <div @click="gobdrd" class="list l2 l3">
+            <img src="../../assets/img/Home/comparison.svg" alt="" />
             <p>比对认定</p>
           </div>
           <!-- 第四列 -->
           <div class="list l1 l4">
             <div class="xz">
               <div class="xztop">
-                <div
-                  class="xzleft"
-                  @click="gozzwcj"
-                >
+                <div class="xzleft" @click="gozzwcj">
                   <span class="xzimg">
                     <img
                       src="../../assets/img/Home/collect_new.svg"
@@ -174,10 +118,7 @@
                   </span>
                   <span class="itemTxt">活体采集</span>
                 </div>
-                <div
-                  class="xzright"
-                  @click="gozljc"
-                >
+                <div class="xzright" @click="gozljc">
                   <span class="xzimg">
                     <img
                       src="../../assets/img/Home/zljc.svg"
@@ -188,10 +129,7 @@
                   <span class="itemTxt">质量检查</span>
                 </div>
               </div>
-              <div
-                class="xzbottom"
-                @click="gobzxxgl"
-              >
+              <div class="xzbottom" @click="gobzxxgl">
                 <span class="xzimg">
                   <img
                     src="../../assets/img/Home/bzxxgl.svg"
@@ -208,14 +146,8 @@
               />
               <div>活体采集</div> -->
             </div>
-            <div
-              @click="gosjzygl"
-              class="import_FTP management"
-            >
-              <img
-                src="../../assets/img/Home/management.svg"
-                alt=""
-              />
+            <div @click="gosjzygl" class="import_FTP management">
+              <img src="../../assets/img/Home/management.svg" alt="" />
               <div>数据资源管理</div>
             </div>
           </div>
@@ -223,30 +155,26 @@
       </div>
     </div>
     <el-dialog
-      class='exitDialog'
+      class="exitDialog"
       title="退出系统"
       :visible.sync="dialogVisible"
-      :append-to-body='true'
+      :append-to-body="true"
       :modal-append-to-body="false"
-      :close-on-click-modal='false'
-      :modal='false'
+      @closed="closed"
+      :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 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
+      class="shadow"
+      v-show="isCropper"
+    ></div>
   </div>
 </template>
 
@@ -256,18 +184,18 @@ import jwtDecode from "jwt-decode";
 import utils from "@/utils/util.js";
 export default {
   name: "Home",
-  data () {
+  data() {
     return {
+      isCropper: false,
       userInfo: {},
       zljcNum: 0,
       sbAppNum: 0,
       dfzwNum: 0,
-
       dialogVisible: false, // 退出弹窗状态
     };
   },
   methods: {
-    goQBAJK () {
+    goQBAJK() {
       if (!this.roleArr.includes("F-2-16")) return;
       this.$router.pushToTab({
         path: "/qbalk",
@@ -276,14 +204,14 @@ export default {
         },
       });
     },
-    toXtgl () {
+    toXtgl() {
       this.$router.pushToTab("/UserManage");
     },
-    godrFPTX () {
+    godrFPTX() {
       if (!this.roleArr.includes("B-1")) return;
       this.$router.pushToTab("/drFPTX");
     },
-    gobdrd (type) {
+    gobdrd(type) {
       if (!this.roleArr.includes("C")) return;
       if (type == "mh") {
         this.$router.pushToTab({
@@ -296,11 +224,11 @@ export default {
         this.$router.pushToTab("/cxyrd");
       }
     },
-    gosjzygl () {
+    gosjzygl() {
       if (!this.roleArr.includes("F-1")) return;
       this.$router.pushToTab("/AllPersonnelBaseIndex/");
     },
-    gozzwcj () {
+    gozzwcj() {
       if (!this.roleArr.includes("A")) return;
       // this.$router.pushToTab("/zzwcj")
       // this.$router.pushToTab('/fingerprintIndex/R4300000000002021125008/admin')
@@ -312,10 +240,10 @@ export default {
       //   },
       // });
       this.$router.pushToTab({
-        path: "/htcj"
-      })
+        path: "/htcj",
+      });
     },
-    gozljc (type) {
+    gozljc(type) {
       if (!this.roleArr.includes("D")) return;
       if (type == "mh") {
         this.$router.pushToTab({
@@ -328,7 +256,10 @@ export default {
         this.$router.pushToTab("/zljc");
       }
     },
-    goqbalk () {
+    closed(){
+      this.isCropper = false;
+    },
+    goqbalk() {
       if (!this.roleArr.includes("F-2")) return;
       this.$router.pushToTab({
         path: "/qbalk",
@@ -337,14 +268,15 @@ export default {
         },
       });
     },
-    gobzxxgl () {
+    gobzxxgl() {
       if (!this.roleArr.includes("G")) return;
       this.$router.pushToTab("/bzxxfh");
     },
-    logout () {
-      this.dialogVisible = true
+    logout() {
+      this.dialogVisible = true;
+      this.isCropper = true;
     },
-    exit () {
+    exit() {
       this.$axios
         .get("/security/logout")
         .then((res) => {
@@ -355,9 +287,9 @@ export default {
             this.$message.info("退出成功！");
           }
         })
-        .catch((err) => { });
+        .catch((err) => {});
     },
-    getHomeNum () {
+    getHomeNum() {
       this.$axios.get("/api/home/getHomeMsg").then((res) => {
         if (res.data.code == 200) {
           console.log(res.data);
@@ -368,8 +300,8 @@ export default {
       });
     },
   },
-  async mounted () {
-    function getIPs (callback) {
+  async mounted() {
+    function getIPs(callback) {
       var ip_dups = {};
       //compatibility for firefox and chrome
       var RTCPeerConnection =
@@ -424,7 +356,7 @@ export default {
         };
       //construct a new RTCPeerConnection
       var pc = new RTCPeerConnection(servers, mediaConstraints);
-      function handleCandidate (candidate) {
+      function handleCandidate(candidate) {
         //match just the IP address
         var ip_regex = /([0-9]{1,3}(\.[0-9]{1,3}){3})/;
         var ip_addr = ip_regex.exec(candidate)[1];
@@ -445,11 +377,11 @@ export default {
           //trigger the stun server request
           pc.setLocalDescription(
             result,
-            function () { },
-            function () { }
+            function () {},
+            function () {}
           );
         },
-        function () { }
+        function () {}
       );
       //wait for a while to let everything done
       setTimeout(function () {
@@ -464,24 +396,24 @@ export default {
     let ipRes = await new Promise((resolve, reject) => {
       getIPs(function (ip) {
         if (ip.match(/^(192\.168\.|169\.254\.|10\.|172\.(1[6-9]|2\d|3[01]))/)) {
-          resolve(ip)
-          return ip
+          resolve(ip);
+          return ip;
           //内网ip
         } else {
           //外网ip
-          resolve(ip)
-          return ip
+          resolve(ip);
+          return ip;
         }
       });
-    })
+    });
     /******************* */
     // this.ip = ipRes
     // console.log(this.ip);
-    localStorage.setItem("userIP", ipRes); //存入 参数： 1.调用的值 2.所要存入的数据 
-    console.log(localStorage.getItem("userIP"));//输出
+    localStorage.setItem("userIP", ipRes); //存入 参数： 1.调用的值 2.所要存入的数据
+    console.log(localStorage.getItem("userIP")); //输出
     console.log("store登录状态：" + this.$store.state.tm.tmType);
   },
-  created () {
+  created() {
     sessionStorage.setItem("crumbs", utils.Encrypt("[]"));
     this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
     console.log(this.userInfo);
@@ -489,7 +421,7 @@ export default {
     this.getHomeNum();
   },
   computed: {
-    roleArr () {
+    roleArr() {
       return this.$store.state.layout.Menu;
     },
   },
@@ -922,6 +854,20 @@ export default {
   max-height: calc(100% - 30px);
   max-width: calc(100% - 30px);
 }
+.zhanshi {
+  filter: blur(2px);
+  //display: none;
+}
+.shadow {
+  z-index: 999;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba($color: #fff, $alpha: 0.65);
+}
+
 .exitDialog {
   /deep/.el-dialog__header {
     padding: 15px 24px 13px;

src/views/SystemManage/UserManage.vue

@@ -674,7 +674,7 @@ export default {
         children: "childCodeDwXz",
         checkStrictly: true,
         emitPath: false,
-      },
+      }, 
       // 新增对象
       addFormParams: {
         idCard: "",