|
@@ -1,6 +1,11 @@
|
|
|
<template>
|
|
|
<div class="report-sample">
|
|
|
- <div class="sample-container" v-loading="loading">
|
|
|
+ <div
|
|
|
+ class="sample-container"
|
|
|
+ ref="sampleContainer"
|
|
|
+ :style="{ 'padding-bottom': !loginFlag ? adHeight + 'px' : 0 }"
|
|
|
+ v-loading="loading"
|
|
|
+ >
|
|
|
<iframe
|
|
|
class="iframe"
|
|
|
:src="pdfUrl"
|
|
@@ -10,6 +15,7 @@
|
|
|
<AdSense
|
|
|
v-show="!loginFlag"
|
|
|
ref="adSense"
|
|
|
+ class="ad-sense ad-fixed"
|
|
|
:code="code"
|
|
|
@openUrl="openUrl"
|
|
|
></AdSense>
|
|
@@ -62,6 +68,28 @@ export default {
|
|
|
setTimeout(() => {
|
|
|
this.getAdStyle()
|
|
|
}, 300)
|
|
|
+ if (!this.loginFlag) {
|
|
|
+ window.top.addEventListener('scroll', (event) => {
|
|
|
+ const jBottom = window.top.document.querySelector('.j-bottom')
|
|
|
+ if (!jBottom) return
|
|
|
+ // 计算元素位置
|
|
|
+ const rect = jBottom.getBoundingClientRect()
|
|
|
+ // 当元素顶部进入视口时(阈值设为窗口高度)
|
|
|
+ const isVisible = rect.top <= window.top.innerHeight
|
|
|
+ // 获取广告DOM元素
|
|
|
+ const adElement = this.$refs.adSense?.$el
|
|
|
+ const container = document.querySelector('.sample-container')
|
|
|
+ if (isVisible) {
|
|
|
+ adElement?.classList.remove('ad-fixed')
|
|
|
+ container?.style.setProperty('padding-bottom', 0)
|
|
|
+ } else {
|
|
|
+ adElement?.classList.add('ad-fixed')
|
|
|
+ container?.style.setProperty('padding-bottom', this.adHeight + 'px')
|
|
|
+ }
|
|
|
+ // 触发广告高度重新计算
|
|
|
+ this.getAdStyle()
|
|
|
+ })
|
|
|
+ }
|
|
|
},
|
|
|
methods: {
|
|
|
getAdStyle() {
|
|
@@ -103,5 +131,12 @@ export default {
|
|
|
<style>
|
|
|
.adsense .content {
|
|
|
padding: 0 !important;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+.ad-fixed {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
</style>
|