艺术戏剧（整本分页）

user1

2024-06-17 f99d327dd2a9923c511373e76eef533457e4af32

艺术戏剧（整本分页）

 src/App.vue

@@ -65,7 +65,7 @@
        process.env.VUE_APP_RESOURCE_CTX +
          (process.env.VUE_APP_ENV == "product"
            ? process.env.VUE_APP_BOOK_ID
            : "artAndDance")
            : "artAndDrama")
      );
      // 测试试读30页
      // this.activeBook.tryPageCount = 10;

 src/books/artAndDrama/assets/images/unit2-header-img.png

 src/books/artAndDrama/assets/images/unit3-header-img.png

 src/books/artAndDrama/assets/images/unit4-header-img.png

 src/books/artAndDrama/assets/main.less

@@ -1,7 +1,7 @@
.ans-drama {
    width: 100%;
    height: 100%;
    font-family: "宋体", SimSun, sans-serif;
    font-family: "STKaiti", SimSun, sans-serif;
span.un1{
    -webkit-text-emphasis-style:dot;
   -moz-text-emphasis-style:dot;
@@ -50,8 +50,9 @@
div.bodystyle {
  font-size:18px;
  text-align:justify;
  margin:5%;
  margin:5% 15%;
  line-height:30px;

}

span.zt-0
@@ -102,7 +103,8 @@

p
{
  margin-top:1em;
  // margin-top:1em;
  margin: 0;
  text-indent:2em;
  line-height:30px;
  font-size:18px;
@@ -169,7 +171,7 @@
  text-align:center;
  font-size:1.8em;
  color:#515594;
  margin-bottom:0.5cm;
  margin-bottom:0%;
  margin-top:0.5cm;
}

@@ -252,6 +254,7 @@

.img-0{    
width:100%;
height: auto;
}
.imz{
   width:96%;
@@ -512,6 +515,13 @@
      outline: none;
    }
  }
  // 整行的input标签
  .input-w-66{
    width: 66%;
  }
  .headerimg{
    margin-left: 5%;
  }
  .page-footer {
    position: relative;
    display: flex;

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

@@ -4,7 +4,7 @@
      <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">
@@ -24,14 +24,14 @@
          <div class="page-footer-number-right">1</div>
        </div>
      </div>
    </div> 
    </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" />
@@ -43,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" class="macthing" :primaryColor="'transparent'"></matching>
          <p>小提示：加点的文字为本句话中的逻辑重音，在朗读发音时请重读。</p>

        </div>
        <p><br /></p>
        <!-- 此次为页脚部分（需要设置页码） -->
@@ -97,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" />
@@ -109,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">
@@ -147,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>
@@ -173,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>
            朱自清：《春》，见温儒敏等：《义务教育教科书 语文
@@ -189,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>
@@ -205,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>
      <!-- 此次为页脚部分（需要设置页码） -->
@@ -231,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">
@@ -260,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>
            朱自清：《春》，见温儒敏等：《义务教育教科书 语文
@@ -279,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>
@@ -334,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" />
@@ -348,7 +354,7 @@
              controlslist="nodownload" class="w100"
              style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
          <h2>视频: 我们是一家人</h2>
           </p>
          </p>
        </div>
      </div>
      <!-- 此次为页脚部分（需要设置页码） -->
@@ -370,9 +376,9 @@
    showPageList: {
      type: Array,
    },
    primaryColor:{
      type:String,
      default:"red"
    primaryColor: {
      type: String,
      default: "red"
    }
  },
  //在这里对调用的方法进行挂载
@@ -551,6 +557,9 @@
        JSON.stringify(this.questionData)
      );
    },
    audioPlay(e) {
      this.$emit('closeAudio', e.srcElement.currentSrc)
    }
  },
};
</script>
@@ -579,7 +588,8 @@
  height: 100%;
  background-color: red;
}
.macthing{

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

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

@@ -4,7 +4,7 @@
      <div v-if="showPageList.indexOf(14) > -1">
        <h1 id="a004">
          <img class="img-0" alt="" src="../../assets/images/dy2.jpg" />
          <audio :src="auidoPathOne" controls></audio>
          <audio :src="auidoPathOne" controls class="audio"  @play="audioPlay"></audio>
        </h1>
        <div class="bodystyle">
          <div class="bk">
@@ -31,8 +31,8 @@
        <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="" />
          <h2 id="b006">第一课　五官的力量</h2>
          <h3 class="lefth3" id="c011">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
@@ -70,17 +70,17 @@
    <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/unit2-header-img.png" alt="" style="height: auto; width: 100%" />
        </h1>
        <div class="bodystyle">
          <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>
          <p>黄色：柠檬、<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 15%"/>、<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 15%"/>。</p>
          <p>红色：鞭炮、<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 15%"/>、<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 15%"/>。</p>
          <p>绿色：叶子、<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 15%"/>、<input v-model="questionData.warnUp.eight" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 15%"/>。</p>
          <p>黑色：黑板、<input v-model="questionData.warnUp.nine" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 15%"/>、<input v-model="questionData.warnUp.ten" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 15%"/>。</p>
          <p>蓝色：大海、<input v-model="questionData.warnUp.eleven" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 15%"/>、<input v-model="questionData.warnUp.twelve" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 15%"/>。</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>
@@ -101,14 +101,15 @@
        <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">
          <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>“<input v-model="questionData.warnUp.thirteen" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 80%"/>。”</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>
          <p>“<input v-model="questionData.warnUp.fourteen" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 80%"/>。”</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>
@@ -125,7 +126,7 @@
    <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/unit2-header-img.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <p><span class="hs">这块奶酪太沉了，我们休息一下吧！</span>（一只弱小的蚂蚁，在向蚂蚁队长请求休息）</p>
@@ -143,6 +144,7 @@
        <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">
          <h2 id="b009">第四课　真听真看真感受</h2>
          <h3 class="lefth3" id="c017"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
@@ -165,7 +167,7 @@
    <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/unit2-header-img.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <h2 id="b010">单元活动任务</h2>
@@ -190,17 +192,19 @@
        <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">
          <p><span class="hs1">◇</span>吹乒乓球练习</p>
          <p>用气息将桌面上的乒乓球从“起点”运送至“终点”，运送过程中避免乒乓球触碰障碍物。</p>
          <h3 class="lefth3" id="c020"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
          <h3 class="lefth3" id="c020"><img class="img-gn1" alt="" src="../../assets/images/tzyys.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>
          <h2>视频: 惟妙惟肖的人物</h2>
        </p>
        </div>
      </div>
      <!-- 此处为页脚部分（需要设置页码） -->
@@ -288,6 +292,9 @@
        JSON.stringify(this.questionData)
      );
    },
    audioPlay(e) {
      this.$emit('closeAudio',e.srcElement.currentSrc)
    }
  },
};
</script>

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

@@ -5,7 +5,7 @@
                <h1 id="a004">
                    <!-- 这里的动图有问题，没有背景图片 -->
                    <img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
                    <audio :src="auidoPathOne" class="audio" controls></audio>
                    <audio :src="auidoPathOne" controls class="audio" @play="audioPlay" ></audio>
                </h1>
                <div class="bodystyle">
                    <div class="bk">
@@ -28,8 +28,9 @@
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%;" />
                </h1>
                <img class="headerimg" src="../../assets/images/page5.png" alt="" />
                <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>
@@ -52,7 +53,7 @@
        <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%" />
                    <img src="../../assets/images/unit3-header-img.png" alt="" style="height: auto; width: 100%" />
                </h1>
                <div class="bodystyle">
                    <h2 id="b012">第二课　意外发生了！</h2>
@@ -77,6 +78,7 @@
                <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">
                    <h2 id="b013">第三课　我该怎么办？</h2>
                    <h3 class="lefth3" id="c025"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
@@ -96,10 +98,11 @@
        <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>
                    <img src="../../assets/images/unit3-header-img.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>
@@ -110,7 +113,7 @@
                    <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>
                    <p><input v-model="questionData.warnUp.enight" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 85%"/></p>
                </div>
                <!-- 此次为页脚部分（需要设置页码） -->
                <div class="page-footer">
@@ -140,7 +143,7 @@
        <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" />
                    <img src="../../assets/images/unit3-header-img.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <h2 id="b015">单元活动任务</h2>
@@ -166,8 +169,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">
                    <h3 class="lefth3" id="c030"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <h3 class="lefth3" id="c030"><img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" /></h3>
                    <p><span class="hs1">◇</span>劳动最光荣！请为家中长辈做一件力所能及的事情，用实际行动表达你的爱意！体验过程中要记住每一个动作的细节，再尝试以无实物表演的方式进行展示。
                    </p>
                    <p class="center">
@@ -360,6 +364,9 @@
                JSON.stringify(this.questionData)
            );
        },
        audioPlay(e) {
      this.$emit('closeAudio',e.srcElement.currentSrc)
    }
    },
};
</script>

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

@@ -5,7 +5,7 @@
                <h1 id="a004">
                    <!-- 这里的动图有问题，没有背景图片 -->
                    <img class="img-0" alt="" src="../../assets/images/dy4.jpg" />
                    <audio :src="auidoPathOne" class="audio" controls></audio>
                    <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
                </h1>
                <div class="bodystyle">
                    <div class="bk">
@@ -28,13 +28,14 @@
                <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="" />
                    
                    <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>
                    <p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 90%"/></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>
@@ -55,7 +56,7 @@
        <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%" />
                    <img src="../../assets/images/unit4-header-img.png" alt="" style="height: auto; width: 100%" />
                </h1>
                <div class="bodystyle">
                    <h2 id="b017">第二课　造型变变变</h2>
@@ -76,6 +77,7 @@
                <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">
                    <h3 class="lefth3" id="c034"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>动动手，为《一块奶酪》中的蚂蚁角色设计简单的服装吧！</p>
@@ -91,10 +93,9 @@
        <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" />
                    <img src="../../assets/images/unit4-header-img.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>
@@ -114,8 +115,8 @@
                <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="" />
                    <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>
@@ -134,7 +135,7 @@
        <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" />
                    <img src="../../assets/images/unit4-header-img.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <h2 id="b020">单元活动任务</h2>
@@ -164,8 +165,8 @@
                <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>第1至第2个八拍：双手下垂，手心向下，双肩上提再沉下，两拍一动。</p>
                    <p>第3至第4个八拍：双手下垂，手心向下，左右肩膀依次上提再沉下，一拍一动。</p>
                    <p><span class="hs1">◇</span>伸展运动</p>
@@ -253,8 +254,12 @@
                "artAndDrama-book-question-four",
                JSON.stringify(this.questionData)
            );
        },
        },    
        audioPlay(e) {
      this.$emit('closeAudio',e.srcElement.currentSrc)
    }
    },

};
</script>


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

@@ -38,10 +38,8 @@
                <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="block">大头蚂蚁：（突然）<span class="un1">报告</span>！</p>
                    <p class="block">蚂蚁队长：怎么了？</p>
                    <p class="block">大头蚂蚁：（指着）这里有一块大奶酪！</p>
                    <p class="block">【一块奶酪（演员）趴在角落处】</p>
                    <p class="block">蚂蚁队长：（兴奋）哦？</p>
@@ -78,7 +76,6 @@
                    <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>
@@ -113,8 +110,8 @@
                <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="block3"><span class="hs">选段4</span></p>
                    <p class="block">【舞台变光，演员立正站好】</p>
                    <p class="block">蚂蚁队长：休息一会儿！</p>
@@ -147,8 +144,8 @@
                <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="block">奶酪人：不许吃！</p>
                    <p class="block">蚂蚁队长：（吓了一跳）你你你！你怎么<span class="un1">站</span>起来啦！</p>
                    <p class="block">奶酪人：我<span class="un1">实在</span>看不下去啦！</p>
@@ -185,8 +182,8 @@
                <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>向后转！齐步走！</p>
                    <p class="block">【蚂蚁们由四面八方走回来】</p>
                    <p class="block">蚂蚁队长：大家休息好啦！我有一个<span class="un1">决定</span>！</p>

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

@@ -9,14 +9,15 @@
      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>
      <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"></chapterOne>
      <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"></chapterTwo>
      <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"></chapterThree>
      <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"></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>

@@ -858,6 +859,22 @@
        }
      }
    },
    // 点击音频播放，关闭其他音频
    closeAudio(path) {
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".audio");
      allVideo = Array.from(allVideo);
      if (allVideo.length) {
        for (let index = 0; index < allVideo.length; index++) {
          const item = allVideo[index];
          if (item.currentSrc != path) {
            item.pause()
          }
        }
      }
      this.closeMiniAudio()
    },
    // 关闭mini video
    closeMiniAudio() {
      this.audioPath = "";