Feat：甄选好礼

pages/home/index.vue

@@ -183,7 +183,24 @@
             </swiper-item>
           </swiper> -->
           <view class="new-zone-wrap">
-            <view v-if="indexVideo" class="kd" id="xkd">
+            <image class="bg-img" :src="newZone.indexBackgroundImage" mode="aspectFit|aspectFill|widthFix" lazy-load="false"></image>
+            <view class="swiper-wrap-zx v12-mt-2" @click="toNewZone">
+                <swiper autoplay @change="changeIndex"  :current="currentIndex" next-margin="40rpx" previous-margin="80rpx" circular style="width: 100%;height: 400rpx;" interval="3000">
+                  <swiper-item style="position: absolute; width: 100%; transform: translate(200%, 0px) translateZ(0px);" v-for="(item, index) in newZone.indexProducts" :key="index" class="s-item" :class="{'n-actived': currentIndex !== index}">
+                    <view class="zx-item">
+                      <image :src="item.productImage" style="width: 192rpx; height: 192rpx; border-radius:10rpx"></image>
+                      <view class="v12-pa-2">
+                        <view class="v12-font-28 more-t v12-font-bold" style="text-align: center;">{{ item.productName }}</view>
+                        <view class="v12-primary-text v12-font-bold price-wrap" style="text-align: center;">
+                          <text class="v12-font-16">￥</text>
+                          <text class="v12-font-24">{{ item.productPrice }}</text>
+                        </view>
+                      </view>
+                    </view>
+                  </swiper-item>
+                </swiper>
+              </view>
+            <!-- <view v-if="indexVideo" class="kd" id="xkd">
               <view class="img-wrap" style="padding-top: 10rpx; box-sizing:border-box">
                 <image  style="width: 112rpx; height:26rpx" :src="webUrl + '/orderIcon/kd.png'" mode="heightFix|widthFix"></image>
               </view>
@@ -215,7 +232,7 @@
                   </swiper-item>
                 </swiper>
               </view>
-            </view>
+            </view> -->
           </view>
         </view>
       </view>
@@ -433,7 +450,8 @@ export default {
       messageIcon: {},
       recommendKeyword: [],
       keywordIndex: 0,
-      shareData: {}
+      shareData: {},
+      currentIndex: 0
     }
   },
   onLoad() {
@@ -479,6 +497,9 @@ export default {
     }
   },
   methods: {
+    changeIndex(e) {
+      this.currentIndex = e.detail.current
+    },
     changeRecommendKeyword(e) {
       this.keywordIndex = e
     },
@@ -1550,6 +1571,27 @@ export default {
 </script>
 
 <style scoped lang="less">
+.n-actived{
+  bottom: 20rpx !important;
+}
+.s-item{
+  height: fit-content !important;
+   bottom: 0rpx;
+}
+.zx-item{
+  width: 192rpx;
+  background: #fff;
+  border-radius: 16rpx;
+  height: 346rpx;
+}
+.swiper-wrap-zx{
+  position: absolute;
+  bottom: 20rpx;
+  z-index: 2;
+  /* height: 50%; */
+  width: 100%;
+  left: 0;
+}
 .swiper-item {
   height: 100%;
 }
@@ -1833,6 +1875,14 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  position: relative;
+  .bg-img{
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
   .kd{
     width: 100%;
     height: 266rpx;