艺术戏剧（部署7.3）

zhongshujie

2024-07-03 0cd16877a2ea61e9d086c4e7b93fc3cf17a8ad8e

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

@@ -1,11 +1,10 @@
<template>
  <div class="chapter" num="3">
    <div class="page-box" page="14" style="min-height: auto">
    <div class="page-box" page="14">
      <div v-if="showPageList.indexOf(14) > -1">
        <h1 id="a004">
          <!-- 这里的动图有问题，没有背景图片 -->
          <img class="img-0" alt="" src="../../assets/images/dy2.jpg" />
          <audio :src="auidoPathOne" controls></audio>
          <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
        </h1>
        <div class="bodystyle">
          <div class="bk">
@@ -14,624 +13,515 @@
                <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>
        </div>
        <p><br /></p>
        <h1><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-right">11</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="15" style="min-height: auto">
    <div class="page-box" page="15">
      <div v-if="showPageList.indexOf(15) > -1">
        <h1>
          <img
            src="../../assets/images/header-green.png"
            alt=""
            style="width: 100%; height: auto"
          />
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <img src="../../assets/images/page5.png" alt="" />
          <h2 id="b006">第一课　五官的力量</h2>
        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
        <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="center">
          <p class="text"><span class="hs1">◇</span>我是小画家</p>
          <p class="text">保持头部不动，试着用眼神画出下面的图案吧！</p>
          <p class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/0016-1.jpg" />
          </p>
          <p><span class="hs1">◇</span>嗅觉大冒险</p>
          <p>
            你最爱吃的食物是_________。当闻到它的味道时，你会做出什么表情呢？
          <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: 13%" />。当闻到它的味道时，你会做出什么表情呢？
          </p>
          <p>
            你最不爱吃的食物是_________。当闻到它的味道时，你会做出什么表情呢？
          <p class="text">
            你最不爱吃的食物是 <input v-model="questionData.warnUp.two" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 13%" />。当闻到它的味道时，你会做出什么表情呢？
          </p>
          <h3 class="lefth3" id="c012">
          <h3 class="lefth3 openImgBox" id="c012">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <p>
            <span class="hs1">◇</span
            >以小组为单位，使用手偶道具表演附录中的剧本选段2。
          </p>
          <p class="center">
            <img class="img-e" alt="" src="../../assets/images/0016-2.jpg" />
          </p>
          <div style="display: flex;  justify-content: flex-start;">
            <p class="text" style="width: 50%">
              <span class="hs1">◇</span>以小组为单位，使用手偶道具表演附录中的剧本选段2。
            </p>
            <p class="openImgBox" style="width: 50%">
              <img class="img-e" alt="" src="../../assets/images/2-1.gif" />
            </p>
          </div>
        </div>
        <p><br /></p>
        <h1><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-left">12</div>
        </div>
      </div>
    </div>
    <!--<div class="page-box" page="16" style="min-height: auto">
        <div v-if="showPageList.indexOf(16) > -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>
            <p class="center">
              <img class="img-e" alt="" src="../../assets/images/1-2蚂蚁举大树.gif" />
            </p>
            <p>蚂蚁是典型的（　　）昆虫。（多选）</p>
            <p>A.群居</p>
            <p>B.社会性</p>
            <p>C.独居</p>
            <p>蚂蚁内部有（　　）分工。（多选）</p>
            <p>A.明确的</p>
            <p>B.奇怪的</p>
            <p>C.有序的</p>
            <p>一个（　　）群体少不了默契的配合。（多选）</p>
            <p>A.团结的</p>
            <p>B.优秀的</p>
            <p>C.松散的</p>
            <video
              :src="videoPathOne"
              webkit-playsinline="true"
              x-webkit-airplay="true"
              playsinline="true"
              x5-video-orientation="h5"
              x5-video-player-fullscreen="true"
              x5-playsinline=""
              controls
              controlslist="nodownload"
              class="w100"
              style="margin-top: 40px"
            ></video>
    <div class="page-box" page="16">
      <div v-if="showPageList.indexOf(16) > -1">
        <h1>
          <img src="../../assets/images/unit2-header-img.png" alt="" style="height: auto; width: 100%" />
        </h1>
        <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 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: 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>
          <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> -->
          <drag :question="dragQuestion" :page="16" class="drag-text" />
          <!-- <choice class="text" :questions="questions"  :primaryColor="accentColor"  hoverBackgroundColor="green" hoverColor="white"></choice> -->
          <p class="center  openImgBox"><img class="img-e" alt="" src="../../assets/images/2-2.gif" /></p>
        </div>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-right">13</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="17">
      <div v-if="showPageList.indexOf(17) > -1">
        <h1>
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
        <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 class="text">常言道：良言一句三冬暖，恶语伤人六月寒。语言在人与人的交往中起着重要的作用，有着无穷的力量。</p>
          <p class="text t-l" ><span class="hs1">◇</span>如果朋友心情不好，你该怎么安慰他/她呢？
            <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></textarea>
          </p>

          <p class="text t-l"><span class="hs1">◇</span>如果你邀请好朋友来家里做客，你该说什么来欢迎他/她呢？
            <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion">
          </textarea>
          </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">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-left">14</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="18">
      <div v-if="showPageList.indexOf(18) > -1">
        <h1>
          <img src="../../assets/images/unit2-header-img.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <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 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">
      <div v-if="showPageList.indexOf(19) > -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" 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 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="center">
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          <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">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <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" 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 class="text ends">
            <span><span class="hs1">◇</span>吹纸练习</span>
            <span> <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload"
                class="audio"></audio></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 ends">
            <span> <span class="hs1">◇</span>吹笔练习</span>
            <span> <audio :src="auidoPathThree" controls controlslist="noplaybackrate nodownload"
                class="audio"></audio></span>
          </p>
          <p class="text">将一支笔立于桌面，看看你能不能用一口气将它吹倒。</p>
          <p class="text ends">
            <span><span class="hs1">◇</span>吹袋子练习</span>
            <span> <audio :src="auidoPathFour" controls controlslist="noplaybackrate nodownload"
                class="audio"></audio></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">
      <div v-if="showPageList.indexOf(21) > -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" style="margin-top: 3%;">
          <p class="text ends">
            <span> <span class="hs1">◇</span>吹乒乓球练习</span>
            <span> <audio :src="auidoPathFive" controls controlslist="noplaybackrate nodownload"
                class="audio"></audio></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 video"
              style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
          </p>
          <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>
      <div class="page-box" page="17" style="min-height: auto">
        <div v-if="showPageList.indexOf(17) > -1">
          <h1>
            <img
              src="../../assets/images/header-green.png"
              alt=""
              style="width: 100%; height: auto"
            />
          </h1>
          <div class="bodystyle">
            <img src="../../assets/images/page5.png" alt="" />
            <h2 id="b002">第二课　津津乐道</h2>
            <h3 class="lefth3" id="c003">
              <img class="img-gn1" alt="" src="image/rhybx.jpg" />
            </h3>
            <p>
              <span class="hs1">◇</span
              >请将以下课文选段大声朗诵出来，加点的字请重读。
            </p>
            <audio :src="auidoPathThree" controls></audio>
            <div class="bj3">
              <p class="center">
                <span class="hs"
                  >春<a id="w1"></a><a href="chapter003.html#m1"><sup>[1]</sup></a
                  >（节选）</span
                >
              </p>
              <p class="center">朱自清</p>
              <p class="block">
                盼望着，<span class="un1">盼望着</span>，东风来了，春天的脚步<span
                  class="un1"
                  >近</span
                >了。
              </p>
              <p class="block">
                一切都像<span class="un1">刚睡醒</span>的样子，欣欣然<span
                  class="un1"
                  >张开</span
                >了眼。山<span class="un1">朗润</span>起来了，水<span class="un1"
                  >涨</span
                >起来了，太阳的脸<span class="un1">红</span>起来了。
              </p>
            </div>
            <h3 class="lefth3" id="c004">
              <img class="img-gn1" alt="" src="image/czysj.jpg" />
            </h3>
            <p>
              <span class="hs1">◇</span
              >在《一块奶酪》的故事中，小蚂蚁们都有各自的立场，你能理解他们的想法吗？请你和同伴根据故事内容讨论一下。
            </p>
            <hr />
            <p class="note">
              <a id="m1"></a><a href="chapter003.html#w1">[1]</a>
              朱自清：《春》，见温儒敏等：《义务教育教科书 语文
              七年级上册》，2页，北京，人民教育出版社，2016。
            </p>
          </div>
  
          <p class="center">
            <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
          </p>
        <!-- 此处为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-left">18</div>
        </div>
      </div>
      <div class="page-box" page="18" style="min-height: auto">
        <div v-if="showPageList.indexOf(18) > -1">
          <h1>
            <img
              src="../../assets/images/header-green.png"
              alt=""
              style="width: 100%; height: auto"
            />
          </h1>
          <div class="bodystyle">
            <img src="../../assets/images/page5.png" alt="" />
            <h2 id="b003">第三课　内心的声音</h2>
            <h1 class="lefth3" id="c005">
              <img
                class="img-gn1"
                alt=""
                src="../../assets/images/1-3.gif"
                style="height: auto; width: 50%"
              />
            </h1>
            <p>
              <span class="hs1">◇</span
              >请将以下课文选段大声朗诵出来，加点的字请重读。
            </p>
            <p class="center">
              <img class="img-e" alt="" src="image/0009-1.jpg" />
            </p>
            <audio :src="auidoPathTwo" controls></audio>
            <div class="bj3">
              <p class="center">
                <span class="hs"
                  >春<a id="w1"></a><a href="chapter004.html#m1"><sup>[1]</sup></a
                  >（节选）</span
                >
              </p>
              <p class="center">朱自清</p>
              <p class="block">
                小草偷偷地从土里<span class="un1">钻出来</span>，<span class="un1"
                  >嫩嫩的</span
                >，<span class="un1">绿绿的</span>。园子里，田野里，<span
                  class="un1"
                  >瞧</span
                >去，一大片一大片满是的。<span class="un1">坐</span>着，<span
                  class="un1"
                  >躺</span
                >着，<span class="un1">打</span>两个<span class="un1">滚</span
                >儿，<span class="un1">踢</span>几脚<span class="un1">球</span
                >，<span class="un1">赛</span>几趟<span class="un1">跑</span
                >，<span class="un1">捉</span>几回<span class="un1">迷藏</span
                >。风<span class="un1">轻悄悄</span>的，草<span class="un1"
                  >软绵绵</span
                >的。
              </p>
            </div>
            <h3 class="lefth3" id="c006">
              <img class="img-gn1" alt="" src="image/czysj.jpg" />
            </h3>
            <p class="center">
              <img class="img-e" alt="" src="image/0010-1.jpg" />
            </p>
            <hr />
            <p class="note">
              <a id="m1"></a><a href="chapter004.html#w1">[1]</a>
              朱自清：《春》，见温儒敏等：《义务教育教科书 语文
              七年级上册》，2页，北京，人民教育出版社，2016。
            </p>
          </div>
        </div>
        <p class="center">
          <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
        </p>
      </div>
      <div class="page-box" page="19" style="min-height: auto">
        <div v-if="showPageList.indexOf(19) > -1">
          <h1>
            <img
              src="../../assets/images/header-green.png"
              alt=""
              style="width: 100%; height: auto"
            />
          </h1>
          <div class="bodystyle">
            <img src="../../assets/images/page5.png" alt="" />
            <h3 class="lefth3" id="c006">
              <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
            </h3>
            <h1 class="center">
              <img
                class="img-e"
                alt=""
                src="../../assets/images/1-4.gif"
                style="height: auto; width: 50%"
              />
            </h1>
            <p>
              <span class="hs1">◇</span
              >生活中，我们总会遇到各种各样的诱惑。面对诱惑时，我们的内心常常会有两个不同的声音出现：一个声音要求我们严于律己，另一个声音要求我们随心所欲。请你分析一下，当蚂蚁队长面对掉落的奶酪渣的诱惑时，他内心的两个声音会说些什么呢？
            </p>
            <p>正义队长：“_________________________________。”</p>
            <p>黑暗队长：“_________________________________。”</p>
          </div>
        </div>
        <p class="center">
          <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
        </p>
      </div>
      <div class="page-box" page="20" style="min-height: auto">
        <div v-if="showPageList.indexOf(20) > -1">
          <h1>
            <img
              src="../../assets/images/page6-header-green.png"
              alt=""
              style="width: 100%; height: auto"
            />
          </h1>
          <div class="bodystyle">
            <h2 id="b004">第四课　身临其境</h2>
            <h3 class="lefth3" id="c007">
              <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
            </h3>
            <p>
              <span class="hs1">◇</span
              >请将以下课文选段大声朗诵出来，加点的字请重读。
            </p>
            <audio :src="auidoPathTwo" controls></audio>
            <div class="bj3">
              <p class="center">
                <span class="hs"
                  >春<a id="w1"></a><a href="chapter005.html#m1"><sup>[1]</sup></a
                  >（节选）</span
                >
              </p>
              <p class="center">朱自清</p>
              <p class="block">
                <span class="un1">桃</span>树、<span class="un1">杏</span
                >树、<span class="un1">梨</span
                >树，你不让我，我不让你，都开满了花赶趟儿。红的像<span class="un1"
                  >火</span
                >，粉的像<span class="un1">霞</span>，白的像<span class="un1"
                  >雪</span
                >。花里带着甜味儿……
              </p>
            </div>
            <h3 class="lefth3" id="c008">
              <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
            </h3>
            <p>
              <span class="hs1">◇</span
              >假如你是搬运奶酪的蚂蚁，你要怎么搬运不同形状、大小的奶酪呢？请先为自己设计一个剧本吧：
            </p>
            <p>
              我是蚂蚁_________（名字），今天是_________（天气），我的奶酪特别_________（轻/重），我感觉好_________（身体感觉）啊！
            </p>
            <hr />
            <p class="note">
              <a id="m1"></a><a href="chapter003.html#w1">[1]</a>
              朱自清：《春》，见温儒敏等：《义务教育教科书 语文
              七年级上册》，2页，北京，人民教育出版社，2016。
            </p>
          </div>
        </div>
        <p class="center">
          <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
        </p>
      </div>
      <div class="page-box" page="21" style="min-height: auto">
        <div v-if="showPageList.indexOf(21) > -1">
          <h1>
            <img
              src="../../assets/images/header-green.png"
              alt=""
              style="width: 100%; height: auto"
            />
          </h1>
          <div class="bodystyle">
            <img src="../../assets/images/page5.png" alt="" />
            <p class="center">
              <img class="img-e" alt="" src="../../assets/images/1-5.gif" />
            </p>
            <p>
              <span class="hs1">◇</span
              >蚂蚁队长把奶酪渣留给了年龄最小的蚂蚁，赢得了大家的认可。在生活中，你曾经像“蚂蚁队长”一样爱护弱小吗？或者像“小蚂蚁”一样得到过哥哥姐姐们的关爱吗？
            </p>
          </div>
        </div>
        <p class="center">
          <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
        </p>
      </div>
      <div class="page-box" page="22" style="min-height: auto">
        <div v-if="showPageList.indexOf(22) > -1">
          <h1>
            <img
              src="../../assets/images/page6-header-green.png"
              alt=""
              style="width: 100%; height: auto"
            />
          </h1>
          <div class="bodystyle">
            <h2 id="b005">单元活动任务</h2>
            <h3 class="lefth3" id="c009">
              <img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" />
            </h3>
            <p><span class="hs1">◇</span>放大缩小</p>
            <p>
              请你交替“放大”和“缩小”五官。在“放大”时，想象五官要飞到外太空；在“缩小”时，想象五官全部缩小到了鼻尖上。
            </p>
            <p><span class="hs1">◇</span>提升苹果肌</p>
            <p>
              想象你在一个陌生的地方，谁都不认识，突然遇见了好朋友，你很高兴，上前和他/她打招呼。做一做你此时的表情吧。
            </p>
            <p><span class="hs1">◇</span>微笑说“ang”</p>
            <p>
              请你试一试在提升苹果肌的基础上，发出“ang”的音。声音要尽可能拉长、保持稳定，并向远送。
            </p>
            <p><span class="hs1">◇</span>向远山喊“阿毛”</p>
            <p>
              想象自己站在一座高山上，好朋友“阿毛”站在对面的高山上，你要如何喊他呢？
            </p>
          </div>
        </div>
        <p class="center">
          <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
        </p>
      </div>
      <div class="page-box" page="23" style="min-height: auto">
        <div v-if="showPageList.indexOf(23) > -1">
          <h1>
            <img
              src="../../assets/images/page6-header-green.png"
              alt=""
              style="width: 100%; height: auto"
            />
          </h1>
          <div class="bodystyle">
            <h3 class="lefth3" id="c010">
              <img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
            </h3>
            <p><span class="hs1">◇</span>排一排·演一演：孔融让梨</p>
            <p>
              孔融四岁就懂礼貌、知谦让，是我们学习的好榜样，让我们运用本单元的戏剧知识，把他的故事表演出来吧！
            </p>
            <p class="center">
              <video
              :src="videoPathOne"
              webkit-playsinline="true"
              x-webkit-airplay="true"
              playsinline="true"
              x5-video-orientation="h5"
              x5-video-player-fullscreen="true"
              x5-playsinline=""
              controls
              controlslist="nodownload"
              class="w100"
              style="margin-top: 40px"
            ></video>
            </p>
          </div>
        </div>
        <p class="center">
          <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
        </p>
      </div> -->
    </div>
  </div>
</template>
    
    <script>
//import matching from "@/components/matching/matching.vue";

<script>
import drag from "@/components/dragQuestion/index.vue"
import { getResourcePath } from "@/assets/methods/resources";
export default {
  name: "chapterTwo",
  //components: { matching },
  components: { drag },
  props: {
    showPageList: {
      type: Array,
    },
  }, 
   //在这里对调用的方法进行挂载
  },
  //在这里对调用的方法进行挂载
  mounted() {
    this.getVidoePath();
    const bookQuestion = localStorage.getItem("artAndDrama-book-question-two");
    if (bookQuestion) {
      this.questionData = JSON.parse(bookQuestion);
    }
  },
  data() {
    return {
      collectImg: require("../../assets/images/icon/heart.png"),
      collectCheck: require("../../assets/images/icon/heart-check.png"),
      videoPathOne: "",
      videoPathTwo: "",
      videoPathThree: "",
      videoPathFour: "",
      auidoPathOne: "",
      auidoPathTwo: "",
      auidoPathThree: "",
      rawData: {
        left: [
          {
            oldId: "FB34",
            txt: "我请你吃苹果吧！",
          },
          {
            oldId: "64D6",
            txt: "我请你吃苹果吧！",
          },
          {
            oldId: "2ED4",
            txt: "我请你吃苹果吧！",
          },
          {
            oldId: "44DE",
            txt: "我请你吃苹果吧！",
          },
        ],
        right: [
          {
            oldId: "64D6",
            txt: "强调是请客",
          },
          {
            oldId: "FB34",
            txt: "强调请的是“你”",
          },
          {
            oldId: "2ED4",
            txt: "强调吃的东西是“苹果”",
          },
          {
            oldId: "44DE",
            txt: "强调请客的人是“我”",
          },
        ],
      auidoPathFour: "",
      auidoPathFive: "",
      chapterData: {
        isCollectImg: false,
        isCollectVideo: false,
        txtOne: "",
        txtTwo: "",
      },
      question: {
        KnowledgePoint: "123",
        analysis: "123",
        answer: [
          {
            id: "FB34",
            linkValue: "我请你吃苹果吧！",
            value: "强调是请客",
          },
          {
            id: "64D6",
            linkValue: "我请你吃苹果吧！",
            value: "强调请的是“你”",
          },
          {
            id: "2ED4",
            linkValue: "我请你吃苹果吧！",
            value: "强调吃的东西是“苹果”",
          },
          {
            id: "44DE",
            linkValue: "我请你吃苹果吧！",
            value: "强调请客的人是“我”",
          },
        ],
        optionStyle: undefined,
        id: 489306,
        options: {
          linkValues: [
      questionData: {
        warnUp: {
          one: "",
          two: "",
          three: "",
          four: "",
          five: "",
          six: "",
          seven: "",
        },
        reading: {
          one: "",
          two: "",
        },
        table: {
          one: "",
          two: "",
          three: "",
          four: "",
          five: "",
          six: "",
          seven: "",
          enight: "",
          nine: "",
        },
      },
      dragQuestion: [
        {
          analysisCon: null,
          answer: ['C', 'A', 'B'],
          difficulty: 0,
          id: "7BC7B760",
          isCollect: false,
          isComplete: false,
          isRight: null,
          isUnfold: "",
          isUserAnswer: false,
          number: 1,
          option: [
            {
              oldId: "64D6",
              txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
              img: "",
              index: "010311",
              txt: "胆小的",
              value: "A",
              isShow: true
            },
            {
              oldId: "44DE",
              txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.",
              img: "",
              index: "010312",
              txt: "善良的",
              value: "B",
              isShow: true
            },
            {
              oldId: "FB34",
              txt: "The clothing material is quite popular among Roman women inancient times.",
            },
            {
              oldId: "2ED4",
              txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
              img: "",
              index: "010313",
              txt: "沉稳的",
              value: "C",
              isShow: true
            },
          ],
          values: [
          optionStyle: "Txt",
          questionType: "drag",
          score: 2,
          stem: {
            0: "蚂蚁队长走路昂首挺胸、步伐坚定，它是一只(",
            1: {
              data: "span",
              num: 0
            },
            2: ")蚂蚁;小蚂蚁走起路来小心翼翼，眼神飘忽不定，它是一只(",
            3: {
              data: "span",
              num: 1
            },
            4: ")蚂蚁;蚂蚁小妹面带微笑，时刻愿意帮助大家，它是一只(",
            5: {
              data: "span",
              num: 2,
            },
            6: " )蚂蚁"
          },
          stemStyle: "RichTxt",
          type: "拖拽题",
          userAnswer: [
            {
              oldId: "FB34",
              txt: "Martin  Silk",
              vlaue: '',
              txt: ''
            },
            {
              oldId: "64D6",
              txt: "The Great Wall",
              vlaue: '',
              txt: ''
            },
            {
              oldId: "2ED4",
              txt: "Chinese Food",
              vlaue: '',
              txt: ''
            },
          ]
        },
      ],
      questions: [
        {
          analysisCon: "undefined",
          answer: ['C', 'A', 'B'],
          difficulty: 0,
          id: 47775,
          isCollect: false,
          isComplete: false,
          isRight: null,
          isUnfold: "",
          isUserAnswer: false,
          number: 1,
          options: [
            {
              "img": "",
              "index": "3CA6",
              "txt": "胆小的",
              "value": "A"
            },
            {
              oldId: "44DE",
              txt: "Chinese Tea",
              "img": "",
              "index": "73EE",
              "txt": "善良的",
              "value": "B"
            },
            {
              "img": "",
              "index": "6AEF",
              "txt": "沉稳的",
              "value": "C"
            },
          ],
          optionStyle: "Image",
          questionType: "singleChoice",
          score: 2,
          stem: {
            "stemTxt": "蚂蚁队长走路昂首挺胸、步伐坚定，它是一只（　　）蚂蚁；小蚂蚁走起路来小心翼翼，眼神飘忽不定，它是一只（　　）蚂蚁；蚂蚁小妹面带微笑，时刻愿意帮助大家，它是一只（　　）蚂蚁。"
          },
          stemStyle: "Txt",
          userAnswer: "",
          // 单选题这里的字段内容就是"单选题"
          type: 'sort'
        },
        questionType: "matching",
        stem: {
          stemTxt: "按顺序连线",
        },
        stemStyle: undefined,
        titleDescription: "1",
        userChoise: [],
        value: [],
      },
      ],
      accentColor: 'green',
    };
  },


  methods: {
    //视频和音频的MD5地址
    async getVidoePath() {
      this.videoPathOne = await getResourcePath(
        "691cbd2c13198d04afc7800d0f2cafb0"
      );
      this.videoPathTwo = await getResourcePath(
        "a3c9b55ac8227e4c885384ff2fc6c0e7"
      );
      this.videoPathThree = await getResourcePath(
        "dd44a1e31b4304f50d10b2481a148411"
      );
      this.videoPathFour = await getResourcePath(
        "09de7704eeaaf3a210b8c6af0a94d545"
      );
      this.auidoPathOne = await getResourcePath(
        "2c5f6c69b0f9f7a3c03e473cb8c977f5"
        "0c147c73d67672d1538f76fa22793ff1"
      );
      this.auidoPathTwo = await getResourcePath(
        "e93c0fdde08be5a4386c8c863892a287"
        "daf62713e056d875baa37283c6190a46"
      );
      this.auidoPathThree = await getResourcePath(
        "e93c0fdde08be5a4386c8c863892a287"
        "126edb6a476971840e4c6abf0a3e9da5"
      );
      this.auidoPathFour = await getResourcePath(
        "2485785e9a21a78bcfc58db132537ffd"
      );
      this.auidoPathFive = await getResourcePath(
        "a37bb621b2591e3666e94d1a3bc23bc0"
      );
    },
    setBookQuestion() {
      console.log("保存");
      localStorage.setItem(
        "artAndDrama-book-question-two",
        JSON.stringify(this.questionData)
      );
    },
    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>
    
    <style lang="less" scoped>

<style lang="less" scoped>
.w70 {
  width: 78%;
}

.fw-400 {
  font-weight: 400 !important;
}

.fz-26 {
  font-size: 26px !important;
}

.cover-img {
  position: absolute;
  top: 33%;
  left: 23%;
}

.division-line {
  width: 2px;
  height: 100%;
  background-color: red;
}
</style>
    

.drag-text {
  margin: 0 4%;
  font-family: "STKaiti";
  font-size: 19px;
}
</style>