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 | 41 +++++++++++++++++++++++++----------------
1 files changed, 25 insertions(+), 16 deletions(-)
diff --git a/src/components/subComponents/CardItem.vue b/src/components/subComponents/CardItem.vue
index a5d52f0..b58f8d1 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)"
@@ -74,6 +74,7 @@
<img :src="data.baseInfo[0] | httpImage" class="cursor-pointer" />
</div>
</div>
+
<!-- 鍙充晶鏂囧瓧鍖哄煙 -->
<!-- 澶氬紶搴曞浘鍒囨崲 -->
<div class="s-card-right-isCompare" v-if="showType == 'compare'">
@@ -492,7 +493,8 @@
export default {
mounted() {
- window.addEventListener("resize", this.watchWindow);
+ //window.addEventListener("resize", this.watchWindow);
+ window.addEventListener("resize", this.getBottom)
},
props: {
data: {
@@ -555,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) {
@@ -640,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 {
@@ -653,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;
@@ -692,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