嵌入书分页加载

闫增涛

2024-05-29 b1afe1bb63a9eae10b4e069c60f4db80b6816078

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