|
|
@ -2,7 +2,7 @@ |
|
|
|
<view class="product-section"> |
|
|
|
<!-- 商品标题区域 --> |
|
|
|
<view class="title-section" :style="{ background: titleBgColor }"> |
|
|
|
<div style="display: flex; align-items: center" @click="handleMoreClick"> |
|
|
|
<div style="display: flex; align-items: center" @click="handleMoreClick"> |
|
|
|
<text class="title">{{ title }}</text> |
|
|
|
<text class="more-btn">更多</text> |
|
|
|
</div> |
|
|
@ -27,7 +27,14 @@ |
|
|
|
<!-- 智能体标签 --> |
|
|
|
<view class="content-box-info" v-if="!isFeel"> |
|
|
|
<view class="ai-tag"> |
|
|
|
<view class="ai-label" :style="{ borderColor: aiTagBorderColor, color: aiTagTextColor }">智能体</view> |
|
|
|
<view |
|
|
|
class="ai-label" |
|
|
|
:style="{ |
|
|
|
borderColor: aiTagBorderColor, |
|
|
|
color: aiTagTextColor, |
|
|
|
}" |
|
|
|
>智能体</view |
|
|
|
> |
|
|
|
<text class="ai-name">{{ item.aiName }}</text> |
|
|
|
</view> |
|
|
|
<!-- 头像 --> |
|
|
@ -54,20 +61,20 @@ |
|
|
|
src="https://epic.js-dyyj.com/uploads/20250728/dd7ed269b24e84a2dd141da6ab980fd6.png" |
|
|
|
@click.stop="handleLikeClick(item, index)" |
|
|
|
></image> |
|
|
|
<template v-if="isFeel"> |
|
|
|
<image |
|
|
|
v-if="!item.isShop" |
|
|
|
class="shop-icon" |
|
|
|
src="https://epic.js-dyyj.com/uploads/20250728/195bfc195a54b93c13595a01a5d8bb3b.png" |
|
|
|
@click.stop="handleLikeClick(item, index)" |
|
|
|
></image> |
|
|
|
<image |
|
|
|
v-else |
|
|
|
class="shop-icon" |
|
|
|
src="https://epic.js-dyyj.com/uploads/20250728/77c4546ac6415f9db69bb10888d2a975.png" |
|
|
|
@click.isShop="handleLikeClick(item, index)" |
|
|
|
></image> |
|
|
|
</template> |
|
|
|
<template v-if="isFeel"> |
|
|
|
<image |
|
|
|
v-if="!item.isShop" |
|
|
|
class="shop-icon" |
|
|
|
src="https://epic.js-dyyj.com/uploads/20250728/195bfc195a54b93c13595a01a5d8bb3b.png" |
|
|
|
@click.stop="handleLikeClick(item, index)" |
|
|
|
></image> |
|
|
|
<image |
|
|
|
v-else |
|
|
|
class="shop-icon" |
|
|
|
src="https://epic.js-dyyj.com/uploads/20250728/77c4546ac6415f9db69bb10888d2a975.png" |
|
|
|
@click.isShop="handleLikeClick(item, index)" |
|
|
|
></image> |
|
|
|
</template> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
@ -114,15 +121,13 @@ export default { |
|
|
|
type: String, |
|
|
|
default: "#02fcfc", |
|
|
|
}, |
|
|
|
isFeel:{ |
|
|
|
type: Boolean, |
|
|
|
default: false, |
|
|
|
} |
|
|
|
|
|
|
|
isFeel: { |
|
|
|
type: Boolean, |
|
|
|
default: false, |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
|
|
|
|
// 处理更多按钮点击 |
|
|
|
handleMoreClick() { |
|
|
|
if (this.moreUrl) { |
|
|
@ -174,17 +179,17 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
@font-face { |
|
|
|
font-family: 'Futura'; |
|
|
|
src: url(https://static.ticket.sz-trip.com/epicSoul/taozi/fonts/Futura.ttc); |
|
|
|
} |
|
|
|
@font-face { |
|
|
|
font-family: "Futura"; |
|
|
|
src: url(https://static.ticket.sz-trip.com/epicSoul/taozi/fonts/Futura.ttc); |
|
|
|
} |
|
|
|
.product-section { |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
|
|
|
|
// 标题区域 |
|
|
|
.title-section { |
|
|
|
padding: 14rpx 24rpx 8rpx ; |
|
|
|
padding: 14rpx 24rpx 8rpx; |
|
|
|
margin: 40rpx 16rpx 0rpx; |
|
|
|
display: inline-block; |
|
|
|
border-radius: 14rpx 14rpx 0 0; |
|
|
@ -324,7 +329,7 @@ export default { |
|
|
|
margin-right: 24rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
min-width: 120rpx; |
|
|
|
font-family: 'Futura'; |
|
|
|
font-family: "Futura"; |
|
|
|
} |
|
|
|
|
|
|
|
.heart-icon { |
|
|
@ -342,20 +347,20 @@ export default { |
|
|
|
transform: scale(1.2); |
|
|
|
} |
|
|
|
} |
|
|
|
.shop-icon{ |
|
|
|
width: 39rpx; |
|
|
|
height: 36rpx; |
|
|
|
transition: all 0.3s ease; |
|
|
|
flex-shrink: 0; |
|
|
|
margin-left: 10rpx; |
|
|
|
|
|
|
|
&.liked { |
|
|
|
opacity: 1; |
|
|
|
filter: hue-rotate(320deg) saturate(2); |
|
|
|
} |
|
|
|
|
|
|
|
&:active { |
|
|
|
transform: scale(1.2); |
|
|
|
} |
|
|
|
.shop-icon { |
|
|
|
width: 39rpx; |
|
|
|
height: 36rpx; |
|
|
|
transition: all 0.3s ease; |
|
|
|
flex-shrink: 0; |
|
|
|
margin-left: 10rpx; |
|
|
|
|
|
|
|
&.liked { |
|
|
|
opacity: 1; |
|
|
|
filter: hue-rotate(320deg) saturate(2); |
|
|
|
} |
|
|
|
|
|
|
|
&:active { |
|
|
|
transform: scale(1.2); |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|