嵌入书分页加载

闫增涛

2024-05-29 b1afe1bb63a9eae10b4e069c60f4db80b6816078

 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"),