民航安全表格对齐

zhongshujie

2025-01-02 7d7449d6bd565e4e9d790c582648ddd2bff04cd6

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

@@ -3,14 +3,38 @@
    <div id="searchDomBox" style="display: none">
      <div id="searchContent"></div>
    </div>
    <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>
    <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>
    </div>
  </div>
</template>
@@ -18,7 +42,10 @@
<script>
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
import chapterTwo from "./chapter002.vue"
import chapterTwo from "./chapter002.vue";
import chapterThree from "./chapter003.vue";
import chapterfour from "./chapter004.vue";
import chapterfive from "./chapter005.vue";
import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
import Swiper from "swiper/bundle";
@@ -29,7 +56,7 @@
  name: "pageContent",
  data() {
    return {
      catalogLength: 3, // 总章节数
      catalogLength: 6, // 总章节数
      showCatalogList: [], // 显示的章节
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
@@ -48,11 +75,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: {
@@ -77,7 +108,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();
@@ -98,7 +129,6 @@
    // 默认加载章节
    this.showCatalogList = [1];
    // 滚动监听节流
    debugger
    this.throttledScrollHandler = _.throttle(
      this.scrollFun,
      this.throttleThreshold,
@@ -153,22 +183,22 @@
    }, 500);

    // 测试页面跳转
    setTimeout(() => {
      this.gotoPage(2, 134);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",
    //       txt: "题一学习主题一 运动",
    //       page: "10",
    //       type: "Highlight",
    //       color: "#F5E12A"
    //     });
    // setTimeout(() => {
    //   this.delSign({
    //     ids: ["2ACA9359"]
    //   });
    // }, 2000);
    }, 500);
    //   this.gotoPage(3, 130);
      //   setTimeout(() => {
      //     this.renderSign("Highlight", {
      //       id: "2ACA9359",
      //       txt: "题一学习主题一 运动",
      //       page: "10",
      //       type: "Highlight",
      //       color: "#F5E12A"
      //     });
      // setTimeout(() => {
      //   this.delSign({
      //     ids: ["2ACA9359"]
      //   });
      // }, 2000);
    // }, 500);

    // const pageDom = (this.container ? this.container : document)
    //   .querySelector("#app")
@@ -201,7 +231,7 @@
    // },
    // 滚动监听
    scrollFun(event) {
      this.handleVideoPicture()
      this.handleVideoPicture();
      // 判断向上滚动还是向下滚动
      if (event.target.scrollTop > this.previousScrollTop) {
        this.getAduio();
@@ -214,7 +244,6 @@
        ) {
          console.log(1);

          debugger
          // 到达阈值
          if (
            this.showCatalogList[this.showCatalogList.length - 1] <
@@ -445,8 +474,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.color = themeColor;
        }
@@ -463,8 +492,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.backgroundColor = themeColor;
        }
@@ -481,8 +510,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
        if (themeColor) {
          domItem.style.borderColor = themeColor;
        }
@@ -708,7 +737,10 @@
      const pageData = {
        pageHeader,
        chapterOne,
        chapterTwo
        chapterTwo,
        chapterThree,
        chapterfour,
        chapterfive,
      };
      // 遍历所有章节文件
      for (const key in pageData) {
@@ -808,7 +840,7 @@
      // 记录高亮信息
      this.highlightData = data;
      // 跳转
      this.gotoPage(data.catalog, data.page, () => { });
      this.gotoPage(data.catalog, data.page, () => {});
    },
    // 页面向下滚动，音频小窗播放功能
    getAduio() {
@@ -899,39 +931,44 @@
    },
    // 视频小窗
    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,
    chapterOne,
    chapterTwo
    chapterTwo,
    chapterThree,
    chapterfour,
    chapterfive,
  },
};
</script>