英语翻译组件

闫增涛

5 小时以前 0f108edec5986c342009c080f48c2b1cf2d1175f

英语翻译组件

 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;

 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 “yes”, 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 “cash”, “credit card”,
            “<span class="bold">debit card</span>”,“traveler's check”, “<span class="bold">gift certifi cate</span>”,
            “<span class="ts-word">debit card</span>”,“traveler'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 “currency type + amount number”, but its oral form reads as
            “amount 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>

 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;

 src/components/translateWord/index.vue

New file
@@ -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>