样式优化

闫增涛

2024-05-22 af31f794a24fce3448fd096b61a4d6e011ff59b9

样式优化

 src/assets/js/config.js

@@ -1,5 +1,5 @@
import axios from "axios";
export const resourceCtx = "http://182.92.203.7:3007/books/resource/1"; // 资源请求地址
export const resourceCtx = "http://182.92.203.7:3007/books/resource/3"; // 资源请求地址
export let activeBook = {}; // 资源请求地址
export let goodsStore = "";
// 请求教材配置信息

 src/books/embedded/assets/main.less

@@ -634,6 +634,9 @@
  .t0 {
    text-indent: 0;
  }
  .t2 {
    text-indent: 2em;
  }
  .primary-color {
    color: #501438;
  }
@@ -719,13 +722,16 @@
    border: 0;
    border-bottom: 1px solid #000;
  }
  .input-border:focus {
  .border-0 {
    border: 0;
  }
  .input-border:focus,.border-0:focus{
    outline: none;
  }
  .textarea-table-td {
    font-size: 16px;
    font-size: 14px;
    width: 60px;
    height: 70px;
    height: 60px;
    border: 0;
    font-family: "Microsoft YaHei", "微软雅黑", sans-serif;
  }
@@ -791,10 +797,8 @@
  .tl-cn {
    text-align: center;
  }
  .cover-box {
    width: 815px;
    height: 1125px;
    object-fit: contain;
  table {
    font-size: 14px;
  }
}
body {

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

@@ -1,7 +1,11 @@
<template>
  <div class="chapter" num="1">
    <!-- 1 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96" page="11">
    <div
      class="page-box fl fl-cl ju-bt al-end"
      page="11"
      style="padding: 0 87px 0 88px"
    >
      <div class="mt-100 w100">
        <!-- <h1>项目一　触摸屏组态介绍</h1> -->
        <img src="../../assets/images/project-one.png" alt="" class="w100" />
@@ -47,7 +51,7 @@
          CE，Linux和DOS之上，甚至直接支持特定的CPU。嵌入式系统具有与PC几乎一样的功能，与PC的区别仅仅是将微型操作系统与应用软件嵌入在ROM、RAM与Flash存储器中，而不是存储于磁盘等载体中。
        </p>
        <p class="content">
          随着后PC时代的到来，在制造业领域更注重使用符合其特定需求并带有智能的嵌入式工业控制组态软件，而嵌入式组态软件特具的按功能剪裁的特性，以及其内嵌的实时多任务操作系统，可保证整个嵌入系统体积小、成本低、实时性高、可靠性高的同时，还方便不具备嵌入式软件开发经验的用户在极短的时间内，使用嵌入式组态软件快速开发完成一个嵌入式系统，并极大地加快了嵌入式产品进入市场的速度，而且使产品具有丰富的人机界面。北京昆仑通态公司MCGS组态软件，通过大力加强对工控硬件产品的驱动支持和
          随着后PC时代的到来，在制造业领域更注重使用符合其特定需求并带有智能的嵌入式工业控制组态软件，而嵌入式组态软件特具的按功能剪裁的特性，以及其内嵌的实时多任务操作系统，可保证整个嵌入系统体积小、成本低、实时性高、可靠性高的同时，还方便不具备嵌入式软件开发经验的用户在极短的时间内，使用嵌入式组态软件快速开发完成一个嵌入式系统，并极大地加快了嵌入式产品进入市场的速度，而且使产品具有丰富的人机界面。北京昆仑通态公司MCGS组态软件，通过大力加强对工控硬件产品的驱动支持和提升软件内部功
        </p>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
@@ -69,41 +73,56 @@
                <span class="primary-color">素材</span>
              </li>
              <li class="fl fl-cl al-cn p-10">
                <img src="../../assets/images/icon/rar.png" class="rar-icon" />
                <div>
                  <span class="rar-text">工程样例.rar</span>
                  <img
                    src="../../assets/images/icon/rar.png"
                    class="rar-icon"
                  />
                  <img
                    @click="download('工程样例')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  />
                </div>
                <div>
                  <span class="rar-text">工程样例.rar</span>
                </div>
              </li>
              <li class="fl fl-cl al-cn p-10">
                <img src="../../assets/images/icon/rar.png" class="rar-icon" />
                <div>
                  <span class="rar-text">管控一体化样例.rar</span>
                  <img
                    src="../../assets/images/icon/rar.png"
                    class="rar-icon"
                  />
                  <img
                    @click="download('管控一体样例')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  />
                </div>
                <div>
                  <span class="rar-text">管控一体化样例.rar</span>
                </div>
              </li>
              <li class="fl fl-cl al-cn p-10">
                <img src="../../assets/images/icon/rar.png" class="rar-icon" />
                <div>
                  <span class="rar-text">嵌_计划曲线样例.rar</span>
                  <img
                    src="../../assets/images/icon/rar.png"
                    class="rar-icon"
                  />
                  <img
                    @click="download('嵌_计划曲线样例')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  />
                </div>
                <div>
                  <span class="rar-text">嵌_计划曲线样例.rar</span>
                </div>
              </li>
            </ul>
            <p class="content t0">
              提升软件内部功能，有效帮助用户建造从嵌入式设备、现场监控工作站到企业生产监控信息网在内的完整的自动化解决方案。图1-1～图1-4所示为嵌入式组态软件系统应用于各个行业的情况。
              能，有效帮助用户建造从嵌入式设备、现场监控工作站到企业生产监控信息网在内的完整的自动化解决方案。图1-1～图1-4所示为嵌入式组态软件系统应用于各个行业的情况。
            </p>
            <div class="qrbodyPic">
              <el-image
@@ -134,7 +153,7 @@
      </ul>
    </div>
    <!-- 3 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96" page="13">
    <div class="page-box fl fl-cl ju-bt al-end " page="13" style="padding:0 86px 0 96px">
      <div>
        <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20">
          <img src="../../assets/images/header-one.png" alt="" />
@@ -192,7 +211,7 @@
          （1）主控窗口构造了应用系统的主框架，确定了工业控制中工程作业的总体轮廓，以及运行流程、特性参数和启动特性等内容，是应用系统的主框架。
        </p>
        <p class="content">
          （2）设备窗口是MCGS嵌入版系统与外围设备联系的媒介。设备窗口专门用来放置
          （2）设备窗口是MCGS嵌入版系统与外围设备联系的媒介。设备窗口专门用来放置不同
        </p>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
@@ -208,7 +227,7 @@
        </div>
        <div class="padding-96">
          <p class="content t0">
            不同类型和功能的设备构件，实现对外围设备的操作和控制。设备窗口通过设备构件把外围设备的数据采集进来，送入实时数据库，或把实时数据库中的数据输出到外围设备。
            类型和功能的设备构件，实现对外围设备的操作和控制。设备窗口通过设备构件把外围设备的数据采集进来，送入实时数据库，或把实时数据库中的数据输出到外围设备。
          </p>
          <p class="content">
            （3）用户窗口实现了数据和流程的“可视化”。用户窗口中可以放置三种不同类型的图形对象：图元、图符和动画构件。通过在用户窗口内放置不同的图形对象，用户可以构造各种复杂的图形界面，用不同的方式实现数据和流程的“可视化”。
@@ -381,13 +400,13 @@
        <p class="imgtitle">
          表1-1　评分表 <i class="el-icon-share cu-pr"></i>
        </p>
        <table border="1" cellpadding="10" cellspacing="0">
        <table border="1" cellpadding="4" cellspacing="0">
          <tr class="table-bc">
            <td class="table-cn" colspan="2">
              评 分 表<br />
              <input style="width: 30px" class="input-border table-bc" /> 学年
            </td>
            <td  class="table-cn">
            <td class="table-cn">
              工 作 形 式 <br />
              <input type="checkbox" name="xingshi" value="prople" /> 个人
              <input type="checkbox" name="xingshi" value="fengong" /> 小组分工
@@ -406,10 +425,12 @@
            <td class="table-cn">教师评分</td>
          </tr>
          <tr>
            <td rowspan="4">认识嵌入式组态和触摸屏</td>
            <td rowspan="4"><div style="width:50px">认识嵌入式组态和触摸屏</div></td>
            <td>嵌入式组态和触摸屏，20分</td>
            <td>
              收集各类触摸屏功能及性能信息，并进行比较;了解嵌人式组态组成，了解TPC系列产品性能、外观与接线
              <div >
                收集各类触摸屏功能及性能信息，并进行比较;了解嵌人式组态组成，了解TPC系列产品性能、外观与接线
              </div>
            </td>
            <td>
              <textarea class="textarea-table-td"></textarea>
@@ -421,7 +442,8 @@
          <tr>
            <td>通信连接，30分</td>
            <td>
              观察动手制作TPC与PC通信线，并测试:观察动手制作TPC与PLC通信线，并测试
              <div>观察动手制作TPC与PC通信线，并测试;<br/></div>
              <div>观察动手制作TPC与PLC通信线，并测试</div>
            </td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
@@ -491,12 +513,8 @@
              <span class="primary-color">安装包</span>
            </li>
            <li class="fl fl-cl al-cn p-10">
              <img src="../../assets/images/icon/rar.png" class="rar-icon" />
              <div>
                <span class="rar-text"
                  >MCGS嵌入版<br />
                  安装文件.rar</span
                >
                <img src="../../assets/images/icon/rar.png" class="rar-icon" />
                <img
                  @click="
                    downloadRar('McgsPro 3.3.6.6354 SP1.3 组态软件安装包')
@@ -504,6 +522,12 @@
                  src="../../assets/images/icon/download.png"
                  class="downlod-icon cu-pr"
                />
              </div>
              <div>
                <span class="rar-text"
                  >MCGS嵌入版<br />
                  安装文件.rar</span
                >
              </div>
            </li>
          </ul>
@@ -600,13 +624,13 @@
            表1-2　评分表 <i class="el-icon-share cu-pr"></i>
          </p>
        </div>
        <table border="1" cellpadding="10" cellspacing="0">
        <table border="1" cellpadding="4" cellspacing="0">
          <tr class="table-bc">
            <td class="table-cn" colspan="2">
              评 分 表<br />
              <input style="width: 30px" class="input-border table-bc" /> 学年
            </td>
            <td  class="table-cn">
            <td class="table-cn">
              工 作 形 式 <br />
              <input type="checkbox" name="xingshi" value="prople" /> 个人
              <input type="checkbox" name="xingshi" value="fengong" /> 小组分工
@@ -625,7 +649,7 @@
            <td class="table-cn">教师评分</td>
          </tr>
          <tr>
            <td rowspan="4">MCGS嵌入版组态软件安装</td>
            <td rowspan="4"><div style="width:50px">MCGS嵌入版组态软件安装</div></td>
            <td>嵌入版组态软件安装，40分</td>
            <td>
              找到企业网站，下载最新MCGS嵌人式软件并安装:找到工业自动化软件BBS网站，参与讨论
@@ -661,95 +685,110 @@
        </h2>
        <div class="w100 border-so mb-5"></div>
        <div class="w50 rw-border mb-20"></div>
        <div class="fl ju-bt">
          <div class="left" style="width: 30%">
            <p class="quotation fl al-cn t0 primary-color">
              <img
                src="../../assets/images/icon/mubiao.png"
                alt=""
                class="w-35 mr-5"
              />
              <b>任务目标</b>
            </p>
            <p class="content">初步了解工程建立、组态、下载与模拟运行。</p>
            <p class="quotation fl al-cn t0 primary-color">
              <img
                src="../../assets/images/icon/miaoshu.png"
                alt=""
                class="w-35 mr-5"
              />
              <b>任务描述</b>
            </p>
            <p>触摸屏是新一代高科</p>
        <div style="width:62%">
          <div>
            <img
              src="../../assets/images/icon/document.png"
              class="document-icon"
            />
            <span>文本</span>
          </div>
          <div class="right" style="width: 69%">
            <div>
              <img
                src="../../assets/images/icon/document.png"
                class="document-icon"
              />
              <span>文本</span>
            </div>
            <ul class="word-resource fl">
              <li class="fl fl-cl al-cn">
          <ul class="word-resource fl">
            <li class="fl fl-cl al-cn p08">
              <div>
                <img
                  src="../../assets/images/icon/word.png"
                  class="word-icon"
                />
                <div>
                  <span>初级教程</span>
                  <img
                    @click="downloadWord('初级教程资源')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  />
                </div>
              </li>
              <li class="fl fl-cl al-cn">
                <img
                  @click="downloadWord('初级教程资源')"
                  src="../../assets/images/icon/download.png"
                  class="downlod-icon cu-pr"
                />
              </div>
              <div>
                <span>初级教程</span>
              </div>
            </li>
            <li class="fl al-cn">
              <div class="word-border"></div>
            </li>
            <li class="fl fl-cl al-cn p08">
              <div>
                <img
                  src="../../assets/images/icon/word.png"
                  class="word-icon"
                />
                <div>
                  <span>中级教程</span>
                  <img
                    @click="downloadWord('中级教程资源')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  />
                </div>
              </li>
              <li class="fl fl-cl al-cn">
                <img
                  @click="downloadWord('中级教程资源')"
                  src="../../assets/images/icon/download.png"
                  class="downlod-icon cu-pr"
                />
              </div>
              <div>
                <span>中级教程</span>
              </div>
            </li>
            <li class="fl al-cn">
              <div class="word-border"></div>
            </li>
            <li class="fl fl-cl al-cn p08">
              <div>
                <img
                  src="../../assets/images/icon/word.png"
                  class="word-icon"
                />
                <div>
                  <span>驱动教程</span>
                  <img
                    @click="downloadWord('驱动教程资源')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  />
                </div>
              </li>
              <li class="fl fl-cl al-cn">
                <img
                  @click="downloadWord('驱动教程资源')"
                  src="../../assets/images/icon/download.png"
                  class="downlod-icon cu-pr"
                />
              </div>

              <div>
                <span>驱动教程</span>
              </div>
            </li>
            <li class="fl al-cn">
              <div class="word-border"></div>
            </li>
            <li class="fl fl-cl al-cn p08">
              <div>
                <img
                  src="../../assets/images/icon/word.png"
                  class="word-icon"
                />
                <div>
                  <span>硬件教程</span>
                  <img
                    @click="downloadWord('硬件教程资源')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  />
                </div>
              </li>
            </ul>
          </div>
                <img
                  @click="downloadWord('硬件教程资源')"
                  src="../../assets/images/icon/download.png"
                  class="downlod-icon cu-pr"
                />
              </div>

              <div>
                <span>硬件教程</span>
              </div>
            </li>
          </ul>
        </div>
        <p class="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/mubiao.png"
            alt=""
            class="w-35 mr-5"
          />
          <b>任务目标</b>
        </p>
        <p class="content">初步了解工程建立、组态、下载与模拟运行。</p>
        <p class="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/miaoshu.png"
            alt=""
            class="w-35 mr-5"
          />
          <b>任务描述</b>
        </p>
        <p>触摸屏是新一代高科</p>
        <p class="content">
          技人机界面产品，适用于现场控制，可靠性高，编程简单，使用、维护方便。在工艺参数较多又需要人机交互时使用触摸屏，可使整个生产的自动化控制的功能得到大大地加强。本任务学习嵌入式组态软件工程建立、组态、模拟运行和下载到触摸屏的一般过程。
        </p>
@@ -879,7 +918,7 @@
        </div>

        <div class="qrbodyPic">
          <el-image :src="imgtOne" :preview-src-list="[imgtOne]" />
          <el-image :src="imgtOne" :preview-src-list="[imgtOne]" class="source-img" />
          <p class="imgdescript">图1-28　添加指示灯</p>
        </div>
        <div class="fl">
@@ -1040,7 +1079,7 @@
            class="h-pic"
            src="../../assets/images/img00025007.jpg"
            active="true"
          />按钮，进行下载配置。单击“联机运行”按钮，连接方式选择“TCP/IP网络通信”，设置触摸屏IP与计算机IP在同一网段内，单击“通信测试”按钮，通信测试正常后，单击“工程下载”按钮。
          />按钮，进行下载配置。单击“联机运行”按钮，连接方式选择“TCP/IP网络通信”，设置触摸屏IP与计算机IP在同一网段内，单击“通信测试”按钮，通
        </p>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
@@ -1055,6 +1094,7 @@
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
        </div>
        <div class="padding-96">
          <p class="content t0">信测试正常后，单击“工程下载”按钮。</p>
          <p class="quotation fl al-cn t0 primary-color">
            <img
              src="../../assets/images/icon/arrow-four.png"
@@ -1117,7 +1157,7 @@
            表1-3　功能测试表 <i class="el-icon-share cu-pr"></i>
          </p>
        </div>
        <table border="1" cellpadding="10" cellspacing="0" class="w100">
        <table border="1" cellpadding="4" cellspacing="0" class="w100">
          <tr class="table-bc">
            <td class="table-cn">
              <img src="../../assets/images/table-td.png" class="w100" />
@@ -1128,23 +1168,23 @@
          </tr>
          <tr>
            <td>按下“指示灯1”按钮</td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><input style="width: 100%" class="border-0 " /></td>
            <td><input style="width: 100%" class="border-0 " /></td>
            <td>
              <textarea class="textarea-table-td"></textarea>
              <input style="width: 100%" class="border-0 " />
            </td>
          </tr>
          <tr>
            <td>按下“指示灯1”按钮</td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><div style="width:150px">按下“指示灯1”按钮</div></td>
            <td><input style="width: 100%" class="border-0 " /></td>
            <td><input style="width: 100%" class="border-0 " /></td>
            <td><input style="width: 100%" class="border-0 " /></td>
          </tr>
          <tr>
            <td>按下“指示灯2”按钮</td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><input style="width: 100%" class="border-0 " /></td>
            <td><input style="width: 100%" class="border-0 " /></td>
            <td><input style="width: 100%" class="border-0 " /></td>
          </tr>
        </table>
        <div class="qrbodyPic">
@@ -1152,13 +1192,13 @@
            表1-4　评分表 <i class="el-icon-share cu-pr"></i>
          </p>
        </div>
        <table border="1" cellpadding="10" cellspacing="0">
        <table border="1" cellpadding="4" cellspacing="0">
          <tr class="table-bc">
            <td class="table-cn" colspan="2">
              评 分 表<br />
              <input style="width: 30px" class="input-border table-bc" /> 学年
            </td>
            <td  class="table-cn">
            <td class="table-cn">
              工 作 形 式 <br />
              <input type="checkbox" name="xingshi" value="prople" /> 个人
              <input type="checkbox" name="xingshi" value="fengong" /> 小组分工
@@ -1177,8 +1217,8 @@
            <td class="table-cn">教师评分</td>
          </tr>
          <tr>
            <td rowspan="5">建立工程和下载工程</td>
            <td>工作步骤及电路图样，20分</td>
            <td rowspan="5"><div style="width:20px">建立工程和下载工程</div></td>
            <td><div>工作步骤及电路图样，20分</div></td>
            <td>训练步骤:需要的元器件</td>
            <td>
              <textarea class="textarea-table-td"></textarea>
@@ -1214,112 +1254,117 @@
            <td><textarea class="textarea-table-td"></textarea></td>
          </tr>
        </table>
        <p class="content mt-20"><b>练习与提高</b></p>
        <p class="quotation">1．阐述嵌入式组态、触摸屏之间的关系。</p>
        <p class="ti-2">
        <!-- <p class="content mt-20"><b>练习与提高</b></p> -->
        <h2 class="secondTitle primary-color" id="sigil_toc_id_13">
          练习与提高
        </h2>
        <div class="w100 border-so mb-5"></div>
        <div class="w50 rw-border mb-20"></div>
        <p class="quotation t0">1．阐述嵌入式组态、触摸屏之间的关系。</p>
        <p class="question-textaere">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 93%"
            style="width: 95%"
          ></textarea>
        </p>
        <p class="quotation">2．是否可以采用U盘下载组态过程？过程步骤如何？</p>
        <p class="ti-2">
        <p class="quotation t0">2．是否可以采用U盘下载组态过程？过程步骤如何？</p>
        <p class="question-textaere">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 93%"
            style="width: 95%"
          ></textarea>
        </p>
        <p class="quotation">
        <p class="quotation t0">
          3．在淘宝网站查找任务一中主流PLC与触摸屏连接线型号、性能和价格。
        </p>
        <p class="ti-2">
        <p class="question-textaere">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 93%"
            style="width: 95%"
          ></textarea>
        </p>
        <p class="quotation">
        <p class="quotation t0">
          4．分析计算机、平板电脑、触摸屏、PLC之间连接的异同。
        </p>
        <p class="ti-2">
        <p class="question-textaere">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 93%"
            style="width: 95%"
          ></textarea>
        </p>
        <p class="quotation">
        <p class="quotation t0">
          5．什么是用户应用系统、组态环境与运行环境？组态环境是开发工具吗？
        </p>
        <p class="ti-2">
        <p class="question-textaere">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 93%"
            style="width: 95%"
          ></textarea>
        </p>
        <p class="quotation">
        <p class="quotation t0">
          6．MCGS触摸屏安装何种操作系统？主要自带何种应用软件？从www.mcgs.com.cn网站下载最新软件包并安装，在www.gongkong.com注册，进入BBS讨论工控软件技术。
        </p>
        <p class="ti-2">
        <p class="question-textaere">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 93%"
            style="width: 95%"
          ></textarea>
        </p>
        <p class="quotation">7．组态变量怎样建立对应数据关系？</p>
        <p class="ti-2">
        <p class="quotation t0">7．组态变量怎样建立对应数据关系？</p>
        <p class="question-textaere">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 93%"
            style="width: 95%"
          ></textarea>
        </p>
        <p class="quotation">8．了解RS-232、RS-485接口性能功能和TCP/IP协议。</p>
        <p class="ti-2">
        <p class="quotation t0">8．了解RS-232、RS-485接口性能功能和TCP/IP协议。</p>
        <p class="question-textaere">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 93%"
            style="width: 95%"
          ></textarea>
        </p>
        <p class="quotation">9．比较触摸屏中的组态工程和手机中的APP的区别。</p>
        <p class="ti-2">
        <p class="quotation t0">9．比较触摸屏中的组态工程和手机中的APP的区别。</p>
        <p class="question-textaere">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 93%"
            style="width: 95%"
          ></textarea>
        </p>
      </div>
@@ -1413,6 +1458,7 @@
p {
  font-family: "宋体", SimSun, sans-serif !important;
  margin: 0;
  text-align: justify;
}
textarea {
  resize: none;
@@ -1432,17 +1478,25 @@
.right-resource {
  position: absolute;
  right: -80px;
  top:40px
  top: 40px;
}
.word-resource {
  padding: 0;
  border: 1px solid #501438;
  li {
    padding: 0 8px;
    border-right: 1px dotted #501438;
  .p08 {
    padding:0 8px;
  }
  // li {
  //   padding: 0 8px;
  // }
  li:last-child {
    border: 0;
  }
  .word-border {
    display: inline-block;
    height: 70%;
    width: 2px;
    border-right: 1px dashed #501438;
  }
}
.bones-carousel {
@@ -1457,4 +1511,14 @@
    object-fit: contain;
  }
}
.source-img {
  /deep/ .el-image__inner {
    max-width: 312px;
  }
}
.question-textaere {
  text-indent: 0;
  padding-left: 23px;
}

</style>

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

@@ -3,7 +3,7 @@
    <!-- 封面 -->
    <div class="page-box" page="1">
      <h1 class="frontCover" title="封面">
        <img alt="封面" src="../../assets/images/device_phone_Frontcover.jpg" class="cover-box" />
        <img alt="封面" src="../../assets/images/device_pad_Frontcover.jpg" class="cover-box w100" />
      </h1>
    </div>
    <!-- 作者简介 -->
@@ -31,7 +31,7 @@
    <!-- 封面 -->
    <div class="page-box" page="3">
      <h1 class="frontCover" title="封面">
        <img alt="封面" src="../../assets/images/device_phone_Frontcover.jpg" class="cover-box">
        <img alt="封面" src="../../assets/images/device_pad_Frontcover.jpg" class="cover-box w100">
      </h1>
    </div>
    <!-- 内容简介 -->