liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix：2639 【新品专区】轮播商品--首个商品图片，文字都需比后面的商品大一点，严格按照效果图实现效果

Browse Source
This commit is contained in:
linxi
2024-11-20 15:12:37 +08:00
parent 3f1f2689be
commit 9519401d75
1 changed files with 24 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/home/newZone.vue
+24 -12
View File
@@ -4,18 +4,22 @@
<rich-text :nodes="details.title"></rich-text> <rich-text :nodes="details.title"></rich-text>
</view> </view>
<view class="banner-zone v12-mt-2"> <view class="banner-zone v12-mt-2">
<image class="banner-zone" :src="details.banners[0] || ''" mode="heightFix|widthFix"></image> <swiper interval="3000" autoplay circular style="height:760rpx">
<swiper-item v-for="(item, index) in details.banners" :key="index">
<image class="banner-zone" :src="item" ></image>
</swiper-item>
</swiper>
<view class="swiper-wrap"> <view class="swiper-wrap">
<swiper style="height: 100%;" :autoplay=" details.newProducts.length > 2" circular next-margin="460rpx" interval="3000"> <swiper @change="handleChange" style="height: 100%;" autoplay circular next-margin="460rpx" interval="3000">
<swiper-item v-for="(item, index) in details.newProducts" :key="index" @click="toGoods(item)"> <swiper-item v-for="(item, index) in details.newProducts" :key="index" @click="toGoods(item)">
<view class="new-card"> <view class="new-card" :class="{'is-actived': current == index}">
<image :src="item.productImage" class="new-card-img" mode="heightFix|widthFix"></image> <image :src="item.productImage" class="new-card-img" mode="heightFix|widthFix"></image>
<view class="box-emp"></view> <view class="box-emp"></view>
<view class="new-info"> <view class="new-info">
<view class="v12-font-30 one-t" style="width: 100px;text-align:center">{{ item.productTitle }}</view> <view class="v12-font-26 one-t" style="width: 100px;text-align:center">{{ item.productTitle }}</view>
<view class="v12-font-bold"> <view class="v12-font-bold">
<text>￥</text> <text>￥</text>
<text class=" v12-font-40">{{ item.productPrice }}</text> <text class=" v12-font-36">{{ item.productPrice }}</text>
</view> </view>
<view class="buy-btn">即刻选购</view> <view class="buy-btn">即刻选购</view>
</view> </view>
@@ -35,7 +39,7 @@
{{ details.contentSubTitle }} {{ details.contentSubTitle }}
</view> </view>
</view> </view>
<view class="cover-img v12-mt-2" v-for="(item, index) in details.contents" @click="toGoods(item)"> <view class="cover-img v12-mt-2" v-for="(item, index) in details.contents" :key="index" @click="toGoods(item)">
<image :src="item.contentImage" class="cover-img" mode="heightFix|widthFix"></image> <image :src="item.contentImage" class="cover-img" mode="heightFix|widthFix"></image>
</view> </view>
</view> </view>
@@ -45,16 +49,19 @@ import { queryNewZone } from '@/api/activity'
export default{ export default{
data() { data() {
return { return {
details: {} details: {},
current: 0
} }
}, },
onLoad() { onLoad() {
queryNewZone().then(res => { queryNewZone().then(res => {
console.log(res);
this.details = res.data this.details = res.data
}) })
}, },
methods: { methods: {
handleChange(e) {
this.current = e.detail.current
},
toGoods(item) { toGoods(item) {
uni.navigateTo({ uni.navigateTo({
url: `/pages/shop/GoodsCon/index?id=${item.productId}` url: `/pages/shop/GoodsCon/index?id=${item.productId}`
@@ -95,6 +102,11 @@ export default{
border-radius: 20rpx; border-radius: 20rpx;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
transition: all ease-in-out 0.3s;
}
.is-actived{
width: 225rpx;
height: 260rpx;
} }
.cover-img{ .cover-img{
width: 706rpx; width: 706rpx;
@@ -140,9 +152,9 @@ export default{
padding: 20rpx; padding: 20rpx;
} }
.banner-zone{ .banner-zone{
width: 706rpx; width: 706rpx !important;
height: 760rpx; height: 760rpx !important;
border-radius: 20rpx; border-radius: 20rpx !important;
position: relative; position: relative !important;
} }
</style> </style>