feat: 完善页面底部置底广告

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

@@ -1,11 +1,13 @@
 <script setup>
 import { ref, onMounted, onBeforeUnmount } from 'vue'
+import adsense from '@/views/order/components/adsense/index.vue'
+
 const footerElement = ref(null)
-let needMoreAdShow = true
+const needMoreAdShow = ref(true)
 function windowScrollFn() {
   // 底部横幅固定
   var stickyFooter = footerElement.value
-  if (needMoreAdShow) {
+  if (needMoreAdShow.value) {
     // 吸底
     // 如果距离底部
     const bottomFooter = document.querySelector('.j-bottom')
@@ -34,16 +36,50 @@ onBeforeUnmount(() => {
 })
 
 function close() {
-  needMoreAdShow = false
+  needMoreAdShow.value = false
 }
+
+const props = defineProps({
+  code: String
+})
 </script>
 <template>
-  <div class="content-footer" ref="footerElement">
-    <div class="close-aciton" @click="close">
+  <div
+    class="article-page-footer-container"
+    ref="footerElement"
+    v-show="needMoreAdShow"
+  >
+    <div class="close-action" @click="close">
       <i class="iconfont icon-close"></i>
     </div>
-    <adsense code="jy-pccontent-bottom"></adsense>
+    <adsense :code="code"></adsense>
   </div>
 </template>
 
-<style scoped></style>
+<style lang="scss" scoped>
+.article-page-footer-container {
+  position: fixed;
+  bottom: 0;
+  ::v-deep {
+    .adsense {
+      margin-top: 0;
+      padding: 0;
+      cursor: pointer;
+      .content {
+        border: none;
+        padding-top: 0;
+      }
+    }
+  }
+  .close-action {
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    padding: 20px;
+    color: #fff;
+    cursor: pointer;
+  }
+}
+</style>