feat: 底部广告优化

apps/bigmember_pc/src/views/article-content/components/FooterAd.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import adsense from '@/views/order/components/adsense/index.vue'
 
 const footerElement = ref(null)
@@ -15,6 +15,10 @@ function windowScrollFn() {
     if (bottomFooter?.getBoundingClientRect) {
       ob = bottomFooter.getBoundingClientRect()
     }
+    // 页面高度预留
+    const pageDom = document.querySelector('.article-page-container')
+    pageDom.style.paddingBottom =
+      parseInt(32 + stickyFooter.offsetHeight) + 'px'
     // bottom出现在视口
     var bottom = window.innerHeight - ob.top
     if (bottom > 0 && ob.top !== 0) {
@@ -22,10 +26,12 @@ function windowScrollFn() {
     } else {
       stickyFooter.style.bottom = 0
     }
+  } else {
+    const pageDom = document.querySelector('.article-page-container')
+    pageDom.style.paddingBottom = 0
   }
 }
 onMounted(() => {
-  windowScrollFn()
   $(window).on('scroll', windowScrollFn)
   $(window).on('resize', windowScrollFn)
 })
@@ -37,10 +43,16 @@ onBeforeUnmount(() => {
 
 function close() {
   needMoreAdShow.value = false
+  nextTick(() => {
+    windowScrollFn()
+  })
 }
 
 function doShow() {
   needMoreAdShow.value = true
+  nextTick(() => {
+    windowScrollFn()
+  })
 }
 
 const props = defineProps({
@@ -66,7 +78,7 @@ const props = defineProps({
   width: 100%;
   bottom: 0;
   left: 0;
-  z-index: 3;
+  z-index: 103;
   ::v-deep {
     .adsense {
       margin-top: 0;
@@ -83,7 +95,7 @@ const props = defineProps({
     right: 0;
     top: 50%;
     transform: translateY(-50%);
-    z-index: 2;
+    z-index: 102;
     padding: 20px;
     color: #fff;
     cursor: pointer;