Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

YM

2024-05-29 3002c5f4593c91cbd5dd8bc684c3800eff9ab122

Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

 src/App.vue

@@ -63,7 +63,9 @@
    } else {
      this.activeBook = await this.config.getBookConfig(
        // childHealth
        this.config.resourceCtx + "childHealth"
        // lifeCare
        // sportsAndHealth
        this.config.resourceCtx + "sportsAndHealth"
      );
      // æµ‹è¯•è¯•è¯»30页
      // this.activeBook.tryPageCount = 10;

 src/books/English/assets/images/Cover.jpg

 src/books/English/assets/images/grammar.jpg

 src/books/English/assets/images/icon/2¹³.svg

New file
@@ -0,0 +1,7 @@
<svg t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
  xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="40" height="20">
  <path
    d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
    fill="#1AFA29" p-id="18768"></path>
</svg>

 src/books/English/assets/images/icon/´íÎó-copy.svg

New file
@@ -0,0 +1,7 @@
<svg t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
  xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
  width="20" height="20">
  <path
    d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
    fill="#d81e06" p-id="25746"></path>
</svg>

 src/books/English/assets/main.less

@@ -586,7 +586,7 @@
    margin-top: 0.5em;
  }
  .bjh3 {
    border: 10px dotted #faeec6;
    border: 5px dotted #faeec6;
    background: #0da785;
    padding: 0.2em 0.4em 0.2em 0.4em;
    color: #ffffff;
@@ -712,6 +712,9 @@
  .mb-20 {
    margin-bottom: 20px;
  }
  .mt-40 {
    margin-top: 40px;
  }
  .wh-nr {
    white-space: nowrap;
  }

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

@@ -1,7 +1,7 @@
<template>
  <div class="chapter" num="0">
    <!-- 1 -->
    <div class="page-box" page="6">
    <div class="page-box" page="7">
      <div class="bodystyle">
        <h1 id="a005">
          <img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
@@ -23,7 +23,7 @@
      </div>
    </div>
    <!-- 2 -->
    <div class="page-box" page="7">
    <div class="page-box" page="8">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="event-header-bc fl al-end"
@@ -48,18 +48,17 @@
            >
            <span class="btn-box" @click="showAnswerTwo = !showAnswerTwo">
              <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20.501"
              height="20.501"
              viewBox="0 0 20.501 20.501"
              
            >
              <path
                class="a"
                d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                transform="translate(-3327.144 15329)"
              />
            </svg>
                xmlns="http://www.w3.org/2000/svg"
                width="20.501"
                height="20.501"
                viewBox="0 0 20.501 20.501"
              >
                <path
                  class="a"
                  d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                  transform="translate(-3327.144 15329)"
                />
              </svg>
            </span>
            <!-- <button
              @click="showAnswerTwo = !showAnswerTwo"
@@ -82,14 +81,20 @@
                    @change="setBookQuestion"
                  />
                  <span class="icon-box">
                    <i
                      class="el-icon-check correct-icon"
                      v-if="questionData.warnUp.one.isRight"
                    ></i>
                    <i
                      class="el-icon-close error-icon"
                      v-if="questionData.warnUp.one.isRight == false"
                    ></i>
                    <svg v-if="questionData.warnUp.one.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="questionData.warnUp.one.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
              </div>
@@ -118,14 +123,20 @@
                    @change="setBookQuestion"
                  />
                  <span class="icon-box">
                    <i
                      class="el-icon-check correct-icon"
                      v-if="questionData.warnUp.two.isRight"
                    ></i>
                    <i
                      class="el-icon-close error-icon"
                      v-if="questionData.warnUp.two.isRight == false"
                    ></i>
                    <svg v-if="questionData.warnUp.two.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="questionData.warnUp.two.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
              </div>
@@ -153,14 +164,20 @@
                    @change="setBookQuestion"
                  />
                  <span class="icon-box">
                    <i
                      class="el-icon-check correct-icon"
                      v-if="questionData.warnUp.three.isRight"
                    ></i>
                    <i
                      class="el-icon-close error-icon"
                      v-if="questionData.warnUp.three.isRight == false"
                    ></i>
                    <svg v-if="questionData.warnUp.three.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="questionData.warnUp.three.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
              </div>
@@ -189,14 +206,20 @@
                    @change="setBookQuestion"
                  />
                  <span class="icon-box">
                    <i
                      class="el-icon-check correct-icon"
                      v-if="questionData.warnUp.four.isRight"
                    ></i>
                    <i
                      class="el-icon-close error-icon"
                      v-if="questionData.warnUp.four.isRight == false"
                    ></i>
                    <svg v-if="questionData.warnUp.four.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="questionData.warnUp.four.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
              </div>
@@ -224,14 +247,20 @@
                    @change="setBookQuestion"
                  />
                  <span class="icon-box">
                    <i
                      class="el-icon-check correct-icon"
                      v-if="questionData.warnUp.five.isRight"
                    ></i>
                    <i
                      class="el-icon-close error-icon"
                      v-if="questionData.warnUp.five.isRight == false"
                    ></i>
                    <svg v-if="questionData.warnUp.five.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="questionData.warnUp.five.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
              </div>
@@ -260,14 +289,20 @@
                    @change="setBookQuestion"
                  />
                  <span class="icon-box">
                    <i
                      class="el-icon-check correct-icon"
                      v-if="questionData.warnUp.six.isRight"
                    ></i>
                    <i
                      class="el-icon-close error-icon"
                      v-if="questionData.warnUp.six.isRight == false"
                    ></i>
                    <svg v-if="questionData.warnUp.six.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="questionData.warnUp.six.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
              </div>
@@ -290,18 +325,17 @@
            </button> -->
            <span class="btn-box" @click="showAnswerOne = !showAnswerOne">
              <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20.501"
              height="20.501"
              viewBox="0 0 20.501 20.501"
              
            >
              <path
                class="a"
                d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                transform="translate(-3327.144 15329)"
              />
            </svg>
                xmlns="http://www.w3.org/2000/svg"
                width="20.501"
                height="20.501"
                viewBox="0 0 20.501 20.501"
              >
                <path
                  class="a"
                  d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                  transform="translate(-3327.144 15329)"
                />
              </svg>
            </span>
          </p>
          <p class="t0">
@@ -329,7 +363,7 @@
      </div>
    </div>
    <!-- 3 -->
    <div class="page-box" page="8">
    <div class="page-box" page="9">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class=""></li>
        <li class="fz-18">
@@ -369,18 +403,17 @@
            </button> -->
            <span class="btn-box" @click="showAnswerThree = !showAnswerThree">
              <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20.501"
              height="20.501"
              viewBox="0 0 20.501 20.501"
              
            >
              <path
                class="a"
                d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                transform="translate(-3327.144 15329)"
              />
            </svg>
                xmlns="http://www.w3.org/2000/svg"
                width="20.501"
                height="20.501"
                viewBox="0 0 20.501 20.501"
              >
                <path
                  class="a"
                  d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                  transform="translate(-3327.144 15329)"
                />
              </svg>
            </span>
          </p>
          <textarea
@@ -409,18 +442,17 @@
            </button> -->
            <span class="btn-box" @click="showAnswerFour = !showAnswerFour">
              <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20.501"
              height="20.501"
              viewBox="0 0 20.501 20.501"
              
            >
              <path
                class="a"
                d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                transform="translate(-3327.144 15329)"
              />
            </svg>
                xmlns="http://www.w3.org/2000/svg"
                width="20.501"
                height="20.501"
                viewBox="0 0 20.501 20.501"
              >
                <path
                  class="a"
                  d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                  transform="translate(-3327.144 15329)"
                />
              </svg>
            </span>
          </p>
          <textarea
@@ -450,16 +482,18 @@
          </p>
          <p>
            My
            <span class="word-bc" @click="saveWord($event,'incredible')"
            <span class="word-bc" @click="saveWord($event, 'incredible')"
              >incredible</span
            >
            journey to China started in 2017 when I got selected as a foreign
            student for PhD studies at one university.When I arrived in China,I
            was like Alice in Alice in Wonderland.I was curious about the
            people,the culture,the
            <span class="word-bc" @click="saveWord($event,'cuisine')">cuisine</span>
            <span class="word-bc" @click="saveWord($event, 'cuisine')"
              >cuisine</span
            >
            and of course the huge variety of
            <span class="word-bc" @click="saveWord($event,'landscapes')"
            <span class="word-bc" @click="saveWord($event, 'landscapes')"
              >landscapes</span
            >.
          </p>
@@ -467,12 +501,12 @@
            I found many great people and made several Chinese friends along the
            way.These friends made me see China through the eyes of the locals.I
            always found Chinese people very friendly and
            <span class="word-bc" @click="saveWord($event,'hospitable')"
            <span class="word-bc" @click="saveWord($event, 'hospitable')"
              >hospitable</span
            >
            towards foreigners.These Chinese friends made my understanding of
            Chinese culture and
            <span class="word-bc" @click="saveWord($event,'civilization')"
            <span class="word-bc" @click="saveWord($event, 'civilization')"
              >civilization</span
            >
            much easier,enjoyable and memorable.I consider China my second home
@@ -480,7 +514,9 @@
          </p>
          <p>
            You cannot
            <span class="word-bc" @click="saveWord($event,'explore')">explore</span>
            <span class="word-bc" @click="saveWord($event, 'explore')"
              >explore</span
            >
            China properly if you do not try its delicious variety of food.If
            you ate
          </p>
@@ -491,7 +527,7 @@
      </div>
    </div>
    <!-- 4 -->
    <div class="page-box">
    <div class="page-box" page="10">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="event-header-bc fl al-end"
@@ -509,15 +545,17 @@
            a new kind of food every day for one whole year,the list of Chinese
            food would still never end! Though I love to eat almost all kinds of
            Chinese cuisine,I found Sichuan and Hunan cuisine quite
            <span class="word-bc" @click="saveWord($event,'mouth-watering')"
            <span class="word-bc" @click="saveWord($event, 'mouth-watering')"
              >mouth-watering</span
            >
            and
            <span class="word-bc" @click="saveWord($event,'stimulating')"
            <span class="word-bc" @click="saveWord($event, 'stimulating')"
              >stimulating</span
            >.For a
            <span class="word-bc" @click="saveWord($event,'foodie')">foodie</span> like
            me,China is a heaven.I simply cannot live without Chinese food.
            <span class="word-bc" @click="saveWord($event, 'foodie')"
              >foodie</span
            >
            like me,China is a heaven.I simply cannot live without Chinese food.
          </p>
          <p>
            Like I said earlier,China is a huge wonderland.It has thousands of
@@ -525,11 +563,13 @@
            its own story and history.From the big and advanced cities like
            Shanghai or Guangzhou to the ancient cities like Xi’an and
            Hangzhou,each city has its
            <span class="word-bc" @click="saveWord($event,'unique')">unique</span>
            <span class="word-bc" @click="saveWord($event, 'unique')"
              >unique</span
            >
            <span
              class="word-bc"
              style="margin-left: 5px"
              @click="saveWord($event,'atmosphere')"
              @click="saveWord($event, 'atmosphere')"
              >atmosphere</span
            >
            that attracts you.I visited more than a dozen cities and came across
@@ -544,8 +584,8 @@
          <!-- <p class="center">
            <img class="img-g" alt="" src="../../assets/images/0014-1.jpg" />
          </p> -->
          <p class="fl al-cn">
            <span class="zt-cs">Words &amp; Expressions</span>
          <p class="fl al-cn mt-40">
            <span class="zt-cs " style="font-size:20px">Words &amp; Expressions</span>
            <span class="line-border-box"></span>
          </p>
          <audio
@@ -609,7 +649,7 @@
      </div>
    </div>
    <!-- 5 -->
    <div class="page-box">
    <div class="page-box" page="11">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class=""></li>
        <li class="fz-18">
@@ -653,8 +693,8 @@
          <p>be curious about ...对……感到好奇</p>
          <p>along the way æ²¿é€”</p>
          <div class="bj-note">
            <p><b>Notes:</b></p>
            <p>
            <p class="m0 "><b class="fz-18">Notes:</b></p>
            <p class="m0">
              <i>Alice in Wonderland</i> ï¼ˆ<i
                >Alice's Adventures in Wonderland</i
              >的简写，中文译为《爱丽丝梦游仙境》），是19世纪英国作家刘易斯·卡罗尔创作的著名儿童文学作品，讲述了一个名叫爱丽丝的英国小女孩为了追逐一只揣着怀表、会说话的兔子而不慎掉入了兔子洞，从而进入了一个神奇的国度并经历了一系列奇幻冒险的故事。
@@ -665,13 +705,15 @@
            A.Mark the items that made the author curious when she arrived in
            China.
          </p>
          <p>□ Language</p>
          <p>□ People</p>
          <p>□ Culture</p>
          <p>□ Cuisine</p>
          <p>□ Folk art</p>
          <p>□ Landscapes</p>
          <p>□ Transportation</p>
          <p>
            <input type="checkbox" name="ball" value="basketball" id="1" checked="checked"/> 
            Language</p>
          <p><input type="checkbox" name="ball" value="basketball" id="1" /> People</p>
          <p><input type="checkbox" name="ball" value="basketball" id="1"/> Culture</p>
          <p><input type="checkbox" name="ball" value="basketball" id="1" /> Cuisine</p>
          <p><input type="checkbox" name="ball" value="basketball" id="1" /> Folk art</p>
          <p><input type="checkbox" name="ball" value="basketball" id="1" /> Landscapes</p>
          <p><input type="checkbox" name="ball" value="basketball" id="1" /> Transportation</p>
        </div>
      </div>
      <div class="preface-bottom">
@@ -679,7 +721,7 @@
      </div>
    </div>
    <!-- 6 -->
    <div class="page-box">
    <div class="page-box" page="12">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="event-header-bc fl al-end"
@@ -914,7 +956,7 @@
      </div>
    </div>
    <!-- 7 -->
    <div class="page-box">
    <div class="page-box" page="13">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class=""></li>
        <li class="fz-18">
@@ -1160,18 +1202,25 @@
            ç­”案： 1.whether &nbsp; 2.if &nbsp; 3.whether &nbsp; 4.whether
            &nbsp; 5.if
          </p>
          <ul class="fl ju-ev" style="width: 50%">
            <li><button class="btn-border btn-w">提交</button></li>
            <li><button @click="setTestData" class="btn-border btn-w">保存</button></li>
            <li>
              <button
                @click="showQuestionAnswer = !showQuestionAnswer"
                class="parimary-btn"
              >
                æŸ¥çœ‹ç­”案
              </button>
            </li>
          </ul>
          <div class="w100 fl ju-cn">
            <ul class="fl ju-ev" style="width: 50%">
              <li><button class="btn-border btn-w">提交</button></li>
              <li>
                <button @click="setTestData" class="btn-border btn-w">
                  ä¿å­˜
                </button>
              </li>
              <li>
                <button
                style="min-height:24px"
                  @click="showQuestionAnswer = !showQuestionAnswer"
                  class="parimary-btn"
                >
                  æŸ¥çœ‹ç­”案
                </button>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="preface-bottom">
@@ -1179,7 +1228,7 @@
      </div>
    </div>
    <!-- 8 -->
    <div class="page-box">
    <div class="page-box" page="14">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="event-header-bc fl al-end"
@@ -1317,44 +1366,54 @@
          </p>
          <div class="bk-wh">
            <p class="dl-box">
              <span class="word-bc mr-20 dl-span" @click="saveWord($event,'exquisite')"
              <span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event, 'exquisite')"
                >exquisite</span
              >
              <span class="word-bc mr-20 dl-span" @click="saveWord($event,'ancient')"
              <span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event, 'ancient')"
                >ancient</span
              ><span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event,'incredible')"
                @click="saveWord($event, 'incredible')"
                >incredible</span
              ><span class="word-bc mr-20 dl-span" @click="saveWord($event,'unique')"
              ><span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event, 'unique')"
                >unique</span
              ><span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event,'traditional')"
                @click="saveWord($event, 'traditional')"
                >traditional</span
              ><span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event,'outstanding')"
                @click="saveWord($event, 'outstanding')"
                >outstanding</span
              ><span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event,'mouth-watering')"
                @click="saveWord($event, 'mouth-watering')"
                >mouth-watering</span
              ><span class="word-bc mr-20 dl-span" @click="saveWord($event,'diverse')"
              ><span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event, 'diverse')"
                >diverse</span
              ><span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event,'hospitable')"
                @click="saveWord($event, 'hospitable')"
                >hospitable</span
              ><span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event,'enjoyable')"
                @click="saveWord($event, 'enjoyable')"
                >enjoyable</span
              ><span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event,'memorable')"
                @click="saveWord($event, 'memorable')"
                >memorable</span
              ><span class="word-bc mr-20 dl-span" @click="saveWord($event,'charming')"
              ><span
                class="word-bc mr-20 dl-span"
                @click="saveWord($event, 'charming')"
                >charming</span
              >
            </p>
@@ -1388,7 +1447,7 @@
      </div>
    </div>
    <!-- 9 -->
    <div class="page-box">
    <div class="page-box" page="15">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class=""></li>
        <li class="fz-18">
@@ -1434,14 +1493,20 @@
                    </option>
                  </select>
                  <span class="icon-box">
                    <i
                      class="el-icon-check correct-icon"
                      v-if="dropdownData.one.isRight"
                    ></i>
                    <i
                      class="el-icon-close error-icon"
                      v-if="dropdownData.one.isRight == false"
                    ></i>
                    <svg v-if="dropdownData.one.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="dropdownData.one.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
              </div>
@@ -1474,14 +1539,20 @@
                    </option>
                  </select>
                  <span class="icon-box">
                    <i
                      class="el-icon-check correct-icon"
                      v-if="dropdownData.two.isRight"
                    ></i>
                    <i
                      class="el-icon-close error-icon"
                      v-if="dropdownData.two.isRight == false"
                    ></i>
                    <svg v-if="dropdownData.two.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="dropdownData.two.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
              </div>
@@ -1513,14 +1584,20 @@
                    </option>
                  </select>
                  <span class="icon-box">
                    <i
                      class="el-icon-check correct-icon"
                      v-if="dropdownData.three.isRight"
                    ></i>
                    <i
                      class="el-icon-close error-icon"
                      v-if="dropdownData.three.isRight == false"
                    ></i>
                    <svg v-if="dropdownData.three.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="dropdownData.three.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
              </div>
@@ -1553,14 +1630,20 @@
                    </option>
                  </select>
                  <span class="icon-box">
                    <i
                      class="el-icon-check correct-icon"
                      v-if="dropdownData.four.isRight"
                    ></i>
                    <i
                      class="el-icon-close error-icon"
                      v-if="dropdownData.four.isRight == false"
                    ></i>
                    <svg v-if="dropdownData.four.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="dropdownData.four.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
              </div>
@@ -1592,14 +1675,20 @@
                    </option>
                  </select>
                  <span class="icon-box">
                    <i
                      class="el-icon-check correct-icon"
                      v-if="dropdownData.five.isRight"
                    ></i>
                    <i
                      class="el-icon-close error-icon"
                      v-if="dropdownData.five.isRight == false"
                    ></i>
                    <svg v-if="dropdownData.five.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="dropdownData.five.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
              </div>
@@ -1632,14 +1721,20 @@
                    </option>
                  </select>
                  <span class="icon-box">
                    <i
                      class="el-icon-check correct-icon"
                      v-if="dropdownData.six.isRight"
                    ></i>
                    <i
                      class="el-icon-close error-icon"
                      v-if="dropdownData.six.isRight == false"
                    ></i>
                    <svg v-if="dropdownData.six.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="40" height="20">
                      <path
                        d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0"
                        fill="#1AFA29" p-id="18768"></path>
                    </svg>
                    <svg v-if="dropdownData.six.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="20" height="20">
                      <path
                        d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531"
                        fill="#d81e06" p-id="25746"></path>
                    </svg>
                  </span>
                </p>
              </div>
@@ -1652,18 +1747,22 @@
              </p>
            </div>
          </div>
          <div class="fl ju-ev" style="width: 70%">
            <button @click="setDropdownData" class="btn-border btn-w">
              ä¿å­˜
            </button>
            <button class="btn-border btn-w">提交</button>
            <button @click="handleDropdown('judge')" class="btn-border btn-w">判断正确</button>
            <button
              @click="showAnswerFive = !showAnswerFive"
              class="parimary-btn"
            >
              æŸ¥çœ‹ç­”案
            </button>
          <div class="w100 fl ju-cn">
            <div class="fl ju-ev" style="width: 60%">
              <button @click="setDropdownData" class="btn-border btn-w">
                ä¿å­˜
              </button>
              <button class="btn-border btn-w" @click="handleDropdown('judge')">
                æäº¤
              </button>
              <button
              style="min-height:24px"
                @click="showAnswerFive = !showAnswerFive"
                class="parimary-btn"
              >
                æŸ¥çœ‹ç­”案
              </button>
            </div>
          </div>
        </div>
      </div>
@@ -1886,8 +1985,8 @@
    this.getPath();
  },
  methods: {
    saveWord(event,word) {
      this.$emit("saveCharacters", event,word);
    saveWord(event, word) {
      this.$emit("saveCharacters", event, word);
    },
    setTestData() {
      localStorage.setItem("english-testOne", JSON.stringify(this.testData));
@@ -1999,11 +2098,12 @@
}
.btn-w {
  font-size: 14px;
  border-width:1px;
  border-width: 1px;
  min-width: 80px;
  background-color:#fff;
  min-height: 24px;
  background-color: #fff;
  &:hover {
    background-color:#0bab87 ;
    background-color: #0bab87;
    color: #fff;
  }
}

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

@@ -1,13 +1,19 @@
<template>
  <div class="chapter" num="0">
    <!-- 1 -->
    <!--  -->
    <div class="page-box" page="1">
      <p class="center">
        <img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
      </p>
    </div>
    <!-- 1 -->
    <div class="page-box" page="2">
      <p class="center">
        <img class="img-0" alt="" src="../../assets/images/SMY.jpg" />
      </p>
    </div>
    <!-- 2 -->
    <div class="page-box text-center" style="padding: 136px 0" page="2">
    <div class="page-box text-center" style="padding: 136px 0" page="3">
      <div class="box">
        <hr class="line" />
        <p class="tl fz-14"><b>图书在版编目（CIP）数据</b></p>
@@ -65,7 +71,7 @@
      </div>
    </div>
    <!-- 3 -->
    <div class="page-box " page="3">
    <div class="page-box " page="4">
      <div class="pd-20 ">
        <div class="preface w100 fl al-end ju-cn">
          <h1 id="a003" class="front preface-text">前言</h1>
@@ -93,7 +99,7 @@
      </div>
    </div>
    <!-- 4 -->
    <div class="page-box" page="4">
    <div class="page-box" page="5">
      <div class="mb-20" style="padding-right: 20px;">
        <div class="primary-bc fl al-end" style="height: 100px;padding-left: 40px;">
          <div class="preface-header-box y-bc">
@@ -137,7 +143,7 @@
      </div>
    </div>
    <!-- 5 -->
    <div class="page-box" page="5">
    <div class="page-box" page="6">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class="left primary-bc "></li>
        <li>

 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">
@@ -360,8 +360,6 @@
              v-if="testOne && questionData"
              ref="examinationOne"
              :cardList="questionData[10]"
              :chapter="1"
              :page="2"
            />
          </div>
          <h2 class="module_block" id="b001" style="margin: 0">
@@ -434,7 +432,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/childHealth/view/content/index.vue

@@ -556,6 +556,7 @@
                      testData[catalog][page],
                      this.config.activeBook
                    );
                    
                  } else {
                    const obj = {};
                    for (let key in testData[catalog][page]) {
@@ -567,6 +568,7 @@
                    }
                    this.questionData[page] = obj;
                  }
                  console.log('题目',this.questionData);
                }
              }
            }

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

@@ -1,559 +1,16 @@
<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 class="mt-100 w100">
        <!-- <h1>项目一　触摸屏组态介绍</h1> -->
        <img src="../../assets/images/project-one.png" alt="" class="w100" />
        <p class="quotation">
          å·¥ä¸šè‡ªåŠ¨åŒ–组态软件发展有两个方向，一方面是向大型平台软件方向发展，例如，直接从组态发展成大型的CIMS、ERP系统等；另一方面是向小型化方向发展，由通用组态软件演变为嵌入式组态软件，可使大量的工业控制设备或生产设备具有更多的自动化功能，促使国家工业自动化程度快速提升，因此嵌入式方向发展机会更多、市场容量更大。MCGS嵌入式软件和TPC系列触摸屏得到了主流工控硬件企业大力支持，技术解决方案深受用户的好评。
        </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 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">（1）认识嵌入式工业自动化组态软件；</p>
        <p class="content">（2）认识嵌入式触摸屏TPC。</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 class="content">
          äº†è§£åµŒå…¥å¼ç³»ç»Ÿå’Œå·¥ä¸šè‡ªåŠ¨åŒ–组态软件，熟悉嵌入式触摸屏TPC。
        </p>
        <p class="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/xunlian.png"
            alt=""
            class="w-35 mr-5"
          />
          <b>任务训练</b>
        </p>
        <p class="content">
          åµŒå…¥å¼ç»„态软件是一种用于嵌入式系统并带有网络功能的应用软件，嵌入式系统是指可嵌入至某一设备、产品并可连接至网络的带有智能（即微处理器）的设备。例如，在自动取款机（ATM）、办公设备、自动化产品、家用电器、平板电脑、个人数码助理乃至航空电子领域都有广泛应用。嵌入式组态软件分开发系统和运行系统。嵌入式组态软件的开发系统一般运行于具有良好人机界面的Windows操作系统上，而运行系统可基于多种嵌入式操作系统如Windows
          CE，Linux和DOS之上，甚至直接支持特定的CPU。嵌入式系统具有与PC几乎一样的功能，与PC的区别仅仅是将微型操作系统与应用软件嵌入在ROM、RAM与Flash存储器中，而不是存储于磁盘等载体中。
        </p>
        <p class="content">
          éšç€åŽPC时代的到来，在制造业领域更注重使用符合其特定需求并带有智能的嵌入式工业控制组态软件，而嵌入式组态软件特具的按功能剪裁的特性，以及其内嵌的实时多任务操作系统，可保证整个嵌入系统体积小、成本低、实时性高、可靠性高的同时，还方便不具备嵌入式软件开发经验的用户在极短的时间内，使用嵌入式组态软件快速开发完成一个嵌入式系统，并极大地加快了嵌入式产品进入市场的速度，而且使产品具有丰富的人机界面。北京昆仑通态公司MCGS组态软件，通过大力加强对工控硬件产品的驱动支持和提升软件内部功
        </p>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
        <li class="footer-num">1</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 2 -->
    <div class="page-box fl fl-cl ju-bt" page="12">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" class="w100" />
        </div>
        <div>
          <div class="padding-96 pr">
            <ul class="left-resource">
              <li class="fl al-cn ju-cn">
                <img src="../../assets/images/icon/sucai.png" />
                <span class="primary-color">素材</span>
              </li>
              <li class="fl fl-cl al-cn p-10">
                <div class="fl al-end">
                  <img
                    src="../../assets/images/icon/rar.png"
                    class="rar-icon"
                  />
                  <!-- <img
                    @click="download('工程样例')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  /> -->
                  <span class="svg-btn" @click="download('工程样例')">
                    <svg
                      t="1716796212460"
                      class="theme-color icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="1598"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="15"
                      height="15"
                    >
                      <path
                        d="M731.428571 341.333333h73.142858a73.142857 73.142857 0 0 1 73.142857 73.142857v414.476191a73.142857 73.142857 0 0 1-73.142857 73.142857H219.428571a73.142857 73.142857 0 0 1-73.142857-73.142857V414.47619a73.142857 73.142857 0 0 1 73.142857-73.142857h73.142858v73.142857H219.428571v414.476191h585.142858V414.47619h-73.142858v-73.142857z m-176.90819-242.590476l0.048762 397.092572 84.577524-84.601905 51.687619 51.712-172.373334 172.397714-172.397714-172.373333 51.712-51.736381 83.626667 83.626666V98.742857h73.142857z"
                        p-id="1599"
                      ></path>
                    </svg>
                  </span>
                </div>
                <div>
                  <span class="rar-text">工程样例.rar</span>
                </div>
              </li>
              <li class="fl fl-cl al-cn p-10">
                <div class="fl al-end">
                  <img
                    src="../../assets/images/icon/rar.png"
                    class="rar-icon"
                  />
                  <!-- <img
                    @click="download('管控一体样例')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  /> -->
                  <span class="svg-btn" @click="download('管控一体样例')">
                    <svg
                      t="1716796212460"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="1598"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="15"
                      height="15"
                    >
                      <path
                        d="M731.428571 341.333333h73.142858a73.142857 73.142857 0 0 1 73.142857 73.142857v414.476191a73.142857 73.142857 0 0 1-73.142857 73.142857H219.428571a73.142857 73.142857 0 0 1-73.142857-73.142857V414.47619a73.142857 73.142857 0 0 1 73.142857-73.142857h73.142858v73.142857H219.428571v414.476191h585.142858V414.47619h-73.142858v-73.142857z m-176.90819-242.590476l0.048762 397.092572 84.577524-84.601905 51.687619 51.712-172.373334 172.397714-172.397714-172.373333 51.712-51.736381 83.626667 83.626666V98.742857h73.142857z"
                        p-id="1599"
                      ></path>
                    </svg>
                  </span>
                </div>
                <div>
                  <span class="rar-text">管控一体化样例.rar</span>
                </div>
              </li>
              <li class="fl fl-cl al-cn p-10">
                <div class="fl al-end">
                  <img
                    src="../../assets/images/icon/rar.png"
                    class="rar-icon"
                  />
                  <!-- <img
                    @click="download('嵌_计划曲线样例')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  /> -->
                  <span class="svg-btn" @click="download('嵌_计划曲线样例')">
                    <svg
                      t="1716796212460"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="1598"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="15"
                      height="15"
                    >
                      <path
                        d="M731.428571 341.333333h73.142858a73.142857 73.142857 0 0 1 73.142857 73.142857v414.476191a73.142857 73.142857 0 0 1-73.142857 73.142857H219.428571a73.142857 73.142857 0 0 1-73.142857-73.142857V414.47619a73.142857 73.142857 0 0 1 73.142857-73.142857h73.142858v73.142857H219.428571v414.476191h585.142858V414.47619h-73.142858v-73.142857z m-176.90819-242.590476l0.048762 397.092572 84.577524-84.601905 51.687619 51.712-172.373334 172.397714-172.397714-172.373333 51.712-51.736381 83.626667 83.626666V98.742857h73.142857z"
                        p-id="1599"
                      ></path>
                    </svg>
                  </span>
                </div>
                <div>
                  <span class="rar-text">嵌_计划曲线样例.rar</span>
                </div>
              </li>
            </ul>
            <p class="content t0">
              èƒ½ï¼Œæœ‰æ•ˆå¸®åŠ©ç”¨æˆ·å»ºé€ ä»ŽåµŒå…¥å¼è®¾å¤‡ã€çŽ°åœºç›‘控工作站到企业生产监控信息网在内的完整的自动化解决方案。图1-1～图1-4所示为嵌入式组态软件系统应用于各个行业的情况。
            </p>
            <div class="qrbodyPic">
              <div class="openImgBox">
                <img src="../../assets/images/img00014001.jpg" alt="" class="w100">
              </div>
              <p class="imgdescript">图1-1　嵌入式组态软件系统应用于电力行业</p>
            </div>
            <div class="qrbodyPic">
              <div class="openImgBox">
                <img src="../../assets/images/img00014002.jpg" alt="" class="w100">
              </div>
              <p class="imgdescript">图1-2　嵌入式组态软件系统应用于铁路行业</p>
            </div>
            <div class="qrbodyPic">
              <div class="openImgBox">
                <img src="../../assets/images/img00014003.jpg" alt="" class="w100">
              </div>
              <p class="imgdescript">图1-3　嵌入式组态软件系统应用于橡胶行业</p>
            </div>
            <div class="qrbodyPic">
              <div class="openImgBox">
                <img src="../../assets/images/img00014004.jpg" alt="" class="w100">
              </div>
              <p class="imgdescript">图1-4　嵌入式组态软件系统应用于纺织行业</p>
            </div>
          </div>
        </div>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
        <li class="footer-num">2</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 3 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-86" page="13">
      <div>
        <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20">
          <img src="../../assets/images/header-one.png" alt="" />
        </div>
        <p class="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/arrow-one.png"
            alt=""
            class="w-45 mr-5"
          />
          <b>认识MCGS嵌入版组态软件</b>
        </p>
        <p class="content">
          MCGS嵌入版组态软件专门应用于TPC一体机（触摸屏），主要完成现场数据的采集与监测、前端数据的处理与控制与其他相关的输入输出硬件设备结合，可以快速、方便地开发各种用于现场采集、数据处理和控制的自动化系统。例如，可以灵活组态各种智能仪表、数据采集模块，无纸记录仪、无人值守的现场采集站、人机界面等专用设备。
        </p>
        <p class="content">MCGS嵌入版组态软件的主要功能：</p>
        <p class="content">
          ï¼ˆ1）简单灵活的可视化操作界面：采用全中文、可视化的开发界面，符合中国人的使用习惯和要求。
        </p>
        <p class="content">
          ï¼ˆ2）实时性强、有良好的并行处理性能：真正的32位系统，对任务进行分时并行处理。
        </p>
        <p class="content">
          ï¼ˆ3）丰富、生动的多媒体画面：以图像、图符、报表、曲线等多种形式，提供操作和控制信息。
        </p>
        <p class="content">
          ï¼ˆ4）完善的安全机制：提供了良好的安全机制，可以为多个不同级别用户设定不同的操作权限。
        </p>
        <p class="content">（5）强大的网络功能：具有强大的网络通信功能。</p>
        <p class="content">
          ï¼ˆ6）多样化的报警功能：提供多种不同的报警方式，方便用户进行报警设置。
        </p>
        <p class="content">
          ï¼ˆ7）支持多种硬件设备：PLC、变频器、伺服驱动器、仪器仪表等。
        </p>
        <p class="content">
          æ€»ä¹‹ï¼ŒMCGS嵌入版组态软件具有与通用版组态软件一样强大的功能，并且操作简单，易学易用。
        </p>
        <p class="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/arrow-two.png"
            alt=""
            class="w-45 mr-5"
          />
          <b>MCGS嵌入版组态软件组成</b>
        </p>
        <p class="content">
          MCGS嵌入版组态软件生成的用户应用系统，由主控窗口、设备窗口、用户窗口、实时数据库和运行策略五部分构成，如图1-5所示。
        </p>
        <div class="qrbodyPic">
          <div class="openImgBox">
            <img src="../../assets/images/img00015001.jpg" alt="" class="w100">
          </div>
          <p class="imgdescript">图1-5　用户应用系统组成</p>
        </div>
        <p class="content">
          ï¼ˆ1）主控窗口构造了应用系统的主框架，确定了工业控制中工程作业的总体轮廓，以及运行流程、特性参数和启动特性等内容，是应用系统的主框架。
        </p>
        <p class="content">
          ï¼ˆ2）设备窗口是MCGS嵌入版系统与外围设备联系的媒介。设备窗口专门用来放置不同
        </p>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
        <li class="footer-num">3</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 4 -->
    <div class="page-box fl fl-cl ju-bt" page="14">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
        </div>
        <div class="padding-96">
          <p class="content t0">
            ç±»åž‹å’ŒåŠŸèƒ½çš„设备构件，实现对外围设备的操作和控制。设备窗口通过设备构件把外围设备的数据采集进来，送入实时数据库，或把实时数据库中的数据输出到外围设备。
      <div v-if="showPageList.indexOf(11) > -1">
        <div class="mt-100 w100">
          <!-- <h1>项目一　触摸屏组态介绍</h1> -->
          <img src="../../assets/images/project-one.png" alt="" class="w100" />
          <p class="quotation">
            å·¥ä¸šè‡ªåŠ¨åŒ–组态软件发展有两个方向，一方面是向大型平台软件方向发展，例如，直接从组态发展成大型的CIMS、ERP系统等；另一方面是向小型化方向发展，由通用组态软件演变为嵌入式组态软件，可使大量的工业控制设备或生产设备具有更多的自动化功能，促使国家工业自动化程度快速提升，因此嵌入式方向发展机会更多、市场容量更大。MCGS嵌入式软件和TPC系列触摸屏得到了主流工控硬件企业大力支持，技术解决方案深受用户的好评。
          </p>
          <p class="content">
            ï¼ˆ3）用户窗口实现了数据和流程的“可视化”。用户窗口中可以放置三种不同类型的图形对象：图元、图符和动画构件。通过在用户窗口内放置不同的图形对象，用户可以构造各种复杂的图形界面，用不同的方式实现数据和流程的“可视化”。
          </p>
          <p class="content">
            ï¼ˆ4）实时数据库是MCGS嵌入版系统的核心。实时数据库相当于一个数据处理中心，同时也起到公共数据交换区的作用。从外围设备采集来的实时数据送入实时数据库，系统其他部分操作的数据也来自于实时数据库。
          </p>
          <p class="content">
            ï¼ˆ5）运行策略是对系统运行流程实现有效控制的手段。运行策略本身是系统提供的一个框架，其里面放置由策略条件构件和策略构件组成的“策略行”，通过对运行策略的定义，使系统能够按照设定的顺序和条件操作任务，实现对外围设备工作过程的精确控制。
          </p>
          <p class="quotation fl al-cn t0 primary-color">
            <img
              src="../../assets/images/icon/arrow-three.png"
              alt=""
              class="w-45 mr-5"
            />
            <b>认识TPC7062K触摸屏</b>
          </p>
          <p class="content">
            åµŒå…¥å¼ç»„态软件的组态环境和模拟运行环境是一套完整的工具软件，可以在PC上运行。
          </p>
          <p class="content">
            åµŒå…¥å¼ç»„态软件的运行环境是一个独立的运行系统，它按照组态工程中用户指定的方式进行各种处理，完成用户组态设计的目标和功能。一旦组态工作完成，并且将组态好的工程下载到嵌入式一体化触摸屏（例如TPC7062K）的运行环境中，组态工程就可以离开组态环境而独立运行。TPC是北京昆仑通态自动化软件科技有限公司自主生产的嵌入式一体化触摸屏系列型号，其中TPC7062K具有代表性。
          </p>
          <p class="content">（1）TPC7062K优势：</p>
          <p class="content">
            â‘ é«˜æ¸…：分辨率为800×480像素，用户可体验精致、自然、通透的高清盛宴；
          </p>
          <p class="content">
            â‘¡çœŸå½©ï¼š65 535色数字真彩，丰富的图形库，用户可享受顶级震撼画质；
          </p>
          <p class="content">
            â‘¢å¯é ï¼šæŠ—干扰性能达到工业III级标准，采用LED背光永不黑屏；
          </p>
          <p class="content">
            â‘£é…ç½®ï¼šARM9内核、400MHz主频、64MB内存、128MB存储空间；
          </p>
          <p class="content">
            â‘¤è½¯ä»¶ï¼šMCGS全功能组态软件，支持闪存盘（俗称U盘）备份恢复，功能更强大；
          </p>
          <p class="content">
            â‘¥çŽ¯ä¿ï¼šä½ŽåŠŸè€—，整机功耗仅6W，发展绿色工业，倡导能源节约；
          </p>
          <p class="content">
            â‘¦æ—¶å°šï¼š7in（1in=2.54cm）宽屏显示、超轻、超薄机身设计，引领简约时尚；
          </p>
          <p class="content">
            â‘§æœåŠ¡ï¼šç«‹è¶³ä¸­å›½ï¼Œå…¨æ–¹ä½ã€æœ¬åœŸåŒ–服务，星级标准，用户至上。
          </p>
          <p class="content">
            ï¼ˆ2）TPC7062K外观。TPC7062K正视图如图1-6所示，TPC7062K背视图如图1-7所示。
          </p>
          <p class="content">（3）TPC7062K供电接线。</p>
          <p class="quotation primary-boder" style="padding: 4px 0">
            <img
              class="s-pic"
              src="../../assets/images/img00016001.jpg"
              style="width: 50px"
            />
            ä»…限DC 24V！建议电源的输出功率为15W。
          </p>
        </div>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
        <li class="footer-num">4</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 5 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96" page="15">
      <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 class="">
            <!-- <el-image
              :src="imgSix"
              active="true"
              :preview-src-list="[imgSix]"
            /> -->
            <div class="openImgBox">
            <img src="../../assets/images/img00017001.jpg" alt="" class="w100">
          </div>
            <p class="imgdescript">图1-6　正视图</p>
          </div>
          <div class="">
            <el-image :src="imgSeven" :preview-src-list="[imgSeven]" />
            <p class="imgdescript">图1-7　背视图</p>
          </div>
        </div>
        <div class="fl al-cn">
          <div class="left">
            <p class="content">接线步骤：</p>
            <p class="content">
              â‘ å°†å¼€å…³ç”µæº24V+端线插入TPC电源插头接线1端中，如图1-8所示。
            </p>
            <p class="content">②将开关电源24V-端线插入TPC电源插头接线2端中。</p>
            <p class="content">③使用一字头旋具将TPC电源插头螺钉锁紧。</p>
          </div>
          <div class="right">
            <el-image :src="imgEnight" :preview-src-list="[imgEnight]" />
            <p class="imgdescript">图1-8　电源插头示意图及引脚定义</p>
          </div>
        </div>

        <p class="content">
          ï¼ˆ4）TPC7062K外部接口。接口说明如图1-9所示，串口引脚定义如图1-10所示。
        </p>
        <div>
          <el-image :src="imgNine" :preview-src-list="[imgNine]" class="w100" />
          <p class="imgdescript">图1-9　接口说明</p>
        </div>
        <div>
          <el-image :src="imgTen" :preview-src-list="[imgTen]" />
          <p class="imgdescript">图1-10　串口引脚定义</p>
        </div>
        <p class="content">
          ï¼ˆ5）TPC7062K启动。使用24V直流电源给TPC供电，开机启动后屏幕出现“正在启动”提示进度条，此时不需任何操作自动进入工程运行界面，如图1-11所示。
        </p>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
        <li class="footer-num">5</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 6 -->
    <div class="page-box fl fl-cl ju-bt" page="16">
      <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]" />
            <p class="imgdescript">图1-11　TPC启动过程</p>
          </div>
          <p class="quotation fl al-cn t0 primary-color">
            <img
              src="../../assets/images/icon/arrow-four.png"
              alt=""
              class="w-45 mr-5"
            />
            <b>TPC7062K与三款主流PLC通信接线</b>
          </p>
          <p class="content">
            TPC7062K与三款主流PLC通信接线如图1-12～图1-14所示。
          </p>
          <div style="width: 90%" class="m0-auto">
            <el-image :src="imgTwelve" :preview-src-list="[imgTwelve]" />
            <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]" />
            <p class="imgdescript">图1-13　TPC7062K与欧姆龙PLC通信接线</p>
          </div>
        </div>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
        <li class="footer-num">6</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 7 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96" page="17">
      <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]" />
          <p class="imgdescript">图1-14　TPC7062K与三菱FX系列PLC通信接线</p>
        </div>
        <p class="content">评分表见表1-1。</p>
        <p class="table-title fl ju-cn al-cn">
          <span>表1-1　评分表</span>
          <!-- <i class="el-icon-share cu-pr"></i> -->
          <svg
            t="1716802335492"
            class="share-box icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1782"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="18"
            height="18"
          >
            <path
              d="M354.986667 219.428571v73.142858H195.047619v536.380952h585.142857V548.571429h73.142857V828.952381a73.142857 73.142857 0 0 1-73.142857 73.142857H195.047619a73.142857 73.142857 0 0 1-73.142857-73.142857V292.571429a73.142857 73.142857 0 0 1 73.142857-73.142858h159.939048z m383.829333-100.473904l172.397714 172.373333-181.00419 181.028571-51.736381-51.712L757.784381 341.333333H670.47619c-139.068952 0-252.245333 110.884571-255.902476 249.07581L414.47619 597.333333v97.52381h-73.142857v-97.52381C341.333333 415.548952 488.69181 268.190476 670.47619 268.190476h114.127239l-97.499429-97.523809 51.712-51.712z"
              p-id="1783"
            ></path>
          </svg>
        </p>
        <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">
              å·¥ ä½œ å½¢ å¼ <br />
              <input type="checkbox" name="xingshi" value="prople" /> ä¸ªäºº
              <input type="checkbox" name="xingshi" value="fengong" /> å°ç»„分工
              <input type="checkbox" name="xingshi" value="xiaozu" /> å°ç»„
            </td>
            <td colspan="2" class="table-cn">
              å·¥ä½œæ—¶é—´/min <br />
              <input style="width: 80px" class="input-border table-bc" />
            </td>
          </tr>
          <tr class="table-bc">
            <td class="table-cn">任务</td>
            <td class="table-cn">训练内容</td>
            <td class="table-cn">训练要求</td>
            <td class="table-cn">学生自评</td>
            <td class="table-cn">教师评分</td>
          </tr>
          <tr>
            <td rowspan="4">
              <div style="width: 50px">认识嵌入式组态和触摸屏</div>
            </td>
            <td>嵌入式组态和触摸屏，20分</td>
            <td>
              <div>
                æ”¶é›†å„类触摸屏功能及性能信息，并进行比较;了解嵌人式组态组成，了解TPC系列产品性能、外观与接线
              </div>
            </td>
            <td>
              <textarea class="textarea-table-td"></textarea>
            </td>
            <td>
              <textarea class="textarea-table-td"></textarea>
            </td>
          </tr>
          <tr>
            <td>通信连接，30分</td>
            <td>
              <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>
          </tr>
          <tr>
            <td>测试与功能，30分</td>
            <td>TPC与PC通信是否正常</td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
          </tr>
          <tr>
            <td>职业素养与安全意识，20 åˆ†</td>
            <td>
              å·¥å…·ã€å™¨æã€å¯¼çº¿ç­‰å¤„理操作符合职业要求:遵守纪律，保持工位整洁
            </td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
          </tr>
        </table>
        <div class="tl-rg mt-20">
          å­¦ç”Ÿ:<input style="width: 40px" class="input-border" /> æ•™å¸ˆ:<input
            style="width: 40px"
            class="input-border"
          />日期:<input style="width: 82px" class="input-border" />
        </div>
        <div class="pr">
          <h2 class="secondTitle primary-color" id="sigil_toc_id_14">
            ä»»åŠ¡äºŒã€€MCGS嵌入版组态软件安装
          <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>
@@ -565,7 +22,8 @@
            />
            <b>任务目标</b>
          </p>
          <p class="content">掌握MCGS嵌入版组态软件V6.8安装方法。</p>
          <p class="content">（1）认识嵌入式工业自动化组态软件；</p>
          <p class="content">（2）认识嵌入式触摸屏TPC。</p>
          <p class="quotation fl al-cn t0 primary-color">
            <img
              src="../../assets/images/icon/miaoshu.png"
@@ -574,7 +32,9 @@
            />
            <b>任务描述</b>
          </p>
          <p class="content">学习嵌入式组态软件V6.8的安装方法和步骤。</p>
          <p class="content">
            äº†è§£åµŒå…¥å¼ç³»ç»Ÿå’Œå·¥ä¸šè‡ªåŠ¨åŒ–组态软件，熟悉嵌入式触摸屏TPC。
          </p>
          <p class="quotation fl al-cn t0 primary-color">
            <img
              src="../../assets/images/icon/xunlian.png"
@@ -584,1084 +44,1785 @@
            <b>任务训练</b>
          </p>
          <p class="content">
            åœ¨æ˜†ä»‘通态官网上下载MCGS_嵌入版完整安装包，解压缩后，具体安装步骤如下：
            åµŒå…¥å¼ç»„态软件是一种用于嵌入式系统并带有网络功能的应用软件，嵌入式系统是指可嵌入至某一设备、产品并可连接至网络的带有智能（即微处理器）的设备。例如，在自动取款机（ATM）、办公设备、自动化产品、家用电器、平板电脑、个人数码助理乃至航空电子领域都有广泛应用。嵌入式组态软件分开发系统和运行系统。嵌入式组态软件的开发系统一般运行于具有良好人机界面的Windows操作系统上，而运行系统可基于多种嵌入式操作系统如Windows
            CE，Linux和DOS之上，甚至直接支持特定的CPU。嵌入式系统具有与PC几乎一样的功能，与PC的区别仅仅是将微型操作系统与应用软件嵌入在ROM、RAM与Flash存储器中，而不是存储于磁盘等载体中。
          </p>
          <ul class="right-resource">
            <li class="fl al-cn ju-cn border-so p-10">
              <img
                src="../../assets/images/icon/anzhuang.png"
                class="anzhuang-icon"
              />
              <span class="primary-color">安装包</span>
            </li>
            <li class="fl fl-cl al-cn p-10">
              <div class="fl al-end">
                <img src="../../assets/images/icon/rar.png" class="rar-icon" />
                <!-- <img
                  @click="
                    downloadRar('McgsPro 3.3.6.6354 SP1.3 ç»„态软件安装包')
                  "
                  src="../../assets/images/icon/download.png"
                  class="downlod-icon cu-pr"
                /> -->
                <span
                  class="svg-btn"
                  @click="
                    downloadRar('McgsPro 3.3.6.6354 SP1.3 ç»„态软件安装包')
                  "
                >
                  <svg
                    t="1716796212460"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="1598"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="15"
                    height="15"
                  >
                    <path
                      d="M731.428571 341.333333h73.142858a73.142857 73.142857 0 0 1 73.142857 73.142857v414.476191a73.142857 73.142857 0 0 1-73.142857 73.142857H219.428571a73.142857 73.142857 0 0 1-73.142857-73.142857V414.47619a73.142857 73.142857 0 0 1 73.142857-73.142857h73.142858v73.142857H219.428571v414.476191h585.142858V414.47619h-73.142858v-73.142857z m-176.90819-242.590476l0.048762 397.092572 84.577524-84.601905 51.687619 51.712-172.373334 172.397714-172.397714-172.373333 51.712-51.736381 83.626667 83.626666V98.742857h73.142857z"
                      p-id="1599"
                    ></path>
                  </svg>
                </span>
              </div>
              <div>
                <span class="rar-text"
                  >MCGS嵌入版<br />
                  å®‰è£…文件.rar</span
                >
              </div>
            </li>
          </ul>
          <p class="content">
            éšç€åŽPC时代的到来，在制造业领域更注重使用符合其特定需求并带有智能的嵌入式工业控制组态软件，而嵌入式组态软件特具的按功能剪裁的特性，以及其内嵌的实时多任务操作系统，可保证整个嵌入系统体积小、成本低、实时性高、可靠性高的同时，还方便不具备嵌入式软件开发经验的用户在极短的时间内，使用嵌入式组态软件快速开发完成一个嵌入式系统，并极大地加快了嵌入式产品进入市场的速度，而且使产品具有丰富的人机界面。北京昆仑通态公司MCGS组态软件，通过大力加强对工控硬件产品的驱动支持和提升软件内部功
          </p>
        </div>

        <video
          v-if="videoOne"
          :src="config.resourceCtx + '/配套学习资源/p7/MCGS安装视频带音频.mp4'"
          webkit-playsinline="true"
          x-webkit-airplay="true"
          playsinline="true"
          x5-video-orientation="h5"
          x5-video-player-fullscreen="true"
          x5-playsinline=""
          controls
          class="w100 mt-20"
        ></video>
        <p class="imgdescript">视频：MCGS安装视频</p>
        <p class="content">
          ï¼ˆ1）运行Setup.exe文件，MCGS安装程序窗口如图1-15所示。
        </p>
        <p class="content">
          åœ¨å®‰è£…程序窗口中单击“安装组态软件”按钮，弹出安装程序窗口。单击“下一步”按钮，启动安装程序，如图1-16所示。
        </p>
        <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
          <li class="footer-num">1</li>
          <li class="footer-box"></li>
        </ul>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
        <li class="footer-num">7</li>
        <li class="footer-box"></li>
      </ul>
    </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" />
          </div>
          <div>
            <div class="padding-96 pr">
              <ul class="left-resource">
                <li class="fl al-cn ju-cn">
                  <img src="../../assets/images/icon/sucai.png" />
                  <span class="primary-color">素材</span>
                </li>
                <li class="fl fl-cl al-cn p-10">
                  <div class="fl al-end">
                    <img
                      src="../../assets/images/icon/rar.png"
                      class="rar-icon"
                    />
                    <!-- <img
                      @click="download('工程样例')"
                      src="../../assets/images/icon/download.png"
                      class="downlod-icon cu-pr"
                    /> -->
                    <span class="svg-btn" @click="download('工程样例')">
                      <svg
                        t="1716796212460"
                        class="theme-color icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="1598"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="15"
                        height="15"
                      >
                        <path
                          d="M731.428571 341.333333h73.142858a73.142857 73.142857 0 0 1 73.142857 73.142857v414.476191a73.142857 73.142857 0 0 1-73.142857 73.142857H219.428571a73.142857 73.142857 0 0 1-73.142857-73.142857V414.47619a73.142857 73.142857 0 0 1 73.142857-73.142857h73.142858v73.142857H219.428571v414.476191h585.142858V414.47619h-73.142858v-73.142857z m-176.90819-242.590476l0.048762 397.092572 84.577524-84.601905 51.687619 51.712-172.373334 172.397714-172.397714-172.373333 51.712-51.736381 83.626667 83.626666V98.742857h73.142857z"
                          p-id="1599"
                        ></path>
                      </svg>
                    </span>
                  </div>
                  <div>
                    <span class="rar-text">工程样例.rar</span>
                  </div>
                </li>
                <li class="fl fl-cl al-cn p-10">
                  <div class="fl al-end">
                    <img
                      src="../../assets/images/icon/rar.png"
                      class="rar-icon"
                    />
                    <!-- <img
                      @click="download('管控一体样例')"
                      src="../../assets/images/icon/download.png"
                      class="downlod-icon cu-pr"
                    /> -->
                    <span class="svg-btn" @click="download('管控一体样例')">
                      <svg
                        t="1716796212460"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="1598"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="15"
                        height="15"
                      >
                        <path
                          d="M731.428571 341.333333h73.142858a73.142857 73.142857 0 0 1 73.142857 73.142857v414.476191a73.142857 73.142857 0 0 1-73.142857 73.142857H219.428571a73.142857 73.142857 0 0 1-73.142857-73.142857V414.47619a73.142857 73.142857 0 0 1 73.142857-73.142857h73.142858v73.142857H219.428571v414.476191h585.142858V414.47619h-73.142858v-73.142857z m-176.90819-242.590476l0.048762 397.092572 84.577524-84.601905 51.687619 51.712-172.373334 172.397714-172.397714-172.373333 51.712-51.736381 83.626667 83.626666V98.742857h73.142857z"
                          p-id="1599"
                        ></path>
                      </svg>
                    </span>
                  </div>
                  <div>
                    <span class="rar-text">管控一体化样例.rar</span>
                  </div>
                </li>
                <li class="fl fl-cl al-cn p-10">
                  <div class="fl al-end">
                    <img
                      src="../../assets/images/icon/rar.png"
                      class="rar-icon"
                    />
                    <!-- <img
                      @click="download('嵌_计划曲线样例')"
                      src="../../assets/images/icon/download.png"
                      class="downlod-icon cu-pr"
                    /> -->
                    <span class="svg-btn" @click="download('嵌_计划曲线样例')">
                      <svg
                        t="1716796212460"
                        class="icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="1598"
                        xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="15"
                        height="15"
                      >
                        <path
                          d="M731.428571 341.333333h73.142858a73.142857 73.142857 0 0 1 73.142857 73.142857v414.476191a73.142857 73.142857 0 0 1-73.142857 73.142857H219.428571a73.142857 73.142857 0 0 1-73.142857-73.142857V414.47619a73.142857 73.142857 0 0 1 73.142857-73.142857h73.142858v73.142857H219.428571v414.476191h585.142858V414.47619h-73.142858v-73.142857z m-176.90819-242.590476l0.048762 397.092572 84.577524-84.601905 51.687619 51.712-172.373334 172.397714-172.397714-172.373333 51.712-51.736381 83.626667 83.626666V98.742857h73.142857z"
                          p-id="1599"
                        ></path>
                      </svg>
                    </span>
                  </div>
                  <div>
                    <span class="rar-text">嵌_计划曲线样例.rar</span>
                  </div>
                </li>
              </ul>
              <p class="content t0">
                èƒ½ï¼Œæœ‰æ•ˆå¸®åŠ©ç”¨æˆ·å»ºé€ ä»ŽåµŒå…¥å¼è®¾å¤‡ã€çŽ°åœºç›‘控工作站到企业生产监控信息网在内的完整的自动化解决方案。图1-1～图1-4所示为嵌入式组态软件系统应用于各个行业的情况。
              </p>
              <div class="qrbodyPic">
                <div class="openImgBox">
                  <img src="../../assets/images/img00014001.jpg" alt="" class="w100">
                </div>
                <p class="imgdescript">图1-1　嵌入式组态软件系统应用于电力行业</p>
              </div>
              <div class="qrbodyPic">
                <div class="openImgBox">
                  <img src="../../assets/images/img00014002.jpg" alt="" class="w100">
                </div>
                <p class="imgdescript">图1-2　嵌入式组态软件系统应用于铁路行业</p>
              </div>
              <div class="qrbodyPic">
                <div class="openImgBox">
                  <img src="../../assets/images/img00014003.jpg" alt="" class="w100">
                </div>
                <p class="imgdescript">图1-3　嵌入式组态软件系统应用于橡胶行业</p>
              </div>
              <div class="qrbodyPic">
                <div class="openImgBox">
                  <img src="../../assets/images/img00014004.jpg" alt="" class="w100">
                </div>
                <p class="imgdescript">图1-4　嵌入式组态软件系统应用于纺织行业</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
          <li class="footer-num">2</li>
          <li class="footer-box"></li>
        </ul>
    </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="" />
          </div>
          <p class="quotation fl al-cn t0 primary-color">
            <img
              src="../../assets/images/icon/arrow-one.png"
              alt=""
              class="w-45 mr-5"
            />
            <b>认识MCGS嵌入版组态软件</b>
          </p>
          <p class="content">
            MCGS嵌入版组态软件专门应用于TPC一体机（触摸屏），主要完成现场数据的采集与监测、前端数据的处理与控制与其他相关的输入输出硬件设备结合，可以快速、方便地开发各种用于现场采集、数据处理和控制的自动化系统。例如，可以灵活组态各种智能仪表、数据采集模块，无纸记录仪、无人值守的现场采集站、人机界面等专用设备。
          </p>
          <p class="content">MCGS嵌入版组态软件的主要功能：</p>
          <p class="content">
            ï¼ˆ1）简单灵活的可视化操作界面：采用全中文、可视化的开发界面，符合中国人的使用习惯和要求。
          </p>
          <p class="content">
            ï¼ˆ2）实时性强、有良好的并行处理性能：真正的32位系统，对任务进行分时并行处理。
          </p>
          <p class="content">
            ï¼ˆ3）丰富、生动的多媒体画面：以图像、图符、报表、曲线等多种形式，提供操作和控制信息。
          </p>
          <p class="content">
            ï¼ˆ4）完善的安全机制：提供了良好的安全机制，可以为多个不同级别用户设定不同的操作权限。
          </p>
          <p class="content">（5）强大的网络功能：具有强大的网络通信功能。</p>
          <p class="content">
            ï¼ˆ6）多样化的报警功能：提供多种不同的报警方式，方便用户进行报警设置。
          </p>
          <p class="content">
            ï¼ˆ7）支持多种硬件设备：PLC、变频器、伺服驱动器、仪器仪表等。
          </p>
          <p class="content">
            æ€»ä¹‹ï¼ŒMCGS嵌入版组态软件具有与通用版组态软件一样强大的功能，并且操作简单，易学易用。
          </p>
          <p class="quotation fl al-cn t0 primary-color">
            <img
              src="../../assets/images/icon/arrow-two.png"
              alt=""
              class="w-45 mr-5"
            />
            <b>MCGS嵌入版组态软件组成</b>
          </p>
          <p class="content">
            MCGS嵌入版组态软件生成的用户应用系统，由主控窗口、设备窗口、用户窗口、实时数据库和运行策略五部分构成，如图1-5所示。
          </p>
          <div class="qrbodyPic">
            <div class="openImgBox">
              <img src="../../assets/images/img00015001.jpg" alt="" class="w100">
            </div>
            <p class="imgdescript">图1-5　用户应用系统组成</p>
          </div>
          <p class="content">
            ï¼ˆ1）主控窗口构造了应用系统的主框架，确定了工业控制中工程作业的总体轮廓，以及运行流程、特性参数和启动特性等内容，是应用系统的主框架。
          </p>
          <p class="content">
            ï¼ˆ2）设备窗口是MCGS嵌入版系统与外围设备联系的媒介。设备窗口专门用来放置不同
          </p>
        </div>
        <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
          <li class="footer-num">3</li>
          <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" />
          </div>
          <div class="padding-96">
            <p class="content t0">
              ç±»åž‹å’ŒåŠŸèƒ½çš„设备构件，实现对外围设备的操作和控制。设备窗口通过设备构件把外围设备的数据采集进来，送入实时数据库，或把实时数据库中的数据输出到外围设备。
            </p>
            <p class="content">
              ï¼ˆ3）用户窗口实现了数据和流程的“可视化”。用户窗口中可以放置三种不同类型的图形对象：图元、图符和动画构件。通过在用户窗口内放置不同的图形对象，用户可以构造各种复杂的图形界面，用不同的方式实现数据和流程的“可视化”。
            </p>
            <p class="content">
              ï¼ˆ4）实时数据库是MCGS嵌入版系统的核心。实时数据库相当于一个数据处理中心，同时也起到公共数据交换区的作用。从外围设备采集来的实时数据送入实时数据库，系统其他部分操作的数据也来自于实时数据库。
            </p>
            <p class="content">
              ï¼ˆ5）运行策略是对系统运行流程实现有效控制的手段。运行策略本身是系统提供的一个框架，其里面放置由策略条件构件和策略构件组成的“策略行”，通过对运行策略的定义，使系统能够按照设定的顺序和条件操作任务，实现对外围设备工作过程的精确控制。
            </p>
            <p class="quotation fl al-cn t0 primary-color">
              <img
                src="../../assets/images/icon/arrow-three.png"
                alt=""
                class="w-45 mr-5"
              />
              <b>认识TPC7062K触摸屏</b>
            </p>
            <p class="content">
              åµŒå…¥å¼ç»„态软件的组态环境和模拟运行环境是一套完整的工具软件，可以在PC上运行。
            </p>
            <p class="content">
              åµŒå…¥å¼ç»„态软件的运行环境是一个独立的运行系统，它按照组态工程中用户指定的方式进行各种处理，完成用户组态设计的目标和功能。一旦组态工作完成，并且将组态好的工程下载到嵌入式一体化触摸屏（例如TPC7062K）的运行环境中，组态工程就可以离开组态环境而独立运行。TPC是北京昆仑通态自动化软件科技有限公司自主生产的嵌入式一体化触摸屏系列型号，其中TPC7062K具有代表性。
            </p>
            <p class="content">（1）TPC7062K优势：</p>
            <p class="content">
              â‘ é«˜æ¸…：分辨率为800×480像素，用户可体验精致、自然、通透的高清盛宴；
            </p>
            <p class="content">
              â‘¡çœŸå½©ï¼š65 535色数字真彩，丰富的图形库，用户可享受顶级震撼画质；
            </p>
            <p class="content">
              â‘¢å¯é ï¼šæŠ—干扰性能达到工业III级标准，采用LED背光永不黑屏；
            </p>
            <p class="content">
              â‘£é…ç½®ï¼šARM9内核、400MHz主频、64MB内存、128MB存储空间；
            </p>
            <p class="content">
              â‘¤è½¯ä»¶ï¼šMCGS全功能组态软件，支持闪存盘（俗称U盘）备份恢复，功能更强大；
            </p>
            <p class="content">
              â‘¥çŽ¯ä¿ï¼šä½ŽåŠŸè€—，整机功耗仅6W，发展绿色工业，倡导能源节约；
            </p>
            <p class="content">
              â‘¦æ—¶å°šï¼š7in（1in=2.54cm）宽屏显示、超轻、超薄机身设计，引领简约时尚；
            </p>
            <p class="content">
              â‘§æœåŠ¡ï¼šç«‹è¶³ä¸­å›½ï¼Œå…¨æ–¹ä½ã€æœ¬åœŸåŒ–服务，星级标准，用户至上。
            </p>
            <p class="content">
              ï¼ˆ2）TPC7062K外观。TPC7062K正视图如图1-6所示，TPC7062K背视图如图1-7所示。
            </p>
            <p class="content">（3）TPC7062K供电接线。</p>
            <p class="quotation primary-boder" style="padding: 4px 0">
              <img
                class="s-pic"
                src="../../assets/images/img00016001.jpg"
                style="width: 50px"
              />
              ä»…限DC 24V！建议电源的输出功率为15W。
            </p>
          </div>
        </div>
        <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
          <li class="footer-num">4</li>
          <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="" />
          </div>
          <div class="fl">
            <div class="">
              <!-- <el-image
                :src="imgSix"
                active="true"
                :preview-src-list="[imgSix]"
              /> -->
              <div class="openImgBox">
              <img src="../../assets/images/img00017001.jpg" alt="" class="w100">
            </div>
              <p class="imgdescript">图1-6　正视图</p>
            </div>
            <div class="">
              <div class="openImgBox">
                <img src="../../assets/images/img00017002.jpg" alt="" class="w100">
              </div>
              <p class="imgdescript">图1-7　背视图</p>
            </div>
          </div>
          <div class="fl al-cn">
            <div class="left">
              <p class="content">接线步骤：</p>
              <p class="content">
                â‘ å°†å¼€å…³ç”µæº24V+端线插入TPC电源插头接线1端中，如图1-8所示。
              </p>
              <p class="content">②将开关电源24V-端线插入TPC电源插头接线2端中。</p>
              <p class="content">③使用一字头旋具将TPC电源插头螺钉锁紧。</p>
            </div>
            <div class="right">
              <div class="openImgBox">
                <img src="../../assets/images/img00017003.jpg" alt="" class="w100">
              </div>
              <p class="imgdescript">图1-8　电源插头示意图及引脚定义</p>
            </div>
          </div>
  
          <p class="content">
            ï¼ˆ4）TPC7062K外部接口。接口说明如图1-9所示，串口引脚定义如图1-10所示。
          </p>
          <div>
            <div class="openImgBox">
                <img src="../../assets/images/img00017004.jpg" alt="" class="w100">
              </div>
            <p class="imgdescript">图1-9　接口说明</p>
          </div>
          <div>
            <div class="openImgBox">
                <img src="../../assets/images/img00017005.jpg" alt="" class="w100">
              </div>
            <p class="imgdescript">图1-10　串口引脚定义</p>
          </div>
          <p class="content">
            ï¼ˆ5）TPC7062K启动。使用24V直流电源给TPC供电，开机启动后屏幕出现“正在启动”提示进度条，此时不需任何操作自动进入工程运行界面，如图1-11所示。
          </p>
        </div>
        <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
          <li class="footer-num">5</li>
          <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>
              <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">
              <img
                src="../../assets/images/icon/arrow-four.png"
                alt=""
                class="w-45 mr-5"
              />
              <b>TPC7062K与三款主流PLC通信接线</b>
            </p>
            <p class="content">
              TPC7062K与三款主流PLC通信接线如图1-12～图1-14所示。
            </p>
            <div style="width: 90%" class="m0-auto">
              <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%">
              <div class="openImgBox">
                <img src="../../assets/images/img00018003.jpg" alt="" class="w100">
              </div>
              <p class="imgdescript">图1-13　TPC7062K与欧姆龙PLC通信接线</p>
            </div>
          </div>
        </div>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
          <li class="footer-num">6</li>
          <li class="footer-box"></li>
        </ul>
    </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>
            <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>
          <p class="table-title fl ju-cn al-cn">
            <span>表1-1　评分表</span>
            <!-- <i class="el-icon-share cu-pr"></i> -->
            <svg
              t="1716802335492"
              class="share-box icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1782"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              width="18"
              height="18"
            >
              <path
                d="M354.986667 219.428571v73.142858H195.047619v536.380952h585.142857V548.571429h73.142857V828.952381a73.142857 73.142857 0 0 1-73.142857 73.142857H195.047619a73.142857 73.142857 0 0 1-73.142857-73.142857V292.571429a73.142857 73.142857 0 0 1 73.142857-73.142858h159.939048z m383.829333-100.473904l172.397714 172.373333-181.00419 181.028571-51.736381-51.712L757.784381 341.333333H670.47619c-139.068952 0-252.245333 110.884571-255.902476 249.07581L414.47619 597.333333v97.52381h-73.142857v-97.52381C341.333333 415.548952 488.69181 268.190476 670.47619 268.190476h114.127239l-97.499429-97.523809 51.712-51.712z"
                p-id="1783"
              ></path>
            </svg>
          </p>
          <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">
                å·¥ ä½œ å½¢ å¼ <br />
                <input type="checkbox" name="xingshi" value="prople" /> ä¸ªäºº
                <input type="checkbox" name="xingshi" value="fengong" /> å°ç»„分工
                <input type="checkbox" name="xingshi" value="xiaozu" /> å°ç»„
              </td>
              <td colspan="2" class="table-cn">
                å·¥ä½œæ—¶é—´/min <br />
                <input style="width: 80px" class="input-border table-bc" />
              </td>
            </tr>
            <tr class="table-bc">
              <td class="table-cn">任务</td>
              <td class="table-cn">训练内容</td>
              <td class="table-cn">训练要求</td>
              <td class="table-cn">学生自评</td>
              <td class="table-cn">教师评分</td>
            </tr>
            <tr>
              <td rowspan="4">
                <div style="width: 50px">认识嵌入式组态和触摸屏</div>
              </td>
              <td>嵌入式组态和触摸屏，20分</td>
              <td>
                <div>
                  æ”¶é›†å„类触摸屏功能及性能信息，并进行比较;了解嵌人式组态组成，了解TPC系列产品性能、外观与接线
                </div>
              </td>
              <td>
                <textarea class="textarea-table-td"></textarea>
              </td>
              <td>
                <textarea class="textarea-table-td"></textarea>
              </td>
            </tr>
            <tr>
              <td>通信连接，30分</td>
              <td>
                <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>
            </tr>
            <tr>
              <td>测试与功能，30分</td>
              <td>TPC与PC通信是否正常</td>
              <td><textarea class="textarea-table-td"></textarea></td>
              <td><textarea class="textarea-table-td"></textarea></td>
            </tr>
            <tr>
              <td>职业素养与安全意识，20 åˆ†</td>
              <td>
                å·¥å…·ã€å™¨æã€å¯¼çº¿ç­‰å¤„理操作符合职业要求:遵守纪律，保持工位整洁
              </td>
              <td><textarea class="textarea-table-td"></textarea></td>
              <td><textarea class="textarea-table-td"></textarea></td>
            </tr>
          </table>
          <div class="tl-rg mt-20">
            å­¦ç”Ÿ:<input style="width: 40px" class="input-border" /> æ•™å¸ˆ:<input
              style="width: 40px"
              class="input-border"
            />日期:<input style="width: 82px" class="input-border" />
          </div>
          <div class="pr">
            <h2 class="secondTitle primary-color" id="sigil_toc_id_14">
              ä»»åŠ¡äºŒã€€MCGS嵌入版组态软件安装
            </h2>
            <div class="w100 border-so mb-5"></div>
            <div class="w50 rw-border mb-20"></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">掌握MCGS嵌入版组态软件V6.8安装方法。</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 class="content">学习嵌入式组态软件V6.8的安装方法和步骤。</p>
            <p class="quotation fl al-cn t0 primary-color">
              <img
                src="../../assets/images/icon/xunlian.png"
                alt=""
                class="w-35 mr-5"
              />
              <b>任务训练</b>
            </p>
            <p class="content">
              åœ¨æ˜†ä»‘通态官网上下载MCGS_嵌入版完整安装包，解压缩后，具体安装步骤如下：
            </p>
            <ul class="right-resource">
              <li class="fl al-cn ju-cn border-so p-10">
                <img
                  src="../../assets/images/icon/anzhuang.png"
                  class="anzhuang-icon"
                />
                <span class="primary-color">安装包</span>
              </li>
              <li class="fl fl-cl al-cn p-10">
                <div class="fl al-end">
                  <img src="../../assets/images/icon/rar.png" class="rar-icon" />
                  <!-- <img
                    @click="
                      downloadRar('McgsPro 3.3.6.6354 SP1.3 ç»„态软件安装包')
                    "
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  /> -->
                  <span
                    class="svg-btn"
                    @click="
                      downloadRar('McgsPro 3.3.6.6354 SP1.3 ç»„态软件安装包')
                    "
                  >
                    <svg
                      t="1716796212460"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="1598"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="15"
                      height="15"
                    >
                      <path
                        d="M731.428571 341.333333h73.142858a73.142857 73.142857 0 0 1 73.142857 73.142857v414.476191a73.142857 73.142857 0 0 1-73.142857 73.142857H219.428571a73.142857 73.142857 0 0 1-73.142857-73.142857V414.47619a73.142857 73.142857 0 0 1 73.142857-73.142857h73.142858v73.142857H219.428571v414.476191h585.142858V414.47619h-73.142858v-73.142857z m-176.90819-242.590476l0.048762 397.092572 84.577524-84.601905 51.687619 51.712-172.373334 172.397714-172.397714-172.373333 51.712-51.736381 83.626667 83.626666V98.742857h73.142857z"
                        p-id="1599"
                      ></path>
                    </svg>
                  </span>
                </div>
                <div>
                  <span class="rar-text"
                    >MCGS嵌入版<br />
                    å®‰è£…文件.rar</span
                  >
                </div>
              </li>
            </ul>
          </div>
  
          <video
            v-if="videoOne"
            :src="config.resourceCtx + '/配套学习资源/p7/MCGS安装视频带音频.mp4'"
            webkit-playsinline="true"
            x-webkit-airplay="true"
            playsinline="true"
            x5-video-orientation="h5"
            x5-video-player-fullscreen="true"
            x5-playsinline=""
            controls
            class="w100 mt-20"
          ></video>
          <p class="imgdescript">视频：MCGS安装视频</p>
          <p class="content">
            ï¼ˆ1）运行Setup.exe文件，MCGS安装程序窗口如图1-15所示。
          </p>
          <p class="content">
            åœ¨å®‰è£…程序窗口中单击“安装组态软件”按钮，弹出安装程序窗口。单击“下一步”按钮，启动安装程序，如图1-16所示。
          </p>
        </div>
        <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
          <li class="footer-num">7</li>
          <li class="footer-box"></li>
        </ul>
      </div>
    </div>
    <!-- 8 -->
    <div class="page-box fl fl-cl ju-bt" page="18">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
        </div>
        <div class="padding-96">
          <p class="content">
            æŒ‰æç¤ºæ­¥éª¤æ“ä½œï¼ŒéšåŽï¼Œå®‰è£…程序将提示指定安装目录，如不指定时，系统默认安装到D：\MCGSE目录下，建议使用默认目录，如图1-17所示，系统安装大约需要几分钟。
          </p>
          <p class="content">
            ï¼ˆ2）MCGS嵌入版主程序安装完成后，继续安装设备驱动，单击“是”按钮如图1-18所示。
          </p>
          <p class="content">
            ï¼ˆ3）单击“下一步”按钮，进入驱动安装程序，选择“所有驱动”复选框，单击“下一步”按钮进行安装，如图1-19所示。
          </p>
          <p class="content">
            ï¼ˆ4）选择好后，按提示操作，MCGS驱动程序安装过程大约需要几分钟。
          </p>
          <p class="content">
            ï¼ˆ5）安装过程完成后，将弹出对话框提示安装完成，是否重新启动计算机，选择重启后，完成安装。
          </p>
          <p class="content">
            ï¼ˆ6）安装完成后，Windows操作系统的桌面上添加了如图1-20所示的两个快捷方式图标，分别用于启动MCGS嵌入式组态环境和模拟运行环境。
          </p>
          <div class="qrbodyPic">
            <el-carousel
              trigger="click"
              class="bones-carousel carousel-image"
              arrow="always"
              indicator-position="none"
            >
              <el-carousel-item
                v-for="(item, index) in bonesList"
                :key="index"
                class="bones-carousel-item"
              >
                <el-image
                  :src="item"
                  :preview-src-list="bonesList"
                  :preview-teleported="true"
                  class="open-image"
                />
              </el-carousel-item>
            </el-carousel>
      <div v-if="showPageList.indexOf(18) > -1">
        <div>
          <div class="mt-20">
            <img src="../../assets/images/page-header.png" alt="" class="w100" />
          </div>
          <div class="padding-96">
            <p class="content">
              æŒ‰æç¤ºæ­¥éª¤æ“ä½œï¼ŒéšåŽï¼Œå®‰è£…程序将提示指定安装目录，如不指定时，系统默认安装到D：\MCGSE目录下，建议使用默认目录，如图1-17所示，系统安装大约需要几分钟。
            </p>
            <p class="content">
              ï¼ˆ2）MCGS嵌入版主程序安装完成后，继续安装设备驱动，单击“是”按钮如图1-18所示。
            </p>
            <p class="content">
              ï¼ˆ3）单击“下一步”按钮，进入驱动安装程序，选择“所有驱动”复选框，单击“下一步”按钮进行安装，如图1-19所示。
            </p>
            <p class="content">
              ï¼ˆ4）选择好后，按提示操作，MCGS驱动程序安装过程大约需要几分钟。
            </p>
            <p class="content">
              ï¼ˆ5）安装过程完成后，将弹出对话框提示安装完成，是否重新启动计算机，选择重启后，完成安装。
            </p>
            <p class="content">
              ï¼ˆ6）安装完成后，Windows操作系统的桌面上添加了如图1-20所示的两个快捷方式图标，分别用于启动MCGS嵌入式组态环境和模拟运行环境。
            </p>
            <div class="qrbodyPic">
              <div class="banshi openImgBox">
                  <div class="swiper-container">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/carousel-one.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/carousel-two.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/carousel-three.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/carousel-four.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/carousel-five.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/carousel-six.png"
                          />
                        </div>
                      </div>
                    </div>
                    <div class="swiper-pagination"></div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                  </div>
                </div>
            </div>
          </div>
        </div>

      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
        <li class="footer-num">8</li>
        <li class="footer-box"></li>
      </ul>
          <li class="footer-num">8</li>
          <li class="footer-box"></li>
        </ul>
    </div>
    <!-- 9 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96 pr" page="19">
      <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>
        <!-- å†…容 -->
        <p class="content">评分表见表1-2。</p>
        <p class="table-title">
          <span> è¡¨1-2　评分表 </span>
          <svg
            t="1716802335492"
            class="share-box icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1782"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="18"
            height="18"
          >
            <path
              d="M354.986667 219.428571v73.142858H195.047619v536.380952h585.142857V548.571429h73.142857V828.952381a73.142857 73.142857 0 0 1-73.142857 73.142857H195.047619a73.142857 73.142857 0 0 1-73.142857-73.142857V292.571429a73.142857 73.142857 0 0 1 73.142857-73.142858h159.939048z m383.829333-100.473904l172.397714 172.373333-181.00419 181.028571-51.736381-51.712L757.784381 341.333333H670.47619c-139.068952 0-252.245333 110.884571-255.902476 249.07581L414.47619 597.333333v97.52381h-73.142857v-97.52381C341.333333 415.548952 488.69181 268.190476 670.47619 268.190476h114.127239l-97.499429-97.523809 51.712-51.712z"
              p-id="1783"
            ></path>
          </svg>
        </p>
        <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">
              å·¥ ä½œ å½¢ å¼ <br />
              <input type="checkbox" name="xingshi" value="prople" /> ä¸ªäºº
              <input type="checkbox" name="xingshi" value="fengong" /> å°ç»„分工
              <input type="checkbox" name="xingshi" value="xiaozu" /> å°ç»„
            </td>
            <td colspan="2" class="table-cn">
              å·¥ä½œæ—¶é—´/min <br />
              <input style="width: 80px" class="input-border table-bc" />
            </td>
          </tr>
          <tr class="table-bc">
            <td class="table-cn">任务</td>
            <td class="table-cn">训练内容</td>
            <td class="table-cn">训练要求</td>
            <td class="table-cn">学生自评</td>
            <td class="table-cn">教师评分</td>
          </tr>
          <tr>
            <td rowspan="4">
              <div style="width: 50px">MCGS嵌入版组态软件安装</div>
            </td>
            <td>嵌入版组态软件安装，40分</td>
            <td>
              æ‰¾åˆ°ä¼ä¸šç½‘站，下载最新MCGS嵌人式软件并安装:找到工业自动化软件BBS网站，参与讨论
            </td>
            <td>
              <textarea class="textarea-table-td"></textarea>
            </td>
            <td>
              <textarea class="textarea-table-td"></textarea>
            </td>
          </tr>
          <tr>
            <td>测试与功能，40分</td>
            <td>软件是否正常运行、使用</td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
          </tr>
          <tr>
            <td>职业素养与安全意识，20分</td>
            <td>工具、器材等处理操作符合职业要求，遵守纪律，保持工位整洁</td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
          </tr>
        </table>
        <div class="tl-rg mt-20">
          å­¦ç”Ÿ:<input style="width: 40px" class="input-border" /> æ•™å¸ˆ:<input
            style="width: 40px"
            class="input-border"
          />日期:<input style="width: 82px" class="input-border" />
        </div>
        <h2 class="secondTitle" id="sigil_toc_id_15">
          ä»»åŠ¡ä¸‰ã€€å»ºç«‹å·¥ç¨‹ä¸Žä¸‹è½½å·¥ç¨‹
        </h2>
        <div class="w100 border-so mb-5"></div>
        <div class="w50 rw-border mb-20"></div>
      <div v-if="showPageList.indexOf(19) > -1">
        <div class="w100">
          <div>
            <img
              src="../../assets/images/icon/document.png"
              class="document-icon"
            />
            <span>文本</span>
          <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20">
            <img src="../../assets/images/header-one.png" alt="" />
          </div>
          <ul class="word-resource fl ju-ev">
            <li class="fl fl-cl al-cn p08">
              <div class="fl al-end">
                <img
                  src="../../assets/images/icon/word.png"
                  class="word-icon"
                />
                <!-- <img
                  @click="downloadWord('初级教程资源')"
                  src="../../assets/images/icon/download.png"
                  class="downlod-icon cu-pr"
                /> -->
                <span class="svg-btn" @click="downloadWord('初级教程资源')">
                  <svg
                    t="1716796212460"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="1598"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="15"
                    height="15"
                  >
                    <path
                      d="M731.428571 341.333333h73.142858a73.142857 73.142857 0 0 1 73.142857 73.142857v414.476191a73.142857 73.142857 0 0 1-73.142857 73.142857H219.428571a73.142857 73.142857 0 0 1-73.142857-73.142857V414.47619a73.142857 73.142857 0 0 1 73.142857-73.142857h73.142858v73.142857H219.428571v414.476191h585.142858V414.47619h-73.142858v-73.142857z m-176.90819-242.590476l0.048762 397.092572 84.577524-84.601905 51.687619 51.712-172.373334 172.397714-172.397714-172.373333 51.712-51.736381 83.626667 83.626666V98.742857h73.142857z"
                      p-id="1599"
                    ></path>
                  </svg>
                </span>
          <!-- å†…容 -->
          <p class="content">评分表见表1-2。</p>
          <p class="table-title">
            <span> è¡¨1-2　评分表 </span>
            <svg
              t="1716802335492"
              class="share-box icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1782"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              width="18"
              height="18"
            >
              <path
                d="M354.986667 219.428571v73.142858H195.047619v536.380952h585.142857V548.571429h73.142857V828.952381a73.142857 73.142857 0 0 1-73.142857 73.142857H195.047619a73.142857 73.142857 0 0 1-73.142857-73.142857V292.571429a73.142857 73.142857 0 0 1 73.142857-73.142858h159.939048z m383.829333-100.473904l172.397714 172.373333-181.00419 181.028571-51.736381-51.712L757.784381 341.333333H670.47619c-139.068952 0-252.245333 110.884571-255.902476 249.07581L414.47619 597.333333v97.52381h-73.142857v-97.52381C341.333333 415.548952 488.69181 268.190476 670.47619 268.190476h114.127239l-97.499429-97.523809 51.712-51.712z"
                p-id="1783"
              ></path>
            </svg>
          </p>
          <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">
                å·¥ ä½œ å½¢ å¼ <br />
                <input type="checkbox" name="xingshi" value="prople" /> ä¸ªäºº
                <input type="checkbox" name="xingshi" value="fengong" /> å°ç»„分工
                <input type="checkbox" name="xingshi" value="xiaozu" /> å°ç»„
              </td>
              <td colspan="2" class="table-cn">
                å·¥ä½œæ—¶é—´/min <br />
                <input style="width: 80px" class="input-border table-bc" />
              </td>
            </tr>
            <tr class="table-bc">
              <td class="table-cn">任务</td>
              <td class="table-cn">训练内容</td>
              <td class="table-cn">训练要求</td>
              <td class="table-cn">学生自评</td>
              <td class="table-cn">教师评分</td>
            </tr>
            <tr>
              <td rowspan="4">
                <div style="width: 50px">MCGS嵌入版组态软件安装</div>
              </td>
              <td>嵌入版组态软件安装，40分</td>
              <td>
                æ‰¾åˆ°ä¼ä¸šç½‘站，下载最新MCGS嵌人式软件并安装:找到工业自动化软件BBS网站，参与讨论
              </td>
              <td>
                <textarea class="textarea-table-td"></textarea>
              </td>
              <td>
                <textarea class="textarea-table-td"></textarea>
              </td>
            </tr>
            <tr>
              <td>测试与功能，40分</td>
              <td>软件是否正常运行、使用</td>
              <td><textarea class="textarea-table-td"></textarea></td>
              <td><textarea class="textarea-table-td"></textarea></td>
            </tr>
            <tr>
              <td>职业素养与安全意识，20分</td>
              <td>工具、器材等处理操作符合职业要求，遵守纪律，保持工位整洁</td>
              <td><textarea class="textarea-table-td"></textarea></td>
              <td><textarea class="textarea-table-td"></textarea></td>
            </tr>
          </table>
          <div class="tl-rg mt-20">
            å­¦ç”Ÿ:<input style="width: 40px" class="input-border" /> æ•™å¸ˆ:<input
              style="width: 40px"
              class="input-border"
            />日期:<input style="width: 82px" class="input-border" />
          </div>
          <h2 class="secondTitle" id="sigil_toc_id_15">
            ä»»åŠ¡ä¸‰ã€€å»ºç«‹å·¥ç¨‹ä¸Žä¸‹è½½å·¥ç¨‹
          </h2>
          <div class="w100 border-so mb-5"></div>
          <div class="w50 rw-border mb-20"></div>
          <div class="w100">
            <div>
              <img
                src="../../assets/images/icon/document.png"
                class="document-icon"
              />
              <span>文本</span>
            </div>
            <ul class="word-resource fl ju-ev">
              <li class="fl fl-cl al-cn p08">
                <div class="fl al-end">
                  <img
                    src="../../assets/images/icon/word.png"
                    class="word-icon"
                  />
                  <!-- <img
                    @click="downloadWord('初级教程资源')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  /> -->
                  <span class="svg-btn" @click="downloadWord('初级教程资源')">
                    <svg
                      t="1716796212460"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="1598"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="15"
                      height="15"
                    >
                      <path
                        d="M731.428571 341.333333h73.142858a73.142857 73.142857 0 0 1 73.142857 73.142857v414.476191a73.142857 73.142857 0 0 1-73.142857 73.142857H219.428571a73.142857 73.142857 0 0 1-73.142857-73.142857V414.47619a73.142857 73.142857 0 0 1 73.142857-73.142857h73.142858v73.142857H219.428571v414.476191h585.142858V414.47619h-73.142858v-73.142857z m-176.90819-242.590476l0.048762 397.092572 84.577524-84.601905 51.687619 51.712-172.373334 172.397714-172.397714-172.373333 51.712-51.736381 83.626667 83.626666V98.742857h73.142857z"
                        p-id="1599"
                      ></path>
                    </svg>
                  </span>
                </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 class="fl al-end">
                  <img
                    src="../../assets/images/icon/word.png"
                    class="word-icon"
                  />
                  <!-- <img
                    @click="downloadWord('中级教程资源')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  /> -->
                  <span class="svg-btn" @click="downloadWord('中级教程资源')">
                    <svg
                      t="1716796212460"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="1598"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="15"
                      height="15"
                    >
                      <path
                        d="M731.428571 341.333333h73.142858a73.142857 73.142857 0 0 1 73.142857 73.142857v414.476191a73.142857 73.142857 0 0 1-73.142857 73.142857H219.428571a73.142857 73.142857 0 0 1-73.142857-73.142857V414.47619a73.142857 73.142857 0 0 1 73.142857-73.142857h73.142858v73.142857H219.428571v414.476191h585.142858V414.47619h-73.142858v-73.142857z m-176.90819-242.590476l0.048762 397.092572 84.577524-84.601905 51.687619 51.712-172.373334 172.397714-172.397714-172.373333 51.712-51.736381 83.626667 83.626666V98.742857h73.142857z"
                        p-id="1599"
                      ></path>
                    </svg>
                  </span>
                </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 class="fl al-end">
                  <img
                    src="../../assets/images/icon/word.png"
                    class="word-icon"
                  />
                  <!-- <img
                    @click="downloadWord('驱动教程资源')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  /> -->
                  <span class="svg-btn" @click="downloadWord('驱动教程资源')">
                    <svg
                      t="1716796212460"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="1598"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="15"
                      height="15"
                    >
                      <path
                        d="M731.428571 341.333333h73.142858a73.142857 73.142857 0 0 1 73.142857 73.142857v414.476191a73.142857 73.142857 0 0 1-73.142857 73.142857H219.428571a73.142857 73.142857 0 0 1-73.142857-73.142857V414.47619a73.142857 73.142857 0 0 1 73.142857-73.142857h73.142858v73.142857H219.428571v414.476191h585.142858V414.47619h-73.142858v-73.142857z m-176.90819-242.590476l0.048762 397.092572 84.577524-84.601905 51.687619 51.712-172.373334 172.397714-172.397714-172.373333 51.712-51.736381 83.626667 83.626666V98.742857h73.142857z"
                        p-id="1599"
                      ></path>
                    </svg>
                  </span>
                </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 class="fl al-end">
                  <img
                    src="../../assets/images/icon/word.png"
                    class="word-icon"
                  />
                  <!-- <img
                    @click="downloadWord('硬件教程资源')"
                    src="../../assets/images/icon/download.png"
                    class="downlod-icon cu-pr"
                  /> -->
                  <span class="svg-btn" @click="downloadWord('硬件教程资源')">
                    <svg
                      t="1716796212460"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="1598"
                      xmlns:xlink="http://www.w3.org/1999/xlink"
                      width="15"
                      height="15"
                    >
                      <path
                        d="M731.428571 341.333333h73.142858a73.142857 73.142857 0 0 1 73.142857 73.142857v414.476191a73.142857 73.142857 0 0 1-73.142857 73.142857H219.428571a73.142857 73.142857 0 0 1-73.142857-73.142857V414.47619a73.142857 73.142857 0 0 1 73.142857-73.142857h73.142858v73.142857H219.428571v414.476191h585.142858V414.47619h-73.142858v-73.142857z m-176.90819-242.590476l0.048762 397.092572 84.577524-84.601905 51.687619 51.712-172.373334 172.397714-172.397714-172.373333 51.712-51.736381 83.626667 83.626666V98.742857h73.142857z"
                        p-id="1599"
                      ></path>
                    </svg>
                  </span>
                </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="quotation fl al-cn t0 primary-color">
            <img
              src="../../assets/images/icon/xunlian.png"
              alt=""
              class="w-35 mr-5"
            />
            <b>任务训练</b>
          </p>
          <p class="quotation fl al-cn t0 primary-color">
            <img
              src="../../assets/images/icon/arrow-one.png"
              alt=""
              class="w-45 mr-5"
            />
            <b>新建工程</b>
          </p>
          <p class="content">
            åŒå‡»ç»„态环境快捷方式图标<img
              class="h-pic"
              src="../../assets/images/img00021002.jpg"
              active="true"
            />，打开嵌入版组态软件，然后按如下步骤建立工程：
          </p>
          <p class="content">
            ï¼ˆ1）选择“文件”菜单中“新建工程”命令，弹出“新建工程设置”对话框，如图1-21所示，TPC类型选择为“TPC7062K”，单击“确定”按钮。
          </p>
          <p class="content">
            ï¼ˆ2）选择“文件”菜单中的“工程另存为”命令，弹出“文件保存”对话框，在文件名一栏内输入“常用构件使用”，单击“保存”按钮，工程创建完毕。
          </p>
          <div class="qrbodyPic">
            <div class="openImgBox">
                <img src="../../assets/images/img00021003.jpg" alt="" class="w100">
              </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 class="fl al-end">
                <img
                  src="../../assets/images/icon/word.png"
                  class="word-icon"
                />
                <!-- <img
                  @click="downloadWord('中级教程资源')"
                  src="../../assets/images/icon/download.png"
                  class="downlod-icon cu-pr"
                /> -->
                <span class="svg-btn" @click="downloadWord('中级教程资源')">
                  <svg
                    t="1716796212460"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="1598"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="15"
                    height="15"
                  >
                    <path
                      d="M731.428571 341.333333h73.142858a73.142857 73.142857 0 0 1 73.142857 73.142857v414.476191a73.142857 73.142857 0 0 1-73.142857 73.142857H219.428571a73.142857 73.142857 0 0 1-73.142857-73.142857V414.47619a73.142857 73.142857 0 0 1 73.142857-73.142857h73.142858v73.142857H219.428571v414.476191h585.142858V414.47619h-73.142858v-73.142857z m-176.90819-242.590476l0.048762 397.092572 84.577524-84.601905 51.687619 51.712-172.373334 172.397714-172.397714-172.373333 51.712-51.736381 83.626667 83.626666V98.742857h73.142857z"
                      p-id="1599"
                    ></path>
                  </svg>
                </span>
              </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 class="fl al-end">
                <img
                  src="../../assets/images/icon/word.png"
                  class="word-icon"
                />
                <!-- <img
                  @click="downloadWord('驱动教程资源')"
                  src="../../assets/images/icon/download.png"
                  class="downlod-icon cu-pr"
                /> -->
                <span class="svg-btn" @click="downloadWord('驱动教程资源')">
                  <svg
                    t="1716796212460"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="1598"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="15"
                    height="15"
                  >
                    <path
                      d="M731.428571 341.333333h73.142858a73.142857 73.142857 0 0 1 73.142857 73.142857v414.476191a73.142857 73.142857 0 0 1-73.142857 73.142857H219.428571a73.142857 73.142857 0 0 1-73.142857-73.142857V414.47619a73.142857 73.142857 0 0 1 73.142857-73.142857h73.142858v73.142857H219.428571v414.476191h585.142858V414.47619h-73.142858v-73.142857z m-176.90819-242.590476l0.048762 397.092572 84.577524-84.601905 51.687619 51.712-172.373334 172.397714-172.397714-172.373333 51.712-51.736381 83.626667 83.626666V98.742857h73.142857z"
                      p-id="1599"
                    ></path>
                  </svg>
                </span>
              </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 class="fl al-end">
                <img
                  src="../../assets/images/icon/word.png"
                  class="word-icon"
                />
                <!-- <img
                  @click="downloadWord('硬件教程资源')"
                  src="../../assets/images/icon/download.png"
                  class="downlod-icon cu-pr"
                /> -->
                <span class="svg-btn" @click="downloadWord('硬件教程资源')">
                  <svg
                    t="1716796212460"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="1598"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="15"
                    height="15"
                  >
                    <path
                      d="M731.428571 341.333333h73.142858a73.142857 73.142857 0 0 1 73.142857 73.142857v414.476191a73.142857 73.142857 0 0 1-73.142857 73.142857H219.428571a73.142857 73.142857 0 0 1-73.142857-73.142857V414.47619a73.142857 73.142857 0 0 1 73.142857-73.142857h73.142858v73.142857H219.428571v414.476191h585.142858V414.47619h-73.142858v-73.142857z m-176.90819-242.590476l0.048762 397.092572 84.577524-84.601905 51.687619 51.712-172.373334 172.397714-172.397714-172.373333 51.712-51.736381 83.626667 83.626666V98.742857h73.142857z"
                      p-id="1599"
                    ></path>
                  </svg>
                </span>
              </div>

              <div>
                <span>硬件教程</span>
              </div>
            </li>
          </ul>
            <p class="imgdescript">图1-21　选择TPC类型</p>
          </div>
          <p class="quotation fl al-cn t0 primary-color">
            <img
              src="../../assets/images/icon/arrow-two.png"
              alt=""
              class="w-45 mr-5"
            />
            <b>窗口组态</b>
          </p>
          <p class="content">
            ï¼ˆ1）在工作台中激活用户窗口，单击“新建窗口”按钮，建立新画面“窗口0”，如图1-22所示。
          </p>
          <p class="content">
            ï¼ˆ2）单击“窗口属性”按钮，弹出“用户窗口属性设置”对话框，在“基本属性”选项卡，将“窗口名称”修改为“常用构件使用”，单击“确认”按钮进行保存，如图1-23所示。
          </p>
        </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="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/xunlian.png"
            alt=""
            class="w-35 mr-5"
          />
          <b>任务训练</b>
        </p>
        <p class="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/arrow-one.png"
            alt=""
            class="w-45 mr-5"
          />
          <b>新建工程</b>
        </p>
        <p class="content">
          åŒå‡»ç»„态环境快捷方式图标<img
            class="h-pic"
            src="../../assets/images/img00021002.jpg"
            active="true"
          />，打开嵌入版组态软件，然后按如下步骤建立工程：
        </p>
        <p class="content">
          ï¼ˆ1）选择“文件”菜单中“新建工程”命令，弹出“新建工程设置”对话框，如图1-21所示，TPC类型选择为“TPC7062K”，单击“确定”按钮。
        </p>
        <p class="content">
          ï¼ˆ2）选择“文件”菜单中的“工程另存为”命令，弹出“文件保存”对话框，在文件名一栏内输入“常用构件使用”，单击“保存”按钮，工程创建完毕。
        </p>
        <div class="qrbodyPic">
          <img src="../../assets/images/img00021003.jpg" active="true" />
          <p class="imgdescript">图1-21　选择TPC类型</p>
        </div>
        <p class="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/arrow-two.png"
            alt=""
            class="w-45 mr-5"
          />
          <b>窗口组态</b>
        </p>
        <p class="content">
          ï¼ˆ1）在工作台中激活用户窗口，单击“新建窗口”按钮，建立新画面“窗口0”，如图1-22所示。
        </p>
        <p class="content">
          ï¼ˆ2）单击“窗口属性”按钮，弹出“用户窗口属性设置”对话框，在“基本属性”选项卡，将“窗口名称”修改为“常用构件使用”，单击“确认”按钮进行保存，如图1-23所示。
        </p>
        <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
          <li class="footer-num">9</li>
          <li class="footer-box"></li>
        </ul>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
        <li class="footer-num">9</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 10 -->
    <div class="page-box fl fl-cl ju-bt" page="20">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
        </div>
        <div class="padding-96">
          <div class="fl ju-bt w100">
            <div>
              <el-image :src="imgFifteen" :preview-src-list="[imgFifteen]" />
              <p class="imgdescript">图1-22　建立新窗口</p>
            </div>
            <div class="">
              <el-image :src="imgSixteen" :preview-src-list="[imgSixteen]" />
              <p class="imgdescript">图1-23　窗口属性设置</p>
            </div>
      <div v-if="showPageList.indexOf(20) > -1">
        <div>
          <div class="mt-20">
            <img src="../../assets/images/page-header.png" alt="" class="w100" />
          </div>
          <p class="content">
            ï¼ˆ3）双击用户窗口，在窗口编辑位置按住鼠标左键拖放出一定大小后，松开鼠标左键，这样一个按钮构件就绘制在窗口中，如图1-24所示。
          </p>
          <p class="content">
            æŽ¥ä¸‹æ¥åŒå‡»è¯¥æŒ‰é’®ï¼Œå¼¹å‡ºâ€œæ ‡å‡†æŒ‰é’®æž„件属性设置”对话框，在“基本属性”选项卡中的“文本”文本框中输入“指示灯1”，单击“确认”按钮保存，如图1-25所示。
          </p>
          <div class="fl ju-bt">
            <div>
              <el-image
                :src="imgSeventeen"
                :preview-src-list="[imgSeventeen]"
              />
              <p class="imgdescript">图1-24　按钮制作</p>
          <div class="padding-96">
            <div class="fl ju-bt w100">
              <div>
                <div class="openImgBox">
                <img src="../../assets/images/img00022001.jpg" alt="" class="w100">
              </div>
                <p class="imgdescript">图1-22　建立新窗口</p>
              </div>
              <div class="">
                <div class="openImgBox">
                  <img src="../../assets/images/img00022002.jpg" alt="" class="w100">
                </div>
                <p class="imgdescript">图1-23　窗口属性设置</p>
              </div>
            </div>
            <div>
              <el-image :src="imgEighteen" :preview-src-list="[imgSeventeen]" />
              <p class="imgdescript">图1-25　标准按钮构件属性设置</p>
            <p class="content">
              ï¼ˆ3）双击用户窗口，在窗口编辑位置按住鼠标左键拖放出一定大小后，松开鼠标左键，这样一个按钮构件就绘制在窗口中，如图1-24所示。
            </p>
            <p class="content">
              æŽ¥ä¸‹æ¥åŒå‡»è¯¥æŒ‰é’®ï¼Œå¼¹å‡ºâ€œæ ‡å‡†æŒ‰é’®æž„件属性设置”对话框，在“基本属性”选项卡中的“文本”文本框中输入“指示灯1”，单击“确认”按钮保存，如图1-25所示。
            </p>
            <div class="fl ju-bt">
              <div>
                <div class="openImgBox">
                  <img src="../../assets/images/img00022003.jpg" alt="" class="w100">
                </div>
                <p class="imgdescript">图1-24　按钮制作</p>
              </div>
              <div>
                <div class="openImgBox">
                  <img src="../../assets/images/img00022004.jpg" alt="" class="w100">
                </div>
                <p class="imgdescript">图1-25　标准按钮构件属性设置</p>
              </div>
            </div>
            <p class="content">
              æŒ‰ç…§åŒæ ·çš„操作分别绘制另外一个按钮，将“文本”修改为“指示灯2”，完成后如图1-26所示。
            </p>
            <p class="content">
              æŒ‰ä½é”®ç›˜çš„【Ctrl】键，然后单击，同时选中两个按钮，使用工具栏中的等高宽、左（右）对齐和纵向等间距对两个按钮进行排列对齐，如图1-27所示。
            </p>
            <p class="content">
              ï¼ˆ4）单击工具箱中的“插入元件”按钮，弹出“对象元件库管理”对话框，选中图形对象库指示灯中的一款，单击“确认”按钮添加到窗口画面中，并调整到合适大小，同样的方法再添加两个指示灯，摆放在窗口中按钮旁边的位置，如图1-28所示。
            </p>
            <p class="content">
              ï¼ˆ5）单击选中工具箱中的“标签”按钮，在窗口按住鼠标左键，拖放出一定大小“标签”，如图1-29所示。然后双击该标签，弹出“标签动画组态属性设置”对话框，在“扩展属性”选项卡中的“文本内容输入”文本框中输入“状态显示1：”，单击“确认”按钮，如图1-30所示。
            </p>
          </div>
          <p class="content">
            æŒ‰ç…§åŒæ ·çš„操作分别绘制另外一个按钮，将“文本”修改为“指示灯2”，完成后如图1-26所示。
          </p>
          <p class="content">
            æŒ‰ä½é”®ç›˜çš„【Ctrl】键，然后单击，同时选中两个按钮，使用工具栏中的等高宽、左（右）对齐和纵向等间距对两个按钮进行排列对齐，如图1-27所示。
          </p>
          <p class="content">
            ï¼ˆ4）单击工具箱中的“插入元件”按钮，弹出“对象元件库管理”对话框，选中图形对象库指示灯中的一款，单击“确认”按钮添加到窗口画面中，并调整到合适大小，同样的方法再添加两个指示灯，摆放在窗口中按钮旁边的位置，如图1-28所示。
          </p>
          <p class="content">
            ï¼ˆ5）单击选中工具箱中的“标签”按钮，在窗口按住鼠标左键，拖放出一定大小“标签”，如图1-29所示。然后双击该标签，弹出“标签动画组态属性设置”对话框，在“扩展属性”选项卡中的“文本内容输入”文本框中输入“状态显示1：”，单击“确认”按钮，如图1-30所示。
          </p>
        </div>
        <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
          <li class="footer-num">10</li>
          <li class="footer-box"></li>
        </ul>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
        <li class="footer-num">10</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 11 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96 pr" page="21">
      <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]" />
            <p class="imgdescript">图1-26　按钮文字修改</p>
      <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>
            <el-image :src="imgTwenty" :preview-src-list="[imgTwenty]" />
            <p class="imgdescript">图1-27　按钮排列</p>
          <div class="fl ju-bt">
            <div>
              <div class="openImgBox">
                  <img src="../../assets/images/img00023001.jpg" alt="" class="w100">
                </div>
              <p class="imgdescript">图1-26　按钮文字修改</p>
            </div>
            <div>
              <div class="openImgBox">
                  <img src="../../assets/images/img00023002.jpg" alt="" class="w100">
                </div>
              <p class="imgdescript">图1-27　按钮排列</p>
            </div>
          </div>
        </div>

        <div class="qrbodyPic">
          <el-image
            :src="imgtOne"
            :preview-src-list="[imgtOne]"
            class="source-img"
          />
          <p class="imgdescript">图1-28　添加指示灯</p>
        </div>
        <div class="fl">
          <div>
            <el-image :src="imgtTwo" :preview-src-list="[imgtTwo]" />
            <p class="imgdescript">图1-29　制作标签</p>
  
          <div class="qrbodyPic">
            <div class="openImgBox">
                  <img src="../../assets/images/img00023003.jpg" alt="" class="w100">
                </div>
            <p class="imgdescript">图1-28　添加指示灯</p>
          </div>
          <div style="width: 66%">
            <el-image :src="imgtThree" :preview-src-list="[imgtThree]" />
            <p class="imgdescript">图1-30　标签动画组态属性设置</p>
          <div class="fl">
            <div>
              <div class="openImgBox">
                  <img src="../../assets/images/img00023004.jpg" alt="" class="w100">
                </div>
              <p class="imgdescript">图1-29　制作标签</p>
            </div>
            <div style="width: 66%">
              <div class="openImgBox">
                  <img src="../../assets/images/img00023005.jpg" alt="" class="w100">
                </div>
              <p class="imgdescript">图1-30　标签动画组态属性设置</p>
            </div>
          </div>
  
          <p class="content">
            åŒæ ·çš„方法，添加另一个标签，“文本内容输入”文本框中输入“状态显示2：”，如图1-31所示。
          </p>
          <p class="content">
            ï¼ˆ6）单击工具箱中的“输入框”按钮，在窗口按住鼠标左键，拖放出两个一定大小的“输入框”，分别摆放在“状态显示1：”标签、“状态显示2：”标签的旁边位置，如图1-32所示。
          </p>
        </div>

        <p class="content">
          åŒæ ·çš„方法，添加另一个标签，“文本内容输入”文本框中输入“状态显示2：”，如图1-31所示。
        </p>
        <p class="content">
          ï¼ˆ6）单击工具箱中的“输入框”按钮，在窗口按住鼠标左键，拖放出两个一定大小的“输入框”，分别摆放在“状态显示1：”标签、“状态显示2：”标签的旁边位置，如图1-32所示。
        </p>
        <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
          <li class="footer-num">11</li>
          <li class="footer-box"></li>
        </ul>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
        <li class="footer-num">11</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 12 -->
    <div class="page-box fl fl-cl ju-bt" page="22">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
        </div>
        <div class="padding-96">
          <div class="fl">
            <div>
              <el-image :src="imgtFour" :preview-src-list="[imgtFour]" />
              <p class="imgdescript">图1-31　制作输入框</p>
            </div>
            <div>
              <el-image :src="imgtFive" :preview-src-list="[imgtFive]" />
              <p class="imgdescript">图1-32　输入框排列</p>
            </div>
      <div v-if="showPageList.indexOf(22) > -1">
        <div>
          <div class="mt-20">
            <img src="../../assets/images/page-header.png" alt="" class="w100" />
          </div>
          <p class="content">（7）建立数据链接：</p>
          <p class="content">
            â‘ æŒ‰é’®ï¼šåŒå‡»â€œæŒ‡ç¤ºç¯1”按钮，弹出“标准按钮构件属性设置”对话框，如图1-33所示，在“操作属性”选项卡中，默认“抬起功能”按钮为按下状态，选中“数据对象值操作”复选框，选择“清0”选项，建议变量名为“指示灯1”，即在取反控制按钮抬起时，对指示灯1进行清零，如图1-34所示。
          </p>
          <div class="fl">
            <div>
              <el-image :src="imgtSix" :preview-src-list="[imgtSix]" />
              <p class="imgdescript">图1-33　标准按钮构件属性设置”对话框</p>
            </div>
            <div>
              <el-image :src="imgtSeven" :preview-src-list="[imgtSeven]" />
              <p class="imgdescript">图1-34　控制按钮设置</p>
            </div>
          </div>
          <p class="content">
            è¾“入指示灯1时会弹出图1-35所示对话框，单击“是”按钮，弹出“数据对象属性设置”对话框，对数据类型进行设置，如图1-36所示，单击“确认”按钮。
          </p>
          <p class="content">
            åŒæ ·ï¼Œåˆ‡æ¢åˆ°â€œæŒ‰ä¸‹åŠŸèƒ½â€é€‰é¡¹å¡è¿›è¡Œè®¾ç½®ï¼Œé€‰æ‹©â€œæ•°æ®å¯¹è±¡å€¼æ“ä½œâ€å¤é€‰æ¡†ï¼Œé€‰æ‹©â€œç½®1”选项，变量名为“指示灯1”，如图1-37所示。
          </p>
          <div class="fl">
            <div style="width: 60%">
              <p class="content">
                æŒ‡ç¤ºç¯2按钮，“抬起功能”时“清0”；“按下功能”时“置1”，变量名为“指示灯2”。
              </p>
              <p class="content">
                â‘¡æŒ‡ç¤ºç¯ï¼šåŒå‡»æŒ‡ç¤ºç¯1按钮旁边的指示灯，弹出“单元属性设置”对话框，在“数据对象”选项卡中，单击<img
                  class="h-pic"
                  src="../../assets/images/img00024006.jpg"
                  active="true"
                />按钮选择数据对象指示灯1，如图1-38所示。同样方法设置“指示灯2”。
              </p>
            </div>
            <div style="width: 40%">
              <div class="qrbodyPic">
                <el-image :src="imgtEnight" :preview-src-list="[imgtEnight]" />
                <p class="imgdescript">图1-35　组态错误对话框</p>
          <div class="padding-96">
            <div class="fl">
              <div>
                <div class="openImgBox">
                  <img src="../../assets/images/img00024001.jpg" alt="" class="w100">
                </div>
                <p class="imgdescript">图1-31　制作输入框</p>
              </div>
              <div>
                <div class="openImgBox">
                  <img src="../../assets/images/img00024002.jpg" alt="" class="w100">
                </div>
                <p class="imgdescript">图1-32　输入框排列</p>
              </div>
            </div>
            <p class="content">（7）建立数据链接：</p>
            <p class="content">
              â‘ æŒ‰é’®ï¼šåŒå‡»â€œæŒ‡ç¤ºç¯1”按钮，弹出“标准按钮构件属性设置”对话框，如图1-33所示，在“操作属性”选项卡中，默认“抬起功能”按钮为按下状态，选中“数据对象值操作”复选框，选择“清0”选项，建议变量名为“指示灯1”，即在取反控制按钮抬起时，对指示灯1进行清零，如图1-34所示。
            </p>
            <div class="fl">
              <div>
                <div class="openImgBox">
                  <img src="../../assets/images/img00024003.jpg" alt="" class="w100">
                </div>
                <p class="imgdescript">图1-33　标准按钮构件属性设置”对话框</p>
              </div>
              <div>
                <div class="openImgBox">
                  <img src="../../assets/images/img00024004.jpg" alt="" class="w100">
                </div>
                <p class="imgdescript">图1-34　控制按钮设置</p>
              </div>
            </div>
            <p class="content">
              è¾“入指示灯1时会弹出图1-35所示对话框，单击“是”按钮，弹出“数据对象属性设置”对话框，对数据类型进行设置，如图1-36所示，单击“确认”按钮。
            </p>
            <p class="content">
              åŒæ ·ï¼Œåˆ‡æ¢åˆ°â€œæŒ‰ä¸‹åŠŸèƒ½â€é€‰é¡¹å¡è¿›è¡Œè®¾ç½®ï¼Œé€‰æ‹©â€œæ•°æ®å¯¹è±¡å€¼æ“ä½œâ€å¤é€‰æ¡†ï¼Œé€‰æ‹©â€œç½®1”选项，变量名为“指示灯1”，如图1-37所示。
            </p>
            <div class="fl">
              <div style="width: 60%">
                <p class="content">
                  æŒ‡ç¤ºç¯2按钮，“抬起功能”时“清0”；“按下功能”时“置1”，变量名为“指示灯2”。
                </p>
                <p class="content">
                  â‘¡æŒ‡ç¤ºç¯ï¼šåŒå‡»æŒ‡ç¤ºç¯1按钮旁边的指示灯，弹出“单元属性设置”对话框，在“数据对象”选项卡中，单击<img
                    class="h-pic"
                    src="../../assets/images/img00024006.jpg"
                    active="true"
                  />按钮选择数据对象指示灯1，如图1-38所示。同样方法设置“指示灯2”。
                </p>
              </div>
              <div style="width: 40%">
                <div class="qrbodyPic">
                  <div class="openImgBox">
                    <img src="../../assets/images/img00024005.jpg" alt="" class="w100">
                  </div>
                  <p class="imgdescript">图1-35　组态错误对话框</p>
                </div>
              </div>
            </div>
  
            <p class="content">
              â‘¢è¾“入框：双击“状态显示1：”标签旁边的输入框，弹出“输入框构件属性设置”对话框，在“操作属性”选项卡中，单击<img
                class="h-pic"
                src="../../assets/images/img00024007.jpg"
                active="true"
              />按钮弹出“变量选择”对话框，选择“指示灯1”选项，如图1-39所示，设置完成后单击“确认”按钮。
            </p>
          </div>

          <p class="content">
            â‘¢è¾“入框：双击“状态显示1：”标签旁边的输入框，弹出“输入框构件属性设置”对话框，在“操作属性”选项卡中，单击<img
              class="h-pic"
              src="../../assets/images/img00024007.jpg"
              active="true"
            />按钮弹出“变量选择”对话框，选择“指示灯1”选项，如图1-39所示，设置完成后单击“确认”按钮。
          </p>
        </div>
        <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
          <li class="footer-num">12</li>
          <li class="footer-box"></li>
        </ul>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
        <li class="footer-num">12</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 13 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96 pr" page="23">
      <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]" />
            <p class="imgdescript">图1-36　数据对象属性设置</p>
      <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>
            <el-image :src="imgtTen" :preview-src-list="[imgtTen]" />
            <p class="imgdescript">图1-37　按下功能设置</p>
          <div class="fl">
            <div>
              <div class="openImgBox">
                    <img src="../../assets/images/img00025001.jpg" alt="" class="w100">
                  </div>
              <p class="imgdescript">图1-36　数据对象属性设置</p>
            </div>
            <div>
              <div class="openImgBox">
                    <img src="../../assets/images/img00025002.jpg" alt="" class="w100">
                  </div>
              <p class="imgdescript">图1-37　按下功能设置</p>
            </div>
          </div>
        </div>
        <p class="content">
          æŒ‰åŒæ ·çš„方法，双击“状态显示2：”标签旁边的输入框进行设置，在“操作属性”选项卡中，选择对应的数据对象：通道类型选择“指示灯2”，组态完成后，保存。
        </p>
        <div class="fl">
          <div>
            <el-image :src="imgrOne" :preview-src-list="[imgrOne]" />
            <p class="imgdescript">图1-38　选择数据对象指示灯</p>
          <p class="content">
            æŒ‰åŒæ ·çš„方法，双击“状态显示2：”标签旁边的输入框进行设置，在“操作属性”选项卡中，选择对应的数据对象：通道类型选择“指示灯2”，组态完成后，保存。
          </p>
          <div class="fl">
            <div>
              <div class="openImgBox">
                    <img src="../../assets/images/img00025003.jpg" alt="" class="w100">
                  </div>
              <p class="imgdescript">图1-38　选择数据对象指示灯</p>
            </div>
            <div>
              <div class="openImgBox">
                    <img src="../../assets/images/img00025004.jpg" alt="" class="w100">
                  </div>
              <p class="imgdescript">图1-39　指示灯1属性操作</p>
            </div>
          </div>
          <div>
            <el-image :src="imgrTwo" :preview-src-list="[imgrTwo]" />
            <p class="imgdescript">图1-39　指示灯1属性操作</p>
          <p class="quotation fl al-cn t0 primary-color">
            <img
              src="../../assets/images/icon/arrow-three.png"
              alt=""
              class="w-45 mr-5"
            />
            <b>工程下载到TPC7062K</b>
          </p>
          <p class="content">
            ï¼ˆ1）方案一：USB下载。将标准USB2.0打印机线，如图1-40所示，扁平接口插到计算机的USB接口，微型接口插到TPC端的USB2.0接口，连接TPC7062K和PC。
          </p>
          <div class="fl ju-bt">
            <p class="content" style="width: 68%">
              å•å‡»å·¥å…·æ¡ä¸­çš„下载<img
                class="h-pic"
                src="../../assets/images/img00025005.jpg"
                active="true"
              />按钮，进行下载配置。单击“联机运行”按钮，如图1-41所示，选择“USB通信”连接方式，然后单击“通信测试”按钮，通信测试正常后，单击“工程下载”按钮，如图1-42所示。
            </p>
            <div style="width: 30%">
              <div class="openImgBox">
                    <img src="../../assets/images/img00025006.jpg" alt="" class="w100">
                  </div>
              <p class="imgdescript">图1-40　标准USB2.0打印机线</p>
            </div>
          </div>
        </div>
        <p class="quotation fl al-cn t0 primary-color">
          <img
            src="../../assets/images/icon/arrow-three.png"
            alt=""
            class="w-45 mr-5"
          />
          <b>工程下载到TPC7062K</b>
        </p>
        <p class="content">
          ï¼ˆ1）方案一：USB下载。将标准USB2.0打印机线，如图1-40所示，扁平接口插到计算机的USB接口，微型接口插到TPC端的USB2.0接口，连接TPC7062K和PC。
        </p>
        <div class="fl ju-bt">
          <p class="content" style="width: 68%">
  
          <p class="content">
            ï¼ˆ2）方案二：网线下载。用网口下载时，先查看触摸屏IP地址，当触摸屏上电出现滚动进度条以后，单击滚动条，在启动属性查看IP地址，例如IP200.200.200.26，则设置计算机本地连接的IP地址为IP200.200.200.126，二者在同一网段，即IP前三段数字必须相同。或修改触摸屏地址，则进入触摸屏操作系统Windows
            CE，单击Windows的“开始”菜单，选择“设置”命令，运行“网络拨号与连接”，修改IP地址。
          </p>
          <p class="content">
            å•å‡»å·¥å…·æ¡ä¸­çš„下载<img
              class="h-pic"
              src="../../assets/images/img00025005.jpg"
              src="../../assets/images/img00025007.jpg"
              active="true"
            />按钮，进行下载配置。单击“联机运行”按钮，如图1-41所示，选择“USB通信”连接方式，然后单击“通信测试”按钮，通信测试正常后，单击“工程下载”按钮，如图1-42所示。
            />按钮，进行下载配置。单击“联机运行”按钮，连接方式选择“TCP/IP网络通信”，设置触摸屏IP与计算机IP在同一网段内，单击“通信测试”按钮，通
          </p>
          <div style="width: 30%">
            <el-image :src="imgrThree" :preview-src-list="[imgrThree]" />
            <p class="imgdescript">图1-40　标准USB2.0打印机线</p>
          </div>
        </div>

        <p class="content">
          ï¼ˆ2）方案二：网线下载。用网口下载时，先查看触摸屏IP地址，当触摸屏上电出现滚动进度条以后，单击滚动条，在启动属性查看IP地址，例如IP200.200.200.26，则设置计算机本地连接的IP地址为IP200.200.200.126，二者在同一网段，即IP前三段数字必须相同。或修改触摸屏地址，则进入触摸屏操作系统Windows
          CE，单击Windows的“开始”菜单，选择“设置”命令，运行“网络拨号与连接”，修改IP地址。
        </p>
        <p class="content">
          å•å‡»å·¥å…·æ¡ä¸­çš„下载<img
            class="h-pic"
            src="../../assets/images/img00025007.jpg"
            active="true"
          />按钮，进行下载配置。单击“联机运行”按钮，连接方式选择“TCP/IP网络通信”，设置触摸屏IP与计算机IP在同一网段内，单击“通信测试”按钮，通
        </p>
        <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
          <li class="footer-num">13</li>
          <li class="footer-box"></li>
        </ul>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
        <li class="footer-num">13</li>
        <li class="footer-box"></li>
      </ul>
    </div>
    <!-- 14 -->
    <div class="page-box fl fl-cl ju-bt" page="24">
      <div>
        <div class="mt-20">
          <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"
              alt=""
              class="w-45 mr-5"
            />
            <b>TPC模拟运行</b>
          </p>
          <p class="content">
            ç»„态程序下载到“mcgsTpc嵌入式一体化触摸屏”后就可以进行模拟运行。触摸“指示灯1”按钮，如图1-43所示；触摸“指示灯2”按钮，如图1-44所示。
          </p>
          <p class="quotation fl al-cn t0 primary-color">
            <img
              src="../../assets/images/icon/arrow-five.png"
              alt=""
              class="w-45 mr-5"
            />
            <b>计算机上模拟运行</b>
          </p>
          <p class="content">
            é™¤äº†ä¸‹è½½åˆ°TPC进行模拟调试外，可以在计算机上进行模拟运行。选择“模拟运行”，单击“工程下载”按钮后进入运行环境。按下“指示灯1”按钮，如图1-45所示，“指示灯1”变绿，“状态显示1：”为“1”，松手后复位；按下“指示灯2”按钮，如图1-46所示，“指示灯2”变绿，“状态显示2：”为“1”。
          </p>
          <div class="qrbodyPic">
            <el-carousel
              trigger="click"
              class="img-carousel carousel-image"
              arrow="always"
              indicator-position="none"
            >
              <el-carousel-item
                v-for="(item, index) in imgList"
                :key="index"
                class="bones-carousel-item"
      <div v-if="showPageList.indexOf(24) > -1">
        <div>
          <div class="mt-20">
            <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"
                alt=""
                class="w-45 mr-5"
              />
              <b>TPC模拟运行</b>
            </p>
            <p class="content">
              ç»„态程序下载到“mcgsTpc嵌入式一体化触摸屏”后就可以进行模拟运行。触摸“指示灯1”按钮，如图1-43所示；触摸“指示灯2”按钮，如图1-44所示。
            </p>
            <p class="quotation fl al-cn t0 primary-color">
              <img
                src="../../assets/images/icon/arrow-five.png"
                alt=""
                class="w-45 mr-5"
              />
              <b>计算机上模拟运行</b>
            </p>
            <p class="content">
              é™¤äº†ä¸‹è½½åˆ°TPC进行模拟调试外，可以在计算机上进行模拟运行。选择“模拟运行”，单击“工程下载”按钮后进入运行环境。按下“指示灯1”按钮，如图1-45所示，“指示灯1”变绿，“状态显示1：”为“1”，松手后复位；按下“指示灯2”按钮，如图1-46所示，“指示灯2”变绿，“状态显示2：”为“1”。
            </p>
            <div class="qrbodyPic">
              <!-- <el-carousel
                trigger="click"
                class="img-carousel carousel-image"
                arrow="always"
                indicator-position="none"
              >
                <el-image
                  :src="item"
                  :preview-src-list="imgList"
                  :preview-teleported="true"
                  class="open-image"
                />
              </el-carousel-item>
            </el-carousel>
                <el-carousel-item
                  v-for="(item, index) in imgList"
                  :key="index"
                  class="bones-carousel-item"
                >
                  <el-image
                    :src="item"
                    :preview-src-list="imgList"
                    :preview-teleported="true"
                    class="open-image"
                  />
                </el-carousel-item>
              </el-carousel> -->
              <div class="banshi openImgBox">
                  <div class="swiper-container">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/img-list-one.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/img-list-two.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/img-list-three.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/img-list-four.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/img-list-five.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/img-list-six.png"
                          />
                        </div>
                      </div>
                    </div>
                    <div class="swiper-pagination"></div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
        <li class="footer-num">14</li>
        <li class="footer-box"></li>
      </ul>
          <li class="footer-num">14</li>
          <li class="footer-box"></li>
        </ul>
    </div>
    <!-- 15 -->
    <div class="page-box fl fl-cl ju-bt al-end padding-96 pr" page="25">
      <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 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="" />
          </div>
          <p class="content">功能测试表如表1-3所示，评分表如表1-4所示。</p>
          <p class="table-title">
            è¡¨1-3　功能测试表
            <svg
              t="1716802335492"
              class="share-box icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1782"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              width="18"
              height="18"
            >
              <path
                d="M354.986667 219.428571v73.142858H195.047619v536.380952h585.142857V548.571429h73.142857V828.952381a73.142857 73.142857 0 0 1-73.142857 73.142857H195.047619a73.142857 73.142857 0 0 1-73.142857-73.142857V292.571429a73.142857 73.142857 0 0 1 73.142857-73.142858h159.939048z m383.829333-100.473904l172.397714 172.373333-181.00419 181.028571-51.736381-51.712L757.784381 341.333333H670.47619c-139.068952 0-252.245333 110.884571-255.902476 249.07581L414.47619 597.333333v97.52381h-73.142857v-97.52381C341.333333 415.548952 488.69181 268.190476 670.47619 268.190476h114.127239l-97.499429-97.523809 51.712-51.712z"
                p-id="1783"
              ></path>
            </svg>
          </p>
          <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" />
              </td>
              <td class="table-cn">指示灯1</td>
              <td class="table-cn">指示灯2</td>
              <td class="table-cn">显示状态</td>
            </tr>
            <tr>
              <td>按下“指示灯1”按钮</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><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><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>
          <p class="table-title mt-20">
            è¡¨1-4　评分表
            <svg
              t="1716802335492"
              class="share-box icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1782"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              width="18"
              height="18"
            >
              <path
                d="M354.986667 219.428571v73.142858H195.047619v536.380952h585.142857V548.571429h73.142857V828.952381a73.142857 73.142857 0 0 1-73.142857 73.142857H195.047619a73.142857 73.142857 0 0 1-73.142857-73.142857V292.571429a73.142857 73.142857 0 0 1 73.142857-73.142858h159.939048z m383.829333-100.473904l172.397714 172.373333-181.00419 181.028571-51.736381-51.712L757.784381 341.333333H670.47619c-139.068952 0-252.245333 110.884571-255.902476 249.07581L414.47619 597.333333v97.52381h-73.142857v-97.52381C341.333333 415.548952 488.69181 268.190476 670.47619 268.190476h114.127239l-97.499429-97.523809 51.712-51.712z"
                p-id="1783"
              ></path>
            </svg>
          </p>
          <table border="1" cellpadding="2" 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">
                å·¥ ä½œ å½¢ å¼ <br />
                <input type="checkbox" name="xingshi" value="prople" /> ä¸ªäºº
                <input type="checkbox" name="xingshi" value="fengong" /> å°ç»„分工
                <input type="checkbox" name="xingshi" value="xiaozu" /> å°ç»„
              </td>
              <td colspan="2" class="table-cn">
                å·¥ä½œæ—¶é—´/min <br />
                <input style="width: 80px" class="input-border table-bc" />
              </td>
            </tr>
            <tr class="table-bc">
              <td class="table-cn">任务</td>
              <td class="table-cn">训练内容及分配</td>
              <td class="table-cn">训练要求</td>
              <td class="table-cn">学生自评</td>
              <td class="table-cn">教师评分</td>
            </tr>
            <tr>
              <td rowspan="5">
                <div style="width: 20px; margin: 0 auto; text-align: center">
                  å»ºç«‹å·¥ç¨‹å’Œä¸‹è½½å·¥ç¨‹
                </div>
              </td>
              <td class="wh-no">工作步骤及电路图样，20分</td>
              <td>训练步骤:需要的元器件</td>
              <td>
                <textarea class="textarea-table-td"></textarea>
              </td>
              <td>
                <textarea class="textarea-table-td"></textarea>
              </td>
            </tr>
            <tr>
              <td>通信连接，20分</td>
              <td>TPC与PC通信:网口下载、USB下载</td>
              <td><textarea class="textarea-table-td"></textarea></td>
              <td><textarea class="textarea-table-td"></textarea></td>
            </tr>
            <tr>
              <td>工程组态，20分</td>
              <td>设备组态;窗口组态</td>
              <td><textarea class="textarea-table-td"></textarea></td>
              <td><textarea class="textarea-table-td"></textarea></td>
            </tr>
            <tr>
              <td>功能测试，30分</td>
              <td>按钮功能:指示灯功能:显示框功能</td>
              <td><textarea class="textarea-table-td"></textarea></td>
              <td><textarea class="textarea-table-td"></textarea></td>
            </tr>
            <tr>
              <td>职业素养与安全意识，10分</td>
              <td>
                çŽ°åœºå®‰å…¨ä¿æŠ¤;工具、器材、导线等处理操作符合职业要求;遵守纪律，保持工位整洁
              </td>
              <td><textarea class="textarea-table-td"></textarea></td>
              <td><textarea class="textarea-table-td"></textarea></td>
            </tr>
          </table>
          <div class="tl-rg mt-20">
            å­¦ç”Ÿ:<input style="width: 40px" class="input-border" /> æ•™å¸ˆ:<input
              style="width: 40px"
              class="input-border"
            />日期:<input style="width: 82px" class="input-border" />
          </div>
          <!-- <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: 95%"
            ></textarea>
          </p>
          <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: 95%"
            ></textarea>
          </p>
          <p class="quotation t0">
            3．在淘宝网站查找任务一中主流PLC与触摸屏连接线型号、性能和价格。
          </p>
          <p class="question-textaere">
            <textarea
              cols="30"
              rows="6"
              placeholder="请输入内容"
              maxlength="800"
              class="ta-br textarea-text"
              style="width: 95%"
            ></textarea>
          </p>
          <p class="quotation t0">
            4．分析计算机、平板电脑、触摸屏、PLC之间连接的异同。
          </p>
          <p class="question-textaere">
            <textarea
              cols="30"
              rows="6"
              placeholder="请输入内容"
              maxlength="800"
              class="ta-br textarea-text"
              style="width: 95%"
            ></textarea>
          </p>
          <p class="quotation t0">
            5．什么是用户应用系统、组态环境与运行环境？组态环境是开发工具吗？
          </p>
          <p class="question-textaere">
            <textarea
              cols="30"
              rows="6"
              placeholder="请输入内容"
              maxlength="800"
              class="ta-br textarea-text"
              style="width: 95%"
            ></textarea>
          </p>
          <p class="quotation t0">
            6．MCGS触摸屏安装何种操作系统？主要自带何种应用软件？从www.mcgs.com.cn网站下载最新软件包并安装，在www.gongkong.com注册，进入BBS讨论工控软件技术。
          </p>
          <p class="question-textaere">
            <textarea
              cols="30"
              rows="6"
              placeholder="请输入内容"
              maxlength="800"
              class="ta-br textarea-text"
              style="width: 95%"
            ></textarea>
          </p>
          <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: 95%"
            ></textarea>
          </p>
          <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: 95%"
            ></textarea>
          </p>
          <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: 95%"
            ></textarea>
          </p>
        </div>
        <p class="content">功能测试表如表1-3所示，评分表如表1-4所示。</p>
        <p class="table-title">
          è¡¨1-3　功能测试表
          <svg
            t="1716802335492"
            class="share-box icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1782"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="18"
            height="18"
          >
            <path
              d="M354.986667 219.428571v73.142858H195.047619v536.380952h585.142857V548.571429h73.142857V828.952381a73.142857 73.142857 0 0 1-73.142857 73.142857H195.047619a73.142857 73.142857 0 0 1-73.142857-73.142857V292.571429a73.142857 73.142857 0 0 1 73.142857-73.142858h159.939048z m383.829333-100.473904l172.397714 172.373333-181.00419 181.028571-51.736381-51.712L757.784381 341.333333H670.47619c-139.068952 0-252.245333 110.884571-255.902476 249.07581L414.47619 597.333333v97.52381h-73.142857v-97.52381C341.333333 415.548952 488.69181 268.190476 670.47619 268.190476h114.127239l-97.499429-97.523809 51.712-51.712z"
              p-id="1783"
            ></path>
          </svg>
        </p>
        <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" />
            </td>
            <td class="table-cn">指示灯1</td>
            <td class="table-cn">指示灯2</td>
            <td class="table-cn">显示状态</td>
          </tr>
          <tr>
            <td>按下“指示灯1”按钮</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><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><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>
        <p class="table-title mt-20">
          è¡¨1-4　评分表
          <svg
            t="1716802335492"
            class="share-box icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1782"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="18"
            height="18"
          >
            <path
              d="M354.986667 219.428571v73.142858H195.047619v536.380952h585.142857V548.571429h73.142857V828.952381a73.142857 73.142857 0 0 1-73.142857 73.142857H195.047619a73.142857 73.142857 0 0 1-73.142857-73.142857V292.571429a73.142857 73.142857 0 0 1 73.142857-73.142858h159.939048z m383.829333-100.473904l172.397714 172.373333-181.00419 181.028571-51.736381-51.712L757.784381 341.333333H670.47619c-139.068952 0-252.245333 110.884571-255.902476 249.07581L414.47619 597.333333v97.52381h-73.142857v-97.52381C341.333333 415.548952 488.69181 268.190476 670.47619 268.190476h114.127239l-97.499429-97.523809 51.712-51.712z"
              p-id="1783"
            ></path>
          </svg>
        </p>
        <table border="1" cellpadding="2" 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">
              å·¥ ä½œ å½¢ å¼ <br />
              <input type="checkbox" name="xingshi" value="prople" /> ä¸ªäºº
              <input type="checkbox" name="xingshi" value="fengong" /> å°ç»„分工
              <input type="checkbox" name="xingshi" value="xiaozu" /> å°ç»„
            </td>
            <td colspan="2" class="table-cn">
              å·¥ä½œæ—¶é—´/min <br />
              <input style="width: 80px" class="input-border table-bc" />
            </td>
          </tr>
          <tr class="table-bc">
            <td class="table-cn">任务</td>
            <td class="table-cn">训练内容及分配</td>
            <td class="table-cn">训练要求</td>
            <td class="table-cn">学生自评</td>
            <td class="table-cn">教师评分</td>
          </tr>
          <tr>
            <td rowspan="5">
              <div style="width: 20px; margin: 0 auto; text-align: center">
                å»ºç«‹å·¥ç¨‹å’Œä¸‹è½½å·¥ç¨‹
              </div>
            </td>
            <td class="wh-no">工作步骤及电路图样，20分</td>
            <td>训练步骤:需要的元器件</td>
            <td>
              <textarea class="textarea-table-td"></textarea>
            </td>
            <td>
              <textarea class="textarea-table-td"></textarea>
            </td>
          </tr>
          <tr>
            <td>通信连接，20分</td>
            <td>TPC与PC通信:网口下载、USB下载</td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
          </tr>
          <tr>
            <td>工程组态，20分</td>
            <td>设备组态;窗口组态</td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
          </tr>
          <tr>
            <td>功能测试，30分</td>
            <td>按钮功能:指示灯功能:显示框功能</td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
          </tr>
          <tr>
            <td>职业素养与安全意识，10分</td>
            <td>
              çŽ°åœºå®‰å…¨ä¿æŠ¤;工具、器材、导线等处理操作符合职业要求;遵守纪律，保持工位整洁
            </td>
            <td><textarea class="textarea-table-td"></textarea></td>
            <td><textarea class="textarea-table-td"></textarea></td>
          </tr>
        </table>
        <div class="tl-rg mt-20">
          å­¦ç”Ÿ:<input style="width: 40px" class="input-border" /> æ•™å¸ˆ:<input
            style="width: 40px"
            class="input-border"
          />日期:<input style="width: 82px" class="input-border" />
        </div>
        <!-- <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: 95%"
          ></textarea>
        </p>
        <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: 95%"
          ></textarea>
        </p>
        <p class="quotation t0">
          3．在淘宝网站查找任务一中主流PLC与触摸屏连接线型号、性能和价格。
        </p>
        <p class="question-textaere">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 95%"
          ></textarea>
        </p>
        <p class="quotation t0">
          4．分析计算机、平板电脑、触摸屏、PLC之间连接的异同。
        </p>
        <p class="question-textaere">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 95%"
          ></textarea>
        </p>
        <p class="quotation t0">
          5．什么是用户应用系统、组态环境与运行环境？组态环境是开发工具吗？
        </p>
        <p class="question-textaere">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 95%"
          ></textarea>
        </p>
        <p class="quotation t0">
          6．MCGS触摸屏安装何种操作系统？主要自带何种应用软件？从www.mcgs.com.cn网站下载最新软件包并安装，在www.gongkong.com注册，进入BBS讨论工控软件技术。
        </p>
        <p class="question-textaere">
          <textarea
            cols="30"
            rows="6"
            placeholder="请输入内容"
            maxlength="800"
            class="ta-br textarea-text"
            style="width: 95%"
          ></textarea>
        </p>
        <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: 95%"
          ></textarea>
        </p>
        <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: 95%"
          ></textarea>
        </p>
        <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: 95%"
          ></textarea>
        </p>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
        <li class="footer-num">15</li>
        <li class="footer-box"></li>
      </ul>
        <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40">
          <li class="footer-num">15</li>
          <li class="footer-box"></li>
        </ul>
    </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "chapterOne",
  props: {
    showPageList: {
      type: Array,
    },
  },
  data() {
    return {
      imgOne: require("../../assets/images/img00014001.jpg"),
      imgTwo: require("../../assets/images/img00014002.jpg"),
      imgThree: require("../../assets/images/img00014003.jpg"),
      imgFour: require("../../assets/images/img00014004.jpg"),
      imgFive: require("../../assets/images/img00015001.jpg"),
      imgSix: require("../../assets/images/img00017001.jpg"),
      imgSeven: require("../../assets/images/img00017002.jpg"),
      imgEnight: require("../../assets/images/img00017003.jpg"),
      imgNine: require("../../assets/images/img00017004.jpg"),
      imgTen: require("../../assets/images/img00017005.jpg"),
      imgEleven: require("../../assets/images/img00018001.jpg"),
      imgTwelve: require("../../assets/images/img00018002.jpg"),
      imgThirteen: require("../../assets/images/img00018003.jpg"),
      imgFourteen: require("../../assets/images/img00019001.jpg"),
      imgFifteen: require("../../assets/images/img00022001.jpg"),
      imgSixteen: require("../../assets/images/img00022002.jpg"),
      imgSeventeen: require("../../assets/images/img00022003.jpg"),
      imgEighteen: require("../../assets/images/img00022004.jpg"),
      imgNineTeen: require("../../assets/images/img00023001.jpg"),
      imgTwenty: require("../../assets/images/img00023002.jpg"),
      imgtOne: require("../../assets/images/img00023003.jpg"),
      imgtTwo: require("../../assets/images/img00023004.jpg"),
      imgtThree: require("../../assets/images/img00023005.jpg"),
      imgtFour: require("../../assets/images/img00024001.jpg"),
      imgtFive: require("../../assets/images/img00024002.jpg"),
      imgtSix: require("../../assets/images/img00024003.jpg"),
      imgtSeven: require("../../assets/images/img00024004.jpg"),
      imgtEnight: require("../../assets/images/img00024005.jpg"),
      imgtNine: require("../../assets/images/img00025001.jpg"),
      imgtTen: require("../../assets/images/img00025002.jpg"),
      imgrOne: require("../../assets/images/img00025003.jpg"),
      imgrTwo: require("../../assets/images/img00025004.jpg"),
      imgrThree: require("../../assets/images/img00025006.jpg"),
      tableOne: require("../../assets/images/img00019002.jpg"),
      videoOne: true,
      bonesList: [
        require("../../assets/images/carousel-one.png"),
        require("../../assets/images/carousel-two.png"),
        require("../../assets/images/carousel-three.png"),
        require("../../assets/images/carousel-four.png"),
        require("../../assets/images/carousel-five.png"),
        require("../../assets/images/carousel-six.png"),
      ],
      imgList: [
        require("../../assets/images/img-list-one.png"),
        require("../../assets/images/img-list-two.png"),
@@ -1695,7 +1856,8 @@
</script>
<style scoped lang="less">
p {
  font-family: "Segoe UI", Arial, "宋体", SimSun, sans-serif !important;
  // font-family: "Segoe UI", Arial, "宋体", SimSun, sans-serif !important;
  font-family: "Times New Roman", "宋体", SimSun, sans-serif !important;
  margin: 0;
  text-align: justify;
}
@@ -1759,4 +1921,10 @@
  text-indent: 0;
  padding-left: 23px;
}
.banshi {
  margin-top: 40px;
  width: 100%;
  height: 350px;
  margin: 0 auto;
}
</style>

 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">
      <h1 class="frontCover" title="">
        <img alt="封面" src="../../assets/images/device_pad_Frontcover.jpg" class="cover-box w100" />
      </h1>
      <div v-if="showPageList.indexOf(1) > -1">
        <h1 class="frontCover" title="">
          <img
            alt="封面"
            src="../../assets/images/device_pad_Frontcover.jpg"
            class="cover-box w100"
          />
        </h1>
      </div>
    </div>
    <!-- ä½œè€…简介 -->
    <div
@@ -12,234 +18,266 @@
      style="width: 408px; margin: 0 auto"
      page="2"
    >
      <document>
        <h1 class="author-box">作者简介</h1>
        <div class="bodyPic">
          <img src="../../assets/images/img00002002.jpg" active="true" />
        </div>
        <p class="quotation">
          å¼ æ–‡æ˜Žï¼Œæ•™æŽˆï¼Œæ±Ÿè‹çœç‰¹è‰²ä¸“业机电一体化技术专业带头人，省重点专业群建设负责人，主持“工控系统安装与调试”国家级精品资源共享课程建设，主编的《嵌入式组态控制技术》《可编程控制器及网络控制技术》被列为教育部“十二五”职业教育国家规划立项教材。
        </p>
        <div class="bodyPic">
          <img src="../../assets/images/img00002003.jpg" active="true" />
        </div>
        <p class="quotation">
          åŽç¥–银，毕业于中国农业大学，北京昆仑通态自动化软件科技有限公司的创始人之一，总工程师、总经理。昆仑通态成立之初，敏锐洞察市场动向，首创软硬结合发展的道路。2002年，带领公司研发出国内首屈一指的人机界面产品，开创了国内人机界面新的市场标准，开启了本土化的新里程碑，在工控领域取得重大突破。
        </p>
      </document>
      <div v-if="showPageList.indexOf(2) > -1">
        <document>
          <h1 class="author-box">作者简介</h1>
          <div class="bodyPic">
            <img src="../../assets/images/img00002002.jpg" active="true" />
          </div>
          <p class="quotation">
            å¼ æ–‡æ˜Žï¼Œæ•™æŽˆï¼Œæ±Ÿè‹çœç‰¹è‰²ä¸“业机电一体化技术专业带头人，省重点专业群建设负责人，主持“工控系统安装与调试”国家级精品资源共享课程建设，主编的《嵌入式组态控制技术》《可编程控制器及网络控制技术》被列为教育部“十二五”职业教育国家规划立项教材。
          </p>
          <div class="bodyPic">
            <img src="../../assets/images/img00002003.jpg" active="true" />
          </div>
          <p class="quotation">
            åŽç¥–银，毕业于中国农业大学，北京昆仑通态自动化软件科技有限公司的创始人之一，总工程师、总经理。昆仑通态成立之初，敏锐洞察市场动向，首创软硬结合发展的道路。2002年，带领公司研发出国内首屈一指的人机界面产品，开创了国内人机界面新的市场标准，开启了本土化的新里程碑，在工控领域取得重大突破。
          </p>
        </document>
      </div>
    </div>
    <!-- å°é¢ -->
    <div class="page-box" page="3">
      <h1 class="frontCover" title="封面">
        <img alt="封面" src="../../assets/images/device_pad_Frontcover.jpg" class="cover-box w100">
      </h1>
      <div v-if="showPageList.indexOf(3) > -1">
        <h1 class="frontCover" title="封面">
          <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">
      <document>
        <h1>内容简介</h1>
        <p class="quotation cl-66">
          æœ¬ä¹¦æ˜¯é«˜èŒé™¢æ ¡ä¸ŽåŒ—京昆仑通态自动化软件科技有限公司共同开发的项目化教材，是“十二五”职业教育国家规划教材。本书基于工作过程导向，面向“双师型”教师和工控行业技术人员，服务于机电和自动化类专业的职业能力培养。
        </p>
        <p class="quotation cl-66">
          æœ¬ä¹¦ç”±å½©è‰²çº¸è´¨æ•™æå’Œç½‘络资源组成。彩色纸质教材主要包括：触摸屏组态介绍、“触摸屏+PLC”监控工程、“触摸屏+PLC+变频器（伺服）”通信与控制、“触摸屏+PLC+传感器”水位控制工程、“触摸屏+分布式模块”工控工程、过程控制工程、“智能电梯装调与维护”全国技能大赛赛题、“自动化生产线安装与调试”全国技能大赛组态设计、触摸屏与单片机通信驱动开发实例等内容，同时每个项目中的任务安排了任务目标、任务描述、任务训练和评价。网络资源含MCGS嵌入式组态软件、工程案例、课程标准、教学案例和教学设计等，为“教”和“学”提供了生动、直观、便捷、立体的教学资源。
        </p>
        <p class="quotation cl-66">
          æœ¬ä¹¦å†…容具有典型性、实用性、先进性、可操作性的特色。
        </p>
        <p class="quotation cl-66">
          æœ¬ä¹¦é€‚合作为高等职业教育机电一体化技术、电气自动化技术、生产过程自动化、机电安装工程等机电类专业的教材，也可作为相关工程技术人员培训和自修用书。
        </p>
      </document>
      <!-- <h2 class="copyRightTitle">版权信息</h2>
      <p class="contentCR">书名：嵌入式组态控制技术（第3版）</p>
      <p class="contentCR">作者：张文明,华祖银</p>
      <p class="contentCR">出版社：中国铁道出版社</p>
      <p class="contentCR">出版时间：2019-07</p>
      <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">
        <!-- <p class="content">图书在版编目(CIP)数据</p>
        <p class="content">嵌入式组态控制技术/张文明，华祖银主编.-3 ç‰ˆ.</p>
        <p class="content">-北京:中国铁道出版社有限公司，2019.7</p>
        <p class="content">
          åäºŒäº””职业教育国家规划教材 å…¨å›½é«˜èŒé«˜ä¸“院校机电类专业规划教材
        </p>
        <p class="conten">ISBN 978-7-113-25402-5</p>
        <p class="content">
          |.①嵌… | .①张… â‘¡åŽâ€¦ å· .①微型计算机计算机控制系统-高等职业教育-教材
          I.①TP273
        </p>
        <p class="content">中国版本图书馆 CIP æ•°æ®æ ¸å­—(2019)第 098900 å·</p> -->
        <p class="content t0">书名:嵌入式组态控制技术(第三版)</p>
        <p class="content t0">作者:张文明 åŽç¥–银</p>
      </div>
      <hr />
      <div class="fl">
        <div class="left">
          <p class="t0">策划：何红艳</p>
          <p class="t0">责任编辑：何红艳</p>
          <p class="t0">封面设计：付 å·</p>
          <p class="t0">封面制作：刘颖</p>
          <p class="t0">责任校对：张玉华</p>
          <p class="t0">责任印制：郭向伟</p>
      <div v-if="showPageList.indexOf(4) > -1">
        <document>
          <h1>内容简介</h1>
          <p class="quotation cl-66">
            æœ¬ä¹¦æ˜¯é«˜èŒé™¢æ ¡ä¸ŽåŒ—京昆仑通态自动化软件科技有限公司共同开发的项目化教材，是“十二五”职业教育国家规划教材。本书基于工作过程导向，面向“双师型”教师和工控行业技术人员，服务于机电和自动化类专业的职业能力培养。
          </p>
          <p class="quotation cl-66">
            æœ¬ä¹¦ç”±å½©è‰²çº¸è´¨æ•™æå’Œç½‘络资源组成。彩色纸质教材主要包括：触摸屏组态介绍、“触摸屏+PLC”监控工程、“触摸屏+PLC+变频器（伺服）”通信与控制、“触摸屏+PLC+传感器”水位控制工程、“触摸屏+分布式模块”工控工程、过程控制工程、“智能电梯装调与维护”全国技能大赛赛题、“自动化生产线安装与调试”全国技能大赛组态设计、触摸屏与单片机通信驱动开发实例等内容，同时每个项目中的任务安排了任务目标、任务描述、任务训练和评价。网络资源含MCGS嵌入式组态软件、工程案例、课程标准、教学案例和教学设计等，为“教”和“学”提供了生动、直观、便捷、立体的教学资源。
          </p>
          <p class="quotation cl-66">
            æœ¬ä¹¦å†…容具有典型性、实用性、先进性、可操作性的特色。
          </p>
          <p class="quotation cl-66">
            æœ¬ä¹¦é€‚合作为高等职业教育机电一体化技术、电气自动化技术、生产过程自动化、机电安装工程等机电类专业的教材，也可作为相关工程技术人员培训和自修用书。
          </p>
        </document>
        <!-- <h2 class="copyRightTitle">版权信息</h2>
        <p class="contentCR">书名：嵌入式组态控制技术（第3版）</p>
        <p class="contentCR">作者：张文明,华祖银</p>
        <p class="contentCR">出版社：中国铁道出版社</p>
        <p class="contentCR">出版时间：2019-07</p>
        <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" />
          <!-- <p class="content">图书在版编目(CIP)数据</p>
          <p class="content">嵌入式组态控制技术/张文明，华祖银主编.-3 ç‰ˆ.</p>
          <p class="content">-北京:中国铁道出版社有限公司，2019.7</p>
          <p class="content">
            åäºŒäº””职业教育国家规划教材 å…¨å›½é«˜èŒé«˜ä¸“院校机电类专业规划教材
          </p>
          <p class="conten">ISBN 978-7-113-25402-5</p>
          <p class="content">
            |.①嵌… | .①张… â‘¡åŽâ€¦ å· .①微型计算机计算机控制系统-高等职业教育-教材
            I.①TP273
          </p>
          <p class="content">中国版本图书馆 CIP æ•°æ®æ ¸å­—(2019)第 098900 å·</p> -->
          <p class="content t0">书名:嵌入式组态控制技术(第三版)</p>
          <p class="content t0">作者:张文明 åŽç¥–银</p>
        </div>
        <div class="right" style="margin-left: 150px">
          <p>读者热线：(010)63550836</p>
        <hr />
        <div class="fl">
          <div class="left">
            <p class="t0">策划：何红艳</p>
            <p class="t0">责任编辑：何红艳</p>
            <p class="t0">封面设计：付 å·</p>
            <p class="t0">封面制作：刘颖</p>
            <p class="t0">责任校对：张玉华</p>
            <p class="t0">责任印制：郭向伟</p>
          </div>
          <div class="right" style="margin-left: 150px">
            <p>读者热线：(010)63550836</p>
          </div>
        </div>
      </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">印&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;价：59.80元</p>
      <hr />
      <p class="tl-cn">版权所有，侵权必究</p>
      <p>
        å‡¡è´­ä¹°é“é“版图书，如有印制质量问题，请与本社教材图书营销部联系调换。电话:(010)63550836
      </p>
      <p class="tl-cn">打击盗版举报电话:(010)51873659</p>
        <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">印&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;价：59.80元</p>
        <hr />
        <p class="tl-cn">版权所有，侵权必究</p>
        <p>
          å‡¡è´­ä¹°é“é“版图书，如有印制质量问题，请与本社教材图书营销部联系调换。电话:(010)63550836
        </p>
        <p class="tl-cn">打击盗版举报电话:(010)51873659</p>
      </div>
    </div>
    <!-- ç¼–审委员会 -->
    <div class="page-box page-padding" page="5">
      <document>
        <p class="content t-center bs-box">
          å…¨å›½é«˜èŒé«˜ä¸“院校机电类专业规划教材
        </p>
        <div class="fl bs-content-box">
          <div class="left fl">
            <h1 class="wr-md bs-title">编审委员会</h1>
            <p class="line"></p>
      <div v-if="showPageList.indexOf(5) > -1">
        <document>
          <p class="content t-center bs-box">
            å…¨å›½é«˜èŒé«˜ä¸“院校机电类专业规划教材
          </p>
          <div class="fl bs-content-box">
            <div class="left fl">
              <h1 class="wr-md bs-title">编审委员会</h1>
              <p class="line"></p>
            </div>
            <div class="right" style="margin-left: 10px">
              <p class="quotation"><b>主　任：</b>吕景泉</p>
              <p class="quotation"><b>副主任：</b>严晓舟　史丽萍</p>
              <p class="quotation"><b>委　员：</b>（按姓氏笔画排序）</p>
              <p class="quotation">
                ã€€ã€€ã€€ã€€çŽ‹ã€€ç«‹ã€€çŽ‹æ–‡ä¹‰ã€€çŽ‹é¾™ä¹‰ã€€çŽ‹å»ºæ˜Žã€€ç‰›äº‘陞
              </p>
              <p class="quotation">
                ã€€ã€€ã€€ã€€æœ±å‡¤èŠã€€åˆ˜å»ºè¶…　刘薇娥　关　健　汤晓华
              </p>
              <p class="quotation">
                ã€€ã€€ã€€ã€€ç‰Ÿå¿—华　李　文　李　军　李向东　肖方晨
              </p>
              <p class="quotation">
                ã€€ã€€ã€€ã€€ç‹„建雄　汪敏生　宋淑海　张　耀　张文明
              </p>
              <p class="quotation">
                ã€€ã€€ã€€ã€€å¼ æ°¸èŠ±ã€€é™†å»ºå›½ã€€é™ˆã€€ä¸½ã€€é™ˆé“ç‰›ã€€æž—　嵩
              </p>
              <p class="quotation">
                ã€€ã€€ã€€ã€€æ˜Žç«‹å†›ã€€é‡‘卫国　宝爱群　胡学同　钟江生
              </p>
              <p class="quotation">
                ã€€ã€€ã€€ã€€ç¥ç‘žèŠ±ã€€å§šã€€å‰ã€€å§šæ°¸åˆšã€€ç§¦ç›Šéœ–　秦绪好
              </p>
              <p class="quotation">
                ã€€ã€€ã€€ã€€é’±é€¸ç§‹ã€€å¾å›½æž—　凌艺春　常晓玲　梁荣新
              </p>
              <p class="quotation">　　　　韩　丽　程　周　曾照香　谭有广</p>
            </div>
          </div>
          <div class="right" style="margin-left: 10px">
            <p class="quotation"><b>主　任：</b>吕景泉</p>
            <p class="quotation"><b>副主任：</b>严晓舟　史丽萍</p>
            <p class="quotation"><b>委　员：</b>（按姓氏笔画排序）</p>
            <p class="quotation">
              ã€€ã€€ã€€ã€€çŽ‹ã€€ç«‹ã€€çŽ‹æ–‡ä¹‰ã€€çŽ‹é¾™ä¹‰ã€€çŽ‹å»ºæ˜Žã€€ç‰›äº‘陞
            </p>
            <p class="quotation">
              ã€€ã€€ã€€ã€€æœ±å‡¤èŠã€€åˆ˜å»ºè¶…　刘薇娥　关　健　汤晓华
            </p>
            <p class="quotation">
              ã€€ã€€ã€€ã€€ç‰Ÿå¿—华　李　文　李　军　李向东　肖方晨
            </p>
            <p class="quotation">
              ã€€ã€€ã€€ã€€ç‹„建雄　汪敏生　宋淑海　张　耀　张文明
            </p>
            <p class="quotation">
              ã€€ã€€ã€€ã€€å¼ æ°¸èŠ±ã€€é™†å»ºå›½ã€€é™ˆã€€ä¸½ã€€é™ˆé“ç‰›ã€€æž—　嵩
            </p>
            <p class="quotation">
              ã€€ã€€ã€€ã€€æ˜Žç«‹å†›ã€€é‡‘卫国　宝爱群　胡学同　钟江生
            </p>
            <p class="quotation">
              ã€€ã€€ã€€ã€€ç¥ç‘žèŠ±ã€€å§šã€€å‰ã€€å§šæ°¸åˆšã€€ç§¦ç›Šéœ–　秦绪好
            </p>
            <p class="quotation">
              ã€€ã€€ã€€ã€€é’±é€¸ç§‹ã€€å¾å›½æž—　凌艺春　常晓玲　梁荣新
            </p>
            <p class="quotation">　　　　韩　丽　程　周　曾照香　谭有广</p>
          </div>
        </div>
      </document>
        </document>
      </div>
    </div>
    <!-- å‡ºç‰ˆè¯´æ˜Ž -->
    <div class="page-box pd-104" page="6">
      <div class="page-heder-img">
        <img src="../../assets/images/publish.png" alt="" class="mt-100" />
      </div>
      <div class="padding-96">
        <document class="cl-66">
          <p class="quotation">
            éšç€æˆ‘国高等职业教育改革的不断深入，我国高等职业教育的发展进入了一个新的阶段。教育部下发的《关于全面提高高等职业教育教学质量的若干意见》文件，旨在阐述社会发展对高素质技能型人才的需求，以及如何推进高职人才培养模式改革，提高人才培养质量。
          </p>
          <p class="quotation">
            æ•™æçš„出版工作是整个高等职业院校教育教学工作中的重要组成部分，教材是课程内容和课程体系的载体，对课程改革和建设具有推动作用，所以提高课程教学水平和教学质量的关键在于出版高水平、高质量的教材。
          </p>
          <p class="quotation">
            å‡ºç‰ˆé¢å‘高等职业教育的“以就业为导向，以能力为本位”的优质教材一直就是中国铁道出版社优先开发的领域。我社本着“依靠专家、研究先行、服务为本、打造精品”的出版理念，于2007年成立了“中国铁道出版社高职机电类课程建设研究组”，并经过两年的充分调查研究，策划编写、出版了本系列教材。
          </p>
          <p class="quotation">
            æœ¬ç³»åˆ—教材主要涵盖高职高专机电类的公共课及六个专业的相关课程，它们是电气自动化专业、机电一体化专业、生产过程自动化专业、数控技术专业、模具设计与制造专业以及数控设备应用与维护专业。它们共同成为体系，又具有相对独立性。本系列教材在编写过程中邀请了高职高专自动化教指委专家、国家级教学名师、精品课负责人、知名专家教授、学术带头人及骨干教师。他们针对相关专业的课程，结合了多年教学中的实践经验，同时吸取了高等职业教育改革的成果，因此无论教学理念的导向、教学标准的开发、教学体系的确立、教材内容的筛选、教材结构的设计，还是教材素材的选择都极具特色。
          </p>
          <p class="quotation">本系列教材的特点归纳如下：</p>
          <p class="quotation">
            ï¼ˆ1）围绕培养学生的职业技能这条主线设计教材的结构，理论联系实际，从应用的角度组织编写内容，突出实用性，并同时注意将新技术、新成果纳入教材。
          </p>
          <p class="quotation">
            ï¼ˆ2）根据机电类课程的特点，对基本理论和方法的讲述力求简单、易于理解，以缓解繁多的知识内容与偏少的学时之间的矛盾。同时，增加了相关技术在实际生产、生活中的应用实例，从而激发学生的学习热情。
          </p>
          <p class="quotation">
            ï¼ˆ3）将“问题引导式”“案例式”“任务驱动式”“项目驱动式”等多种教学方法引入教材体例的设计中，融入启发式的教学方法，力求好教、好学、爱学。
          </p>
          <p class="quotation">
            ï¼ˆ4）注重立体化教材的建设。本系列教材通过主教材、配套光盘、电子教案等教学资源的有机结合，来提高教学服务水平。
          </p>
          <p class="quotation">
            æœ¬ç³»åˆ—教材在策划出版过程中得到了教育部高职高专自动化技术类专业教学指导委员会委员以及广大专家的指导和帮助，在此表示深深的感谢。希望本系列丛书的出版能为我国高等职业院校教育改革起到良好的推动作用，欢迎使用本系列教材的老师和同学们提出宝贵的意见和建议。书中如有不妥之处，敬请批评指正。
          </p>
          <p class="content t-right">中国铁道出版社有限公司</p>
        </document>
      <div v-if="showPageList.indexOf(6) > -1">
        <div class="page-heder-img">
          <img src="../../assets/images/publish.png" alt="" class="mt-100" />
        </div>
        <div class="padding-96">
          <document class="cl-66">
            <p class="quotation">
              éšç€æˆ‘国高等职业教育改革的不断深入，我国高等职业教育的发展进入了一个新的阶段。教育部下发的《关于全面提高高等职业教育教学质量的若干意见》文件，旨在阐述社会发展对高素质技能型人才的需求，以及如何推进高职人才培养模式改革，提高人才培养质量。
            </p>
            <p class="quotation">
              æ•™æçš„出版工作是整个高等职业院校教育教学工作中的重要组成部分，教材是课程内容和课程体系的载体，对课程改革和建设具有推动作用，所以提高课程教学水平和教学质量的关键在于出版高水平、高质量的教材。
            </p>
            <p class="quotation">
              å‡ºç‰ˆé¢å‘高等职业教育的“以就业为导向，以能力为本位”的优质教材一直就是中国铁道出版社优先开发的领域。我社本着“依靠专家、研究先行、服务为本、打造精品”的出版理念，于2007年成立了“中国铁道出版社高职机电类课程建设研究组”，并经过两年的充分调查研究，策划编写、出版了本系列教材。
            </p>
            <p class="quotation">
              æœ¬ç³»åˆ—教材主要涵盖高职高专机电类的公共课及六个专业的相关课程，它们是电气自动化专业、机电一体化专业、生产过程自动化专业、数控技术专业、模具设计与制造专业以及数控设备应用与维护专业。它们共同成为体系，又具有相对独立性。本系列教材在编写过程中邀请了高职高专自动化教指委专家、国家级教学名师、精品课负责人、知名专家教授、学术带头人及骨干教师。他们针对相关专业的课程，结合了多年教学中的实践经验，同时吸取了高等职业教育改革的成果，因此无论教学理念的导向、教学标准的开发、教学体系的确立、教材内容的筛选、教材结构的设计，还是教材素材的选择都极具特色。
            </p>
            <p class="quotation">本系列教材的特点归纳如下：</p>
            <p class="quotation">
              ï¼ˆ1）围绕培养学生的职业技能这条主线设计教材的结构，理论联系实际，从应用的角度组织编写内容，突出实用性，并同时注意将新技术、新成果纳入教材。
            </p>
            <p class="quotation">
              ï¼ˆ2）根据机电类课程的特点，对基本理论和方法的讲述力求简单、易于理解，以缓解繁多的知识内容与偏少的学时之间的矛盾。同时，增加了相关技术在实际生产、生活中的应用实例，从而激发学生的学习热情。
            </p>
            <p class="quotation">
              ï¼ˆ3）将“问题引导式”“案例式”“任务驱动式”“项目驱动式”等多种教学方法引入教材体例的设计中，融入启发式的教学方法，力求好教、好学、爱学。
            </p>
            <p class="quotation">
              ï¼ˆ4）注重立体化教材的建设。本系列教材通过主教材、配套光盘、电子教案等教学资源的有机结合，来提高教学服务水平。
            </p>
            <p class="quotation">
              æœ¬ç³»åˆ—教材在策划出版过程中得到了教育部高职高专自动化技术类专业教学指导委员会委员以及广大专家的指导和帮助，在此表示深深的感谢。希望本系列丛书的出版能为我国高等职业院校教育改革起到良好的推动作用，欢迎使用本系列教材的老师和同学们提出宝贵的意见和建议。书中如有不妥之处，敬请批评指正。
            </p>
            <p class="content t-right">中国铁道出版社有限公司</p>
          </document>
        </div>
      </div>
    </div>
    <!-- ç¬¬ä¸‰ç‰ˆ -->
    <div class="page-box pd-104" page="7">
      <div class="page-heder-img">
        <img src="../../assets/images/qianyan.png" class="mt-100" alt="" />
      </div>
      <div class="padding-103">
        <document>
          <p class="quotation cl-66">
            æœ¬ä¹¦æ˜¯é«˜èŒé™¢æ ¡ä¸ŽåŒ—京昆仑通态自动化软件科技有限公司（以下简称“昆仑通态公司”）合作编写的基于工作过程导向、面向教师和工控行业技术人员、服务于机电和自动化类专业职业能力培养的“十二五”职业教育国家规划教材。
          </p>
          <p class="quotation cl-66">
            æœ¬ä¹¦ä»¥ä¹ä¸ªé¡¹ç›®å¼•é¢†è¯»è€…学习由触摸屏、PLC、变频器、传感器、通信协议等集成的小型工控系统，对每个训练项目的每个动作和步骤设要求、定目标，在实践过程中注重企业生产元素，融通生产工艺，紧贴生产过程，“任务明确、步骤清晰、过程规范、考评到位”，能培养严谨的工作作风和精益求精的产品意识，成就工控高手的梦想。
          </p>
          <p class="quotation fl al-cn t0">
            <img
              src="../../assets/images/icon/beijing.png"
              alt=""
              class="mr-5"
            />
            <b>编写背景</b>
          </p>
          <p class="quotation cl-66">
            æœ¬ä¹¦åšæŒåŸºäºŽå·¥ä½œè¿‡ç¨‹å¯¼å‘的项目化教学改革方向，坚持将行业与企业的典型、实用、操作性强的工程项目引入课堂，坚持发挥行动导向教学的示范辐射作用。
          </p>
          <p class="quotation cl-66">
            åŒ—京昆仑通态MCGS触摸屏是国内主流工控产品，不仅使大量的工业控制设备或生产设备具有更多的自动化功能，也是企业实现管控一体化的理想选择。在与昆仑通态公司合作开发“工控系统安装与调试”课程（http://gxkc.cztgi.edu.cn：4505/）基础上，合作编写了《嵌入式组态控制技术》（第一版），受到学校和企业欢迎。随着工控技术快速发展，常州纺织服装职业技术学院与企业进行了广泛深入合作，参照行业与企业标准和工艺要求，较好地完成了《嵌入式组态控制技术》（第二版）框架策划、现场交流、应用测试、文案编撰、资源制作、资料整合等任务。为了更好地适应新技术发展，以及满足教材内容和行业与企业发展同步，我们更新、改版编写了《嵌入式组态控制技术》（第三版），同时创建了“嵌入式组态控制技术”QQ交流群，群号为：107163512。
          </p>
          <p class="quotation fl al-cn t0">
            <img
              src="../../assets/images/icon/tedian.png"
              alt=""
              class="w-35 mr-5"
            />
            <b>教材特点</b>
          </p>
          <p class="quotation cl-66">
            æœ¬ä¹¦å›´ç»•è§¦æ‘¸å±æ ¸å¿ƒæŠ€æœ¯ï¼Œåˆ†åˆ«ä¸ŽPLC、变频器、智能仪表、传感器及伺服通信控制技术相结合，构成典型的案例，内容涵盖了工控系统重要知识与技能，进行了循序渐进的工作导向描述。编写遵循“典型性、实用性、先进性、可操作性”原则，精美的图片、卡通人物及软件仿真等的综合运用，将学习、工作融于轻松愉悦的环境中，力求达
          </p>
        </document>
      <div v-if="showPageList.indexOf(7) > -1">
        <div class="page-heder-img">
          <img src="../../assets/images/qianyan.png" class="mt-100" alt="" />
        </div>
        <div class="padding-103">
          <document>
            <p class="quotation cl-66">
              æœ¬ä¹¦æ˜¯é«˜èŒé™¢æ ¡ä¸ŽåŒ—京昆仑通态自动化软件科技有限公司（以下简称“昆仑通态公司”）合作编写的基于工作过程导向、面向教师和工控行业技术人员、服务于机电和自动化类专业职业能力培养的“十二五”职业教育国家规划教材。
            </p>
            <p class="quotation cl-66">
              æœ¬ä¹¦ä»¥ä¹ä¸ªé¡¹ç›®å¼•é¢†è¯»è€…学习由触摸屏、PLC、变频器、传感器、通信协议等集成的小型工控系统，对每个训练项目的每个动作和步骤设要求、定目标，在实践过程中注重企业生产元素，融通生产工艺，紧贴生产过程，“任务明确、步骤清晰、过程规范、考评到位”，能培养严谨的工作作风和精益求精的产品意识，成就工控高手的梦想。
            </p>
            <p class="quotation fl al-cn t0">
              <img
                src="../../assets/images/icon/beijing.png"
                alt=""
                class="mr-5"
              />
              <b>编写背景</b>
            </p>
            <p class="quotation cl-66">
              æœ¬ä¹¦åšæŒåŸºäºŽå·¥ä½œè¿‡ç¨‹å¯¼å‘的项目化教学改革方向，坚持将行业与企业的典型、实用、操作性强的工程项目引入课堂，坚持发挥行动导向教学的示范辐射作用。
            </p>
            <p class="quotation cl-66">
              åŒ—京昆仑通态MCGS触摸屏是国内主流工控产品，不仅使大量的工业控制设备或生产设备具有更多的自动化功能，也是企业实现管控一体化的理想选择。在与昆仑通态公司合作开发“工控系统安装与调试”课程（http://gxkc.cztgi.edu.cn：4505/）基础上，合作编写了《嵌入式组态控制技术》（第一版），受到学校和企业欢迎。随着工控技术快速发展，常州纺织服装职业技术学院与企业进行了广泛深入合作，参照行业与企业标准和工艺要求，较好地完成了《嵌入式组态控制技术》（第二版）框架策划、现场交流、应用测试、文案编撰、资源制作、资料整合等任务。为了更好地适应新技术发展，以及满足教材内容和行业与企业发展同步，我们更新、改版编写了《嵌入式组态控制技术》（第三版），同时创建了“嵌入式组态控制技术”QQ交流群，群号为：107163512。
            </p>
            <p class="quotation fl al-cn t0">
              <img
                src="../../assets/images/icon/tedian.png"
                alt=""
                class="w-35 mr-5"
              />
              <b>教材特点</b>
            </p>
            <p class="quotation cl-66">
              æœ¬ä¹¦å›´ç»•è§¦æ‘¸å±æ ¸å¿ƒæŠ€æœ¯ï¼Œåˆ†åˆ«ä¸ŽPLC、变频器、智能仪表、传感器及伺服通信控制技术相结合，构成典型的案例，内容涵盖了工控系统重要知识与技能，进行了循序渐进的工作导向描述。编写遵循“典型性、实用性、先进性、可操作性”原则，精美的图片、卡通人物及软件仿真等的综合运用，将学习、工作融于轻松愉悦的环境中，力求达
            </p>
          </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,100 +314,112 @@
    </div>
    <!-- ç¬¬ä¸€ç‰ˆ -->
    <div class="page-box" page="9">
      <div class="page-heder-img">
        <img src="../../assets/images/qianyan-one.png" class="mt-100" alt="" />
      </div>
      <div class="padding-96">
        <document>
          <p class="quotation">
            æœ¬ä¹¦æ˜¯æ•™è‚²éƒ¨é«˜èŒé«˜ä¸“自动化技术类专业教学指导委员会规划、常州纺织服装职业技术学院与北京昆仑通态自动化软件科技有限公司合作编写的基于工作过程导向、面向“双师型”教师和行业、企业技术人员、服务于机电和自动化类专业职业能力培养的项目化教材。
          </p>
          <p class="quotation">
            ç›®å‰å·¥ä¸šè‡ªåŠ¨åŒ–组态软件的发展有两个方面，一方面是向大型的平台软件发展；另一方面是向小型化方向发展，由通用组态软件简化成嵌入式组态软件，可使大量的工业控制设备或生产设备具有更多的自动化功能，发展机会更多、市场容量更大。北京昆仑通态MCGS嵌入式组态软件作为国内主流工控产品，是企业实现管控一体化的理想选择。
          </p>
          <p class="quotation fl al-cn t0">
            <img
              src="../../assets/images/icon/beijing.png"
              alt=""
              class="mr-5"
            />
            <b>编写背景</b>
          </p>
          <p class="quotation">
            æœ¬ä¹¦åšæŒåŸºäºŽå·¥ä½œè¿‡ç¨‹å¯¼å‘的项目化教学改革方向，坚持将行业、企业典型、实用、操作性强的工程项目引入课堂，坚持发挥行动导向教学的示范辐射作用。
          </p>
          <p class="quotation">
            éšç€åµŒå…¥å¼ç»„态和触摸屏技术的快速发展，2006年，常州纺织服装职业技术学院与北京昆仑通态自动化软件科技有限公司合作编写了《组态软件控制技术》，受到学校和企业欢迎。本书参照行业、企业标准和工艺要求，较好地完成了框架策划、现场交流、应用测试、文案编撰、资源制作、资料整合等任务。本书为2010年国家级精品课程配套的主讲教材。
          </p>
          <p class="quotation fl al-cn t0">
            <img
              src="../../assets/images/icon/tedian.png"
              alt=""
              class="w-35 mr-5"
            />
            <b>教材特点</b>
          </p>
          <p class="quotation">
            å›´ç»•åµŒå…¥å¼ç»„态技术核心，以触摸屏TPC分别与PLC、变频器、智能仪表、传感器及伺服通信控制技术典型应用为工作任务，涵盖了嵌入式组态的重要知识与技能，进行了循序渐进的工作导向描述。编写遵循“典型性、实用性、先进性、操作性”原则，精美的图片、卡通人物及软件仿真等的综合运用，将学习、工作融于轻松愉悦的环境中，力求达到提高学生学习兴趣和效率以及易学、易懂、易上手的目的。
          </p>
        </document>
      <div v-if="showPageList.indexOf(9) > -1">
        <div class="page-heder-img">
          <img
            src="../../assets/images/qianyan-one.png"
            class="mt-100"
            alt=""
          />
        </div>
        <div class="padding-96">
          <document>
            <p class="quotation">
              æœ¬ä¹¦æ˜¯æ•™è‚²éƒ¨é«˜èŒé«˜ä¸“自动化技术类专业教学指导委员会规划、常州纺织服装职业技术学院与北京昆仑通态自动化软件科技有限公司合作编写的基于工作过程导向、面向“双师型”教师和行业、企业技术人员、服务于机电和自动化类专业职业能力培养的项目化教材。
            </p>
            <p class="quotation">
              ç›®å‰å·¥ä¸šè‡ªåŠ¨åŒ–组态软件的发展有两个方面，一方面是向大型的平台软件发展；另一方面是向小型化方向发展，由通用组态软件简化成嵌入式组态软件，可使大量的工业控制设备或生产设备具有更多的自动化功能，发展机会更多、市场容量更大。北京昆仑通态MCGS嵌入式组态软件作为国内主流工控产品，是企业实现管控一体化的理想选择。
            </p>
            <p class="quotation fl al-cn t0">
              <img
                src="../../assets/images/icon/beijing.png"
                alt=""
                class="mr-5"
              />
              <b>编写背景</b>
            </p>
            <p class="quotation">
              æœ¬ä¹¦åšæŒåŸºäºŽå·¥ä½œè¿‡ç¨‹å¯¼å‘的项目化教学改革方向，坚持将行业、企业典型、实用、操作性强的工程项目引入课堂，坚持发挥行动导向教学的示范辐射作用。
            </p>
            <p class="quotation">
              éšç€åµŒå…¥å¼ç»„态和触摸屏技术的快速发展，2006年，常州纺织服装职业技术学院与北京昆仑通态自动化软件科技有限公司合作编写了《组态软件控制技术》，受到学校和企业欢迎。本书参照行业、企业标准和工艺要求，较好地完成了框架策划、现场交流、应用测试、文案编撰、资源制作、资料整合等任务。本书为2010年国家级精品课程配套的主讲教材。
            </p>
            <p class="quotation fl al-cn t0">
              <img
                src="../../assets/images/icon/tedian.png"
                alt=""
                class="w-35 mr-5"
              />
              <b>教材特点</b>
            </p>
            <p class="quotation">
              å›´ç»•åµŒå…¥å¼ç»„态技术核心，以触摸屏TPC分别与PLC、变频器、智能仪表、传感器及伺服通信控制技术典型应用为工作任务，涵盖了嵌入式组态的重要知识与技能，进行了循序渐进的工作导向描述。编写遵循“典型性、实用性、先进性、操作性”原则，精美的图片、卡通人物及软件仿真等的综合运用，将学习、工作融于轻松愉悦的环境中，力求达到提高学生学习兴趣和效率以及易学、易懂、易上手的目的。
            </p>
          </document>
        </div>
      </div>
    </div>
    <!-- 1-1 -->
    <div class="page-box fl fl-cl ju-bt" page="10">
      <div>
        <div class="mt-20">
          <img src="../../assets/images/page-header.png" alt="" class="w100" />
      <div v-if="showPageList.indexOf(10) > -1">
        <div>
          <div class="mt-20">
            <img
              src="../../assets/images/page-header.png"
              alt=""
              class="w100"
            />
          </div>
          <div class="padding-96">
            <document>
              <p class="quotation fl al-cn t0">
                <img
                  src="../../assets/images/icon/neirong.png"
                  alt=""
                  class="w-35 mr-5"
                />
                <b>基本内容</b>
              </p>
              <p class="quotation">
                æœ¬å¥—教材由彩色纸质教材和多媒体光盘组成。纸质教材共由十一个任务组成，任务一认识嵌入式组态+触摸屏；任务二主要讲解三款主流型号PLC与嵌入式TPC的通信和控制；任务三主要训练嵌入式TPC+变频器的RS
                485通信与计划曲线控制；任务四主要讲解嵌入式TPC与AI智能仪表实现多个通道温度集中控制；任务五讲解嵌入式TPC+PLC+变频器的调速系统；任务六讲解嵌入式TPC+嵌入式TPC之间的通信；任务七讲解嵌入式TPC与PLC的通信连接，驱动伺服控制二维平台定位；任务八嵌入式组态TPC+PLC+传感器的水位工程，主要讲解嵌入式组态功能应用；任务九讲解嵌入式组态TPC配方工程；任务十讲解电梯嵌入式组态；任务十一讲解“自动化生产线安装与调试”全国技能大赛嵌入式组态设计。每个任务都安排了任务目标、任务描述和任务训练。多媒体光盘含最新MCGS嵌入式组态安装软件、TPC产品样本、工程案例、教学任务工程案例、课程标准及“行动导向”课程教案等，为“教”和“学”提供了生动、直观、便捷、立体的教学资源包。
              </p>
              <p class="quotation">
                æœ¬ä¹¦ç¼–写分工如下：张文明副教授、华祖银总工程师共同负责撰写教材前言、内容简介和任务一；张文明副教授撰写任务二、任务六；张文明副教授、黄晓伟工程师共同撰写任务三、任务五；陈东升工程师撰写任务四；张文明副教授、陈东升工程师共同撰写任务七；王一凡讲师撰写任务八；黄晓伟工程师撰写任务九；张建成高工和陈跃安副教授共同撰写任务十；曹建军工程师撰写任务十一。全书由张文明副教授策划、指导并负责统稿；教育部高职高专自动化技术类专业教学指导委员会主任委员吕景泉教授和北京昆仑通态自动化软件科技有限公司刘志军高级工程师主审。
              </p>
              <p class="quotation">
                åœ¨æœ¬ä¹¦ç¼–写过程中，得到了北京昆仑通态自动化软件科技有限公司、教育部高职高专自动化技术类专业教学指导委员会、中国铁道出版社和常州纺织服装职业技术学院等单位领导的大力支持，在此表示衷心的感谢！同时也要感谢北京昆仑通态无锡分公司史硕连、周星、蔡琳琳等工程技术人员对本书编写提供的帮助！
              </p>
              <p class="quotation">
                é™äºŽç¼–者的经验、水平以及时间，书中难免在内容和文字上存在不足和缺陷，敬请提出批评指正。
              </p>
              <p class="content t-right">编者</p>
              <p class="content t-right">2011å¹´6月</p>
            </document>
          </div>
        </div>
        <div class="padding-96">
          <document>
            <p class="quotation fl al-cn t0">
              <img
                src="../../assets/images/icon/neirong.png"
                alt=""
                class="w-35 mr-5"
              />
              <b>基本内容</b>
            </p>
            <p class="quotation">
              æœ¬å¥—教材由彩色纸质教材和多媒体光盘组成。纸质教材共由十一个任务组成，任务一认识嵌入式组态+触摸屏；任务二主要讲解三款主流型号PLC与嵌入式TPC的通信和控制；任务三主要训练嵌入式TPC+变频器的RS
              485通信与计划曲线控制；任务四主要讲解嵌入式TPC与AI智能仪表实现多个通道温度集中控制；任务五讲解嵌入式TPC+PLC+变频器的调速系统；任务六讲解嵌入式TPC+嵌入式TPC之间的通信；任务七讲解嵌入式TPC与PLC的通信连接，驱动伺服控制二维平台定位；任务八嵌入式组态TPC+PLC+传感器的水位工程，主要讲解嵌入式组态功能应用；任务九讲解嵌入式组态TPC配方工程；任务十讲解电梯嵌入式组态；任务十一讲解“自动化生产线安装与调试”全国技能大赛嵌入式组态设计。每个任务都安排了任务目标、任务描述和任务训练。多媒体光盘含最新MCGS嵌入式组态安装软件、TPC产品样本、工程案例、教学任务工程案例、课程标准及“行动导向”课程教案等，为“教”和“学”提供了生动、直观、便捷、立体的教学资源包。
            </p>
            <p class="quotation">
              æœ¬ä¹¦ç¼–写分工如下：张文明副教授、华祖银总工程师共同负责撰写教材前言、内容简介和任务一；张文明副教授撰写任务二、任务六；张文明副教授、黄晓伟工程师共同撰写任务三、任务五；陈东升工程师撰写任务四；张文明副教授、陈东升工程师共同撰写任务七；王一凡讲师撰写任务八；黄晓伟工程师撰写任务九；张建成高工和陈跃安副教授共同撰写任务十；曹建军工程师撰写任务十一。全书由张文明副教授策划、指导并负责统稿；教育部高职高专自动化技术类专业教学指导委员会主任委员吕景泉教授和北京昆仑通态自动化软件科技有限公司刘志军高级工程师主审。
            </p>
            <p class="quotation">
              åœ¨æœ¬ä¹¦ç¼–写过程中，得到了北京昆仑通态自动化软件科技有限公司、教育部高职高专自动化技术类专业教学指导委员会、中国铁道出版社和常州纺织服装职业技术学院等单位领导的大力支持，在此表示衷心的感谢！同时也要感谢北京昆仑通态无锡分公司史硕连、周星、蔡琳琳等工程技术人员对本书编写提供的帮助！
            </p>
            <p class="quotation">
              é™äºŽç¼–者的经验、水平以及时间，书中难免在内容和文字上存在不足和缺陷，敬请提出批评指正。
            </p>
            <p class="content t-right">编者</p>
            <p class="content t-right">2011å¹´6月</p>
          </document>
        </div>
        <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
          <li class="footer-num">II</li>
          <li class="footer-box"></li>
        </ul>
      </div>
      <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96">
        <li class="footer-num">II</li>
        <li class="footer-box"></li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "headerPage",
  props:{
    showPageList:{
      type:Array
    }
  }
  props: {
    showPageList: {
      type: Array,
    },
  },
};
</script>
<style scoped lang="less">
p {
  text-align: justify;
  // color: #666;
  font-family: "Times New Roman", "宋体", SimSun, sans-serif !important;
}
.author-padding {
  padding: 104px 20px 104px 20px;

 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,
@@ -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() {
  },

 src/books/lifeCare/index.vue

@@ -135,6 +135,7 @@
      loadPageObserver: null,
      loadPageList: [],
      questionData: {},
      renderSignMap: {}
    };
  },
  computed: {
@@ -301,7 +302,7 @@
          this.showCatalogList = [
            this.catalogLength - 2,
            this.catalogLength - 1,
            this.catalogLength,
            this.catalogLength
          ];
        } else {
          this.showCatalogList = [catalog - 1, catalog, catalog + 1];
@@ -322,6 +323,14 @@
      }
    },

    // å¤„理标记数据
    handelSignData(type, data) {
      if (!this.renderSignMap[type]) this.renderSignMap[type] = {};
      if (!this.renderSignMap[type][data.page])
        this.renderSignMap[type][data.page] = [];
      this.renderSignMap[type][data.page].push(data);
    },

    // æ¸²æŸ“标记
    renderSign(type, data) {
      const existence = (
@@ -332,29 +341,48 @@
        const pageDom = (
          this.container ? this.container : document
        ).querySelector(`[page="${data.page}"]`);
        let reg = new RegExp(`${data.txt}`, "ig");
        switch (type) {
          case "Highlight":
            // é«˜äº®
            pageDom.innerHTML = pageDom.innerHTML.replace(
              reg,
              `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>`
            );
            break;
          case "Dashing":
            // åˆ’线
            pageDom.innerHTML = pageDom.innerHTML.replace(
              reg,
              `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>`
            );
            break;
          case "Note":
            // ç¬”è®°
            pageDom.innerHTML = pageDom.innerHTML.replace(
              reg,
              `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>`
            );
            break;
        // åˆ›å»º createTreeWalker è¿­ä»£å™¨ï¼Œç”¨äºŽéåŽ†æ–‡æœ¬èŠ‚点，保存到一个数组
        const treeWalker = document.createTreeWalker(
          pageDom,
          NodeFilter.SHOW_TEXT
        );
        const allTextNodes = [];
        let currentNode = treeWalker.nextNode();
        while (currentNode) {
          allTextNodes.push(currentNode);
          currentNode = treeWalker.nextNode();
        }
        for (let i = 0; i < allTextNodes.length; i++) {
          const textDom = allTextNodes[i];
          if (textDom.textContent.indexOf(data.txt) > -1) {
            let reg = new RegExp(`${data.txt}`, "ig");
            switch (type) {
              case "Highlight":
                // é«˜äº®
                textDom.parentNode.innerHTML =
                  textDom.parentNode.innerHTML.replace(
                    reg,
                    `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>`
                  );
                break;
              case "Dashing":
                // åˆ’线
                textDom.parentNode.innerHTML =
                  textDom.parentNode.innerHTML.replace(
                    reg,
                    `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>`
                  );
                break;
              case "Note":
                // ç¬”è®°
                textDom.parentNode.innerHTML =
                  textDom.parentNode.innerHTML.replace(
                    reg,
                    `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>`
                  );
                break;
            }
          }
        }
      }
    },
@@ -536,7 +564,7 @@
        if (entry.isIntersecting) {
          const target = entry.target;
          const page = target.getAttribute("page");
          if (this.loadPageList.indexOf(page) == -1) {
          if (this.loadPageList.indexOf(Number(page)) == -1) {
            const catalogDom = this.tool.getParentNodeByClassName(
              target,
              "chapter"
@@ -565,7 +593,16 @@
                }
              }
            }
            // æ·»åŠ é¡µç 
            this.loadPageList.push(Number(page));
            // æ¸²æŸ“这一页的标记
            for (const key in this.renderSignMap) {
              if (this.renderSignMap[key][page]) {
                this.renderSignMap[key][page].forEach((item) => {
                  this.renderSign(key, item);
                });
              }
            }
            if (this.loadPageList.length > 5) {
              // è¶…过5页
              this.loadPageList.shift();

 src/books/sportsAndHealth/css/default.less

@@ -42,13 +42,13 @@
      justify-content: center;

      table {
        border: 1px solid #0aa2e9;
        border: 1px solid #95b2dc;
        border-collapse: collapse;
        padding: 0;
        margin: 0;

        tr th {
          border: 1px solid #0aa2e9;
          border: 1px solid #95b2dc;
          background-color: #b0a3cf;
          color: #f49a4c;
          text-align: center;
@@ -57,10 +57,11 @@
        }

        tr td {
          border: 1px solid #0aa2e9;
          border: 1px solid #95b2dc;
          text-align: center;
          padding: 3px 10px;
          font-size: 14px;
          line-height: 25px;

          input {
            cursor: pointer;

 src/books/sportsAndHealth/index.vue

@@ -73,6 +73,7 @@
      loadPageObserver: null,
      loadPageList: [],
      questionData: {},
      renderSignMap: {}
    };
  },
  computed: {

 src/books/sportsAndHealth/view/chapter002.vue

@@ -94,49 +94,235 @@
                </thead>
                <tbody>
                  <tr>
                    <td>1. æˆ‘感觉快乐，心情舒畅</td>
                    <td><input :value="chapter002.tablexyx1.text1" type="checkbox" />5</td>
                    <td><input :value="chapter002.tablexyx1.text2" type="checkbox" />4</td>
                    <td><input :value="chapter002.tablexyx1.text3" type="checkbox" />3</td>
                    <td><input :value="chapter002.tablexyx1.text4" type="checkbox" />2</td>
                    <td><input :value="chapter002.tablexyx1.text5" type="checkbox" />1</td>
                    <td><input :value="chapter002.tablexyx1.text6" type="checkbox" />0</td>
                    <td style="text-align: left">1. æˆ‘感觉快乐，心情舒畅</td>
                    <td>
                      <input
                        @change="changeBox($event, 'text1')"
                        :checked="chapter002.tablexyx1.text1"
                        type="checkbox"
                      />5
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text2')"
                        :checked="chapter002.tablexyx1.text2"
                        type="checkbox"
                      />4
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text3')"
                        :checked="chapter002.tablexyx1.text3"
                        type="checkbox"
                      />3
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text4')"
                        :checked="chapter002.tablexyx1.text4"
                        type="checkbox"
                      />2
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text5')"
                        :checked="chapter002.tablexyx1.text5"
                        type="checkbox"
                      />1
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text6')"
                        :checked="chapter002.tablexyx1.text6"
                        type="checkbox"
                      />0
                    </td>
                  </tr>
                  <tr>
                    <td>2. æˆ‘感觉宁静和放松</td>
                    <td><input :value="chapter002.tablexyx1.text7" type="checkbox" />5</td>
                    <td><input :value="chapter002.tablexyx1.text8" type="checkbox" />4</td>
                    <td><input :value="chapter002.tablexyx1.text9" type="checkbox" />3</td>
                    <td><input :value="chapter002.tablexyx1.text10" type="checkbox" />2</td>
                    <td><input :value="chapter002.tablexyx1.text11" type="checkbox" />1</td>
                    <td><input :value="chapter002.tablexyx1.text12" type="checkbox" />0</td>
                    <td style="text-align: left">2. æˆ‘感觉宁静和放松</td>
                    <td>
                      <input
                        @change="changeBox($event, 'text7')"
                        :checked="chapter002.tablexyx1.text7"
                        type="checkbox"
                      />5
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text8')"
                        :checked="chapter002.tablexyx1.text8"
                        type="checkbox"
                      />4
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text9')"
                        :checked="chapter002.tablexyx1.text9"
                        type="checkbox"
                      />3
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text10')"
                        :checked="chapter002.tablexyx1.text10"
                        type="checkbox"
                      />2
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text11')"
                        :checked="chapter002.tablexyx1.text11"
                        type="checkbox"
                      />1
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text12')"
                        :checked="chapter002.tablexyx1.text12"
                        type="checkbox"
                      />0
                    </td>
                  </tr>
                  <tr>
                    <td>3. æˆ‘感觉充满活力，精力充沛</td>
                    <td>5</td>
                    <td>4</td>
                    <td>3</td>
                    <td>2</td>
                    <td>1</td>
                    <td>0</td>
                    <td style="text-align: left">
                      3. æˆ‘感觉充满活力，精力充沛
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text13')"
                        :checked="chapter002.tablexyx1.text13"
                        type="checkbox"
                      />5
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text14')"
                        :checked="chapter002.tablexyx1.text14"
                        type="checkbox"
                      />4
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text15')"
                        :checked="chapter002.tablexyx1.text15"
                        type="checkbox"
                      />3
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text16')"
                        :checked="chapter002.tablexyx1.text16"
                        type="checkbox"
                      />2
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text17')"
                        :checked="chapter002.tablexyx1.text17"
                        type="checkbox"
                      />1
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text18')"
                        :checked="chapter002.tablexyx1.text18"
                        type="checkbox"
                      />0
                    </td>
                  </tr>
                  <tr>
                    <td>4. æˆ‘睡醒时感到清醒，得到了足够休息</td>
                    <td>5</td>
                    <td>4</td>
                    <td>3</td>
                    <td>2</td>
                    <td>1</td>
                    <td>0</td>
                    <td style="text-align: left">
                      4. æˆ‘睡醒时感到清醒，得到了足够休息
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text19')"
                        :checked="chapter002.tablexyx1.text19"
                        type="checkbox"
                      />5
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text20')"
                        :checked="chapter002.tablexyx1.text20"
                        type="checkbox"
                      />4
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text21')"
                        :checked="chapter002.tablexyx1.text21"
                        type="checkbox"
                      />3
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text22')"
                        :checked="chapter002.tablexyx1.text22"
                        type="checkbox"
                      />2
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text23')"
                        :checked="chapter002.tablexyx1.text23"
                        type="checkbox"
                      />1
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text24')"
                        :checked="chapter002.tablexyx1.text24"
                        type="checkbox"
                      />0
                    </td>
                  </tr>
                  <tr>
                    <td>5. æˆ‘每天的生活充满了有趣的事情</td>
                    <td>5</td>
                    <td>4</td>
                    <td>3</td>
                    <td>2</td>
                    <td>1</td>
                    <td>0</td>
                    <td style="text-align: left">
                      5. æˆ‘每天的生活充满了有趣的事情
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text25')"
                        :checked="chapter002.tablexyx1.text25"
                        type="checkbox"
                      />5
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text26')"
                        :checked="chapter002.tablexyx1.text26"
                        type="checkbox"
                      />4
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text27')"
                        :checked="chapter002.tablexyx1.text27"
                        type="checkbox"
                      />3
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text28')"
                        :checked="chapter002.tablexyx1.text28"
                        type="checkbox"
                      />2
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text29')"
                        :checked="chapter002.tablexyx1.text29"
                        type="checkbox"
                      />1
                    </td>
                    <td>
                      <input
                        @change="changeBox($event, 'text30')"
                        :checked="chapter002.tablexyx1.text30"
                        type="checkbox"
                      />0
                    </td>
                  </tr>
                </tbody>
              </table>
@@ -200,59 +386,59 @@
                  <tbody>
                    <tr>
                      <td>1</td>
                      <td>正常健康</td>
                      <td>健康</td>
                      <td>健康</td>
                      <td>健康</td>
                      <td><input @change="changeByb($event,'text1')" type="checkbox" :checked="chapter002.tablebyb1.text1" />正常健康</td>
                      <td><input @change="changeByb($event,'text2')" type="checkbox" :checked="chapter002.tablebyb1.text2" />健康</td>
                      <td><input @change="changeByb($event,'text2')" type="checkbox" :checked="chapter002.tablebyb1.text2" />健康</td>
                      <td><input @change="changeByb($event,'text4')" type="checkbox" :checked="chapter002.tablebyb1.text4" />健康</td>
                    </tr>
                    <tr>
                      <td>2</td>
                      <td>悲观</td>
                      <td>不健康</td>
                      <td>健康</td>
                      <td>健康</td>
                      <td><input @change="changeByb($event,'text5')" type="checkbox" :checked="chapter002.tablebyb1.text5" />悲观</td>
                      <td><input @change="changeByb($event,'text6')" type="checkbox" :checked="chapter002.tablebyb1.text6" />不健康</td>
                      <td><input @change="changeByb($event,'text7')" type="checkbox" :checked="chapter002.tablebyb1.text7" />健康</td>
                      <td><input @change="changeByb($event,'text8')" type="checkbox" :checked="chapter002.tablebyb1.text8" />健康</td>
                    </tr>
                    <tr>
                      <td>3</td>
                      <td>社会方面不健康</td>
                      <td>健康</td>
                      <td>健康</td>
                      <td>不健康</td>
                      <td><input @change="changeByb($event,'text9')" type="checkbox" :checked="chapter002.tablebyb1.text9" />社会方面不健康</td>
                      <td><input @change="changeByb($event,'text10')" type="checkbox" :checked="chapter002.tablebyb1.text10" />健康</td>
                      <td><input @change="changeByb($event,'text11')" type="checkbox" :checked="chapter002.tablebyb1.text11" />健康</td>
                      <td><input @change="changeByb($event,'text12')" type="checkbox" :checked="chapter002.tablebyb1.text12" />不健康</td>
                    </tr>
                    <tr>
                      <td>4</td>
                      <td>患疑病症</td>
                      <td>不健康</td>
                      <td>健康</td>
                      <td>健康</td>
                      <td><input @change="changeByb($event,'text13')" type="checkbox" :checked="chapter002.tablebyb1.text13" />患疑病症</td>
                      <td><input @change="changeByb($event,'text14')" type="checkbox" :checked="chapter002.tablebyb1.text14" />不健康</td>
                      <td><input @change="changeByb($event,'text15')" type="checkbox" :checked="chapter002.tablebyb1.text15" />健康</td>
                      <td><input @change="changeByb($event,'text16')" type="checkbox" :checked="chapter002.tablebyb1.text16" />健康</td>
                    </tr>
                    <tr>
                      <td>5</td>
                      <td>身体不健康</td>
                      <td>健康</td>
                      <td>不健康</td>
                      <td>健康</td>
                      <td><input @change="changeByb($event,'text17')" type="checkbox" :checked="chapter002.tablebyb1.text17" />身体不健康</td>
                      <td><input @change="changeByb($event,'text18')" type="checkbox" :checked="chapter002.tablebyb1.text18" />健康</td>
                      <td><input @change="changeByb($event,'text19')" type="checkbox" :checked="chapter002.tablebyb1.text19" />不健康</td>
                      <td><input @change="changeByb($event,'text20')" type="checkbox" :checked="chapter002.tablebyb1.text20" />健康</td>
                    </tr>
                    <tr>
                      <td>6</td>
                      <td>长期受病折磨</td>
                      <td>不健康</td>
                      <td>不健康</td>
                      <td>健康</td>
                      <td><input @change="changeByb($event,'text21')" type="checkbox" :checked="chapter002.tablebyb1.text21" />长期受病折磨</td>
                      <td><input @change="changeByb($event,'text22')" type="checkbox" :checked="chapter002.tablebyb1.text22" />不健康</td>
                      <td><input @change="changeByb($event,'text23')" type="checkbox" :checked="chapter002.tablebyb1.text23" />不健康</td>
                      <td><input @change="changeByb($event,'text24')" type="checkbox" :checked="chapter002.tablebyb1.text24" />健康</td>
                    </tr>
                    <tr>
                      <td>7</td>
                      <td>乐观</td>
                      <td>健康</td>
                      <td>不健康</td>
                      <td>健康</td>
                      <td>7</td> 
                      <td><input @change="changeByb($event,'text25')" type="checkbox" :checked="chapter002.tablebyb1.text25" />乐观</td>
                      <td><input @change="changeByb($event,'text26')" type="checkbox" :checked="chapter002.tablebyb1.text26" />健康</td>
                      <td><input @change="changeByb($event,'text27')" type="checkbox" :checked="chapter002.tablebyb1.text27" />不健康</td>
                      <td><input @change="changeByb($event,'text28')" type="checkbox" :checked="chapter002.tablebyb1.text28" />健康</td>
                    </tr>
                    <tr>
                      <td>8</td>
                      <td>患病严重</td>
                      <td>不健康</td>
                      <td>不健康</td>
                      <td>不健康</td>
                      <td><input @change="changeByb($event,'text29')" type="checkbox" :checked="chapter002.tablebyb1.text29" />患病严重</td>
                      <td><input @change="changeByb($event,'text30')" type="checkbox" :checked="chapter002.tablebyb1.text30" />不健康</td>
                      <td><input @change="changeByb($event,'text31')" type="checkbox" :checked="chapter002.tablebyb1.text31" />不健康</td>
                      <td><input @change="changeByb($event,'text32')" type="checkbox" :checked="chapter002.tablebyb1.text32" />不健康</td>
                    </tr>
                  </tbody>
                </table>
@@ -1020,13 +1206,28 @@
  },
  data() {
    return {
      chapter002:{
        tablexyx1:{},

      }
      chapter002: {
        tablexyx1: {},
        tablebyb1:{}
      },
    };
  },
  created() {
    const localData = JSON.parse(localStorage.getItem("chapter002"));
    if (localData) {
      this.chapter002 = { ...Object.assign(this.chapter002, localData) };
      console.log(this.chapter002);
    }
  },
  methods: {
    changeBox(e, val) {
      this.chapter002.tablexyx1[val] = e.target.checked;
      localStorage.setItem("chapter002", JSON.stringify(this.chapter002));
    },
    changeByb(e, val) {
      this.chapter002.tablebyb1[val] = e.target.checked;
      localStorage.setItem("chapter002", JSON.stringify(this.chapter002));
    },
  },
};
</script>