复核--查重结束

src/views/bzxxgl/fhxxTT.vue

 <!--
  * @Author: your name
  * @Date: 2021-12-03 15:35:26
- * @LastEditTime: 2021-12-15 15:16:06
+ * @LastEditTime: 2021-12-15 16:02:30
  * @LastEditors: Please set LastEditors
  * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  * @FilePath: \指纹系统\founder_vue\src\views\bzxxgl\fhxxLT.vue
@@ -11,7 +11,7 @@
     <div :class="{ bzActive: isShowbzDialogBg || loading_sd, tt: true }">
       <div class="header">
         <div class="label">复核信息-查重</div>
-        <div class="btns">
+        <div class="btns" @click="openFhxxTT">
           <span class="iconfont">&#xe644;</span>
           <span>复核详情</span>
         </div>
@@ -28,10 +28,6 @@
               </div>
             </template>
           </div>
-          <!-- <div class="source-data">
-            <Swiper />
-          </div> -->
-
           <!--指纹 掌纹 人像 按钮组-->
           <div class="btns">
             <div class="btn" :class="{ active: isFinger == true }" @click="finger">
@@ -417,15 +413,15 @@
     </div>
 
     <!-- 信息卡 -->
-    <div class="fhxxLTDom" style="display: none;">
-      <!-- <div class="fhxxLT-left">
-        <div class="line-imageEd"></div>
-        <ImageEd class="fhxxLT-imageEd"></ImageEd>
-      </div> -->
+    <div class="fhxxLTDom" v-show="fhxxTTShow">
       <div class="fhxxLT-right">
-        <div class="fhxx-top">
-          <div class="fhxx-title">复核信息-查重</div>
-          <div class="scroll-content">
+        <div class="fhxx-title">
+          <div class="name">复核详情</div>
+          <div class="back" @click="cancelbz"><i class="iconfont icon-fanhui"></i></div>
+        </div>
+        <div class="scroll-content">
+          <div class="fhxx-top">
+
             <div class="fhxx-top-top">
               <div class="fhxx-top-top-left">
                 <div class="fhxx-top-top-left-title">
@@ -582,12 +578,12 @@
               </div>
             </div>
           </div>
-        </div>
-        <div class="fhxx-bottom">
-          <div class="fhxx-bottom-title">复核意见</div>
-          <div class="fhxx-bottom-textarea">
-            <el-input type="textarea" :rows="3" placeholder="在此输入复核意见" v-model="fhyj">
-            </el-input>
+          <div class="fhxx-bottom">
+            <div class="fhxx-bottom-title">复核意见</div>
+            <div class="fhxx-bottom-textarea">
+              <el-input type="textarea" :rows="3" placeholder="在此输入复核意见" v-model="fhyj">
+              </el-input>
+            </div>
           </div>
         </div>
         <div class="fhxx-btns">
@@ -634,6 +630,7 @@ export default {
   name: 'fhxxLT',
   data () {
     return {
+      fhxxTTShow: false,
       srcbarcode: '',
       destbarcode: '',
 
@@ -880,14 +877,6 @@ export default {
   },
   mounted () {
     this.finger();
-    // // 获取源滚动指纹图-源
-    // this.getSourceRollFingerPrintDetail(this.srcbarcode)
-    // // 获取源滚动指纹图-目标
-    // this.getDestRollFingerPrintDetail()
-    // // 源平面
-    // this.getSourcePlainFingerPrintDetail()
-    // // 目标平面
-    // this.getDestPlainFingerPrintDetail()
 
     this.$bus.on("ccbarcode", (code) => {
       this.cleardest();
@@ -910,14 +899,23 @@ export default {
   },
   methods: {
     /**
+     * 打开复核详情信息卡
+     */
+    openFhxxTT () {
+      this.fhxxTTShow = true
+      this.isShowbzDialogBg = true;
+      this.isShowbzDialogBg = true
+    },
+    /**
      * 取消查看详情
      */
-    cancelbz() {
+    cancelbz () {
       this.isShowbzDialogBg = false;
       this.isShowbzDialog = false;
       this.cancelDetail();
       this.faceDetail++;
       this.plamDetail++;
+      this.fhxxTTShow = false
     },
     /**
      * 確認解除比中关系
@@ -1476,6 +1474,75 @@ export default {
 }
 </style>
 <style scoped lang="scss">
+.fhxxTT {
+  .fhxxLTDom {
+    z-index: 1000;
+    position: fixed;
+    right: 0;
+    top: 0;
+    height: 100vh;
+    width: 712px;
+    background: #FFFFFF;
+    box-shadow: 0px 14px 30px 0px rgba(0, 21, 51, 0.25);
+    .fhxxLT-right {
+      width: 712px;
+      .fhxx-top {
+        margin-top: 0;
+        padding-top: 0;
+        background-color: #ffffff;
+        border-radius: 0;
+        box-shadow: none;
+      }
+      .fhxx-title {
+        padding: 0 32px;
+        height: 50px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 16px;
+        font-family: MicrosoftYaHei;
+        color: #282F3C;
+        border-bottom: 1px solid #EEEEEE;
+        .icon-fanhui {
+          font-size: 14px;
+          color: #B1B6C2;
+          cursor: pointer;
+        }
+      }
+      .scroll-content {
+        overflow-y: scroll;
+        height: 800px;
+      }
+      .content-area2 {
+        margin-top: 0 !important;
+      }
+      .bzxx-textarea {
+        width: 648px;
+        height: 70px;
+        background: #F6F8FA;
+        border-radius: 4px;
+      }
+      .fhxx-bottom-textarea {
+        margin-left: 32px;
+        width: 648px;
+        height: 70px;
+        background: #F6F8FA;
+        box-shadow: 0px 1px 2px 0px rgba(5, 95, 231, 0.18);
+        border-radius: 5px;
+        /deep/.el-textarea__inner {
+          width: 648px;
+          height: 70px;
+        }
+      }
+      .fhxx-btns {
+        width: 712px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+    }
+  }
+}
 div {
   margin: 0;
   padding: 0;
@@ -1516,14 +1583,13 @@ div {
     font-size: 14px;
     line-height: 22px;
     cursor: pointer;
-    i{
+    .iconfont {
+      cursor: pointer;
       width: 16px;
       height: 16px;
-      cursor: pointer;
-    }
-    .iconfont {
       font-size: 16px;
       color: #055FE7;
+      margin-right: 3px;
     }
     span {
       cursor: pointer;
@@ -1782,7 +1848,7 @@ div {
           height: 30px;
           font-size: 20px;
           font-family: MicrosoftYaHei;
-          color: #333333;
+          color: #055FE7;
           line-height: 40px;
           margin-left: -50px;
         }

src/views/bzxxgl/scss/fhxxLT.scss

@@ -11,6 +11,7 @@
   }
 
   .relieveDialog {
+    z-index: 1000;
     position: absolute;
     left: calc(50% - 221px);
     top: calc(50% - 84.5px);