Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

闫增涛

2024-06-26 3373983d0a82587d4dd2106a7e6b79b7bd566817

Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

 src/books/English/assets/images/0068-1.jpg

 src/books/English/assets/images/dy4.jpg

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

@@ -287,6 +287,7 @@
          <div class="bodystyle">
            <h3 id="c002" class="fl al-cn">
              <span class="bjh3">Listening</span>
              <!--controlslist="noplaybackrate nodownload"后面的音频框加入这个-->
              <audio :src="resource.listenOne" controls controlslist="noplaybackrate nodownload" class="audio" @play="audioPlay"></audio>
            </h3>
            <p>

 src/books/English/view/components/chapter003.vue

@@ -1318,73 +1318,6 @@
                </div>
            </div>
        </div>

        <!-- 第四单元 -->
        <!-- 58 -->
        <div class="page-box" page="64">
            <div v-if="showPageList.indexOf(64) > -1">
                <!-- 头部 -->
                <div class="w100 mb-20" style="padding-right: 20px">
                    <div class="event-header-bc-unit3 fl al-end" style="height: 100px; padding-left: 40px">
                        <div class="preface-header-box event-header-text-bc-unit3">
                            <span class="l-text">新标准通用职场英语</span>
                            <span class="g-text event-text-color-unit3">基础模块一</span>
                        </div>
                    </div>
                </div>
                <!-- 内容 -->
                <div class="padding-93">
                    <div class="bodystyle">

                    </div>
                    <div class="preface-bottom">
                        <span class="contet-num-box">58</span>
                    </div>
                </div>
            </div>
        </div>
         <!-- 59 -->
        <div class="page-box" page="65">
            <div v-if="showPageList.indexOf(65) > -1">
                <!-- 头部 -->
                <ul class="preface-odd-header w100 fl ju-bt">
                    <li class=""></li>
                    <li class="fz-18">
                        <span class="chapter-left-bc-unit3">MODULE 3</span>
                        <span class="chapter-right-bc-unit3 fw-bl chapter-right-cl-unit3">A BETTER WORLD WITH
                            VOLUNTEERS</span>
                    </li>
                </ul>
                <!-- 内容 -->
                <div class="padding-93">
                    <div class="bodystyle"></div>
                </div>
                <div class="preface-bottom">
                    <span class="contet-num-box">39</span>
                </div>
            </div>
        </div>
        <!-- 60 -->
        <div class="page-box" page="66">
            <div v-if="showPageList.indexOf(66) > -1">
                <!-- 头部 -->
                <div class="w100 mb-20" style="padding-right: 20px">
                    <div class="event-header-bc-unit3 fl al-end" style="height: 100px; padding-left: 40px">
                        <div class="preface-header-box event-header-text-bc-unit3">
                            <span class="l-text">新标准通用职场英语</span>
                            <span class="g-text event-text-color-unit3">基础模块一</span>
                        </div>
                    </div>
                </div>
                <!-- 内容 -->
                <div class="padding-93">
                    <div class="bodystyle"></div>
                </div>
                <div class="preface-bottom">
                    <span class="contet-num-box">12</span>
                </div>
            </div>
        </div>
    </div>
</template>


 src/books/English/view/components/chapter004.vue

@@ -3,25 +3,21 @@
      <!-- 第四单元 -->
        <!-- 58 -->
        <div class="page-box" page="64">
            <div v-if="showPageList.indexOf(64) > -1">
                <!-- 头部 -->
                <div class="w100 mb-20" style="padding-right: 20px">
                    <div class="event-header-bc-unit3 fl al-end" style="height: 100px; padding-left: 40px">
                        <div class="preface-header-box event-header-text-bc-unit3">
                            <span class="l-text">新标准通用职场英语</span>
                            <span class="g-text event-text-color-unit3">基础模块一</span>
                        </div>
                    </div>
                </div>
                <!-- 内容 -->
                <div class="padding-93">
                    <div class="bodystyle">

                    </div>
                    <div class="preface-bottom">
                        <span class="contet-num-box">58</span>
                    </div>
                </div>
            <div class="bodystyle" v-if="showPageList.indexOf(64) > -1">
                <h1 id="a005">
                    <img class="img-0" alt="" src="../../assets/images/dy4.jpg" />
                </h1>
                <p class="img"></p>
                <p><b>This unit will help you to:</b></p>
                <p>➢ Learn words and expressions to describe hi-tech products</p>
                <p>➢ Review the rules for the comparative and superlative degree of adjectives and adverbs</p>
                <p>➢ Get knowledge of the impact of science and technology on the way of life</p>
                <p>➢ Be able to write a sales letter to introduce a new product</p>
                <p>➢ Get inspired by the spirit of scientists</p>
                <p class="center">
                    <img class="img-0" alt="" src="../../assets/images/0068-1.jpg" />
                </p>
                <p class="img"></p>
            </div>
        </div>
         <!-- 59 -->
@@ -31,7 +27,7 @@
                <ul class="preface-odd-header w100 fl ju-bt">
                    <li class=""></li>
                    <li class="fz-18">
                        <span class="chapter-left-bc-unit3">MODULE 3</span>
                        <span class="chapter-left-bc-unit3">MODULE 4</span>
                        <span class="chapter-right-bc-unit3 fw-bl chapter-right-cl-unit3">A BETTER WORLD WITH
                            VOLUNTEERS</span>
                    </li>
@@ -72,7 +68,7 @@
import matching from "@/components/matching/matching.vue";
import { getResourcePath } from "@/assets/methods/resources";
export default {
    name: "chapter-three",
    name: "chapter-Four",
    components: { matching },
    props: {
        showPageList: {

 src/books/English/view/components/index.vue

@@ -12,6 +12,8 @@
        v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList"></chapterTwo>
        <chapterThree @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList"></chapterThree>
        <chapterFour @saveCharacters="saveCharacters" @closeMiniAudio="closeMiniAudio"
        v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList"></chapterFour>
    </div>
    <miniAudio :path="audioPath" :currentTime="currentTime" @closeMiniAudio="closeMiniAudio" ref="audioPlayer">
    </miniAudio>
@@ -23,6 +25,7 @@
import chapterOne from "./chapter001.vue";
import chapterTwo from "./chapter002.vue"
import chapterThree from "./chapter003.vue"
import chapterFour from "./chapter004.vue"
import miniAudio from "@/components/miniAudio/index.vue";
import NoteIcon from "@/assets/images/biji.png";
import _ from "lodash";
@@ -33,7 +36,7 @@
export default {
  data() {
    return {
      catalogLength: 4, // 总章节数
      catalogLength: 5, // 总章节数
      showCatalogList: [], // 显示的章节
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
@@ -153,7 +156,7 @@

    // 测试页面跳转
    // setTimeout(() => {
    //   this.gotoPage(2,11);
    //   this.gotoPage(4,59);
      //   setTimeout(() => {
      //     this.renderSign("Highlight", {
      //       id: "2ACA9359",
@@ -181,7 +184,7 @@
      //   txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ",
      //   txtIndex: 57
      // });
    // }, 50);
     }, 50);
  },
  methods: {
    // setZoom1() {
@@ -714,6 +717,7 @@
        chapterOne,
        chapterTwo,
        chapterThree,
        chapterFour,
      };
      // 遍历所有章节文件
      for (const key in pageData) {
@@ -884,6 +888,7 @@
    chapterOne,
    chapterTwo,
    chapterThree,
    chapterFour,
    miniAudio,
  },
};

 src/books/artAndDrama/assets/main.less

@@ -597,7 +597,29 @@
    z-index: 1;
    /* 确保页码数字在图片上方 */
  }
  
  .ends{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* 当屏幕宽度至少为600px时应用此样式 */
@media screen and (max-width: 420px) {
  .ends{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
  .option {
  position: relative;
  display: flex;
  flex-direction: row;
  //flex-wrap: nowrap;
  width: 170px;
  height: 250px;
  height: min-content;
}
  .page-footer-number-left {
    color: black;
    left: 15%;

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

@@ -4,7 +4,8 @@
      <div v-if="showPageList.indexOf(4) > -1">
        <h1 id="a004">
          <img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
          <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
          <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"
            @play="audioPlay"></audio>
        </h1>
        <div class="bodystyle">
          <div class="bk">
@@ -43,10 +44,11 @@
            <span class="hs1">◇</span>大声朗读下面的句子，连一连不同逻辑重音强调的意思。
          </p>
          <h1>
            <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
            <!-- <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"
              @play="audioPlay"></audio> -->
          </h1>
          <!-- 连线题 -->
          <matching :rawData="rawData" :question="question" class="macthing" :primaryColor="'transparent'" :bordercolor="'transparent'"></matching>
          <matching :rawData="rawData" :question="question" class="macthing" :primary-color="color"></matching>
          <p class="text">小提示：加点的文字为本句话中的逻辑重音，在朗读发音时请重读。</p>
        </div>
        <p><br /></p>
@@ -62,12 +64,10 @@
        <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
        <div class="bodystyle">
          <h3 class="lefth3" id="c001"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
          <p class="text"><span class="hs1">◇</span>请选出你认为正确的答案。</p>
          <choice class="choice" :questions="questions" :primaryColor="accentColor" hoverBackgroundColor="#F58200" hoverColor="white"></choice>
          <p class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/1-2蚂蚁举大树.gif" />
          </p>
          <choice class="text" :questions="questions" :primaryColor="accentColor"  hoverBackgroundColor="#F58200" hoverColor="white"></choice>
          <p class="center text">
          </p><p class="center text">
            <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
              x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
              controlslist="nodownload" class="w100 video " @play="videoPlay"
@@ -103,7 +103,8 @@
          <p class="text">
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1><audio :src="auidoPathThree" controls class="audio" @play="audioPlay"></audio></h1>
          <h1><audio :src="auidoPathThree" controls controlslist="noplaybackrate nodownload" class="audio"
              @play="audioPlay"></audio></h1>
          <div class="bj3">
            <p class="center">
              <span class="hs">春<a id="w1"><sup>1</sup></a>（节选）</span>
@@ -152,7 +153,8 @@
          <h1 class="lefth3 openImgBox" id="c005">
            <img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" />
          </h1>
          <h1><audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio></h1>
          <h1><audio :src="auidoPathFour" controls controlslist="noplaybackrate nodownload" class="audio"
              @play="audioPlay"></audio></h1>
          <div class="bj3">
            <p class="center">
              <span class="hs">春<a id="w1"></a><sup>1</sup>（节选）</span>
@@ -227,7 +229,8 @@
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1>
            <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
            <audio :src="auidoPathFive" controls controlslist="noplaybackrate nodownload" class="audio"
              @play="audioPlay"></audio>
          </h1>

          <div class="bj3">
@@ -302,19 +305,38 @@
          <h3 class="lefth3" id="c009">
            <img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" />
          </h3>
          <p class="text"><span class="hs1">◇</span>放大缩小</p>
          <p class="text ends">
            <span><span class="hs1">◇</span>放大缩小</span>
            <span> <audio :src="auidoPathSex" controls controlslist="noplaybackrate nodownload" class="audio"
            @play="audioPlay"></audio> </span>
          </p> 
          <p class="text">
            请你交替“放大”和“缩小”五官。在“放大”时，想象五官要飞到外太空；在“缩小”时，想象五官全部缩小到了鼻尖上。
          </p>
          <p class="text"><span class="hs1">◇</span>提升苹果肌</p>

          <p class="text ends">
            <span><span class="hs1">◇</span>提升苹果肌</span>
            <span><audio :src="auidoPathSeven" controls controlslist="noplaybackrate nodownload" class="audio"
              @play="audioPlay"></audio> </span>
          </p>
          <p class="text">
            想象你在一个陌生的地方，谁都不认识，突然遇见了好朋友，你很高兴，上前和他/她打招呼。做一做你此时的表情吧。
          </p>
          <p class="text"><span class="hs1">◇</span>微笑说“ang”</p>
          <p class="text ends">
            <span><span class="hs1">◇</span>微笑说“ang”</span>
            <span><audio :src="auidoPathEight" controls controlslist="noplaybackrate nodownload" class="audio"
              @play="audioPlay"></audio></span>
          </p>
          <p class="text">
            请你试一试在提升苹果肌的基础上，发出“ang”的音。声音要尽可能拉长、保持稳定，并向远送。
          </p>
          <p class="text"><span class="hs1">◇</span>向远山喊“阿毛”</p>

          <p class="text ends">
            <span style="text-wrap: nowrap"><span class="hs1">◇</span>向远山喊“阿毛”</span>
            <span style="margin-left: -4%;"><audio :src="auidoPathNine" controls controlslist="noplaybackrate nodownload" class="audio"
              @play="audioPlay"></audio></span>
            
          </p>
          <p class="text">
            想象自己站在一座高山上，好朋友“阿毛”站在对面的高山上，你要如何喊他呢？
          </p>
@@ -395,7 +417,13 @@
      videoPathOne: "",
      auidoPathOne: "",
      auidoPathTwo: "",
      auidoPathThree: "",
      auidoPathFour: "",
      auidoPathFive: "",
      auidoPathSex: "",
      auidoPathSeven: "",
      auidoPathEight: "",
      auidoPathNine: "",
      color:"#fff",
      chapterData: {
      isCollectImg: false,
      isCollectVideo: false,
@@ -521,7 +549,7 @@
          analysisCon: "undefined",
          answer: ['A', 'B'],
          difficulty: 0,
          id: 47772,
          id: 1,
          isCollect: false,
          isComplete: false,
          isRight: null,
@@ -530,22 +558,22 @@
          number: 1,
          options: [
            {
              "img": "",
              "index": "3CA6",
              "txt": "群居",
              "value": "A"
              img: "",
              index: "3CA6",
              txt: "群居",
              value: "A"
            },
            {
              "img": "",
              "index": "73EE",
              "txt": "社会性",
              "value": "B"
              img: "",
              index: "73EE",
              txt: "社会性",
              value: "B"
            },
            {
              "img": "",
              "index": "6AEF",
              "txt": "独居",
              "value": "C"
              img: "",
              index: "6AEF",
              txt: "独居",
              value: "C"
            },
          ],
          optionStyle: "Image",
@@ -563,7 +591,7 @@
          analysisCon: "undefined",
          answer: ['A', 'C'],
          difficulty: 0,
          id: 47773,
          id: 2,
          isCollect: false,
          isComplete: false,
          isRight: null,
@@ -572,22 +600,22 @@
          number: 1,
          options: [
            {
              "img": "",
              "index": "3CA6",
              "txt": "明确的",
              "value": "A"
              img: "",
              index: "3CA6",
              txt: "明确的",
              value: "A"
            },
            {
              "img": "",
              "index": "73EE",
              "txt": "奇怪的",
              "value": "B"
              img: "",
              index: "73EE",
              txt: "奇怪的",
              value: "B"
            },
            {
              "img": "",
              "index": "6AEF",
              "txt": "有序的",
              "value": "C"
              img: "",
              index: "6AEF",
              txt: "有序的",
              value: "C"
            },
          ],
          optionStyle: "Image",
@@ -605,7 +633,7 @@
          analysisCon: "undefined",
          answer: ['A', 'B'],
          difficulty: 0,
          id: 47774,
          id: 3,
          isCollect: false,
          isComplete: false,
          isRight: null,
@@ -614,22 +642,22 @@
          number: 1,
          options: [
            {
              "img": "",
              "index": "3CA6",
              "txt": "团结的",
              "value": "A"
              img: "",
              index: "3CA6",
              txt: "团结的",
              value: "A"
            },
            {
              "img": "",
              "index": "73EE",
              "txt": "优秀的",
              "value": "B"
              img: "",
              index: "73EE",
              txt: "优秀的",
              value: "B"
            },
            {
              "img": "",
              "index": "6AEF",
              "txt": "松散的",
              "value": "C"
              img: "",
              index: "6AEF",
              txt: "松散的",
              value: "C"
            },
          ],
          optionStyle: "Image",
@@ -679,15 +707,33 @@
      this.videoPathOne = await getResourcePath(
        "691cbd2c13198d04afc7800d0f2cafb0"
      );
      // this.auidoPathOne = await getResourcePath(
      //   "2c5f6c69b0f9f7a3c03e473cb8c977f5"
      // );
      this.auidoPathOne = await getResourcePath(
        "a8778fb480281170f6c421b57694d4ef"
      );
      // this.auidoPathTwo = await getResourcePath(
      //   "e93c0fdde08be5a4386c8c863892a287"
      //   "1089676a40bedbe85a12db86199c3615"
      // );
      // this.auidoPathThree = await getResourcePath(
      //   "e93c0fdde08be5a4386c8c863892a287"
      // );
      this.auidoPathThree = await getResourcePath(
        "1089676a40bedbe85a12db86199c3615"
      );
      this.auidoPathFour = await getResourcePath(
        "abbb24d6a0f1de8c08462c3d4b68f575"
      );
      this.auidoPathFive = await getResourcePath(
        "abce7305a3e3c22b686af3a395575411"
      );
      this.auidoPathSex = await getResourcePath(
        "66b8f2c7f953556400367a89e0af8321"
      );
      this.auidoPathSeven = await getResourcePath(
        "27fcd83f77a10ecbf97970863e2653c3"
      ); 
      this.auidoPathEight = await getResourcePath(
        "3d7f52cc80f8ed8994a046b418399116"
      );
      this.auidoPathNine = await getResourcePath(
        "3729175530def1b0baca68e0bd344862"
      );
    },
    setBookQuestion() {
      console.log("保存");
@@ -724,7 +770,12 @@
.w70 {
  width: 78%;
}

.choice{
  border: 1px solid green;
  border-radius: 10px;
  padding: 0 10px;
  box-sizing: border-box;
}
.fw-400 {
  font-weight: 400 !important;
}

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

@@ -4,7 +4,8 @@
      <div v-if="showPageList.indexOf(14) > -1">
        <h1 id="a004">
          <img class="img-0" alt="" src="../../assets/images/dy2.jpg" />
          <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
          <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"
            @play="audioPlay"></audio>
        </h1>
        <div class="bodystyle">
          <div class="bk">
@@ -39,7 +40,7 @@
          </h3>
          <p class="text"><span class="hs1">◇</span>我是小画家</p>
          <p class="text">保持头部不动，试着用眼神画出下面的图案吧！</p>
          <p class="center">
          <p class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/0016-1.jpg" />
          </p>
          <p class="text"><span class="hs1">◇</span>嗅觉大冒险</p>
@@ -194,13 +195,25 @@
        <div class="bodystyle" style="margin-top: 3%">
          <h2 id="b010" class="problem">单元活动任务</h2>
          <h3 class="lefth3" id="c019"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
          <p class="text"><span class="hs1">◇</span>吹纸练习</p>
          <p class="text ends">
            <span><span class="hs1">◇</span>吹纸练习</span>
            <span> <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"
                @play="audioPlay"></audio></span>
          </p>
          <p class="center text" style="margin: 4% 0"><img class="img-e" alt="" src="../../assets/images/0021-1.jpg" />
          </p>
          <p class="text">找一张纸巾，将它按在墙上。移开双手，努力用气息将纸“钉”在墙面上，不要让它向下滑落。</p>
          <p class="text"><span class="hs1">◇</span>吹笔练习</p>
          <p class="text ends">
            <span> <span class="hs1">◇</span>吹笔练习</span>
            <span> <audio :src="auidoPathThree" controls controlslist="noplaybackrate nodownload" class="audio"
                @play="audioPlay"></audio></span>
          </p>
          <p class="text">将一支笔立于桌面，看看你能不能用一口气将它吹倒。</p>
          <p class="text"><span class="hs1">◇</span>吹袋子练习</p>
          <p class="text ends">
            <span><span class="hs1">◇</span>吹袋子练习</span>
            <span> <audio :src="auidoPathFour" controls controlslist="noplaybackrate nodownload" class="audio"
                @play="audioPlay"></audio></span>
          </p>
          <p class="text">将一只塑料袋抛至空中，和你的小伙伴一起轮流吹气，避免塑料袋落地。</p>
        </div>
        <!-- 此处为页脚部分（需要设置页码） -->
@@ -217,11 +230,17 @@
        </h1>
        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
        <div class="bodystyle" style="margin-top: 3%;">
          <p class="text"><span class="hs1">◇</span>吹乒乓球练习</p>
          <p class="text ends">
            <span> <span class="hs1">◇</span>吹乒乓球练习</span>
            <span> <audio :src="auidoPathFive" controls controlslist="noplaybackrate nodownload" class="audio"
                @play="audioPlay"></audio></span>
          </p>
          <p class="text">用气息将桌面上的乒乓球从“起点”运送至“终点”，运送过程中避免乒乓球触碰障碍物。</p>
          <h3 class="lefth3" id="c020" style="margin-top: 7%"><img class="img-gn1" alt=""
              src="../../assets/images/tzyys.jpg" /></h3>
          <p class="text"><span class="hs1">◇</span>请走进剧场观看不同剧种的现场演出，感受戏剧的魅力吧！</p>
          <p class="text">
            <span class="hs1">◇</span>请走进剧场观看不同剧种的现场演出，感受戏剧的魅力吧！
          </p>
          <p class="center text">
            <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
              x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
@@ -250,10 +269,9 @@
<script>
import drag from "@/components/dragQuestion/index.vue"
import { getResourcePath } from "@/assets/methods/resources";
import choice from "@/components/choice/choice.vue"
export default {
  name: "chapterTwo",
  components: { choice,drag },
  components: { drag },
  props: {
    showPageList: {
      type: Array,
@@ -273,6 +291,10 @@
      collectCheck: require("../../assets/images/icon/heart-check.png"),
      videoPathOne: "",
      auidoPathOne: "",
      auidoPathTwo: "",
      auidoPathThree: "",
      auidoPathFour: "",
      auidoPathFive: "",
      chapterData: {
        isCollectImg: false,
        isCollectVideo: false,
@@ -439,9 +461,21 @@
      this.videoPathOne = await getResourcePath(
        "a3c9b55ac8227e4c885384ff2fc6c0e7"
      );
      // this.auidoPathOne = await getResourcePath(
      //   "2c5f6c69b0f9f7a3c03e473cb8c977f5"
      // );
      this.auidoPathOne = await getResourcePath(
        "0c147c73d67672d1538f76fa22793ff1"
      );
      this.auidoPathTwo = await getResourcePath(
        "daf62713e056d875baa37283c6190a46"
      );
      this.auidoPathThree = await getResourcePath(
        "126edb6a476971840e4c6abf0a3e9da5"
      );
      this.auidoPathFour = await getResourcePath(
        "2485785e9a21a78bcfc58db132537ffd"
      );
      this.auidoPathFive = await getResourcePath(
        "a37bb621b2591e3666e94d1a3bc23bc0"
      );
    },
    setBookQuestion() {
      console.log("保存");
@@ -500,6 +534,7 @@
  height: 100%;
  background-color: red;
}

.drag-text {
  margin: 0 4%;
  font-family: "STKaiti";

 src/books/artAndDrama/view/components/index.vue

@@ -156,7 +156,7 @@

    // 测试页面跳转
    setTimeout(() => {
    this.gotoPage(3,16);
     this.gotoPage(2,6);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",

 src/components/choice/choice.vue

@@ -1,99 +1,91 @@
<template>
  <div class="choice-question">
    <!-- 题目内容及选项部分 -->
    <div style="display: flex; justify-content: space-around;">
    <div class="question-content">
        <p class="question-t"> <span>
            <span class="hs1">◇</span>请选出你认为正确的答案。</span><span>第{{ currentQuestion.id }}题 (共{{ questions.length}}题)</span></p>
      <p>{{ currentQuestion.stem.stemTxt }}</p>
      <div class="all-options">
        <span
          v-for="(option, index) in currentQuestion.options"
          :key="index"
          class="option"
          :class="{ selected: selectedOptions.includes(index) }"
          @click="!isSubmitted && toggleOption(index)"
        >
          <svg
            v-if="selectedOptions.includes(index)"
            t="1718282810750"
            class="icon"
            viewBox="0 0 1355 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="87382"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="170"
            height="170"
          >
          <span v-for="(option, index) in currentQuestion.options" :key="index" class="option"
            :class="{ selected: selectedOptions.includes(index) }" @click="!isSubmitted && toggleOption(index)">
            <!-- 空心云朵 -->
            <span>
              <svg v-if="selectedOptions.includes(index)" t="1718282810750" class="icon" viewBox="0 0 1355 1024"
                version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="87382" xmlns:xlink="http://www.w3.org/1999/xlink"
                width="170" height="170">
            <path
              d="M1299.772238 471.021724a366.045786 366.045786 0 0 0-97.270943-99.189942 379.484778 379.484778 0 0 0-29.436982-123.509928 398.682766 398.682766 0 0 0-89.591948-127.986925 405.722762 405.722762 0 0 0-133.107922-91.511946A409.56176 409.56176 0 0 0 794.859534 0.026 401.242765 401.242765 0 0 0 568.319667 67.85896a411.481759 411.481759 0 0 0-97.909943 91.511947 261.735847 261.735847 0 0 0-63.994962-7.679996 247.656855 247.656855 0 0 0-176.623897 71.033958 245.736856 245.736856 0 0 0-72.312957 202.860882 325.729809 325.729809 0 0 0-84.471951 72.953957A309.731819 309.731819 0 0 0 0.053 703.959588a311.010818 311.010818 0 0 0 97.269943 229.099865 323.80981 323.80981 0 0 0 231.659864 90.871947h660.418613a360.926789 360.926789 0 0 0 255.97585-104.949938 360.926789 360.926789 0 0 0 81.272953-116.469932 355.166792 355.166792 0 0 0 27.516984-138.866919 345.567798 345.567798 0 0 0-54.394969-192.622887z"
              fill="rgb(245, 130, 32)"
              :style="{ fill: primaryColor }"
              p-id="87383"
            ></path>
                  fill="rgb(245, 130, 32)" :style="{ fill: primaryColor }" p-id="87383"></path>
          </svg>
          <svg
            v-else
            t="1718282816195"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="87529"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="170"
            height="170"
          >
              <!-- 实心云朵 -->
              <svg v-else t="1718282816195" class="icon" viewBox="0 0 1024 1024" version="1.1"
                xmlns="http://www.w3.org/2000/svg" p-id="87529" xmlns:xlink="http://www.w3.org/1999/xlink" width="170"
                height="170">
            <path
              d="M829.248 420.576C815.264 274.56 693.696 160 544 160c-115.808 0-214.944 68.736-260.672 167.36A142.72 142.72 0 0 0 240.032 320a144.032 144.032 0 0 0-144 144c0 15.808 3.168 30.752 7.872 44.928C42.048 544.992 0.032 611.168 0.032 687.936a208 208 0 0 0 208 208V896H784v-0.064c132.576 0 240-107.424 240-240 0-116.992-83.872-214.176-194.752-235.36zM784 831.936V832H208.032a144.256 144.256 0 0 1-144-144.064c0-51.2 26.976-97.44 72.128-123.744 43.872-25.184 46.88-30.176 28.48-75.424a78.56 78.56 0 0 1-4.608-24.736c0-44.128 35.872-80 80-80 0 0 20.992-1.504 43.296 7.36 36.704 14.624 40.704 0.64 58.048-37.088C378.08 275.168 457.6 224 544 224c115.2 0 210.432 87.136 221.568 202.688 3.936 45.824 3.936 45.824 51.68 56.736A175.872 175.872 0 0 1 960 655.936c0 97.056-78.944 176-176 176z"
              fill="rgb(245, 130, 32)"
              :style="{ fill: primaryColor }"
              p-id="87530"
            ></path>
                  fill="rgb(245, 130, 32)" :style="{ fill: primaryColor }" p-id="87530"></path>
          </svg>
          <span class="option-text"  :style="{color:formatAnswer(getSelectedOptions()).indexOf(option.value ) > -1 ? '#fff' : '#000'}">{{ option.value }}、{{ option.txt }}</span>
        </span>
      </div>
    </div>
    <!-- 答案部分 -->
    <div v-if="showResult">
      <div style="display: flex; align-items: center; flex-direction: column">
        <img
          class="face"
          :src="choiceData.isCorrect ? correctImg : incorrectImg"
          alt="Result"
        />
            <span class="symbol"> <!-- 对号 -->
              <svg v-if="showResult && handleQuestion(option.value)" t="1716986419862" class="icon1"
                viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
                xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="10">
                <path
                  d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                  fill="#1AFA29" p-id="18768"></path>
              </svg>
              <!-- 错号 -->
              <svg v-if="showResult && handleQuestion(option.value) == false" t="1716987085767" class="icon2"
                viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745"
                xmlns:xlink="http://www.w3.org/1999/xlink" width="10" height="10">
                <path
                  d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                  fill="#d81e06" p-id="25746"></path>
              </svg>
            </span>
            <!-- 选项 -->
            <span class="option-text"
              :style="{ color: formatAnswer(getSelectedOptions()).indexOf(option.value) > -1 ? '#fff' : '#000' }">
              {{ option.value }}、{{ option.txt }}
            </span>
          </span>
          <div v-if="showResult" class="smiling-face">
            <div style="display: flex; align-items: center; flex-direction: column; width: 90px;">
              <img class="face" :src="choiceData.isCorrect ? correctImg : incorrectImg" alt="Result" />
        <div>
          <p class="center" v-if="choiceData.isCorrect">恭喜您：答对了</p>
          <p class="center" v-else>答错了，加油哦</p>
                <p class="center face-text" style="color: green;" v-if="choiceData.isCorrect">恭喜您：答对了</p>
                <p class="center face-text" v-else :class="{
                  'correct-answer': isCorrectAnswer(),
                  'incorrect-answer': !isCorrectAnswer(),
                }">答错了，加油哦</p>
        </div>
      </div>
          </div>
        </div>
      </div>

    </div>
    <div v-if="showResult">
      <div class="key">
        <p class="right-key">
          正确答案：{{ formatAnswer(currentQuestion.answer) }}
        </p>
        <p
          :class="{
        <p :class="{
            'correct-answer': isCorrectAnswer(),
            'incorrect-answer': !isCorrectAnswer(),
          }"
        >
        }">
          您的答案：{{ formatAnswer(getSelectedOptions()) }}
        </p>
      </div>
    </div>
    <!-- 答案部分 -->
    <!-- 题目按钮部分 -->
    <div class="btn-button">
      <button
        v-if="currentIndex > 0"
        @click="prevQuestion"
        :style="mergedStyles"
      >
      <button v-if="currentIndex > 0" @click="prevQuestion" :style="mergedStyles">
        上一题
      </button>
      <button
        v-if="currentIndex < questions.length - 1"
        @click="nextQuestion"
        :style="mergedStyles"
      >
      <button v-if="currentIndex < questions.length - 1" @click="nextQuestion" :style="mergedStyles">
        下一题
      </button>
      <button @click="resetQuestion" :style="mergedStyles">重做</button>
@@ -312,7 +304,7 @@
      return this.selectedOptions.map((index) => {
        const selectedOption = this.currentQuestion.options[index];
        // 返回选项的文本（这里假设每个选项对象有一个 'value' 属性）
        return selectedOption.value;
        return selectedOption.value.replace(/\s/g, ',');
      });
    },
    formatAnswer(answer) {
@@ -343,7 +335,6 @@
    },
    submitQuestion() {
      const isCorrectAnswer = this.isCorrectAnswer();
      console.log(isCorrectAnswer);
      this.isCorrect = this.isCorrectAnswer();
      this.showResult = true;
      this.choiceData.isCorrect = this.isCorrect;
@@ -354,6 +345,7 @@
        // 播放“答错了，加油哦”的音频
      }
      this.isSubmitted = true;
      // this.handleQuestion(0);
    },
    isCorrectAnswer() {
      // 检查答案是否正确
@@ -406,41 +398,115 @@
        return selectedValues.every((value) => correctSet.has(value));
      }
    },
    handleQuestion(data) {
      if (!this.showResult) return null;
      let flag = null
      const item = this.questions[this.currentIndex]
      let select = this.getSelectedOptions()
      select = Array.from(select)
      if (select.indexOf(data) > -1) {
        flag = item.answer.indexOf(data) > -1 ? true : false
      }
      // item.answer.some(citem =>{
      //   console.log(select.indexOf(citem)>-1 ? true: false)
      //   return select.indexOf(citem)>-1 ? true: false 
      // })
      // console.log(select.indexOf(data)>-1 ? true: false )
      // return select.indexOf(data)>-1 ? true: false 
      return flag
    }
  },
};
</script>

<style lang="less" scoped>
.all-options {
.question-t {
  display: flex;
  justify-content: space-between;
  margin-left: 10%;
  width: 100%;
}

.all-options {
  position: relative;
  display: flex;
  flex-direction: row;
  min-height: 250px;
  width: min-content;
}

/* 当屏幕宽度最大为600px时应用此样式 */
@media screen and (max-width: 420px) {
  .all-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.option {
  position: relative;
  /* 设置为相对定位容器 */
  display: flex;
    flex-direction: row;
  flex-wrap: wrap;
  /* 使用 Flexbox 以便更好地控制布局和对齐 */
  align-items: center;
  /* 垂直居中对齐 */
    height: min-content;
  }
}

.option {
  position: relative;
  display: flex;
  flex-direction: row;
  //flex-wrap: nowrap;
  width: 170px;
  height: 250px;
  height: min-content;
}
// 这里是用来选中循环出来的某个盒子 2就代表第二个盒子
.option:nth-child(2) {
  //margin-top: 100px;
  align-self: flex-end;
  /* 使该元素在垂直方向上居下 */
}

.icon {
  width: 80%;
  width: 130px;
  height: auto;
  min-width: 120px;
}

.icon1 {
  position: absolute;
  z-index: 1;
  left: 60%;
  top: 3%;
  width: 50%;
  height: auto;
  min-width: 50px;
}

.icon2 {
  position: absolute;
  z-index: 1;
  left: 68%;
  top: 3%;
  width:30%;
  height: auto;
  min-width: 30px;
}

.option-text {
  position: absolute;
  z-index: 1;
  left: 10%;
  top: 52%;
  left: 14%;
  top: 47%;
}

.option-text:nth-child(2) {
  top: 50%;
}

.option-text.selected {
  width: 180px;
  /* 当被选中时的样式 */
  color: white;
}
@@ -451,7 +517,7 @@

.btn-button {
  width: 70%;
  margin: 10px auto 0 auto;
  margin: 10px auto 10px auto;
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
@@ -501,8 +567,19 @@
  /* 错误答案的字体颜色 */
}

.smiling-face{
  position: absolute;
  z-index: 1;
  bottom: 2% ;
  right: 0;
}
.face {
  width: 15%;
  width: 80%;
  height: auto;
}

.face-text {

  text-wrap: wrap;
}
</style>