Task：礼品赠送/送礼、分享。收礼

pkg_user/views/gift/components/CoverPicker.vue

@@ -13,13 +13,19 @@
         :circular="true"
         :indicator-dots="false"
         @change="onChange"
-        previous-margin="160rpx"
-        next-margin="160rpx"
+        previous-margin="180rpx"
+        next-margin="180rpx"
         class="cover-swiper"
       >
-        <swiper-item v-for="(item, index) in list" :key="index" >
+        <swiper-item v-for="(item, index) in list" :key="index">
           <view class="cover-item">
-            <image :src="item.image" :class="{ 'v12-mt-3': currentIndex === index }" class="cover-image" mode="widthFix|heightFix" />
+            <view class="img-wrap"  :class="{ 'v12-mt-8': currentIndex === index }">
+              <view class="pro-img-wrap ">
+                <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">{{ message || '礼笺轻启，礼藏心意' }}</view>
+            </view>
             <view class="cover-name">{{ item.name }} </view>
           </view>
         </swiper-item>
@@ -44,6 +50,14 @@ export default {
     list: {
       type: Array,
       default: () => []
+    },
+    product: {
+      type: Object,
+      default: () => {}
+    },
+    message: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -67,6 +81,34 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.message-text{
+  position: absolute;
+  text-align: center;
+  top: 200rpx;
+  font-size: 24rpx;
+  color: #fff;
+  left: 0;
+  right: 0;
+  margin: auto;
+}
+.pro-cover-image{
+  width: 160rpx;
+  height: 160rpx;
+}
+.pro-img-wrap{
+  position: absolute;
+  width: 160rpx;
+  height: 160rpx;
+  left: 0;
+  right: 0;  
+  margin: auto;
+  border: 10rpx solid #FDF0D3;
+  top: -30px;
+}
+.img-wrap{
+  position: relative;
+  transition: all .2s ease-in-out;
+}
 .tips{
   font-size: 24rpx;
   color: #999;
@@ -90,8 +132,8 @@ export default {
     flex-direction: column;
     align-items: center;
     .cover-image {
-      width: 380rpx;
-      height: 460rpx;
+      width: 320rpx;
+      height: 400rpx;
       border-radius: 16rpx;
       transition: all .2s ease-in-out;
     }