feat: 优化移动端广告样式

apps/mobile/src/components/ad/Swipe.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="my-swipe" v-show='canShowModule'>
+  <div class="my-swipe" v-show="canShowModule">
     <van-skeleton avatar :loading="this.getImages.length === 0">
       <van-swipe
         :id="'ad-' + (ad || 'swipe')"
@@ -80,6 +80,10 @@ export default {
       type: String,
       default: ''
     },
+    width: {
+      type: String,
+      default: '359px'
+    },
     images: {
       type: Array,
       default() {
@@ -94,12 +98,12 @@ export default {
   },
   computed: {
     getItemWidth() {
-      return px2viewport('359px')
+      return px2viewport(this.width)
     },
     getImages() {
       return this.ad ? this.list : this.images
     },
-    canShowModule () {
+    canShowModule() {
       if (this.skeleton) {
         return true
       } else {
@@ -123,7 +127,9 @@ export default {
       })
         .then((res) => {
           if (res?.error_code === 0 && typeof res?.data === 'object') {
-            const temp = Object.values(res.data).flat().filter(v => v)
+            const temp = Object.values(res.data)
+              .flat()
+              .filter((v) => v)
             if (Array.isArray(temp)) {
               this.list = temp.map(adConfigFormatter)
             }

apps/mobile/src/views/create-order/components/bigmember/HeaderAdsense.vue

@@ -3,6 +3,7 @@
     <!-- 轮播广告位 -->
     <Swipe
       :skeleton="false"
+      width="375px"
       :exposure-prefix="'移动端购买页轮播广告位-' + getContentAdID + '-'"
       :ad="getContentAdID"
     />
@@ -25,19 +26,30 @@ export default {
 <style lang="scss" scoped>
 .header-show-group {
   background-color: #fff;
+  $swipe-item-width: 100%;
+  $swipe-item-height: 68px;
 
   ::v-deep {
     .my-swipe {
       margin: 0;
 
       .van-swipe-item {
-        width: 100vw !important;
-        height: auto;
+        width: $swipe-item-width;
+        height: $swipe-item-height;
+        max-height: $swipe-item-height;
         border-radius: unset;
         margin: 0;
 
         .van-image {
-          width: 100vw !important;
+          width: $swipe-item-width;
+          height: $swipe-item-height;
+          max-height: $swipe-item-height;
+        }
+      }
+      ::v-deep {
+        .van-skeleton__avatar {
+          width: $swipe-item-width;
+          height: $swipe-item-height;
         }
       }
     }

apps/mobile/src/views/create-order/components/datapack/HeaderAdsense.vue

@@ -3,6 +3,7 @@
     <!-- 轮播广告位 -->
     <Swipe
       :skeleton="false"
+      width="375px"
       :exposure-prefix="'移动端购买页轮播广告位-' + getContentAdID + '-'"
       :ad="getContentAdID"
     />
@@ -25,19 +26,30 @@ export default {
 <style lang="scss" scoped>
 .header-show-group {
   background-color: #fff;
+  $swipe-item-width: 100%;
+  $swipe-item-height: 68px;
 
   ::v-deep {
     .my-swipe {
       margin: 0;
 
       .van-swipe-item {
-        width: 100vw !important;
-        height: auto;
+        width: $swipe-item-width;
+        height: $swipe-item-height;
+        max-height: $swipe-item-height;
         border-radius: unset;
         margin: 0;
 
         .van-image {
-          width: 100vw !important;
+          width: $swipe-item-width;
+          height: $swipe-item-height;
+          max-height: $swipe-item-height;
+        }
+      }
+      ::v-deep {
+        .van-skeleton__avatar {
+          width: $swipe-item-width;
+          height: $swipe-item-height;
         }
       }
     }

apps/mobile/src/views/create-order/components/vipsubscribe/HeaderAdsense.vue

@@ -3,6 +3,7 @@
     <!-- 轮播广告位 -->
     <Swipe
       :skeleton="false"
+      width="375px"
       :exposure-prefix="'移动端购买页轮播广告位-' + getContentAdID + '-'"
       :ad="getContentAdID"
     />
@@ -38,19 +39,30 @@ export default {
 <style lang="scss" scoped>
 .header-show-group {
   background-color: #fff;
+  $swipe-item-width: 100%;
+  $swipe-item-height: 68px;
 
   ::v-deep {
     .my-swipe {
       margin: 0;
 
       .van-swipe-item {
-        width: 100vw !important;
-        height: auto;
+        width: $swipe-item-width;
+        height: $swipe-item-height;
+        max-height: $swipe-item-height;
         border-radius: unset;
         margin: 0;
 
         .van-image {
-          width: 100vw !important;
+          width: $swipe-item-width;
+          height: $swipe-item-height;
+          max-height: $swipe-item-height;
+        }
+      }
+      ::v-deep {
+        .van-skeleton__avatar {
+          width: $swipe-item-width;
+          height: $swipe-item-height;
         }
       }
     }