嵌入书分页加载

闫增涛

2024-05-29 b1afe1bb63a9eae10b4e069c60f4db80b6816078

嵌入书分页加载

 src/App.vue

@@ -58,7 +58,7 @@
    } else {
      this.activeBook = await this.config.getBookConfig(
        // childHealth
        this.config.resourceCtx + "childHealth"
        this.config.resourceCtx + "embedded"
      );
      // 测试试读30页
      // this.activeBook.tryPageCount = 10;

 src/books/childHealth/view/content/components/chapter001.vue

@@ -67,7 +67,7 @@
    </div>
    <!-- 2 -->
    <div class="page-box" page="10"  :show="showPageList.indexOf(10) > -1">
      <div v-if="showPageList.indexOf(10) > -1">
      <div v-show="showPageList.indexOf(10) > -1">
        <div class="header-box">
          <div class="header-border-box"></div>
          <div class="header-num-box">
@@ -434,7 +434,7 @@
    </div>
    <!-- 3 -->
    <div class="page-box" page="11" :show="showPageList.indexOf(11) > -1">
      <div v-if="showPageList.indexOf(11) > -1">
      <div v-show="showPageList.indexOf(11) > -1">
        <div class="page-header-box">
          <span class="page-header-text"
            >专题一&nbsp;学前儿童生理发展特点与保健</span

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

@@ -1,7 +1,8 @@
<template>
  <div class="chapter" num="1">
  <div class="chapter" num="2">
    <!-- 1 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-87" page="11">
      <div v-if="showPageList.indexOf(11) > -1">
      <div class="mt-100 w100">
        <!-- <h1>项目一　触摸屏组态介绍</h1> -->
        <img src="../../assets/images/project-one.png" alt="" class="w100" />
@@ -55,8 +56,10 @@
        <li class="footer-box"></li>
      </ul>
    </div>
    </div>
    <!-- 2 -->
    <div class="page-box fl fl-cl ju-bt" page="12">
      <div v-if="showPageList.indexOf(12) > -1">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" class="w100" />
@@ -206,8 +209,10 @@
        <li class="footer-box"></li>
      </ul>
    </div>
    </div>
    <!-- 3 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-86" page="13">
      <div v-if="showPageList.indexOf(13) > -1">
      <div>
        <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20">
          <img src="../../assets/images/header-one.png" alt="" />
@@ -275,8 +280,10 @@
        <li class="footer-box"></li>
      </ul>
    </div>
    </div>
    <!-- 4 -->
    <div class="page-box fl fl-cl ju-bt" page="14">
      <div v-if="showPageList.indexOf(14) > -1">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
@@ -352,8 +359,10 @@
        <li class="footer-box"></li>
      </ul>
    </div>
    </div>
    <!-- 5 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96" page="15">
      <div v-if="showPageList.indexOf(15) > -1">
      <div class="w100">
        <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20">
          <img src="../../assets/images/header-one.png" alt="" />
@@ -371,7 +380,9 @@
            <p class="imgdescript">图1-6　正视图</p>
          </div>
          <div class="">
            <el-image :src="imgSeven" :preview-src-list="[imgSeven]" />
              <div class="openImgBox">
                <img src="../../assets/images/img00017002.jpg" alt="" class="w100">
              </div>
            <p class="imgdescript">图1-7　背视图</p>
          </div>
        </div>
@@ -385,7 +396,9 @@
            <p class="content">③使用一字头旋具将TPC电源插头螺钉锁紧。</p>
          </div>
          <div class="right">
            <el-image :src="imgEnight" :preview-src-list="[imgEnight]" />
              <div class="openImgBox">
                <img src="../../assets/images/img00017003.jpg" alt="" class="w100">
              </div>
            <p class="imgdescript">图1-8　电源插头示意图及引脚定义</p>
          </div>
        </div>
@@ -394,11 +407,15 @@
          （4）TPC7062K外部接口。接口说明如图1-9所示，串口引脚定义如图1-10所示。
        </p>
        <div>
          <el-image :src="imgNine" :preview-src-list="[imgNine]" class="w100" />
            <div class="openImgBox">
                <img src="../../assets/images/img00017004.jpg" alt="" class="w100">
              </div>
          <p class="imgdescript">图1-9　接口说明</p>
        </div>
        <div>
          <el-image :src="imgTen" :preview-src-list="[imgTen]" />
            <div class="openImgBox">
                <img src="../../assets/images/img00017005.jpg" alt="" class="w100">
              </div>
          <p class="imgdescript">图1-10　串口引脚定义</p>
        </div>
        <p class="content">
@@ -410,15 +427,19 @@
        <li class="footer-box"></li>
      </ul>
    </div>
    </div>
    <!-- 6 -->
    <div class="page-box fl fl-cl ju-bt" page="16">
      <div v-if="showPageList.indexOf(16) > -1">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
        </div>
        <div class="padding-96">
          <div>
            <el-image :src="imgEleven" :preview-src-list="[imgEleven]" />
              <div class="openImgBox">
                <img src="../../assets/images/img00018001.jpg" alt="" class="w100">
              </div>
            <p class="imgdescript">图1-11　TPC启动过程</p>
          </div>
          <p class="quotation fl al-cn t0 primary-color">
@@ -433,13 +454,17 @@
            TPC7062K与三款主流PLC通信接线如图1-12～图1-14所示。
          </p>
          <div style="width: 90%" class="m0-auto">
            <el-image :src="imgTwelve" :preview-src-list="[imgTwelve]" />
              <div class="openImgBox">
                <img src="../../assets/images/img00018002.jpg" alt="" class="w100">
              </div>
            <p class="imgdescript">
              图1-12　TPC7062K与西门子S7-200系列PLC通信接线
            </p>
          </div>
          <div class="m0-auto" style="width: 90%">
            <el-image :src="imgThirteen" :preview-src-list="[imgThirteen]" />
              <div class="openImgBox">
                <img src="../../assets/images/img00018003.jpg" alt="" class="w100">
              </div>
            <p class="imgdescript">图1-13　TPC7062K与欧姆龙PLC通信接线</p>
          </div>
        </div>
@@ -449,14 +474,18 @@
        <li class="footer-box"></li>
      </ul>
    </div>
    </div>
    <!-- 7 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96" page="17">
      <div v-if="showPageList.indexOf(17) > -1">
      <div class="w100">
        <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20">
          <img src="../../assets/images/header-one.png" alt="" />
        </div>
        <div>
          <el-image :src="imgFourteen" :preview-src-list="[imgFourteen]" />
            <div class="openImgBox">
                <img src="../../assets/images/img00019001.jpg" alt="" class="w100">
              </div>
          <p class="imgdescript">图1-14　TPC7062K与三菱FX系列PLC通信接线</p>
        </div>
        <p class="content">评分表见表1-1。</p>
@@ -663,8 +692,10 @@
        <li class="footer-box"></li>
      </ul>
    </div>
    </div>
    <!-- 8 -->
    <div class="page-box fl fl-cl ju-bt" page="18">
      <div v-if="showPageList.indexOf(18) > -1">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
@@ -716,8 +747,10 @@
        <li class="footer-box"></li>
      </ul>
    </div>
    </div>
    <!-- 9 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96 pr" page="19">
      <div v-if="showPageList.indexOf(19) > -1">
      <div class="w100">
        <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20">
          <img src="../../assets/images/header-one.png" alt="" />
@@ -1013,7 +1046,9 @@
          （2）选择“文件”菜单中的“工程另存为”命令，弹出“文件保存”对话框，在文件名一栏内输入“常用构件使用”，单击“保存”按钮，工程创建完毕。
        </p>
        <div class="qrbodyPic">
          <img src="../../assets/images/img00021003.jpg" active="true" />
            <div class="openImgBox">
                <img src="../../assets/images/img00021003.jpg" alt="" class="w100">
              </div>
          <p class="imgdescript">图1-21　选择TPC类型</p>
        </div>
        <p class="quotation fl al-cn t0 primary-color">
@@ -1036,8 +1071,10 @@
        <li class="footer-box"></li>
      </ul>
    </div>
    </div>
    <!-- 10 -->
    <div class="page-box fl fl-cl ju-bt" page="20">
      <div v-if="showPageList.indexOf(20) > -1">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
@@ -1045,11 +1082,15 @@
        <div class="padding-96">
          <div class="fl ju-bt w100">
            <div>
              <el-image :src="imgFifteen" :preview-src-list="[imgFifteen]" />
                <div class="openImgBox">
                <img src="../../assets/images/img00022001.jpg" alt="" class="w100">
              </div>
              <p class="imgdescript">图1-22　建立新窗口</p>
            </div>
            <div class="">
              <el-image :src="imgSixteen" :preview-src-list="[imgSixteen]" />
                <div class="openImgBox">
                  <img src="../../assets/images/img00022002.jpg" alt="" class="w100">
                </div>
              <p class="imgdescript">图1-23　窗口属性设置</p>
            </div>
          </div>
@@ -1061,14 +1102,15 @@
          </p>
          <div class="fl ju-bt">
            <div>
              <el-image
                :src="imgSeventeen"
                :preview-src-list="[imgSeventeen]"
              />
                <div class="openImgBox">
                  <img src="../../assets/images/img00022003.jpg" alt="" class="w100">
                </div>
              <p class="imgdescript">图1-24　按钮制作</p>
            </div>
            <div>
              <el-image :src="imgEighteen" :preview-src-list="[imgSeventeen]" />
                <div class="openImgBox">
                  <img src="../../assets/images/img00022004.jpg" alt="" class="w100">
                </div>
              <p class="imgdescript">图1-25　标准按钮构件属性设置</p>
            </div>
          </div>
@@ -1091,38 +1133,46 @@
        <li class="footer-box"></li>
      </ul>
    </div>
    </div>
    <!-- 11 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96 pr" page="21">
      <div v-if="showPageList.indexOf(21) > -1">
      <div class="w100">
        <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20">
          <img src="../../assets/images/header-one.png" alt="" />
        </div>
        <div class="fl ju-bt">
          <div>
            <el-image :src="imgNineTeen" :preview-src-list="[imgNineTeen]" />
              <div class="openImgBox">
                  <img src="../../assets/images/img00023001.jpg" alt="" class="w100">
                </div>
            <p class="imgdescript">图1-26　按钮文字修改</p>
          </div>
          <div>
            <el-image :src="imgTwenty" :preview-src-list="[imgTwenty]" />
              <div class="openImgBox">
                  <img src="../../assets/images/img00023002.jpg" alt="" class="w100">
                </div>
            <p class="imgdescript">图1-27　按钮排列</p>
          </div>
        </div>

        <div class="qrbodyPic">
          <el-image
            :src="imgtOne"
            :preview-src-list="[imgtOne]"
            class="source-img"
          />
            <div class="openImgBox">
                  <img src="../../assets/images/img00023003.jpg" alt="" class="w100">
                </div>
          <p class="imgdescript">图1-28　添加指示灯</p>
        </div>
        <div class="fl">
          <div>
            <el-image :src="imgtTwo" :preview-src-list="[imgtTwo]" />
              <div class="openImgBox">
                  <img src="../../assets/images/img00023004.jpg" alt="" class="w100">
                </div>
            <p class="imgdescript">图1-29　制作标签</p>
          </div>
          <div style="width: 66%">
            <el-image :src="imgtThree" :preview-src-list="[imgtThree]" />
              <div class="openImgBox">
                  <img src="../../assets/images/img00023005.jpg" alt="" class="w100">
                </div>
            <p class="imgdescript">图1-30　标签动画组态属性设置</p>
          </div>
        </div>
@@ -1139,8 +1189,10 @@
        <li class="footer-box"></li>
      </ul>
    </div>
    </div>
    <!-- 12 -->
    <div class="page-box fl fl-cl ju-bt" page="22">
      <div v-if="showPageList.indexOf(22) > -1">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
@@ -1148,11 +1200,15 @@
        <div class="padding-96">
          <div class="fl">
            <div>
              <el-image :src="imgtFour" :preview-src-list="[imgtFour]" />
                <div class="openImgBox">
                  <img src="../../assets/images/img00024001.jpg" alt="" class="w100">
                </div>
              <p class="imgdescript">图1-31　制作输入框</p>
            </div>
            <div>
              <el-image :src="imgtFive" :preview-src-list="[imgtFive]" />
                <div class="openImgBox">
                  <img src="../../assets/images/img00024002.jpg" alt="" class="w100">
                </div>
              <p class="imgdescript">图1-32　输入框排列</p>
            </div>
          </div>
@@ -1162,11 +1218,15 @@
          </p>
          <div class="fl">
            <div>
              <el-image :src="imgtSix" :preview-src-list="[imgtSix]" />
                <div class="openImgBox">
                  <img src="../../assets/images/img00024003.jpg" alt="" class="w100">
                </div>
              <p class="imgdescript">图1-33　标准按钮构件属性设置”对话框</p>
            </div>
            <div>
              <el-image :src="imgtSeven" :preview-src-list="[imgtSeven]" />
                <div class="openImgBox">
                  <img src="../../assets/images/img00024004.jpg" alt="" class="w100">
                </div>
              <p class="imgdescript">图1-34　控制按钮设置</p>
            </div>
          </div>
@@ -1191,7 +1251,9 @@
            </div>
            <div style="width: 40%">
              <div class="qrbodyPic">
                <el-image :src="imgtEnight" :preview-src-list="[imgtEnight]" />
                  <div class="openImgBox">
                    <img src="../../assets/images/img00024005.jpg" alt="" class="w100">
                  </div>
                <p class="imgdescript">图1-35　组态错误对话框</p>
              </div>
            </div>
@@ -1211,19 +1273,25 @@
        <li class="footer-box"></li>
      </ul>
    </div>
    </div>
    <!-- 13 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96 pr" page="23">
      <div v-if="showPageList.indexOf(23) > -1">
      <div class="w100">
        <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20">
          <img src="../../assets/images/header-one.png" alt="" />
        </div>
        <div class="fl">
          <div>
            <el-image :src="imgtNine" :preview-src-list="[imgtNine]" />
              <div class="openImgBox">
                    <img src="../../assets/images/img00025001.jpg" alt="" class="w100">
                  </div>
            <p class="imgdescript">图1-36　数据对象属性设置</p>
          </div>
          <div>
            <el-image :src="imgtTen" :preview-src-list="[imgtTen]" />
              <div class="openImgBox">
                    <img src="../../assets/images/img00025002.jpg" alt="" class="w100">
                  </div>
            <p class="imgdescript">图1-37　按下功能设置</p>
          </div>
        </div>
@@ -1232,11 +1300,15 @@
        </p>
        <div class="fl">
          <div>
            <el-image :src="imgrOne" :preview-src-list="[imgrOne]" />
              <div class="openImgBox">
                    <img src="../../assets/images/img00025003.jpg" alt="" class="w100">
                  </div>
            <p class="imgdescript">图1-38　选择数据对象指示灯</p>
          </div>
          <div>
            <el-image :src="imgrTwo" :preview-src-list="[imgrTwo]" />
              <div class="openImgBox">
                    <img src="../../assets/images/img00025004.jpg" alt="" class="w100">
                  </div>
            <p class="imgdescript">图1-39　指示灯1属性操作</p>
          </div>
        </div>
@@ -1260,7 +1332,9 @@
            />按钮，进行下载配置。单击“联机运行”按钮，如图1-41所示，选择“USB通信”连接方式，然后单击“通信测试”按钮，通信测试正常后，单击“工程下载”按钮，如图1-42所示。
          </p>
          <div style="width: 30%">
            <el-image :src="imgrThree" :preview-src-list="[imgrThree]" />
              <div class="openImgBox">
                    <img src="../../assets/images/img00025006.jpg" alt="" class="w100">
                  </div>
            <p class="imgdescript">图1-40　标准USB2.0打印机线</p>
          </div>
        </div>
@@ -1282,8 +1356,10 @@
        <li class="footer-box"></li>
      </ul>
    </div>
    </div>
    <!-- 14 -->
    <div class="page-box fl fl-cl ju-bt" page="24">
      <div v-if="showPageList.indexOf(24) > -1">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
@@ -1340,8 +1416,10 @@
        <li class="footer-box"></li>
      </ul>
    </div>
    </div>
    <!-- 15 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96 pr" page="25">
      <div v-if="showPageList.indexOf(25) > -1">
      <div class="w100">
        <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20">
          <img src="../../assets/images/header-one.png" alt="" />
@@ -1613,10 +1691,16 @@
      </ul>
    </div>
  </div>
  </div>
</template>
<script>
export default {
  name: "chapterOne",
  props: {
    showPageList: {
      type: Array,
    },
  },
  data() {
    return {
      imgOne: require("../../assets/images/img00014001.jpg"),

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

@@ -1,10 +1,16 @@
<template>
  <div class="chapter" num="0">
  <div class="chapter" num="1">
    <!-- 封面 -->
    <div class="page-box" page="1">
      <div v-if="showPageList.indexOf(1) > -1">
      <h1 class="frontCover" title="">
        <img alt="封面" src="../../assets/images/device_pad_Frontcover.jpg" class="cover-box w100" />
          <img
            alt="封面"
            src="../../assets/images/device_pad_Frontcover.jpg"
            class="cover-box w100"
          />
      </h1>
      </div>
    </div>
    <!-- 作者简介 -->
    <div
@@ -12,6 +18,7 @@
      style="width: 408px; margin: 0 auto"
      page="2"
    >
      <div v-if="showPageList.indexOf(2) > -1">
      <document>
        <h1 class="author-box">作者简介</h1>
        <div class="bodyPic">
@@ -28,14 +35,22 @@
        </p>
      </document>
    </div>
    </div>
    <!-- 封面 -->
    <div class="page-box" page="3">
      <div v-if="showPageList.indexOf(3) > -1">
      <h1 class="frontCover" title="封面">
        <img alt="封面" src="../../assets/images/device_pad_Frontcover.jpg" class="cover-box w100">
          <img
            alt="封面"
            src="../../assets/images/device_pad_Frontcover.jpg"
            class="cover-box w100"
          />
      </h1>
      </div>
    </div>
    <!-- 内容简介 -->
    <div class="page-box page-padding neirong" page="4">
      <div v-if="showPageList.indexOf(4) > -1">
      <document>
        <h1>内容简介</h1>
        <p class="quotation cl-66">
@@ -59,8 +74,8 @@
      <p class="contentCR">ISBN：9787113254025</p>
      <p class="contentCR">本书由中国铁道出版社进行制作与发行。</p>
      <p class="contentCR">版权所有·侵权必究</p> -->
      <div style="width: 65%;" class="fw-box">
        <img src="../../assets/images/banquan.png">
        <div style="width: 65%" class="fw-box">
          <img src="../../assets/images/banquan.png" />
        <!-- <p class="content">图书在版编目(CIP)数据</p>
        <p class="content">嵌入式组态控制技术/张文明，华祖银主编.-3 版.</p>
        <p class="content">-北京:中国铁道出版社有限公司，2019.7</p>
@@ -92,13 +107,27 @@
      </div>

      <hr />
      <p class="t0">出版发行：中国铁道出版社有限公司(100054，北京市西城区右安门西街8号)</p>
      <p class="t0">网&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：http:// www.tdpress.com/5 leds/</p>
      <p class="t0">印&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;刷：北京柏力行彩印有限公司</p>
      <p class="t0">版&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;次：2011年8月第1版 2019年7月第3版 2019年7月第1次印刷</p>
      <p class="t0">开&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本：787mmx1092mm1/16印张：18字数：433千</p>
        <p class="t0">
          出版发行：中国铁道出版社有限公司(100054，北京市西城区右安门西街8号)
        </p>
        <p class="t0">
          网&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址：http:// www.tdpress.com/5
          leds/
        </p>
        <p class="t0">
          印&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;刷：北京柏力行彩印有限公司
        </p>
        <p class="t0">
          版&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;次：2011年8月第1版
          2019年7月第3版 2019年7月第1次印刷
        </p>
        <p class="t0">
          开&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;本：787mmx1092mm1/16印张：18字数：433千
        </p>
      <p class="t0">印&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数：1~2000册</p>
      <p class="t0">书&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：SBN978-7-113-25402-5</p>
        <p class="t0">
          书&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：SBN978-7-113-25402-5
        </p>
      <p class="t0">定&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价：59.80元</p>
      <hr />
      <p class="tl-cn">版权所有，侵权必究</p>
@@ -107,8 +136,10 @@
      </p>
      <p class="tl-cn">打击盗版举报电话:(010)51873659</p>
    </div>
    </div>
    <!-- 编审委员会 -->
    <div class="page-box page-padding" page="5">
      <div v-if="showPageList.indexOf(5) > -1">
      <document>
        <p class="content t-center bs-box">
          全国高职高专院校机电类专业规划教材
@@ -151,8 +182,10 @@
        </div>
      </document>
    </div>
    </div>
    <!-- 出版说明 -->
    <div class="page-box pd-104" page="6">
      <div v-if="showPageList.indexOf(6) > -1">
      <div class="page-heder-img">
        <img src="../../assets/images/publish.png" alt="" class="mt-100" />
      </div>
@@ -190,8 +223,10 @@
        </document>
      </div>
    </div>
    </div>
    <!-- 第三版 -->
    <div class="page-box pd-104" page="7">
      <div v-if="showPageList.indexOf(7) > -1">
      <div class="page-heder-img">
        <img src="../../assets/images/qianyan.png" class="mt-100" alt="" />
      </div>
@@ -231,15 +266,18 @@
        </document>
      </div>
    </div>
    </div>
    <!-- 3-1 -->
    <div class="page-box fl fl-cl ju-bt" page="8">
      <div>
      <div v-if="showPageList.indexOf(8) > -1">
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
        </div>
        <div class="padding-96">
          <document>
            <p class="t0">到提高学生学习兴趣和效率以及易学、易懂、易上手的目的。</p>
            <p class="t0">
              到提高学生学习兴趣和效率以及易学、易懂、易上手的目的。
            </p>
            <p class="quotation fl al-cn t0">
              <img
                src="../../assets/images/icon/neirong.png"
@@ -249,7 +287,11 @@
              <b>基本内容</b>
            </p>
            <p class="quotation">
              本书由彩色纸质教材和网络资源组成。彩色纸质教材由九个项目组成，每个项目中的任务安排了任务目标、任务描述和任务训练。网络资源含嵌入版组态软件、工程案例、教学案例、程序源代码、微课等，为“教”和“学”提供了生动、直观、便捷、立体的教学资源包。视频资源通过扫描二维码获取，其他相关资源可从我社网站（<a href="http://www.tdpress.com/51eds/">http://www.tdpress.com/51eds/</a> ）下载。
              本书由彩色纸质教材和网络资源组成。彩色纸质教材由九个项目组成，每个项目中的任务安排了任务目标、任务描述和任务训练。网络资源含嵌入版组态软件、工程案例、教学案例、程序源代码、微课等，为“教”和“学”提供了生动、直观、便捷、立体的教学资源包。视频资源通过扫描二维码获取，其他相关资源可从我社网站（<a
                href="http://www.tdpress.com/51eds/"
                >http://www.tdpress.com/51eds/</a
              >
              ）下载。
            </p>
            <p class="quotation">
              本书由张文明、华祖银任主编，王一凡、陈东升、黄晓伟、曹建军、宋黎菁、缪建华、付华良、贾君贤任副主编，具体编写分工如下：张文明教授撰写前言；张文明教授和华祖银总工程师共同编写项目一；黄晓伟工程师编写项目二、项目三（任务一～任务四）；陈东升工程师编写项目五；王一凡副教授编写项目四、项目六；宋黎菁工程师编写项目七、项目三（任务六）；付华良副教授编写项目三（任务五）、曹建军副教授和贾君贤讲师共同编写项目八；缪建华高级技师编写项目九。全书由张文明教授指导并负责统稿，汤晓华教授和北京昆仑通态自动化软件科技有限公司刘志军高级工程师主审。
@@ -272,8 +314,13 @@
    </div>
    <!-- 第一版 -->
    <div class="page-box" page="9">
      <div v-if="showPageList.indexOf(9) > -1">
      <div class="page-heder-img">
        <img src="../../assets/images/qianyan-one.png" class="mt-100" alt="" />
          <img
            src="../../assets/images/qianyan-one.png"
            class="mt-100"
            alt=""
          />
      </div>
      <div class="padding-96">
        <document>
@@ -311,11 +358,17 @@
        </document>
      </div>
    </div>
    </div>
    <!-- 1-1 -->
    <div class="page-box fl fl-cl ju-bt" page="10">
      <div v-if="showPageList.indexOf(10) > -1">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
            <img
              src="../../assets/images/page-header.png"
              alt=""
              class="w100"
            />
        </div>
        <div class="padding-96">
          <document>
@@ -351,15 +404,16 @@
      </ul>
    </div>
  </div>
  </div>
</template>
<script>
export default {
  name: "headerPage",
  props:{
    showPageList:{
      type:Array
    }
  }
      type: Array,
    },
  },
};
</script>
<style scoped lang="less">

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

@@ -1,12 +1,21 @@
<template>
  <div class="page-main" @scroll="throttledScrollHandler">
    <div class="page-content"       :style="{
    <div
      class="page-content"
      :style="{
        fontSize: fontSize ? fontSize + 'px' : '16px',
        transform: `scale(${pageZoom ? pageZoom : 1})`,
        transformOrigin: 'center top',
      }">
      <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader>
      <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" />
      }"
    >
      <pageHeader
        v-if="showCatalogList.indexOf(1) > -1"
        :showPageList="loadPageList"
      ></pageHeader>
      <chapterOne
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
      />
    </div>
  </div>
</template>
@@ -42,7 +51,7 @@
      loadPageObserver: null,
      loadPageList: [],
      questionData: {},
      testData:{}
      testData: {},
    };
  },
  watch: {
@@ -62,7 +71,7 @@
          this.initObservation();
          this.initThemeColor();
        }, 500);
      }
      },
    },
    loadPageList: {
      handler(newVal, oldVal) {
@@ -70,8 +79,8 @@
          this.initSwiper();
          this.initViewer();
        }, 200);
      }
    }
      },
    },
  },
  mounted() {
    // 默认加载章节
@@ -418,7 +427,7 @@
            this.$store.state.qiankun.pageChange({
              page: page,
              catalog: catalog,
              text
              text,
            });
          // const sections = Array.from(document.querySelectorAll(".section"));
          //sections：获取所有具有 .section 类名的元素，并转换为数组。
@@ -463,6 +472,7 @@
            //   }
            // }
            this.loadPageList.push(Number(page));
            console.log('页码列表',this.loadPageList);
            if (this.loadPageList.length > 5) {
              // 超过5页
              this.loadPageList.shift();
@@ -482,7 +492,7 @@
          autoplay: {
            //自动开始
            delay: 3000, //时间间隔
            disableOnInteraction: false //*手动操作轮播图后不会暂停*
            disableOnInteraction: false, //*手动操作轮播图后不会暂停*
          },
          paginationClickable: true,
          slidesPerView: 1, // 一组三个
@@ -490,7 +500,7 @@
          // 如果需要前进后退按钮
          navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev"
            prevEl: ".swiper-button-prev",
          },
          // 窗口变化,重新init,针对F11全屏和放大缩小,必须加
          observer: true,
@@ -498,8 +508,8 @@
          // 如果需要分页器
          pagination: {
            el: ".swiper-pagination",
            clickable: true // 分页器可以点击
          }
            clickable: true, // 分页器可以点击
          },
        });
      }
    },
@@ -512,10 +522,10 @@
        new Viewer(dom, {
          navbar: true, // 显示导航栏
          toolbar: true, // 显示工具栏
          title: true // 显示标题
          title: true, // 显示标题
        });
      }
    }
    },
  },
};
</script>

 src/books/embedded/view/index.vue

@@ -2,10 +2,6 @@
  <div
    class="embedded-book"
    @mouseup="handleMouseUp"
    :style="{
      fontSize: fontSize ? fontSize + 'px' : '16px',
      transform: `scale(${pageZoom ? pageZoom : 1})`,
    }"
  >
    <pageContent></pageContent>
  </div>
@@ -26,14 +22,6 @@
      cardList: [],
      isMouseDown: false,
    };
  },
  computed: {
    fontSize() {
      return this.$store.state.qiankun.fontSize;
    },
    pageZoom() {
      return this.$store.state.qiankun.scale / 100;
    },
  },
  mounted() {
  },