音频小窗

闫增涛

2024-06-06 fe07e8a02cb41daac4d34562474b56dec5ab3efd

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

@@ -505,7 +505,7 @@
          <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 +514,19 @@
                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 +735,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">
@@ -830,11 +839,18 @@
                >
              </p>
            </div>
            <p>get selected as ...被选为……</p>
            <p>(a) variety of ...各种各样的……</p>
            <p>come across 偶遇；碰到</p>
            <p>be curious about ...对……感到好奇</p>
            <p>along the way 沿途</p>
            <ul class="w100 fl fw-wr">
              <li>
                <p>get selected as ...被选为……</p>
                <p>(a) variety of ...各种各样的……</p>
                <p>come across 偶遇；碰到</p>
              </li>
              <li>
                <p>be curious about ...对……感到好奇</p>
                <p>along the way 沿途</p>
              </li>
            </ul>

            <div class="bj-note">
              <p class="m0"><b class="fz-18">Notes:</b></p>
              <p class="m0">
@@ -1664,7 +1680,7 @@
            </div>
            <div class="resource-primary-border" style="padding: 8px">
              <div class="banshi openImgBox">
                <div class="swiper-container swiper-ppt">
                <div class="swiper-container swiper_ppt">
                  <div class="swiper-wrapper">
                    <div class="swiper-slide">
                      <div class="imgBox" style="width: 100%; height: 100%">
@@ -1804,9 +1820,9 @@
                  </div>
                  <div class="swiper-button-next"></div>
                  <div class="swiper-button-prev"></div>
                   <!-- 显示当前页和总页数的元素 -->  
                  <div class="pagination-info"></div> 
                  <div class="pageBox"></div>
                </div>
                <!-- 显示当前页和总页数的元素 -->
              </div>
            </div>
          </div>
@@ -2297,14 +2313,15 @@
</template>

<script>
import getResourcePath from "@/assets/methods/resources";

import matching from "@/components/matching/matching.vue";
import { getResourcePath } from "@/assets/methods/resources";
export default {
  name: "chapter-one",
  props:{
    showPageList:{
      type:Array
    }
  components:{matching},
  props: {
    showPageList: {
      type: Array,
    },
  },
  data() {
    return {
@@ -2316,6 +2333,121 @@
      showAnswerFive: false,
      showImg: false,
      showQuestionAnswer: false,
      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("@/books/English/assets/images/matching-one.png")
      },
      questionData: {
        warnUp: {
          one: {
@@ -2367,7 +2499,7 @@
        },
      },
      testData: {
        check:[],
        check: [],
        tx: {
          one: "",
          two: "",
@@ -2480,9 +2612,9 @@
      localStorage.setItem("english-testOne", JSON.stringify(this.testData));
    },
    changeTestData() {
      localStorage.removeItem("english-testOne")
      localStorage.removeItem("english-testOne");
      this.testData = {
        check:[],
        check: [],
        tx: {
          one: "",
          two: "",
@@ -2524,7 +2656,7 @@
          four: "",
          five: "",
        },
      }
      };
    },
    setBookQuestion() {
      localStorage.setItem(
@@ -2532,14 +2664,14 @@
        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"
      );
    },
@@ -2594,11 +2726,11 @@
      this.dropdownData = dropdownDatas;
    },
    changeDropdown() {
      localStorage.removeItem("english-dropdown-one")
      for(let key in this.dropdownData) {
        const item =  this.dropdownData[key]
        item.value = ""
        item.isRight = null
      localStorage.removeItem("english-dropdown-one");
      for (let key in this.dropdownData) {
        const item = this.dropdownData[key];
        item.value = "";
        item.isRight = null;
      }
    },
    setDropdownData() {
@@ -2609,6 +2741,9 @@
    },
    saveData() {
      console.log(this.testData);
    },
    audioPlay() {
      this.$emit("closeMiniAudio")
    }
  },
};
@@ -2646,7 +2781,7 @@
  font-size: 14px;
  border-width: 1px;
  min-width: 80px;
  min-height: 28px;
  height: 30px;
  background-color: #fff;
  &:hover {
    background-color: #0bab87;
@@ -2654,12 +2789,27 @@
  }
}
.banshi {
  position: relative;
  margin-top: 40px;
  width: 100%;
  height: 350px;
  margin: 0 auto;
}
.pageBox {
  z-index: 9999999999;
  color: #999;
  position: absolute;
  left: 48%;
  bottom: 0px;
}
select {
  height: 24px;
}
.mini-audio {
  width: 200px;
  height: 200px;
  position: fixed;
  right:0;
  background-color: red;
}
</style>