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

YM

2024-06-13 a954bafb1bb4a70b2baf768230f2c50fd5c7163c

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

@@ -505,7 +505,12 @@
          <div class="bodystyle">
            <h3 id="c002" class="fl al-cn">
              <span class="bjh3">Listening</span>
              <audio :src="resource.listenOne" controls></audio>
              <audio
                :src="resource.listenOne"
                controls
                class="audio"
                @play="audioPlay"
              ></audio>
            </h3>
            <p>
              <b
@@ -514,12 +519,24 @@
                corresponding descriptions.</b
              >
            </p>
            <p class="center">
            <!-- <p class="center">
              <img class="img-0" alt="" src="../../assets/images/0013-3.jpg" />
            </p>
            </p> -->
            <div>
              <ul class="fl ju-bt">
                <li>Speakers　Chinese Cultural Symbols</li>
                <li style="width: 40%; text-align: center">Descriptions</li>
              </ul>
              <matching :rawData="rawData" :item="question"></matching>
            </div>
            <h3 id="c003" class="fl al-cn">
              <span class="bjh3">Reading</span>
              <audio :src="resource.readingOne" controls></audio>
              <audio
                :src="resource.readingOne"
                controls
                class="audio"
                @play="audioPlay"
              ></audio>
            </h3>
            <p>
              1.How was Chinese culture introduced to the world in ancient
@@ -728,6 +745,8 @@
              :src="resource.readingTwo"
              controls
              style="margin-left: 10px"
              class="audio"
              @play="audioPlay"
            ></audio>
            <p>wonderland /ˈwʌndəlænd/ <i>n.</i> 有许多奇妙事物的地方</p>
            <div class="bkbj">
@@ -841,8 +860,7 @@
                <p>along the way 沿途</p>
              </li>
            </ul>
            
            

            <div class="bj-note">
              <p class="m0"><b class="fz-18">Notes:</b></p>
              <p class="m0">
@@ -1812,9 +1830,9 @@
                  </div>
                  <div class="swiper-button-next"></div>
                  <div class="swiper-button-prev"></div>
                  <div class="pageBox"></div>
                </div>
                <!-- 显示当前页和总页数的元素 -->
                <div class="pageBox">{{ pageNum }} / {{ total }}</div>
              </div>
            </div>
          </div>
@@ -2274,14 +2292,14 @@
            </div>
            <div class="w100 fl ju-cn">
              <div class="fl ju-ev mt-40" style="width: 80%">
                <button @click="setDropdownData" class="btn-border btn-w">
                  保存
                </button>
                <button
                  class="btn-border btn-w"
                  @click="handleDropdown('judge')"
                >
                  提交
                </button>
                <button @click="setDropdownData" class="btn-border btn-w">
                  保存
                </button>
                <button class="btn-border btn-w" @click="changeDropdown">
                  重做
@@ -2305,32 +2323,16 @@
</template>

<script>
import getResourcePath from "@/assets/methods/resources";
import Swiper from "swiper/bundle";
import "swiper/swiper-bundle.css";
import matching from "@/components/matching/matching.vue";
import { getResourcePath } from "@/assets/methods/resources";
export default {
  name: "chapter-one",
  components: { matching },
  props: {
    showPageList: {
      type: Array,
    },
    pageNum:{
      type:String
    },
    total:{
      type:String
    }
  },
  // watch: {
  //   showPageList: {
  //     handler(newVal, oldVal) {
  //       if (newVal.indexOf(14) > -1) {
  //         console.log("页码", newVal, oldVal);
  //         this.setSwiper();
  //       }
  //     },
  //   },
  // },
  data() {
    return {
      imgThirteen: require("../../assets/images/grammar.jpg"),
@@ -2341,8 +2343,124 @@
      showAnswerFive: false,
      showImg: false,
      showQuestionAnswer: false,
      // pageNum: "1",
      // total: "27",
      rawData: {
        left: [
          {
            oldId: "FB34",
            txt: "Martin　　　　Silk",
          },
          {
            oldId: "64D6",
            txt: "Jessica　　The Great Wall",
          },
          {
            oldId: "2ED4",
            txt: "Soren　　Chinese Food",
          },
          {
            oldId: "44DE",
            txt: "Chinese　　　　Tea",
          },
        ],
        right: [
          {
            oldId: "64D6",
            txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
          },
          {
            oldId: "FB34",
            txt: "It was first discovered and drank in China and my favorileLongjing tca is praduced near the West Lake in Hangzhou.",
          },
          {
            oldId: "2ED4",
            txt: "The clothing material is quite popular among Roman women inancient times.",
          },
          {
            oldId: "44DE",
            txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
          },
        ],
      },
      value: [],
      question: {
        KnowledgePoint: "123",
        analysis: "123",
        answer: [
          {
            id: "FB34",
            linkValue:
              "The clothing material is quite popular among Roman women inancient times.",
            value: "Silk",
          },
          {
            id: "64D6",
            linkValue:
              "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
            value: "The Great Wall",
          },
          {
            id: "2ED4",
            linkValue:
              "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
            value: "Chinese Food",
          },
          {
            id: "44DE",
            linkValue:
              "It was first discovered and drank in China and my favorileLongjing tca is praduced near the West Lake in Hangzhou.",
            value: "Chinese Tea",
          },
        ],
        optionStyle: undefined,
        id: 489306,
        options: {
          linkValues: [
            {
              oldId: "64D6",
              txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
            },
            {
              oldId: "44DE",
              txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.",
            },
            {
              oldId: "FB34",
              txt: "The clothing material is quite popular among Roman women inancient times.",
            },
            {
              oldId: "2ED4",
              txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
            },
          ],
          values: [
            {
              oldId: "FB34",
              txt: "Martin  Silk",
            },
            {
              oldId: "64D6",
              txt: "The Great Wall",
            },
            {
              oldId: "2ED4",
              txt: "Chinese Food",
            },
            {
              oldId: "44DE",
              txt: "Chinese Tea",
            },
          ],
        },
        questionType: "matching",
        stem: {
          stemTxt: "按顺序连线",
        },
        stemStyle: undefined,
        titleDescription: "1",
        userChoise: [],
        value: [],
        answerImg: require("../../assets/images/matching-one.png"),
      },
      questionData: {
        warnUp: {
          one: {
@@ -2554,19 +2672,20 @@
      };
    },
    setBookQuestion() {
      console.log('保存');
      localStorage.setItem(
        "english-book-question-one",
        JSON.stringify(this.questionData)
      );
    },
    getPath() {
      this.resource.listenOne = getResourcePath(
    async getPath() {
      this.resource.listenOne = await getResourcePath(
        "422139A2EF66EA888C5ED1D550AE23E0"
      );
      this.resource.readingOne = getResourcePath(
      this.resource.readingOne = await getResourcePath(
        "3F442B682D84C8AB06C800B29D734920"
      );
      this.resource.readingTwo = getResourcePath(
      this.resource.readingTwo = await getResourcePath(
        "E8719EC88026BCFB11D292AA999F6D3D"
      );
    },
@@ -2637,47 +2756,8 @@
    saveData() {
      console.log(this.testData);
    },
    setSwiper() {
      const that = this;
      const dom = document.querySelector(".swiper_ppt");
      console.log("dom", dom);
      new Swiper(dom, {
        loop: false, // 无缝
        autoplay: false,
        paginationClickable: true,
        slidesPerView: 1, // 一组三个
        spaceBetween: 30, // 间隔
        // 如果需要前进后退按钮
        navigation: {
          nextEl: (this.container ? this.container : document).querySelector(
            ".swiper-button-next"
          ),
          prevEl: (this.container ? this.container : document).querySelector(
            ".swiper-button-prev"
          ),
        },
        // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
        observer: true,
        observeParents: true,
        on: {
          slideChange: function (value) {
            console.log("ppt页码", value);
            let currentPage = value.activeIndex + 1; // 获取当前页（从1开始计数）
            let totalPages = value.slides.length; // 获取总页数
            // this.changePage(currentPage)
            that.pageNum = currentPage;
            this.total = totalPages;
            console.log(this.pageNum, this.total);
          },
          // slideChangeTran sitionStart:function (value) {
          //   // 每当滑块改变时触发，更新当前页和总页数的显示
          //   let currentPage = value.activeIndex + 1; // 获取当前页（从1开始计数）
          //   let totalPages = value.slides.length; // 获取总页数
          //   var paginationInfoEl = document.querySelector('.pagination-info');
          //   paginationInfoEl.textContent = currentPage + '/' + totalPages;
          // }
        },
      });
    audioPlay() {
      this.$emit("closeMiniAudio");
    },
  },
};
@@ -2739,4 +2819,11 @@
select {
  height: 24px;
}
.mini-audio {
  width: 200px;
  height: 200px;
  position: fixed;
  right: 0;
  background-color: red;
}
</style>