艺术与舞蹈动作库替换

闫增涛

2024-06-14 25604419cdad5ad226c42feca48c5d817eadbe2f

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

@@ -1,9 +1,8 @@
<template>
  <div class="chapter" num="2">
    <div class="page-box" page="4" style="min-height: auto">
    <div class="page-box" page="4">
      <div v-if="showPageList.indexOf(4) > -1">
        <h1 id="a004">
          <!-- 这里的动图有问题，没有背景图片 -->
          <img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
          <audio :src="auidoPathOne" class="audio" controls></audio>
        </h1>
@@ -14,21 +13,19 @@
                <img class="img-gn" alt="" src="../../assets/images/dydd.jpg" />
              </p>
            </div>

            <p class="block">
              在故事《一块奶酪》中，蚂蚁家庭的每一位成员都为了共同的目标分工协作、努力奋斗，在面对诱惑和挑战时更是严于律己、遵守团队纪律。本单元，让我们读一读《一块奶酪》的故事，学习蚂蚁们的优秀品格吧！
            </p>
          </div>
        </div>
        <p><br /></p>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-right">1</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="5" style="min-height: auto">
    </div> 
    <div class="page-box" page="5">
      <div v-if="showPageList.indexOf(5) > -1">
        <h1>
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
@@ -49,8 +46,8 @@
            <audio :src="auidoPathTwo" class="audio" controls></audio>
          </h1>
          <p>小提示：加点的文字为本句话中的逻辑重音，在朗读发音时请重读。</p>
          <!-- 连线题 -->
          <matching :rawData="rawData" :item="question"></matching>
      <!-- 连线题 -->
          <matching :rawData="rawData" :item="question" class="macthing" :primaryColor="'transparent'"></matching>
        </div>
        <p><br /></p>
        <!-- 此次为页脚部分（需要设置页码） -->
@@ -60,7 +57,7 @@
        </div>
      </div>
    </div>
    <div class="page-box" page="6" style="min-height: auto">
    <div class="page-box" page="6">
      <div v-if="showPageList.indexOf(6) > -1">
        <h1>
          <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
@@ -98,7 +95,7 @@
        </div>
      </div>
    </div>
    <div class="page-box" page="7" style="min-height: auto">
    <div class="page-box" page="7">
      <div v-if="showPageList.indexOf(7) > -1">
        <h1>
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
@@ -147,7 +144,7 @@
        </div>
      </div>
    </div>
    <div class="page-box" page="8" style="min-height: auto">
    <div class="page-box" page="8">
      <div v-if="showPageList.indexOf(8) > -1">
        <h1>
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
@@ -190,7 +187,7 @@
        <div class="page-footer-number-right">5</div>
      </div>
    </div>
    <div class="page-box" page="9" style="min-height: auto">
    <div class="page-box" page="9">
      <div v-if="showPageList.indexOf(9) > -1">
        <h1>
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
@@ -220,7 +217,7 @@
        <div class="page-footer-number-left">6</div>
      </div>
    </div>
    <div class="page-box" page="10" style="min-height: auto">
    <div class="page-box" page="10">
      <div v-if="showPageList.indexOf(10) > -1">
        <h1>
          <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
@@ -277,7 +274,7 @@
        <div class="page-footer-number-right">7</div>
      </div>
    </div>
    <div class="page-box" page="11" style="min-height: auto">
    <div class="page-box" page="11">
      <div v-if="showPageList.indexOf(11) > -1">
        <h1>
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
@@ -298,7 +295,7 @@
        <div class="page-footer-number-left">8</div>
      </div>
    </div>
    <div class="page-box" page="12" style="min-height: auto">
    <div class="page-box" page="12">
      <div v-if="showPageList.indexOf(12) > -1">
        <h1>
          <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
@@ -332,7 +329,7 @@
        <div class="page-footer-number-right">9</div>
      </div>
    </div>
    <div class="page-box" page="13" style="min-height: auto">
    <div class="page-box" page="13">
      <div v-if="showPageList.indexOf(13) > -1">
        <h1>
          <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
@@ -350,8 +347,8 @@
              x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
              controlslist="nodownload" class="w100"
              style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
          <h2>视频: 我们是一家人</h2>
          </p>
            <h2>视频: 我们是一家人</h2>
           </p>
        </div>
      </div>
      <!-- 此次为页脚部分（需要设置页码） -->
@@ -373,6 +370,10 @@
    showPageList: {
      type: Array,
    },
    primaryColor:{
      type:String,
      default:"red"
    }
  },
  //在这里对调用的方法进行挂载
  mounted() {
@@ -385,9 +386,6 @@
  data() {
    return {
      videoPathOne: "",
      videoPathTwo: "",
      videoPathThree: "",
      videoPathFour: "",
      auidoPathOne: "",
      auidoPathTwo: "",
      auidoPathThree: "",
@@ -530,21 +528,11 @@
      },
    };
  },

  methods: {
    //视频和音频的MD5地址
    async getVidoePath() {
      this.videoPathOne = await getResourcePath(
        "691cbd2c13198d04afc7800d0f2cafb0"
      );
      this.videoPathTwo = await getResourcePath(
        "a3c9b55ac8227e4c885384ff2fc6c0e7"
      );
      this.videoPathThree = await getResourcePath(
        "dd44a1e31b4304f50d10b2481a148411"
      );
      this.videoPathFour = await getResourcePath(
        "09de7704eeaaf3a210b8c6af0a94d545"
      );
      // this.auidoPathOne = await getResourcePath(
      //   "2c5f6c69b0f9f7a3c03e473cb8c977f5"
@@ -591,4 +579,8 @@
  height: 100%;
  background-color: red;
}
.macthing{
  background-color: rgb(188, 220, 164);
  padding: 5% 5%;
}
</style>