艺术戏剧（连线题验证）

user1

2024-06-19 53c71572f88a86514a41f0a8f489fccfcaeed6e2

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

@@ -1,11 +1,10 @@
<template>
  <div class="chapter" num="2">
    <div class="page-box" page="4" style="min-height: auto">
    <div class="page-box" page="4">
      <div v-if="showPageList.indexOf(4) > -1">
        <h1 id="a004">
            <!-- 这里的动图有问题，没有背景图片 -->
          <img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
          <audio :src="auidoPathOne" class="audio" controls></audio>
          <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
        </h1>
        <div class="bodystyle">
          <div class="bk">
@@ -14,468 +13,381 @@
                <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">1</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="5" style="min-height: auto">
    <div class="page-box" page="5">
      <div v-if="showPageList.indexOf(5) > -1">
        <h1>
          <img
            src="../../assets/images/header-green.png"
            alt=""
            style="width: 100%; height: auto"
          />
        <h1 style="margin-bottom: 0%">
          <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="b001">第一课　齐心协力</h2>
        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
        <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>
            <span class="hs1">◇</span
            >大声朗读下面的句子，连一连不同逻辑重音强调的意思。
          <p class="text">
            <span class="hs1">◇</span>大声朗读下面的句子，连一连不同逻辑重音强调的意思。
          </p>
          <h1>
            <audio :src="auidoPathTwo" class="audio" controls></audio>
            <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
          </h1>
          <p>小提示：加点的文字为本句话中的逻辑重音，在朗读发音时请重读。</p>
          <!-- 连线题 -->
          <matching :rawData="rawData" :item="question"></matching>
          <matching :rawData="rawData" :question="question" class="macthing" :primaryColor="'transparent'"></matching>
          <p class="text">小提示：加点的文字为本句话中的逻辑重音，在朗读发音时请重读。</p>
        </div>
        <p><br /></p>
        <!-- 此次为页脚部分（需要设置页码） -->
   <div style="position: relative;">  
      <h1 style="position: relative; z-index: 1;">  
      <img class="img-0" alt="" src="../../assets/images/ym.jpg" />  
      <div style="position: absolute; z-index: 99; background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; left: 98px; bottom: 38px; text-align: center; line-height: 30px; font-size: 20px;">2</div>     
      </h1>  
   </div>
        <!-- <div style="position: relative; "> 
            <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; left: 98px; top: 38px; text-align: center; font-size: 25px;">2</div>
            <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
        </div> -->
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-left">2</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="6" style="min-height: auto">
    <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>
        <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />     
        <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>
          <video
            :src="videoPathOne"
            webkit-playsinline="true"
            x-webkit-airplay="true"
            playsinline="true"
            x5-video-orientation="h5"
            x5-video-player-fullscreen="true"
            x5-playsinline=""
            controls
            controlslist="nodownload"
            class="w100"
            style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"
          ></video>
          <h2>视频: 我们是一家人</h2>
          <p 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 video"  @play="videoPlay"
            style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
            <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>

        <p class="center">
          <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
        </p>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-right">3</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="7" style="min-height: auto">
    <div class="page-box" page="7">
      <div v-if="showPageList.indexOf(7) > -1">
        <h1>
          <img
            src="../../assets/images/header-green.png"
            alt=""
            style="width: 100%; height: auto"
          />
        <h1 style="margin-bottom: 0%">
          <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>
        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
        <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>
            <span class="hs1">◇</span
            >请将以下课文选段大声朗诵出来，加点的字请重读。
          <p class="text">
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1><audio :src="auidoPathThree" class="audio" controls></audio></h1>
        
          <h1><audio :src="auidoPathThree" controls class="audio" @play="audioPlay"></audio></h1>
          <div class="bj3">
            <p class="center">
              <span class="hs"
                >春<a id="w1"><sup>1</sup></a>（节选）</span>
              <span class="hs">春<a id="w1"><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>了。
            </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>起来了。
            </p>
          </div>
          <h3 class="lefth3" id="c004">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <p>
            <span class="hs1">◇</span
            >在《一块奶酪》的故事中，小蚂蚁们都有各自的立场，你能理解他们的想法吗？请你和同伴根据故事内容讨论一下。
          <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>

        <!-- 此次为页脚部分（需要设置页码） -->
        <div> 
            <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; margin-left: 98px; margin-top: 38px; text-align: center; font-size: 25px;">4</div>
            <h1 style="position: relative; z-index: 1;"><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">4</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="8" style="min-height: auto">
    <div class="page-box" page="8">
      <div v-if="showPageList.indexOf(8) > -1">
        <h1>
          <img
            src="../../assets/images/header-green.png"
            alt=""
            style="width: 100%; height: auto"
          />
          <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <img src="../../assets/images/page5.png" alt="" />
          <h2 id="b003">第三课　内心的声音</h2>
          <h1 class="lefth3 openImgBox" id="c005">
            <img
              class="img-gn1"
              alt=""
              src="../../assets/images/1-3.gif"
              style="height: auto; width: 50%"
            />
          </h1>
          <p>
            <span class="hs1">◇</span
            >请将以下课文选段大声朗诵出来，加点的字请重读。
        <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 class="text">
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1><audio :src="auidoPathTwo" class="audio" controls></audio></h1>
          <h1 class="lefth3 openImgBox" id="c005">
            <img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" />
          </h1>
          <h1><audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio></h1>
          <div class="bj3">
            <p class="center">
              <span class="hs"
                >春<a id="w1"></a><sup>1</sup>（节选）</span
              >
              <span class="hs">春<a id="w1"></a><sup>1</sup>（节选）</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
              >的。
              小草偷偷地从土里<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>
           <hr />
          <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> 
            <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; margin-left: 98px; margin-top: 38px; text-align: center; font-size: 25px;">6</div>
            <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
        </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 class="page-box" page="9" style="min-height: auto">
    </div>
    <div class="page-box" page="9">
      <div v-if="showPageList.indexOf(9) > -1">
        <h1>
          <img
            src="../../assets/images/header-green.png"
            alt=""
            style="width: 100%; height: auto"
          />
        <h1 style="margin-bottom: 0%;">
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
        <div class="bodystyle">
          <img src="../../assets/images/page5.png" alt="" />
          <h3 class="lefth3" id="c006">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <h1 class="center openImgBox">
            <img
              class="img-e"
              alt=""
              src="../../assets/images/1-4.gif"
              style="height: auto; width: 50%"
            />
            <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.value"
                class="input-bottom-border fz-18"
                @blur="handleQuestion('one')"
                @change="setBookQuestion" />”</p>
          <p>黑暗队长：“        <input
                v-model="questionData.warnUp.one.value"
                class="input-bottom-border fz-18"
                @blur="handleQuestion('two')"
                @change="setBookQuestion" />”</p>
          <p class="text">正义队长：“
            <input v-model="questionData.warnUp.one" class="input-bottom-border input-w-60"  @change="setBookQuestion" />。”
          </p>
          <p class="text">黑暗队长：“ <input v-model="questionData.warnUp.two" class="input-bottom-border input-w-60" @change="setBookQuestion" />。”
          </p>
        </div>
      </div>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div> 
            <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; margin-left: 98px; margin-top: 38px; text-align: center; font-size: 25px;">8</div>
            <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
        </div>
      <div class="page-footer">
        <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
        <div class="page-footer-number-left">6</div>
      </div> 
    </div>
    <div class="page-box" page="10" style="min-height: auto">
    </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"
          />
          <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>
            <span class="hs1">◇</span
            >请将以下课文选段大声朗诵出来，加点的字请重读。
          <p class="text">
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1>
            <audio :src="auidoPathTwo" class="audio" controls></audio>  
            <audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
          </h1>

          <div class="bj3">
            <p class="center">
              <span class="hs"
                >春<a id="w1"><sup>1</sup></a
                >（节选）</span
              >
              <span class="hs">春<a id="w1"><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>。花里带着甜味儿……
            </p>
          </div>
          <h3 class="lefth3" id="c008">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <p>
            <span class="hs1">◇</span
            >假如你是搬运奶酪的蚂蚁，你要怎么搬运不同形状、大小的奶酪呢？请先为自己设计一个剧本吧：
          <p class="text">
            <span class="hs1">◇</span>假如你是搬运奶酪的蚂蚁，你要怎么搬运不同形状、大小的奶酪呢？请先为自己设计一个剧本吧：
          </p>
          <p>
            我是蚂蚁 <input
                v-model="questionData.warnUp.one.value"
                class="input-bottom-border fz-18"
                style=" width: 10%;"
                @blur="handleQuestion('three')"
                @change="setBookQuestion" />（名字），今天是 
                <input
                v-model="questionData.warnUp.one.value"
                class="input-bottom-border fz-18"
                style=" width: 10%;"
                @blur="handleQuestion('four')"
                @change="setBookQuestion" />（天气），我的奶酪特别 <input
                v-model="questionData.warnUp.one.value"
                class="input-bottom-border fz-18"
                style=" width: 10%;"
                @blur="handleQuestion('five')"
                @change="setBookQuestion" />（轻/重），我感觉好 <input
                v-model="questionData.warnUp.one.value"
                class="input-bottom-border fz-18"
                style=" width: 10%;"
                @blur="handleQuestion('six')"
                @change="setBookQuestion" />（身体感觉）啊！
          <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%;"
              @change="setBookQuestion" />（天气），我的奶酪特别 <input v-model="questionData.warnUp.five"
              class="input-bottom-border fz-18" style=" width: 10%;" @change="setBookQuestion" />（轻/重），我感觉好 <input
              v-model="questionData.warnUp.six" class="input-bottom-border fz-18" style=" width: 10%;"
              @change="setBookQuestion" />（身体感觉）啊！
          </p>
          <hr />
          <p class="note">
          <hr style="margin-left: 9%; width: 20%;" />
          <p class="note references">
            <a id="m1">1</a>
            朱自清：《春》，见温儒敏等：《义务教育教科书 语文
            七年级上册》，2页，北京，人民教育出版社，2016。
          </p>
        </div>
      </div>
      <p class="center">
        <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
      </p>
      <!-- 此次为页脚部分（需要设置页码） -->
      <div class="page-footer">
        <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
        <div class="page-footer-number-right">7</div>
      </div> 
    </div>
    <div class="page-box" page="11" style="min-height: auto">
    </div>
    <div class="page-box" page="11">
      <div v-if="showPageList.indexOf(11) > -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="" />
        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
        <div class="bodystyle" style="margin-top: 3%;">

          <p class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/1-5.gif" />
          </p>
          <p>
            <span class="hs1">◇</span
            >蚂蚁队长把奶酪渣留给了年龄最小的蚂蚁，赢得了大家的认可。在生活中，你曾经像“蚂蚁队长”一样爱护弱小吗？或者像“小蚂蚁”一样得到过哥哥姐姐们的关爱吗？
          <p class="text">
            <span class="hs1">◇</span>蚂蚁队长把奶酪渣留给了年龄最小的蚂蚁，赢得了大家的认可。在生活中，你曾经像“蚂蚁队长”一样爱护弱小吗？或者像“小蚂蚁”一样得到过哥哥姐姐们的关爱吗？
          </p>
        </div>
      </div>
      <p class="center">
        <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
      </p>
      <!-- 此次为页脚部分（需要设置页码） -->
      <div class="page-footer">
        <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
        <div class="page-footer-number-left">8</div>
      </div> 
    </div>
    <div class="page-box" page="12" style="min-height: auto">
    </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"
          />
          <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 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>
      <p class="center">
        <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
      </p>
    </div>
    <div class="page-box" page="13" style="min-height: auto">
    </div>
    <div class="page-box" page="13">
      <div v-if="showPageList.indexOf(13) > -1">
        <h1>
          <img
            src="../../assets/images/page6-header-green.png"
            alt=""
            style="width: 100%; height: auto"
          />
          <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
        <img class="headerimg" src="../../assets/images/page5.png" alt="" />
        <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"
             style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"
          ></video>
          <h2>视频: 我们是一家人</h2>
            <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"  @play="videoPlay"
              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 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>
      <p class="center">
        <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
      </p>
    </div>
    </div>
  </div>
</template>
  
  <script>

<script>
import matching from "@/components/matching/matching.vue";
import { getResourcePath } from "@/assets/methods/resources";
export default {
@@ -485,37 +397,51 @@
    showPageList: {
      type: Array,
    },
    primaryColor: {
      type: String,
      default: "red",
    }
  },
  //在这里对调用的方法进行挂载
  mounted() {
    this.getVidoePath();
    const bookQuestion = localStorage.getItem("artAndDrama-book-question-one");
    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: "",
      chapterData: {
        isCollectImg: false,
        isCollectVideo: false,
        txtOne: "",
        txtTwo: "",
      },
      rawData: {
        left: [
          {
            oldId: "FB34",
            txt: "我请你吃苹果吧！",
            txt: " <span class='un1'>我</span>请你吃苹果吧！",

          },
          {
            oldId: "64D6",
            txt: "我请你吃苹果吧！",
            txt: "我<span class='un1'>请</span>你吃苹果吧！",
          },
          {
            oldId: "2ED4",
            txt: "我请你吃苹果吧！",
            txt: "我请<span class='un1'>你</span>吃苹果吧！",
          },
          {
            oldId: "44DE",
            txt: "我请你吃苹果吧！",
            txt: "我请你吃<span class='un1'>苹果</span>吧！",
          },
        ],
        right: [
@@ -524,15 +450,15 @@
            txt: "强调是请客",
          },
          {
            oldId: "FB34",
            oldId: "2ED4",
            txt: "强调请的是“你”",
          },
          {
            oldId: "2ED4",
            oldId: "44DE",
            txt: "强调吃的东西是“苹果”",
          },
          {
            oldId: "44DE",
            oldId: "FB34",
            txt: "强调请客的人是“我”",
          },
        ],
@@ -540,66 +466,68 @@
      question: {
        KnowledgePoint: "123",
        analysis: "123",
        //正确答案
        answer: [
          {
            id: "FB34",
            linkValue: "我请你吃苹果吧！",
            value: "强调是请客",
            linkValue: "<span class='un1'>我</span>请你吃苹果吧！",
            value: "强调请客的人是“我”",
          },
          {
            id: "64D6",
            linkValue: "我请你吃苹果吧！",
            linkValue: "我<span class='un1'>请</span>你吃苹果吧！",
            value: "强调是请客",
          },  
          {
            id: "2ED4",
            linkValue: "我请<span class='un1'>你</span>吃苹果吧！",
            value: "强调请的是“你”",
          },
          {
            id: "2ED4",
            linkValue: "我请你吃苹果吧！",
            value: "强调吃的东西是“苹果”",
          },
          {
            id: "44DE",
            linkValue: "我请你吃苹果吧！",
            value: "强调请客的人是“我”",
            linkValue: "我请你吃<span class='un1'>苹果</span>吧！",
            value: "强调吃的东西是“苹果”",
          },
        ],
        optionStyle: undefined,
        id: 489306,
        options: {
          linkValues: [
            {
              oldId: "64D6",
              txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
            },
            {
              oldId: "44DE",
              txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.",
            },
            {
              oldId: "FB34",
              txt: "The clothing material is quite popular among Roman women inancient times.",
            },
            {
              oldId: "2ED4",
              txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
            },
          {
            oldId: "FB34",
            txt: "<span class='un1'>我</span>请你吃苹果吧！",

          },
          {
            oldId: "64D6",
            txt: "我<span class='un1'>请</span>你吃苹果吧！",
          },
          {
            oldId: "2ED4",
            txt: "我请<span class='un1'>你</span>吃苹果吧！",
          },
          {
            oldId: "44DE",
            txt: "我请你吃<span class='un1'>苹果</span>吧！",
          },
          ],
          values: [
            {
              oldId: "FB34",
              txt: "Martin  Silk",
            },
            {
              oldId: "64D6",
              txt: "The Great Wall",
            },
            {
              oldId: "2ED4",
              txt: "Chinese Food",
            },
            {
              oldId: "44DE",
              txt: "Chinese Tea",
            },
          {
            oldId: "64D6",
            txt: "强调是请客",
          },
          {
            oldId: "2ED4",
            txt: "强调请的是“你”",
          },
          {
            oldId: "44DE",
            txt: "强调吃的东西是“苹果”",
          },
          {
            oldId: "FB34",
            txt: "强调请客的人是“我”",
          },
          ],
        },
        questionType: "matching",
@@ -610,39 +538,18 @@
        titleDescription: "1",
        userChoise: [],
        value: [],
        answerImg: require("../../assets/images/matching-one.png"),
      },
      questionData: {
        warnUp: {
          one: {
            value: "",
            isRight: null,
            answer: "Chinese knot",
          },
          two: {
            value: "",
            isRight: null,
            answer: "Chinese medicine",
          },
          three: {
            value: "",
            isRight: null,
            answer: "Chinese calligraphy",
          },
          four: {
            value: "",
            isRight: null,
            answer: "Taichi",
          },
          five: {
            value: "",
            isRight: null,
            answer: "sweet dumpling",
          },
          six: {
            value: "",
            isRight: null,
            answer: "Chinese chess",
          },
          one: "",
          two: "",
          three: "",
          four: "",
          five: "",
          six: "",
          seven: "",
          enight: "",
        },
        reading: {
          one: "",
@@ -662,62 +569,81 @@
      },
    };
  },

  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"
      );
      this.auidoPathTwo = await getResourcePath(
        "e93c0fdde08be5a4386c8c863892a287"
      );
      this.auidoPathThree = await getResourcePath(
        "e93c0fdde08be5a4386c8c863892a287"
      );
      // this.auidoPathOne = await getResourcePath(
      //   "2c5f6c69b0f9f7a3c03e473cb8c977f5"
      // );
      // this.auidoPathTwo = await getResourcePath(
      //   "e93c0fdde08be5a4386c8c863892a287"
      // );
      // this.auidoPathThree = await getResourcePath(
      //   "e93c0fdde08be5a4386c8c863892a287"
      // );
    },
    setBookQuestion() {
      console.log("保存");
      localStorage.setItem(
        "english-book-question-one",
        "artAndDrama-book-question-one",
        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>
  
  <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>
  

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