5.23 婴幼儿游戏活动实施（wb）

zhongshujie

2025-05-23 7d7744fe006714f6be0341d03d4de9b1e90d775d

 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"
@@ -38,12 +29,8 @@
              :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>

@@ -58,6 +45,8 @@
import NoteIcon from "@/assets/images/biji.png";
// import getQuestionList from "@/assets/methods/examination";
// import testData from "../../assets/examinationList";
// import keyWordData from "../../assets/englishKeyWords";

import _ from "lodash";
import Swiper from "swiper/bundle";
import "swiper/swiper-bundle.css";
@@ -85,6 +74,382 @@
      pageX: 0,
      pageY: 0,
      showWord: "",
      prototype: "",
      IPA: "",
      translate: "",
      keyWordData: [
        {
          name: "cashier's station",
          prototype: "cashier's station",
          IPA: null,
          page: null,
          translate: "收银台",
        },
        {
          name: "concerned",
          prototype: "concern",
          IPA: "[kənˈsɜːn]",
          page: null,
          translate: "v. 影响，牵涉，与……有关",
        },
        {
          name: "present",
          prototype: "present",
          IPA: "[prɪzent]",
          page: null,
          translate: "v. 把……交给，提交，呈现",
        },
        {
          name: "drawing up",
          prototype: "draw up",
          IPA: null,
          page: null,
          translate: "草拟，制定",
        },
        {
          name: "entitled",
          prototype: "entitle",
          IPA: "[ɪnˈtaɪtl]",
          page: null,
          translate: "v. 使享有权利，使符合资格",
        },
        {
          name: "calculate",
          prototype: "calculate",
          IPA: "[ˈkælkjʊleɪt]",
          page: null,
          translate: "v. 计算，核算",
        },
        {
          name: "debit card",
          prototype: "debit card",
          IPA: null,
          page: null,
          translate: "借记卡",
        },
        {
          name: "gift certifi cate",
          prototype: "gift certifi cate",
          IPA: null,
          page: null,
          translate: "礼品券，赠券",
        },
        {
          name: "American Express (AE/AX)",
          prototype: "American Express (AE/AX)",
          IPA: null,
          page: null,
          translate: "美国运通卡",
        },
        {
          name: "MasterCard (MC)",
          prototype: "MasterCard (MC)",
          IPA: null,
          page: null,
          translate: "万事达信用卡",
        },
        {
          name: "Visa (VS)",
          prototype: "Visa (VS)",
          IPA: null,
          page: null,
          translate: "维萨卡",
        },
        {
          name: "enRoute (ER)",
          prototype: "enRoute (ER)",
          IPA: null,
          page: null,
          translate: "在途卡",
        },
        {
          name: "Eurocard (EC)",
          prototype: "Eurocard (EC)",
          IPA: null,
          page: null,
          translate: "欧洲卡",
        },
        {
          name: "International Great Wall",
          prototype: "International Great Wall",
          IPA: null,
          page: null,
          translate: "长城卡",
        },
        {
          name: "International Diner's Club",
          prototype: "International Diner's Club",
          IPA: null,
          page: null,
          translate: "大来卡",
        },
        {
          name: "Federal Card",
          prototype: "Federal Card",
          IPA: null,
          page: null,
          translate: "联邦卡 / 发达卡",
        },
        {
          name: "authorized",
          prototype: "authorize",
          IPA: null,
          page: null,
          translate: "v. 批准，授权",
        },
        {
          name: "credit limit",
          prototype: "credit limit",
          IPA: null,
          page: null,
          translate: "信用限额",
        },
        {
          name: "currency",
          prototype: "currency",
          IPA: "[ˈkʌrənsɪ]",
          page: null,
          translate: "n. 货币",
        },
        {
          name: "honor",
          prototype: "honor",
          IPA: "[ˈɒnə]",
          page: null,
          translate: "v. 尊重，接受",
        },
        {
          name: "receipt",
          prototype: "receipt",
          IPA: "[rɪˈsiːt]",
          page: null,
          translate: "n. 收据",
        },
        {
          name: "personal checks",
          prototype: "personal check",
          IPA: null,
          page: null,
          translate: "个人支票",
        },
        {
          name: "change",
          prototype: "change",
          IPA: "[tʃeɪndʒ]",
          page: null,
          translate: "n. 找给的零钱；找头",
        },
        {
          name: "invoice",
          prototype: "invoice",
          IPA: "[ˈɪnvɔɪs]",
          page: null,
          translate: "n. 发票",
        },
        {
          name: "exchange",
          prototype: "exchange",
          IPA: "[ɪksˈtʃeɪndʒ]",
          page: null,
          translate: "n./v. 交换，兑换",
        },
        {
          name: "purchases",
          prototype: "purchase",
          IPA: "[ˈpɜːtʃəs]",
          page: null,
          translate: "n./v. 购买，采购",
        },
        {
          name: "Canadian dollar",
          prototype: "Canadian dollars",
          IPA: null,
          page: null,
          translate: "加币，加拿大元",
        },
        {
          name: "accessible",
          prototype: "accessible",
          IPA: "[əkˈsesəbl]",
          page: null,
          translate: "adj. 可到达的，可得到的",
        },
        {
          name: "give a better bang for your buck",
          prototype: "give a better bang for your buck",
          IPA: null,
          page: null,
          translate: "让钱花得更划算",
        },
        {
          name: "reputable",
          prototype: "reputable",
          IPA: "[ˈrepjʊtəbl]",
          page: null,
          translate: "adj. 信誉好的，名声好的",
        },
        {
          name: "securely",
          prototype: "securely",
          IPA: "[sɪˈkjʊəlɪ]",
          page: null,
          translate: "adv. 安全地",
        },
        {
          name: "branches",
          prototype: "branch",
          IPA: "[brɑːntʃ]",
          page: null,
          translate: "n. 分支机构，分行",
        },
        {
          name: "converting",
          prototype: "convert",
          IPA: "[kənˈvɜːt]",
          page: null,
          translate: "v. 转换",
        },
        {
          name: "currency exchange booths",
          prototype: "currency exchange booth",
          IPA: null,
          page: null,
          translate: "货币兑换亭",
        },
        {
          name: "exchange rate",
          prototype: "exchange rate",
          IPA: null,
          page: null,
          translate: "汇率",
        },
        {
          name: "small notes",
          prototype: "small note",
          IPA: null,
          page: null,
          translate: "小额纸币",
        },
        {
          name: "memo",
          prototype: "memo",
          IPA: "[ˈmeməʊ]",
          page: null,
          translate: "n. 备忘录（此处指“兑换水单”）",
        },
        {
          name: "produce",
          prototype: "produce",
          IPA: "[prəˈdjus]",
          page: null,
          translate: "v. 生产；生长；给出（证据）；出示",
        },
        {
          name: "invoice",
          prototype: "invoice",
          IPA: "[ˈɪnvɔɪs]",
          page: null,
          translate: "n. 发票 , 费用清单",
        },
        {
          name: "opt",
          prototype: "opt",
          IPA: "[ɒpt]",
          page: null,
          translate: "v. 选择",
        },
        {
          name: "in-person service",
          prototype: "in-person service",
          IPA: null,
          page: null,
          translate: "面对面服务",
        },
        {
          name: "post",
          prototype: "post",
          IPA: "[pəʊst]",
          page: null,
          translate: "v. 发布信息",
        },
        {
          name: "business seal",
          prototype: null,
          IPA: null,
          page: null,
          translate: "业务公章",
        },
        {
          name: "cashier",
          prototype: null,
          IPA: null,
          page: null,
          translate: "收银员",
        },
        {
          name: "check out",
          prototype: null,
          IPA: null,
          page: null,
          translate: "结账离店",
        },
        {
          name: "currency",
          prototype: null,
          IPA: null,
          page: null,
          translate: "货币",
        },
        {
          name: "draw up a bill",
          prototype: null,
          IPA: null,
          page: null,
          translate: "草拟账单",
        },
        {
          name: "equivalent",
          prototype: null,
          IPA: null,
          page: null,
          translate: "等同的",
        },
        {
          name: "exchange memo",
          prototype: null,
          IPA: null,
          page: null,
          translate: "兑换水单",
        },
        {
          name: "master account",
          prototype: null,
          IPA: null,
          page: null,
          translate: "主账户",
        },
        {
          name: "net amount",
          prototype: null,
          IPA: null,
          page: null,
          translate: "净额",
        },
        {
          name: "valid date",
          prototype: null,
          IPA: null,
          page: null,
          translate: "有效期",
        },
        {
          name: "in-person service",
          prototype: null,
          IPA: null,
          page: null,
          translate: "当面服务",
        },
      ],
    };
  },
  computed: {
@@ -128,7 +493,7 @@
          this.closeAudio();
          this.closeVideo();
          this.handleTanslateWord();
        }, 200);
        }, 5000);
      },
    },
    pageZoom: {
@@ -149,6 +514,7 @@
      this.throttleThreshold,
      { leading: true, trailing: false }
    );

    // 定义子层方法
    if (this.setGlobalState) {
      // 提供页面跳转功能
@@ -198,9 +564,9 @@
    }, 500);

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

    // const pageDom = (this.container ? this.container : document)
    //   .querySelector("#app")
@@ -476,8 +842,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
        if (themeColor) {
          domItem.style.color = themeColor;
        }
@@ -494,8 +860,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
        if (themeColor) {
          domItem.style.backgroundColor = themeColor;
        }
@@ -512,8 +878,8 @@
          page && pageThemeColor && pageThemeColor[page]
            ? pageThemeColor[page]
            : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
            ? chapterThemeColor[chapterNum]
            : bookThemeColor;
              ? chapterThemeColor[chapterNum]
              : bookThemeColor;
        if (themeColor) {
          domItem.style.borderColor = themeColor;
        }
@@ -842,7 +1208,7 @@
      // 记录高亮信息
      this.highlightData = data;
      // 跳转
      this.gotoPage(data.catalog, data.page, () => {});
      this.gotoPage(data.catalog, data.page, () => { });
    },
    // 页面向下滚动，音频小窗播放功能
    getAduio() {
@@ -972,14 +1338,20 @@
        dom.onmouseenter = (event) => {
          if (this.showWord != event.target.innerText) {
            const rect = dom.getBoundingClientRect();
            this.pageX = event.pageX - rect.width;
            this.pageY = event.pageY + 20;
            this.showWord = event.target.innerText;
            console.log(event);
            this.pageX = rect.left;
            this.pageY = rect.top + rect.height;
            this.keyWordData.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 = (event) => {
          if(this.showWord == event.target.innerText) {
          if (this.showWord == event.target.innerText) {
            this.showWord = "";
          }
        };
@@ -1000,6 +1372,10 @@

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

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