From 72f553661a74b225c89310d3fb3d78f3ebe35f82 Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期日, 28 二月 2021 10:45:04 +0800
Subject: [PATCH] m朔黄首页模拟数据更新
---
src/components/subComponents/CardItem.vue | 104 ++++++++++++++++++++++++++++++---------------------
1 files changed, 61 insertions(+), 43 deletions(-)
diff --git a/src/components/subComponents/CardItem.vue b/src/components/subComponents/CardItem.vue
index 9261c4e..b58f8d1 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] | httpImage" class="cursor-pointer" />
</div>
</div>
+
<!-- 鍙充晶鏂囧瓧鍖哄煙 -->
<!-- 澶氬紶搴曞浘鍒囨崲 -->
<div class="s-card-right-isCompare" v-if="showType == 'compare'">
@@ -133,7 +130,7 @@
<span
class="fontStyle"
v-if="data.baseInfo[initialIndex].labels"
- >/ {{ data.baseInfo[initialIndex].labels.split("/")[1] }}</span>
+ >/ {{ data.baseInfo[initialIndex].labels | idCard}}</span>
<span
class="fontStyle"
v-if="data.baseInfo[initialIndex].monitorLevel"
@@ -159,7 +156,7 @@
<span
class="fontStyle"
v-if="data.baseInfo[initialIndex].labels"
- >/ {{ data.baseInfo[initialIndex].labels.split("/")[1] }}</span>
+ >/ {{ data.baseInfo[initialIndex].labels | idCard}}</span>
<span
class="fontStyle"
v-if="data.baseInfo[initialIndex].monitorLevel"
@@ -205,7 +202,7 @@
<span>{{ data.baseInfo[0].targetName }}</span>
<span
v-if="data.baseInfo[0].labels"
- >/ {{ data.baseInfo[0].labels.split("/")[1] }}</span>
+ >/ {{ data.baseInfo[0].labels | idCard}}</span>
</p>
</div>
<div class="card-icon-box">
@@ -358,15 +355,12 @@
<div slot="content">
<p v-for="(item,index) in data.baseInfo" :key="index+'base1'">
<span class="fontStyle">{{item.tableName}}</span>
- <span class="fontStyle" v-if="item.targetName !== ''">/ {{item.targetName}}</span>
+ <span class="fontStyle" v-if="item.targetName.length">/ {{item.targetName}}</span>
<span
class="fontStyle"
- v-if="item.labels !== '' && item.labels.split('/')[1] !== ''"
- >/ {{item.labels.split("/")[1]}}</span>
- <span
- class="fontStyle"
- v-if="item.labels !== '' && item.labels.split('/')[0] !== ''"
- >/ {{item.labels.split("/")[0]}}</span>
+ v-if="item.labels.length"
+ >/ {{item.labels | idCard}}</span>
+ <span class="fontStyle" v-if="item.labels.length">/ {{item.labels | sex}}</span>
</p>
</div>
<el-button
@@ -378,15 +372,12 @@
:style="item.bwType == '1' ? 'color:red;font-size:12px;line-height:20px':'font-size:12px;line-height:20px'"
>
<span class="fontStyle">{{item.tableName}}</span>
- <span class="fontStyle" v-if="item.targetName !== ''">/ {{item.targetName}}</span>
+ <span class="fontStyle" v-if="item.targetName.length">/ {{item.targetName}}</span>
<span
class="fontStyle"
- v-if="item.labels !== '' && item.labels.split('/')[1] !== ''"
- >/ {{item.labels.split("/")[1]}}</span>
- <span
- class="fontStyle"
- v-if="item.labels !== '' && item.labels.split('/')[0] !== ''"
- >/ {{item.labels.split("/")[0]}}</span>
+ v-if="item.labels.length"
+ >/ {{item.labels | idCard}}</span>
+ <span class="fontStyle" v-if="item.labels.length">/ {{item.labels |sex }}</span>
</span>
</el-button>
</el-tooltip>
@@ -502,7 +493,8 @@
export default {
mounted() {
- window.addEventListener("resize", this.watchWindow);
+ //window.addEventListener("resize", this.watchWindow);
+ window.addEventListener("resize", this.getBottom)
},
props: {
data: {
@@ -525,6 +517,25 @@
},
percentage(score) {
return score.toFixed(2) + "%"
+ },
+ idCard(v) {
+ try {
+ let obj = JSON.parse(v)
+ return obj.idCard
+ } catch (error) {
+ return v.split("/")[1]
+ }
+ },
+ sex(v) {
+ try {
+ let obj = JSON.parse(v)
+ return obj.sex
+ } catch (error) {
+ return v.split("/")[0]
+ }
+ },
+ httpImage(url) {
+ return '/httpImage/' + url + ((url.indexOf("?") >= 0) ? '&' : '?') + 'width=160'
}
},
data() {
@@ -546,13 +557,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) {
@@ -631,11 +643,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 {
@@ -644,8 +656,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;
@@ -683,9 +700,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