user1
2024-06-14 88c89a86c370f9824e975d8958bfd057013aa9fd
艺术戏剧(优化)
4个文件已修改
3个文件已添加
1691 ■■■■■ 已修改文件
src/books/artAndDrama/assets/main.less 9 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/books/artAndDrama/view/components/chapter001.vue 26 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/books/artAndDrama/view/components/chapter002.vue 647 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/books/artAndDrama/view/components/chapter003.vue 396 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/books/artAndDrama/view/components/chapter004.vue 290 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/books/artAndDrama/view/components/chapter005.vue 260 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/books/artAndDrama/view/components/index.vue 63 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/books/artAndDrama/assets/main.less
@@ -595,18 +595,11 @@
  }
}
/* 媒体查询做基础响应式布局 */
@media (max-width: 430px) {
@media (max-width: 660px) {
    .ans-drama  {
      .page-box {
        min-height: 750px;
      }
      .pg-mh {
        min-height: 815px !important; 
      }
    }
  }
@media (max-width: 660px) {
    .ans-drama {
      /* 分页padding */
      .page-padding {
        padding: 104px 20px;
src/books/artAndDrama/view/components/chapter001.vue
@@ -3,7 +3,6 @@
    <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,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>
@@ -50,7 +47,7 @@
          </h1>
          <p>小提示:加点的文字为本句话中的逻辑重音,在朗读发音时请重读。</p>
          <!-- 连线题 -->
          <matching :rawData="rawData" :item="question"></matching>
          <matching :rawData="rawData" :item="question" class="macthing" :primaryColor="'transparent'"></matching>
        </div>
        <p><br /></p>
        <!-- 此次为页脚部分(需要设置页码) -->
@@ -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>
src/books/artAndDrama/view/components/chapter002.vue
@@ -1,6 +1,6 @@
<template>
  <div class="chapter" num="3">
    <!-- <div class="page-box" page="14" style="min-height: auto">
    <div class="page-box" page="14">
      <div v-if="showPageList.indexOf(14) > -1">
        <h1 id="a004">
          <img class="img-0" alt="" src="../../assets/images/dy2.jpg" />
@@ -13,24 +13,23 @@
                <img class="img-gn" alt="" src="../../assets/images/dydd.jpg" />
              </p>
            </div>
            <p class="block">
              戏剧表演中的动作、体态、眼神、声音在塑造角色时起到了重要的作用。本单元我们将继续学习《一块奶酪》的故事,并以偶剧的形式进行表演。
            </p>
          </div>
        </div>
        <p><br /></p>
        <h1><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
        <!-- 此次为页脚部分(需要设置页码) -->
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-right">11</div>
      </div>
    </div>
    <div class="page-box" page="15" style="min-height: auto">
    </div>
    <div class="page-box" page="15">
      <div v-if="showPageList.indexOf(15) > -1">
        <h1>
          <img
            src="../../assets/images/header-green.png"
            alt=""
            style="width: 100%; height: auto"
          />
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <img src="../../assets/images/page5.png" alt="" />
@@ -45,410 +44,179 @@
          </p>
          <p><span class="hs1">◇</span>嗅觉大冒险</p>
          <p>
            你最爱吃的食物是_________。当闻到它的味道时,你会做出什么表情呢?
            你最爱吃的食物是 <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 10%" />。当闻到它的味道时,你会做出什么表情呢?
          </p>
          <p>
            你最不爱吃的食物是_________。当闻到它的味道时,你会做出什么表情呢?
            你最不爱吃的食物是 <input v-model="questionData.warnUp.two" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 10%"/>。当闻到它的味道时,你会做出什么表情呢?
          </p>
          <h3 class="lefth3" id="c012">
          <h3 class="lefth3 openImgBox" id="c012">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <p>
            <span class="hs1">◇</span
            >以小组为单位,使用手偶道具表演附录中的剧本选段2。
            <span class="hs1">◇</span>以小组为单位,使用手偶道具表演附录中的剧本选段2。
          </p>
          <p class="center">
            <img class="img-e" alt="" src="../../assets/images/0016-2.jpg" />
          <p class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/2-1.gif" />
          </p>
        </div>
        <p><br /></p>
        <h1><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
        <!-- 此次为页脚部分(需要设置页码) -->
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-left">12</div>
      </div>
    </div> -->
    <!--<div class="page-box" page="16" style="min-height: auto">
      </div>
    </div>
    <div class="page-box" page="16">
        <div v-if="showPageList.indexOf(16) > -1">
          <h1>
            <img
              src="../../assets/images/page6-header-green.png"
              alt=""
              style="height: auto; width: 100%"
            />
          <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
          </h1>
          <div class="bodystyle">
            <h1 class="lefth3" id="c002">
              <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
            </h1>
            <p><span class="hs1">◇</span>请选出你认为正确的答案。</p>
            <p class="center">
              <img class="img-e" alt="" src="../../assets/images/1-2蚂蚁举大树.gif" />
            </p>
            <p>蚂蚁是典型的(  )昆虫。(多选)</p>
            <p>A.群居</p>
            <p>B.社会性</p>
            <p>C.独居</p>
            <p>蚂蚁内部有(  )分工。(多选)</p>
            <p>A.明确的</p>
            <p>B.奇怪的</p>
            <p>C.有序的</p>
            <p>一个(  )群体少不了默契的配合。(多选)</p>
            <p>A.团结的</p>
            <p>B.优秀的</p>
            <p>C.松散的</p>
            <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"
              style="margin-top: 40px"
            ></video>
          <h2 id="b007">第二课 明察秋毫</h2>
          <h3 class="lefth3" id="c013"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
          <p><span class="hs1">◇</span>我们的世界五彩斑斓。请你填一填,提到这些颜色,你想到了哪些事物?</p>
          <p>黄色:柠檬、<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 10%"/>、<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 10%"/>。</p>
          <p>红色:鞭炮、<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 10%"/>、<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 10%"/>。</p>
          <p>绿色:叶子、<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 10%"/>、<input v-model="questionData.warnUp.eight" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 10%"/>。</p>
          <p>黑色:黑板、<input v-model="questionData.warnUp.nine" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 10%"/>、<input v-model="questionData.warnUp.ten" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 10%"/>。</p>
          <p>蓝色:大海、<input v-model="questionData.warnUp.eleven" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 10%"/>、<input v-model="questionData.warnUp.twelve" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 10%"/>。</p>
          <h3 class="lefth3" id="c014"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
          <p><span class="hs1">◇</span>阅读下面的文字,为小蚂蚁选择一种性格吧。</p>
          <p class="center  openImgBox"><img class="img-e" alt="" src="../../assets/images/2-2.gif" /></p>
          <p>蚂蚁队长走路昂首挺胸、步伐坚定,它是一只(  )蚂蚁;小蚂蚁走起路来小心翼翼,眼神飘忽不定,它是一只(  )蚂蚁;蚂蚁小妹面带微笑,时刻愿意帮助大家,它是一只(  )蚂蚁。</p>
          <p>A.胆小的</p>
          <p>B.善良的</p>
          <p>C.沉稳的</p>
          </div>
          <p class="center">
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </p>
        <!-- 此次为页脚部分(需要设置页码) -->
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-right">13</div>
        </div>
      </div>
      <div class="page-box" page="17" style="min-height: auto">
    </div>
    <div class="page-box" page="17">
        <div v-if="showPageList.indexOf(17) > -1">
          <h1>
            <img
              src="../../assets/images/header-green.png"
              alt=""
              style="width: 100%; height: auto"
            />
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
          </h1>
          <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="image/rhybx.jpg" />
            </h3>
            <p>
              <span class="hs1">◇</span
              >请将以下课文选段大声朗诵出来,加点的字请重读。
            </p>
            <audio :src="auidoPathThree" controls></audio>
            <div class="bj3">
              <p class="center">
                <span class="hs"
                  >春<a id="w1"></a><a href="chapter003.html#m1"><sup>[1]</sup></a
                  >(节选)</span
                >
              </p>
              <p class="center">朱自清</p>
              <p class="block">
                盼望着,<span class="un1">盼望着</span>,东风来了,春天的脚步<span
                  class="un1"
                  >近</span
                >了。
              </p>
              <p class="block">
                一切都像<span class="un1">刚睡醒</span>的样子,欣欣然<span
                  class="un1"
                  >张开</span
                >了眼。山<span class="un1">朗润</span>起来了,水<span class="un1"
                  >涨</span
                >起来了,太阳的脸<span class="un1">红</span>起来了。
              </p>
          <h2 id="b008">第三课 闻声识人</h2>
          <h3 class="lefth3" id="c015"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
          <p>常言道:良言一句三冬暖,恶语伤人六月寒。语言在人与人的交往中起着重要的作用,有着无穷的力量。</p>
          <p><span class="hs1">◇</span>如果朋友心情不好,你该怎么安慰他/她呢?</p>
          <p>“<input v-model="questionData.warnUp.thirteen" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 50%"/>”</p>
          <p><span class="hs1">◇</span>如果你邀请好朋友来家里做客,你该说什么来欢迎他/她呢?</p>
          <p>“<input v-model="questionData.warnUp.fourteen" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 50%"/>”</p>
          <h3 class="lefth3" id="c016"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
          <p><span class="hs1">◇</span>请根据提示读出句子,注意声音和语气的变化。</p>
          <p><span class="hs">这一大块奶酪都是我的了!</span>(一只狡猾的蚂蚁,想要把奶酪偷偷地占为己有)</p>
          <p><span class="hs">这一大块奶酪都是我的了!</span>(一只善良的蚂蚁,在帮助他人后得到了奖励)</p>
          <p><span class="hs">这块奶酪太沉了,我们休息一下吧!</span>(严肃的蚂蚁队长,向队伍发出命令)</p>
            </div>
            <h3 class="lefth3" id="c004">
              <img class="img-gn1" alt="" src="image/czysj.jpg" />
            </h3>
            <p>
              <span class="hs1">◇</span
              >在《一块奶酪》的故事中,小蚂蚁们都有各自的立场,你能理解他们的想法吗?请你和同伴根据故事内容讨论一下。
            </p>
            <hr />
            <p class="note">
              <a id="m1"></a><a href="chapter003.html#w1">[1]</a>
              朱自清:《春》,见温儒敏等:《义务教育教科书 语文
              七年级上册》,2页,北京,人民教育出版社,2016。
            </p>
          </div>
          <p class="center">
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </p>
        <!-- 此次为页脚部分(需要设置页码) -->
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-left">14</div>
        </div>
      </div>
      <div class="page-box" page="18" style="min-height: auto">
    </div>
    <div class="page-box" page="18">
        <div v-if="showPageList.indexOf(18) > -1">
          <h1>
            <img
              src="../../assets/images/header-green.png"
              alt=""
              style="width: 100%; height: auto"
            />
          <img src="../../assets/images/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" id="c005">
              <img
                class="img-gn1"
                alt=""
                src="../../assets/images/1-3.gif"
                style="height: auto; width: 50%"
              />
            </h1>
            <p>
              <span class="hs1">◇</span
              >请将以下课文选段大声朗诵出来,加点的字请重读。
            </p>
            <p class="center">
              <img class="img-e" alt="" src="image/0009-1.jpg" />
            </p>
            <audio :src="auidoPathTwo" controls></audio>
            <div class="bj3">
              <p class="center">
                <span class="hs"
                  >春<a id="w1"></a><a href="chapter004.html#m1"><sup>[1]</sup></a
                  >(节选)</span
                >
              </p>
              <p class="center">朱自清</p>
              <p class="block">
                小草偷偷地从土里<span class="un1">钻出来</span>,<span class="un1"
                  >嫩嫩的</span
                >,<span class="un1">绿绿的</span>。园子里,田野里,<span
                  class="un1"
                  >瞧</span
                >去,一大片一大片满是的。<span class="un1">坐</span>着,<span
                  class="un1"
                  >躺</span
                >着,<span class="un1">打</span>两个<span class="un1">滚</span
                >儿,<span class="un1">踢</span>几脚<span class="un1">球</span
                >,<span class="un1">赛</span>几趟<span class="un1">跑</span
                >,<span class="un1">捉</span>几回<span class="un1">迷藏</span
                >。风<span class="un1">轻悄悄</span>的,草<span class="un1"
                  >软绵绵</span
                >的。
              </p>
            </div>
            <h3 class="lefth3" id="c006">
              <img class="img-gn1" alt="" src="image/czysj.jpg" />
            </h3>
            <p class="center">
              <img class="img-e" alt="" src="image/0010-1.jpg" />
            </p>
            <hr />
            <p class="note">
              <a id="m1"></a><a href="chapter004.html#w1">[1]</a>
              朱自清:《春》,见温儒敏等:《义务教育教科书 语文
              七年级上册》,2页,北京,人民教育出版社,2016。
            </p>
          <p><span class="hs">这块奶酪太沉了,我们休息一下吧!</span>(一只弱小的蚂蚁,在向蚂蚁队长请求休息)</p>
          <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/2-3.gif" /></p>
          </div>
        </div>
        <p class="center">
          <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
        </p>
      <!-- 此处为页脚部分(需要设置页码) -->
      <div class="page-footer">
        <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
        <div class="page-footer-number-right">15</div>
      </div>
      <div class="page-box" page="19" style="min-height: auto">
    </div>
    <div class="page-box" page="19">
        <div v-if="showPageList.indexOf(19) > -1">
          <h1>
            <img
              src="../../assets/images/header-green.png"
              alt=""
              style="width: 100%; height: auto"
            />
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
          </h1>
          <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>
            <h1 class="center">
              <img
                class="img-e"
                alt=""
                src="../../assets/images/1-4.gif"
                style="height: auto; width: 50%"
              />
            </h1>
            <p>
              <span class="hs1">◇</span
              >生活中,我们总会遇到各种各样的诱惑。面对诱惑时,我们的内心常常会有两个不同的声音出现:一个声音要求我们严于律己,另一个声音要求我们随心所欲。请你分析一下,当蚂蚁队长面对掉落的奶酪渣的诱惑时,他内心的两个声音会说些什么呢?
            </p>
            <p>正义队长:“_________________________________。”</p>
            <p>黑暗队长:“_________________________________。”</p>
          <h2 id="b009">第四课 真听真看真感受</h2>
          <h3 class="lefth3" id="c017"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
          <p>待人接物有礼有节、谦卑恭敬,在让他人感到如沐春风的同时,也会让自己受到他人的尊重和理解。请说一说,在下面这些场景中你应该如何做?</p>
          <p><span class="hs1">◇</span>你看到妈妈的水杯没水了。</p>
          <p><span class="hs1">◇</span>电梯里,你站在最前排,后面的人需要下电梯。</p>
          <h3 class="lefth3" id="c018"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
          <p>你知道吗?无实物训练是一种训练演员的有效方法,不仅能够培养演员良好的想象能力,更能够培养其行动的逻辑性和情景适应性,最终提高其塑造人物形象的能力。</p>
          <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/2-4.gif" /></p>
          <p><span class="hs1">◇</span>请试着用无实物表演的方式把下面的情景表演出来吧!</p>
          <p class="center"><img class="img-0" alt="" src="../../assets/images/0020-2.jpg" /></p>
          </div>
        </div>
        <p class="center">
          <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
        </p>
      <!-- 此处为页脚部分(需要设置页码) -->
      <div class="page-footer">
        <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
        <div class="page-footer-number-left">16</div>
      </div>
      <div class="page-box" page="20" style="min-height: auto">
    </div>
    <div class="page-box" page="20">
        <div v-if="showPageList.indexOf(20) > -1">
          <h1>
            <img
              src="../../assets/images/page6-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">
            <h2 id="b004">第四课 身临其境</h2>
            <h3 class="lefth3" id="c007">
              <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
            </h3>
            <p>
              <span class="hs1">◇</span
              >请将以下课文选段大声朗诵出来,加点的字请重读。
            </p>
            <audio :src="auidoPathTwo" controls></audio>
            <div class="bj3">
              <p class="center">
                <span class="hs"
                  >春<a id="w1"></a><a href="chapter005.html#m1"><sup>[1]</sup></a
                  >(节选)</span
                >
              </p>
              <p class="center">朱自清</p>
              <p class="block">
                <span class="un1">桃</span>树、<span class="un1">杏</span
                >树、<span class="un1">梨</span
                >树,你不让我,我不让你,都开满了花赶趟儿。红的像<span class="un1"
                  >火</span
                >,粉的像<span class="un1">霞</span>,白的像<span class="un1"
                  >雪</span
                >。花里带着甜味儿……
              </p>
            </div>
            <h3 class="lefth3" id="c008">
              <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
            </h3>
            <p>
              <span class="hs1">◇</span
              >假如你是搬运奶酪的蚂蚁,你要怎么搬运不同形状、大小的奶酪呢?请先为自己设计一个剧本吧:
            </p>
            <p>
              我是蚂蚁_________(名字),今天是_________(天气),我的奶酪特别_________(轻/重),我感觉好_________(身体感觉)啊!
            </p>
            <hr />
            <p class="note">
              <a id="m1"></a><a href="chapter003.html#w1">[1]</a>
              朱自清:《春》,见温儒敏等:《义务教育教科书 语文
              七年级上册》,2页,北京,人民教育出版社,2016。
            </p>
          <h2 id="b010">单元活动任务</h2>
          <h3 class="lefth3" id="c019"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
          <p><span class="hs1">◇</span>吹纸练习</p>
          <p class="center"><img class="img-e" alt="" src="../../assets/images/0021-1.jpg" /></p>
          <p>找一张纸巾,将它按在墙上。移开双手,努力用气息将纸“钉”在墙面上,不要让它向下滑落。</p>
          <p><span class="hs1">◇</span>吹笔练习</p>
          <p>将一支笔立于桌面,看看你能不能用一口气将它吹倒。</p>
          <p><span class="hs1">◇</span>吹袋子练习</p>
          <p>将一只塑料袋抛至空中,和你的小伙伴一起轮流吹气,避免塑料袋落地。</p>
          </div>
        </div>
        <p class="center">
          <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
        </p>
      <!-- 此处为页脚部分(需要设置页码) -->
      <div class="page-footer">
        <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
        <div class="page-footer-number-right">17</div>
      </div>
      <div class="page-box" page="21" style="min-height: auto">
    </div>
    <div class="page-box" page="21">
        <div v-if="showPageList.indexOf(21) > -1">
          <h1>
            <img
              src="../../assets/images/header-green.png"
              alt=""
              style="width: 100%; height: auto"
            />
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
          </h1>
          <div class="bodystyle">
            <img src="../../assets/images/page5.png" alt="" />
          <p><span class="hs1">◇</span>吹乒乓球练习</p>
          <p>用气息将桌面上的乒乓球从“起点”运送至“终点”,运送过程中避免乒乓球触碰障碍物。</p>
          <h3 class="lefth3" id="c020"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
          <p><span class="hs1">◇</span>请走进剧场观看不同剧种的现场演出,感受戏剧的魅力吧!</p>
            <p class="center">
              <img class="img-e" alt="" src="../../assets/images/1-5.gif" />
            </p>
            <p>
              <span class="hs1">◇</span
              >蚂蚁队长把奶酪渣留给了年龄最小的蚂蚁,赢得了大家的认可。在生活中,你曾经像“蚂蚁队长”一样爱护弱小吗?或者像“小蚂蚁”一样得到过哥哥姐姐们的关爱吗?
            </p>
            <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"
              style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
          <h2>视频: 惟妙惟肖的人物</h2></p>
          </div>
        </div>
        <p class="center">
          <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
        </p>
      </div>
      <div class="page-box" page="22" style="min-height: auto">
        <div v-if="showPageList.indexOf(22) > -1">
          <h1>
            <img
              src="../../assets/images/page6-header-green.png"
              alt=""
              style="width: 100%; height: auto"
            />
          </h1>
          <div class="bodystyle">
            <h2 id="b005">单元活动任务</h2>
            <h3 class="lefth3" id="c009">
              <img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" />
            </h3>
            <p><span class="hs1">◇</span>放大缩小</p>
            <p>
              请你交替“放大”和“缩小”五官。在“放大”时,想象五官要飞到外太空;在“缩小”时,想象五官全部缩小到了鼻尖上。
            </p>
            <p><span class="hs1">◇</span>提升苹果肌</p>
            <p>
              想象你在一个陌生的地方,谁都不认识,突然遇见了好朋友,你很高兴,上前和他/她打招呼。做一做你此时的表情吧。
            </p>
            <p><span class="hs1">◇</span>微笑说“ang”</p>
            <p>
              请你试一试在提升苹果肌的基础上,发出“ang”的音。声音要尽可能拉长、保持稳定,并向远送。
            </p>
            <p><span class="hs1">◇</span>向远山喊“阿毛”</p>
            <p>
              想象自己站在一座高山上,好朋友“阿毛”站在对面的高山上,你要如何喊他呢?
            </p>
      <!-- 此处为页脚部分(需要设置页码) -->
      <div class="page-footer">
        <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
        <div class="page-footer-number-left">18</div>
          </div>
        </div>
        <p class="center">
          <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
        </p>
      </div>
      <div class="page-box" page="23" style="min-height: auto">
        <div v-if="showPageList.indexOf(23) > -1">
          <h1>
            <img
              src="../../assets/images/page6-header-green.png"
              alt=""
              style="width: 100%; height: auto"
            />
          </h1>
          <div class="bodystyle">
            <h3 class="lefth3" id="c010">
              <img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
            </h3>
            <p><span class="hs1">◇</span>排一排·演一演:孔融让梨</p>
            <p>
              孔融四岁就懂礼貌、知谦让,是我们学习的好榜样,让我们运用本单元的戏剧知识,把他的故事表演出来吧!
            </p>
            <p class="center">
              <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"
              style="margin-top: 40px"
            ></video>
            </p>
          </div>
        </div>
        <p class="center">
          <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
        </p>
      </div> -->
  </div>
</template>
    
    <script>
//import matching from "@/components/matching/matching.vue";
import { getResourcePath } from "@/assets/methods/resources";
export default {
  name: "chapterTwo",
  //components: { matching },
  props: {
    showPageList: {
      type: Array,
@@ -457,127 +225,47 @@
   //在这里对调用的方法进行挂载
  mounted() {
    this.getVidoePath();
    const bookQuestion = localStorage.getItem("artAndDrama-book-question-two");
    if (bookQuestion) {
      this.questionData = JSON.parse(bookQuestion);
    }
  },
  data() {
    return {
      videoPathOne: "",
      videoPathTwo: "",
      videoPathThree: "",
      videoPathFour: "",
      auidoPathOne: "",
      auidoPathTwo: "",
      auidoPathThree: "",
      rawData: {
        left: [
          {
            oldId: "FB34",
            txt: "我请你吃苹果吧!",
      questionData: {
        warnUp: {
          one: "",
          two: "",
          three: "",
          four: "",
          five: "",
          six: "",
          seven:"",
          eight:"",
          nine:"",
          ten:"",
          eleven:"",
          twelve:"",
          thirteen:"",
          fourteen:"",
          },
          {
            oldId: "64D6",
            txt: "我请你吃苹果吧!",
        reading: {
          one: "",
          two: "",
          },
          {
            oldId: "2ED4",
            txt: "我请你吃苹果吧!",
        table: {
          one: "",
          two: "",
          three: "",
          four: "",
          five: "",
          six: "",
          seven: "",
          enight: "",
          nine: "",
          },
          {
            oldId: "44DE",
            txt: "我请你吃苹果吧!",
          },
        ],
        right: [
          {
            oldId: "64D6",
            txt: "强调是请客",
          },
          {
            oldId: "FB34",
            txt: "强调请的是“你”",
          },
          {
            oldId: "2ED4",
            txt: "强调吃的东西是“苹果”",
          },
          {
            oldId: "44DE",
            txt: "强调请客的人是“我”",
          },
        ],
      },
      question: {
        KnowledgePoint: "123",
        analysis: "123",
        answer: [
          {
            id: "FB34",
            linkValue: "我请你吃苹果吧!",
            value: "强调是请客",
          },
          {
            id: "64D6",
            linkValue: "我请你吃苹果吧!",
            value: "强调请的是“你”",
          },
          {
            id: "2ED4",
            linkValue: "我请你吃苹果吧!",
            value: "强调吃的东西是“苹果”",
          },
          {
            id: "44DE",
            linkValue: "我请你吃苹果吧!",
            value: "强调请客的人是“我”",
          },
        ],
        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: [],
      },
    };
  },
@@ -587,25 +275,17 @@
    //视频和音频的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"
      );
      this.auidoPathTwo = await getResourcePath(
        "e93c0fdde08be5a4386c8c863892a287"
      );
      this.auidoPathThree = await getResourcePath(
        "e93c0fdde08be5a4386c8c863892a287"
      // this.auidoPathOne = await getResourcePath(
      //   "2c5f6c69b0f9f7a3c03e473cb8c977f5"
      // );
    },
    setBookQuestion() {
      console.log("保存");
      localStorage.setItem(
        "artAndDrama-book-question-two",
        JSON.stringify(this.questionData)
      );
    },
  },
@@ -616,21 +296,24 @@
.w70 {
  width: 78%;
}
.fw-400 {
  font-weight: 400 !important;
}
.fz-26 {
  font-size: 26px !important;
}
.cover-img {
  position: absolute;
  top: 33%;
  left: 23%;
}
.division-line {
  width: 2px;
  height: 100%;
  background-color: red;
}
</style>
src/books/artAndDrama/view/components/chapter003.vue
New file
@@ -0,0 +1,396 @@
<template>
    <div class="chapter" num="4">
        <div class="page-box" page="22">
            <div v-if="showPageList.indexOf(22) > -1">
                <h1 id="a004">
                    <!-- 这里的动图有问题,没有背景图片 -->
                    <img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
                    <audio :src="auidoPathOne" class="audio" controls></audio>
                </h1>
                <div class="bodystyle">
                    <div class="bk">
                        <div class="bj1">
                            <p class="left"><img class="img-gn" alt="" src="../../assets/images/dydd.jpg" /></p>
                        </div>
                        <p>每个人的心中都有一个舞台,演绎着生活的酸甜苦辣,记录着成长的点点滴滴。《一块奶酪》中的每只小蚂蚁也有很多心里话要表达,让我们一起演绎出来吧!</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">19</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="23">
            <div v-if="showPageList.indexOf(23) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%;" />
                </h1>
                <div class="bodystyle">
                    <img src="../../assets/images/page5.png" alt="" />
                    <h2 id="b011">第一课 吹响劳动的集结号</h2>
                    <h3 class="lefth3" id="c021"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p>寒来暑往,秋收冬藏。一年四季,劳碌奔忙。</p>
                    <p>团结一心,吹响号角。幸福生活,劳动创造。</p>
                    <p><span class="hs1">◇</span>说一说你会做哪些家务?</p>
                    <p><span class="hs1">◇</span>和小伙伴讨论劳动在生活中的作用。</p>
                    <p><span class="hs1">◇</span>表演一种家务劳动,请小伙伴猜一猜。</p>
                    <h3 class="lefth3" id="c022"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>邀请小伙伴分角色朗诵附录中的剧本选段1~2,重读加点文字。</p>
                    <p class="center"><img class="img-e" alt="" src="../../assets/images/0024-1.jpg" /></p>
                </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-left">20</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="24">
            <div v-if="showPageList.indexOf(24) > -1">
                <h1>
                    <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
                </h1>
                <div class="bodystyle">
                    <h2 id="b012">第二课 意外发生了!</h2>
                    <h3 class="lefth3" id="c023"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p><span class="hs1">◇</span>当上半场比赛失利,中场休息时,你会怎么做?当别人夸赞你的时候,你会怎么做?请你和朋友一起演一演吧。</p>
                    <h3 class="lefth3" id="c024"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-2.gif" /></p>
                    <p><span class="hs1">◇</span>请把蚂蚁队长的台词和他的内心独白连起来吧!</p>
                    <!-- 连线题 -->
                    <matching :rawData="rawData" :item="question" class="macthing" :primaryColor="'transparent'">
                    </matching>
                </div>
                <!-- 此次为页脚部分(需要设置页码) -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-right">21</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="25">
            <div v-if="showPageList.indexOf(25) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <h2 id="b013">第三课 我该怎么办?</h2>
                    <h3 class="lefth3" id="c025"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p><span class="hs1">◇</span>在《一块奶酪》的故事中,蚂蚁队长也起过贪心,但他最终成功克服了贪心,你认为他是怎么做到的呢?</p>
                    <p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 90%"/></p>
                    <h3 class="lefth3" id="c026"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>阅读附录中的剧本选段5,为自己的表演设计动作吧!</p>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-3.gif" /></p>
                </div>
                <!-- 此次为页脚部分(需要设置页码) -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-left">22</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="26">
            <div v-if="showPageList.indexOf(26) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <img src="../../assets/images/page5.png" alt="" />
                    <h2 id="b014">第四课 皆大欢喜</h2>
                    <h3 class="lefth3" id="c027"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p><span class="hs1">◇</span>请按照事件六要素的结构给大家分享一件快乐的事吧!</p>
                    <p>时间:<input v-model="questionData.warnUp.two" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 70%"/></p>
                    <p>地点:<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 70%"/></p>
                    <p>人物:<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 70%"/></p>
                    <p>起因:<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 70%"/></p>
                    <p>经过:<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 70%"/></p>
                    <p>结果:<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 70%"/></p>
                    <p><span class="hs1">◇</span>你有烦恼吗?说一说是什么,你是怎么处理它的?</p>
                    <p><input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 70%"/></p>
                </div>
                <!-- 此次为页脚部分(需要设置页码) -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-right">23</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="27">
            <div v-if="showPageList.indexOf(27) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <img src="../../assets/images/page5.png" alt="" />
                    <h3 class="lefth3" id="c028"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>运用重音、内心独白和动作设计等表现方式,将《一块奶酪》的故事表演出来吧!(剧本见附录)</p>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-3.gif" /></p>
                </div>
            </div>
            <!-- 此次为页脚部分(需要设置页码) -->
            <div class="page-footer">
                <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                <div class="page-footer-number-left">24</div>
            </div>
        </div>
        <div class="page-box" page="28">
            <div v-if="showPageList.indexOf(28) > -1">
                <h1>
                    <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <h2 id="b015">单元活动任务</h2>
                    <h3 class="lefth3" id="c029"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
                    <p><span class="hs1">◇</span>喘气练习</p>
                    <p>平视前方,肩膀放松,双手自然下垂或叉腰,双脚分开,与肩同宽。模仿小狗喘气,感受腹部的“呼吸”状态,想象自己的腹部是一个气球,在吸气时腹部向外扩张,吐气时腹部向内收缩。</p>
                    <p><span class="hs1">◇</span>“嘶”声练习</p>
                    <p>在“喘气练习”的基础上,发出“嘶”音,每组4短1长。</p>
                    <p><span class="hs1">◇</span>“嘟”音练习</p>
                    <p>平视前方,肩膀放松,双手自然下垂,双脚分开,与肩同宽。放松双唇,深吸气,吹出气流带动嘴唇抖动,发出“嘟”的声音,声音越长越好。</p>
                    <p><span class="hs1">◇</span>“我们赞美长江”气声练习</p>
                    <p>平视前方,肩膀放松,双手自然下垂,双脚分开,与肩同宽。以说悄悄话的感觉,说出“我们赞美长江”,并逐步增加气声的力度,找到在舞台上说悄悄话的感觉。</p>
                </div>
            </div>
            <!-- 此次为页脚部分(需要设置页码) -->
            <div class="page-footer">
                <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                <div class="page-footer-number-right">25</div>
            </div>
        </div>
        <div class="page-box" page="29">
            <div v-if="showPageList.indexOf(29) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <h3 class="lefth3" id="c030"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>劳动最光荣!请为家中长辈做一件力所能及的事情,用实际行动表达你的爱意!体验过程中要记住每一个动作的细节,再尝试以无实物表演的方式进行展示。
                    </p>
                    <p class="center">
                        <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"
                            style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
                    <h2>视频: 心有多大,舞台就有多大</h2>
                    </p>
                </div>
            </div>
            <!-- 此次为页脚部分(需要设置页码) -->
            <div class="page-footer">
                <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                <div class="page-footer-number-left">26</div>
            </div>
        </div>
    </div>
</template>
<script>
import matching from "@/components/matching/matching.vue";
import { getResourcePath } from "@/assets/methods/resources";
export default {
    name: "chapterThree",
    components: { matching },
    props: {
        showPageList: {
            type: Array,
        },
    },
    //在这里对调用的方法进行挂载
    mounted() {
        this.getVidoePath();
        const bookQuestion = localStorage.getItem("artAndDrama-book-question-three");
        if (bookQuestion) {
            this.questionData = JSON.parse(bookQuestion);
        }
    },
    data() {
        return {
            videoPathOne: "",
            auidoPathOne: "",
            rawData: {
                left: [
                    {
                        oldId: "FB34",
                        txt: "“掉了一个角,这该怎么办!”",
                    },
                    {
                        oldId: "64D6",
                        txt: "“丢掉,实在太可惜!”",
                    },
                    {
                        oldId: "2ED4",
                        txt: "“我要是偷嘴谁也看不见。”",
                    },
                ],
                right: [
                    {
                        oldId: "64D6",
                        txt: "不能丢掉啊,如果能给我吃就太好了!",
                    },
                    {
                        oldId: "FB34",
                        txt: "要不我把奶酪偷偷吃了吧。",
                    },
                    {
                        oldId: "2ED4",
                        txt: "好可惜啊,这么美味的奶酪!",
                    },
                ],
            },
            question: {
                KnowledgePoint: "123",
                analysis: "123",
                answer: [
                    {
                        id: "FB34",
                        linkValue: "“掉了一个角,这该怎么办!”",
                        value: "要不我把奶酪偷偷吃了吧。",
                    },
                    {
                        id: "64D6",
                        linkValue: "“丢掉,实在太可惜!”",
                        value: "不能丢掉啊,如果能给我吃就太好了!",
                    },
                    {
                        id: "2ED4",
                        linkValue: "“我要是偷嘴谁也看不见。”",
                        value: "好可惜啊,这么美味的奶酪!",
                    },
                ],
                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: [],
            },
            questionData: {
                warnUp: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                    seven:"",
                    enight:"",
                },
                reading: {
                    one: "",
                    two: "",
                },
                table: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                    seven: "",
                    enight: "",
                    nine: "",
                },
            },
        };
    },
    methods: {
        //视频和音频的MD5地址
        async getVidoePath() {
            // 视频Md5地址
            this.videoPathOne = await getResourcePath(
                "dd44a1e31b4304f50d10b2481a148411"
            );
            // 音频Md5地址
            // this.auidoPathOne = await getResourcePath(
            //   "2c5f6c69b0f9f7a3c03e473cb8c977f5"
            // );
        },
        setBookQuestion() {
            console.log("保存");
            localStorage.setItem(
                "artAndDrama-book-question-three",
                JSON.stringify(this.questionData)
            );
        },
    },
};
</script>
<style lang="less" scoped>
.w70 {
    width: 78%;
}
.fw-400 {
    font-weight: 400 !important;
}
.fz-26 {
    font-size: 26px !important;
}
.cover-img {
    position: absolute;
    top: 33%;
    left: 23%;
}
.division-line {
    width: 2px;
    height: 100%;
    background-color: red;
}
.macthing {
    background-color: rgb(188, 220, 164);
    padding: 5% 0%;
}
</style>
src/books/artAndDrama/view/components/chapter004.vue
New file
@@ -0,0 +1,290 @@
<template>
    <div class="chapter" num="5">
        <div class="page-box" page="30">
            <div v-if="showPageList.indexOf(30) > -1">
                <h1 id="a004">
                    <!-- 这里的动图有问题,没有背景图片 -->
                    <img class="img-0" alt="" src="../../assets/images/dy4.jpg" />
                    <audio :src="auidoPathOne" class="audio" controls></audio>
                </h1>
                <div class="bodystyle">
                    <div class="bk">
                        <div class="bj1">
                            <p class="left"><img class="img-gn" alt="" src="../../assets/images/dydd.jpg" /></p>
                        </div>
                        <p>在戏剧演出中,除了舞台上的演员,导演、灯光、造型等幕后人员也发挥着重要的作用。本单元让我们从台前走进幕后,向默默奉献的工作人员致敬!</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">27</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="31">
            <div v-if="showPageList.indexOf(31) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <img src="../../assets/images/page5.png" alt="" />
                    <h2 id="b016">第一课 一模一样</h2>
                    <h3 class="lefth3" id="c031"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p><span class="hs1">◇</span>以小组为单位围成一圈,面朝圈外蹲下,相邻两人互挎手臂,组员同时站起来,看看哪个组最快!</p>
                    <p><span class="hs1">◇</span>说一说:快速站起来的秘诀是什么?</p>
                    <p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 70%"/></p>
                    <h3 class="lefth3" id="c032"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>以小组为单位,表演以下场景,注意保持动作一致哦。</p>
                    <p>蚂蚁队长吹响集合号,蚂蚁们迅速跑上场站好队形。</p>
                    <p>蚂蚁们抬着奶酪向前走着。</p>
                    <p>蚂蚁们跟随蚂蚁队长的口令消失在草丛里。</p>
                    <p>蚂蚁们由四面八方走回来。</p>
                    <p>蚂蚁们劲儿比刚才更足,抬起奶酪向山洞走去。</p>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-1.gif" /></p>
                </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-left">28</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="32">
            <div v-if="showPageList.indexOf(32) > -1">
                <h1>
                    <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
                </h1>
                <div class="bodystyle">
                    <h2 id="b017">第二课 造型变变变</h2>
                    <h3 class="lefth3" id="c033"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p><span class="hs1">◇</span>春天来了,春风吹过,柳树发芽了,迎春花开了,小燕子在天空自由地飞翔。一切都是那么生机勃勃。请为“春天”涂上你喜欢的颜色。</p>
                    <!-- 图片缺失 -->
                    <!-- <p class="center"><img class="img-e" alt="" src="./../assets/images/0033-1.jpg" /></p> -->
                </div>
                <!-- 此次为页脚部分(需要设置页码) -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-right">29</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="33">
            <div v-if="showPageList.indexOf(33) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <h3 class="lefth3" id="c034"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>动动手,为《一块奶酪》中的蚂蚁角色设计简单的服装吧!</p>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p>
                </div>
                <!-- 此次为页脚部分(需要设置页码) -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-left">30</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="34">
            <div v-if="showPageList.indexOf(34) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <img src="../../assets/images/page5.png" alt="" />
                    <h2 id="b018">第三课 变废为宝</h2>
                    <h3 class="lefth3" id="c035"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p><span class="hs1">◇</span>以小组为单位,头顶纸杯,腿夹报纸,进行夹纸运杯游戏!</p>
                    <h3 class="lefth3" id="c036"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>请根据《一块奶酪》的剧本,列出演出中需要的道具清单,请按照清单,利用你收集的旧物制作道具吧!</p>
                    <p class="center"><img class="img-e" alt="" src="../../assets/images/0035-1.jpg" /></p>
                </div>
                <!-- 此次为页脚部分(需要设置页码) -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-right">31</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="35">
            <div v-if="showPageList.indexOf(35) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <img src="../../assets/images/page5.png" alt="" />
                    <h2 id="b019">第四课 奇妙的舞台</h2>
                    <h3 class="lefth3" id="c037"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p><span class="hs1">◇</span>请你试着模拟演员候场、谢幕,舞台美术工作人员进行幕后准备的场景。</p>
                    <p class="center"><img class="img-e" alt="" src="../../assets/images/0036-1.jpg" /></p>
                    <h3 class="lefth3" id="c038"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>邀请同伴共同完成《一块奶酪》的展演吧!</p>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p>
                </div>
            </div>
            <!-- 此次为页脚部分(需要设置页码) -->
            <div class="page-footer">
                <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                <div class="page-footer-number-left">32</div>
            </div>
        </div>
        <div class="page-box" page="36">
            <div v-if="showPageList.indexOf(36) > -1">
                <h1>
                    <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <h2 id="b020">单元活动任务</h2>
                    <h3 class="lefth3" id="c039"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
                    <p class="center"><span class="hs">形体操练习</span></p>
                    <p><span class="hs1">◇</span>头部运动</p>
                    <p>第1个八拍:右手越过头顶摸左耳,向右轻轻压头部。</p>
                    <p>第2个八拍:左手越过头顶摸右耳,向左轻轻压头部。</p>
                    <p>第3个八拍:头部顺时针转一圈。</p>
                    <p>第4个八拍:头部逆时针转一圈。</p>
                    <p><span class="hs1">◇</span>开肩练习</p>
                    <p>平视前方,肩膀放松,双手自然下垂,双脚打开,与肩同宽。</p>
                    <p>第1个八拍:第1-4拍手肘内侧向外转动,带动 双肩打开;第5-8拍手肘内侧向内收回,后背拱起,带动双肩内扣。</p>
                    <p>第2至第4个八拍:重复第1个八拍的动作。</p>
                    <p><span class="hs1">◇</span>提沉肩运动</p>
                    <p>平视前方,肩膀放松,双手自然下垂,双脚打开,与肩同宽。</p>
                </div>
            </div>
            <!-- 此次为页脚部分(需要设置页码) -->
            <div class="page-footer">
                <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                <div class="page-footer-number-right">33</div>
            </div>
        </div>
        <div class="page-box" page="37">
            <div v-if="showPageList.indexOf(37) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <img src="../../assets/images/page5.png" alt="" />
                    <p>第1至第2个八拍:双手下垂,手心向下,双肩上提再沉下,两拍一动。</p>
                    <p>第3至第4个八拍:双手下垂,手心向下,左右肩膀依次上提再沉下,一拍一动。</p>
                    <p><span class="hs1">◇</span>伸展运动</p>
                    <p>身体放松,膝盖微屈,上身自然弯曲下沉,手臂自然下垂。</p>
                    <p>第1个八拍:第1-7拍身体直起,双臂举起,踮起脚尖;第8拍还原初始状态。</p>
                    <p>第2至第4个八拍:重复第1个八拍的动作。</p>
                    <h3 class="lefth3" id="c040"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>写一篇排演总结,分享学习经验和感受!</p>
                    <p class="center">
                        <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"
                            style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
                    <h2>视频: 团结就是力量</h2>
                    </p>
                </div>
            </div>
            <!-- 此次为页脚部分(需要设置页码) -->
            <div class="page-footer">
                <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                <div class="page-footer-number-left">34</div>
            </div>
        </div>
    </div>
</template>
<script>
import { getResourcePath } from "@/assets/methods/resources";
export default {
    name: "chapterFour",
    props: {
        showPageList: {
            type: Array,
        },
    },
    //在这里对调用的方法进行挂载
    mounted() {
        this.getVidoePath();
        const bookQuestion = localStorage.getItem("artAndDrama-book-question-four");
        if (bookQuestion) {
            this.questionData = JSON.parse(bookQuestion);
        }
    },
    data() {
        return {
            videoPathOne: "",
            auidoPathOne: "",
            questionData: {
                warnUp: {
                    one: "",
                },
                reading: {
                    one: "",
                    two: "",
                },
                table: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                    seven: "",
                    enight: "",
                    nine: "",
                },
            },
        };
    },
    methods: {
        //视频和音频的MD5地址
        async getVidoePath() {
            this.videoPathOne = await getResourcePath(
                "09de7704eeaaf3a210b8c6af0a94d545"
            );
            // this.auidoPathOne = await getResourcePath(
            //   "2c5f6c69b0f9f7a3c03e473cb8c977f5"
            // );
        },
        setBookQuestion() {
            console.log("保存");
            localStorage.setItem(
                "artAndDrama-book-question-four",
                JSON.stringify(this.questionData)
            );
        },
    },
};
</script>
<style lang="less" scoped>
.w70 {
    width: 78%;
}
.fw-400 {
    font-weight: 400 !important;
}
.fz-26 {
    font-size: 26px !important;
}
.cover-img {
    position: absolute;
    top: 33%;
    left: 23%;
}
.division-line {
    width: 2px;
    height: 100%;
    background-color: red;
}
.macthing {
    background-color: rgb(188, 220, 164);
    padding: 5% 0%;
}
</style>
src/books/artAndDrama/view/components/chapter005.vue
New file
@@ -0,0 +1,260 @@
<template>
    <div class="chapter" num="6">
        <div class="page-box" page="38">
            <div v-if="showPageList.indexOf(38) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <h1 id="a008">附录</h1>
                    <p class="block3"><span class="hs">剧本</span></p>
                    <p class="center1"><span class="hs">一块奶酪</span></p>
                    <p class="block">演员表:蚂蚁队长、小蚂蚁、大头蚂蚁、小眼镜蚂蚁、蚂蚁小妹、奶酪人</p>
                    <p class="block3"><span class="hs">选段1</span></p>
                    <p class="block">【起光,蚂蚁队长上场】</p>
                    <p class="block">咻咻—</p>
                    <p class="block">【蚂蚁队长吹响集合号,蚂蚁们迅速跑上场站好队形】</p>
                    <p class="block">蚂蚁队长:<span class="un1">我宣布</span>!今天搬运粮食,只许<span class="un1">出力</span>,不许<span
                            class="un1">偷嘴</span>。谁偷嘴就<span class="un1">罚谁</span>!</p>
                    <p class="block">蚂蚁们:收到!</p>
                    <p class="block">小蚂蚁:(嘀咕)要是偷嘴的<span class="un1">是您呢</span>?</p>
                    <p class="block">蚂蚁队长:(义正词严)<span class="un1">照样受罚</span>!</p>
                    <p class="block">【蚂蚁们鼓掌】</p>
                    <p class="block">蚂蚁队长:稍息!立正!寻找食物!出发!</p>
                    <p class="block">【蚂蚁们争先恐后四处寻食】</p>
                    <p class="block">大头蚂蚁:(突然)<span class="un1">报告</span>!</p>
                    <p class="block">蚂蚁队长:怎么了?</p>
                </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">35</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="39">
            <div v-if="showPageList.indexOf(39) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <img src="../../assets/images/page5.png" alt="" />
                    <p class="block">大头蚂蚁:(突然)<span class="un1">报告</span>!</p>
                    <p class="block">蚂蚁队长:怎么了?</p>
                    <p class="block">大头蚂蚁:(指着)这里有一块大奶酪!</p>
                    <p class="block">【一块奶酪(演员)趴在角落处】</p>
                    <p class="block">蚂蚁队长:(兴奋)哦?</p>
                    <p class="block">【蚂蚁队长被奶酪的香味迷住,转起了圈圈】</p>
                    <p class="block">【音乐起,蚂蚁队长和奶酪人跳起了舞蹈】</p>
                    <p class="block">蚂蚁队长:(陶醉)奶酪……奶酪……填饱肚子不再呱呱叫。奶酪……奶酪……吃下一口一声美妙……</p>
                    <p class="block">【蚂蚁们停下手里的搬运工作,看着队长】</p>
                    <p class="block">大头蚂蚁:(大喊)队长!</p>
                    <p class="block">【蚂蚁队长被吓醒,奶酪人趴在地上】</p>
                    <p class="block">小眼镜蚂蚁:队长!队长!<span class="un1">快点搬运吧</span>!这么<span
                            class="un1">热</span>的天,再不出发,奶酪就<span class="un1">化</span>啦!</p>
                    <p class="block">蚂蚁队长:说得对!我现在就<span class="un1">搬</span>!</p>
                    <p class="block">【蚂蚁队长走到奶酪面前使劲抬】</p>
                    <p class="block">蚂蚁队长:哎哟,哎哟,哎哟哟。</p>
                    <p class="block">【蚂蚁队长一次也没抬起来】</p>
                    <p class="block3"><span class="hs">选段2</span></p>
                    <p class="block">蚂蚁队长:(起身)<span class="un1">我决定了</span>!大家<span
                            class="un1">一起搬</span>!这块奶酪以我为首,搬运的路上<span class="un1">不许偷吃</span>!</p>
                    <p class="block">蚂蚁们:<span class="un1">是</span>!</p>
                    <p class="block">【蚂蚁们迅速围成一圈,蚂蚁队长站在奶酪最前面】</p>
                    <p class="block">蚂蚁队长:听我口令!3!2!1!抬!</p>
                </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-left">36</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="40">
            <div v-if="showPageList.indexOf(40) > -1">
                <h1>
                    <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
                </h1>
                <div class="bodystyle">
                    <p class="block">【奶酪被抬起】</p>
                    <p class="block">大头蚂蚁:哇!这块奶酪<span class="un1">好香噢</span>!</p>
                    <p class="block">小眼镜蚂蚁:我想<span class="un1">咬</span>一口!</p>
                    <p class="block">小蚂蚁:如果能<span class="un1">舔一下</span>就好了!</p>
                    <p class="block">蚂蚁小妹:我的口水流出来了!</p>
                    <p class="block">蚂蚁队长:不许瞎想!不许偷吃!<span class="un1">出发</span>!</p>
                    <p class="block">【音乐起,蚂蚁们抬着奶酪向前走着】</p>
                    <p class="block">蚂蚁们:奶酪!奶酪!我们的奶酪!奶酪!奶酪!我们一起分享。</p>
                    <p class="block">【蚂蚁们陶醉中】</p>
                    <p class="block3"><span class="hs">选段3</span></p>
                    <p class="block">嘭—</p>
                    <p class="block">【蚂蚁们用劲过猛,奶酪的一个角掉了】</p>
                    <p class="block">蚂蚁小妹:<span class="un1">啊</span>!队长!奶酪的角<span class="un1">掉了</span>!</p>
                    <p class="block">【大家看到掉在地上的奶酪】</p>
                    <p class="block">蚂蚁们:哇哦!</p>
                    <p class="block">蚂蚁队长:等等!</p>
                    <p class="block">【舞台变光,演员动作定格】</p>
                    <p class="block">蚂蚁队长:掉了<span class="un1">一个角</span>,这该<span class="un1">怎么办</span>!<span
                            class="un1">丢掉</span>,实在<span class="un1">太可惜</span>!<span
                            class="un1">趁机吃掉</span>,又要犯不许偷嘴的禁令。怎么办呢?有个办法!我要是<span class="un1">偷嘴</span>谁也<span
                            class="un1">看不见</span>,<span class="un1">这样</span>不就行啦!大家听好啦!</p>
                </div>
                <!-- 此次为页脚部分(需要设置页码) -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-right">37</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="41">
            <div v-if="showPageList.indexOf(41) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <img src="../../assets/images/page5.png" alt="" />
                    <p class="block3"><span class="hs">选段4</span></p>
                    <p class="block">【舞台变光,演员立正站好】</p>
                    <p class="block">蚂蚁队长:休息一会儿!</p>
                    <p class="block">蚂蚁小妹:<span class="un1">为什么</span>要休息呀?</p>
                    <p class="block">小眼镜蚂蚁:队长!这块掉在地上的奶酪<span class="un1">怎么办呀</span>?</p>
                    <p class="block">大头蚂蚁:我们要不把它<span class="un1">分了吧</span>!</p>
                    <p class="block">蚂蚁队长:听我说!<span class="un1">休息</span>!<span
                            class="un1">立刻休息</span>!大家搬运太辛苦啦!分散开,哪里凉快就到哪里休息!</p>
                    <p class="block">【大家依旧不动】</p>
                    <p class="block">蚂蚁队长:全体都有!稍息!立正!向后—转!齐步—走!</p>
                    <p class="block">蚂蚁队长:立—定!原地休息!</p>
                    <p class="block">【蚂蚁们跟随口令消失在草丛里】</p>
                    <p class="block3"><span class="hs">选段5</span></p>
                    <p class="block">【蚂蚁队长向草丛里望去,确定没有声响】</p>
                    <p class="block">蚂蚁队长:(小声)嘿嘿嘿,吃掉后就说被风刮走或者就说被老鹰吃掉就好啦!</p>
                    <p class="block">【蚂蚁队长低下头,嗅了一下奶酪】</p>
                    <p class="block">蚂蚁队长:味道<span class="un1">真</span>香!</p>
                    <p class="block">【蚂蚁队长的手伸向奶酪渣,突然,奶酪人站了起来】</p>
                    <p class="block">【变光】</p>
                </div>
                <!-- 此次为页脚部分(需要设置页码) -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-left">38</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="42">
            <div v-if="showPageList.indexOf(42) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <img src="../../assets/images/page5.png" alt="" />
                    <p class="block">奶酪人:不许吃!</p>
                    <p class="block">蚂蚁队长:(吓了一跳)你你你!你怎么<span class="un1">站</span>起来啦!</p>
                    <p class="block">奶酪人:我<span class="un1">实在</span>看不下去啦!</p>
                    <p class="block">蚂蚁队长:(害怕)救命哇!奶酪<span class="un1">活</span>啦!</p>
                    <p class="block">【蚂蚁队长跑】</p>
                    <p class="block">奶酪人:<span class="un1">站住</span>!</p>
                    <p class="block">蚂蚁队长:你要干什么?</p>
                    <p class="block">奶酪人:<span class="un1">这块</span>,<span class="un1">你不能吃</span>!</p>
                    <p class="block">蚂蚁队长:为什么?</p>
                    <p class="block">奶酪人:<span class="un1">第一</span>!<span class="un1">你</span>定的规矩,今天搬运中,<span
                            class="un1">不许偷吃</span>!如果<span class="un1">你</span>做不到,你就<span
                            class="un1">不能要求别人</span>!<span class="un1">第二</span>!你是<span
                            class="un1">蚂蚁队长</span>,大家选你当队长,是对你的<span class="un1">信任</span>和<span
                            class="un1">尊重</span>!你却背着大家<span class="un1">偷吃</span>!<span class="un1">第三</span>!<span
                            class="un1">诚实守信</span>是美德,你吃掉奶酪要<span class="un1">撒谎</span>,撒了<span
                            class="un1">一个</span>谎就要用<span class="un1">无数</span>的谎来圆第一个谎,最后<span
                            class="un1">还是</span>会被发现!</p>
                    <p class="block">蚂蚁队长:(低头)我不吃了,我知道<span class="un1">错了</span>……可是,这掉在地上的奶酪怎么办呢?</p>
                    <p class="block">奶酪人:(想了想)<span class="un1">有办法</span>!你可以选择大家<span
                            class="un1">一起分</span>,也可以选择给年龄最小的蚂蚁吃!</p>
                    <p class="block">蚂蚁队长:<span class="un1">好主意</span>!我这就问问大家,谢谢你!</p>
                    <p class="block">【变光,奶酪慢慢地躺在地上】</p>
                    <p class="block">蚂蚁队长:(喊)<span class="un1">注意啦</span>!全体都有!稍息!立正!</p>
                </div>
                <!-- 此次为页脚部分(需要设置页码) -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-right">39</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="43">
            <div v-if="showPageList.indexOf(43) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <img src="../../assets/images/page5.png" alt="" />
                    <p>向后转!齐步走!</p>
                    <p class="block">【蚂蚁们由四面八方走回来】</p>
                    <p class="block">蚂蚁队长:大家休息好啦!我有一个<span class="un1">决定</span>!</p>
                    <p class="block">蚂蚁们:什么决定?</p>
                    <p class="block">蚂蚁队长:这点儿奶酪渣是刚才弄掉的,丢了可惜,(指向小蚂蚁)你是我们中年龄最小的,<span class="un1">你</span>吃掉它吧!</p>
                    <p class="block">【蚂蚁们鼓掌】</p>
                    <p class="block">【音乐起,大家劲儿比刚才更足,抬起奶酪向山洞走去】</p>
                    <p class="block">【收光】</p>
                </div>
            </div>
            <!-- 此次为页脚部分(需要设置页码) -->
            <div class="page-footer">
                <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                <div class="page-footer-number-left">40</div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "chapterFive",
    props: {
        showPageList: {
            type: Array,
        },
    },
    //在这里对调用的方法进行挂载
    mounted() {
    },
    data() {
        return {
        };
    },
    methods: {
    },
};
</script>
<style lang="less" scoped>
.w70 {
    width: 78%;
}
.fw-400 {
    font-weight: 400 !important;
}
.fz-26 {
    font-size: 26px !important;
}
.cover-img {
    position: absolute;
    top: 33%;
    left: 23%;
}
.division-line {
    width: 2px;
    height: 100%;
    background-color: red;
}
.macthing {
    background-color: rgb(188, 220, 164);
    padding: 5% 0%;
}
</style>
src/books/artAndDrama/view/components/index.vue
@@ -3,44 +3,20 @@
      <div id="searchDomBox" style="display: none">
        <div id="searchContent"></div>
      </div>
      <div
        class="page-content"
        :style="{
    <div class="page-content" :style="{
          fontSize: fontSize ? fontSize + 'px' : '16px',
          transform: `scale(${pageZoom ? pageZoom : 1})`,
          transformOrigin: 'center top',
        }"
      >
        <pageHeader
          v-if="showCatalogList.indexOf(1) > -1"
          :showPageList="loadPageList"
        ></pageHeader>
        <chapterOne
          v-if="showCatalogList.indexOf(2) > -1"
          :showPageList="loadPageList"
        ></chapterOne>
        <chapterTwo
          v-if="showCatalogList.indexOf(3) > -1"
          :showPageList="loadPageList"
        >
        </chapterTwo>
        <!-- <chapterThree
        v-if="showCatalogList.indexOf(4) > -1"
          :showPageList="loadPageList"
        ></chapterThree>
        <chapterFour
        v-if="showCatalogList.indexOf(5) > -1"
          :showPageList="loadPageList"
        ></chapterFour> -->
    }">
      <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader>
      <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList"></chapterOne>
      <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList"></chapterTwo>
      <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList"></chapterThree>
      <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList"></chapterFour>
      <chapterFive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></chapterFive>
      </div>
      <!-- 音频小窗播放组件 -->
      <miniAudio
      :path="audioPath"
      :currentTime="currentTime"
      @closeMiniAudio="closeMiniAudio"
      ref="audioPlayer"
    ></miniAudio>
    <miniAudio :path="audioPath" :currentTime="currentTime" @closeMiniAudio="closeMiniAudio" ref="audioPlayer"></miniAudio>
    </div>
  </template>
  
@@ -48,8 +24,9 @@
  import pageHeader from "./header.vue";
  import chapterOne from "./chapter001.vue";
  import chapterTwo from "./chapter002.vue";
  // import chapterThree from "./chapter003.vue";
  // import chapterFour from "./chapter004.vue";
import chapterThree from "./chapter003.vue";
import chapterFour from "./chapter004.vue";
import chapterFive from "./chapter005.vue";
  import NoteIcon from "@/assets/images/biji.png";
  import miniAudio from "@/components/miniAudio/index.vue";
  import _ from "lodash";
@@ -60,7 +37,7 @@
  export default {
    data() {
      return {
        catalogLength: 3, // 总章节数
      catalogLength: 6, // 总章节数
        showCatalogList: [], // 显示的章节
        loadThreshold: 300, // 触发加载阈值
        throttleThreshold: 100, // 节流阈值
@@ -734,8 +711,9 @@
          pageHeader,
          chapterOne,
          chapterTwo,
          // chapterThree,
          // chapterFour,
        chapterThree,
        chapterFour,
        chapterFive
   
        };
        // 遍历所有章节文件
@@ -889,9 +867,10 @@
      pageHeader,
      chapterOne,
      chapterTwo,
      miniAudio
      // chapterThree,
      // chapterFour,
    miniAudio,
    chapterThree,
    chapterFour,
    chapterFive
      
    },
  };
@@ -902,6 +881,7 @@
    width: 100%;
    height: 100%;
    overflow: auto;
    .page-content {
      max-width: 816px;
      min-width: 375px;
@@ -910,4 +890,3 @@
    }
  }
  </style>