|
|
@@ -1,45 +1,48 @@
|
|
|
<template>
|
|
|
<div class="pcPages" :style="warpCss">
|
|
|
<div class="floor-bos" :style="boxCss">
|
|
|
- <el-image
|
|
|
- @click="onPath(componentData.url)"
|
|
|
- class="floor-one"
|
|
|
- :src="componentData.imageUrl ? componentData.imageUrl : figure"
|
|
|
- :fit="componentData.imageUrl ? (componentData.imgType == 1 ? 'fill' : componentData.imgType == 2 ? 'contain' : 'cover') : 'cover'"
|
|
|
- :style="componentData.imageRadius ? { borderRadius: componentData.imageRadius + 'px' } : {}"
|
|
|
- />
|
|
|
- <div class="floor-box">
|
|
|
- <div
|
|
|
- v-for="(item, index) in componentData.goodsDefault ? componentData.goodsList : dataList"
|
|
|
- :key="index"
|
|
|
- class="goods-list flex-column-between hover-color"
|
|
|
- @click="onPath('/item?id=' + item.id + '&productNo=' + item.productNo)"
|
|
|
- >
|
|
|
- <img
|
|
|
- class="goods-img"
|
|
|
- :src="item.productImage ? item.productImage : figure"
|
|
|
- alt=""
|
|
|
- :style="componentData.imageRadius ? { borderRadius: componentData.imageRadius + 'px' } : {}"
|
|
|
- />
|
|
|
- <div v-if="componentData.goodsShow.includes(1)" class="itemName zi-hover">{{ item.itemName || '商品名称' }}</div>
|
|
|
- <div class="flex-row-between">
|
|
|
- <div>
|
|
|
- <span v-if="componentData.goodsShow.includes(2)" class="memberPrice" :style="{ color: componentData.btnbackgroundColor }"
|
|
|
- >¥{{ item.memberPrice || '0.00' }}</span
|
|
|
- >
|
|
|
- <span v-if="componentData.goodsShow.includes(3)" class="marketPrice">¥{{ item.marketPrice || '0.00' }}</span>
|
|
|
- </div>
|
|
|
- <template v-if="componentData.btnShow">
|
|
|
- <div v-if="componentData.btnStyle == 1" :style="btnCss1" class="btn1 ellipsis">{{ componentData.btnText }}</div>
|
|
|
- <div v-if="componentData.btnStyle == 2" :style="btnCss2" class="btn2 flex-row-center">
|
|
|
- <el-icon size="14"><Plus /></el-icon>
|
|
|
- </div>
|
|
|
- <div v-if="componentData.btnStyle == 3" :style="btnCss2" class="btn2 flex-row-center">
|
|
|
- <icon name="iconfont icongouwuche" size="14px" />
|
|
|
+ <div class="floor-one-bos">
|
|
|
+ <el-image
|
|
|
+ @click="onPath(componentData.url)"
|
|
|
+ class="floor-one"
|
|
|
+ :src="componentData.imageUrl ? componentData.imageUrl : figure"
|
|
|
+ :fit="componentData.imageUrl ? (componentData.imgType == 1 ? 'fill' : componentData.imgType == 2 ? 'contain' : 'cover') : 'cover'"
|
|
|
+ :style="componentData.imageRadius ? { borderRadius: componentData.imageRadius + 'px' } : {}"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div :style="{ 'width': boxWidth + 'px' }"></div>
|
|
|
+ <div class="floor-box" ref="floorBoxRef">
|
|
|
+ <template v-for="(item, index) in componentData.goodsDefault ? componentData.goodsList : dataList" :key="index">
|
|
|
+ <div
|
|
|
+ v-if="Number(index) < 8"
|
|
|
+ class="goods-list flex-column-between hover-color"
|
|
|
+ @click="onPath('/item?id=' + item.id + '&productNo=' + item.productNo)"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class="goods-img"
|
|
|
+ :src="item.productImage ? item.productImage : figure"
|
|
|
+ alt=""
|
|
|
+ :style="componentData.imageRadius ? { borderRadius: componentData.imageRadius + 'px' } : {}"
|
|
|
+ />
|
|
|
+ <div v-if="componentData.goodsShow.includes(1)" class="itemName zi-hover">{{ item.itemName || '商品名称' }}</div>
|
|
|
+ <div class="flex-row-between">
|
|
|
+ <div>
|
|
|
+ <span v-if="componentData.goodsShow.includes(2)" class="memberPrice" :style="{ color: componentData.btnbackgroundColor }"
|
|
|
+ >¥{{ item.memberPrice || '0.00' }}</span
|
|
|
+ >
|
|
|
+ <span v-if="componentData.goodsShow.includes(3)" class="marketPrice">¥{{ item.marketPrice || '0.00' }}</span>
|
|
|
</div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <template v-if="componentData.btnShow">
|
|
|
+ <div v-if="componentData.btnStyle == 1" :style="btnCss1" class="btn1 ellipsis">{{ componentData.btnText }}</div>
|
|
|
+ <div v-if="componentData.btnStyle == 2" :style="btnCss2" class="btn2 flex-row-center">
|
|
|
+ <el-icon size="14"><Plus /></el-icon>
|
|
|
+ </div>
|
|
|
+ <div v-if="componentData.btnStyle == 3" :style="btnCss2" class="btn2 flex-row-center">
|
|
|
+ <icon name="iconfont icongouwuche" size="14px" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div></div
|
|
|
+ ></template>
|
|
|
</div>
|
|
|
<div class="goods-brand flex-column-between" v-if="componentData.styleType == 2">
|
|
|
<div class="brand-bos">
|
|
|
@@ -74,13 +77,35 @@ import { getDiyProductPage, getCustomerProductPage } from '@/api/home/diy';
|
|
|
interface Props {
|
|
|
row?: any;
|
|
|
}
|
|
|
-
|
|
|
+const boxWidth = ref<any>(0);
|
|
|
const props = defineProps<Props>();
|
|
|
const componentData = props.row || {};
|
|
|
const dataList = ref<any>([{}, {}, {}, {}, {}, {}, {}, {}]);
|
|
|
+const floorBoxRef = ref<any>(null);
|
|
|
+const clientHeight = ref<any>(0);
|
|
|
+// 新增：ResizeObserver 实例
|
|
|
+let resizeObserver: ResizeObserver | null = null;
|
|
|
|
|
|
onMounted(() => {
|
|
|
getDataList();
|
|
|
+
|
|
|
+ // 初始化 ResizeObserver 监听 floorBoxRef 尺寸变化
|
|
|
+ if (floorBoxRef.value) {
|
|
|
+ resizeObserver = new ResizeObserver((entries) => {
|
|
|
+ for (const entry of entries) {
|
|
|
+ clientHeight.value = Math.floor(entry.contentRect.height);
|
|
|
+ boxWidth.value = (240 / 568) * clientHeight.value;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ resizeObserver.observe(floorBoxRef.value);
|
|
|
+ }
|
|
|
+});
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ if (resizeObserver) {
|
|
|
+ resizeObserver.disconnect();
|
|
|
+ resizeObserver = null;
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
const getDataList = () => {
|
|
|
@@ -183,15 +208,20 @@ const btnCss2 = computed(() => {
|
|
|
min-width: 1200px;
|
|
|
margin: 0 auto;
|
|
|
.floor-bos {
|
|
|
- height: 560px;
|
|
|
display: flex;
|
|
|
gap: 10px;
|
|
|
width: 100%;
|
|
|
- .floor-one {
|
|
|
- width: 230px;
|
|
|
- height: 560px;
|
|
|
+ .floor-one-bos {
|
|
|
+ position: absolute;
|
|
|
+ height: 100%;
|
|
|
+ aspect-ratio: 240 / 568;
|
|
|
cursor: pointer;
|
|
|
+ .floor-one {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
.floor-box {
|
|
|
flex: 1;
|
|
|
display: flex;
|
|
|
@@ -203,16 +233,15 @@ const btnCss2 = computed(() => {
|
|
|
}
|
|
|
.goods-list {
|
|
|
padding: 15px 10px;
|
|
|
- height: 275px;
|
|
|
width: 0;
|
|
|
flex: 0 0 calc((100% - 30px) / 4);
|
|
|
background-color: #ffffff;
|
|
|
overflow: hidden;
|
|
|
border-radius: 5px;
|
|
|
.goods-img {
|
|
|
- width: 140px;
|
|
|
- height: 140px;
|
|
|
- margin: 0 auto;
|
|
|
+ width: 100%;
|
|
|
+ aspect-ratio: 1;
|
|
|
+ margin: 0 auto 10px auto;
|
|
|
}
|
|
|
.itemName {
|
|
|
width: 100%;
|
|
|
@@ -225,6 +254,7 @@ const btnCss2 = computed(() => {
|
|
|
-webkit-box-orient: vertical;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
.memberPrice {
|
|
|
font-size: 16px;
|
|
|
@@ -255,19 +285,22 @@ const btnCss2 = computed(() => {
|
|
|
}
|
|
|
}
|
|
|
.goods-brand {
|
|
|
- width: 140px;
|
|
|
- height: 560px;
|
|
|
+ width: 180px;
|
|
|
border-radius: 5px;
|
|
|
background: #ffffff;
|
|
|
padding: 15px 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
.brand-bos {
|
|
|
+ flex: 1;
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ // justify-content: space-between;
|
|
|
gap: 10px 0;
|
|
|
.brand-img {
|
|
|
width: 100%;
|
|
|
- height: 74px;
|
|
|
+ aspect-ratio: 120/50;
|
|
|
border-radius: 4px;
|
|
|
border: 1px solid #e5e7eb;
|
|
|
cursor: pointer;
|
|
|
@@ -277,6 +310,7 @@ const btnCss2 = computed(() => {
|
|
|
color: var(--el-color-primary);
|
|
|
font-size: 14px;
|
|
|
cursor: pointer;
|
|
|
+ margin-top: 20px;
|
|
|
}
|
|
|
}
|
|
|
}
|
weixin_52219567