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 | 90 +++++++++++++++++++++++++++-----------------
1 files changed, 55 insertions(+), 35 deletions(-)
diff --git a/src/components/subComponents/CardItem.vue b/src/components/subComponents/CardItem.vue
index df55282..077aea4 100644
--- a/src/components/subComponents/CardItem.vue
+++ b/src/components/subComponents/CardItem.vue
@@ -7,7 +7,7 @@
<div class="card-img-box-compear">
<div class="card-img-box-compear-left" ref="firstImg">
<img
- :src="'/httpImage/'+data.targetInfo[0].picSmUrl+'?width=160'"
+ :src="data.targetInfo[0].picSmUrl | httpImage"
:id="'/compear/'+data.targetInfo[0].picSmUrl"
class="cursor-pointer"
@click="detailsClick($event)"
@@ -22,7 +22,7 @@
>
<el-carousel-item v-for="(item, index) in data.baseInfo" :key="index">
<img
- :src="'/httpImage/'+item.targetPicUrl+'?width=160'"
+ :src="item.targetPicUrl | httpImage"
class="cursor-pointer"
@click="detailsClick($event)"
/>
@@ -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)
}"
>
@@ -54,30 +53,28 @@
@change="changeCarousel"
>
<el-carousel-item v-for="(item, index) in data.picMaxUrl" :key="index + 'img'">
- <img
- :src="'/httpImage/'+item+'?width=160'"
- class="cursor-pointer"
- @click="detailsClick($event)"
- />
+ <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 == ''"
- :src="'/httpImage/'+data.picMaxUrl[0]+'?width=160'"
+ v-else-if="data.targetInfo == null || data.targetInfo[0].targetType !== 'FaceDetect'"
+ :src="data.picMaxUrl[0] | httpImage"
class="cursor-pointer"
@click="detailsClick($event)"
/>
<img
v-else
- :src="'/httpImage/'+data.targetInfo[0].picSmUrl+'?width=160'"
+ :src="data.targetInfo[0].picSmUrl | httpImage"
class="cursor-pointer"
@click="detailsClick($event)"
/>
</div>
<div class="s-card-left-box" v-else>
- <img :src="'/httpImage/'+data.baseInfo[0].targetPicUrl+'?width=160'" 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'">
@@ -298,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
@@ -496,7 +493,8 @@
export default {
mounted() {
- window.addEventListener("resize", this.watchWindow);
+ //window.addEventListener("resize", this.watchWindow);
+ window.addEventListener("resize", this.getBottom)
},
props: {
data: {
@@ -506,7 +504,12 @@
showType: {
type: String,
default: "search"
- }
+ },
+ fromCluster: {
+ type: Boolean,
+ default: false
+ },
+ searchT: {}
},
computed: {
isId() {
@@ -536,6 +539,12 @@
return v.split("/")[0]
}
},
+ httpImage(url) {
+ if (!url.length) {
+ return ""
+ }
+ return '/httpImage/' + url + ((url.indexOf("?") >= 0) ? '&' : '?') + 'width=160'
+ }
},
data() {
return {
@@ -556,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) {
@@ -590,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
}, "*")
@@ -611,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;
@@ -641,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 {
@@ -654,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;
@@ -693,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