From 9519401d75a19f3173d4570c4739b446fdf20884 Mon Sep 17 00:00:00 2001
From: linxi <linxi.jiang@jeeyor.com>
Date: Wed, 20 Nov 2024 15:12:37 +0800
Subject: [PATCH] =?UTF-8?q?Fix=EF=BC=9A2639=20=E3=80=90=E6=96=B0=E5=93=81?=
 =?UTF-8?q?=E4=B8=93=E5=8C=BA=E3=80=91=E8=BD=AE=E6=92=AD=E5=95=86=E5=93=81?=
 =?UTF-8?q?--=E9=A6=96=E4=B8=AA=E5=95=86=E5=93=81=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=EF=BC=8C=E6=96=87=E5=AD=97=E9=83=BD=E9=9C=80=E6=AF=94=E5=90=8E?=
 =?UTF-8?q?=E9=9D=A2=E7=9A=84=E5=95=86=E5=93=81=E5=A4=A7=E4=B8=80=E7=82=B9?=
 =?UTF-8?q?=EF=BC=8C=E4=B8=A5=E6=A0=BC=E6=8C=89=E7=85=A7=E6=95=88=E6=9E=9C?=
 =?UTF-8?q?=E5=9B=BE=E5=AE=9E=E7=8E=B0=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/home/newZone.vue | 36 ++++++++++++++++++++++++------------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/pages/home/newZone.vue b/pages/home/newZone.vue
index 5b21ffe..d4a0ef7 100644
--- a/pages/home/newZone.vue
+++ b/pages/home/newZone.vue
@@ -4,18 +4,22 @@
       <rich-text :nodes="details.title"></rich-text>
     </view>
     <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">
-        <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)">
-            <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>
               <view class="box-emp"></view>
               <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">
                   <text>￥</text>
-                  <text class=" v12-font-40">{{ item.productPrice }}</text>
+                  <text class=" v12-font-36">{{ item.productPrice }}</text>
                 </view>
                 <view class="buy-btn">即刻选购</view>
               </view>
@@ -35,7 +39,7 @@
         {{ details.contentSubTitle }}
       </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>
     </view>
   </view>
@@ -45,16 +49,19 @@ import { queryNewZone } from '@/api/activity'
 export default{
   data() {
     return {
-      details: {}
+      details: {},
+      current: 0
     }
   },
   onLoad() {
     queryNewZone().then(res => {
-      console.log(res);
       this.details = res.data 
     })
   },
   methods: {
+    handleChange(e) {
+      this.current = e.detail.current
+    },
     toGoods(item) {
       uni.navigateTo({
         url: `/pages/shop/GoodsCon/index?id=${item.productId}`
@@ -95,6 +102,11 @@ export default{
   border-radius: 20rpx;
   position: absolute;
   bottom: 0;
+  transition: all ease-in-out 0.3s;
+}
+.is-actived{
+  width: 225rpx;
+  height: 260rpx;
 }
 .cover-img{
   width: 706rpx;
@@ -140,9 +152,9 @@ export default{
     padding: 20rpx;
   }
   .banner-zone{
-    width: 706rpx;
-    height: 760rpx;
-    border-radius: 20rpx;
-    position: relative;
+    width: 706rpx !important;
+    height: 760rpx !important;
+    border-radius: 20rpx !important;
+    position: relative !important;
   }
 </style>
\ No newline at end of file