中药手册

QYF-GitLab1

2025-05-21 0673f7fe45966e537c4b6263dd7dfc8cbd1f5ad5

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

@@ -3,23 +3,14 @@
    <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"
        :interfaceQuestion="questionDataMap"
      ></chapterOne>
    <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"
        :interfaceQuestion="questionDataMap"></chapterOne>
      <!-- <chapterTwo
          v-if="showCatalogList.indexOf(2) > -1"
          :showPageList="loadPageList"
@@ -37,9 +28,9 @@
              :showPageList="loadPageList"
              :interfaceQuestion="questionDataMap"
            ></chapterFive>  -->
     
    </div>
      <translateWord :pageX="pageX" :pageY="pageY" :showWord="showWord" v-if="showWord" />
    <translateWord :pageX="pageX" :pageY="pageY" :showWord="showWord" :IPA="IPA" :prototype="prototype"
      :translate="translate" v-if="showWord" />
  </div>
</template>

@@ -54,6 +45,7 @@
import NoteIcon from "@/assets/images/biji.png";
// import getQuestionList from "@/assets/methods/examination";
// import testData from "../../assets/examinationList";
import keyWordData from "../../assets/englishKeyWords.js";
import _ from "lodash";
import Swiper from "swiper/bundle";
import "swiper/swiper-bundle.css";
@@ -78,9 +70,13 @@
      audioPath: "",
      currentTime: null,
      videoList: [],
      pageX:0,
      pageY:0,
      showWord:"",
      pageX: 0,
      pageY: 0,
      showWord: "",
      prototype: "",
      IPA: "",
      translate: "",
      keywordList: keyWordData
    };
  },
  computed: {
@@ -123,7 +119,7 @@
          this.initViewer();
          this.closeAudio();
          this.closeVideo();
          this.handleTanslateWord()
          this.handleTanslateWord();
        }, 200);
      },
    },
@@ -194,9 +190,9 @@
    }, 500);

    // 测试页面跳转
    setTimeout(() => {
      this.gotoPage(2, 6);
    }, 500);
    // setTimeout(() => {
    //   this.gotoPage(2, 18);
    // }, 500);

    // const pageDom = (this.container ? this.container : document)
    //   .querySelector("#app")
@@ -472,8 +468,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
        if (themeColor) {
          domItem.style.color = themeColor;
        }
@@ -490,8 +486,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
        if (themeColor) {
          domItem.style.backgroundColor = themeColor;
        }
@@ -508,8 +504,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
        if (themeColor) {
          domItem.style.borderColor = themeColor;
        }
@@ -838,7 +834,7 @@
      // 记录高亮信息
      this.highlightData = data;
      // 跳转
      this.gotoPage(data.catalog, data.page, () => {});
      this.gotoPage(data.catalog, data.page, () => { });
    },
    // 页面向下滚动，音频小窗播放功能
    getAduio() {
@@ -963,19 +959,30 @@
      const doms = (
        this.container ? this.container : document
      ).querySelectorAll(".ts-word");
      for(let index = 0;index < doms.length;index++){
      for (let index = 0; index < doms.length; index++) {
        const dom = doms[index];
        dom.onmouseenter = (event) => {
          this.pageX = event.pageX;
          this.pageY = event.pageY;
          this.showWord = event.target.innerText;
          console.log(event.target.innerText);
          if (this.showWord != event.target.innerText) {
            const rect = dom.getBoundingClientRect();
            this.pageX = rect.left;
            this.pageY = rect.top + rect.height;
            this.keywordList.forEach((item) => {
              if (item.name == event.target.innerText) {
                this.showWord = item.name
                this.prototype = item.prototype
                this.IPA = item.IPA
                this.translate = item.translate
              }
            });
          }
        };
        dom.onmouseleave = () => {
          this.showWord = ""
        dom.onmouseleave = (event) => {
          if (this.showWord == event.target.innerText) {
            this.showWord = "";
          }
        };
      }
    }
    },
  },
  components: {
    translateWord,
@@ -991,6 +998,10 @@

<style lang="less" scoped>
.page-main {
  width: 100% !important;
  height: 100% !important;
  overflow: auto;

  .page-content {
    max-width: 816px;
    min-width: 375px;