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

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>