会议优化以及旅游社英语组件

zhongshujie

2025-05-19 f489c412f7b0f7bf32d201bdbc6317c9c283e693

会议优化以及旅游社英语组件

 .env

@@ -1,7 +1,7 @@
VUE_APP_ENV = 'dev'
# VUE_APP_API_URL = "https://jsek.bnuic.com"
VUE_APP_API_URL = "https://www.tepcb.com"
# VUE_APP_RESOURCE_CTX = 'https://jsek.bnuic.com/books/resource/'
VUE_APP_RESOURCE_CTX = 'http://182.92.203.7:3007/books/resource/'
VUE_APP_API_URL = "https://jsek.bnuic.com"
# VUE_APP_API_URL = "https://www.tepcb.com"
VUE_APP_RESOURCE_CTX = 'https://jsek.bnuic.com/books/resource/'
# VUE_APP_RESOURCE_CTX = 'http://182.92.203.7:3007/books/resource/'
# VUE_APP_RESOURCE_CTX = 'https://www.tepcb.com/books/resource/'
VUE_APP_PUBLIC_PATH = '/books/book'

 src/App.vue

@@ -4,80 +4,43 @@
    <lifeCare v-if="activeBook.name == 'lifeCare'"></lifeCare>
    <embedded v-if="activeBook.name == 'embedded'"></embedded>
    <english v-if="activeBook.name == 'english'"></english>
    <sportsAndHealth
      v-if="activeBook.name == 'sportsAndHealth'"
    ></sportsAndHealth>
    <sportsAndHealth v-if="activeBook.name == 'sportsAndHealth'"></sportsAndHealth>
    <artAndDance v-if="activeBook.name == 'artAndDance'"></artAndDance>
    <artAndDrama v-if="activeBook.name == 'artAndDrama'"></artAndDrama>
    <mathBook v-if="activeBook.name == 'mathBook'"></mathBook>
    <botany v-if="activeBook.name == 'botany'"></botany>
    <civilAviation v-if="activeBook.name == 'civilAviation'"></civilAviation>
    <civilServices v-if="activeBook.name == 'civilServices'"></civilServices>
    <meetingPlanners
      v-if="activeBook.name == 'meetingPlanners'"
    ></meetingPlanners>
    <aviationBasicSkills
      v-if="activeBook.name == 'aviationBasicSkills'"
    ></aviationBasicSkills>
    <meetingPlanners v-if="activeBook.name == 'meetingPlanners'"></meetingPlanners>
    <aviationBasicSkills v-if="activeBook.name == 'aviationBasicSkills'"></aviationBasicSkills>
    <aviationSafety v-if="activeBook.name == 'aviationSafety'"></aviationSafety>
    <aviationEtiquette
      v-if="activeBook.name == 'aviationEtiquette'"
    ></aviationEtiquette>
    <preschoolGameGuidance
      v-if="activeBook.name == 'preschoolGameGuidance'"
    ></preschoolGameGuidance>
    <kindergartenLanguageActivity
      v-if="activeBook.name == 'kindergartenLanguageActivity'"
    ></kindergartenLanguageActivity>
    <kindergartenActivitiesDesignGuidance
      v-if="activeBook.name == 'kindergartenActivitiesDesignGuidance'"
    ></kindergartenActivitiesDesignGuidance>
    <childcareInstitutionsManagement
      v-if="activeBook.name == 'childcareInstitutionsManagement'"
    >
    <aviationEtiquette v-if="activeBook.name == 'aviationEtiquette'"></aviationEtiquette>
    <preschoolGameGuidance v-if="activeBook.name == 'preschoolGameGuidance'"></preschoolGameGuidance>
    <kindergartenLanguageActivity v-if="activeBook.name == 'kindergartenLanguageActivity'">
    </kindergartenLanguageActivity>
    <kindergartenActivitiesDesignGuidance v-if="activeBook.name == 'kindergartenActivitiesDesignGuidance'">
    </kindergartenActivitiesDesignGuidance>
    <childcareInstitutionsManagement v-if="activeBook.name == 'childcareInstitutionsManagement'">
    </childcareInstitutionsManagement>
    <toddlerGameImplementation
      v-if="activeBook.name == 'toddlerGameImplementation'"
    ></toddlerGameImplementation>
    <aurturingAndEducationAged0to3
      v-if="activeBook.name == 'aurturingAndEducationAged0to3'"
    >
    <toddlerGameImplementation v-if="activeBook.name == 'toddlerGameImplementation'"></toddlerGameImplementation>
    <aurturingAndEducationAged0to3 v-if="activeBook.name == 'aurturingAndEducationAged0to3'">
    </aurturingAndEducationAged0to3>
    <preschoolEvaluation v-if="activeBook.name == 'preschoolEvaluation'">
    </preschoolEvaluation>
    <preschoolBasicKnowledge
      v-if="activeBook.name == 'preschoolBasicKnowledge'"
    ></preschoolBasicKnowledge>
    <behaviorObserveAndGuid
      v-if="activeBook.name == 'behaviorObserveAndGuid'"
    ></behaviorObserveAndGuid>
    <policiesAndRegulations
      v-if="activeBook.name == 'policiesAndRegulations'"
    ></policiesAndRegulations>
    <OralAndBroadcasting
      v-if="activeBook.name == 'OralAndBroadcasting'"
    ></OralAndBroadcasting>
    <practicalCareChildrenManual
      v-if="activeBook.name == 'practicalCareChildrenManual'"
    ></practicalCareChildrenManual>
    <childIllnessPreventionCare
      v-if="activeBook.name == 'childIllnessPreventionCare'"
    ></childIllnessPreventionCare>
    <artInitiationForAges0to3
      v-if="activeBook.name == 'artInitiationForAges0to3'"
    ></artInitiationForAges0to3>
    <toddlerSportsSafetyProtection
      v-if="activeBook.name == 'toddlerSportsSafetyProtection'"
    ></toddlerSportsSafetyProtection>
    <cognitiveLanDevEduAges0to3
      v-if="activeBook.name == 'cognitiveLanDevEduAges0to3'"
    ></cognitiveLanDevEduAges0to3>
    <aviationPassengerTransport6th
      v-if="activeBook.name == 'aviationPassengerTransport6th'"
    ></aviationPassengerTransport6th>
    <hotelEnglishTrainingBrochure2nd
      v-if="activeBook.name == 'hotelEnglishTrainingBrochure2nd'"
    ></hotelEnglishTrainingBrochure2nd>
    <preschoolBasicKnowledge v-if="activeBook.name == 'preschoolBasicKnowledge'"></preschoolBasicKnowledge>
    <behaviorObserveAndGuid v-if="activeBook.name == 'behaviorObserveAndGuid'"></behaviorObserveAndGuid>
    <policiesAndRegulations v-if="activeBook.name == 'policiesAndRegulations'"></policiesAndRegulations>
    <OralAndBroadcasting v-if="activeBook.name == 'OralAndBroadcasting'"></OralAndBroadcasting>
    <practicalCareChildrenManual v-if="activeBook.name == 'practicalCareChildrenManual'"></practicalCareChildrenManual>
    <childIllnessPreventionCare v-if="activeBook.name == 'childIllnessPreventionCare'"></childIllnessPreventionCare>
    <artInitiationForAges0to3 v-if="activeBook.name == 'artInitiationForAges0to3'"></artInitiationForAges0to3>
    <toddlerSportsSafetyProtection v-if="activeBook.name == 'toddlerSportsSafetyProtection'">
    </toddlerSportsSafetyProtection>
    <cognitiveLanDevEduAges0to3 v-if="activeBook.name == 'cognitiveLanDevEduAges0to3'"></cognitiveLanDevEduAges0to3>
    <aviationPassengerTransport6th v-if="activeBook.name == 'aviationPassengerTransport6th'">
    </aviationPassengerTransport6th>
    <hotelEnglishTrainingBrochure2nd v-if="activeBook.name == 'hotelEnglishTrainingBrochure2nd'">
    </hotelEnglishTrainingBrochure2nd>
  </div>
</template>
<script>
@@ -216,19 +179,19 @@
      // cognitiveLanDevEduAges0to3  // 0～3岁婴幼儿认知与语言发展及教育
      // aviationPassengerTransport6th  // 民航旅客运输第6版(旅游社)
      // hotelEnglishTrainingBrochure2nd // 酒店英语实训活页教程（第2版）（旅游社）
      console.log("debugger", process.env);
      // console.log("debugger", process.env);
      this.activeBook = await this.config.getBookConfig(
        process.env.VUE_APP_RESOURCE_CTX +
          (process.env.VUE_APP_ENV == "product"
            ? process.env.VUE_APP_BOOK_ID
            : "hotelEnglishTrainingBrochure2nd")
        (process.env.VUE_APP_ENV == "product"
          ? process.env.VUE_APP_BOOK_ID
          : "meetingPlanners")
      );

      // this.activeBook = await this.config.getBookConfig(
      //   'https://jsek.bnuic.com/books/resource/'+
      //   (process.env.VUE_APP_ENV == "product"
      //     ? process.env.VUE_APP_BOOK_ID
      //     : "aviationSafety")
      //     : "meetingPlanners")
      // );

      // 测试试读30页
@@ -237,6 +200,7 @@

      // 旅游社处理跨域问题
      // this.activeBook = this.config.activeBook;
      this.config.activeBook = this.activeBook;
      this.config.goodsStore = this.activeBook.storeRefcode;
    }
  },

 src/assets/js/config.js

@@ -1,14 +1,5 @@
import axios from "axios";
export let activeBook = {}; // 资源请求地址

// export let activeBook = {
//   name: "aviationPassengerTransport6th",
//   rootCmsItemId: "86281",
//   storeRefcode: "defaultGoodsStore1",
//   bookId: "5033",
//   bookName: "民航旅客运输（第6版）",
// };

export let goodsStore = "";
// 请求教材配置信息
const getBookConfig = async (ctx) => {
@@ -16,14 +7,14 @@
  return response.data;
};
export const requestTimeOut = 300000; // 请求超时时间
// export const tokenKey = "token";
 export const tokenKey = "website-front-token"
export const tokenKey = "token";
//  export const tokenKey = "website-front-token"

const config = {
  activeBook,
  requestTimeOut,
  tokenKey,
  goodsStore,
  getBookConfig
  getBookConfig,
};
export default config;

 src/books/hotelEnglishTrainingBrochure2nd/assets/main.less

@@ -2,6 +2,7 @@
    width: 100%;
    height: 100%;
    position: relative;

    // 自定义内容
    .page-box {
        box-sizing: border-box;
@@ -9,13 +10,6 @@
        margin-bottom: 20px;
        box-shadow: 0 3px 6px 1px #00000029;
        background-color: #fff;
    }

    .page-main {
        width: 100% !important;
        height: 100% !important;
        overflow: auto;
        // position: relative;
    }


@@ -373,9 +367,14 @@
    }

    .table-tr-bc {
        background-color: #c6eafa;
        background-color: transparent;
        color: #000;
        font-family: "kaiti";


        p{
          font-size: 0.9em;  
          margin: 0;
        }
    }

    .table-textarea {
@@ -634,6 +633,7 @@
    }

    .select-border {
        cursor: pointer;
        width: 60px;
        border: 0;
        border-bottom: 1px solid #767676;
@@ -1355,6 +1355,11 @@
        text-align: center;
    }

    .tl-l {
        text-align: left;
    }


    .img {
        text-align: center;
        font-size: 14px;
@@ -1578,7 +1583,9 @@
            font-family: "kaiti";
            line-height: 20px;
        }
    }

    .tableClass1 {
        table {
            border-color: none !important;
        }
@@ -1603,6 +1610,44 @@
                outline: none;
            }
        }
    }

    .tableClass2 {
        table {
            border-color: none !important;
        }

        .table-th-bc {
            background-color: #0dbff2;
            color: #fff;
        }

        .table-tr-bc {
            background-color: #c6eafa;
            color: #000;
            font-family: "kaiti";
        }

        .table-textarea {
            font-size: 14px;
            font-family: "Times New Roman", "宋体";
            resize: none;

            &:focus {
                outline: none;
            }
        }

        .textarea-box {
            border: none;
            text-align: center;
            width: 84px;
            height: 36px;
            overflow: auto;
            word-break: break-all;
            resize: none;
        }

    }

    .series {
@@ -1658,7 +1703,7 @@
        font-size: 1.2em;
        line-height: 1.3em;
        text-align: center;
        font-weight: 800;
        font-weight: 600;
        padding: 0 5%;
    }


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

@@ -379,7 +379,7 @@
          <p class="content">
            (1) When the guest is checking out at the
            <span class="ts-word">cashier's
              station,</span> the cashier should ask
              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.
          </p>
@@ -451,7 +451,8 @@
            (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="ts-word">debit card</span>”,“traveler's check”, “<span class="ts-word">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,9 +460,10 @@
            <p class="content">
              <img class="img-k" src="../../assets/images/a2.jpg" alt="" />
              Here are commonly accepted international credit cards:
              <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>
              <span class="ts-word">American Express (AE/AX)</span>, <span class="ts-word">MasterCard(MC)</span>, <span
                class="ts-word">Visa(VS)</span>, <span class="ts-word">enRoute(ER)</span>
              ,<span class="ts-word">Eurocard(EC)</span>, <span class="ts-word">International Great Wall</span>,<span
                class="ts-word">International Diner's Club</span>,<span class="ts-word">Federal Card</span>.
            </p>
            <p class="content">
              <img class="img-k" src="../../assets/images/a2.jpg" alt="" />
@@ -579,7 +581,7 @@
            <p class="td-2">
              (6)表达金额的一般方式是“数额+币种”。英语中，表达金额的书面形式是“币种+数额”，但口头表达却是“数额+币种”。例如:
            </p>
            <div class="fl jc-c">
            <div class="fl jc-c tableClass1">
              <table border="1" cellpadding="10" cellspacing="0" style="
                  border-color: #5192c6;
                  border-collapse: collapse;
@@ -1160,7 +1162,7 @@
          <table cellpadding="0" cellspacing="0" style="
              border-collapse: collapse;
              margin: 0 20px;
            " class="fz-16 mb-20">
            " class="fz-16 mb-20 tableClass2">
            <tr class="table-th-bc">
              <td class="center">No.</td>
              <td class="center">Word</td>
@@ -1221,7 +1223,7 @@
          <table cellpadding="0" cellspacing="0" style="
              border-collapse: collapse;
              margin: 0 20px;
            " class="fz-16 ">
            " class="fz-16 tableClass2">
            <tr class="table-tr-bc">
              <td class="center">(4)</td>
              <td class="center">
@@ -1699,7 +1701,33 @@
          </div>
          <p class="td-0 unit-title-text">Train Your Basic Skills 技能实训</p>
        </div>
        <div class="bodystyle"></div>
        <div class="bodystyle">
          <p class="titleQuot-1 mb-20">1. Objectives（目标）</p>
          <p class="content">• To understand the basic task given to you;</p>
          <p class="content">• To assign roles and work together with your partner (s);</p>
          <p class="content">• To make conversations between the cashier and the guest on checking out;</p>
          <p class="content">• To creatively carry out the basic procedures to check out the guests;</p>
          <p class="content">• To develop good professional qualities;</p>
          <p class="content">• To fi ll out the worksheet about your carry-out.</p>
          <p class="titleQuot-1 mt-20 mb-20">2. Receive Your Task（接受任务）</p>
          <p class="content">— George Smith, a guest in Room 1226 together with his wife, is checking out at the
            cashier's station.</p>
          <p class="content">— Julia, a cashier, is checking out George Smith and his wife.</p>
          <p class="content">— Julia confi rms the name and room number of George Smith.</p>
          <p class="content">— Julia reminds George Smith to return the room card.</p>
          <p class="content">— Julia checks the records of charges on the computer, asks George Smith if he used any
            hotel services in the last two hours, and draws up a bill for George Smith.</p>
          <p class="content">— Julia asks George Smith to check the bill and George Smith says that RMB 135 yuan is
            overcharged.</p>
          <p class="content">— Julia explains the items to George Smith and George Smith fi nds that he made an
            international call last night with a fee of RMB 135 yuan.</p>
          <p class="content">— Julia asks George Smith how he will pay the bill.</p>
          <p class="content">— George Smith pays the bill by the credit card, a VISA card.</p>
          <p class="content">— Julia says goodbye to George Smith and his wife.</p>
          <p class="content">— Julia updates the room status of Room 1226 as “available” and makes a record of George
            Smith's checkout.</p>

        </div>
        <div class="copyrightPage-bottom">
          <img class="copyrightPage-right-img" src="../../assets/images/right-page.png" alt="" />
          <div class="copyrightPage-right-box">309</div>
@@ -1716,7 +1744,52 @@
          </li>
          <li>收银服务</li>
        </ul>
        <div class="bodystyle"></div>
        <div class="bodystyle">

          <p class="titleQuot-1 mb-20 mt-20">3. Carry Out Your Task（执行任务）</p>
          <p class="content">Now carry out the task as is listed in the Receive Your Task part and then fi nish the
            following worksheet. Creatively add steps or information to the task provided if necessary.</p>
          <p class="titleQuot-c mb-20">Project 12 Cashier's Service</p>
          <table border="1" cellpadding="10" cellspacing="0" style="
                  border-color: #00aeef;
                  border-collapse: collapse;
                  margin: 0;
                " class="fz-16 img-0">
            <tr class="table-tr-bc">
              <td class="tl-f img-g">Name:</td>
              <td class="tl-f img-g">Class:</td>
              <td class="tl-f img-g">Student ID:</td>
            </tr>
            <tr class="table-tr-bc">
              <td class="tl-f" colspan="3">Partner(s)</td>
            </tr>
            <tr class="table-tr-bc">
              <td class="tl-f" colspan="3">Materials: computer/phone/bill/record book/pens/credit card/luggage/desk,
                etc.</td>
            </tr>
            <tr class="table-tr-bc">
              <td class="tl-f" colspan="3">
                <p>Your Role:</p>
              </td>
            </tr>
            <tr class="table-tr-bc">
              <td class="tl-f" colspan="3">
                <p>Your Task:</p>
              </td>
            </tr>
            <tr class="table-tr-bc">
              <td class="tl-f" colspan="3">
                <p>Your Process:</p>
              </td>
            </tr>
            <tr class="table-tr-bc">
              <td class="tl-f" colspan="3">
                <p>Conversation between you (the cashier, Julia) and your partner (the guest,
                George Smith):</p>
              </td>
            </tr>
          </table>
        </div>
        <div class="copyrightPage-bottom">
          <img class="copyrightPage-left-img" src="../../assets/images/left-page.png" alt="" />
          <div class="copyrightPage-left-box">310</div>
@@ -1893,13 +1966,6 @@
        </div>
      </div>
    </div>
    <div class="follow-box" :style="{
      display: isBoxVisible ? 'block' : 'none',
      left: boxPosition.x + 'px',
      top: boxPosition.y + 'px'
    }">
      跟随鼠标的盒子
    </div>
  </div>
</template>
<script>
@@ -1917,11 +1983,6 @@
  },
  data() {
    return {
      // 鼠标移入事件
      isBoxVisible: false,
      boxPosition: { x: 0, y: 0 },


      collectImg: require("../../assets/images/icon/heart.png"),
      collectCheck: require("../../assets/images/icon/heart-check.png"),
      // 音频
@@ -2163,6 +2224,13 @@
      this.activityThree = JSON.parse(activityThree);
    }

    const tableData = localStorage.getItem(
      "hotelEnglishTrainingBrochure2nd-book-chapter001-tableData"
    );
    if (tableData) {
      this.tableData = JSON.parse(tableData);
    }

    this.collectResourceList = await getCollectResource(
      this.config.activeBook.bookId
    );
@@ -2293,25 +2361,6 @@
        JSON.stringify(this.tableData)
      );
    },
    // 鼠标移入事件
    handleMouseEnter(event) {
      this.boxPosition.x = event.clientX;
      this.boxPosition.y = event.clientY;
      console.log(this.boxPosition, "this.boxPosition");
      // 设置盒子位置为鼠标位置下方
      this.boxPosition.y += 50; // 调整盒子与鼠标的间距
      // 显示盒子
      this.isBoxVisible = true;





    },
    // 鼠标移出事件
    handleMouseLeave() {

    }
  },
};
</script>

 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,7 @@
              :interfaceQuestion="questionDataMap"
            ></chapterFive>  -->
    </div>
    <translateWord
      :pageX="pageX"
      :pageY="pageY"
      :showWord="showWord"
      v-if="showWord"
    />
    <translateWord :pageX="pageX" :pageY="pageY" :showWord="showWord" v-if="showWord" />
  </div>
</template>

@@ -199,7 +185,7 @@

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

    // const pageDom = (this.container ? this.container : document)
@@ -476,8 +462,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 +480,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 +498,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 +828,7 @@
      // 记录高亮信息
      this.highlightData = data;
      // 跳转
      this.gotoPage(data.catalog, data.page, () => {});
      this.gotoPage(data.catalog, data.page, () => { });
    },
    // 页面向下滚动，音频小窗播放功能
    getAduio() {
@@ -972,14 +958,14 @@
        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.pageX = rect.left;
            this.pageY = rect.top + rect.height;
            this.showWord = event.target.innerText;
            console.log(event);
            console.log(rect);
          }
        };
        dom.onmouseleave = (event) => {
          if(this.showWord == event.target.innerText) {
          if (this.showWord == event.target.innerText) {
            this.showWord = "";
          }
        };
@@ -1000,6 +986,10 @@

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

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

 src/books/meetingPlanners/assets/mian.less

@@ -1199,6 +1199,7 @@
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;

    span {
        color: #fff;

 src/books/meetingPlanners/view/components/chapter001.vue

@@ -326,10 +326,10 @@
                            <img class="img-b" alt="" src="../../assets/images/i0001-1.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion" @click="openQuestion(1)" >
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(1)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -603,10 +603,10 @@
                            <img class="img-b" alt="" src="../../assets/images/i0001-2.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(2)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(2)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -1035,10 +1035,10 @@
                        <textarea v-model="questionData.unit1.twelve" placeholder="请输入内容" rows="6"
                            style="max-width: 90%; min-width: 90%" class="fz-16" @change="setBookQuestion"></textarea>
                    </p>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion" @click="openQuestion(3)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(3)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg  t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -1234,10 +1234,10 @@
                            <img class="img-b" alt="" src="../../assets/images/i0002-1.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion" @click="openQuestion(4)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(4)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg  t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -1569,10 +1569,10 @@
                            <img class="img-b" alt="" src="../../assets/images/i0002-2.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion" @click="openQuestion(5)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(5)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg  t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -2025,10 +2025,10 @@
                            <img class="img-b" alt="" src="../../assets/images/i0002-3.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion" @click="openQuestion(6)" >
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(6)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -2483,10 +2483,10 @@
                        <textarea v-model="questionData.unit2.eleven" placeholder="请输入内容" rows="6"
                            style="max-width: 90%; min-width: 90%" class="fz-16" @change="setBookQuestion"></textarea>
                    </p>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(7)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(7)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -2824,10 +2824,10 @@
                            <img class="img-b" alt="" src="../../assets/images/i0003-1.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion" @click="openQuestion(8)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(8)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -3293,10 +3293,10 @@
                            <img class="img-b" alt="" src="../../assets/images/i0003-2.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion" @click="openQuestion(9)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(9)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -3556,10 +3556,10 @@
                            <img class="img-b" alt="" src="../../assets/images/i0003-3.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(10)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(10)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -4025,10 +4025,10 @@
                        <textarea v-model="questionData.unit3.eight" placeholder="请输入内容" rows="6"
                            style="max-width: 90%; min-width: 90%" class="fz-16" @change="setBookQuestion"></textarea>
                    </p>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(11)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(11)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path

 src/books/meetingPlanners/view/components/chapter002.vue

@@ -549,10 +549,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0004-1.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(1)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(1)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -951,10 +951,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0004-2.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(2)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(2)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -1166,10 +1166,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0004-3.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(3)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(3)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -1438,10 +1438,10 @@
                                class="mindMap-type"></span>
                        </div>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(4)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(4)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -2023,10 +2023,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/0125-01.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(5)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(5)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -2379,10 +2379,10 @@
                    <p> <textarea v-model="questionData.unit4.eleven" placeholder="请输入内容" rows="6"
                            style="max-width: 90%; min-width: 90%;" class="fz-16" @change="setBookQuestion"></textarea>
                    </p>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(6)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(6)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -2707,10 +2707,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0005-1.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(7)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(7)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -2893,10 +2893,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0005-2.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(8)" >
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(8)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -3123,10 +3123,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0005-3.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(9)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(9)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -3372,10 +3372,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0005-4.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(10)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(10)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -3634,10 +3634,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0005-5.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(11)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(11)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -3795,10 +3795,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0005-6.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(12)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(12)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -4028,10 +4028,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0005-7.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(13)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(13)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -4414,10 +4414,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0006-1.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(14)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(14)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -4718,10 +4718,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0006-2.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(15)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(15)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -4877,10 +4877,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0006-3.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(16)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(16)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -4983,10 +4983,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0006-4.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(17)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(17)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -5110,10 +5110,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0006-5.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(18)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(18)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -5290,10 +5290,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0006-6.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(19)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(19)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -5587,10 +5587,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0007-1.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(20)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(20)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -6115,10 +6115,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0007-2.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(21)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(21)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -6236,10 +6236,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0007-3.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(22)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(22)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -6347,10 +6347,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0007-4.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(23)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(23)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -6688,10 +6688,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0008-1.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(24)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(24)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -6942,10 +6942,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0008-2.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(25)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(25)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -7293,10 +7293,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0008-3.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion"  @click="openQuestion(26)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(26)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -7498,10 +7498,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0008-4.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion" @click="openQuestion(27)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(27)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg  t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -7741,10 +7741,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0009-1.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion" @click="openQuestion(28)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(28)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg  t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -7864,10 +7864,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0009-3.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion" @click="openQuestion(29)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(29)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg  t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -7951,10 +7951,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0009-4.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion" @click="openQuestion(30)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(30)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg  t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -8157,10 +8157,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0009-2.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion" @click="openQuestion(31)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(31)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg  t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -8334,10 +8334,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0009-5.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion" @click="openQuestion(32)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(32)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg  t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path
@@ -8562,10 +8562,10 @@
                        <p class="center openImgBox"><img class="img-b" alt="" src="../../assets/images/i0009-6.jpg" />
                        </p>
                    </div>
                    <p class="dialogQuestion">
                    <p class="dialogQuestion" @click="openQuestion(33)">
                        <span class="td-0">【本节测试】</span>
                        <span class="td-0">
                            <svg @click="openQuestion(33)" t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                            <svg  t="1736157124915" class="icon" viewBox="0 0 1024 1024"
                                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2536"
                                xmlns:xlink="http://www.w3.org/1999/xlink" width="28" height="28">
                                <path

 src/components/translateWord/index.vue

@@ -1,35 +1,69 @@
<template>
  <div class="translate-box" :style="{left: pageX + 'px', top: pageY + 'px'}">
    {{showWord}}
  <div class="translate-box" :style="{ left: pageX + 'px', top: pageY + 'px' }">
    <div class="translate-box-word">
      <div> {{ showWord }}</div>
      <div>111111</div>
    </div>
    <div class="translate-box-translation">
      111111111111111
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      showWord: {
        type: String,
        default: ""
      },
      pageX:{
        type: Number,
        default: 0
      },
      pageY:{
        type: Number,
        default: 0
      } 
export default {
  props: {
    showWord: {
      type: String,
      default: ""
    },
    name: "TranslateWord",
  }
    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;
  max-width: 20%;
  text-wrap: wrap;
  border: 2px solid #3bc6f2;
  background-color: #fff;
  position: absolute;
  z-index: 9999;
  box-sizing: border-box;

  .translate-box-word {
    display: flex;
    padding: 2px 5px;
    border-bottom: 1px solid #3bc6f2;

    div:nth-child(1) {
      color: #3bc6f2;
      padding-right: 5px;
    }

    div:nth-child(2) {
      overflow-wrap: break-word;
      word-break: break-word;
      /* 确保文本可以换行 */
      white-space: normal;
    }
  }

  .translate-box-translation {
    padding: 2px 5px;
    overflow-wrap: break-word;
    word-break: break-word;
    /* 确保文本可以换行 */
    white-space: normal;
  }
}
</style>