Feat：礼品封面尺寸大小调整

pkg_user/views/gift/components/CoverPicker.vue

@@ -14,13 +14,13 @@
         :circular="true"
         :indicator-dots="false"
         @change="onChange"
-        previous-margin="200rpx"
+        previous-margin="180rpx"
         next-margin="180rpx"
         class="cover-swiper"
       >
-        <swiper-item v-for="(item, index) in list" :key="index">
+        <swiper-item v-for="(item, i) in list" :key="i" class="cover-swiper-item"  :class="{'n-actived' : currentIndex !== i}">
           <view class="cover-item" >
-            <view class="img-wrap"  :class="currentIndex === index ? 'v12-mt-10' : 'v12-mt-18'">
+            <view class="img-wrap">
               <view class="pro-img-wrap " :style="{
                 left: (item.productImageX*2 || 0)   + 'rpx',
                 top: (item.productImageY*2 || -40)  + 'rpx'
@@ -28,9 +28,9 @@
                 <image :src="product.image" class="pro-cover-image" mode="widthFix|heightFix" />
               </view>
               <image :src="item.cover" class="cover-image" mode="widthFix|heightFix" />
-              <view class="message-text" :style="{top: currentIndex !== index ? '260rpx' : '220rpx'}">{{ message }}</view>
+              <!-- <view class="message-text" :style="{top: currentIndex !== index ? '260rpx' : '220rpx'}">{{ message }}</view> -->
             </view>
-            <view class="cover-name">{{ item.name }} </view>
+            <!-- <view class="cover-name">{{ item.name }} </view> -->
           </view>
         </swiper-item>
       </swiper>
@@ -84,6 +84,7 @@ export default {
     },
     onChange(e) {
       this.currentIndex = e.detail.current
+      this.$forceUpdate()
     },
     confirm() {
       this.$emit('confirm', this.list[this.currentIndex])
@@ -94,6 +95,18 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.n-actived{
+  .cover-item{
+    transform: scale(0.8);
+    margin-bottom: -40rpx !important;
+  }
+
+}
+.cover-swiper-item{
+  height: fit-content !important;
+  bottom: 0;
+  overflow: visible;
+}
 .message-text{
   position: absolute;
   text-align: center;
@@ -105,24 +118,24 @@ export default {
   margin: auto;
 }
 .pro-cover-image{
-  width: 218rpx;
-  height: 218rpx;
+  width: 320rpx;
+  height: 320rpx;
+  border-radius: 16rpx;
 }
 .pro-img-wrap{
   position: absolute;
-  width: 218rpx;
-  height: 218rpx;
+  width: 320rpx;
+  height: 320rpx;
   left: 0;
   right: 0;  
   margin: auto;
   /*border: 10rpx solid #FDF0D3;*/
   top: -40px;
   border-radius: 16rpx;
-  overflow: hidden;
 }
 .img-wrap{
   position: relative;
-  transition: all .2s ease-in-out;
+  overflow: visible;
 }
 .tips{
   font-size: 24rpx;
@@ -146,9 +159,12 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
+    overflow: visible;
+    transition: all .3s ease-in-out;
+    margin-bottom: 60rpx;
     .cover-image {
-      width: 340rpx;
-      height: 560rpx;
+      width: 420rpx;
+      height: 580rpx;
       border-radius: 16rpx;
       transition: all .2s ease-in-out;
     }