user1
2024-06-19 b8e76c47abeebb8e7531c4ae6272699d1ab81f3a
艺术戏剧(连线题优化)
8个文件已修改
3个文件已添加
1059 ■■■■■ 已修改文件
src/books/artAndDrama/assets/images/icon/heart-check.png 补丁 | 查看 | 原始文档 | blame | 历史
src/books/artAndDrama/assets/images/icon/heart.png 补丁 | 查看 | 原始文档 | blame | 历史
src/books/artAndDrama/assets/images/unit5-header-img.png 补丁 | 查看 | 原始文档 | blame | 历史
src/books/artAndDrama/assets/main.less 79 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/books/artAndDrama/view/components/chapter001.vue 208 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/books/artAndDrama/view/components/chapter002.vue 204 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/books/artAndDrama/view/components/chapter003.vue 160 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/books/artAndDrama/view/components/chapter004.vue 144 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/books/artAndDrama/view/components/chapter005.vue 210 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/books/artAndDrama/view/components/header.vue 21 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/books/artAndDrama/view/components/index.vue 33 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/books/artAndDrama/assets/images/icon/heart-check.png
src/books/artAndDrama/assets/images/icon/heart.png
src/books/artAndDrama/assets/images/unit5-header-img.png
src/books/artAndDrama/assets/main.less
@@ -1,7 +1,7 @@
.ans-drama {
    width: 100%;
    height: 100%;
    font-family: "STKaiti", SimSun, sans-serif;
    font-family: "宋体","STKaiti", SimSun, sans-serif;
span.un1{
    -webkit-text-emphasis-style:dot;
   -moz-text-emphasis-style:dot;
@@ -20,8 +20,6 @@
  li {
      list-style-type:none;
  }
.ls1{
      font-family:"HiFont Hei GB";
  color:#30AAD1;
@@ -50,7 +48,7 @@
div.bodystyle {
  font-size:18px;
  text-align:justify;
  margin:5% 15%;
  margin:5% 12%;
  line-height:30px;
}
@@ -80,9 +78,8 @@
.note{
font-size:0.85em;
padding: 0 9%;
}
.img{
  text-align:center;
  font-size:0.8em;
@@ -100,7 +97,6 @@
  text-indent:0em;
}
p
{
  // margin-top:1em;
@@ -109,7 +105,6 @@
  line-height:30px;
  font-size:18px;
  text-align:justify;
}
.cover {
  width:100%;
@@ -121,7 +116,6 @@
  margin-right:0%;
  text-indent:0em;
}
.center1
{
  font-family:"STKaiti";
@@ -141,7 +135,7 @@
}
.left1 {
  font-family:"STKaiti";
  // font-family:"STKaiti";
  text-indent:0em;
  margin-left:0%;
  margin-right:0%;
@@ -183,12 +177,11 @@
h2 {
  font-family:"STKaiti";
  text-align:center;
  font-size:1.5em;
  margin-top:1.5em;
  margin-bottom:1.5em;
  margin-top:0%;
  margin-bottom:1.8em;
  text-indent:0em;
}
@@ -217,7 +210,8 @@
  text-align:left;
  margin-top:0.2em;
  margin-bottom:0.2em;
  margin-bottom:1.2em;
  margin-left: 2em;
  text-indent:0em;
}
@@ -254,7 +248,6 @@
.img-0{    
width:100%;
height: auto;
}
.imz{
   width:96%;
@@ -325,6 +318,7 @@
{
  font-family:"STKaiti";
  font-size:1.15em;
  font-weight: 400;
}
.block1
@@ -344,8 +338,7 @@
  text-indent:0em;
}
.block3
{
.block3{
  font-weight:bold;
  font-family:"STKaiti";
  font-size:1.2em;
@@ -398,7 +391,7 @@
}
.img-gn{    
  height:2em;
  margin-bottom:-0.4em;
  margin-bottom:-1.9em;
}
.img-gn1{        
@@ -409,11 +402,12 @@
  background:#C6DFA5;
  padding:0.2em 0.5em 0.2em 0.5em;
  margin-top:1em;
  margin-left:0.5em;
  margin-right:0.5em;
  margin-left:1em;
  margin-right:1em;
  border-radius:1em;
  margin-bottom:1.5em;
  font-size:1.1em;
  padding-left: 1em;
}
 // 自定义
@@ -426,7 +420,46 @@
    background-color: #fff;
    padding-bottom: 117px;
  }
  // .front{
  //   font-family:"SimSun";
  //   font-weight: bold;
  //   font-size: 18px;
  // }
  .text{
  margin: 0 8%;
  font-family: "STkaiti";
  font-size: 19px;
  }
  .text1{
  margin-bottom: 3%;
  font-family: "STkaiti";
  font-size: 22px;
  }
  //底部参考文献的样式
  .references{
    font-family: "STkaiti";
    font-size: 15px;
  }
  //视频底部字体及图片样式
  .videoname{
    display: flex;
    justify-content: center;
  }
  .collect-btn {
    cursor: pointer;
    width: 20px;
    height: 20px;
    margin-left: 10px;
    margin-top: 0.8%;
  }
  .problem{
    font-family:"kaiti";
    font-size:1.6em;
    font-weight: normal;
  }
  .lesson1{
    margin-top: 0%;
  }
  ul {
    list-style: none;
    margin: 0;
@@ -516,8 +549,8 @@
    }
  }
  // 整行的input标签
  .input-w-66{
    width: 66%;
  .input-w-60{
    width: 60%;
  }
  .headerimg{
    margin-left: 5%;
src/books/artAndDrama/view/components/chapter001.vue
@@ -13,7 +13,7 @@
                <img class="img-gn" alt="" src="../../assets/images/dydd.jpg" />
              </p>
            </div>
            <p class="block">
            <p class="block" style="margin:  8% 5% 5% 7%">
              在故事《一块奶酪》中,蚂蚁家庭的每一位成员都为了共同的目标分工协作、努力奋斗,在面对诱惑和挑战时更是严于律己、遵守团队纪律。本单元,让我们读一读《一块奶酪》的故事,学习蚂蚁们的优秀品格吧!
            </p>
          </div>
@@ -31,25 +31,23 @@
          <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="b001">第一课 齐心协力</h2>
        <div class="bodystyle" style="margin-top: 3%">
          <h2 id="b001" class="problem">第一课 齐心协力</h2>
          <h3 class="lefth3" id="c001">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p>
          <p class="text">
            在语言表述中,为了突出或强调某些意思,我们会使用“逻辑重音”这一技巧。同样一句话,不同的逻辑重音可以表达出不一样的意思。
          </p>
          <p>
          <p class="text">
            <span class="hs1">◇</span>大声朗读下面的句子,连一连不同逻辑重音强调的意思。
          </p>
          <h1>
            <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
          </h1>
          <!-- 连线题 -->
          <matching :rawData="rawData" :item="question" class="macthing" :primaryColor="'transparent'"></matching>
          <p>小提示:加点的文字为本句话中的逻辑重音,在朗读发音时请重读。</p>
          <p class="text">小提示:加点的文字为本句话中的逻辑重音,在朗读发音时请重读。</p>
        </div>
        <p><br /></p>
        <!-- 此次为页脚部分(需要设置页码) -->
@@ -61,34 +59,45 @@
    </div>
    <div class="page-box" page="6">
      <div v-if="showPageList.indexOf(6) > -1">
        <h1>
          <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
        </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>
          <h3 class="lefth3" id="c001"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
          <p class="text"><span class="hs1">◇</span>请选出你认为正确的答案。</p>
          <p class="center openImgBox">
            <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>
          <p class="text">蚂蚁是典型的(  )昆虫。(多选)</p>
          <p class="text">A.群居</p>
          <p class="text">B.社会性</p>
          <p class="text">C.独居</p>
          <p class="text">蚂蚁内部有(  )分工。(多选)</p>
          <p class="text">A.明确的</p>
          <p class="text">B.奇怪的</p>
          <p class="text">C.有序的</p>
          <p class="text">一个(  )群体少不了默契的配合。(多选)</p>
          <p class="text">A.团结的</p>
          <p class="text">B.优秀的</p>
          <p class="text">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"
            controlslist="nodownload" class="w100 video"  @play="videoPlay"
            style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
          <h2>视频: 我们是一家人</h2>
            <p class="center videoname">
            <span>视频:我们是一家人 </span>
            <el-tooltip
              class="item"
              effect="dark"
              :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
              placement="top-start"
            >
              <img
                :src="chapterData.isCollectVideo ? collectCheck : collectImg"
                alt=""
                class="collect-btn"
                @click="handleCollect('video')"
              />
            </el-tooltip>
          </p>
        </div>
        <!-- 此次为页脚部分(需要设置页码) -->
        <div class="page-footer">
@@ -103,16 +112,15 @@
          <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="b002">第二课 津津乐道</h2>
        <div class="bodystyle" style="margin-top: 3%">
          <h2 id="b002" class="problem">第二课 津津乐道</h2>
          <h3 class="lefth3" id="c003">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p>
          <p class="text">
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来,加点的字请重读。
          </p>
          <h1><audio :src="auidoPathThree" controls class="audio" @play="audioPlay"></audio></h1>
          <div class="bj3">
            <p class="center">
              <span class="hs">春<a id="w1"><sup>1</sup></a>(节选)</span>
@@ -129,14 +137,13 @@
          <h3 class="lefth3" id="c004">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <p>
          <p class="text">
            <span class="hs1">◇</span>在《一块奶酪》的故事中,小蚂蚁们都有各自的立场,你能理解他们的想法吗?请你和同伴根据故事内容讨论一下。
          </p>
          <hr />
          <p class="note">
          <hr style="margin-left: 9%; margin-top: 10%; width: 25%;" />
          <p class="note left1 references">
            <a id="m1">1</a>
            朱自清:《春》,见温儒敏等:《义务教育教科书 语文
            七年级上册》,2页,北京,人民教育出版社,2016。
            朱自清:《春》,见温儒敏等:《义务教育教科书语文七年级上册》,2页,北京,人民教育出版社,2016。
          </p>
        </div>
        <!-- 此次为页脚部分(需要设置页码) -->
@@ -151,12 +158,12 @@
        <h1>
          <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <h2 id="b003">第三课 内心的声音</h2>
        <div class="bodystyle" style="margin-top: 3%">
          <h2 id="b003" class="problem">第三课 内心的声音</h2>
          <h3 class="lefth3" id="c006">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p>
          <p class="text">
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来,加点的字请重读。
          </p>
          <h1 class="lefth3 openImgBox" id="c005">
@@ -177,18 +184,18 @@
                class="un1">轻悄悄</span>的,草<span class="un1">软绵绵</span>的。
            </p>
          </div>
          <hr style="margin-left: 0; width: 20%;" />
          <p class="note">
          <hr style="margin-left: 9%; width: 20%;" />
          <p class="note left1 references">
            <a id="m1">1</a>
            朱自清:《春》,见温儒敏等:《义务教育教科书 语文
            七年级上册》,2页,北京,人民教育出版社,2016。
          </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">5</div>
      </div>
      </div>
    </div>
    <div class="page-box" page="9">
@@ -204,16 +211,14 @@
          <h1 class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/1-4.gif" style="height: auto; width: 50%" />
          </h1>
          <p>
            <span
              class="hs1">◇</span>生活中,我们总会遇到各种各样的诱惑。面对诱惑时,我们的内心常常会有两个不同的声音出现:一个声音要求我们严于律己,另一个声音要求我们随心所欲。请你分析一下,当蚂蚁队长面对掉落的奶酪渣的诱惑时,他内心的两个声音会说些什么呢?
          <p class="text">
            <span class="hs1">◇</span>生活中,我们总会遇到各种各样的诱惑。面对诱惑时,我们的内心常常会有两个不同的声音出现:一个声音要求我们严于律己,另一个声音要求我们随心所欲。请你分析一下,当蚂蚁队长面对掉落的奶酪渣的诱惑时,他内心的两个声音会说些什么呢?
          </p>
          <p>正义队长:“
            <input v-model="questionData.warnUp.one" class="input-bottom-border input-w-66"  @change="setBookQuestion" />。”
          <p class="text">正义队长:“
            <input v-model="questionData.warnUp.one" class="input-bottom-border input-w-60"  @change="setBookQuestion" />。”
          </p>
          <p>黑暗队长:“ <input v-model="questionData.warnUp.two" class="input-bottom-border input-w-66" @change="setBookQuestion" />。”
          <p class="text">黑暗队长:“ <input v-model="questionData.warnUp.two" class="input-bottom-border input-w-60" @change="setBookQuestion" />。”
          </p>
        </div>
      </div>
      <!-- 此次为页脚部分(需要设置页码) -->
      <div class="page-footer">
@@ -221,17 +226,18 @@
        <div class="page-footer-number-left">6</div>
      </div>
    </div>
    </div>
    <div class="page-box" page="10">
      <div v-if="showPageList.indexOf(10) > -1">
        <h1>
          <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <h2 id="b004">第四课 身临其境</h2>
        <div class="bodystyle" style="margin-top: 3%">
          <h2 id="b004" class="problem">第四课 身临其境</h2>
          <h3 class="lefth3" id="c007">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p>
          <p class="text">
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来,加点的字请重读。
          </p>
          <h1>
@@ -252,10 +258,10 @@
          <h3 class="lefth3" id="c008">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <p>
          <p class="text">
            <span class="hs1">◇</span>假如你是搬运奶酪的蚂蚁,你要怎么搬运不同形状、大小的奶酪呢?请先为自己设计一个剧本吧:
          </p>
          <p>
          <p class="text">
            我是蚂蚁 <input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" style=" width: 10%;"
              @change="setBookQuestion" />(名字),今天是
            <input v-model="questionData.warnUp.four" class="input-bottom-border fz-18" style=" width: 10%;"
@@ -264,18 +270,18 @@
              v-model="questionData.warnUp.six" class="input-bottom-border fz-18" style=" width: 10%;"
              @change="setBookQuestion" />(身体感觉)啊!
          </p>
          <hr style="margin-left: 0; width: 20%;" />
          <p class="note">
          <hr style="margin-left: 9%; width: 20%;" />
          <p class="note references">
            <a id="m1">1</a>
            朱自清:《春》,见温儒敏等:《义务教育教科书 语文
            七年级上册》,2页,北京,人民教育出版社,2016。
          </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">7</div>
      </div>
      </div>
    </div>
    <div class="page-box" page="11">
@@ -284,15 +290,14 @@
          <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">
        <div class="bodystyle" style="margin-top: 3%;">
          <p class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/1-5.gif" />
          </p>
          <p>
          <p class="text">
            <span class="hs1">◇</span>蚂蚁队长把奶酪渣留给了年龄最小的蚂蚁,赢得了大家的认可。在生活中,你曾经像“蚂蚁队长”一样爱护弱小吗?或者像“小蚂蚁”一样得到过哥哥姐姐们的关爱吗?
          </p>
        </div>
      </div>
      <!-- 此次为页脚部分(需要设置页码) -->
      <div class="page-footer">
@@ -300,38 +305,39 @@
        <div class="page-footer-number-left">8</div>
      </div>
    </div>
    </div>
    <div class="page-box" page="12">
      <div v-if="showPageList.indexOf(12) > -1">
        <h1>
          <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <h2 id="b005">单元活动任务</h2>
        <div class="bodystyle" style="margin-top: 3%">
          <h2 id="b005" class="problem">单元活动任务</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 class="text"><span class="hs1">◇</span>放大缩小</p>
          <p class="text">
            请你交替“放大”和“缩小”五官。在“放大”时,想象五官要飞到外太空;在“缩小”时,想象五官全部缩小到了鼻尖上。
          </p>
          <p><span class="hs1">◇</span>提升苹果肌</p>
          <p>
          <p class="text"><span class="hs1">◇</span>提升苹果肌</p>
          <p class="text">
            想象你在一个陌生的地方,谁都不认识,突然遇见了好朋友,你很高兴,上前和他/她打招呼。做一做你此时的表情吧。
          </p>
          <p><span class="hs1">◇</span>微笑说“ang”</p>
          <p>
          <p class="text"><span class="hs1">◇</span>微笑说“ang”</p>
          <p class="text">
            请你试一试在提升苹果肌的基础上,发出“ang”的音。声音要尽可能拉长、保持稳定,并向远送。
          </p>
          <p><span class="hs1">◇</span>向远山喊“阿毛”</p>
          <p>
          <p class="text"><span class="hs1">◇</span>向远山喊“阿毛”</p>
          <p class="text">
            想象自己站在一座高山上,好朋友“阿毛”站在对面的高山上,你要如何喊他呢?
          </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">9</div>
      </div>
      </div>
    </div>
    <div class="page-box" page="13">
@@ -340,27 +346,42 @@
          <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">
        <div class="bodystyle" style="margin-top: 3%">
          <h3 class="lefth3" id="c010">
            <img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
          </h3>
          <p><span class="hs1">◇</span>排一排·演一演:孔融让梨</p>
          <p>
          <p class="text"><span class="hs1">◇</span>排一排·演一演:孔融让梨</p>
          <p class="text">
            孔融四岁就懂礼貌、知谦让,是我们学习的好榜样,让我们运用本单元的戏剧知识,把他的故事表演出来吧!
          </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"
              controlslist="nodownload" class="w100 video"  @play="videoPlay"
              style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
          <h2>视频: 我们是一家人</h2>
          </p>
        </div>
          <p class="center videoname">
            <span>视频:我们是一家人 </span>
            <el-tooltip
              class="item"
              effect="dark"
              :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
              placement="top-start"
            >
              <img
                :src="chapterData.isCollectVideo ? collectCheck : collectImg"
                alt=""
                class="collect-btn"
                @click="handleCollect('video')"
              />
            </el-tooltip>
          </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">10</div>
      </div>
      </div>
    </div>
  </div>
@@ -391,10 +412,18 @@
  },
  data() {
    return {
      collectImg: require("../../assets/images/icon/heart.png"),
      collectCheck: require("../../assets/images/icon/heart-check.png"),
      videoPathOne: "",
      auidoPathOne: "",
      auidoPathTwo: "",
      auidoPathThree: "",
      chapterData: {
        isCollectImg: false,
        isCollectVideo: false,
        txtOne: "",
        txtTwo: "",
      },
      rawData: {
        left: [
          {
@@ -436,6 +465,7 @@
      question: {
        KnowledgePoint: "123",
        analysis: "123",
        //正确答案
        answer: [
          {
            id: "FB34",
@@ -461,6 +491,7 @@
        optionStyle: undefined,
        id: 489306,
        options: {
          //
          linkValues: [
            {
              oldId: "64D6",
@@ -506,6 +537,7 @@
        titleDescription: "1",
        userChoise: [],
        value: [],
        // answerImg: require("../../assets/images/matching-one.png"),
      },
      questionData: {
        warnUp: {
@@ -559,7 +591,24 @@
    },
    audioPlay(e) {
      this.$emit('closeAudio', e.srcElement.currentSrc)
    },
    videoPlay(e) {
      this.$emit('closeVideo',e.srcElement.currentSrc)
    },
    handleChapterData() {
      localStorage.setItem(
        "math-chapterData",
        JSON.stringify(this.chapterData)
      );
    },
    handleCollect(type) {
      if (type == "img") {
        this.chapterData.isCollectImg = !this.chapterData.isCollectImg;
      } else if (type == "video") {
        this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
    }
      this.handleChapterData();
    },
  },
};
</script>
@@ -591,6 +640,7 @@
.macthing {
  background-color: rgb(188, 220, 164);
  padding: 5% 5%;
  padding: 3% 0;
  margin: 0% 8%;
}
</style>
src/books/artAndDrama/view/components/chapter002.vue
@@ -13,7 +13,7 @@
                <img class="img-gn" alt="" src="../../assets/images/dydd.jpg" />
              </p>
            </div>
            <p class="block">
            <p class="block" style="margin:  8% 5% 5% 7%">
              戏剧表演中的动作、体态、眼神、声音在塑造角色时起到了重要的作用。本单元我们将继续学习《一块奶酪》的故事,并以偶剧的形式进行表演。
            </p>
          </div>
@@ -32,34 +32,37 @@
          <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="b006">第一课 五官的力量</h2>
        <div class="bodystyle" style="margin-top: 3%">
          <h2 id="b006" class="problem">第一课 五官的力量</h2>
          <h3 class="lefth3" id="c011">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p><span class="hs1">◇</span>我是小画家</p>
          <p>保持头部不动,试着用眼神画出下面的图案吧!</p>
          <p class="text"><span class="hs1">◇</span>我是小画家</p>
          <p class="text">保持头部不动,试着用眼神画出下面的图案吧!</p>
          <p class="center">
            <img class="img-e" alt="" src="../../assets/images/0016-1.jpg" />
          </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 class="text"><span class="hs1">◇</span>嗅觉大冒险</p>
          <p class="text">
            你最爱吃的食物是 <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 class="text">
            你最不爱吃的食物是 <input v-model="questionData.warnUp.two" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 10%" />。当闻到它的味道时,你会做出什么表情呢?
          </p>
          <h3 class="lefth3 openImgBox" id="c012">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <p>
          <div style="display: flex;  justify-content: flex-start;">
            <p class="text" style="width: 50%">
            <span class="hs1">◇</span>以小组为单位,使用手偶道具表演附录中的剧本选段2。
          </p>
          <p class="center openImgBox">
            <p class="openImgBox" style="width: 50%">
            <img class="img-e" alt="" src="../../assets/images/2-1.gif" />
          </p>
        </div>
        <p><br /></p>
        </div>
        <!-- 此次为页脚部分(需要设置页码) -->
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
@@ -72,22 +75,32 @@
        <h1>
          <img src="../../assets/images/unit2-header-img.png" alt="" style="height: auto; width: 100%" />
        </h1>
        <div class="bodystyle">
          <h2 id="b007">第二课 明察秋毫</h2>
        <div class="bodystyle" style="margin-top: 3%;">
          <h2 id="b007" class="problem">第二课 明察秋毫</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: 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="text"><span class="hs1">◇</span>我们的世界五彩斑斓。请你填一填,提到这些颜色,你想到了哪些事物?</p>
          <p class="text">黄色:柠檬、<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 class="text">红色:鞭炮、<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 class="text">绿色:叶子、<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 class="text">黑色:黑板、<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 class="text">蓝色:大海、<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" style="margin-top: 7%;"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
          <p class="text"><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>
          <p class="text">蚂蚁队长走路昂首挺胸、步伐坚定,它是一只(  )蚂蚁;小蚂蚁走起路来小心翼翼,眼神飘忽不定,它是一只(  )蚂蚁;蚂蚁小妹面带微笑,时刻愿意帮助大家,它是一只(  )蚂蚁。</p>
          <p class="text">A.胆小的</p>
          <p class="text">B.善良的</p>
          <p class="text">C.沉稳的</p>
        </div>
        <!-- 此次为页脚部分(需要设置页码) -->
        <div class="page-footer">
@@ -102,19 +115,21 @@
          <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>
        <div class="bodystyle" style="margin-top: 3%;">
          <h2 id="b008" class="problem">第三课 闻声识人</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: 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: 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>
          <p><span class="hs">这一大块奶酪都是我的了!</span>(一只善良的蚂蚁,在帮助他人后得到了奖励)</p>
          <p><span class="hs">这块奶酪太沉了,我们休息一下吧!</span>(严肃的蚂蚁队长,向队伍发出命令)</p>
          <p class="text">常言道:良言一句三冬暖,恶语伤人六月寒。语言在人与人的交往中起着重要的作用,有着无穷的力量。</p>
          <p class="text"><span class="hs1">◇</span>如果朋友心情不好,你该怎么安慰他/她呢?</p>
          <p class="text">“<input v-model="questionData.warnUp.thirteen" class="input-bottom-border fz-18" @change="setBookQuestion"
              style="width: 80%" />。”</p>
          <p class="text"><span class="hs1">◇</span>如果你邀请好朋友来家里做客,你该说什么来欢迎他/她呢?</p>
          <p class="text">“<input v-model="questionData.warnUp.fourteen" class="input-bottom-border fz-18" @change="setBookQuestion"
              style="width: 80%" />。”</p>
          <h3 class="lefth3" id="c016" style="margin-top: 7%;"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
          <p class="text"><span class="hs1">◇</span>请根据提示读出句子,注意声音和语气的变化。</p>
          <p class="text"><span class="hs">这一大块奶酪都是我的了!</span>(一只狡猾的蚂蚁,想要把奶酪偷偷地占为己有)</p>
          <p class="text"><span class="hs">这一大块奶酪都是我的了!</span>(一只善良的蚂蚁,在帮助他人后得到了奖励)</p>
          <p class="text"><span class="hs">这块奶酪太沉了,我们休息一下吧!</span>(严肃的蚂蚁队长,向队伍发出命令)</p>
        </div>
        <!-- 此次为页脚部分(需要设置页码) -->
        <div class="page-footer">
@@ -128,15 +143,15 @@
        <h1>
          <img src="../../assets/images/unit2-header-img.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <p><span class="hs">这块奶酪太沉了,我们休息一下吧!</span>(一只弱小的蚂蚁,在向蚂蚁队长请求休息)</p>
        <div class="bodystyle" style="margin-top: 3%">
          <p class="text"><span class="hs">这块奶酪太沉了,我们休息一下吧!</span>(一只弱小的蚂蚁,在向蚂蚁队长请求休息)</p>
          <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/2-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-right">15</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="19">
@@ -145,18 +160,19 @@
          <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>
        <div class="bodystyle" style="margin-top: 3%;">
          <h2 id="b009" class="problem">第四课 真听真看真感受</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>
          <p class="text">待人接物有礼有节、谦卑恭敬,在让他人感到如沐春风的同时,也会让自己受到他人的尊重和理解。请说一说,在下面这些场景中你应该如何做?</p>
          <p class="text"><span class="hs1">◇</span>你看到妈妈的水杯没水了。</p>
          <p class="text"><span class="hs1">◇</span>电梯里,你站在最前排,后面的人需要下电梯。</p>
          <h3 class="lefth3" id="c018" style="margin-top: 7%;"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
          <div style="display: flex; justify-content: flex-start; ">
             <p class="text" style="width: 50%;">你知道吗?无实物训练是一种训练演员的有效方法,不仅能够培养演员良好的想象能力,更能够培养其行动的逻辑性和情景适应性,最终提高其塑造人物形象的能力。</p>
          <div class="openImgBox" style="width: 50%"><img class="img-e" alt="" src="../../assets/images/2-4.gif" /></div>
        </div>
          <p class="text"><span class="hs1">◇</span>请试着用无实物表演的方式把下面的情景表演出来吧!</p>
          <p class="center text"><img class="img-0" style="width: 100%; height: auto;" lt="" src="../../assets/images/0020-2.jpg" /></p>
      </div>
      <!-- 此处为页脚部分(需要设置页码) -->
      <div class="page-footer">
@@ -164,27 +180,29 @@
        <div class="page-footer-number-left">16</div>
      </div>
    </div>
    </div>
    <div class="page-box" page="20">
      <div v-if="showPageList.indexOf(20) > -1">
        <h1>
          <img src="../../assets/images/unit2-header-img.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <h2 id="b010">单元活动任务</h2>
        <div class="bodystyle" style="margin-top: 3%">
          <h2 id="b010" class="problem">单元活动任务</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>
          <p class="text"><span class="hs1">◇</span>吹纸练习</p>
          <p class="center text" style="margin: 4% 0"><img class="img-e" alt="" src="../../assets/images/0021-1.jpg" /></p>
          <p class="text">找一张纸巾,将它按在墙上。移开双手,努力用气息将纸“钉”在墙面上,不要让它向下滑落。</p>
          <p class="text"><span class="hs1">◇</span>吹笔练习</p>
          <p class="text">将一支笔立于桌面,看看你能不能用一口气将它吹倒。</p>
          <p class="text"><span class="hs1">◇</span>吹袋子练习</p>
          <p class="text">将一只塑料袋抛至空中,和你的小伙伴一起轮流吹气,避免塑料袋落地。</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">17</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="21">
@@ -193,24 +211,39 @@
          <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/tzyys.jpg" /></h3>
          <p><span class="hs1">◇</span>请走进剧场观看不同剧种的现场演出,感受戏剧的魅力吧!</p>
          <p class="center">
        <div class="bodystyle" style="margin-top: 3%;" >
          <p class="text"><span class="hs1">◇</span>吹乒乓球练习</p>
          <p class="text">用气息将桌面上的乒乓球从“起点”运送至“终点”,运送过程中避免乒乓球触碰障碍物。</p>
          <h3 class="lefth3" id="c020" style="margin-top: 7%"><img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" /></h3>
          <p class="text"><span class="hs1">◇</span>请走进剧场观看不同剧种的现场演出,感受戏剧的魅力吧!</p>
          <p class="center text">
            <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"
              controlslist="nodownload" class="w100 video" @play="videoPlay"
              style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
          <h2>视频: 惟妙惟肖的人物</h2>
        </p>
        </div>
          <p class="center videoname">
            <span>视频:惟妙惟肖的人物 </span>
            <el-tooltip
              class="item"
              effect="dark"
              :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
              placement="top-start"
            >
              <img
                :src="chapterData.isCollectVideo ? collectCheck : collectImg"
                alt=""
                class="collect-btn"
                @click="handleCollect('video')"
              />
            </el-tooltip>
          </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">18</div>
        </div>
      </div>
    </div>
  </div>
@@ -236,8 +269,16 @@
  },
  data() {
    return {
      collectImg: require("../../assets/images/icon/heart.png"),
      collectCheck: require("../../assets/images/icon/heart-check.png"),
      videoPathOne: "",
      auidoPathOne: "",
      chapterData: {
        isCollectImg: false,
        isCollectVideo: false,
        txtOne: "",
        txtTwo: "",
      },
      questionData: {
        warnUp: {
          one: "",
@@ -273,8 +314,6 @@
      },
    };
  },
  methods: {
    //视频和音频的MD5地址
    async getVidoePath() {
@@ -292,9 +331,28 @@
        JSON.stringify(this.questionData)
      );
    },
    //音频
    audioPlay(e) {
      this.$emit('closeAudio',e.srcElement.currentSrc)
    },
    //视频
    videoPlay(e) {
      this.$emit('closeVideo', e.srcElement.currentSrc)
    },
    handleChapterData() {
      localStorage.setItem(
        "math-chapterData",
        JSON.stringify(this.chapterData)
      );
    },
    handleCollect(type) {
      if (type == "img") {
        this.chapterData.isCollectImg = !this.chapterData.isCollectImg;
      } else if (type == "video") {
        this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
    }
      this.handleChapterData();
    },
  },
};
</script>
src/books/artAndDrama/view/components/chapter003.vue
@@ -12,7 +12,8 @@
                        <div class="bj1">
                            <p class="left"><img class="img-gn" alt="" src="../../assets/images/dydd.jpg" /></p>
                        </div>
                        <p>每个人的心中都有一个舞台,演绎着生活的酸甜苦辣,记录着成长的点点滴滴。《一块奶酪》中的每只小蚂蚁也有很多心里话要表达,让我们一起演绎出来吧!</p>
                        <p class="block" style="margin:  8% 5% 5% 7%">
                            每个人的心中都有一个舞台,演绎着生活的酸甜苦辣,记录着成长的点点滴滴。《一块奶酪》中的每只小蚂蚁也有很多心里话要表达,让我们一起演绎出来吧!</p>
                    </div>
                </div>
                <p><br /></p>
@@ -29,18 +30,19 @@
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%;" />
                </h1>
                <img class="headerimg" src="../../assets/images/page5.png" alt="" />
                <div class="bodystyle">
                <div class="bodystyle" style="margin-top: 3%">
                    
                    <h2 id="b011">第一课 吹响劳动的集结号</h2>
                    <h2 id="b011" class="problem">第一课 吹响劳动的集结号</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>
                    <p class="text">寒来暑往,秋收冬藏。一年四季,劳碌奔忙。</p>
                    <p class="text">团结一心,吹响号角。幸福生活,劳动创造。</p>
                    <p class="text"><span class="hs1">◇</span>说一说你会做哪些家务?</p>
                    <p class="text"><span class="hs1">◇</span>和小伙伴讨论劳动在生活中的作用。</p>
                    <p class="text"><span class="hs1">◇</span>表演一种家务劳动,请小伙伴猜一猜。</p>
                    <h3 class="lefth3" id="c022" style="margin-top: 7%"><img class="img-gn1" alt=""
                            src="../../assets/images/czysj.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>邀请小伙伴分角色朗诵附录中的剧本选段1~2,重读加点文字。</p>
                    <p class="center text"><img class="img-e" alt="" src="../../assets/images/0024-1.jpg" /></p>
                </div>
                <p><br /></p>
                <!-- 此次为页脚部分(需要设置页码) -->
@@ -55,13 +57,14 @@
                <h1>
                    <img src="../../assets/images/unit3-header-img.png" alt="" style="height: auto; width: 100%" />
                </h1>
                <div class="bodystyle">
                    <h2 id="b012">第二课 意外发生了!</h2>
                <div class="bodystyle" style="margin-top: 3%;">
                    <h2 id="b012" class="problem">第二课 意外发生了!</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="text"><span class="hs1">◇</span>当上半场比赛失利,中场休息时,你会怎么做?当别人夸赞你的时候,你会怎么做?请你和朋友一起演一演吧。</p>
                    <h3 class="lefth3" id="c024" style="margin-top: 7%;"><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>
                    <p class="text"><span class="hs1">◇</span>请把蚂蚁队长的台词和他的内心独白连起来吧!</p>
                    <!-- 连线题 -->
                    <matching :rawData="rawData" :item="question" class="macthing" :primaryColor="'transparent'">
                    </matching>
@@ -79,13 +82,15 @@
                    <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>
                <div class="bodystyle" style="margin-top: 3%;">
                    <h2 id="b013" class="problem">第三课 我该怎么办?</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="text"><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" style="margin-top: 7%;"><img class="img-gn1" alt=""
                            src="../../assets/images/czysj.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>阅读附录中的剧本选段5,为自己的表演设计动作吧!</p>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-3.gif" /></p>
                </div>
                <!-- 此次为页脚部分(需要设置页码) -->
@@ -100,20 +105,25 @@
                <h1>
                    <img src="../../assets/images/unit3-header-img.png" alt="" style="width: 100%; height: auto" />
                </h1> 
                <div class="bodystyle">
                    <h2 id="b014">第四课 皆大欢喜</h2>
                <div class="bodystyle" style="margin-top: 3%;">
                    <h2 id="b014" class="problem">第四课 皆大欢喜</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.enight" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 85%"/></p>
                    <p class="text"><span class="hs1">◇</span>请按照事件六要素的结构给大家分享一件快乐的事吧!</p>
                    <p class="text">时间:<input v-model="questionData.warnUp.two" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text">地点:<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text">人物:<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text">起因:<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text">经过:<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text">结果:<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text" style="margin-top: 7%;"><span class="hs1">◇</span>你有烦恼吗?说一说是什么,你是怎么处理它的?</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">
@@ -127,12 +137,11 @@
                <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="" />
                <img class="headerimg" src="../../assets/images/page5.png" alt="" />
                <div class="bodystyle" style="margin-top: 3%;">
                    <h3 class="lefth3" id="c028"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>运用重音、内心独白和动作设计等表现方式,将《一块奶酪》的故事表演出来吧!(剧本见附录)</p>
                    <p class="text"><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">
@@ -140,28 +149,30 @@
                <div class="page-footer-number-left">24</div>
            </div>
        </div>
        </div>
        <div class="page-box" page="28">
            <div v-if="showPageList.indexOf(28) > -1">
                <h1>
                    <img src="../../assets/images/unit3-header-img.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <h2 id="b015">单元活动任务</h2>
                <div class="bodystyle" style="margin-top: 3%;">
                    <h2 id="b015" class="problem">单元活动任务</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>
                    <p class="text"><span class="hs1">◇</span>喘气练习</p>
                    <p class="text">平视前方,肩膀放松,双手自然下垂或叉腰,双脚分开,与肩同宽。模仿小狗喘气,感受腹部的“呼吸”状态,想象自己的腹部是一个气球,在吸气时腹部向外扩张,吐气时腹部向内收缩。
                    </p>
                    <p class="text"><span class="hs1">◇</span>“嘶”声练习</p>
                    <p class="text">在“喘气练习”的基础上,发出“嘶”音,每组4短1长。</p>
                    <p class="text"><span class="hs1">◇</span>“嘟”音练习</p>
                    <p class="text">平视前方,肩膀放松,双手自然下垂,双脚分开,与肩同宽。放松双唇,深吸气,吹出气流带动嘴唇抖动,发出“嘟”的声音,声音越长越好。</p>
                    <p class="text"><span class="hs1">◇</span>“我们赞美长江”气声练习</p>
                    <p class="text">平视前方,肩膀放松,双手自然下垂,双脚分开,与肩同宽。以说悄悄话的感觉,说出“我们赞美长江”,并逐步增加气声的力度,找到在舞台上说悄悄话的感觉。</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">25</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="29">
@@ -170,23 +181,31 @@
                    <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">
                <div class="bodystyle" style="margin-top: 3%">
                    <h3 class="lefth3" id="c030"><img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" /></h3>
                    <p><span class="hs1">◇</span>劳动最光荣!请为家中长辈做一件力所能及的事情,用实际行动表达你的爱意!体验过程中要记住每一个动作的细节,再尝试以无实物表演的方式进行展示。
                    <p class="text"><span
                            class="hs1">◇</span>劳动最光荣!请为家中长辈做一件力所能及的事情,用实际行动表达你的爱意!体验过程中要记住每一个动作的细节,再尝试以无实物表演的方式进行展示。
                    </p>
                    <p class="center">
                    <p class="center text">
                        <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"
                            controlslist="nodownload" class="w100 video" @play="videoPlay"
                            style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
                    <h2>视频: 心有多大,舞台就有多大</h2>
                    </p>
                </div>
                    <p class="center videoname">
                        <span>视频:心有多大,舞台就有多大 </span>
                        <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
                            placement="top-start">
                            <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt=""
                                class="collect-btn" @click="handleCollect('video')" />
                        </el-tooltip>
                    </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">26</div>
                </div>
            </div>
        </div>
    </div>
@@ -202,7 +221,6 @@
        showPageList: {
            type: Array,
        },
    },
    //在这里对调用的方法进行挂载
    mounted() {
@@ -214,8 +232,16 @@
    },
    data() {
        return {
            collectImg: require("../../assets/images/icon/heart.png"),
            collectCheck: require("../../assets/images/icon/heart-check.png"),
            videoPathOne: "",
            auidoPathOne: "",
            chapterData: {
                isCollectImg: false,
                isCollectVideo: false,
                txtOne: "",
                txtTwo: "",
            },
            rawData: {
                left: [
                    {
@@ -366,7 +392,24 @@
        },
        audioPlay(e) {
      this.$emit('closeAudio',e.srcElement.currentSrc)
        },
        videoPlay(e) {
            this.$emit('closeVideo', e.srcElement.currentSrc)
        },
        handleChapterData() {
            localStorage.setItem(
                "math-chapterData",
                JSON.stringify(this.chapterData)
            );
        },
        handleCollect(type) {
            if (type == "img") {
                this.chapterData.isCollectImg = !this.chapterData.isCollectImg;
            } else if (type == "video") {
                this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
    }
            this.handleChapterData();
        },
    },
};
</script>
@@ -398,6 +441,7 @@
.macthing {
    background-color: rgb(188, 220, 164);
    padding: 5% 0%;
    padding: 3% 0;
    margin: 0% 8%;
}
</style>
src/books/artAndDrama/view/components/chapter004.vue
@@ -12,7 +12,7 @@
                        <div class="bj1">
                            <p class="left"><img class="img-gn" alt="" src="../../assets/images/dydd.jpg" /></p>
                        </div>
                        <p>在戏剧演出中,除了舞台上的演员,导演、灯光、造型等幕后人员也发挥着重要的作用。本单元让我们从台前走进幕后,向默默奉献的工作人员致敬!</p>
                        <p class="block" style="margin:  8% 5% 5% 7%">在戏剧演出中,除了舞台上的演员,导演、灯光、造型等幕后人员也发挥着重要的作用。本单元让我们从台前走进幕后,向默默奉献的工作人员致敬!</p>
                    </div>
                </div>
                <p><br /></p>
@@ -29,20 +29,19 @@
                    <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="b016">第一课 一模一样</h2>
                <div class="bodystyle" style="margin-top: 3%">
                    <h2 id="b016" class="problem">第一课 一模一样</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 class="text"><span class="hs1">◇</span>以小组为单位围成一圈,面朝圈外蹲下,相邻两人互挎手臂,组员同时站起来,看看哪个组最快!</p>
                    <p class="text"><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="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="text"><span class="hs1">◇</span>以小组为单位,表演以下场景,注意保持动作一致哦。</p>
                    <p class="text">蚂蚁队长吹响集合号,蚂蚁们迅速跑上场站好队形。</p>
                    <p class="text">蚂蚁们抬着奶酪向前走着。</p>
                    <p class="text">蚂蚁们跟随蚂蚁队长的口令消失在草丛里。</p>
                    <p class="text">蚂蚁们由四面八方走回来。</p>
                    <p class="text">蚂蚁们劲儿比刚才更足,抬起奶酪向山洞走去。</p>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-1.gif" /></p>
                </div>
                <p><br /></p>
@@ -58,10 +57,10 @@
                <h1>
                    <img src="../../assets/images/unit4-header-img.png" alt="" style="height: auto; width: 100%" />
                </h1>
                <div class="bodystyle">
                    <h2 id="b017">第二课 造型变变变</h2>
                <div class="bodystyle" style="margin-top: 3%;" >
                    <h2 id="b017" class="problem">第二课 造型变变变</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="text"><span class="hs1">◇</span>春天来了,春风吹过,柳树发芽了,迎春花开了,小燕子在天空自由地飞翔。一切都是那么生机勃勃。请为“春天”涂上你喜欢的颜色。</p>
                    <!-- 图片缺失 -->
                    <!-- <p class="center"><img class="img-e" alt="" src="./../assets/images/0033-1.jpg" /></p> -->
                </div>
@@ -78,9 +77,9 @@
                    <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">
                <div class="bodystyle" style="margin-top: 3%;" >
                    <h3 class="lefth3" id="c034"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>动动手,为《一块奶酪》中的蚂蚁角色设计简单的服装吧!</p>
                    <p class="text"><span class="hs1">◇</span>动动手,为《一块奶酪》中的蚂蚁角色设计简单的服装吧!</p>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p>
                </div>
                <!-- 此次为页脚部分(需要设置页码) -->
@@ -95,12 +94,12 @@
                <h1>
                    <img src="../../assets/images/unit4-header-img.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <h2 id="b018">第三课 变废为宝</h2>
                <div class="bodystyle" style="margin-top: 3%">
                    <h2 id="b018" class="problem">第三课 变废为宝</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="text"><span class="hs1">◇</span>以小组为单位,头顶纸杯,腿夹报纸,进行夹纸运杯游戏!</p>
                    <h3 class="lefth3" id="c036" style="margin-top: 7%"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>请根据《一块奶酪》的剧本,列出演出中需要的道具清单,请按照清单,利用你收集的旧物制作道具吧!</p>
                    <p class="center"><img class="img-e" alt="" src="../../assets/images/0035-1.jpg" /></p>
                </div>
                <!-- 此次为页脚部分(需要设置页码) -->
@@ -116,15 +115,14 @@
                    <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="b019">第四课 奇妙的舞台</h2>
                <div class="bodystyle" style="margin-top: 3%;">
                    <h2 id="b019" class="problem">第四课 奇妙的舞台</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="text"><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>
                    <h3 class="lefth3" id="c038" style="margin-top: 7%;"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p class="text"><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">
@@ -132,27 +130,27 @@
                <div class="page-footer-number-left">32</div>
            </div>
        </div>
        </div>
        <div class="page-box" page="36">
            <div v-if="showPageList.indexOf(36) > -1">
                <h1>
                    <img src="../../assets/images/unit4-header-img.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <h2 id="b020">单元活动任务</h2>
                <div class="bodystyle" style="margin-top: 3%;" >
                    <h2 id="b020" class="problem">单元活动任务</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>
                    <p class="center text1"><span class="hs">形体操练习</span></p>
                    <p class="text"><span class="hs1">◇</span>头部运动</p>
                    <p class="text">第1个八拍:右手越过头顶摸左耳,向右轻轻压头部。</p>
                    <p class="text">第2个八拍:左手越过头顶摸右耳,向左轻轻压头部。</p>
                    <p class="text">第3个八拍:头部顺时针转一圈。</p>
                    <p class="text">第4个八拍:头部逆时针转一圈。</p>
                    <p class="text"><span class="hs1">◇</span>开肩练习</p>
                    <p class="text">平视前方,肩膀放松,双手自然下垂,双脚打开,与肩同宽。</p>
                    <p class="text">第1个八拍:第1-4拍手肘内侧向外转动,带动 双肩打开;第5-8拍手肘内侧向内收回,后背拱起,带动双肩内扣。</p>
                    <p class="text">第2至第4个八拍:重复第1个八拍的动作。</p>
                    <p class="text"><span class="hs1">◇</span>提沉肩运动</p>
                    <p class="text">平视前方,肩膀放松,双手自然下垂,双脚打开,与肩同宽。</p>
            </div>
            <!-- 此次为页脚部分(需要设置页码) -->
            <div class="page-footer">
@@ -160,34 +158,43 @@
                <div class="page-footer-number-right">33</div>
            </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>
                <img class="headerimg" src="../../assets/images/page5.png" alt="" />
                <div class="bodystyle">
                    <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">
                <div class="bodystyle" style="margin-top: 3%;">
                    <p class="text">第1至第2个八拍:双手下垂,手心向下,双肩上提再沉下,两拍一动。</p>
                    <p class="text">第3至第4个八拍:双手下垂,手心向下,左右肩膀依次上提再沉下,一拍一动。</p>
                    <p class="text"><span class="hs1">◇</span>伸展运动</p>
                    <p class="text">身体放松,膝盖微屈,上身自然弯曲下沉,手臂自然下垂。</p>
                    <p class="text">第1个八拍:第1-7拍身体直起,双臂举起,踮起脚尖;第8拍还原初始状态。</p>
                    <p class="text">第2至第4个八拍:重复第1个八拍的动作。</p>
                    <h3 class="lefth3" id="c040" style="margin-top: 7%;"><img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>写一篇排演总结,分享学习经验和感受!</p>
                    <p class="center text">
                        <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"
                            controlslist="nodownload" class="w100 video"  @play="videoPlay"
                            style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
                    <h2>视频: 团结就是力量</h2>
                    </p>
                </div>
                    <p class="center videoname">
                        <span>视频:团结就是力量 </span>
                        <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
                            placement="top-start">
                            <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt=""
                                class="collect-btn" @click="handleCollect('video')" />
                        </el-tooltip>
                    </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">34</div>
            </div>
            </div>
        </div>
    </div>
@@ -213,8 +220,16 @@
    },
    data() {
        return {
            collectImg: require("../../assets/images/icon/heart.png"),
            collectCheck: require("../../assets/images/icon/heart-check.png"),
            videoPathOne: "",
            auidoPathOne: "",
            chapterData: {
                isCollectImg: false,
                isCollectVideo: false,
                txtOne: "",
                txtTwo: "",
            },
            questionData: {
                warnUp: {
                    one: "",
@@ -257,7 +272,24 @@
        },    
        audioPlay(e) {
      this.$emit('closeAudio',e.srcElement.currentSrc)
    },
    videoPlay(e) {
      this.$emit('closeVideo',e.srcElement.currentSrc)
    },
    handleChapterData() {
            localStorage.setItem(
                "math-chapterData",
                JSON.stringify(this.chapterData)
            );
        },
        handleCollect(type) {
            if (type == "img") {
                this.chapterData.isCollectImg = !this.chapterData.isCollectImg;
            } else if (type == "video") {
                this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
    }
            this.handleChapterData();
        },
    },
};
src/books/artAndDrama/view/components/chapter005.vue
@@ -3,27 +3,27 @@
        <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" />
                    <img src="../../assets/images/unit5-header-img.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
                <div class="bodystyle" style="margin-top: 3%">
                    <h1 id="a008" class="problem" style="color: black; font-weight: 500; margin-bottom: 10%">附 录</h1>
                    <p class="block3" style=""><span class="hs">剧本</span></p>
                    <p class="center1 text" style="font-size: 25px; margin: 3% 0;"><span class="hs">一块奶酪</span></p>
                    <p class="block text">演员表:蚂蚁队长、小蚂蚁、大头蚂蚁、小眼镜蚂蚁、蚂蚁小妹、奶酪人</p>
                    <p class="block3 text" style="margin-top: 4%"><span class="hs">选段1</span></p>
                    <p class="block text">【起光,蚂蚁队长上场】</p>
                    <p class="block text">咻咻—</p>
                    <p class="block text">【蚂蚁队长吹响集合号,蚂蚁们迅速跑上场站好队形】</p>
                    <p class="block text">蚂蚁队长:<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>
                    <p class="block text">蚂蚁们:收到!</p>
                    <p class="block text">小蚂蚁:(嘀咕)要是偷嘴的<span class="un1">是您呢</span>?</p>
                    <p class="block text">蚂蚁队长:(义正词严)<span class="un1">照样受罚</span>!</p>
                    <p class="block text">【蚂蚁们鼓掌】</p>
                    <p class="block text">蚂蚁队长:稍息!立正!寻找食物!出发!</p>
                    <p class="block text">【蚂蚁们争先恐后四处寻食】</p>
                    <p class="block text">大头蚂蚁:(突然)<span class="un1">报告</span>!</p>
                    <p class="block text">蚂蚁队长:怎么了?</p>
                </div>
                <p><br /></p>
                <!-- 此次为页脚部分(需要设置页码) -->
@@ -39,28 +39,28 @@
                    <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 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
                <div class="bodystyle" style="margin-top: 3%">
                    <p class="block text">大头蚂蚁:(指着)这里有一块大奶酪!</p>
                    <p class="block text">【一块奶酪(演员)趴在角落处】</p>
                    <p class="block text">蚂蚁队长:(兴奋)哦?</p>
                    <p class="block text">【蚂蚁队长被奶酪的香味迷住,转起了圈圈】</p>
                    <p class="block text">【音乐起,蚂蚁队长和奶酪人跳起了舞蹈】</p>
                    <p class="block text">蚂蚁队长:(陶醉)奶酪……奶酪……填饱肚子不再呱呱叫。奶酪……奶酪……吃下一口一声美妙……</p>
                    <p class="block text">【蚂蚁们停下手里的搬运工作,看着队长】</p>
                    <p class="block text">大头蚂蚁:(大喊)队长!</p>
                    <p class="block text">【蚂蚁队长被吓醒,奶酪人趴在地上】</p>
                    <p class="block text">小眼镜蚂蚁:队长!队长!<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
                    <p class="block text">蚂蚁队长:说得对!我现在就<span class="un1">搬</span>!</p>
                    <p class="block text">【蚂蚁队长走到奶酪面前使劲抬】</p>
                    <p class="block text">蚂蚁队长:哎哟,哎哟,哎哟哟。</p>
                    <p class="block text">【蚂蚁队长一次也没抬起来】</p>
                    <p class="block3 text" style="margin-top: 4%"><span class="hs">选段2</span></p>
                    <p class="block text">蚂蚁队长:(起身)<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>
                    <p class="block text">蚂蚁们:<span class="un1">是</span>!</p>
                    <p class="block text">【蚂蚁们迅速围成一圈,蚂蚁队长站在奶酪最前面】</p>
                    <p class="block text">蚂蚁队长:听我口令!3!2!1!抬!</p>
                </div>
                <p><br /></p>
                <!-- 此次为页脚部分(需要设置页码) -->
@@ -73,27 +73,27 @@
        <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%" />
                    <img src="../../assets/images/unit5-header-img.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
                <div class="bodystyle" style="margin-top: 3%">
                    <p class="block text">【奶酪被抬起】</p>
                    <p class="block text">大头蚂蚁:哇!这块奶酪<span class="un1">好香噢</span>!</p>
                    <p class="block text">小眼镜蚂蚁:我想<span class="un1">咬</span>一口!</p>
                    <p class="block text">小蚂蚁:如果能<span class="un1">舔一下</span>就好了!</p>
                    <p class="block text">蚂蚁小妹:我的口水流出来了!</p>
                    <p class="block text">蚂蚁队长:不许瞎想!不许偷吃!<span class="un1">出发</span>!</p>
                    <p class="block text">【音乐起,蚂蚁们抬着奶酪向前走着】</p>
                    <p class="block text">蚂蚁们:奶酪!奶酪!我们的奶酪!奶酪!奶酪!我们一起分享。</p>
                    <p class="block text">【蚂蚁们陶醉中】</p>
                    <p class="block3 text" style="margin-top: 4%"><span class="hs">选段3</span></p>
                    <p class="block text">嘭—</p>
                    <p class="block text">【蚂蚁们用劲过猛,奶酪的一个角掉了】</p>
                    <p class="block text">蚂蚁小妹:<span class="un1">啊</span>!队长!奶酪的角<span class="un1">掉了</span>!</p>
                    <p class="block text">【大家看到掉在地上的奶酪】</p>
                    <p class="block text">蚂蚁们:哇哦!</p>
                    <p class="block text">蚂蚁队长:等等!</p>
                    <p class="block text">【舞台变光,演员动作定格】</p>
                    <p class="block text">蚂蚁队长:掉了<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>
@@ -111,26 +111,26 @@
                    <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 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
                <div class="bodystyle" style="margin-top: 3%;">
                    <p class="block3 text" style="margin-top: 4%;"><span class="hs">选段4</span></p>
                    <p class="block text">【舞台变光,演员立正站好】</p>
                    <p class="block text">蚂蚁队长:休息一会儿!</p>
                    <p class="block text">蚂蚁小妹:<span class="un1">为什么</span>要休息呀?</p>
                    <p class="block text">小眼镜蚂蚁:队长!这块掉在地上的奶酪<span class="un1">怎么办呀</span>?</p>
                    <p class="block text">大头蚂蚁:我们要不把它<span class="un1">分了吧</span>!</p>
                    <p class="block text">蚂蚁队长:听我说!<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>
                    <p class="block text">【大家依旧不动】</p>
                    <p class="block text">蚂蚁队长:全体都有!稍息!立正!向后—转!齐步—走!</p>
                    <p class="block text">蚂蚁队长:立—定!原地休息!</p>
                    <p class="block text">【蚂蚁们跟随口令消失在草丛里】</p>
                    <p class="block3 text" style="margin-top: 4%;"><span class="hs">选段5</span></p>
                    <p class="block text">【蚂蚁队长向草丛里望去,确定没有声响】</p>
                    <p class="block text">蚂蚁队长:(小声)嘿嘿嘿,吃掉后就说被风刮走或者就说被老鹰吃掉就好啦!</p>
                    <p class="block text">【蚂蚁队长低下头,嗅了一下奶酪】</p>
                    <p class="block text">蚂蚁队长:味道<span class="un1">真</span>香!</p>
                    <p class="block text">【蚂蚁队长的手伸向奶酪渣,突然,奶酪人站了起来】</p>
                    <p class="block text">【变光】</p>
                </div>
                <!-- 此次为页脚部分(需要设置页码) -->
                <div class="page-footer">
@@ -142,20 +142,20 @@
        <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" />
                    <img src="../../assets/images/unit5-header-img.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <img class="headerimg" src="../../assets/images/page5.png" alt="" />
                <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">奶酪人:<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
                <div class="bodystyle" style="margin-top: 3%">
                    <p class="block text">奶酪人:不许吃!</p>
                    <p class="block text">蚂蚁队长:(吓了一跳)你你你!你怎么<span class="un1">站</span>起来啦!</p>
                    <p class="block text">奶酪人:我<span class="un1">实在</span>看不下去啦!</p>
                    <p class="block text">蚂蚁队长:(害怕)救命哇!奶酪<span class="un1">活</span>啦!</p>
                    <p class="block text">【蚂蚁队长跑】</p>
                    <p class="block text">奶酪人:<span class="un1">站住</span>!</p>
                    <p class="block text">蚂蚁队长:你要干什么?</p>
                    <p class="block text">奶酪人:<span class="un1">这块</span>,<span class="un1">你不能吃</span>!</p>
                    <p class="block text">蚂蚁队长:为什么?</p>
                    <p class="block text">奶酪人:<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
@@ -163,12 +163,12 @@
                            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
                    <p class="block  text">蚂蚁队长:(低头)我不吃了,我知道<span class="un1">错了</span>……可是,这掉在地上的奶酪怎么办呢?</p>
                    <p class="block  text">奶酪人:(想了想)<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>
                    <p class="block  text">蚂蚁队长:<span class="un1">好主意</span>!我这就问问大家,谢谢你!</p>
                    <p class="block  text">【变光,奶酪慢慢地躺在地上】</p>
                    <p class="block  text">蚂蚁队长:(喊)<span class="un1">注意啦</span>!全体都有!稍息!立正!</p>
                </div>
                <!-- 此次为页脚部分(需要设置页码) -->
                <div class="page-footer">
@@ -183,16 +183,15 @@
                    <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>向后转!齐步走!</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 class="bodystyle" style="margin-top: 3%">
                    <p class="block text">向后转!齐步走!</p>
                    <p class="block text">【蚂蚁们由四面八方走回来】</p>
                    <p class="block text">蚂蚁队长:大家休息好啦!我有一个<span class="un1">决定</span>!</p>
                    <p class="block text">蚂蚁们:什么决定?</p>
                    <p class="block text">蚂蚁队长:这点儿奶酪渣是刚才弄掉的,丢了可惜,(指向小蚂蚁)你是我们中年龄最小的,<span class="un1">你</span>吃掉它吧!</p>
                    <p class="block text">【蚂蚁们鼓掌】</p>
                    <p class="block text">【音乐起,大家劲儿比刚才更足,抬起奶酪向山洞走去】</p>
                    <p class="block text">【收光】</p>
            </div>
            <!-- 此次为页脚部分(需要设置页码) -->
            <div class="page-footer">
@@ -201,6 +200,7 @@
            </div>
        </div>
    </div>
    </div>
</template>
<script>
src/books/artAndDrama/view/components/header.vue
@@ -15,24 +15,23 @@
        <ul class="fl fl-cl ju-bt pg-mh"   style="display: flex;  flex-direction: column; justify-content: flex-end; " >
          <li>
            <div class="bodystyle" style="margin-bottom: 100px;" >
              <p id="a003" class="front" style="margin: 0%;">编委会</p>
              <hr />
              <p>顾  问:<span class="kaiti">彭吉象 严燕生</span></p>
              <p>主  编:<span class="kaiti">麻文琦</span></p>
              <p>副 主 编:<span class="kaiti">陈 利</span></p>
              <ul class="fl">
              <p id="a003" class="front left1">编委会</p>
              <hr style="margin-bottom: 5%;" />
              <p class="left1" >顾  问:<span class="kaiti">彭吉象 严燕生</span></p>
              <p class="left1" >主  编:<span class="kaiti">麻文琦</span></p>
              <p class="left1" >副 主 编:<span class="kaiti">陈 利</span></p>
              <ul class="fl left1">
                <li>
                  <p class="wh-nr" style="margin: 0%;">编写委员:</p>
                  <p class="wh-nr left1" style="margin: 0%;">编写委员:</p>
                </li>
                <li class="fl fl-cl">
                  <span class="kaiti">王谷川 谢霜南 李晨成 周力君 韩燕楠菲</span>
                  <!-- <span class="kaiti">韩燕楠菲</span> -->
                </li>
              </ul>
              <p>美术绘画:<span class="kaiti">何 冰</span></p>
              <p class="left1">美术绘画:<span class="kaiti">何 冰</span></p>
              <ul class="fl">
                <li>
                  <p class="wh-nr" style="margin: 0%;">表 演 者:</p>
                  <p class="wh-nr left1" style="margin: 0%;">版权说明:</p>
                </li>
                <li class="fl fl-cl">
                  <span class="kaiti">本书部分文字作品著作权由中国文字著作权协会授权,</span>
@@ -49,11 +48,9 @@
            </p> -->
          </li>
        </ul>
      </div>
      </div>
    </div>
</template>
  
  <script>
src/books/artAndDrama/view/components/index.vue
@@ -9,10 +9,10 @@
      transformOrigin: 'center top',
    }">
      <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader>
      <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>
      <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"  @closeVideo="closeVideo"></chapterOne>
      <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"  @closeVideo="closeVideo"></chapterTwo>
      <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"  @closeVideo="closeVideo"></chapterThree>
      <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"  @closeVideo="closeVideo"></chapterFour>
      <chapterFive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></chapterFive>
    </div>
    <!-- 音频小窗播放组件 -->
@@ -158,7 +158,7 @@
    // 测试页面跳转
    // setTimeout(() => {
    //   this.gotoPage(1, 10);
    //this.gotoPage(2,4);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",
@@ -186,7 +186,7 @@
    //   txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼(见图1-1)。骨骼是人体的支架,具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下,肌肉收缩牵动所附着的骨绕着关节转动,使身体产生各种动作。所以,运动系统具有运动、支持和保护等功能,幼年时期的骨骼还具有造血功能。 ",
    //   txtIndex: 57
    // });
    // }, 5000);
    // }, 500);
  },
  methods: {
    // setZoom1() {
@@ -714,8 +714,7 @@
        chapterTwo,
        chapterThree,
        chapterFour,
        chapterFive
        chapterFive,
      };
      // 遍历所有章节文件
      for (const key in pageData) {
@@ -879,6 +878,21 @@
    closeMiniAudio() {
      this.audioPath = "";
    },
    // 点击视频播放,关闭其他视频
    closeVideo(path) {
      let allVideo = (
        this.container ? this.container : document
      ).querySelectorAll(".video");
      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()
          }
        }
      }
    }
  },
  components: {
    pageHeader,
@@ -887,8 +901,7 @@
    miniAudio,
    chapterThree,
    chapterFour,
    chapterFive
    chapterFive,
  },
};
</script>