From 0f108edec5986c342009c080f48c2b1cf2d1175f Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期五, 16 五月 2025 15:24:04 +0800
Subject: [PATCH] 英语翻译组件
---
src/components/translateWord/index.vue | 35 +++++++++++++++++
src/books/hotelEnglishTrainingBrochure2nd/view/components/chapter001.vue | 30 +++++++-------
src/books/hotelEnglishTrainingBrochure2nd/assets/main.less | 6 +-
src/books/hotelEnglishTrainingBrochure2nd/view/components/index.vue | 27 ++++++++++++-
4 files changed, 78 insertions(+), 20 deletions(-)
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/assets/main.less b/src/books/hotelEnglishTrainingBrochure2nd/assets/main.less
index 0760098..8f1f8b3 100644
--- a/src/books/hotelEnglishTrainingBrochure2nd/assets/main.less
+++ b/src/books/hotelEnglishTrainingBrochure2nd/assets/main.less
@@ -1,7 +1,7 @@
.hotelEnglishTrainingBrochure2nd {
width: 100%;
height: 100%;
-
+ position: relative;
// 鑷畾涔夊唴瀹�
.page-box {
box-sizing: border-box;
@@ -15,7 +15,7 @@
width: 100% !important;
height: 100% !important;
overflow: auto;
- position: relative;
+ // position: relative;
}
@@ -1918,7 +1918,7 @@
font-family: "鏂规鍏颁涵缁嗛粦";
}
- .bold {
+ .ts-word {
color: #00aeef;
font-weight: bold;
cursor: pointer;
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/view/components/chapter001.vue b/src/books/hotelEnglishTrainingBrochure2nd/view/components/chapter001.vue
index 63fa220..d44d088 100644
--- a/src/books/hotelEnglishTrainingBrochure2nd/view/components/chapter001.vue
+++ b/src/books/hotelEnglishTrainingBrochure2nd/view/components/chapter001.vue
@@ -378,7 +378,7 @@
</p>
<p class="content">
(1) When the guest is checking out at the
- <span class="bold" id="keyWords" @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">cashier's
+ <span class="ts-word">cashier's
station,</span> the cashier should ask
about the guest's name and room number at first. Then remind the
guest to return the room card.
@@ -389,9 +389,9 @@
necessary. The cashier should make clear if the guest has signed any
last-minute bills for the mini-bar service or any other hotel
services. If the answer is 鈥測es鈥�, the cashier is supposed to call
- the department <span class="bold">concerned</span>. After all the
+ the department <span class="ts-word">concerned</span>. After all the
fees are charged to the master account of the guest, the cashier
- will <span class="bold">present</span> the bill to the guest and
+ will <span class="ts-word">present</span> the bill to the guest and
tell him/her the total amount.
</p>
</div>
@@ -414,11 +414,11 @@
<div class="bodystyle">
<p class="content">
(3) Ask the guest to check the bill again before
- <span class="bold">drawing up</span> the final bill to avoid any
+ <span class="ts-word">drawing up</span> the final bill to avoid any
errors. If any questions from the guest about the bill, you may
check all items again, check with the guest if he/she is
- <span class="bold">entitled</span> to any discount, check it with
- the department concerned and <span class="bold">calculate</span> the
+ <span class="ts-word">entitled</span> to any discount, check it with
+ the department concerned and <span class="ts-word">calculate</span> the
bill again. If there were errors, offer to correct the bill
immediately and apologize to the guest. If there were no errors,
explain the items to the guest.
@@ -451,7 +451,7 @@
(4) When the bill is ready, tell the guest the total amount and ask
the guest how he/she will make the payment. The methods of payment
which are commonly accepted in hotels are 鈥渃ash鈥�, 鈥渃redit card鈥�,
- 鈥�<span class="bold">debit card</span>鈥�,鈥渢raveler's check鈥�, 鈥�<span class="bold">gift certifi cate</span>鈥�,
+ 鈥�<span class="ts-word">debit card</span>鈥�,鈥渢raveler's check鈥�, 鈥�<span class="ts-word">gift certifi cate</span>鈥�,
etc.
</p>
<div class="border">
@@ -459,7 +459,7 @@
<p class="content">
<img class="img-k" src="../../assets/images/a2.jpg" alt="" />
Here are commonly accepted international credit cards:
- <span class="bold">American Express (AE/AX), MasterCard (MC), Visa(VS), enRoute
+ <span class="ts-word">American Express (AE/AX), MasterCard (MC), Visa(VS), enRoute
(ER), Eurocard(EC), International Great Wall, International
Diner's Club, Federal Card.</span>
</p>
@@ -471,7 +471,7 @@
<p class="content">
<img class="img-k" src="../../assets/images/a2.jpg" alt="" />
Check if the total amount on the bill goes beyond the
- <span class="bold">authorized credit limit</span> set by the
+ <span class="ts-word">authorized credit limit</span> set by the
credit card offi ce. If it is beyond the limit, you may ask the
guest if he/she would like to pay in cash to settle the
difference.
@@ -499,7 +499,7 @@
<p class="content">
<img class="img-k" src="../../assets/images/a2.jpg" alt="" />
Check if the total amount on the bill goes beyond the
- <span class="bold">authorized credit limit</span> set by the
+ <span class="ts-word">authorized credit limit</span> set by the
credit card offi ce. If it is beyond the limit, you may ask the
guest if he/she would like to pay in cash to settle the
difference.
@@ -513,7 +513,7 @@
</p>
<p class="content">
(6) The common way to show money amount is usually together with the
- <span class="bold">currency</span> type. In English, the written
+ <span class="ts-word">currency</span> type. In English, the written
form is 鈥渃urrency type + amount number鈥�, but its oral form reads as
鈥渁mount number + currency type鈥�. For example,
</p>
@@ -821,7 +821,7 @@
</div>
<p class="content">
<span class="bold2 mr-10">Richard Bush:</span> By credit card. Do
- you <span class="bold">honor</span> the American Express here?
+ you <span class="ts-word">honor</span> the American Express here?
</p>
<div class="content fl">
<p class="bgColor mr-10"><span class="bold1">Julia:</span></p>
@@ -846,7 +846,7 @@
<p class="bgColor mr-10"><span class="bold1">Julia:</span></p>
<p>
Thank you, sir. This is your card and the
- <span class="bold">receipt</span>. We hope you have enjoyed your
+ <span class="ts-word">receipt</span>. We hope you have enjoyed your
stay in our hotel.
</p>
</div>
@@ -1127,7 +1127,7 @@
<p class="quotation fm-kt">鎴戜滑鎺ュ彈缇庡浗杩愰�氬崱銆佷竾浜嬭揪鍗″拰缁磋惃鍗°��</p>
<p class="content">
(29) I'm sorry but we are not allowed to accept
- <span class="bold">personal checks.</span>
+ <span class="ts-word">personal checks.</span>
</p>
<p class="quotation fm-kt">瀵逛笉璧凤紝鎴戜滑涓嶈兘鎺ュ彈涓汉鏀エ銆�</p>
<p class="content">
@@ -1140,7 +1140,7 @@
</p>
<p class="quotation fm-kt">鎮ㄧ敤鐜伴噾琛ュ樊棰濆彲浠ュ悧锛�</p>
<p class="content">
- (32) Here is your <span class="bold">change/</span>receipt/<span class="bold">invoice</span>.
+ (32) Here is your <span class="ts-word">change/</span>receipt/<span class="ts-word">invoice</span>.
</p>
<p class="quotation fm-kt">杩欐槸鎮ㄧ殑闆堕挶/鏀舵嵁/鍙戠エ銆�</p>
<p class="content">(33) Wish you a pleasant journey.</p>
diff --git a/src/books/hotelEnglishTrainingBrochure2nd/view/components/index.vue b/src/books/hotelEnglishTrainingBrochure2nd/view/components/index.vue
index 133db70..7409fe3 100644
--- a/src/books/hotelEnglishTrainingBrochure2nd/view/components/index.vue
+++ b/src/books/hotelEnglishTrainingBrochure2nd/view/components/index.vue
@@ -37,11 +37,14 @@
:showPageList="loadPageList"
:interfaceQuestion="questionDataMap"
></chapterFive> -->
+
</div>
+ <translateWord :pageX="pageX" :pageY="pageY" :showWord="showWord" 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";
@@ -75,6 +78,9 @@
audioPath: "",
currentTime: null,
videoList: [],
+ pageX:0,
+ pageY:0,
+ showWord:"",
};
},
computed: {
@@ -117,6 +123,7 @@
this.initViewer();
this.closeAudio();
this.closeVideo();
+ this.handleTanslateWord()
}, 200);
},
},
@@ -952,8 +959,26 @@
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) => {
+ this.pageX = event.pageX;
+ this.pageY = event.pageY;
+ this.showWord = event.target.innerText;
+ console.log(event.target.innerText);
+ };
+ dom.onmouseleave = () => {
+ this.showWord = ""
+ };
+ }
+ }
},
components: {
+ translateWord,
pageHeader,
chapterOne,
// chapterTwo,
@@ -966,8 +991,6 @@
<style lang="less" scoped>
.page-main {
-
-
.page-content {
max-width: 816px;
min-width: 375px;
diff --git a/src/components/translateWord/index.vue b/src/components/translateWord/index.vue
new file mode 100644
index 0000000..aed1475
--- /dev/null
+++ b/src/components/translateWord/index.vue
@@ -0,0 +1,35 @@
+<template>
+ <div class="translate-box" :style="{left: pageX + 'px', top: pageY + 'px'}">
+ {{showWord}}
+ </div>
+</template>
+
+<script>
+ export default {
+ props: {
+ showWord: {
+ type: String,
+ default: ""
+ },
+ pageX:{
+ type: Number,
+ default: 0
+ },
+ pageY:{
+ type: Number,
+ default: 0
+ }
+ },
+ name: "TranslateWord",
+ }
+</script>
+
+<style lang="less" scoped>
+.translate-box {
+ width: 500px;
+ height: 200px;
+ background-color: red;
+ position: absolute;
+ z-index: 9999;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.1