|
|
|
@ -1,10 +1,10 @@ |
|
|
|
<template> |
|
|
|
<view class="product-section"> |
|
|
|
<view class="product-section" :style="{'background-color':color}"> |
|
|
|
<!-- 商品标题区域 --> |
|
|
|
<view class="title-section" :style="{ background: titleBgColor }"> |
|
|
|
<div style="display: flex; align-items: center" @click="handleMoreClick"> |
|
|
|
<view class="title-section" > |
|
|
|
<div style="display: flex; align-items: center;justify-content: space-between;" @click="handleMoreClick"> |
|
|
|
<text class="title">{{ title }}</text> |
|
|
|
<text class="more-btn">更多</text> |
|
|
|
<view class="more-btn">更多 <uni-icons size="16" color="#000000" type="arrowright" /></view> |
|
|
|
</div> |
|
|
|
</view> |
|
|
|
|
|
|
|
@ -26,6 +26,12 @@ |
|
|
|
<view class="image-overlay" v-if="!isFeel"></view> |
|
|
|
<!-- 智能体标签 --> |
|
|
|
<view class="content-box-info" v-if="!isFeel&&item.agent"> |
|
|
|
<!-- 头像 --> |
|
|
|
<image |
|
|
|
class="avatar" |
|
|
|
:src="showImg(item.agent.headImage)" |
|
|
|
mode="aspectFill" |
|
|
|
></image> |
|
|
|
<view class="ai-tag"> |
|
|
|
<view |
|
|
|
class="ai-label" |
|
|
|
@ -35,20 +41,15 @@ |
|
|
|
}" |
|
|
|
>智能体</view |
|
|
|
> |
|
|
|
<text class="ai-name">{{ item.agent.name }}</text> |
|
|
|
</view> |
|
|
|
<!-- 头像 --> |
|
|
|
<image |
|
|
|
class="avatar" |
|
|
|
:src="showImg(item.agent.headImage)" |
|
|
|
mode="aspectFill" |
|
|
|
></image> |
|
|
|
<view class="ai-name">{{ item.agent.name }}</view> |
|
|
|
|
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="card-content"> |
|
|
|
<view class="title-price-heart"> |
|
|
|
<view class="card-title">{{ item.title }}</view> |
|
|
|
<view class="card-price">{{ item.price }}</view> |
|
|
|
<view class="card-price">￥{{ item.price }}</view> |
|
|
|
<image |
|
|
|
v-if="!item.type" |
|
|
|
class="heart-icon" |
|
|
|
@ -125,6 +126,10 @@ export default { |
|
|
|
type: Boolean, |
|
|
|
default: false, |
|
|
|
}, |
|
|
|
color: { |
|
|
|
type: String, |
|
|
|
default: "#D3FCFF", |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
methods: { |
|
|
|
@ -194,23 +199,28 @@ export default { |
|
|
|
} |
|
|
|
.product-section { |
|
|
|
width: 100%; |
|
|
|
background-color: #D3FCFF; |
|
|
|
padding:40rpx 25rpx; |
|
|
|
margin: 30rpx 0; |
|
|
|
border-radius: 40rpx; |
|
|
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1), |
|
|
|
0 0 0 1rpx rgba(255, 255, 255, 0.2) inset; |
|
|
|
} |
|
|
|
|
|
|
|
// 标题区域 |
|
|
|
.title-section { |
|
|
|
padding: 14rpx 24rpx 8rpx; |
|
|
|
margin: 40rpx 16rpx 0rpx; |
|
|
|
display: inline-block; |
|
|
|
border-radius: 14rpx 14rpx 0 0; |
|
|
|
padding: 0rpx 0 30rpx; |
|
|
|
width: 100%; |
|
|
|
.title { |
|
|
|
font-size: 36rpx; |
|
|
|
font-weight: 500; |
|
|
|
color: #4d4d4d; |
|
|
|
font-size: 34rpx; |
|
|
|
font-weight: bold; |
|
|
|
color: #000000; |
|
|
|
} |
|
|
|
|
|
|
|
.more-btn { |
|
|
|
font-size: 20rpx; |
|
|
|
color: #999999; |
|
|
|
font-size: 26rpx; |
|
|
|
color: #000000; |
|
|
|
margin-left: 35rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
@ -220,16 +230,14 @@ export default { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
gap: 24rpx; |
|
|
|
background-color: white; |
|
|
|
padding: 22rpx; |
|
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08); |
|
|
|
} |
|
|
|
|
|
|
|
// 商品卡片 |
|
|
|
.product-card { |
|
|
|
background: #ffffff; |
|
|
|
border-radius: 24rpx; |
|
|
|
|
|
|
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1), |
|
|
|
0 0 0 1rpx rgba(255, 255, 255, 0.2) inset; |
|
|
|
overflow: hidden; |
|
|
|
transition: transform 0.2s ease; |
|
|
|
|
|
|
|
@ -241,16 +249,16 @@ export default { |
|
|
|
// 图片容器 |
|
|
|
.card-image-container { |
|
|
|
position: relative; |
|
|
|
height: 200rpx; |
|
|
|
height: 320rpx; |
|
|
|
overflow: hidden; |
|
|
|
border-radius: 20rpx; |
|
|
|
border-radius: 20rpx 20rpx 0 0 ; |
|
|
|
} |
|
|
|
|
|
|
|
.card-image { |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
object-fit: cover; |
|
|
|
border-radius: 20rpx; |
|
|
|
border-radius: 20rpx 20rpx 0 0 ; |
|
|
|
} |
|
|
|
|
|
|
|
// 图片蒙层 |
|
|
|
@ -268,26 +276,23 @@ export default { |
|
|
|
// 智能体标签 |
|
|
|
.content-box-info { |
|
|
|
position: absolute; |
|
|
|
top: 0rpx; |
|
|
|
left: 0rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: space-between; |
|
|
|
width: 666rpx; |
|
|
|
top: 30rpx; |
|
|
|
right: 20rpx; |
|
|
|
padding: 0rpx 20rpx; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
.ai-tag { |
|
|
|
padding: 8rpx 0rpx; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
gap: 8rpx; |
|
|
|
.ai-label { |
|
|
|
|
|
|
|
} |
|
|
|
.ai-label { |
|
|
|
border: 1rpx solid; |
|
|
|
padding: 0rpx 15rpx; |
|
|
|
height: 40rpx; |
|
|
|
line-height: 38rpx; |
|
|
|
font-weight: bold; |
|
|
|
font-size: 16rpx; |
|
|
|
font-size: 20rpx; |
|
|
|
border-radius: 4rpx; |
|
|
|
} |
|
|
|
|
|
|
|
@ -297,8 +302,6 @@ export default { |
|
|
|
color: #ffffff; |
|
|
|
margin-left: 10rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// 头像 |
|
|
|
.avatar { |
|
|
|
width: 119rpx; |
|
|
|
@ -308,8 +311,7 @@ export default { |
|
|
|
|
|
|
|
// 卡片内容 |
|
|
|
.card-content { |
|
|
|
padding: 24rpx 0; |
|
|
|
padding-bottom: 0; |
|
|
|
padding: 18rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.title-price-heart { |
|
|
|
@ -320,8 +322,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.card-title { |
|
|
|
font-size: 27rpx; |
|
|
|
font-weight: bold; |
|
|
|
font-size: 30rpx; |
|
|
|
color: #000000; |
|
|
|
line-height: 1.4; |
|
|
|
flex: 1; |
|
|
|
@ -332,8 +333,7 @@ export default { |
|
|
|
} |
|
|
|
|
|
|
|
.card-price { |
|
|
|
font-size: 36rpx; |
|
|
|
font-weight: bold; |
|
|
|
font-size: 30rpx; |
|
|
|
color: #000000; |
|
|
|
margin-right: 24rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
|
1054425342@qq.com
2 months ago