This commit is contained in:
BianLzhaoMin
parent
f756f00e69
commit
74ff8affe5
|
|
@ -41,7 +41,7 @@
|
|||
<div class="case-right-content">
|
||||
<h3>{{ item.caseCompany }}</h3>
|
||||
<!-- <div>{{ item.caseIntroduction }} </div> -->
|
||||
<div>
|
||||
<div v-if="item.isTextOverflow">
|
||||
<el-tooltip effect="dark" placement="top">
|
||||
<div
|
||||
slot="content"
|
||||
|
|
@ -54,6 +54,14 @@
|
|||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="product-info-content"
|
||||
v-else
|
||||
:ref="`caseInfoContent-${index}`"
|
||||
>
|
||||
{{ item.caseIntroduction }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -106,19 +114,19 @@ export default {
|
|||
transitionDuration: '0.5s', // 过渡动画时长
|
||||
timer: null, // 自动轮播计时器
|
||||
interval: 5000, // 轮播间隔时间(ms)
|
||||
extendedCardList: [],
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 扩展列表：在开头添加最后一个元素的副本，在末尾添加第一个元素的副本，实现无缝滚动
|
||||
extendedCardList() {
|
||||
if (this.cardList.length <= 1) return this.cardList
|
||||
|
||||
return [
|
||||
this.cardList[this.cardList.length - 1], // 最后一个元素的副本放在开头
|
||||
...this.cardList, // 原始列表
|
||||
this.cardList[0], // 第一个元素的副本放在末尾
|
||||
]
|
||||
},
|
||||
// extendedCardList() {
|
||||
// if (this.cardList.length <= 1) return this.cardList
|
||||
// return [
|
||||
// this.cardList[this.cardList.length - 1], // 最后一个元素的副本放在开头
|
||||
// ...this.cardList, // 原始列表
|
||||
// this.cardList[0], // 第一个元素的副本放在末尾
|
||||
// ]
|
||||
// },
|
||||
},
|
||||
mounted() {
|
||||
// 只有在有多项数据时才启动自动轮播
|
||||
|
|
@ -219,6 +227,34 @@ export default {
|
|||
})
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
cardList: {
|
||||
handler(newValue) {
|
||||
if (newValue <= 1) {
|
||||
this.extendedCardList = newValue
|
||||
} else {
|
||||
this.extendedCardList = [
|
||||
this.cardList[this.cardList.length - 1], // 最后一个元素的副本放在开头
|
||||
...this.cardList, // 原始列表
|
||||
this.cardList[0], // 第一个元素的副本放在末尾
|
||||
]
|
||||
}
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.extendedCardList.forEach((item, index) => {
|
||||
item.isTextOverflow =
|
||||
this.$refs[`caseInfoContent-${index}`][0]
|
||||
.clientHeight <
|
||||
this.$refs[`caseInfoContent-${index}`][0]
|
||||
.scrollHeight
|
||||
})
|
||||
})
|
||||
},
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -264,7 +300,7 @@ export default {
|
|||
// 轮播容器样式 - 确保不会显示溢出内容
|
||||
.carousel-wrapper {
|
||||
width: 100%;
|
||||
// overflow: hidden;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
// padding: 0 10px;
|
||||
// 添加额外的裁剪区域，确保不会显示相邻项的边缘
|
||||
|
|
|
|||
|
|
@ -30,11 +30,8 @@
|
|||
|
||||
<div class="case-right-content">
|
||||
<h3>{{ item.caseCompany }}</h3>
|
||||
<!-- <div>{{ item.caseIntroduction }} </div> -->
|
||||
|
||||
<!-- <TextTip :maxLines="2" :content="item.caseIntroduction" /> -->
|
||||
|
||||
<div>
|
||||
<div v-if="item.isTextOverflow">
|
||||
<el-tooltip effect="dark" placement="top">
|
||||
<div slot="content" class="product-info-tooltip">
|
||||
{{ item.caseIntroduction }}
|
||||
|
|
@ -44,6 +41,13 @@
|
|||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="product-info-content"
|
||||
:ref="`caseInfoContent-${item.id}`"
|
||||
>
|
||||
{{ item.caseIntroduction }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -89,7 +93,21 @@ export default {
|
|||
async getProductCenterDetailInScreenFun(id) {
|
||||
const res = await getProductCenterDetailAPI({ id })
|
||||
const { list } = res.data
|
||||
this.cardList = list
|
||||
this.cardList = list.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
isTextOverflow: false,
|
||||
}
|
||||
})
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.cardList.forEach((item) => {
|
||||
item.isTextOverflow =
|
||||
this.$refs[`caseInfoContent-${item.id}`][0]
|
||||
.clientHeight <
|
||||
this.$refs[`caseInfoContent-${item.id}`][0].scrollHeight
|
||||
})
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,7 +42,15 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<div class="product-container">
|
||||
<div
|
||||
v-if="!isTextOverflow"
|
||||
ref="productInfoContent"
|
||||
class="product-info-content"
|
||||
>
|
||||
{{ productDetail.introduction }}
|
||||
</div>
|
||||
|
||||
<div class="product-container" v-else>
|
||||
<el-tooltip effect="dark" placement="top">
|
||||
<div slot="content" class="product-info-tooltip">
|
||||
{{ productDetail.introduction }}
|
||||
|
|
@ -136,6 +144,8 @@ export default {
|
|||
this.getProductCenterDetailInScreenFun(this.$route.params?.id)
|
||||
},
|
||||
|
||||
mounted() {},
|
||||
|
||||
methods: {
|
||||
// 获取产品中心详情
|
||||
async getProductCenterDetailInScreenFun(id) {
|
||||
|
|
@ -162,14 +172,23 @@ export default {
|
|||
typeName,
|
||||
linkImage,
|
||||
isAccess,
|
||||
introduction:
|
||||
introduction ||
|
||||
'这是一个测试用的长文本内容，用来验证悬浮提示功能是否正常工作。这段文字应该超过四行，从而触发悬浮显示效果。我们添加了更多的文字内容来确保文本能够溢出容器，这样用户就可以通过鼠标悬停来查看完整的产品介绍内容了。这个功能对于长文本的展示非常有用，能够提供更好的用户体验。',
|
||||
introduction,
|
||||
}
|
||||
|
||||
this.productCases = list
|
||||
this.productCases = list.map((item) => {
|
||||
return {
|
||||
...item,
|
||||
isTextOverflow: false,
|
||||
}
|
||||
})
|
||||
this.productVideos = videoList
|
||||
this.productBrochures = fileList
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.isTextOverflow =
|
||||
this.$refs.productInfoContent.clientHeight <
|
||||
this.$refs.productInfoContent.scrollHeight
|
||||
})
|
||||
},
|
||||
|
||||
goBack() {
|
||||
|
|
@ -869,7 +888,7 @@ export default {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
// box-sizing: border-box;
|
||||
}
|
||||
|
||||
.product-info-header {
|
||||
|
|
@ -919,7 +938,6 @@ export default {
|
|||
font-family: 'PingFang SC', sans-serif;
|
||||
letter-spacing: 1px;
|
||||
line-height: 1.8;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
|
|||
Loading…
Reference in New Issue