串查人像

src/views/cxyrd/modules/TTFace.vue

 <template>
-  <div class="tt_face">人像</div>
+  <div class="tt_face">
+    <!--    <div class="middle"></div>-->
+    <div class="tt_face_src">
+      <div class="tt_face_src_label">
+        <div class="tt_face_src_label_font">源数据</div>
+      </div>
+      <div class="faces">
+        <div class="face_div">
+          <div class="face"></div>
+          <div class="face_label">正面</div>
+        </div>
+        <div class="face_div">
+          <div class="face"></div>
+          <div class="face_label">左侧面</div>
+        </div>
+        <div class="face_div">
+          <div class="face"></div>
+          <div class="face_label">右侧面</div>
+        </div>
+        <div class="face_div">
+          <div class="face"></div>
+          <div class="face_label">身份证照</div>
+        </div>
+      </div>
+    </div>
+    <div class="tt_face_dest">
+      <div class="tt_face_dest_label">
+        <div class="tt_face_dest_label_font">目标数据</div>
+      </div>
+      <div class="faces">
+        <div class="face_div">
+          <div class="face"></div>
+          <div class="face_label">正面</div>
+        </div>
+        <div class="face_div">
+          <div class="face"></div>
+          <div class="face_label">左侧面</div>
+        </div>
+        <div class="face_div">
+          <div class="face"></div>
+          <div class="face_label">右侧面</div>
+        </div>
+        <div class="face_div">
+          <div class="face"></div>
+          <div class="face_label">身份证照</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -17,6 +65,85 @@ div {
 }
 .tt_face {
   height: 800px;
+  width: 1180px;
+  margin-left: 330px;
+}
+
+/*源数据外层*/
+.tt_face .tt_face_src {
+  height: 390px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+}
+/*目标数据外层*/
+.tt_face .tt_face_dest {
+  height: 390px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+}
+/*源标题*/
+.tt_face_src_label {
+  width: 40px;
+  height: 340px;
+  background: #f6f8fa;
+  border-radius: 8px 0px 0px 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+/*标题内部字体*/
+.tt_face_src_label .tt_face_src_label_font {
+  width: 16px;
+  height: 84px;
+  font-size: 16px;
+  font-family: MicrosoftYaHei;
+  color: #055fe7;
+  line-height: 28px;
+  /*-webkit-background-clip: text;*/
+  /*-webkit-text-fill-color: transparent;*/
+}
+
+.tt_face_dest_label {
+  width: 40px;
+  height: 340px;
+  background: #f6f8fa;
+  border-radius: 8px 0px 0px 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.tt_face_dest_label .tt_face_dest_label_font {
+  width: 16px;
+  height: 112px;
+  font-size: 16px;
+  font-family: MicrosoftYaHei;
+  color: #ff6200;
+  line-height: 28px;
+}
+/*指纹框*/
+.faces {
+  width: 100%;
+  padding: 0 8px 0 8px;
+}
+.face_div {
+  border: #333333 1px solid;
+  width: 255px;
+  height: 340px;
+  background: #ffffff;
+  border-radius: 8px;
+  border: 1px solid #cccccc;
+  margin: 0 8px 0 8px;
+}
+.face {
+  width: 255px;
+  height: 340px;
+}
+.face_label {
   width: 100%;
+  text-align: center;
 }
 </style>