艺术戏剧（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

@@ -1,414 +1,463 @@
.ans-drama {
    width: 100%;
    height: 100%;
    font-family: "宋体","STKaiti", SimSun, sans-serif;
span.un1{
    -webkit-text-emphasis-style:dot;
   -moz-text-emphasis-style:dot;
    -ms-text-emphasis-style:dot;
        text-emphasis-style:dot;
-webkit-text-emphasis-position:under;
   -moz-text-emphasis-position:under;
    -ms-text-emphasis-position:under;
        text-emphasis-position:under;
}
  width: 100%;
  height: 100%;
  font-family: "宋体", "STKaiti", SimSun, sans-serif;

  span.un1 {
    -webkit-text-emphasis-style: dot;
    -moz-text-emphasis-style: dot;
    -ms-text-emphasis-style: dot;
    text-emphasis-style: dot;
    -webkit-text-emphasis-position: under;
    -moz-text-emphasis-position: under;
    -ms-text-emphasis-position: under;
    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;
    list-style-type: none;
  }

  li {
      list-style-type:none;
    list-style-type: none;
  }
.ls1{
      font-family:"HiFont Hei GB";
  color:#30AAD1;
  font-weight:bold;
}
.hs{
  color:#B0441D;
}
.hs1{
  color:#E78D2D;
  font-weight:bold;
}

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

span.under1{
  border-bottom:2px solid #F0BD4A;
  border-width:2px;
  .hs {
    color: #B0441D;
  }

}
  .hs1 {
    font-size: 40px;
    color: #E78D2D;
    font-weight: bold;
  }

div.bodystyle {
  text-align:justify;
  margin:0 12%;
  line-height:30px;
  .zs1 {
    font-family: "HiFont Hei GB";
    color: #857EB4;
    font-weight: bold;
  }

}
  span.under1 {
    border-bottom: 2px solid #F0BD4A;
    border-width: 2px;

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

p.pzt-0
{
  color:#0087AF;
  font-size:18px;
}
p.pzt-0-right
{
  font-size:18px;
  color:#0087AF;
  text-align:right;
}
p.pzt-1
{
  font-weight:bold;
  color:#0087AF;
  font-size:18px;
}
  div.bodystyle {
    text-align: justify;
    margin: 0 12%;
    line-height: 30px;

.note{
font-size:0.85em;
padding: 0 9%;
}
.img{
  text-align:center;
  font-size:0.8em;
  color:#5D78BB;
  margin-left:0%;
  margin-right:0%;
  text-indent:0em;
}
  }

.img1{
  text-align:right;
  font-size:0.85em;
  margin-left:0%;
  margin-right:2em;
  text-indent:0em;
}
  span.zt-0 {
    color: #0087AF;
  }

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
{
  font-family:"STKaiti";
  text-align:center;
  margin-left:0%;
  margin-right:0%;
  font-size:1.2em;
  text-indent:0em;
  font-weight:bold;
}
  p.pzt-0 {
    color: #0087AF;
    font-size: 18px;
  }

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

  p.pzt-1 {
    font-weight: bold;
    color: #0087AF;
    font-size: 18px;
  }

  .note {
    font-size: 0.85em;
    padding: 0 9%;
  }

  .img {
    text-align: center;
    font-size: 0.8em;
    color: #5D78BB;
    margin-left: 0%;
    margin-right: 0%;
    text-indent: 0em;
  }

  .img1 {
    text-align: right;
    font-size: 0.85em;
    margin-left: 0%;
    margin-right: 2em;
    text-indent: 0em;
  }

  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 {
    font-family: "STKaiti";
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    font-size: 1.2em;
    text-indent: 0em;
    font-weight: bold;
  }


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

.left1 {
  // font-family:"STKaiti";
  text-indent:0em;
  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%;
  margin-left:1em;
  margin-right:1em;
  text-align:justify;
  font-family:"cnepub", serif;
}
h1 {
  .left1 {
    // font-family:"STKaiti";
    text-indent: 0em;
    margin-left: 0%;
    margin-right: 0%;
  }

  font-family:"STKaiti";
  text-align:center;
  font-size:1.8em;
  color:#515594;
  margin-bottom:0%;
  margin-top:0.5cm;
}
  .right {
    text-align: right;
    margin-left: 0%;
    margin-right: 0%;
  }

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

  .quote {
    margin-top: 0%;
    margin-bottom: 0%;
    margin-left: 1em;
    margin-right: 1em;
    text-align: justify;
    font-family: "cnepub", serif;
  }

  h1 {

    font-family: "STKaiti";
    text-align: center;
    font-size: 1.8em;
    color: #515594;
    margin-bottom: 0%;
    margin-top: 0.5cm;
  }

  h1.left-h1 {
    text-indent: 0em;
    text-align: left;
    text-indent: 0em;
  }


h2 {
  font-family:"STKaiti";
  text-align:center;
  font-size:1.5em;
  margin-top:0%;
  margin-bottom:1.8em;
  text-indent:0em;
}
  h2 {
    font-family: "STKaiti";
    text-align: center;
    font-size: 1.5em;
    margin-top: 0%;
    margin-bottom: 1.8em;
    text-indent: 0em;
  }

h2.whleft2{
  h2.whleft2 {

  text-align:left;
  color:#AF0206;
  font-size:1.2em;
  margin-top:0.2em;
  margin-bottom:0.2em;
  text-indent:0em;
}
    text-align: left;
    color: #AF0206;
    font-size: 1.2em;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    text-indent: 0em;
  }

h3 {
  font-family:"STKaiti";
  color:#EF495D;
  font-weight:bold;
  font-size:1.2em;
  margin-top:2em;
  text-align:center;
  margin-bottom:2em;
  text-indent:0em;
}
  h3 {
    font-family: "STKaiti";
    color: #EF495D;
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 2em;
    text-align: center;
    margin-bottom: 2em;
    text-indent: 0em;
  }

h3.lefth3{
  h3.lefth3 {
    text-align: left;
    margin-top: 0.2em;
    margin-bottom: 1.2em;
    margin-left: 2em;
    text-indent: 0em;

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

h4 {
  h4 {

  font-weight:bold;
  color:#5877BA;
  font-size:1.1em;
  margin-top:0.2em;
  margin-bottom:1em;
  text-indent:0em;
}
h5 {
    font-weight: bold;
    color: #5877BA;
    font-size: 1.1em;
    margin-top: 0.2em;
    margin-bottom: 1em;
    text-indent: 0em;
  }

  font-weight:bold;
  color:#C96653;
  font-size:1em;
  margin-top:0.2em;
  margin-bottom:1em;
  text-indent:2em;
}
h6 {
  h5 {

  font-family:"cnepub", serif;
  color:#36C3F4;
  font-size:1.1em;
  margin-top:10px;
  text-indent:2em;
  margin-bottom:10px;
}
.u { 
    font-weight: bold;
    color: #C96653;
    font-size: 1em;
    margin-top: 0.2em;
    margin-bottom: 1em;
    text-indent: 2em;
  }

    text-decoration:underline; }
  h6 {

.img-0{	
width:100%;
}
.imz{
   width:96%;
   text-align:center;
    font-family: "cnepub", serif;
    color: #36C3F4;
    font-size: 1.1em;
    margin-top: 10px;
    text-indent: 2em;
    margin-bottom: 10px;
  }

  .u {

    text-decoration: underline;
  }

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

  .imz {
    width: 96%;
    text-align: center;


}
  }

.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%;
}
  .img-a {
    width: 95%;
  }

.inline{        
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
{
  font-family:"STKaiti";
  font-size:1.15em;
  font-weight: 400;
}
  .img-b {
    width: 80%;
  }

.block1
{
  font-family:"STKaiti";
  color:#08A496;
  text-align:right;
  font-size:1.15em;
  margin-right:2em;
  text-indent:0em;
}
.block2
{
  font-family:"STKaiti";
  font-size:1.15em;
  text-align:center;
  text-indent:0em;
}
  .img-c {
    width: 70%;
  }

.block3{
  font-weight:bold;
  font-family:"STKaiti";
  font-size:1.2em;
}
div.bj{
  border:2px solid #E04239;
  background:#FDECD2;
  border-style:solid none none none;
  padding:0.2em 0.4em 0.2em 0.4em;
  margin-top:1em;
  margin-left:0.5em;
  margin-right:0.5em;
  margin-bottom:-0.8em;
  font-size:1.1em;
  box-shadow: 0.3em 0.3em 0px 0px #C3C2C0;
}
  .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%;
  }

  .inline {
    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 {
    font-family: "STKaiti";
    font-size: 1.15em;
    font-weight: 400;
  }

  .block1 {
    font-family: "STKaiti";
    color: #08A496;
    text-align: right;
    font-size: 1.15em;
    margin-right: 2em;
    text-indent: 0em;
  }

  .block2 {
    font-family: "STKaiti";
    font-size: 1.15em;
    text-align: center;
    text-indent: 0em;
  }

  .block3 {
    font-weight: bold;
    font-family: "STKaiti";
    font-size: 1.2em;
  }

  div.bj {
    border: 2px solid #E04239;
    background: #FDECD2;
    border-style: solid none none none;
    padding: 0.2em 0.4em 0.2em 0.4em;
    margin-top: 1em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    margin-bottom: -0.8em;
    font-size: 1.1em;
    box-shadow: 0.3em 0.3em 0px 0px #C3C2C0;
  }


.bj2{
  border:2px solid #E04239;
  background:#FDECD2;
  border-style:solid none none none;
  padding:0.2em 0.4em 0.2em 0.4em;
  margin-top:1em;
  margin-left:0.5em;
  margin-right:0.5em;
  margin-bottom:-0.8em;
  font-size:1.1em;
  box-shadow: 0.3em 0.3em 0px 0px #C3C2C0;
}
  .bj2 {
    border: 2px solid #E04239;
    background: #FDECD2;
    border-style: solid none none none;
    padding: 0.2em 0.4em 0.2em 0.4em;
    margin-top: 1em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    margin-bottom: -0.8em;
    font-size: 1.1em;
    box-shadow: 0.3em 0.3em 0px 0px #C3C2C0;
  }

.kaiti{
  font-family:"STKaiti";
}
  .kaiti {
    font-family: "STKaiti";
  }


div.bk{
  border:4px dashed #3FB135;
  padding:0.79em;
  margin-bottom:2em;
  margin-top:1em;
}
  div.bk {
    border: 4px dashed #3FB135;
    padding: 0.79em;
    margin-bottom: 2em;
    margin-top: 1em;
  }

div.bj1{
  padding:0.01em 1em 0.01em 1em;
  margin-top:-2.95em;
  margin-left:-1em;
  margin-right:-1em;
  div.bj1 {
    padding: 0.01em 1em 0.01em 1em;
    margin-top: -2.95em;
    margin-left: -1em;
    margin-right: -1em;

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

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

div.bj3{
  background:#C6DFA5;
  padding:0.2em 0.5em 0.2em 0.5em;
  margin-top:1em;
  margin-left:1em;
  margin-right:1em;
  border-radius:1em;
  margin-bottom:1.5em;
  font-size:1.1em;
  padding-left: 1em;
}
 // 自定义
 .page-box {
  .img-gn1 {
    height: 2.5em;
  }

  div.bj3 {
    background: #C6DFA5;
    padding: 0.2em 0.5em 0.2em 0.5em;
    margin-top: 1em;
    margin-left: 1em;
    margin-right: 1em;
    border-radius: 1em;
    margin-bottom: 1.5em;
    font-size: 1.1em;
    padding-left: 1em;
  }

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

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

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

  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{

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

  input {
    font-family: "STkaiti";

  }
  .folder{

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

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

  .Options {
    display: flex;
    flex-direction: row;
    cursor: pointer;
  }
  .text{
  margin: 0 8%;
  font-family: "STkaiti";

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

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

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

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

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

  //视频底部字体及图片样式
  .videoname{
  .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;

  .problem {
    font-family: "kaiti";
    font-size: 1.6em;
    font-weight: normal;
  }
  .lesson1{

  .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{
  .input-w-60 {
    width: 60%;
  }
  .headerimg{

  .headerimg {
    margin-left: 5%;
  }

  .page-footer {
    position: relative;
    display: flex;
@@ -599,7 +693,7 @@
    bottom: 0;
    /* 垂直居中 */
  }
  

  .page-footer-image {
    /* 图片样式 */
    max-width: 100%;
@@ -609,29 +703,33 @@
    z-index: 1;
    /* 确保页码数字在图片上方 */
  }
  .ends{

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

  /* 当屏幕宽度至少为600px时应用此样式 */
@media screen and (max-width: 430px) {
  .ends{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
  @media screen and (max-width: 430px) {
    .ends {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }
  }
}

  .option {
  position: relative;
  display: flex;
  flex-direction: row;
  //flex-wrap: nowrap;
  width: 170px;
  height: 250px;
  height: min-content;
}
    position: relative;
    display: flex;
    flex-direction: row;
    //flex-wrap: nowrap;
    width: 170px;
    height: 250px;
    height: min-content;
  }

  .page-footer-number-left {
    color: black;
    left: 15%;
@@ -640,7 +738,7 @@
    font-size: 2em;
    /* 你可以根据需要调整字体大小 */
    z-index: 2;
  

    /* 确保页码数字在图片上方 */
    /* 使用::before伪元素创建绿色圆形背景 */
    &::before {
@@ -663,6 +761,7 @@
      /* 确保圆形背景在文本下方 */
    }
  }

  .page-footer-number-right {
    color: black;
    right: 15%;
@@ -671,7 +770,7 @@
    font-size: 2em;
    /* 你可以根据需要调整字体大小 */
    z-index: 2;
  

    /* 确保页码数字在图片上方 */
    /* 使用::before伪元素创建绿色圆形背景 */
    &::before {
@@ -695,60 +794,69 @@
    }
  }
}

/* 媒体查询做基础响应式布局 */
@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;
      }
  .ans-drama {
    .pg-mh {
      min-height: 815px !important;
    }
  }
  @media (min-width: 660px) {
    .ans-drama {
      .page-padding {
        padding: 104px 96px;
      }
      .padding-96 {
        padding: 0 96px 104px 96px;
      }
      .video-box {
        max-width: 370px;
      }

    /* 分页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;
  }
  
  ::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 6px;
  }
  
  ::-webkit-scrollbar-thumb:vertical {
    height: 5px;
    background-color: rgba(125, 125, 125, 0.3);
    -webkit-border-radius: 6px;
  }
  
  ::-webkit-scrollbar-thumb:horizontal {
    width: 5px;
    background-color: rgba(125, 125, 125, 0.3);
    -webkit-border-radius: 6px;
  }
  width: 8px;
  height: 10px;
}

::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0.1);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  background-color: rgba(125, 125, 125, 0.3);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
  width: 5px;
  background-color: rgba(125, 125, 125, 0.3);
  -webkit-border-radius: 6px;
}

 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">
@@ -36,11 +36,11 @@
          <h3 class="lefth3" id="c001">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p class="text">
          <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,8 +383,9 @@
      audioPathFour: "",
      audioPathFive: "",
      isFocused: null, // 用于跟踪textarea的聚焦状态
      segments: [1, 2, 3, 4, 5],
      collectResourceList:[],
      segments: [1, 2],
      paragraph:[3,4,5],
      collectResourceList: [],
      color: "#fff",
      activeIndex: null, // 用于追踪当前活动的按钮索引
      contents: [
@@ -380,9 +394,9 @@
        ' <p class=" mar-l-r-4">蚂蚁队长：（起身）<span class="un1">我决定了</span>！大家<span class="un1">一起搬</span>！这块奶酪以我为首，搬运的路上<span class="un1">不许偷吃</span>！</p><p class=" mar-l-r-4">蚂蚁们：<span class="un1">是</span>！</p><p class=" mar-l-r-4">【蚂蚁们迅速围成一圈，蚂蚁队长站在奶酪最前面】</p><p class=" mar-l-r-4">蚂蚁队长：听我口令！3！2！1！抬！</p>                  <p class=" mar-l-r-4">【奶酪被抬起】</p><p class=" mar-l-r-4">大头蚂蚁：哇！这块奶酪<span class="un1">好香噢</span>！</p><p class=" mar-l-r-4">小眼镜蚂蚁：我想<span class="un1">咬</span>一口！</p><p class=" mar-l-r-4">小蚂蚁：如果能<span class="un1">舔一下</span>就好了！</p><p class=" mar-l-r-4">蚂蚁小妹：我的口水流出来了！</p><p class=" mar-l-r-4">蚂蚁队长：不许瞎想！不许偷吃！<span class="un1">出发</span>！</p><p class=" mar-l-r-4">【音乐起，蚂蚁们抬着奶酪向前走着】</p><p class=" mar-l-r-4">蚂蚁们：奶酪！奶酪！我们的奶酪！奶酪！奶酪！我们一起分享。</p><p class=" mar-l-r-4">【蚂蚁们陶醉中】</p>',
        ' <p class=" mar-l-r-4">嘭—</p><p class=" mar-l-r-4">【蚂蚁们用劲过猛，奶酪的一个角掉了】</p><p class=" mar-l-r-4">蚂蚁小妹：<span class="un1">啊</span>！队长！奶酪的角<span class="un1">掉了</span>！</p> <p class=" mar-l-r-4">【大家看到掉在地上的奶酪】</p><p class=" mar-l-r-4">蚂蚁们：哇哦！</p><p class=" mar-l-r-4">蚂蚁队长：等等！</p><p class=" mar-l-r-4">【舞台变光，演员动作定格】</p><p class=" mar-l-r-4">蚂蚁队长：掉了<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>',
        ' <p class=" mar-l-r-4">【舞台变光，演员立正站好】</p><p class=" mar-l-r-4">蚂蚁队长：休息一会儿！</p><p class=" mar-l-r-4">蚂蚁小妹：<span class="un1">为什么</span>要休息呀？</p><p class=" mar-l-r-4">小眼镜蚂蚁：队长！这块掉在地上的奶酪<span class="un1">怎么办呀</span>？</p><p class=" mar-l-r-4">大头蚂蚁：我们要不把它<span class="un1">分了吧</span>！</p><p class=" mar-l-r-4">蚂蚁队长：听我说！<span class="un1">休息</span>！<span class="un1">立刻休息</span>！大家搬运太辛苦啦！分散开，哪里凉快就到哪里休息！</p><p class=" mar-l-r-4">【大家依旧不动】</p><p class=" mar-l-r-4">蚂蚁队长：全体都有！稍息！立正！向后—转！齐步—走！</p><p class=" mar-l-r-4">蚂蚁队长：立—定！原地休息！</p><p class=" mar-l-r-4">【蚂蚁们跟随口令消失在草丛里】</p>',
        ' <p class=" mar-l-r-4">【蚂蚁队长向草丛里望去，确定没有声响】</p><p class=" mar-l-r-4">蚂蚁队长：（小声）嘿嘿嘿，吃掉后就说被风刮走或者就说被老鹰吃掉就好啦！</p><p class=" mar-l-r-4">【蚂蚁队长低下头，嗅了一下奶酪】</p><p class=" mar-l-r-4">蚂蚁队长：味道<span class="un1">真</span>香！</p><p class=" mar-l-r-4">【蚂蚁队长的手伸向奶酪渣，突然，奶酪人站了起来】</p><p class=" mar-l-r-4">【变光】</p><p class=" mar-l-r-4">奶酪人：不许吃！</p><p class=" mar-l-r-4">蚂蚁队长：（吓了一跳）你你你！你怎么<span class="un1">站</span>起来啦！</p><p class=" mar-l-r-4">奶酪人：我<span class="un1">实在</span>看不下去啦！</p><p class=" mar-l-r-4">蚂蚁队长：（害怕）救命哇！奶酪<span class="un1">活</span>啦！</p><p class=" mar-l-r-4">【蚂蚁队长跑】</p><p class=" mar-l-r-4">奶酪人：<span class="un1">站住</span>！</p><p class=" mar-l-r-4">蚂蚁队长：你要干什么？</p><p class=" mar-l-r-4">奶酪人：<span class="un1">这块</span>，<span class="un1">你不能吃</span>！</p><p class=" mar-l-r-4">蚂蚁队长：为什么？</p><p class=" mar-l-r-4">奶酪人：<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><p class=" mar-l-r-4">蚂蚁队长：（低头）我不吃了，我知道<span class="un1">错了</span>……可是，这掉在地上的奶酪怎么办呢？</p><p class=" mar-l-r-4">奶酪人：（想了想）<span class="un1">有办法</span>！你可以选择大家<span class="un1">一起分</span>，也可以选择给年龄最小的蚂蚁吃！</p><p class=" mar-l-r-4">蚂蚁队长：<span class="un1">好主意</span>！我这就问问大家，谢谢你！</p><p class=" mar-l-r-4">【变光，奶酪慢慢地躺在地上】</p><p class=" mar-l-r-4">蚂蚁队长：（喊）<span class="un1">注意啦</span>！全体都有！稍息！立正！</p><p class=" mar-l-r-4">向后转！齐步走！</p><p class=" mar-l-r-4">【蚂蚁们由四面八方走回来】</p><p class=" mar-l-r-4">蚂蚁队长：大家休息好啦！我有一个<span class="un1">决定</span>！</p><p class=" mar-l-r-4">蚂蚁们：什么决定？</p><p class=" mar-l-r-4">蚂蚁队长：这点儿奶酪渣是刚才弄掉的，丢了可惜，（指向小蚂蚁）你是我们中年龄最小的，<span class="un1">你</span>吃掉它吧！</p><p class=" mar-l-r-4">【蚂蚁们鼓掌】</p><p class=" mar-l-r-4">【音乐起，大家劲儿比刚才更足，抬起奶酪向山洞走去】</p><p class=" mar-l-r-4">【收光】</p>',
        ' <p class=" mar-l-r-4">【蚂蚁队长向草丛里望去，确定没有声响】</p><p class=" mar-l-r-4">蚂蚁队长：（小声）嘿嘿嘿，吃掉后就说被风刮走或者就说被老鹰吃掉就好啦！</p><p class=" mar-l-r-4">【蚂蚁队长低下头，嗅了一下奶酪】</p><p class=" mar-l-r-4">蚂蚁队长：味道<span class="un1">真</span>香！</p><p class=" mar-l-r-4">【蚂蚁队长的手伸向奶酪渣，突然，奶酪人站了起来】</p><p class=" mar-l-r-4">【变光】</p><p class=" mar-l-r-4">奶酪人：不许吃！</p><p class=" mar-l-r-4">蚂蚁队长：（吓了一跳）你你你！你怎么<span class="un1">站</span>起来啦！</p><p class=" mar-l-r-4">奶酪人：我<span class="un1">实在</span>看不下去啦！</p><p class=" mar-l-r-4">蚂蚁队长：（害怕）救命哇！奶酪<span class="un1">活</span>啦！</p><p class=" mar-l-r-4">【蚂蚁队长跑】</p><p class=" mar-l-r-4">奶酪人：<span class="un1">站住</span>！</p><p class=" mar-l-r-4">蚂蚁队长：你要干什么？</p><p class=" mar-l-r-4">奶酪人：<span class="un1">这块</span>，<span class="un1">你不能吃</span>！</p><p class=" mar-l-r-4">蚂蚁队长：为什么？</p><p class=" mar-l-r-4">奶酪人：<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><p class=" mar-l-r-4">蚂蚁队长：（低头）我不吃了，我知道<span class="un1">错了</span>……可是，这掉在地上的奶酪怎么办呢？</p><p class=" mar-l-r-4">奶酪人：（想了想）<span class="un1">有办法</span>！你可以选择大家<span class="un1">一起分</span>，也可以选择给年龄最小的蚂蚁吃！</p><p class=" mar-l-r-4">蚂蚁队长：<span class="un1">好主意</span>！我这就问问大家，谢谢你！</p><p class=" mar-l-r-4">【变光，奶酪慢慢地躺在地上】</p><p class=" mar-l-r-4">蚂蚁队长：（喊）<span class="un1">注意啦</span>！全体都有！稍息！立正！</p><p class=" mar-l-r-4">向后转！齐步走！</p><p class=" mar-l-r-4">【蚂蚁们由四面八方走回来】</p><p class=" mar-l-r-4">蚂蚁队长：大家休息好啦！我有一个<span class="un1">决定</span>！</p><p class=" mar-l-r-4">蚂蚁们：什么决定？</p><p class=" mar-l-r-4">蚂蚁队长：这点儿奶酪渣是刚才弄掉的，丢了可惜，（指向小蚂蚁）你是我们中年龄最小的，<span class="un1">你</span>吃掉它吧！</p><p class=" mar-l-r-4">【蚂蚁们鼓掌】</p><p class=" mar-l-r-4">【音乐起，大家劲儿比刚才更足，抬起奶酪向山洞走去】</p><p class=" mar-l-r-4">【收光】</p>', 
      ],
      activeContent: "", // 当前显示的HTML内容
      activeContent: "", // 当前显示的HTML内容 
      chapterData: {
        isCollectImg: false,
        isCollectVideo: false,
@@ -558,8 +572,8 @@
    },
    handleCollect(type) {
      if (type == "video") {
        this.handleCollectResource("dd44a1e31b4304f50d10b2481a148411","dd44a1e31b4304f50d10b2481a148411",'',"视频","bits",'视频：心有多大，舞台就有多大')
      } 
        this.handleCollectResource("dd44a1e31b4304f50d10b2481a148411", "dd44a1e31b4304f50d10b2481a148411", '', "视频", "bits", '视频：心有多大，舞台就有多大')
      }
      this.handleChapterData();
    },
    showContent(index) {

 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

@@ -36,7 +36,7 @@
        <div class="page-box" page="39">
            <div v-if="showPageList.indexOf(39) > -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>
                <img class="headerimg mar-b-5" src="../../assets/images/page5.png" alt="" />
                <div class="bodystyle">
@@ -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,18 +258,22 @@
    background-color: rgb(188, 220, 164);
    padding: 5% 0%;
}
.mar-t-b-5{

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

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

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

.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>