小窗

闫增涛

2024-12-31 a8da6c44895f90bc6d33df129bccd424bf73be3e

 src/books/civilServices/view/components/index.vue

@@ -3,16 +3,34 @@
      <div id="searchDomBox" style="display: none">
        <div id="searchContent"></div>
      </div>
      <div class="page-content" :style="{
    <div
      class="page-content"
      :style="{
        fontSize: fontSize + 'px',
        transform: `scale(${pageZoom})`,
        transformOrigin: 'center top',
      }">
        <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader>
        <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList"></chapterOne>
        <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList"></chapterTwo>
        <chapterThree  v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList"></chapterThree>
        <chapterFour   v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList"></chapterFour>
      }"
    >
      <pageHeader
        v-if="showCatalogList.indexOf(1) > -1"
        :showPageList="loadPageList"
      ></pageHeader>
      <chapterOne
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
      ></chapterOne>
      <chapterTwo
        v-if="showCatalogList.indexOf(3) > -1"
        :showPageList="loadPageList"
      ></chapterTwo>
      <chapterThree
        v-if="showCatalogList.indexOf(4) > -1"
        :showPageList="loadPageList"
      ></chapterThree>
      <chapterFour
        v-if="showCatalogList.indexOf(5) > -1"
        :showPageList="loadPageList"
      ></chapterFour>
      </div>
    </div>
  </template>
@@ -52,11 +70,15 @@
    },
    computed: {
      fontSize() {
        this.transformDom(this.$store.state.qiankun.fontSize)
        return this.$store.state.qiankun.fontSize ? this.$store.state.qiankun.fontSize : 18;
      this.transformDom(this.$store.state.qiankun.fontSize);
      return this.$store.state.qiankun.fontSize
        ? this.$store.state.qiankun.fontSize
        : 18;
      },
      pageZoom() {
        return this.$store.state.qiankun.scale ? this.$store.state.qiankun.scale / 100 : 1;
      return this.$store.state.qiankun.scale
        ? this.$store.state.qiankun.scale / 100
        : 1;
      },
    },
    watch: {
@@ -81,7 +103,7 @@
      loadPageList: {
        handler(newVal, oldVal) {
          setTimeout(() => {
            this.transformDom(this.$store.state.qiankun.fontSize)
          this.transformDom(this.$store.state.qiankun.fontSize);
            this.initSwiper();
            this.initViewer();
            this.closeAudio();
@@ -204,7 +226,7 @@
      // },
      // 滚动监听
      scrollFun(event) {
        this.handleVideoPicture()
      this.handleVideoPicture();
        // 判断向上滚动还是向下滚动
        if (event.target.scrollTop > this.previousScrollTop) {
          this.getAduio();
@@ -903,34 +925,36 @@
      },
      // 视频小窗
      handleVideoPicture() {
        let doms = (
          this.container ? this.container : document
        ).querySelectorAll(".video");
        doms = Array.from(doms)
        if (!doms.length) return false
        const playVudio = doms
          .reverse()
          .find((item) => item.paused == false);
      let doms = (this.container ? this.container : document).querySelectorAll(
        ".video"
      );
      doms = Array.from(doms);
      if (!doms.length) return false;
      const playVudio = doms.reverse().find((item) => item.paused == false);
        if (playVudio) {
          const bottomGap = playVudio.getBoundingClientRect().bottom;
          const topGap = playVudio.getBoundingClientRect().top;
          if (bottomGap < 0 || topGap > window.innerHeight) {
          try {
            if(playVudio.readyState) playVudio.requestPictureInPicture();
          } catch (error) {
            console.log(error, "小窗错误error");
          }
          }
        }
      },
      //其他类名下字体大小变化
      transformDom(fs) {
        if(!fs) return
        let doms = (
          this.container ? this.container : document
        ).querySelectorAll('.block')
        if(!doms.length) return 
      if (!fs) return;
      let doms = (this.container ? this.container : document).querySelectorAll(
        ".block"
      );
      if (!doms.length) return;
        for (let index = 0; index < doms.length; index++) {
          const dom = doms[index];
          dom.style.fontSize = fs + 'px'
        dom.style.fontSize = fs + "px";
        }
      }
    },
    },
    components: {
      pageHeader,
@@ -956,4 +980,3 @@
    }
  }
  </style>