From 7d7744fe006714f6be0341d03d4de9b1e90d775d Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期五, 23 五月 2025 22:45:09 +0800
Subject: [PATCH] 5.23 婴幼儿游戏活动实施(wb)

---
 src/books/hotelEnglishTrainingBrochure2nd/view/components/index.vue |  466 ++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 files changed, 437 insertions(+), 29 deletions(-)

diff --git a/src/books/hotelEnglishTrainingBrochure2nd/view/components/index.vue b/src/books/hotelEnglishTrainingBrochure2nd/view/components/index.vue
index 133db70..571daeb 100644
--- a/src/books/hotelEnglishTrainingBrochure2nd/view/components/index.vue
+++ b/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,10 +29,13 @@
               :interfaceQuestion="questionDataMap"
             ></chapterFive>  -->
     </div>
+    <translateWord :pageX="pageX" :pageY="pageY" :showWord="showWord" :IPA="IPA" :prototype="prototype"
+      :translate="translate" v-if="showWord" />
   </div>
 </template>
 
 <script>
+import translateWord from "@/components/translateWord/index.vue";
 import pageHeader from "./header.vue";
 import chapterOne from "./chapter001.vue";
 //   import chapterTwo from "./chapter002.vue";
@@ -51,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";
@@ -75,6 +71,385 @@
       audioPath: "",
       currentTime: null,
       videoList: [],
+      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: {
@@ -117,7 +492,8 @@
           this.initViewer();
           this.closeAudio();
           this.closeVideo();
-        }, 200);
+          this.handleTanslateWord();
+        }, 5000);
       },
     },
     pageZoom: {
@@ -138,6 +514,7 @@
       this.throttleThreshold,
       { leading: true, trailing: false }
     );
+
     // 瀹氫箟瀛愬眰鏂规硶
     if (this.setGlobalState) {
       // 鎻愪緵椤甸潰璺宠浆鍔熻兘
@@ -187,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")
@@ -465,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;
         }
@@ -483,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;
         }
@@ -501,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;
         }
@@ -831,7 +1208,7 @@
       // 璁板綍楂樹寒淇℃伅
       this.highlightData = data;
       // 璺宠浆
-      this.gotoPage(data.catalog, data.page, () => {});
+      this.gotoPage(data.catalog, data.page, () => { });
     },
     // 椤甸潰鍚戜笅婊氬姩锛岄煶棰戝皬绐楁挱鏀惧姛鑳�
     getAduio() {
@@ -952,8 +1329,37 @@
         dom.style.fontSize = fs + "px";
       }
     },
+    handleTanslateWord() {
+      const doms = (
+        this.container ? this.container : document
+      ).querySelectorAll(".ts-word");
+      for (let index = 0; index < doms.length; index++) {
+        const dom = doms[index];
+        dom.onmouseenter = (event) => {
+          if (this.showWord != event.target.innerText) {
+            const rect = dom.getBoundingClientRect();
+            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) {
+            this.showWord = "";
+          }
+        };
+      }
+    },
   },
   components: {
+    translateWord,
     pageHeader,
     chapterOne,
     //   chapterTwo,
@@ -966,7 +1372,9 @@
 
 <style lang="less" scoped>
 .page-main {
-
+  width: 100% !important;
+  height: 100% !important;
+  overflow: auto;
 
   .page-content {
     max-width: 816px;

--
Gitblit v1.9.1