drama部署

user1

2024-06-13 b7640a1b15146c804f53dbb9941d089d2f80c094

drama部署

 src/books/artAndDrama/assets/main.less

@@ -510,6 +510,86 @@
      outline: none;
    }
  }
  .page-footer {
    position: relative;
    display: flex;
    align-items: center;
    /* 垂直居中 */
  }
  
  .page-footer-image {
    /* 图片样式 */
    max-width: 100%;
    height: auto;
    position: relative;
    /* 确保.page-footer-number可以相对于图片定位 */
    z-index: 1;
    /* 确保页码数字在图片上方 */
  }
  
  .page-footer-number-left {
    color: black;
    left: 15%;
    position: absolute;
    /* 绝对定位页码 */
    font-size: 2em;
    /* 你可以根据需要调整字体大小 */
    z-index: 2;
  
    /* 确保页码数字在图片上方 */
    /* 使用::before伪元素创建绿色圆形背景 */
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      /* 垂直居中 */
      left: 50%;
      /* 水平居中 */
      transform: translate(-50%, -50%);
      /* 移动到中心 */
      width: 1.2em;
      /* 你可以根据需要调整圆形大小 */
      height: 1.2em;
      border-radius: 50%;
      /* 圆形 */
      background-color: rgba(208, 226, 179);
      /* 背景颜色 */
      z-index: -1;
      /* 确保圆形背景在文本下方 */
    }
  }
  .page-footer-number-right {
    color: black;
    right: 15%;
    position: absolute;
    /* 绝对定位页码 */
    font-size: 2em;
    /* 你可以根据需要调整字体大小 */
    z-index: 2;
  
    /* 确保页码数字在图片上方 */
    /* 使用::before伪元素创建绿色圆形背景 */
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      /* 垂直居中 */
      left: 50%;
      /* 水平居中 */
      transform: translate(-50%, -50%);
      /* 移动到中心 */
      width: 1.2em;
      /* 你可以根据需要调整圆形大小 */
      height: 1.2em;
      border-radius: 50%;
      /* 圆形 */
      background-color: rgba(208, 226, 179);
      /* 背景颜色 */
      z-index: -1;
      /* 确保圆形背景在文本下方 */
    }
  }
}
  /* 媒体查询做基础响应式布局 */
@media (max-width: 430px) {
    .ans-drama  {
@@ -546,7 +626,6 @@
      }
      .video-box {
        max-width: 370px;
      }
    }
  }
}

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

@@ -21,17 +21,17 @@
          </div>
        </div>
        <p><br /></p>
        <h1><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-right">1</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="5" style="min-height: auto">
      <div v-if="showPageList.indexOf(5) > -1">
        <h1>
          <img
            src="../../assets/images/header-green.png"
            alt=""
            style="width: 100%; height: auto"
          />
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <img src="../../assets/images/page5.png" alt="" />
@@ -43,8 +43,7 @@
            在语言表述中，为了突出或强调某些意思，我们会使用“逻辑重音”这一技巧。同样一句话，不同的逻辑重音可以表达出不一样的意思。
          </p>
          <p>
            <span class="hs1">◇</span
            >大声朗读下面的句子，连一连不同逻辑重音强调的意思。
            <span class="hs1">◇</span>大声朗读下面的句子，连一连不同逻辑重音强调的意思。
          </p>
          <h1>
            <audio :src="auidoPathTwo" class="audio" controls></audio>
@@ -55,26 +54,16 @@
        </div>
        <p><br /></p>
        <!-- 此次为页脚部分（需要设置页码） -->
    <div style="position: relative;">  
      <h1 style="position: relative; z-index: 1;">  
      <img class="img-0" alt="" src="../../assets/images/ym.jpg" />  
      <div style="position: absolute; z-index: 99; background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; left: 98px; bottom: 38px; text-align: center; line-height: 30px; font-size: 20px;">2</div>     
      </h1>  
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-left">2</div>
    </div>
        <!-- <div style="position: relative; "> 
            <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; left: 98px; top: 38px; text-align: center; font-size: 25px;">2</div>
            <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
        </div> -->
      </div>
    </div>
    <div class="page-box" page="6" style="min-height: auto">
      <div v-if="showPageList.indexOf(6) > -1">
        <h1>
          <img
            src="../../assets/images/page6-header-green.png"
            alt=""
            style="height: auto; width: 100%"
          />
          <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
        </h1>
        <div class="bodystyle">
          <h1 class="lefth3" id="c002">
@@ -96,35 +85,23 @@
          <p>A.团结的</p>
          <p>B.优秀的</p>
          <p>C.松散的</p>
          <video
            :src="videoPathOne"
            webkit-playsinline="true"
            x-webkit-airplay="true"
            playsinline="true"
            x5-video-orientation="h5"
            x5-video-player-fullscreen="true"
            x5-playsinline=""
            controls
            controlslist="nodownload"
            class="w100"
            style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"
          ></video>
          <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
            x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
            controlslist="nodownload" class="w100"
            style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
          <h2>视频: 我们是一家人</h2>
        </div>

        <p class="center">
          <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
        </p>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-right">3</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="7" style="min-height: auto">
      <div v-if="showPageList.indexOf(7) > -1">
        <h1>
          <img
            src="../../assets/images/header-green.png"
            alt=""
            style="width: 100%; height: auto"
          />
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <img src="../../assets/images/page5.png" alt="" />
@@ -133,38 +110,28 @@
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p>
            <span class="hs1">◇</span
            >请将以下课文选段大声朗诵出来，加点的字请重读。
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1><audio :src="auidoPathThree" class="audio" controls></audio></h1>
        
          <div class="bj3">
            <p class="center">
              <span class="hs"
                >春<a id="w1"><sup>1</sup></a>（节选）</span>
              <span class="hs">春<a id="w1"><sup>1</sup></a>（节选）</span>
            </p>
            <p class="center">朱自清</p>
            <p class="block">
              盼望着，<span class="un1">盼望着</span>，东风来了，春天的脚步<span
                class="un1"
                >近</span
              >了。
              盼望着，<span class="un1">盼望着</span>，东风来了，春天的脚步<span class="un1">近</span>了。
            </p>
            <p class="block">
              一切都像<span class="un1">刚睡醒</span>的样子，欣欣然<span
                class="un1"
                >张开</span
              >了眼。山<span class="un1">朗润</span>起来了，水<span class="un1"
                >涨</span
              >起来了，太阳的脸<span class="un1">红</span>起来了。
              一切都像<span class="un1">刚睡醒</span>的样子，欣欣然<span class="un1">张开</span>了眼。山<span
                class="un1">朗润</span>起来了，水<span class="un1">涨</span>起来了，太阳的脸<span class="un1">红</span>起来了。
            </p>
          </div>
          <h3 class="lefth3" id="c004">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <p>
            <span class="hs1">◇</span
            >在《一块奶酪》的故事中，小蚂蚁们都有各自的立场，你能理解他们的想法吗？请你和同伴根据故事内容讨论一下。
            <span class="hs1">◇</span>在《一块奶酪》的故事中，小蚂蚁们都有各自的立场，你能理解他们的想法吗？请你和同伴根据故事内容讨论一下。
          </p>
          <hr />
          <p class="note">
@@ -173,62 +140,40 @@
            七年级上册》，2页，北京，人民教育出版社，2016。
          </p>
        </div>

        <!-- 此次为页脚部分（需要设置页码） -->
        <div> 
            <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; margin-left: 98px; margin-top: 38px; text-align: center; font-size: 25px;">4</div>
            <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
        <div class="page-footer">
          <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
          <div class="page-footer-number-left">4</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="8" style="min-height: auto">
      <div v-if="showPageList.indexOf(8) > -1">
        <h1>
          <img
            src="../../assets/images/header-green.png"
            alt=""
            style="width: 100%; height: auto"
          />
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <img src="../../assets/images/page5.png" alt="" />
          <h2 id="b003">第三课　内心的声音</h2>
          <h1 class="lefth3 openImgBox" id="c005">
            <img
              class="img-gn1"
              alt=""
              src="../../assets/images/1-3.gif"
              style="height: auto; width: 50%"
            />
            <img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" />
          </h1>
          <p>
            <span class="hs1">◇</span
            >请将以下课文选段大声朗诵出来，加点的字请重读。
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1><audio :src="auidoPathTwo" class="audio" controls></audio></h1>
          <div class="bj3">
            <p class="center">
              <span class="hs"
                >春<a id="w1"></a><sup>1</sup>（节选）</span
              >
              <span class="hs">春<a id="w1"></a><sup>1</sup>（节选）</span>
            </p>
            <p class="center">朱自清</p>
            <p class="block">
              小草偷偷地从土里<span class="un1">钻出来</span>，<span class="un1"
                >嫩嫩的</span
              >，<span class="un1">绿绿的</span>。园子里，田野里，<span
                class="un1"
                >瞧</span
              >去，一大片一大片满是的。<span class="un1">坐</span>着，<span
                class="un1"
                >躺</span
              >着，<span class="un1">打</span>两个<span class="un1">滚</span
              >儿，<span class="un1">踢</span>几脚<span class="un1">球</span
              >，<span class="un1">赛</span>几趟<span class="un1">跑</span
              >，<span class="un1">捉</span>几回<span class="un1">迷藏</span
              >。风<span class="un1">轻悄悄</span>的，草<span class="un1"
                >软绵绵</span
              >的。
              小草偷偷地从土里<span class="un1">钻出来</span>，<span class="un1">嫩嫩的</span>，<span
                class="un1">绿绿的</span>。园子里，田野里，<span class="un1">瞧</span>去，一大片一大片满是的。<span class="un1">坐</span>着，<span
                class="un1">躺</span>着，<span class="un1">打</span>两个<span class="un1">滚</span>儿，<span
                class="un1">踢</span>几脚<span class="un1">球</span>，<span class="un1">赛</span>几趟<span
                class="un1">跑</span>，<span class="un1">捉</span>几回<span class="un1">迷藏</span>。风<span
                class="un1">轻悄悄</span>的，草<span class="un1">软绵绵</span>的。
            </p>
          </div>
           <hr />
@@ -240,19 +185,15 @@
        </div>
      </div>
          <!-- 此次为页脚部分（需要设置页码） -->
          <div> 
            <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; margin-left: 98px; margin-top: 38px; text-align: center; font-size: 25px;">6</div>
            <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
      <div class="page-footer">
        <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
        <div class="page-footer-number-right">5</div>
        </div>
    </div>
    <div class="page-box" page="9" style="min-height: auto">
      <div v-if="showPageList.indexOf(9) > -1">
        <h1>
          <img
            src="../../assets/images/header-green.png"
            alt=""
            style="width: 100%; height: auto"
          />
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <img src="../../assets/images/page5.png" alt="" />
@@ -260,44 +201,29 @@
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <h1 class="center openImgBox">
            <img
              class="img-e"
              alt=""
              src="../../assets/images/1-4.gif"
              style="height: auto; width: 50%"
            />
            <img class="img-e" alt="" src="../../assets/images/1-4.gif" style="height: auto; width: 50%" />
          </h1>
          <p>
            <span class="hs1">◇</span
            >生活中，我们总会遇到各种各样的诱惑。面对诱惑时，我们的内心常常会有两个不同的声音出现：一个声音要求我们严于律己，另一个声音要求我们随心所欲。请你分析一下，当蚂蚁队长面对掉落的奶酪渣的诱惑时，他内心的两个声音会说些什么呢？
            <span
              class="hs1">◇</span>生活中，我们总会遇到各种各样的诱惑。面对诱惑时，我们的内心常常会有两个不同的声音出现：一个声音要求我们严于律己，另一个声音要求我们随心所欲。请你分析一下，当蚂蚁队长面对掉落的奶酪渣的诱惑时，他内心的两个声音会说些什么呢？
          </p>
          <p>正义队长：“
            <input
                v-model="questionData.warnUp.one.value"
                class="input-bottom-border fz-18"
                @blur="handleQuestion('one')"
                @change="setBookQuestion" />”</p>
          <p>黑暗队长：“        <input
                v-model="questionData.warnUp.one.value"
                class="input-bottom-border fz-18"
                @blur="handleQuestion('two')"
            <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" />”
          </p>
          <p>黑暗队长：“ <input v-model="questionData.warnUp.two" class="input-bottom-border fz-18"
                @change="setBookQuestion" />”</p>
        </div>
      </div>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div> 
            <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; margin-left: 98px; margin-top: 38px; text-align: center; font-size: 25px;">8</div>
            <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
      <div class="page-footer">
        <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
        <div class="page-footer-number-left">6</div>
        </div>
    </div>
    <div class="page-box" page="10" style="min-height: auto">
      <div v-if="showPageList.indexOf(10) > -1">
        <h1>
          <img
            src="../../assets/images/page6-header-green.png"
            alt=""
            style="width: 100%; height: auto"
          />
          <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <h2 id="b004">第四课　身临其境</h2>
@@ -305,8 +231,7 @@
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p>
            <span class="hs1">◇</span
            >请将以下课文选段大声朗诵出来，加点的字请重读。
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1>
            <audio :src="auidoPathTwo" class="audio" controls></audio>  
@@ -314,51 +239,28 @@

          <div class="bj3">
            <p class="center">
              <span class="hs"
                >春<a id="w1"><sup>1</sup></a
                >（节选）</span
              >
              <span class="hs">春<a id="w1"><sup>1</sup></a>（节选）</span>
            </p>
            <p class="center">朱自清</p>
            <p class="block">
              <span class="un1">桃</span>树、<span class="un1">杏</span
              >树、<span class="un1">梨</span
              >树，你不让我，我不让你，都开满了花赶趟儿。红的像<span class="un1"
                >火</span
              >，粉的像<span class="un1">霞</span>，白的像<span class="un1"
                >雪</span
              >。花里带着甜味儿……
              <span class="un1">桃</span>树、<span class="un1">杏</span>树、<span
                class="un1">梨</span>树，你不让我，我不让你，都开满了花赶趟儿。红的像<span class="un1">火</span>，粉的像<span
                class="un1">霞</span>，白的像<span class="un1">雪</span>。花里带着甜味儿……
            </p>
          </div>
          <h3 class="lefth3" id="c008">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <p>
            <span class="hs1">◇</span
            >假如你是搬运奶酪的蚂蚁，你要怎么搬运不同形状、大小的奶酪呢？请先为自己设计一个剧本吧：
            <span class="hs1">◇</span>假如你是搬运奶酪的蚂蚁，你要怎么搬运不同形状、大小的奶酪呢？请先为自己设计一个剧本吧：
          </p>
          <p>
            我是蚂蚁 <input
                v-model="questionData.warnUp.one.value"
                class="input-bottom-border fz-18"
                style=" width: 10%;"
                @blur="handleQuestion('three')"
            我是蚂蚁 <input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" style=" width: 10%;"
                @change="setBookQuestion" />（名字），今天是 
                <input
                v-model="questionData.warnUp.one.value"
                class="input-bottom-border fz-18"
                style=" width: 10%;"
                @blur="handleQuestion('four')"
                @change="setBookQuestion" />（天气），我的奶酪特别 <input
                v-model="questionData.warnUp.one.value"
                class="input-bottom-border fz-18"
                style=" width: 10%;"
                @blur="handleQuestion('five')"
                @change="setBookQuestion" />（轻/重），我感觉好 <input
                v-model="questionData.warnUp.one.value"
                class="input-bottom-border fz-18"
                style=" width: 10%;"
                @blur="handleQuestion('six')"
            <input v-model="questionData.warnUp.four" class="input-bottom-border fz-18" style=" width: 10%;"
              @change="setBookQuestion" />（天气），我的奶酪特别 <input v-model="questionData.warnUp.five"
              class="input-bottom-border fz-18" style=" width: 10%;" @change="setBookQuestion" />（轻/重），我感觉好 <input
              v-model="questionData.warnUp.six" class="input-bottom-border fz-18" style=" width: 10%;"
                @change="setBookQuestion" />（身体感觉）啊！
          </p>
          <hr />
@@ -369,18 +271,16 @@
          </p>
        </div>
      </div>
      <p class="center">
        <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
      </p>
      <!-- 此次为页脚部分（需要设置页码） -->
      <div class="page-footer">
        <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
        <div class="page-footer-number-right">7</div>
      </div>
    </div>
    <div class="page-box" page="11" style="min-height: auto">
      <div v-if="showPageList.indexOf(11) > -1">
        <h1>
          <img
            src="../../assets/images/header-green.png"
            alt=""
            style="width: 100%; height: auto"
          />
          <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <img src="../../assets/images/page5.png" alt="" />
@@ -388,23 +288,20 @@
            <img class="img-e" alt="" src="../../assets/images/1-5.gif" />
          </p>
          <p>
            <span class="hs1">◇</span
            >蚂蚁队长把奶酪渣留给了年龄最小的蚂蚁，赢得了大家的认可。在生活中，你曾经像“蚂蚁队长”一样爱护弱小吗？或者像“小蚂蚁”一样得到过哥哥姐姐们的关爱吗？
            <span class="hs1">◇</span>蚂蚁队长把奶酪渣留给了年龄最小的蚂蚁，赢得了大家的认可。在生活中，你曾经像“蚂蚁队长”一样爱护弱小吗？或者像“小蚂蚁”一样得到过哥哥姐姐们的关爱吗？
          </p>
        </div>
      </div>
      <p class="center">
        <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
      </p>
      <!-- 此次为页脚部分（需要设置页码） -->
      <div class="page-footer">
        <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
        <div class="page-footer-number-left">8</div>
      </div>
    </div>
    <div class="page-box" page="12" style="min-height: auto">
      <div v-if="showPageList.indexOf(12) > -1">
        <h1>
          <img
            src="../../assets/images/page6-header-green.png"
            alt=""
            style="width: 100%; height: auto"
          />
          <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <h2 id="b005">单元活动任务</h2>
@@ -429,18 +326,16 @@
          </p>
        </div>
      </div>
      <p class="center">
        <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
      </p>
      <!-- 此次为页脚部分（需要设置页码） -->
      <div class="page-footer">
        <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
        <div class="page-footer-number-right">9</div>
      </div>
    </div>
    <div class="page-box" page="13" style="min-height: auto">
      <div v-if="showPageList.indexOf(13) > -1">
        <h1>
          <img
            src="../../assets/images/page6-header-green.png"
            alt=""
            style="width: 100%; height: auto"
          />
          <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <h3 class="lefth3" id="c010">
@@ -451,26 +346,19 @@
            孔融四岁就懂礼貌、知谦让，是我们学习的好榜样，让我们运用本单元的戏剧知识，把他的故事表演出来吧！
          </p>
          <p class="center">
            <video
            :src="videoPathOne"
            webkit-playsinline="true"
            x-webkit-airplay="true"
            playsinline="true"
            x5-video-orientation="h5"
            x5-video-player-fullscreen="true"
            x5-playsinline=""
            controls
            controlslist="nodownload"
            class="w100"
             style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"
          ></video>
            <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
              x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
              controlslist="nodownload" class="w100"
              style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
          <h2>视频: 我们是一家人</h2>
          </p>
        </div>
      </div>
      <p class="center">
        <img class="img-0" alt="" src="../../assets/images/ym.jpg" />
      </p>
      <!-- 此次为页脚部分（需要设置页码） -->
      <div class="page-footer">
        <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
        <div class="page-footer-number-left">10</div>
      </div>
    </div>
  </div>
</template>
@@ -489,6 +377,10 @@
  //在这里对调用的方法进行挂载
  mounted() {
    this.getVidoePath();
    const bookQuestion = localStorage.getItem("artAndDrama-book-question-one");
    if (bookQuestion) {
      this.questionData = JSON.parse(bookQuestion);
    }
  },
  data() {
    return {
@@ -613,36 +505,12 @@
      },
      questionData: {
        warnUp: {
          one: {
            value: "",
            isRight: null,
            answer: "Chinese knot",
          },
          two: {
            value: "",
            isRight: null,
            answer: "Chinese medicine",
          },
          three: {
            value: "",
            isRight: null,
            answer: "Chinese calligraphy",
          },
          four: {
            value: "",
            isRight: null,
            answer: "Taichi",
          },
          five: {
            value: "",
            isRight: null,
            answer: "sweet dumpling",
          },
          six: {
            value: "",
            isRight: null,
            answer: "Chinese chess",
          },
          one: "",
          two: "",
          three: "",
          four: "",
          five: "",
          six: "",
        },
        reading: {
          one: "",
@@ -678,20 +546,20 @@
      this.videoPathFour = await getResourcePath(
        "09de7704eeaaf3a210b8c6af0a94d545"
      );
      this.auidoPathOne = await getResourcePath(
        "2c5f6c69b0f9f7a3c03e473cb8c977f5"
      );
      this.auidoPathTwo = await getResourcePath(
        "e93c0fdde08be5a4386c8c863892a287"
      );
      this.auidoPathThree = await getResourcePath(
        "e93c0fdde08be5a4386c8c863892a287"
      );
      // this.auidoPathOne = await getResourcePath(
      //   "2c5f6c69b0f9f7a3c03e473cb8c977f5"
      // );
      // this.auidoPathTwo = await getResourcePath(
      //   "e93c0fdde08be5a4386c8c863892a287"
      // );
      // this.auidoPathThree = await getResourcePath(
      //   "e93c0fdde08be5a4386c8c863892a287"
      // );
    },
    setBookQuestion() {
      console.log("保存");
      localStorage.setItem(
        "english-book-question-one",
        "artAndDrama-book-question-one",
        JSON.stringify(this.questionData)
      );
    },
@@ -703,21 +571,24 @@
.w70 {
  width: 78%;
}

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

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

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

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

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

@@ -1,9 +1,8 @@
<template>
  <div class="chapter" num="3">
    <div class="page-box" page="14" style="min-height: auto">
    <!-- <div class="page-box" page="14" style="min-height: auto">
      <div v-if="showPageList.indexOf(14) > -1">
        <h1 id="a004">
          <!-- 这里的动图有问题，没有背景图片 -->
          <img class="img-0" alt="" src="../../assets/images/dy2.jpg" />
          <audio :src="auidoPathOne" controls></audio>
        </h1>
@@ -65,7 +64,7 @@
        <p><br /></p>
        <h1><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1>
      </div>
    </div>
    </div> -->
    <!--<div class="page-box" page="16" style="min-height: auto">
        <div v-if="showPageList.indexOf(16) > -1">
          <h1>

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

@@ -25,8 +25,8 @@
                  <p class="wh-nr" style="margin: 0%;">编写委员：</p>
                </li>
                <li class="fl fl-cl">
                  <span class="kaiti">王谷川　谢霜南　李晨成　周力君　</span>
                  <span class="kaiti">韩燕楠菲</span>
                  <span class="kaiti">王谷川　谢霜南　李晨成　周力君　韩燕楠菲</span>
                  <!-- <span class="kaiti">韩燕楠菲</span> -->
                </li>
              </ul>
              <p>美术绘画：<span class="kaiti">何　冰</span></p>
@@ -37,7 +37,7 @@
                <li class="fl fl-cl">
                  <span class="kaiti">本书部分文字作品著作权由中国文字著作权协会授权，</span>
                  <span class="kaiti">电话：010-65978917，传真：010-65978926，</span>
                  <span class="kaiti">E-mail：wenzhuxie@126.com。</span>
                  <span class="kaiti" style="text-align: left;">E-mail：wenzhuxie@126.com。</span>
                </li>
              </ul>
              <p></p>