From ccee429d379e0108b7445f72ade8d97c110a6fb3 Mon Sep 17 00:00:00 2001 From: ZZJ <zzjdsg2300@163.com> Date: 星期二, 09 十一月 2021 18:01:59 +0800 Subject: [PATCH] 问题修复 --- src/components/subComponents/CardItem.vue | 73 +++++++++++++++++++++++------------- 1 files changed, 47 insertions(+), 26 deletions(-) diff --git a/src/components/subComponents/CardItem.vue b/src/components/subComponents/CardItem.vue index a5d52f0..077aea4 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) }" > @@ -57,8 +56,9 @@ <img :src="item | httpImage" class="cursor-pointer" @click="detailsClick($event)" /> </el-carousel-item> </el-carousel> + <!-- 鏆傛椂璁や负鍙湁浜鸿劯鎶撴媿鐨勬姤璀�, 棣栭〉鏄剧ず灏忓浘, 鍏朵粬鏃堕棿鍧囨樉绀哄ぇ鍥� --> <img - v-else-if="data.targetInfo == null || data.targetInfo[0].picSmUrl == ''" + v-else-if="data.targetInfo == null || data.targetInfo[0].targetType !== 'FaceDetect'" :src="data.picMaxUrl[0] | httpImage" class="cursor-pointer" @click="detailsClick($event)" @@ -71,9 +71,10 @@ /> </div> <div class="s-card-left-box" v-else> - <img :src="data.baseInfo[0] | httpImage" class="cursor-pointer" /> + <img :src="data.baseInfo[0].targetPicUrl | httpImage" class="cursor-pointer" /> </div> </div> + <!-- 鍙充晶鏂囧瓧鍖哄煙 --> <!-- 澶氬紶搴曞浘鍒囨崲 --> <div class="s-card-right-isCompare" v-if="showType == 'compare'"> @@ -294,7 +295,7 @@ <!-- 娌℃湁搴曞簱锛岄潪姣斿锛屾櫘閫氭ā寮� 涓�瀹氭湁targetInfo锛屽苟涓攖argetInfo涓暟涓�1--> <div - v-else-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== '' && data.targetInfo.length == 1" + v-else-if="data.targetInfo !== null && data.targetInfo[0].picSmUrl !== ''" class="s-card-right-signal" > <div @@ -492,7 +493,8 @@ export default { mounted() { - window.addEventListener("resize", this.watchWindow); + //window.addEventListener("resize", this.watchWindow); + window.addEventListener("resize", this.getBottom) }, props: { data: { @@ -502,7 +504,12 @@ showType: { type: String, default: "search" - } + }, + fromCluster: { + type: Boolean, + default: false + }, + searchT: {} }, computed: { isId() { @@ -533,6 +540,9 @@ } }, httpImage(url) { + if (!url.length) { + return "" + } return '/httpImage/' + url + ((url.indexOf("?") >= 0) ? '&' : '?') + 'width=160' } }, @@ -555,13 +565,14 @@ }, 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`; + this.$nextTick(() => { + let imgDom = this.$refs.firstImg + if (imgDom) { + let num = (imgDom.offsetHeight - imgDom.offsetWidth) / 2 + return `${num}px`; + } + return `4px`; + }) }, getUrl(bwtype) { if (bwtype == 1) { @@ -589,15 +600,19 @@ this.$emit("addToBase", item); }, tosearch(item) { + this.searchT 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 if (!item.id || item.id == "") { compType = 0 // 鏁版嵁鏉ヨ嚜浜庡簳搴� } - - let message = 'toSearch?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType + '×tamp=' + new Date().getTime(); - //let message = 'toSearch?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType; + let message + if (this.fromCluster) { + message = 'toCluster?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType + '×tamp=' + new Date().getTime() + '&start=' + this.searchT[0] + '&end=' + this.searchT[1]; + } else { + message = 'toSearch?showType=findByPic&targetId=' + captureId + '&picSmUrl=' + imgUrl + '&compType=' + compType + '×tamp=' + new Date().getTime() + '&start=' + this.searchT[0] + '&end=' + this.searchT[1]; + } window.parent.postMessage({ msg: message }, "*") @@ -610,15 +625,15 @@ font-family: PingFangSC-Medium; } .color222 { - font-size: 0.75rem; + font-size: 12px; font-weight: 600; - line-height: 1rem; + line-height: 14px; color: #222222; } .color666 { color: #666666; - font-size: 0.75rem; - line-height: 1.25rem; + font-size: 12px; + line-height: 16px; } .box-card { cursor: default; @@ -640,11 +655,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 +668,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 +712,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