艺术戏剧（bug解决）

zhongshujie

2024-09-09 f77e02b69e4512f00251929b14888f3e6bbac37f

艺术戏剧（bug解决）

 src/App.vue

@@ -1,6 +1,5 @@
<template>
  <div id="app">

    <childHealth v-if="activeBook.name == 'childHealth'"></childHealth>
    <lifeCare v-if="activeBook.name == 'lifeCare'"></lifeCare>
    <embedded v-if="activeBook.name == 'embedded'"></embedded>
@@ -24,6 +23,7 @@
    artAndDance: () => import("./books/artAndDance/view/index.vue"),
    mathBook: () => import("./books/mathBook/view/index.vue"),
    artAndDrama: () => import("./books/artAndDrama/view/index.vue")

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

 src/books/artAndDrama/assets/images/fengdi.png

 src/books/artAndDrama/assets/images/header-green.png

 src/books/artAndDrama/assets/images/page6-header-green.png

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

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

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

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

 src/books/artAndDrama/assets/main.less

@@ -2,6 +2,7 @@
    width: 100%;
    height: 100%;
    font-family: "宋体","STKaiti", SimSun, sans-serif;

span.un1{
    -webkit-text-emphasis-style:dot;
   -moz-text-emphasis-style:dot;
@@ -13,6 +14,24 @@
        text-emphasis-position:under;
}

  // audio{
  //   width: 300px;
  //   height: 54px;
  // }

  .rhombusFather {
    position: relative;
    text-indent: 3em;
  }
  .rhombus {
    position: absolute;
    left: -23px;
  }
  .rhombuSpecial {
    position: absolute;
    left: -23px;

  }
  ul {
      list-style-type:none;
  }
@@ -20,15 +39,19 @@
  li {
      list-style-type:none;
  }

.ls1{
      font-family:"HiFont Hei GB";
  color:#30AAD1;
  font-weight:bold;
}

.hs{
  color:#B0441D;
}

.hs1{
    font-size: 40px;
  color:#E78D2D;
  font-weight:bold;
}
@@ -52,24 +75,22 @@

}

span.zt-0
{
  span.zt-0 {
  color:#0087AF;
}

p.pzt-0
{
  p.pzt-0 {
  color:#0087AF;
  font-size:18px;
}
p.pzt-0-right
{

  p.pzt-0-right {
  font-size:18px;
  color:#0087AF;
  text-align:right;
}
p.pzt-1
{

  p.pzt-1 {
  font-weight:bold;
  color:#0087AF;
  font-size:18px;
@@ -79,6 +100,7 @@
font-size:0.85em;
padding: 0 9%;
}

.img{
  text-align:center;
  font-size:0.8em;
@@ -96,26 +118,27 @@
  text-indent:0em;
}

p
{
  p {
  //margin-top:1em;
  margin: 0;
  text-indent:2em;
  line-height:30px;
  text-align:justify;
}

.cover {
  width:100%;
  padding:0px;
}

.center {
  text-align:center;
  margin-left:0%;
  margin-right:0%;
  text-indent:0em;
}
.center1
{

  .center1 {
  font-family:"STKaiti";
  text-align:center;
  margin-left:0%;
@@ -138,17 +161,20 @@
  margin-left:0%;
  margin-right:0%;
}

.right {
  text-align:right;
  margin-left:0%;
  margin-right:0%;
}

.right1 {
  font-family:"STKaiti";
  text-align:right;
  margin-left:0%;
  margin-right:0%;
}

.quote {
  margin-top:0%;
  margin-bottom:0%;
@@ -157,6 +183,7 @@
  text-align:justify;
  font-family:"cnepub", serif;
}

h1 {

  font-family:"STKaiti";
@@ -205,12 +232,12 @@
}

h3.lefth3{

  text-align:left;
  margin-top:0.2em;
  margin-bottom:1.2em;
  margin-left: 2em;
  text-indent:0em;

}

h4 {
@@ -222,6 +249,7 @@
  margin-bottom:1em;
  text-indent:0em;
}

h5 {

  font-weight:bold;
@@ -231,6 +259,7 @@
  margin-bottom:1em;
  text-indent:2em;
}

h6 {

  font-family:"cnepub", serif;
@@ -240,13 +269,17 @@
  text-indent:2em;
  margin-bottom:10px;
}

.u { 

    text-decoration:underline; }
    text-decoration: underline;
  }

.img-0{    
    display: flex;
width:100%;
}

.imz{
   width:96%;
   text-align:center;
@@ -257,38 +290,49 @@
.img-a{    
width:95%;
}

.img-b{
width:80%;
}

.img-c{    
width:70%;
}

.img-d{    
width:60%;
}

.img-e{    
width:50%;
}

.img-f{    
width:40%;
}

.img-g{    
width:30%;
}

.img-gh1{    
width:30%;
text-align:right;
}

.img-gh2{
width:45%;
text-align:right;
}

.img-h{    
width:25%;
}

.img-i{       
width:10%;
}

.img-j{        
width:5%;
}
@@ -297,30 +341,32 @@
height:2em;
margin-bottom:-0.5em;
}

.inline1{
height:1.5em;
margin-top:-1em;
margin-bottom:-0.4em;
}

.inline2{
height:2.5em;
margin-top:2em;
margin-bottom:-0.4em;
}

.inline3{
height:4em;
margin-top:2em;
margin-bottom:-0.4em;
}
.block
{

  .block {
  font-family:"STKaiti";
  font-size:1.15em;
  font-weight: 400;
}

.block1
{
  .block1 {
  font-family:"STKaiti";
  color:#08A496;
  text-align:right;
@@ -328,8 +374,8 @@
  margin-right:2em;
  text-indent:0em;
}
.block2
{

  .block2 {
  font-family:"STKaiti";
  font-size:1.15em;
  text-align:center;
@@ -341,6 +387,7 @@
  font-family:"STKaiti";
  font-size:1.2em;
}

div.bj{
  border:2px solid #E04239;
  background:#FDECD2;
@@ -387,13 +434,14 @@
  margin-right:-1em;

}

.img-gn{    
  height:2em;
  margin-bottom:-1.9em;
}

.img-gn1{        
  height:2em;
    height: 2.5em;
}

div.bj3{
@@ -407,6 +455,7 @@
  font-size:1.1em;
  padding-left: 1em;
}

 // 自定义
 .page-box {
    position: relative;
@@ -417,73 +466,87 @@
    background-color: #fff;
    padding-bottom: 117px;
  }
  // .front{
  //   font-family:"SimSun";
  //   font-weight: bold;
  //   font-size: 18px;
  // }

  .fw-b {
    font-weight: bold;
  }

  .t-l{
    text-align: left;
  }

  textarea{
    outline: none;
    font-family: "STkaiti";
    font-size: 1em;
    margin-top: 1em;
  }

  .textarea-focused {  
    border-color: #42b983;  
    box-shadow: 0 0 5px rgba(66, 185, 131, 0.5);  
  } 

  input{
    font-family: "STkaiti";

  }

  .folder{
    color: brown;
    display: flex;
    align-items: center;
    margin-right: 7%;
  }

  .folder>img{
    color: brown;
    height: 20px;
    width: auto;
    margin-top: 1px;
  }

  .Options{
    display: flex;
    flex-direction: row;
    cursor: pointer;
  }

  .text{
  margin: 0 8%;
  font-family: "STkaiti";
  }

  .text1{
  margin-bottom: 3%;
  font-family: "STkaiti";
  font-size: 1.15em;
  }

  .text2{
    margin: 0 8%;
    font-family: "STkaiti";
    text-align: left;
  }

  .text3{
    margin: 6% 8%;
    font-family: "STkaiti";
    font-size: 1.58em;
  }

  //底部参考文献的样式
  .references{
    font-family: "STkaiti";
    font-size: 0.8em;
  }

  //视频底部字体及图片样式
  .videoname{
    display: flex;
    justify-content: center;
  }

  .collect-btn {
    cursor: pointer;
    width: 20px;
@@ -491,106 +554,137 @@
    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;
    padding: 0;
  }

  .fl {
    display: flex;
  }

  .fw-wr {
    flex-wrap: wrap;
  }

  .fl-cl {
    flex-direction: column;
  }

  .ju-bt {
    justify-content: space-between;
  }

  .ju-end {
    justify-content: flex-end;
  }

  .al-cn {
    align-items: center;
  }

  .wh-nr {
    white-space: nowrap;
  }

  .w100 {
    width: 100%;
  }

  .m0 {
    margin: 0;
  }

  .mr-8 {
    margin-right: 8px;
  }

  .mt-20 {
    margin-top: 20px;
  }

  .mt-40 {
    margin-top: 40px !important;
  }

  .mb-20 {
    margin-bottom: 20px;
  }

  .mb-40 {
    margin-bottom: 40px;
  }

  .ml-40 {
    margin-left: 40px;
  }

  .mr-40 {
    margin-right: 40px;
  }

  .pg-mh {
    min-height: 1150px;
  }

  .dl-ib {
    display: inline-block;
  }

  .w-min {
    width: min-content;
  }

  .w40 {
    width: 40px;
  }

  .pb-box {
    position: absolute;
    bottom: 0;
  }

  .m16-0 {
    margin: 16px 0;
  }

  .auido-text {
    font-size: 1.15em;
    font-family: "FangSong", "PMingLiU", serif;
    font-weight: bold;
  }

  .input-bottom-border {
    border: 0;
    border-bottom: 1px solid #000000;
    width: 40%;

    &:focus {
      outline: none;
    }
  }

  // 整行的input标签
  .input-w-60{
    width: 60%;
  }

  .headerimg{
    margin-left: 5%;
  }

  .page-footer {
    position: relative;
    display: flex;
@@ -609,11 +703,13 @@
    z-index: 1;
    /* 确保页码数字在图片上方 */
  }

  .ends{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* 当屏幕宽度至少为600px时应用此样式 */
@media screen and (max-width: 430px) {
  .ends{
@@ -623,6 +719,7 @@
    flex-wrap: wrap;
  }
}

  .option {
  position: relative;
  display: flex;
@@ -632,6 +729,7 @@
  height: 250px;
  height: min-content;
}

  .page-footer-number-left {
    color: black;
    left: 15%;
@@ -663,6 +761,7 @@
      /* 确保圆形背景在文本下方 */
    }
  }

  .page-footer-number-right {
    color: black;
    right: 15%;
@@ -695,42 +794,51 @@
    }
  }
}

/* 媒体查询做基础响应式布局 */
@media (max-width: 660px) {
    .ans-drama {
            .pg-mh {
        min-height: 815px !important; 
      }

       /* 分页padding */
       .page-padding {
        padding: 104px 20px;
      }

      .padding-96 {
        padding: 0 20px 104px 20px;
      }

      /* video大小 */
      .video-box {
        max-width: 260px;
      }

      .page-box{
        min-height: 500px;
      }
    }
  }

  @media (min-width: 660px) {
    .ans-drama {
      .page-padding {
        padding: 104px 96px;
      }

      .padding-96 {
        padding: 0 96px 104px 96px;
      }

      .video-box {
        max-width: 370px;
      }

    }
  }

::-webkit-scrollbar {
    width: 8px;
    height: 10px;

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

@@ -4,7 +4,7 @@
      <div v-if="showPageList.indexOf(4) > -1">
        <h1 id="a004">
          <img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
          <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
          <audio style="margin-top: 1em" :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
        </h1>
        <div class="bodystyle">
          <div class="bk">
@@ -39,8 +39,8 @@
          <p class="text">
            在语言表述中，为了突出或强调某些意思，我们会使用“逻辑重音”这一技巧。同样一句话，不同的逻辑重音可以表达出不一样的意思。
          </p>
          <p class="text">
            <span class="hs1">◇</span>大声朗读下面的句子，连一连不同逻辑重音强调的意思。
          <p class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>大声朗读下面的句子，连一连不同逻辑重音强调的意思。
          </p>
          <h1>
            <!-- <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"
@@ -102,8 +102,8 @@
          <h3 class="lefth3" id="c003">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p class="text">
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          <p class="text rhombusFather">
            <span class="hs1 rhombus" style="">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1><audio :src="auidoPathThree" controls controlslist="noplaybackrate nodownload" class="audio"></audio></h1>
          <div class="bj3">
@@ -122,8 +122,8 @@
          <h3 class="lefth3" id="c004">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <p class="text">
            <span class="hs1">◇</span>在《一块奶酪》的故事中，小蚂蚁们都有各自的立场，你能理解他们的想法吗？请你和同伴根据故事内容讨论一下。
          <p class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>在《一块奶酪》的故事中，小蚂蚁们都有各自的立场，你能理解他们的想法吗？请你和同伴根据故事内容讨论一下。
          </p>
          <hr style="margin-left: 9%; margin-top: 10%; width: 25%;" />
          <p class="note left1 references">
@@ -148,8 +148,8 @@
          <h3 class="lefth3" id="c006">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p class="text">
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          <p class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1 class="lefth3 openImgBox" id="c005">
            <img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" />
@@ -196,9 +196,9 @@
          <h1 class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/1-4.gif" style="height: auto; width: 50%" />
          </h1>
          <p class="text">
          <p class="text rhombusFather">
            <span
              class="hs1">◇</span>生活中，我们总会遇到各种各样的诱惑。面对诱惑时，我们的内心常常会有两个不同的声音出现：一个声音要求我们严于律己，另一个声音要求我们随心所欲。请你分析一下，当蚂蚁队长面对掉落的奶酪渣的诱惑时，他内心的两个声音会说些什么呢？
              class="hs1 rhombus">◇</span>生活中，我们总会遇到各种各样的诱惑。面对诱惑时，我们的内心常常会有两个不同的声音出现：一个声音要求我们严于律己，另一个声音要求我们随心所欲。请你分析一下，当蚂蚁队长面对掉落的奶酪渣的诱惑时，他内心的两个声音会说些什么呢？
          </p>
          <p class="text t-l">正义队长：
            <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
@@ -230,8 +230,8 @@
          <h3 class="lefth3" id="c007">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p class="text">
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          <p class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1>
            <audio :src="auidoPathFive" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
@@ -251,8 +251,8 @@
          <h3 class="lefth3" id="c008">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <p class="text">
            <span class="hs1">◇</span>假如你是搬运奶酪的蚂蚁，你要怎么搬运不同形状、大小的奶酪呢？请先为自己设计一个剧本吧：
          <p class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>假如你是搬运奶酪的蚂蚁，你要怎么搬运不同形状、大小的奶酪呢？请先为自己设计一个剧本吧：
          </p>
          <p class="text">
            我是蚂蚁 <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" style=" width: 13%;"
@@ -288,8 +288,8 @@
          <p class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/1-5.gif" />
          </p>
          <p class="text">
            <span class="hs1">◇</span>蚂蚁队长把奶酪渣留给了年龄最小的蚂蚁，赢得了大家的认可。在生活中，你曾经像“蚂蚁队长”一样爱护弱小吗？或者像“小蚂蚁”一样得到过哥哥姐姐们的关爱吗？
          <p class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>蚂蚁队长把奶酪渣留给了年龄最小的蚂蚁，赢得了大家的认可。在生活中，你曾经像“蚂蚁队长”一样爱护弱小吗？或者像“小蚂蚁”一样得到过哥哥姐姐们的关爱吗？
          </p>
        </div>
        <!-- 此次为页脚部分（需要设置页码） -->
@@ -309,8 +309,8 @@
          <h3 class="lefth3" id="c009">
            <img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" />
          </h3>
          <p class="text ends">
            <span><span class="hs1">◇</span>放大缩小</span>
          <p class="text ends rhombusFather">
            <span><span class="hs1 rhombuSpecial">◇</span>放大缩小</span>
            <span> <audio :src="auidoPathSex" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
            </span>
          </p>
@@ -318,16 +318,16 @@
            请你交替“放大”和“缩小”五官。在“放大”时，想象五官要飞到外太空；在“缩小”时，想象五官全部缩小到了鼻尖上。
          </p>

          <p class="text ends">
            <span><span class="hs1">◇</span>提升苹果肌</span>
          <p class="text ends rhombusFather">
            <span><span class="hs1 rhombuSpecial">◇</span>提升苹果肌</span>
            <span><audio :src="auidoPathSeven" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
            </span>
          </p>
          <p class="text">
            想象你在一个陌生的地方，谁都不认识，突然遇见了好朋友，你很高兴，上前和他/她打招呼。做一做你此时的表情吧。
          </p>
          <p class="text ends">
            <span><span class="hs1">◇</span>微笑说“ang”</span>
          <p class="text ends rhombusFather">
            <span  style="text-wrap: nowrap"><span class="hs1 rhombuSpecial">◇</span>微笑说“ang”</span>
            <span><audio :src="auidoPathEight" controls controlslist="noplaybackrate nodownload"
                class="audio"></audio></span>
          </p>
@@ -335,8 +335,8 @@
            请你试一试在提升苹果肌的基础上，发出“ang”的音。声音要尽可能拉长、保持稳定，并向远送。
          </p>

          <p class="text ends">
            <span style="text-wrap: nowrap"><span class="hs1">◇</span>向远山喊“阿毛”</span>
          <p class="text ends rhombusFather">
            <span style="text-wrap: nowrap"><span class="hs1 rhombuSpecial">◇</span>向远山喊“阿毛”</span>
            <span style="margin-left: -4%;"><audio :src="auidoPathNine" controls
                controlslist="noplaybackrate nodownload" class="audio"></audio></span>

@@ -362,7 +362,7 @@
          <h3 class="lefth3" id="c010">
            <img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
          </h3>
          <p class="text"><span class="hs1">◇</span>排一排·演一演：孔融让梨</p>
          <p class="text rhombusFather"><span class="hs1 rhombus">◇</span>排一排·演一演：孔融让梨</p>
          <p class="text">
            孔融四岁就懂礼貌、知谦让，是我们学习的好榜样，让我们运用本单元的戏剧知识，把他的故事表演出来吧！
          </p>

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

@@ -4,7 +4,7 @@
      <div v-if="showPageList.indexOf(14) > -1">
        <h1 id="a004">
          <img class="img-0" alt="" src="../../assets/images/dy2.jpg" />
          <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
          <audio style="margin-top: 1em;" :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
        </h1>
        <div class="bodystyle">
          <div class="bk">
@@ -37,12 +37,12 @@
          <h3 class="lefth3" id="c011">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p class="text"><span class="hs1">◇</span>我是小画家</p>
          <p class="text rhombusFather"><span class="hs1 rhombus">◇</span>我是小画家</p>
          <p class="text">保持头部不动，试着用眼神画出下面的图案吧！</p>
          <p class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/0016-1.jpg" />
          </p>
          <p class="text"><span class="hs1">◇</span>嗅觉大冒险</p>
          <p class="text rhombusFather"><span class="hs1 rhombus">◇</span>嗅觉大冒险</p>
          <p class="text">
            你最爱吃的食物是 <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 13%" />。当闻到它的味道时，你会做出什么表情呢？
@@ -55,8 +55,8 @@
            <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%">
              <span class="hs1">◇</span>以小组为单位，使用手偶道具表演附录中的剧本选段2。
            <p class="text rhombusFather" style="width: 50%">
              <span class="hs1 rhombus">◇</span>以小组为单位，使用手偶道具表演附录中的剧本选段2。
            </p>
            <p class="openImgBox" style="width: 50%">
              <img class="img-e" alt="" src="../../assets/images/2-1.gif" />
@@ -78,7 +78,7 @@
        <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 rhombusFather"><span class="hs1 rhombus">◇</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"
@@ -113,19 +113,19 @@
          <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>如果朋友心情不好，你该怎么安慰他/她呢？
          <p class="text t-l rhombusFather" ><span class="hs1 rhombus">◇</span>如果朋友心情不好，你该怎么安慰他/她呢？
            <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'one' }"  @focus="handleFocus('one')"  @blur="handleBlur('one')" ></textarea>
          </p>

          <p class="text t-l"><span class="hs1">◇</span>如果你邀请好朋友来家里做客，你该说什么来欢迎他/她呢？
          <p class="text t-l rhombusFather"><span class="hs1 rhombus">◇</span>如果你邀请好朋友来家里做客，你该说什么来欢迎他/她呢？
            <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion"  :class="{ 'textarea-focused': isFocused === 'two' }"  @focus="handleFocus('two')"  @blur="handleBlur('two')" ></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 rhombusFather"><span class="hs1 rhombus">◇</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>
@@ -163,8 +163,8 @@
          <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>
          <p class="text rhombusFather"><span class="hs1 rhombus">◇</span>你看到妈妈的水杯没水了。</p>
          <p class="text rhombusFather"><span class="hs1 rhombus">◇</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; ">
@@ -173,7 +173,7 @@
            <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="text rhombusFather"><span class="hs1 rhombus">◇</span>请试着用无实物表演的方式把下面的情景表演出来吧！</p>
          <p class="center text"><img class="img-0" style="width: 100%; height: auto;" lt=""
              src="../../assets/images/0020-2.jpg" /></p>
        </div>
@@ -193,22 +193,22 @@
        <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>
          <p class="text ends rhombusFather">
            <span><span class="hs1 rhombuSpecial">◇</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>
          <p class="text ends rhombusFather">
            <span> <span class="hs1 rhombuSpecial">◇</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>
          <p class="text ends rhombusFather">
            <span><span class="hs1 rhombuSpecial">◇</span>吹袋子练习</span>
            <span> <audio :src="auidoPathFour" controls controlslist="noplaybackrate nodownload"
                class="audio"></audio></span>
          </p>
@@ -228,16 +228,16 @@
        </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>
          <p class="text ends rhombusFather">
            <span style="text-wrap: nowrap"> <span class="hs1 rhombuSpecial">◇</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 class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>请走进剧场观看不同剧种的现场演出，感受戏剧的魅力吧！
          </p>
          <p class="center text">
            <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"

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

@@ -5,7 +5,8 @@
        <h1 id="a004">
          <!-- 这里的动图有问题，没有背景图片 -->
          <img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
          <audio :src="audioPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
          <audio style="margin-top: 1em" :src="audioPathOne" controls controlslist="noplaybackrate nodownload"
            class="audio"></audio>
        </h1>
        <div class="bodystyle">
          <div class="bk">
@@ -14,7 +15,7 @@
                <img class="img-gn" alt="" src="../../assets/images/dydd.jpg" />
              </p>
            </div>
            <p class="" style="margin: 8% 5% 5% 7%">
            <p class="block" style="margin: 8% 5% 5% 7%">
              每个人的心中都有一个舞台，演绎着生活的酸甜苦辣，记录着成长的点点滴滴。《一块奶酪》中的每只小蚂蚁也有很多心里话要表达，让我们一起演绎出来吧！
            </p>
          </div>
@@ -40,21 +41,21 @@
          </h3>
          <p class="text">寒来暑往，秋收冬藏。一年四季，劳碌奔忙。</p>
          <p class="text">团结一心，吹响号角。幸福生活，劳动创造。</p>
          <p class="text"><span class="hs1">◇</span>说一说你会做哪些家务？</p>
          <p class="text">
            <span class="hs1">◇</span>和小伙伴讨论劳动在生活中的作用。
          <p class="text rhombusFather"><span class="hs1 rhombus">◇</span>说一说你会做哪些家务？</p>
          <p class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>和小伙伴讨论劳动在生活中的作用。
          </p>
          <p class="text">
            <span class="hs1">◇</span>表演一种家务劳动，请小伙伴猜一猜。
          <p class="text rhombusFather">
            <span class="hs1 rhombus ">◇</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 class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>邀请小伙伴分角色朗诵附录中的剧本选段1～2，重读加点文字。
          </p>
          <p class="block3" style="margin: 3% 0%">
            <span class="hs">剧本:　一块奶酪</span>
            <span class="hs">剧本:　一块奶酪（选段1~2）</span>
          </p>
          <!-- <p class="center1 text" style="font-size: 25px; margin: 3% 0;"><span class="hs">一块奶酪</span></p> -->
          <!-- 此处为附录资源处 -->
@@ -86,8 +87,8 @@
          <h3 class="lefth3" id="c023">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p class="text">
            <span class="hs1">◇</span>当上半场比赛失利，中场休息时，你会怎么做？当别人夸赞你的时候，你会怎么做？请你和朋友一起演一演吧。
          <p class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>当上半场比赛失利，中场休息时，你会怎么做？当别人夸赞你的时候，你会怎么做？请你和朋友一起演一演吧。
          </p>
          <h3 class="lefth3" id="c024" style="margin-top: 7%">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
@@ -95,8 +96,8 @@
          <p class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/3-2.gif" />
          </p>
          <p class="text">
            <span class="hs1">◇</span>请把蚂蚁队长的台词和他的内心独白连起来吧！
          <p class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>请把蚂蚁队长的台词和他的内心独白连起来吧！
          </p>
          <!-- 连线题 -->
          <matching :rawData="rawData" :question="question" class="macthing" :primary-color="color"
@@ -121,8 +122,8 @@
          <h3 class="lefth3" id="c025">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p class="text t-l">
            <span class="hs1">◇</span>在《一块奶酪》的故事中，蚂蚁队长也起过贪心，但他最终成功克服了贪心，你认为他是怎么做到的呢？
          <p class="text t-l rhombusFather">
            <span class="hs1 rhombus">◇</span>在《一块奶酪》的故事中，蚂蚁队长也起过贪心，但他最终成功克服了贪心，你认为他是怎么做到的呢？
            <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
              :class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')"
@@ -132,9 +133,20 @@
          <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 class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>阅读附录中的剧本选段5，为自己的表演设计动作吧！
          </p>
          <p class="block3" style="margin: 3% 0%">
            <span class="hs">剧本:　一块奶酪（选段3~5）</span>
          </p>
          <!-- 此处为附录资源处 -->
          <div class="Options text">
            <span class="folder" v-for="(segment, index) in paragraph" :key="index" @click="showContent(index+2)"><img
                src="../../assets/images/icon/folder.svg" alt="" />选段{{
                  segment
                }}</span>
          </div>
          <div v-if="activeIndex !== null" class="content-wrapper text" v-html="activeContent"></div>
          <p class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/3-3.gif" />
          </p>
@@ -156,8 +168,8 @@
          <h3 class="lefth3" id="c027">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p class="text">
            <span class="hs1">◇</span>请按照事件六要素的结构给大家分享一件快乐的事吧！
          <p class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>请按照事件六要素的结构给大家分享一件快乐的事吧！
          </p>
          <p class="text2">
            时间：<input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion"
@@ -196,8 +208,8 @@
              @blur="handleBlur('four')">
            </textarea>
          </p>
          <p class="text t-l" style="margin-top: 7%">
            <span class="hs1">◇</span>你有烦恼吗？说一说是什么，你是怎么处理它的？
          <p class="text t-l rhombusFather" style="margin-top: 7%">
            <span class="hs1 rhombus">◇</span>你有烦恼吗？说一说是什么，你是怎么处理它的？
            <textarea v-model="questionData.reading.five" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
              :class="{ 'textarea-focused': isFocused === 'five' }" @focus="handleFocus('five')"
@@ -222,8 +234,8 @@
          <h3 class="lefth3" id="c028">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <p class="text">
            <span class="hs1">◇</span>运用重音、内心独白和动作设计等表现方式，将《一块奶酪》的故事表演出来吧！（剧本见附录）
          <p class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>运用重音、内心独白和动作设计等表现方式，将《一块奶酪》的故事表演出来吧！（剧本见附录）
          </p>
          <p class="center openImgBox">
            <img class="img-a" alt="" src="../../assets/images/0028-1.jpg" />
@@ -246,8 +258,8 @@
          <h3 class="lefth3" id="c029">
            <img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" />
          </h3>
          <p class="text ends">
            <span><span class="hs1">◇</span>喘气练习</span>
          <p class="text ends rhombusFather">
            <span style="text-wrap: nowrap"><span class="hs1 rhombuSpecial">◇</span>喘气练习</span>
            <span>
              <audio :src="audioPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
            </span>
@@ -255,15 +267,15 @@
          <p class="text">
            平视前方，肩膀放松，双手自然下垂或叉腰，双脚分开，与肩同宽。模仿小狗喘气，感受腹部的“呼吸”状态，想象自己的腹部是一个气球，在吸气时腹部向外扩张，吐气时腹部向内收缩。
          </p>
          <p class="text ends">
            <span><span class="hs1">◇</span>“嘶”声练习</span>
          <p class="text ends rhombusFather">
            <span style="text-wrap: nowrap"><span class="hs1 rhombuSpecial">◇</span>“嘶”声练习</span>
            <span>
              <audio :src="audioPathThree" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
            </span>
          </p>
          <p class="text">在“喘气练习”的基础上，发出“嘶”音，每组4短1长。</p>
          <p class="text ends">
            <span><span class="hs1">◇</span>“嘟”音练习</span>
          <p class="text ends rhombusFather">
            <span style="text-wrap: nowrap"><span class="hs1 rhombuSpecial">◇</span>“嘟”音练习</span>
            <span>
              <audio :src="audioPathFour" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
            </span>
@@ -271,8 +283,8 @@
          <p class="text">
            平视前方，肩膀放松，双手自然下垂，双脚分开，与肩同宽。放松双唇，深吸气，吹出气流带动嘴唇抖动，发出“嘟”的声音，声音越长越好。
          </p>
          <p class="text" style="text-align: left">
            <span><span class="hs1">◇</span>“我们赞美长江”气声练习</span>
          <p class="text rhombusFather" style="text-align: left">
            <span><span class="hs1 rhombuSpecial">◇</span>“我们赞美长江”气声练习</span>
            <span class="text">
              <audio :src="audioPathFive" controls controlslist="noplaybackrate nodownload"
                class="audio"></audio></span>
@@ -298,8 +310,8 @@
          <h3 class="lefth3" id="c030">
            <img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
          </h3>
          <p class="text">
            <span class="hs1">◇</span>劳动最光荣！请为家中长辈做一件力所能及的事情，用实际行动表达你的爱意！体验过程中要记住每一个动作的细节，再尝试以无实物表演的方式进行展示。
          <p class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>劳动最光荣！请为家中长辈做一件力所能及的事情，用实际行动表达你的爱意！体验过程中要记住每一个动作的细节，再尝试以无实物表演的方式进行展示。
          </p>
          <p class="center text">
            <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
@@ -314,8 +326,9 @@
            <span>视频：心有多大，舞台就有多大 </span>
            <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
              placement="top-start">
              <img :src="collectResourceList.findIndex(item => item.id == 'dd44a1e31b4304f50d10b2481a148411') > -1 ? collectCheck : collectImg" alt="" class="collect-btn"
                @click="handleCollect('video')" />
              <img
                :src="collectResourceList.findIndex(item => item.id == 'dd44a1e31b4304f50d10b2481a148411') > -1 ? collectCheck : collectImg"
                alt="" class="collect-btn" @click="handleCollect('video')" />
            </el-tooltip>
          </p>
        </div>
@@ -370,7 +383,8 @@
      audioPathFour: "",
      audioPathFive: "",
      isFocused: null, // 用于跟踪textarea的聚焦状态
      segments: [1, 2, 3, 4, 5],
      segments: [1, 2],
      paragraph:[3,4,5],
      collectResourceList:[],
      color: "#fff",
      activeIndex: null, // 用于追踪当前活动的按钮索引

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

@@ -5,7 +5,7 @@
                <h1 id="a004">
                    <!-- 这里的动图有问题，没有背景图片 -->
                    <img class="img-0" alt="" src="../../assets/images/dy4.jpg" />
                    <audio :src="audioPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
                    <audio style="margin-top: 1em;" :src="audioPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
                </h1>
                <div class="bodystyle">
                    <div class="bk">
@@ -33,8 +33,8 @@
                <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 class="text"><span class="hs1">◇</span>以小组为单位围成一圈，面朝圈外蹲下，相邻两人互挎手臂，组员同时站起来，看看哪个组最快！</p>
                    <p class="text t-l"><span class="hs1">◇</span>说一说：快速站起来的秘诀是什么？
                    <p class="text rhombusFather"><span class="hs1 rhombus">◇</span>以小组为单位围成一圈，面朝圈外蹲下，相邻两人互挎手臂，组员同时站起来，看看哪个组最快！</p>
                    <p class="text t-l rhombusFather"><span class="hs1 rhombus">◇</span>说一说：快速站起来的秘诀是什么？
                        <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
                            style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
                            :class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')"
@@ -42,7 +42,7 @@
                         </textarea>
                    </p>
                    <h3 class="lefth3" id="c032"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>以小组为单位，表演以下场景，注意保持动作一致哦。</p>
                    <p class="text rhombusFather"><span class="hs1 rhombus">◇</span>以小组为单位，表演以下场景，注意保持动作一致哦。</p>
                    <p class="text">蚂蚁队长吹响集合号，蚂蚁们迅速跑上场站好队形。</p>
                    <p class="text">蚂蚁们抬着奶酪向前走着。</p>
                    <p class="text">蚂蚁们跟随蚂蚁队长的口令消失在草丛里。</p>
@@ -66,12 +66,14 @@
                <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 class="text"><span
                            class="hs1">◇</span>春天来了，春风吹过，柳树发芽了，迎春花开了，小燕子在天空自由地飞翔。一切都是那么生机勃勃。请为“春天”涂上你喜欢的颜色。</p>
                    <p class="text rhombusFather"><span
                            class="hs1 rhombus">◇</span>春天来了，春风吹过，柳树发芽了，迎春花开了，小燕子在天空自由地飞翔。一切都是那么生机勃勃。请为“春天”涂上你喜欢的颜色。</p>
                    <!-- 图片缺失 -->
                    <!-- <p class="center"><img class="img-e" alt="" src="./../assets/images/0033-1.jpg" /></p> -->
                    <graffiti :page="32" :bcImg="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'"
                        :imgWidth="596" :imgHeight="500" />
                    <!-- <graffiti :page="32" :bcImg="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'"
                        :imgWidth="596" :imgHeight="500" /> -->
                    <paint :imgUrl="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'" :page="32"
                    />
                </div>
                <!-- 此次为页脚部分（需要设置页码） -->
                <div class="page-footer">
@@ -88,7 +90,7 @@
                <img class="headerimg" src="../../assets/images/page5.png" alt="" />
                <div class="bodystyle" style="margin-top: 3%;">
                    <h3 class="lefth3" id="c034"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>动动手，为《一块奶酪》中的蚂蚁角色设计简单的服装吧！</p>
                    <p class="text rhombusFather"><span class="hs1 rhombus">◇</span>动动手，为《一块奶酪》中的蚂蚁角色设计简单的服装吧！</p>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p>
                </div>
                <!-- 此次为页脚部分（需要设置页码） -->
@@ -106,10 +108,17 @@
                <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 class="text"><span class="hs1">◇</span>以小组为单位，头顶纸杯，腿夹报纸，进行夹纸运杯游戏！</p>
                    <p class="text rhombusFather"><span class="hs1 rhombus">◇</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="text rhombusFather"><span class="hs1 rhombus">◇</span>请根据《一块奶酪》的剧本，列出演出中需要的道具清单，请按照清单，利用你收集的旧物制作道具吧！</p>
                    <p class="text">
                        <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6"
                            style="margin: 1em 0; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
                            :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')"
                            @blur="handleBlur('two')">
                         </textarea>
                    </p>
                    <p class="center"><img class="img-e" alt="" src="../../assets/images/0035-1.jpg" /></p>
                </div>
                <!-- 此次为页脚部分（需要设置页码） -->
@@ -128,11 +137,11 @@
                <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 class="text"><span class="hs1">◇</span>请你试着模拟演员候场、谢幕，舞台美术工作人员进行幕后准备的场景。</p>
                    <p class="text rhombusFather"><span class="hs1 rhombus">◇</span>请你试着模拟演员候场、谢幕，舞台美术工作人员进行幕后准备的场景。</p>
                    <p class="center"><img class="img-e" alt="" src="../../assets/images/0036-1.jpg" /></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="text rhombusFather"><span class="hs1 rhombus">◇</span>邀请同伴共同完成《一块奶酪》的展演吧！</p>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/0036-2.jpg" /></p>
                </div>
                <!-- 此次为页脚部分（需要设置页码） -->
@@ -151,8 +160,8 @@
                    <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 text1"><span class="hs">形体操练习</span></p>
                    <p class="text ends">
                        <span><span class="hs1">◇</span>头部运动</span>
                    <p class="text ends rhombusFather">
                        <span><span class="hs1 rhombus">◇</span>头部运动</span>
                        <span> <audio :src="audioPathTwo" controls controlslist="noplaybackrate nodownload"
                                class="audio"></audio> </span>
                    </p>
@@ -160,16 +169,16 @@
                    <p class="text">第2个八拍：左手越过头顶摸右耳，向左轻轻压头部。</p>
                    <p class="text">第3个八拍：头部顺时针转一圈。</p>
                    <p class="text">第4个八拍：头部逆时针转一圈。</p>
                    <p class="text ends">
                        <span><span class="hs1">◇</span>开肩练习</span>
                    <p class="text ends rhombusFather">
                        <span><span class="hs1 rhombus">◇</span>开肩练习</span>
                        <span> <audio :src="audioPathThree" controls controlslist="noplaybackrate nodownload"
                                class="audio"></audio> </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 ends">
                        <span><span class="hs1">◇</span>提沉肩运动</span>
                    <p class="text ends rhombusFather">
                        <span><span class="hs1 rhombus">◇</span>提沉肩运动</span>
                        <span> <audio :src="audioPathFour" controls controlslist="noplaybackrate nodownload"
                                class="audio"></audio> </span>
                    </p>
@@ -191,8 +200,8 @@
                <div class="bodystyle" style="margin-top: 3%;">
                    <p class="text">第1至第2个八拍：双手下垂，手心向下，双肩上提再沉下，两拍一动。</p>
                    <p class="text">第3至第4个八拍：双手下垂，手心向下，左右肩膀依次上提再沉下，一拍一动。</p>
                    <p class="text ends">
                        <span><span class="hs1">◇</span>伸展运动</span>
                    <p class="text ends rhombusFather">
                        <span><span class="hs1 rhombus">◇</span>伸展运动</span>
                        <span> <audio :src="audioPathFive" controls controlslist="noplaybackrate nodownload"
                                class="audio"></audio> </span>
                    </p>
@@ -201,7 +210,7 @@
                    <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="text rhombusFather"><span class="hs1 rhombus">◇</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
@@ -228,7 +237,7 @@
</template>
<script>
import { getResourcePath } from "@/assets/methods/resources";
import graffiti from '@/components/graffiti/index.vue'
import paint from '@/components/paint/index.vue'
import { getCollectResource, setCollectResource } from "@/assets/methods/resources";
export default {
    name: "chapterFour",
@@ -237,7 +246,9 @@
            type: Array,
        },
    },
    components: { graffiti },
    components: { 
        paint
     },
    //在这里对调用的方法进行挂载
    async mounted() {
        this.getVidoePath();
@@ -276,6 +287,7 @@
                },
                reading: {
                    one: "",
                    two: "",
                },
                table: {
                    one: "",

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

@@ -199,6 +199,11 @@
                <div class="page-footer-number-left">40</div>
            </div>
        </div>
        <div class="page-box mt-20" page="44" style="padding-bottom: 0px;">
            <div v-if="showPageList.indexOf(44) > -1">
                <img class="img-0" alt="" src="../../assets/images/fengdi.png" />
            </div>
        </div>
    </div>
</template>

@@ -253,17 +258,21 @@
    background-color: rgb(188, 220, 164);
    padding: 5% 0%;
}

.mar-t-b-5{
    margin: 5% 0;
}

.mar-b-5{
    margin-bottom: 5%;
}

.selections{
    margin-top: 5%;
    margin-bottom: 1%;
    margin: 5% 8% 1% 8%
}

.ft-25{
    font-size: 25px;
    font-family: "STkaiti";

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

@@ -15,23 +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 left1">编委会</p>
              <p id="a003" class="front left1 kaiti fw-b">编委会</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>
              <p class="left1 kaiti" >顾　　问：<span class="kaiti">彭吉象　严燕生</span></p>
              <p class="left1 kaiti" >主　　编：<span class="kaiti">麻文琦</span></p>
              <p class="left1 kaiti" >副&ensp;主&ensp;编：<span class="kaiti">陈　利</span></p>
              <ul class="fl left1"> 
                <li>
                  <p class="wh-nr left1" style="margin: 0%;">编写委员：</p>
                  <p class="wh-nr left1 kaiti" style="margin: 0%;">编写委员：</p>
                </li>
                <li class="fl fl-cl">
                  <span class="kaiti">王谷川　谢霜南　李晨成　周力君　韩燕楠菲</span>
                </li>
              </ul>
              <p class="left1">美术绘画：<span class="kaiti">何　冰</span></p>
              <p class="left1 kaiti">美术绘画：<span class="kaiti">何　冰</span></p>
              <ul class="fl">
                <li>
                  <p class="wh-nr left1" style="margin: 0%;">版权说明：</p>
                  <p class="wh-nr left1 kaiti" style="margin: 0%;">版权说明：</p>
                </li>
                <li class="fl fl-cl">
                  <span class="kaiti">本书部分文字作品著作权由中国文字著作权协会授权，</span>

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

@@ -186,7 +186,7 @@

    // 测试页面跳转
    //  setTimeout(() => {
    //  this.gotoPage(3,24);
    //  this.gotoPage(5,3);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",

 src/components/dragQuestion/index.vue

@@ -1,8 +1,8 @@
<template>
  <div class="drag-box" :style="{ borderColor: bcColor }">
    <div class="title-box">
      <p class="text" style="text-indent: 2em !important">
        <span class="hs1">◇</span>{{ titileText }}
      <p class="text rhombusFather" style="text-indent: 2em !important">
        <span class="hs1 rhombus">◇</span>{{ titileText }}
      </p>
      <span
        class="svg-btn t0"

 src/components/paint/index.vue

@@ -22,7 +22,7 @@
          <option
            v-for="(item, index) in modelList"
            :value="item.value"
            ::key="index"
            :key="index"
          >
            {{ item.name }}
          </option>