From 46183ba8c63b38ea3671e7923edc7ec2fd34a6c3 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期五, 04 十二月 2020 16:01:54 +0800
Subject: [PATCH] 统计查询人脸比对卡片图片分值区布局调整

---
 src/components/canvas/Dialog.vue          |    3 +
 src/components/subComponents/CardItem.vue |   74 ++++++++++++++++++++----------------
 2 files changed, 43 insertions(+), 34 deletions(-)

diff --git a/src/components/canvas/Dialog.vue b/src/components/canvas/Dialog.vue
index 3796291..e0f11e1 100644
--- a/src/components/canvas/Dialog.vue
+++ b/src/components/canvas/Dialog.vue
@@ -394,6 +394,7 @@
     },
     // 鍒犻櫎鍏冪礌
     del() {
+      debugger
       let delEle = {};
       switch (this.delCursor.type) {
         case "1":
@@ -537,7 +538,6 @@
           _this.type = "0";
           _this.delCursor.type = "2";
           _this.delCursor.index = i;
-          debugger
           _this.delCursor.remarksName = v.name;
           _this.delCursor.id = v.id;
           // console.log("褰撳墠閫変腑鍏冪礌锛�",_this.delCursor)
@@ -854,6 +854,7 @@
       width = typeof width !== "undefined" ? width : 1;
       // color = typeof color !== 'undefined' ? color : 'yellow'
       // 璁＄畻鍚勮搴﹀拰瀵瑰簲鐨凱2,P3鍧愭爣
+      debugger
       let angle = (Math.atan2(fromY - toY, fromX - toX) * 180) / Math.PI;
       let angle1 = ((angle + theta) * Math.PI) / 180;
       let angle2 = ((angle - theta) * Math.PI) / 180;
diff --git a/src/components/subComponents/CardItem.vue b/src/components/subComponents/CardItem.vue
index a5d52f0..3938e06 100644
--- a/src/components/subComponents/CardItem.vue
+++ b/src/components/subComponents/CardItem.vue
@@ -31,9 +31,8 @@
         </div>
         <div
           class="s-card-left-isCompare-div compareScore111"
-          style
           :style="{
-            bottom: getBottom(),
+            bottom: '0',
             background: getUrl(data.baseInfo[initialIndex].bwType)
           }"
         >
@@ -491,8 +490,9 @@
 }
 
 export default {
-  mounted() {
-    window.addEventListener("resize", this.watchWindow);
+  mounted () {
+    //window.addEventListener("resize", this.watchWindow);
+    window.addEventListener("resize",this.getBottom)
   },
   props: {
     data: {
@@ -505,18 +505,18 @@
     }
   },
   computed: {
-    isId() {
+    isId () {
       return this.data.id
     }
   },
   filters: {
-    formatTime(t) {
+    formatTime (t) {
       return new Date(t).Format("yyyy-MM-dd HH:mm:ss")
     },
-    percentage(score) {
+    percentage (score) {
       return score.toFixed(2) + "%"
     },
-    idCard(v) {
+    idCard (v) {
       try {
         let obj = JSON.parse(v)
         return obj.idCard
@@ -524,7 +524,7 @@
         return v.split("/")[1]
       }
     },
-    sex(v) {
+    sex (v) {
       try {
         let obj = JSON.parse(v)
         return obj.sex
@@ -532,11 +532,11 @@
         return v.split("/")[0]
       }
     },
-    httpImage(url) {
+    httpImage (url) {
       return '/httpImage/' + url + ((url.indexOf("?") >= 0) ? '&' : '?') + 'width=160'
     }
   },
-  data() {
+  data () {
     return {
       tempShowType: true,
       initialIndex: 0,
@@ -547,48 +547,49 @@
   },
   watch: {
     data: {
-      handler(val, oldVal) {
+      handler (val, oldVal) {
         this.$forceUpdate()
       },
       deep: true
     }
   },
   methods: {
-    getBottom() {
-      // let imgDom = document.getElementById(str)
-      let imgDom = this.$refs.firstImg
-      if (imgDom) {
-        let num = (imgDom.offsetHeight - imgDom.offsetWidth) / 2
-        return `${num}px`;
-      }
-      return `4px`;
+    getBottom () {
+      this.$nextTick(() => {
+        let imgDom = this.$refs.firstImg
+        if (imgDom) {
+          let num = (imgDom.offsetHeight - imgDom.offsetWidth) / 2
+          return `${num}px`;
+        }
+        return `4px`;
+      })
     },
-    getUrl(bwtype) {
+    getUrl (bwtype) {
       if (bwtype == 1) {
         return `url(${require("@/assets/img/red.png")})`
       } else {
         return `url(${require("@/assets/img/green.png")})`
       }
     },
-    changeInitialIndex(index) {
+    changeInitialIndex (index) {
       this.initialIndex = index;
     },
-    cardMouseenter(ev) {
+    cardMouseenter (ev) {
       this.overflowState = false;
     },
-    cardMouseleave(ev) {
+    cardMouseleave (ev) {
       this.overflowState = true;
     },
-    changeCarousel(index) {
+    changeCarousel (index) {
       this.carouselIndex = index;
     },
-    detailsClick(ev) {
+    detailsClick (ev) {
       this.$emit("detailsClick", ev);
     },
-    toAdd(item) {
+    toAdd (item) {
       this.$emit("addToBase", item);
     },
-    tosearch(item) {
+    tosearch (item) {
       let captureId = item.id == "" ? item.baseInfo[0].targetId : item.id
       let imgUrl = item.targetInfo ? item.targetInfo[0].picSmUrl : item.baseInfo[0].targetPicUrl
       let compType = 1 //  鏁版嵁鏉ヨ嚜浜巈s
@@ -621,6 +622,7 @@
   line-height: 1.25rem;
 }
 .box-card {
+
   cursor: default;
   .el-carousel__arrow {
     height: 20px;
@@ -640,11 +642,11 @@
     .card-img-box {
       box-sizing: border-box;
       width: 100%;
-      height: 100%;
       position: relative;
       overflow: hidden;
+          top: 50%;
+    transform: translateY(-50%);
       .card-img-box-compear {
-        height: 100%;
         width: 100%;
         display: flex;
         .card-img-box-compear-left {
@@ -653,8 +655,13 @@
           justify-content: center;
           align-items: Center;
           overflow: hidden;
-          width: 100%;
+          flex: 1;
           height: 100%;
+        }
+        .el-carousel{
+          flex: 1;
+          width: auto;
+          height: auto!important;
         }
         .el-carousel__item {
           display: flex;
@@ -692,9 +699,10 @@
       }
     }
     img {
+      display: block;
       width: 100%;
-      height: 100%;
-      object-fit: contain;
+      //height: 100%;
+      //object-fit: contain;
     }
     .s-card-left-isCompare-div {
       width: 60px;

--
Gitblit v1.8.0