优化

unknown

2024-06-17 304689614daa96595aeeeed8e46e5dfa992ef2df

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

@@ -3,9 +3,8 @@
    <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>
          <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
        </h1>
        <div class="bodystyle">
          <div class="bk">
@@ -14,14 +13,12 @@
                <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>
@@ -30,11 +27,11 @@
    </div>
    <div class="page-box" page="5">
      <div v-if="showPageList.indexOf(5) > -1">
        <h1>
        <h1 style="margin-bottom: 0%">
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
        <div class="bodystyle">
          <img src="../../assets/images/page5.png" alt="" />
          <h2 id="b001">第一课　齐心协力</h2>
          <h3 class="lefth3" id="c001">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
@@ -46,11 +43,13 @@
            <span class="hs1">◇</span>大声朗读下面的句子，连一连不同逻辑重音强调的意思。
          </p>
          <h1>
            <audio :src="auidoPathTwo" class="audio" controls></audio>
            <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
          </h1>
          <p>小提示：加点的文字为本句话中的逻辑重音，在朗读发音时请重读。</p>

          <!-- 连线题 -->
          <matching :rawData="rawData" :item="question"></matching>
          <matching :rawData="rawData" :item="question" class="macthing" :primaryColor="'transparent'"></matching>
          <p>小提示：加点的文字为本句话中的逻辑重音，在朗读发音时请重读。</p>

        </div>
        <p><br /></p>
        <!-- 此次为页脚部分（需要设置页码） -->
@@ -100,11 +99,11 @@
    </div>
    <div class="page-box" page="7">
      <div v-if="showPageList.indexOf(7) > -1">
        <h1>
        <h1 style="margin-bottom: 0%">
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
        <div class="bodystyle">
          <img src="../../assets/images/page5.png" alt="" />
          <h2 id="b002">第二课　津津乐道</h2>
          <h3 class="lefth3" id="c003">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
@@ -112,7 +111,7 @@
          <p>
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1><audio :src="auidoPathThree" class="audio" controls></audio></h1>
          <h1><audio :src="auidoPathThree" controls class="audio" @play="audioPlay"></audio></h1>

          <div class="bj3">
            <p class="center">
@@ -150,18 +149,20 @@
    <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" />
          <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <img src="../../assets/images/page5.png" alt="" />
          <h2 id="b003">第三课　内心的声音</h2>
          <h1 class="lefth3 openImgBox" id="c005">
            <img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" />
          </h1>
          <h3 class="lefth3" id="c006">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p>
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1><audio :src="auidoPathTwo" class="audio" controls></audio></h1>
          <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>
          <div class="bj3">
            <p class="center">
              <span class="hs">春<a id="w1"></a><sup>1</sup>（节选）</span>
@@ -176,7 +177,7 @@
                class="un1">轻悄悄</span>的，草<span class="un1">软绵绵</span>的。
            </p>
          </div>
          <hr />
          <hr style="margin-left: 0; width: 20%;" />
          <p class="note">
            <a id="m1">1</a>
            朱自清：《春》，见温儒敏等：《义务教育教科书 语文
@@ -192,11 +193,11 @@
    </div>
    <div class="page-box" page="9">
      <div v-if="showPageList.indexOf(9) > -1">
        <h1>
        <h1 style="margin-bottom: 0%;">
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
        <div class="bodystyle">
          <img src="../../assets/images/page5.png" alt="" />
          <h3 class="lefth3" id="c006">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
@@ -208,10 +209,10 @@
              class="hs1">◇</span>生活中，我们总会遇到各种各样的诱惑。面对诱惑时，我们的内心常常会有两个不同的声音出现：一个声音要求我们严于律己，另一个声音要求我们随心所欲。请你分析一下，当蚂蚁队长面对掉落的奶酪渣的诱惑时，他内心的两个声音会说些什么呢？
          </p>
          <p>正义队长：“
            <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" />”
            <input v-model="questionData.warnUp.one" class="input-bottom-border input-w-66"  @change="setBookQuestion" />。”
          </p>
          <p>黑暗队长：“ <input v-model="questionData.warnUp.two" class="input-bottom-border fz-18"
              @change="setBookQuestion" />”</p>
          <p>黑暗队长：“ <input v-model="questionData.warnUp.two" class="input-bottom-border input-w-66" @change="setBookQuestion" />。”
          </p>
        </div>
      </div>
      <!-- 此次为页脚部分（需要设置页码） -->
@@ -234,7 +235,7 @@
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1>
            <audio :src="auidoPathTwo" class="audio" controls></audio>
            <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
          </h1>

          <div class="bj3">
@@ -263,7 +264,7 @@
              v-model="questionData.warnUp.six" class="input-bottom-border fz-18" style=" width: 10%;"
              @change="setBookQuestion" />（身体感觉）啊！
          </p>
          <hr />
          <hr style="margin-left: 0; width: 20%;" />
          <p class="note">
            <a id="m1">1</a>
            朱自清：《春》，见温儒敏等：《义务教育教科书 语文
@@ -282,8 +283,9 @@
        <h1>
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
        <div class="bodystyle">
          <img src="../../assets/images/page5.png" alt="" />

          <p class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/1-5.gif" />
          </p>
@@ -337,6 +339,7 @@
        <h1>
          <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
        <div class="bodystyle">
          <h3 class="lefth3" id="c010">
            <img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
@@ -373,6 +376,10 @@
    showPageList: {
      type: Array,
    },
    primaryColor: {
      type: String,
      default: "red"
    }
  },
  //在这里对调用的方法进行挂载
  mounted() {
@@ -385,9 +392,6 @@
  data() {
    return {
      videoPathOne: "",
      videoPathTwo: "",
      videoPathThree: "",
      videoPathFour: "",
      auidoPathOne: "",
      auidoPathTwo: "",
      auidoPathThree: "",
@@ -530,21 +534,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"
@@ -563,6 +557,9 @@
        JSON.stringify(this.questionData)
      );
    },
    audioPlay(e) {
      this.$emit('closeAudio', e.srcElement.currentSrc)
    }
  },
};
</script>
@@ -591,4 +588,9 @@
  height: 100%;
  background-color: red;
}

.macthing {
  background-color: rgb(188, 220, 164);
  padding: 5% 5%;
}
</style>