小窗

闫增涛

2024-12-31 a8da6c44895f90bc6d33df129bccd424bf73be3e

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

@@ -3,20 +3,50 @@
      <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>
        <chapterFive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></chapterFive> 
        <chapterSix v-if="showCatalogList.indexOf(7) > -1" :showPageList="loadPageList"></chapterSix>
        <chapterSeven v-if="showCatalogList.indexOf(8) > -1" :showPageList="loadPageList"></chapterSeven>
        <chapterEight v-if="showCatalogList.indexOf(9) > -1" :showPageList="loadPageList"></chapterEight>
      }"
    >
      <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>
      <chapterFive
        v-if="showCatalogList.indexOf(6) > -1"
        :showPageList="loadPageList"
      ></chapterFive>
      <chapterSix
        v-if="showCatalogList.indexOf(7) > -1"
        :showPageList="loadPageList"
      ></chapterSix>
      <chapterSeven
        v-if="showCatalogList.indexOf(8) > -1"
        :showPageList="loadPageList"
      ></chapterSeven>
      <chapterEight
        v-if="showCatalogList.indexOf(9) > -1"
        :showPageList="loadPageList"
      ></chapterEight>
      </div>
    </div>
  </template>
@@ -60,11 +90,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: {
@@ -89,7 +123,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();
@@ -212,7 +246,7 @@
      // },
      // 滚动监听
      scrollFun(event) {
        this.handleVideoPicture()
      this.handleVideoPicture();
        // 判断向上滚动还是向下滚动
        if (event.target.scrollTop > this.previousScrollTop) {
          this.getAduio();
@@ -724,7 +758,7 @@
          chapterFive,
          chapterSix,
          chapterSeven,
          chapterEight
        chapterEight,
        };
        // 遍历所有章节文件
        for (const key in pageData) {
@@ -915,34 +949,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) {
            playVudio.requestPictureInPicture();
          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,
@@ -953,7 +989,7 @@
      chapterFive,
      chapterSix,
      chapterSeven,
      chapterEight
    chapterEight,
    },
  };
  </script>
@@ -972,4 +1008,3 @@
    }
  }
  </style>