浏览代码

feat: 优化广告位样式

zhangyuhan 3 月之前
父节点
当前提交
94ac252405

+ 10 - 3
apps/bigmember_pc/src/views/order/components/big-member/header-adsense.vue

@@ -1,5 +1,5 @@
 <template>
-  <div className="data-pack-header-adsense">
+  <div className="bigmember-header-adsense header-adsense">
     <AdContainer
       :exposure-prefix="'PC购买页轮播广告位-' + code + '-'"
       :code="code"
@@ -11,7 +11,7 @@
 import AdContainer from '@/views/workspace/components/AdContainer.vue'
 
 export default {
-  name: 'data-pack-header-adsense',
+  name: 'bigmember-header-adsense',
   components: {
     AdContainer
   },
@@ -24,6 +24,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.vip-subscribe-adsense {
+.header-adsense {
+  padding-top: 22px;
+  padding-bottom: 8px;
+  ::v-deep {
+    .el-carousel__container {
+      height: 80px;
+    }
+  }
 }
 </style>

+ 9 - 2
apps/bigmember_pc/src/views/order/components/data-pack/header-adsense.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="data-pack-header-adsense">
+  <div class="data-pack-header-adsense header-adsense">
     <AdContainer
       :exposure-prefix="'PC购买页轮播广告位-' + code + '-'"
       :code="code"
@@ -23,6 +23,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.vip-subscribe-adsense {
+.header-adsense {
+  padding-top: 22px;
+  padding-bottom: 8px;
+  ::v-deep {
+    .el-carousel__container {
+      height: 80px;
+    }
+  }
 }
 </style>

+ 9 - 2
apps/bigmember_pc/src/views/order/components/vipsubscribe/header-adsense.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="vip-subscribe-header-adsense">
+  <div class="vip-subscribe-header-adsense header-adsense">
     <AdContainer
       :exposure-prefix="'PC购买页轮播广告位-' + code + '-'"
       :code="code"
@@ -45,6 +45,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.vip-subscribe-adsense {
+.header-adsense {
+  padding-top: 22px;
+  padding-bottom: 8px;
+  ::v-deep {
+    .el-carousel__container {
+      height: 80px;
+    }
+  }
 }
 </style>

+ 1 - 1
apps/bigmember_pc/src/views/order/layout.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="page-create-order" v-loading="loading">
     <router-view name="head" v-if="pageLayout.header"></router-view>
-    <router-view name="headerAdsense"></router-view>
     <div class="page-create-order-content v-w1200">
+      <router-view name="headerAdsense"></router-view>
       <router-view
         class="page-create-order-content-title"
         name="title"

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

@@ -1,7 +1,11 @@
 <template>
-  <div class='header-show-group'>
+  <div class="header-show-group">
     <!-- 轮播广告位 -->
-    <Swipe :skeleton='false' :exposure-prefix="'移动端购买页轮播广告位-' + getContentAdID + '-'"  :ad="getContentAdID" />
+    <Swipe
+      :skeleton="false"
+      :exposure-prefix="'移动端购买页轮播广告位-' + getContentAdID + '-'"
+      :ad="getContentAdID"
+    />
   </div>
 </template>
 <script>
@@ -18,12 +22,25 @@ export default {
   }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .header-show-group {
   background-color: #fff;
 
-  .my-swipe {
-    margin: 4px 0;
+  ::v-deep {
+    .my-swipe {
+      margin: 0;
+
+      .van-swipe-item {
+        width: 100vw !important;
+        height: auto;
+        border-radius: unset;
+        margin: 0;
+
+        .van-image {
+          width: 100vw !important;
+        }
+      }
+    }
   }
 }
 </style>

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

@@ -1,7 +1,11 @@
 <template>
-  <div class='header-show-group'>
+  <div class="header-show-group">
     <!-- 轮播广告位 -->
-    <Swipe :skeleton='false' :exposure-prefix="'移动端购买页轮播广告位-' + getContentAdID + '-'"  :ad="getContentAdID" />
+    <Swipe
+      :skeleton="false"
+      :exposure-prefix="'移动端购买页轮播广告位-' + getContentAdID + '-'"
+      :ad="getContentAdID"
+    />
   </div>
 </template>
 <script>
@@ -18,12 +22,25 @@ export default {
   }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .header-show-group {
   background-color: #fff;
 
-  .my-swipe {
-    margin: 4px 0;
+  ::v-deep {
+    .my-swipe {
+      margin: 0;
+
+      .van-swipe-item {
+        width: 100vw !important;
+        height: auto;
+        border-radius: unset;
+        margin: 0;
+
+        .van-image {
+          width: 100vw !important;
+        }
+      }
+    }
   }
 }
 </style>

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

@@ -1,7 +1,11 @@
 <template>
-  <div class='header-show-group'>
+  <div class="header-show-group">
     <!-- 轮播广告位 -->
-    <Swipe :skeleton='false' :exposure-prefix="'移动端购买页轮播广告位-' + getContentAdID + '-'"  :ad="getContentAdID" />
+    <Swipe
+      :skeleton="false"
+      :exposure-prefix="'移动端购买页轮播广告位-' + getContentAdID + '-'"
+      :ad="getContentAdID"
+    />
   </div>
 </template>
 <script>
@@ -31,12 +35,25 @@ export default {
   }
 }
 </script>
-<style lang="scss">
+<style lang="scss" scoped>
 .header-show-group {
   background-color: #fff;
 
-  .my-swipe {
-    margin: 4px 0;
+  ::v-deep {
+    .my-swipe {
+      margin: 0;
+
+      .van-swipe-item {
+        width: 100vw !important;
+        height: auto;
+        border-radius: unset;
+        margin: 0;
+
+        .van-image {
+          width: 100vw !important;
+        }
+      }
+    }
   }
 }
 </style>