From 6464d968c5049caa0a8c243e37058d237ad78b3e Mon Sep 17 00:00:00 2001
From: unknown <qq1940665526@163.com>
Date: 星期五, 31 五月 2024 14:54:12 +0800
Subject: [PATCH] 优化

---
 src/books/embedded/assets/images/icon/rar.png                |    0 
 src/books/embedded/assets/images/icon/word.png               |    0 
 src/books/embedded/view/components/chapter001.vue            |  808 ++++++++++++++++++++----------------
 src/books/embedded/view/components/index.vue                 |   54 +
 src/books/embedded/assets/images/icon/下载.svg                 |    7 
 src/books/English/view/components/chapter001.vue             |   68 ++-
 src/books/English/assets/main.less                           |    5 
 src/books/childHealth/view/content/index.vue                 |  294 ++++++++++--
 /dev/null                                                    |    7 
 src/books/embedded/assets/images/icon/rar(1).png             |    0 
 src/books/embedded/assets/main.less                          |    7 
 src/books/embedded/assets/images/icon/word(1).png            |    0 
 src/App.vue                                                  |    2 
 src/books/English/view/components/index.vue                  |   64 +-
 src/books/childHealth/view/content/components/chapter001.vue |    3 
 15 files changed, 811 insertions(+), 508 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 5f2160d..0c7f760 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -66,7 +66,7 @@
         // sportsAndHealth
         // embedded
         // english
-        this.config.resourceCtx + "lifeCare"
+        this.config.resourceCtx + "english"
       );
       // 娴嬭瘯璇曡30椤�
       // this.activeBook.tryPageCount = 10;
diff --git a/src/books/English/assets/main.less b/src/books/English/assets/main.less
index a959269..f4f618b 100644
--- a/src/books/English/assets/main.less
+++ b/src/books/English/assets/main.less
@@ -676,6 +676,9 @@
   .fl {
     display: flex;
   }
+  .fw-wr {
+    flex-wrap: wrap;
+  }
   .ju-bt {
     justify-content: space-between;
   }
@@ -841,7 +844,7 @@
   }
   .parimary-btn {
     min-width: 80px;
-    min-height: 28px;
+    height: 30px;
     font-size: 14px;
     margin-left: 5px;
     background-color: #0bab87;
diff --git a/src/books/English/view/components/chapter001.vue b/src/books/English/view/components/chapter001.vue
index 8dc5e7f..0767589 100644
--- a/src/books/English/view/components/chapter001.vue
+++ b/src/books/English/view/components/chapter001.vue
@@ -830,11 +830,19 @@
                 >
               </p>
             </div>
-            <p>get selected as ...琚�変负鈥︹��</p>
-            <p>(a) variety of ...鍚勭鍚勬牱鐨勨�︹��</p>
-            <p>come across 鍋堕亣锛涚鍒�</p>
-            <p>be curious about ...瀵光�︹�︽劅鍒板ソ濂�</p>
-            <p>along the way 娌块��</p>
+            <ul class="w100 fl fw-wr">
+              <li>
+                <p>get selected as ...琚�変负鈥︹��</p>
+                <p>(a) variety of ...鍚勭鍚勬牱鐨勨�︹��</p>
+                <p>come across 鍋堕亣锛涚鍒�</p>
+              </li>
+              <li>
+                <p>be curious about ...瀵光�︹�︽劅鍒板ソ濂�</p>
+                <p>along the way 娌块��</p>
+              </li>
+            </ul>
+            
+            
             <div class="bj-note">
               <p class="m0"><b class="fz-18">Notes:</b></p>
               <p class="m0">
@@ -1664,7 +1672,7 @@
             </div>
             <div class="resource-primary-border" style="padding: 8px">
               <div class="banshi openImgBox">
-                <div class="swiper-container swiper-ppt">
+                <div class="swiper-container swiper_ppt">
                   <div class="swiper-wrapper">
                     <div class="swiper-slide">
                       <div class="imgBox" style="width: 100%; height: 100%">
@@ -1804,9 +1812,10 @@
                   </div>
                   <div class="swiper-button-next"></div>
                   <div class="swiper-button-prev"></div>
-                   <!-- 鏄剧ず褰撳墠椤靛拰鎬婚〉鏁扮殑鍏冪礌 -->  
-                  <div class="pagination-info"></div> 
+                  <div class="pageBox"></div>
                 </div>
+                <!-- 鏄剧ず褰撳墠椤靛拰鎬婚〉鏁扮殑鍏冪礌 -->
+               
               </div>
             </div>
           </div>
@@ -2298,13 +2307,14 @@
 
 <script>
 import getResourcePath from "@/assets/methods/resources";
-
+import Swiper from "swiper/bundle";
+import "swiper/swiper-bundle.css";
 export default {
   name: "chapter-one",
-  props:{
-    showPageList:{
-      type:Array
-    }
+  props: {
+    showPageList: {
+      type: Array,
+    },
   },
   data() {
     return {
@@ -2316,6 +2326,8 @@
       showAnswerFive: false,
       showImg: false,
       showQuestionAnswer: false,
+      // pageNum: "1",
+      // total: "27",
       questionData: {
         warnUp: {
           one: {
@@ -2367,7 +2379,7 @@
         },
       },
       testData: {
-        check:[],
+        check: [],
         tx: {
           one: "",
           two: "",
@@ -2480,9 +2492,9 @@
       localStorage.setItem("english-testOne", JSON.stringify(this.testData));
     },
     changeTestData() {
-      localStorage.removeItem("english-testOne")
+      localStorage.removeItem("english-testOne");
       this.testData = {
-        check:[],
+        check: [],
         tx: {
           one: "",
           two: "",
@@ -2524,7 +2536,7 @@
           four: "",
           five: "",
         },
-      }
+      };
     },
     setBookQuestion() {
       localStorage.setItem(
@@ -2594,11 +2606,11 @@
       this.dropdownData = dropdownDatas;
     },
     changeDropdown() {
-      localStorage.removeItem("english-dropdown-one")
-      for(let key in this.dropdownData) {
-        const item =  this.dropdownData[key]
-        item.value = ""
-        item.isRight = null
+      localStorage.removeItem("english-dropdown-one");
+      for (let key in this.dropdownData) {
+        const item = this.dropdownData[key];
+        item.value = "";
+        item.isRight = null;
       }
     },
     setDropdownData() {
@@ -2609,7 +2621,7 @@
     },
     saveData() {
       console.log(this.testData);
-    }
+    },
   },
 };
 </script>
@@ -2646,7 +2658,7 @@
   font-size: 14px;
   border-width: 1px;
   min-width: 80px;
-  min-height: 28px;
+  height: 30px;
   background-color: #fff;
   &:hover {
     background-color: #0bab87;
@@ -2654,11 +2666,19 @@
   }
 }
 .banshi {
+  position: relative;
   margin-top: 40px;
   width: 100%;
   height: 350px;
   margin: 0 auto;
 }
+.pageBox {
+  z-index: 9999999999;
+  color: #999;
+  position: absolute;
+  left: 48%;
+  bottom: 0px;
+}
 select {
   height: 24px;
 }
diff --git a/src/books/English/view/components/index.vue b/src/books/English/view/components/index.vue
index 13bc3b7..bb1feca 100644
--- a/src/books/English/view/components/index.vue
+++ b/src/books/English/view/components/index.vue
@@ -559,42 +559,46 @@
           // }
         });
       }
-      // swiper-container
       const pptDoms = (
         this.container ? this.container : document
-      ).querySelectorAll(".swiper-ppt");
+      ).querySelectorAll(".swiper_ppt");
       for (let i = 0; i < pptDoms.length; i++) {
-        debugger
         const dom = pptDoms[i];
         new Swiper(dom, {
-          loop: false, // 鏃犵紳
-          autoplay: false,
-          paginationClickable: true,
-          slidesPerView: 1, // 涓�缁勪笁涓�
-          spaceBetween: 30, // 闂撮殧
-          // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
-          navigation: {
-            nextEl: (this.container ? this.container : document).querySelector(
-              ".swiper-button-next"
-            ),
-            prevEl: (this.container ? this.container : document).querySelector(
-              ".swiper-button-prev"
-            )
+        loop: false, // 鏃犵紳
+        autoplay: false,
+        paginationClickable: true,
+        slidesPerView: 1, // 涓�缁勪笁涓�
+        spaceBetween: 30, // 闂撮殧
+        // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
+        navigation: {
+          nextEl: (this.container ? this.container : document).querySelector(
+            ".swiper-button-next"
+          ),
+          prevEl: (this.container ? this.container : document).querySelector(
+            ".swiper-button-prev"
+          ),
+        },
+        // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
+        observer: true,
+        observeParents: true,
+        on: {
+          init:(value) => {
+            let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
+            let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁�
+            var paginationInfoEl = dom.querySelector('.pageBox');
+            if(paginationInfoEl)
+              paginationInfoEl.textContent = currentPage + '/' + totalPages;
           },
-          // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
-          observer: true,
-          observeParents: true,
-          on:{
-            slideChangeTransitionStart:function (value) {
-              // 姣忓綋婊戝潡鏀瑰彉鏃惰Е鍙戯紝鏇存柊褰撳墠椤靛拰鎬婚〉鏁扮殑鏄剧ず  
-              let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級  
-              let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁� 
-              var paginationInfoEl = document.querySelector('.pagination-info');
-              paginationInfoEl.textContent = currentPage + '/' + totalPages;   
-            }
-          }
-        });
-        
+          slideChange:(value) => {
+            let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
+            let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁�
+            var paginationInfoEl = dom.querySelector('.pageBox');
+            if(paginationInfoEl)
+              paginationInfoEl.textContent = currentPage + '/' + totalPages;
+          },
+        },
+      });
       }
     },
     initViewer() {
diff --git a/src/books/childHealth/view/content/components/chapter001.vue b/src/books/childHealth/view/content/components/chapter001.vue
index 2874988..0433ff2 100644
--- a/src/books/childHealth/view/content/components/chapter001.vue
+++ b/src/books/childHealth/view/content/components/chapter001.vue
@@ -1011,7 +1011,7 @@
             </div>
             <div class="right" style="width: 60%">
               <video
-                :src="getResourcePath('163c06871b763954952d1cd74373c618')"
+                :src="pathFive"
                 poster="../../../assets/images/chapterOne/people-video-img.jpg"
                 webkit-playsinline="true"
                 x-webkit-airplay="true"
@@ -4708,7 +4708,6 @@
     };
   },
   async mounted() {
-    this.getResourcePath = getResourcePath;
     this.getVideoPath();
     const localData = localStorage.getItem("chapterOneData");
     if (localData) {
diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue
index 5371769..72fca05 100644
--- a/src/books/childHealth/view/content/index.vue
+++ b/src/books/childHealth/view/content/index.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="page-main" @scroll="throttledScrollHandler">
+    <div id="searchDomBox" style="display: none">
+      <div id="searchContent"></div>
+    </div>
     <div
       class="page-content"
       :style="{
@@ -15,57 +18,57 @@
       <chapterOne
         v-if="showCatalogList.indexOf(2) > -1"
         :showPageList="loadPageList"
-        :questionData="questionData"
+        :questionData="questionDataMap"
       ></chapterOne>
       <chapterTwo
         v-if="showCatalogList.indexOf(3) > -1"
         :showPageList="loadPageList"
-        :questionData="questionData"
+        :questionData="questionDataMap"
       ></chapterTwo>
       <chapterThree
         v-if="showCatalogList.indexOf(4) > -1"
         :showPageList="loadPageList"
-        :questionData="questionData"
+        :questionData="questionDataMap"
       ></chapterThree>
       <chapterFour
         v-if="showCatalogList.indexOf(5) > -1"
         :showPageList="loadPageList"
-        :questionData="questionData"
+        :questionData="questionDataMap"
       ></chapterFour>
       <chapterFive
         v-if="showCatalogList.indexOf(6) > -1"
         :showPageList="loadPageList"
-        :questionData="questionData"
+        :questionData="questionDataMap"
       ></chapterFive>
       <chapterSix
         v-if="showCatalogList.indexOf(7) > -1"
         :showPageList="loadPageList"
-        :questionData="questionData"
+        :questionData="questionDataMap"
       ></chapterSix>
       <chapterSeven
         v-if="showCatalogList.indexOf(8) > -1"
         :showPageList="loadPageList"
-        :questionData="questionData"
+        :questionData="questionDataMap"
       ></chapterSeven>
       <chapterEight
         v-if="showCatalogList.indexOf(9) > -1"
         :showPageList="loadPageList"
-        :questionData="questionData"
+        :questionData="questionDataMap"
       ></chapterEight>
       <chapterNine
         v-if="showCatalogList.indexOf(10) > -1"
         :showPageList="loadPageList"
-        :questionData="questionData"
+        :questionData="questionDataMap"
       ></chapterNine>
       <chapterTen
         v-if="showCatalogList.indexOf(11) > -1"
         :showPageList="loadPageList"
-        :questionData="questionData"
+        :questionData="questionDataMap"
       ></chapterTen>
       <chapterEleven
         v-if="showCatalogList.indexOf(12) > -1"
         :showPageList="loadPageList"
-        :questionData="questionData"
+        :questionData="questionDataMap"
       ></chapterEleven>
       <chapterTwelve
         v-if="showCatalogList.indexOf(13) > -1"
@@ -80,6 +83,7 @@
 </template>
 
 <script>
+import Vue from "vue";
 import pageHeader from "./components/header.vue";
 import chapterOne from "./components/chapter001.vue";
 import chapterTwo from "./components/chapter002.vue";
@@ -114,7 +118,7 @@
       observer: null,
       loadPageObserver: null,
       loadPageList: [],
-      questionData: {},
+      questionDataMap: {},
       renderSignMap: {}
     };
   },
@@ -204,23 +208,36 @@
     }, 500);
 
     // 娴嬭瘯椤甸潰璺宠浆
-    // setTimeout(() => {
-    //   this.gotoPage(1, 10);
-    //   setTimeout(() => {
-    //     this.renderSign("Highlight", {
-    //       id: "2ACA9359",
-    //       txt: "棰樹竴瀛︿範涓婚涓� 杩愬姩",
-    //       page: "10",
-    //       type: "Highlight",
-    //       color: "#F5E12A"
-    //     });
-    // setTimeout(() => {
-    //   this.delSign({
-    //     ids: ["2ACA9359"]
-    //   });
-    // }, 2000);
-    //   }, 5000);
-    // }, 1000);
+    setTimeout(() => {
+      //   this.gotoPage(1, 10);
+      //   setTimeout(() => {
+      //     this.renderSign("Highlight", {
+      //       id: "2ACA9359",
+      //       txt: "棰樹竴瀛︿範涓婚涓� 杩愬姩",
+      //       page: "10",
+      //       type: "Highlight",
+      //       color: "#F5E12A"
+      //     });
+      // setTimeout(() => {
+      //   this.delSign({
+      //     ids: ["2ACA9359"]
+      //   });
+      // }, 2000);
+      //   }, 5000);
+
+      // const pageDom = (this.container ? this.container : document)
+      //   .querySelector("#app")
+      //   .querySelectorAll(".page-box");
+      // 妫�绱�
+      // console.log(this.searchTextByPage("淇濇姢鍐呰剰鍣ㄥ畼"), "searchTextByPage");
+      // 妫�绱㈣烦杞�
+      this.searchItemLocation({
+        catalog: 2,
+        page: 10,
+        txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
+        txtIndex: 57
+      });
+    }, 5000);
   },
   methods: {
     // 婊氬姩鐩戝惉
@@ -269,7 +286,7 @@
       this.previousScrollTop = event.target.scrollTop;
     },
     // 绔犺妭銆侀〉闈㈣烦杞�
-    gotoPage(catalog, page) {
+    gotoPage(catalog, page, callback) {
       if (catalog >= 0 && catalog <= this.catalogLength) {
         // 澶勭悊娓叉煋绔犺妭
         if (catalog == 0) {
@@ -290,6 +307,7 @@
           ).querySelector(`[page="${page}"]`);
           if (pageDom) {
             pageDom.scrollIntoView();
+            if (callback) callback();
           } else {
             console.log("椤电爜閿欒锛�");
           }
@@ -324,10 +342,9 @@
           this.container ? this.container : document
         ).querySelector(`[page="${data.page}"]`);
         // 鍒涘缓 createTreeWalker 杩唬鍣紝鐢ㄤ簬閬嶅巻鏂囨湰鑺傜偣锛屼繚瀛樺埌涓�涓暟缁�
-        const treeWalker = document.createTreeWalker(
-          pageDom,
-          NodeFilter.SHOW_TEXT
-        );
+        const treeWalker = (
+          this.container ? this.container : document
+        ).createTreeWalker(pageDom, NodeFilter.SHOW_TEXT);
         const allTextNodes = [];
         let currentNode = treeWalker.nextNode();
         while (currentNode) {
@@ -503,6 +520,7 @@
       });
     },
     getParentWithClass(element, className) {
+      console.log(element, className, "element, className");
       while (element.parentElement) {
         element = element.parentElement;
         if (element.classList.contains(className)) {
@@ -552,11 +570,11 @@
               "chapter"
             );
             const catalog = catalogDom.getAttribute("num");
-            if (!this.questionData[page]) {
+            if (!this.questionDataMap[page]) {
               if (testData && testData[catalog]) {
                 if (testData[catalog][page]) {
                   if (Array.isArray(testData[catalog][page])) {
-                    this.questionData[page] = await getQuestionList(
+                    this.questionDataMap[page] = await getQuestionList(
                       page,
                       testData[catalog][page],
                       this.config.activeBook
@@ -570,9 +588,9 @@
                         this.config.activeBook
                       );
                     }
-                    this.questionData[page] = obj;
+                    this.questionDataMap[page] = obj;
                   }
-                  console.log("棰樼洰", this.questionData);
+                  console.log("棰樼洰", this.questionDataMap);
                 }
               }
             }
@@ -631,32 +649,46 @@
           // }
         });
       }
-      // swiper-container
       const pptDoms = (
         this.container ? this.container : document
-      ).querySelectorAll(".swiper-ppt");
+      ).querySelectorAll(".swiper_ppt");
       for (let i = 0; i < pptDoms.length; i++) {
-        debugger
         const dom = pptDoms[i];
         new Swiper(dom, {
-          loop: false, // 鏃犵紳
-          autoplay: false,
-          paginationClickable: true,
-          slidesPerView: 1, // 涓�缁勪笁涓�
-          spaceBetween: 30, // 闂撮殧
-          // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
-          navigation: {
-            nextEl: (this.container ? this.container : document).querySelector(
-              ".swiper-button-next"
-            ),
-            prevEl: (this.container ? this.container : document).querySelector(
-              ".swiper-button-prev"
-            )
+        loop: false, // 鏃犵紳
+        autoplay: false,
+        paginationClickable: true,
+        slidesPerView: 1, // 涓�缁勪笁涓�
+        spaceBetween: 30, // 闂撮殧
+        // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
+        navigation: {
+          nextEl: (this.container ? this.container : document).querySelector(
+            ".swiper-button-next"
+          ),
+          prevEl: (this.container ? this.container : document).querySelector(
+            ".swiper-button-prev"
+          ),
+        },
+        // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
+        observer: true,
+        observeParents: true,
+        on: {
+          init:(value) => {
+            let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
+            let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁�
+            var paginationInfoEl = dom.querySelector('.pageBox');
+            if(paginationInfoEl)
+              paginationInfoEl.textContent = currentPage + '/' + totalPages;
           },
-          // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
-          observer: true,
-          observeParents: true
-        });
+          slideChange:(value) => {
+            let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
+            let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁�
+            var paginationInfoEl = dom.querySelector('.pageBox');
+            if(paginationInfoEl)
+              paginationInfoEl.textContent = currentPage + '/' + totalPages;
+          },
+        },
+      });
       }
     },
     initViewer() {
@@ -674,6 +706,152 @@
           title: true // 鏄剧ず鏍囬
         });
       }
+    },
+    // 鏍规嵁鍏抽敭瀛楀叏鏂囨绱�
+    searchTextByPage(keyword) {
+      const searchResult = [];
+      let catalogIndex = 0;
+      // 鎵�鏈夌珷鑺傜粍浠讹紙姣忔湰涔﹀埗浣滄椂鍗曠嫭閰嶇疆锛�
+      const pageData = {
+        pageHeader,
+        chapterOne,
+        chapterTwo,
+        chapterThree,
+        chapterFour,
+        chapterFive,
+        chapterSix,
+        chapterSeven,
+        chapterEight,
+        chapterNine,
+        chapterTen,
+        chapterEleven,
+        chapterTwelve,
+        chapterThirteen
+      };
+      // 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
+      for (const key in pageData) {
+        catalogIndex++;
+        let pageComponent, pageExample;
+        // 鍏堟覆鏌撲竴娆″綋鍓嶇珷鑺傛枃浠讹紙杩欐椂椤甸潰鐨勫唴瀹逛负绌猴級锛岃幏鍙栭〉鐮佷俊鎭�
+        pageComponent = Vue.extend(pageData[key]);
+        pageExample = new pageComponent({
+          propsData: {
+            showPageList: [],
+            questionData: {}
+          }
+        });
+        pageExample.$mount(
+          (this.container ? this.container : document).querySelector(
+            "#searchContent"
+          )
+        );
+        // 鑾峰彇椤电爜
+        const pageDom = (this.container ? this.container : document)
+          .querySelector("#searchDomBox")
+          .querySelectorAll(".page-box");
+        const pages = [];
+        for (let i = 0; i < pageDom.length; i++) {
+          const pageDomItem = pageDom[i];
+          pages.push(Number(pageDomItem.getAttribute("page")));
+        }
+        // 鑾峰彇椤甸潰缁撴潫锛屽嵏杞介攢姣�
+        pageExample.$destroy();
+        (this.container ? this.container : document).querySelector(
+          "#searchDomBox"
+        ).innerHTML = '<div id="searchContent"></div>';
+        // 閬嶅巻椤电爜
+        if (pages.length) {
+          for (let i = 0; i < pages.length; i++) {
+            const pageNum = pages[i];
+            // 鍔ㄦ�佹覆鏌撳搴旂珷鑺傜殑椤电爜
+            pageComponent = Vue.extend(pageData[key]);
+            pageExample = new pageComponent({
+              propsData: {
+                showPageList: [pageNum],
+                questionData: {}
+              }
+            });
+            pageExample.$mount(
+              (this.container ? this.container : document).querySelector(
+                "#searchContent"
+              )
+            );
+            // 鑾峰彇瀵瑰簲椤甸潰dom
+            const thisPageDom = (this.container ? this.container : document)
+              .querySelector("#searchDomBox")
+              .querySelector(`[page="${pageNum}"]`);
+            if (thisPageDom) {
+              // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+              const pageTextList = (
+                this.container ? this.container : document
+              ).createTreeWalker(thisPageDom, NodeFilter.SHOW_TEXT);
+              // 鍖归厤鍏抽敭瀛�
+              const allPageTextNodes = [];
+              let currentNode = pageTextList.nextNode();
+              while (currentNode) {
+                allPageTextNodes.push(currentNode);
+                currentNode = pageTextList.nextNode();
+              }
+              for (let i = 0; i < allPageTextNodes.length; i++) {
+                const textDom = allPageTextNodes[i];
+                let txtIndex = textDom.textContent.indexOf(keyword);
+                if (txtIndex > -1) {
+                  // 璁板綍鍏抽敭瀛楁墍鍦ㄩ〉鐮併�佺珷鑺備互鍙婂尮閰嶅埌鐨勬钀�
+                  searchResult.push({
+                    page: pageNum,
+                    catalog: catalogIndex,
+                    txt: textDom.textContent,
+                    txtIndex: txtIndex
+                  });
+                }
+              }
+              // 缁撴潫锛屽嵏杞介攢姣�
+              pageExample.$destroy();
+              (this.container ? this.container : document).querySelector(
+                "#searchDomBox"
+              ).innerHTML = '<div id="searchContent"></div>';
+            }
+          }
+        }
+      }
+      // 杈撳嚭鎼滅储缁撴灉
+      console.log(searchResult);
+      return searchResult;
+    },
+    // 鏍规嵁妫�绱㈢粨鏋滆烦杞搴斾綅缃苟楂樹寒
+    searchItemLocation(data) {
+      // 璺宠浆
+      this.gotoPage(data.catalog, data.page, () => {
+        // 楂樹寒琛�
+        const thisPageDom = (
+          this.container ? this.container : document
+        ).querySelector(`[page="${data.page}"]`);
+        if (thisPageDom) {
+          // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+          const pageTextList = (
+            this.container ? this.container : document
+          ).createTreeWalker(thisPageDom, NodeFilter.SHOW_TEXT);
+          // 鍖归厤鍏抽敭瀛�
+          const allPageTextNodes = [];
+          let currentNode = pageTextList.nextNode();
+          while (currentNode) {
+            allPageTextNodes.push(currentNode);
+            currentNode = pageTextList.nextNode();
+          }
+          for (let i = 0; i < allPageTextNodes.length; i++) {
+            const textDom = allPageTextNodes[i];
+            let txtIndex = textDom.textContent.indexOf(data.txt);
+            if (txtIndex > -1) {
+              textDom.parentNode.style.transition = "background-color 0.8s";
+              textDom.parentNode.scrollIntoView();
+              textDom.parentNode.backgroundColor = "#79bbf0";
+              setTimeout(() => {
+                textDom.parentNode.backgroundColor = "";
+              }, 2000);
+            }
+          }
+        }
+      });
     }
   },
   components: {
diff --git a/src/books/embedded/assets/images/icon/download.svg b/src/books/embedded/assets/images/icon/download.svg
deleted file mode 100644
index 162bd5b..0000000
--- a/src/books/embedded/assets/images/icon/download.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<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="200" height="200">
-  <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>
\ No newline at end of file
diff --git "a/src/books/embedded/assets/images/icon/rar\0501\051.png" "b/src/books/embedded/assets/images/icon/rar\0501\051.png"
new file mode 100644
index 0000000..e4b89fc
--- /dev/null
+++ "b/src/books/embedded/assets/images/icon/rar\0501\051.png"
Binary files differ
diff --git a/src/books/embedded/assets/images/icon/rar.png b/src/books/embedded/assets/images/icon/rar.png
index e4b89fc..f406644 100644
--- a/src/books/embedded/assets/images/icon/rar.png
+++ b/src/books/embedded/assets/images/icon/rar.png
Binary files differ
diff --git "a/src/books/embedded/assets/images/icon/word\0501\051.png" "b/src/books/embedded/assets/images/icon/word\0501\051.png"
new file mode 100644
index 0000000..dafcf8c
--- /dev/null
+++ "b/src/books/embedded/assets/images/icon/word\0501\051.png"
Binary files differ
diff --git a/src/books/embedded/assets/images/icon/word.png b/src/books/embedded/assets/images/icon/word.png
index dafcf8c..ecca1fa 100644
--- a/src/books/embedded/assets/images/icon/word.png
+++ b/src/books/embedded/assets/images/icon/word.png
Binary files differ
diff --git "a/src/books/embedded/assets/images/icon/\344\270\213\350\275\275.svg" "b/src/books/embedded/assets/images/icon/\344\270\213\350\275\275.svg"
new file mode 100644
index 0000000..ad644d0
--- /dev/null
+++ "b/src/books/embedded/assets/images/icon/\344\270\213\350\275\275.svg"
@@ -0,0 +1,7 @@
+<svg t="1716978364001" class="icon" viewBox="0 0 1024 1024" version="1.1"
+  xmlns="http://www.w3.org/2000/svg" p-id="13396" xmlns:xlink="http://www.w3.org/1999/xlink"
+  width="200" height="200">
+  <path
+    d="M554.7 554.7V793l78-78 60.4 60.4L512 956.3l-181-181 60.4-60.4 77.9 78.1V554.7h85.3zM512 85.3a298.7 298.7 0 0 1 296.7 264.3A234.7 234.7 0 0 1 768 809.7v-84.4a256 256 0 0 0-511.8-9.6l-0.2 9.6v84.4a234.7 234.7 0 0 1-40.7-460.1A298.7 298.7 0 0 1 512 85.3z"
+    p-id="13397"></path>
+</svg>
\ No newline at end of file
diff --git a/src/books/embedded/assets/main.less b/src/books/embedded/assets/main.less
index 97e35c7..b35fd96 100644
--- a/src/books/embedded/assets/main.less
+++ b/src/books/embedded/assets/main.less
@@ -626,6 +626,9 @@
   .fl-cl {
     flex-direction: column;
   }
+  .fl-bt {
+    justify-content: space-between;
+  }
   .ju-cn {
     justify-content: center;
   }
@@ -676,6 +679,9 @@
   }
   .mb-40 {
     margin-bottom: 40px;
+  }
+  .m0 {
+    margin: 0;
   }
   .m0-auto {
     margin: 0 auto;
@@ -815,6 +821,7 @@
     font-size: 14px;
   }
   .svg-btn {
+    padding: 0 2px;
     cursor: pointer;
     display: inline-block;
     border: 1px solid #501438;
diff --git a/src/books/embedded/view/components/chapter001.vue b/src/books/embedded/view/components/chapter001.vue
index 11321a5..9a59f99 100644
--- a/src/books/embedded/view/components/chapter001.vue
+++ b/src/books/embedded/view/components/chapter001.vue
@@ -84,19 +84,19 @@
                     /> -->
                     <span class="svg-btn" @click="download('宸ョ▼鏍蜂緥')">
                       <svg
-                        t="1716796212460"
-                        class="theme-color icon"
+                        t="1716978364001"
+                        class="icon"
                         viewBox="0 0 1024 1024"
                         version="1.1"
                         xmlns="http://www.w3.org/2000/svg"
-                        p-id="1598"
+                        p-id="13396"
                         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"
+                          d="M554.7 554.7V793l78-78 60.4 60.4L512 956.3l-181-181 60.4-60.4 77.9 78.1V554.7h85.3zM512 85.3a298.7 298.7 0 0 1 296.7 264.3A234.7 234.7 0 0 1 768 809.7v-84.4a256 256 0 0 0-511.8-9.6l-0.2 9.6v84.4a234.7 234.7 0 0 1-40.7-460.1A298.7 298.7 0 0 1 512 85.3z"
+                          p-id="13397"
                         ></path>
                       </svg>
                     </span>
@@ -111,26 +111,21 @@
                       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"
+                        t="1716978364001"
                         class="icon"
                         viewBox="0 0 1024 1024"
                         version="1.1"
                         xmlns="http://www.w3.org/2000/svg"
-                        p-id="1598"
+                        p-id="13396"
                         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"
+                          d="M554.7 554.7V793l78-78 60.4 60.4L512 956.3l-181-181 60.4-60.4 77.9 78.1V554.7h85.3zM512 85.3a298.7 298.7 0 0 1 296.7 264.3A234.7 234.7 0 0 1 768 809.7v-84.4a256 256 0 0 0-511.8-9.6l-0.2 9.6v84.4a234.7 234.7 0 0 1-40.7-460.1A298.7 298.7 0 0 1 512 85.3z"
+                          p-id="13397"
                         ></path>
                       </svg>
                     </span>
@@ -145,26 +140,21 @@
                       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"
+                        t="1716978364001"
                         class="icon"
                         viewBox="0 0 1024 1024"
                         version="1.1"
                         xmlns="http://www.w3.org/2000/svg"
-                        p-id="1598"
+                        p-id="13396"
                         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"
+                          d="M554.7 554.7V793l78-78 60.4 60.4L512 956.3l-181-181 60.4-60.4 77.9 78.1V554.7h85.3zM512 85.3a298.7 298.7 0 0 1 296.7 264.3A234.7 234.7 0 0 1 768 809.7v-84.4a256 256 0 0 0-511.8-9.6l-0.2 9.6v84.4a234.7 234.7 0 0 1-40.7-460.1A298.7 298.7 0 0 1 512 85.3z"
+                          p-id="13397"
                         ></path>
                       </svg>
                     </span>
@@ -179,36 +169,60 @@
               </p>
               <div class="qrbodyPic">
                 <div class="openImgBox">
-                  <img src="../../assets/images/img00014001.jpg" alt="" class="w100">
+                  <img
+                    src="../../assets/images/img00014001.jpg"
+                    alt="宓屽叆寮忕粍鎬佽蒋浠剁郴缁熷簲鐢ㄤ簬鐢靛姏琛屼笟"
+                    class="w100"
+                  />
                 </div>
-                <p class="imgdescript">鍥�1-1銆�宓屽叆寮忕粍鎬佽蒋浠剁郴缁熷簲鐢ㄤ簬鐢靛姏琛屼笟</p>
+                <p class="imgdescript">
+                  鍥�1-1銆�宓屽叆寮忕粍鎬佽蒋浠剁郴缁熷簲鐢ㄤ簬鐢靛姏琛屼笟
+                </p>
               </div>
               <div class="qrbodyPic">
                 <div class="openImgBox">
-                  <img src="../../assets/images/img00014002.jpg" alt="" class="w100">
+                  <img
+                    src="../../assets/images/img00014002.jpg"
+                    alt="宓屽叆寮忕粍鎬佽蒋浠剁郴缁熷簲鐢ㄤ簬閾佽矾琛屼笟"
+                    class="w100"
+                  />
                 </div>
-                <p class="imgdescript">鍥�1-2銆�宓屽叆寮忕粍鎬佽蒋浠剁郴缁熷簲鐢ㄤ簬閾佽矾琛屼笟</p>
+                <p class="imgdescript">
+                  鍥�1-2銆�宓屽叆寮忕粍鎬佽蒋浠剁郴缁熷簲鐢ㄤ簬閾佽矾琛屼笟
+                </p>
               </div>
               <div class="qrbodyPic">
                 <div class="openImgBox">
-                  <img src="../../assets/images/img00014003.jpg" alt="" class="w100">
+                  <img
+                    src="../../assets/images/img00014003.jpg"
+                    alt="宓屽叆寮忕粍鎬佽蒋浠剁郴缁熷簲鐢ㄤ簬姗¤兌琛屼笟"
+                    class="w100"
+                  />
                 </div>
-                <p class="imgdescript">鍥�1-3銆�宓屽叆寮忕粍鎬佽蒋浠剁郴缁熷簲鐢ㄤ簬姗¤兌琛屼笟</p>
+                <p class="imgdescript">
+                  鍥�1-3銆�宓屽叆寮忕粍鎬佽蒋浠剁郴缁熷簲鐢ㄤ簬姗¤兌琛屼笟
+                </p>
               </div>
               <div class="qrbodyPic">
                 <div class="openImgBox">
-                  <img src="../../assets/images/img00014004.jpg" alt="" class="w100">
+                  <img
+                    src="../../assets/images/img00014004.jpg"
+                    alt="宓屽叆寮忕粍鎬佽蒋浠剁郴缁熷簲鐢ㄤ簬绾虹粐琛屼笟"
+                    class="w100"
+                  />
                 </div>
-                <p class="imgdescript">鍥�1-4銆�宓屽叆寮忕粍鎬佽蒋浠剁郴缁熷簲鐢ㄤ簬绾虹粐琛屼笟</p>
+                <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>
+        <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">
@@ -264,7 +278,11 @@
           </p>
           <div class="qrbodyPic">
             <div class="openImgBox">
-              <img src="../../assets/images/img00015001.jpg" alt="" class="w100">
+              <img
+                src="../../assets/images/img00015001.jpg"
+                alt="鐢ㄦ埛搴旂敤绯荤粺缁勬垚"
+                class="w100"
+              />
             </div>
             <p class="imgdescript">鍥�1-5銆�鐢ㄦ埛搴旂敤绯荤粺缁勬垚</p>
           </div>
@@ -286,7 +304,11 @@
       <div v-if="showPageList.indexOf(14) > -1">
         <div>
           <div class="mt-20">
-            <img src="../../assets/images/page-header.png" alt="" class="w100" />
+            <img
+              src="../../assets/images/page-header.png"
+              alt=""
+              class="w100"
+            />
           </div>
           <div class="padding-96">
             <p class="content t0">
@@ -367,22 +389,21 @@
           <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="fl openImgBox">
             <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>
+              <img
+                src="../../assets/images/img00017001.jpg"
+                alt="姝h鍥�"
+                class="w100"
+              />
               <p class="imgdescript">鍥�1-6銆�姝h鍥�</p>
             </div>
             <div class="">
-              <div class="openImgBox">
-                <img src="../../assets/images/img00017002.jpg" alt="" class="w100">
-              </div>
+              <img
+                src="../../assets/images/img00017002.jpg"
+                alt="鑳岃鍥�"
+                class="w100"
+              />
               <p class="imgdescript">鍥�1-7銆�鑳岃鍥�</p>
             </div>
           </div>
@@ -392,30 +413,44 @@
               <p class="content">
                 鈶犲皢寮�鍏崇數婧�24V+绔嚎鎻掑叆TPC鐢垫簮鎻掑ご鎺ョ嚎1绔腑锛屽鍥�1-8鎵�绀恒��
               </p>
-              <p class="content">鈶″皢寮�鍏崇數婧�24V-绔嚎鎻掑叆TPC鐢垫簮鎻掑ご鎺ョ嚎2绔腑銆�</p>
+              <p class="content">
+                鈶″皢寮�鍏崇數婧�24V-绔嚎鎻掑叆TPC鐢垫簮鎻掑ご鎺ョ嚎2绔腑銆�
+              </p>
               <p class="content">鈶娇鐢ㄤ竴瀛楀ご鏃嬪叿灏員PC鐢垫簮鎻掑ご铻洪拤閿佺揣銆�</p>
             </div>
             <div class="right">
               <div class="openImgBox">
-                <img src="../../assets/images/img00017003.jpg" alt="" class="w100">
+                <img
+                  src="../../assets/images/img00017003.jpg"
+                  alt="鐢垫簮鎻掑ご绀烘剰鍥惧強寮曡剼瀹氫箟"
+                  class="w100"
+                />
               </div>
               <p class="imgdescript">鍥�1-8銆�鐢垫簮鎻掑ご绀烘剰鍥惧強寮曡剼瀹氫箟</p>
             </div>
           </div>
-  
+
           <p class="content">
             锛�4锛塗PC7062K澶栭儴鎺ュ彛銆傛帴鍙h鏄庡鍥�1-9鎵�绀猴紝涓插彛寮曡剼瀹氫箟濡傚浘1-10鎵�绀恒��
           </p>
           <div>
             <div class="openImgBox">
-                <img src="../../assets/images/img00017004.jpg" alt="" class="w100">
-              </div>
+              <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>
+              <img
+                src="../../assets/images/img00017005.jpg"
+                alt="涓插彛寮曡剼瀹氫箟"
+                class="w100"
+              />
+            </div>
             <p class="imgdescript">鍥�1-10銆�涓插彛寮曡剼瀹氫箟</p>
           </div>
           <p class="content">
@@ -433,12 +468,20 @@
       <div v-if="showPageList.indexOf(16) > -1">
         <div>
           <div class="mt-20">
-            <img src="../../assets/images/page-header.png" alt="" class="w100" />
+            <img
+              src="../../assets/images/page-header.png"
+              alt=""
+              class="w100"
+            />
           </div>
           <div class="padding-96">
             <div>
               <div class="openImgBox">
-                <img src="../../assets/images/img00018001.jpg" alt="" class="w100">
+                <img
+                  src="../../assets/images/img00018001.jpg"
+                  alt="TPC鍚姩杩囩▼"
+                  class="w100"
+                />
               </div>
               <p class="imgdescript">鍥�1-11銆�TPC鍚姩杩囩▼</p>
             </div>
@@ -455,7 +498,11 @@
             </p>
             <div style="width: 90%" class="m0-auto">
               <div class="openImgBox">
-                <img src="../../assets/images/img00018002.jpg" alt="" class="w100">
+                <img
+                  src="../../assets/images/img00018002.jpg"
+                  alt="TPC7062K涓庤タ闂ㄥ瓙S7-200绯诲垪PLC閫氫俊鎺ョ嚎"
+                  class="w100"
+                />
               </div>
               <p class="imgdescript">
                 鍥�1-12銆�TPC7062K涓庤タ闂ㄥ瓙S7-200绯诲垪PLC閫氫俊鎺ョ嚎
@@ -463,7 +510,11 @@
             </div>
             <div class="m0-auto" style="width: 90%">
               <div class="openImgBox">
-                <img src="../../assets/images/img00018003.jpg" alt="" class="w100">
+                <img
+                  src="../../assets/images/img00018003.jpg"
+                  alt="TPC7062K涓庢濮嗛緳PLC閫氫俊鎺ョ嚎"
+                  class="w100"
+                />
               </div>
               <p class="imgdescript">鍥�1-13銆�TPC7062K涓庢濮嗛緳PLC閫氫俊鎺ョ嚎</p>
             </div>
@@ -471,9 +522,9 @@
         </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>
+        <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">
@@ -484,8 +535,12 @@
           </div>
           <div>
             <div class="openImgBox">
-                <img src="../../assets/images/img00019001.jpg" alt="" class="w100">
-              </div>
+              <img
+                src="../../assets/images/img00019001.jpg"
+                alt="TPC7062K涓庝笁鑿盕X绯诲垪PLC閫氫俊鎺ョ嚎"
+                class="w100"
+              />
+            </div>
             <p class="imgdescript">鍥�1-14銆�TPC7062K涓庝笁鑿盕X绯诲垪PLC閫氫俊鎺ョ嚎</p>
           </div>
           <p class="content">璇勫垎琛ㄨ琛�1-1銆�</p>
@@ -518,7 +573,8 @@
               <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="fengong" />
+                灏忕粍鍒嗗伐
                 <input type="checkbox" name="xingshi" value="xiaozu" /> 灏忕粍
               </td>
               <td colspan="2" class="table-cn">
@@ -625,14 +681,10 @@
               </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"
-                  /> -->
+                  <img
+                    src="../../assets/images/icon/rar.png"
+                    class="rar-icon"
+                  />
                   <span
                     class="svg-btn"
                     @click="
@@ -640,19 +692,19 @@
                     "
                   >
                     <svg
-                      t="1716796212460"
+                      t="1716978364001"
                       class="icon"
                       viewBox="0 0 1024 1024"
                       version="1.1"
                       xmlns="http://www.w3.org/2000/svg"
-                      p-id="1598"
+                      p-id="13396"
                       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"
+                        d="M554.7 554.7V793l78-78 60.4 60.4L512 956.3l-181-181 60.4-60.4 77.9 78.1V554.7h85.3zM512 85.3a298.7 298.7 0 0 1 296.7 264.3A234.7 234.7 0 0 1 768 809.7v-84.4a256 256 0 0 0-511.8-9.6l-0.2 9.6v84.4a234.7 234.7 0 0 1-40.7-460.1A298.7 298.7 0 0 1 512 85.3z"
+                        p-id="13397"
                       ></path>
                     </svg>
                   </span>
@@ -666,9 +718,12 @@
               </li>
             </ul>
           </div>
-  
+
           <video
-            :src="config.activeBook.resourceUrl + '/閰嶅瀛︿範璧勬簮/p7/MCGS瀹夎瑙嗛甯﹂煶棰�.mp4'"
+            :src="
+              config.activeBook.resourceUrl +
+              '/閰嶅瀛︿範璧勬簮/p7/MCGS瀹夎瑙嗛甯﹂煶棰�.mp4'
+            "
             webkit-playsinline="true"
             x-webkit-airplay="true"
             playsinline="true"
@@ -697,7 +752,11 @@
       <div v-if="showPageList.indexOf(18) > -1">
         <div>
           <div class="mt-20">
-            <img src="../../assets/images/page-header.png" alt="" class="w100" />
+            <img
+              src="../../assets/images/page-header.png"
+              alt=""
+              class="w100"
+            />
           </div>
           <div class="padding-96">
             <p class="content">
@@ -720,82 +779,70 @@
             </p>
             <div class="qrbodyPic">
               <div class="banshi openImgBox">
-                  <div class="swiper-container swiper-img">
-                    <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 class="swiper-container swiper-img">
+                  <div class="swiper-wrapper">
+                    <div class="swiper-slide">
+                      <div class="imgBox" style="width: 100%; height: 100%">
+                        <img
+                          src="../../assets/images/carousel-one.png"
+                          alt="MCGS瀹夎绋嬪簭绐楀彛"
+                        />
                       </div>
                     </div>
-                    <div class="swiper-pagination"></div>
-                    <div class="swiper-button-next"></div>
-                    <div class="swiper-button-prev"></div>
+                    <div class="swiper-slide">
+                      <div class="imgBox" style="width: 100%; height: 100%">
+                        <img
+                          src="../../assets/images/carousel-two.png"
+                          alt="鍚姩瀹夎绋嬪簭"
+                        />
+                      </div>
+                    </div>
+                    <div class="swiper-slide">
+                      <div class="imgBox" style="width: 100%; height: 100%">
+                        <img
+                          src="../../assets/images/carousel-three.png"
+                          alt="鎸囧畾瀹夎鐩綍"
+                        />
+                      </div>
+                    </div>
+                    <div class="swiper-slide">
+                      <div class="imgBox" style="width: 100%; height: 100%">
+                        <img
+                          src="../../assets/images/carousel-four.png"
+                          alt="閫夋嫨瀹夎璁惧椹卞姩"
+                        />
+                      </div>
+                    </div>
+                    <div class="swiper-slide">
+                      <div class="imgBox" style="width: 100%; height: 100%">
+                        <img
+                          src="../../assets/images/carousel-five.png"
+                          alt="椹卞姩瀹夎绋嬪簭"
+                        />
+                      </div>
+                    </div>
+                    <div class="swiper-slide">
+                      <div class="imgBox" style="width: 100%; height: 100%">
+                        <img
+                          src="../../assets/images/carousel-six.png"
+                          alt="缁勬�佺幆澧冨拰妯℃嫙杩愯鐜蹇嵎鏂瑰紡鍥炬爣"
+                        />
+                      </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">
@@ -834,7 +881,8 @@
               <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="fengong" />
+                灏忕粍鍒嗗伐
                 <input type="checkbox" name="xingshi" value="xiaozu" /> 灏忕粍
               </td>
               <td colspan="2" class="table-cn">
@@ -898,33 +946,19 @@
             </div>
             <ul class="word-resource fl ju-ev">
               <li class="fl fl-cl al-cn p08">
-                <div class="fl al-end">
+                <div class="fl al-end" style="margin: 10px 0">
                   <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>
+                    <svg t="1716978364001" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                        xmlns="http://www.w3.org/2000/svg" p-id="13396" xmlns:xlink="http://www.w3.org/1999/xlink"
+                        width="15" height="15">
+                        <path
+                          d="M554.7 554.7V793l78-78 60.4 60.4L512 956.3l-181-181 60.4-60.4 77.9 78.1V554.7h85.3zM512 85.3a298.7 298.7 0 0 1 296.7 264.3A234.7 234.7 0 0 1 768 809.7v-84.4a256 256 0 0 0-511.8-9.6l-0.2 9.6v84.4a234.7 234.7 0 0 1-40.7-460.1A298.7 298.7 0 0 1 512 85.3z"
+                          p-id="13397"></path>
+                      </svg>
                   </span>
                 </div>
                 <div>
@@ -935,33 +969,19 @@
                 <div class="word-border"></div>
               </li>
               <li class="fl fl-cl al-cn p08">
-                <div class="fl al-end">
+                <div class="fl al-end" style="margin: 10px 0">
                   <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>
+                    <svg t="1716978364001" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                        xmlns="http://www.w3.org/2000/svg" p-id="13396" xmlns:xlink="http://www.w3.org/1999/xlink"
+                        width="15" height="15">
+                        <path
+                          d="M554.7 554.7V793l78-78 60.4 60.4L512 956.3l-181-181 60.4-60.4 77.9 78.1V554.7h85.3zM512 85.3a298.7 298.7 0 0 1 296.7 264.3A234.7 234.7 0 0 1 768 809.7v-84.4a256 256 0 0 0-511.8-9.6l-0.2 9.6v84.4a234.7 234.7 0 0 1-40.7-460.1A298.7 298.7 0 0 1 512 85.3z"
+                          p-id="13397"></path>
+                      </svg>
                   </span>
                 </div>
                 <div>
@@ -972,33 +992,19 @@
                 <div class="word-border"></div>
               </li>
               <li class="fl fl-cl al-cn p08">
-                <div class="fl al-end">
+                <div class="fl al-end" style="margin: 10px 0">
                   <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>
+                    <svg t="1716978364001" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                        xmlns="http://www.w3.org/2000/svg" p-id="13396" xmlns:xlink="http://www.w3.org/1999/xlink"
+                        width="15" height="15">
+                        <path
+                          d="M554.7 554.7V793l78-78 60.4 60.4L512 956.3l-181-181 60.4-60.4 77.9 78.1V554.7h85.3zM512 85.3a298.7 298.7 0 0 1 296.7 264.3A234.7 234.7 0 0 1 768 809.7v-84.4a256 256 0 0 0-511.8-9.6l-0.2 9.6v84.4a234.7 234.7 0 0 1-40.7-460.1A298.7 298.7 0 0 1 512 85.3z"
+                          p-id="13397"></path>
+                      </svg>
                   </span>
                 </div>
                 <div>
@@ -1009,36 +1015,22 @@
                 <div class="word-border"></div>
               </li>
               <li class="fl fl-cl al-cn p08">
-                <div class="fl al-end">
+                <div class="fl al-end" style="margin: 10px 0">
                   <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>
+                    <svg t="1716978364001" class="icon" viewBox="0 0 1024 1024" version="1.1"
+                        xmlns="http://www.w3.org/2000/svg" p-id="13396" xmlns:xlink="http://www.w3.org/1999/xlink"
+                        width="15" height="15">
+                        <path
+                          d="M554.7 554.7V793l78-78 60.4 60.4L512 956.3l-181-181 60.4-60.4 77.9 78.1V554.7h85.3zM512 85.3a298.7 298.7 0 0 1 296.7 264.3A234.7 234.7 0 0 1 768 809.7v-84.4a256 256 0 0 0-511.8-9.6l-0.2 9.6v84.4a234.7 234.7 0 0 1-40.7-460.1A298.7 298.7 0 0 1 512 85.3z"
+                          p-id="13397"></path>
+                      </svg>
                   </span>
                 </div>
-  
+
                 <div>
                   <span>纭欢鏁欑▼</span>
                 </div>
@@ -1088,29 +1080,38 @@
               active="true"
             />锛屾墦寮�宓屽叆鐗堢粍鎬佽蒋浠讹紝鐒跺悗鎸夊涓嬫楠ゅ缓绔嬪伐绋嬶細
           </p>
-          <p class="content">
-            锛�1锛夐�夋嫨鈥滄枃浠垛�濊彍鍗曚腑鈥滄柊寤哄伐绋嬧�濆懡浠わ紝寮瑰嚭鈥滄柊寤哄伐绋嬭缃�濆璇濇锛屽鍥�1-21鎵�绀猴紝TPC绫诲瀷閫夋嫨涓衡�淭PC7062K鈥濓紝鍗曞嚮鈥滅‘瀹氣�濇寜閽��
-          </p>
-          <p class="content">
-            锛�2锛夐�夋嫨鈥滄枃浠垛�濊彍鍗曚腑鐨勨�滃伐绋嬪彟瀛樹负鈥濆懡浠わ紝寮瑰嚭鈥滄枃浠朵繚瀛樷�濆璇濇锛屽湪鏂囦欢鍚嶄竴鏍忓唴杈撳叆鈥滃父鐢ㄦ瀯浠朵娇鐢ㄢ�濓紝鍗曞嚮鈥滀繚瀛樷�濇寜閽紝宸ョ▼鍒涘缓瀹屾瘯銆�
-          </p>
-          <div class="qrbodyPic">
-            <div class="openImgBox">
-                <img style="width:70%" src="../../assets/images/img00021003.jpg" alt="" class="w100">
+          <ul class="fl fl-bt m0 p0">
+            <li style="width: 58%">
+              <p class="content">
+                锛�1锛夐�夋嫨鈥滄枃浠垛�濊彍鍗曚腑鈥滄柊寤哄伐绋嬧�濆懡浠わ紝寮瑰嚭鈥滄柊寤哄伐绋嬭缃�濆璇濇锛屽鍥�1-21鎵�绀猴紝TPC绫诲瀷閫夋嫨涓衡�淭PC7062K鈥濓紝鍗曞嚮鈥滅‘瀹氣�濇寜閽��
+              </p>
+              <p class="content">
+                锛�2锛夐�夋嫨鈥滄枃浠垛�濊彍鍗曚腑鐨勨�滃伐绋嬪彟瀛樹负鈥濆懡浠わ紝寮瑰嚭鈥滄枃浠朵繚瀛樷�濆璇濇锛屽湪鏂囦欢鍚嶄竴鏍忓唴杈撳叆鈥滃父鐢ㄦ瀯浠朵娇鐢ㄢ�濓紝鍗曞嚮鈥滀繚瀛樷�濇寜閽紝宸ョ▼鍒涘缓瀹屾瘯銆�
+              </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>绐楀彛缁勬��</b>
+              </p>
+              <p class="content">
+                锛�1锛夊湪宸ヤ綔鍙颁腑婵�娲荤敤鎴风獥鍙o紝鍗曞嚮鈥滄柊寤虹獥鍙b�濇寜閽紝寤虹珛鏂扮敾闈⑩�滅獥鍙�0鈥濓紝濡傚浘1-22鎵�绀恒��
+              </p>
+            </li>
+            <li style="width: 38%">
+              <div class="openImgBox">
+                <img
+                  src="../../assets/images/img00021003.jpg"
+                  alt="閫夋嫨TPC绫诲瀷"
+                  class="w100"
+                />
               </div>
-            <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锛夊湪宸ヤ綔鍙颁腑婵�娲荤敤鎴风獥鍙o紝鍗曞嚮鈥滄柊寤虹獥鍙b�濇寜閽紝寤虹珛鏂扮敾闈⑩�滅獥鍙�0鈥濓紝濡傚浘1-22鎵�绀恒��
-          </p>
+              <p class="imgdescript">鍥�1-21銆�閫夋嫨TPC绫诲瀷</p>
+            </li>
+          </ul>
+
           <p class="content">
             锛�2锛夊崟鍑烩�滅獥鍙e睘鎬р�濇寜閽紝寮瑰嚭鈥滅敤鎴风獥鍙e睘鎬ц缃�濆璇濇锛屽湪鈥滃熀鏈睘鎬р�濋�夐」鍗★紝灏嗏�滅獥鍙e悕绉扳�濅慨鏀逛负鈥滃父鐢ㄦ瀯浠朵娇鐢ㄢ�濓紝鍗曞嚮鈥滅‘璁も�濇寜閽繘琛屼繚瀛橈紝濡傚浘1-23鎵�绀恒��
           </p>
@@ -1126,19 +1127,31 @@
       <div v-if="showPageList.indexOf(20) > -1">
         <div>
           <div class="mt-20">
-            <img src="../../assets/images/page-header.png" alt="" class="w100" />
+            <img
+              src="../../assets/images/page-header.png"
+              alt=""
+              class="w100"
+            />
           </div>
           <div class="padding-96">
             <div class="fl ju-bt w100">
               <div>
                 <div class="openImgBox">
-                <img src="../../assets/images/img00022001.jpg" alt="" class="w100">
-              </div>
+                  <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">
+                  <img
+                    src="../../assets/images/img00022002.jpg"
+                    alt="绐楀彛灞炴�ц缃�"
+                    class="w100"
+                  />
                 </div>
                 <p class="imgdescript">鍥�1-23銆�绐楀彛灞炴�ц缃�</p>
               </div>
@@ -1152,13 +1165,21 @@
             <div class="fl ju-bt">
               <div>
                 <div class="openImgBox">
-                  <img src="../../assets/images/img00022003.jpg" alt="" class="w100">
+                  <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">
+                  <img
+                    src="../../assets/images/img00022004.jpg"
+                    alt="鏍囧噯鎸夐挳鏋勪欢灞炴�ц缃�"
+                    class="w100"
+                  />
                 </div>
                 <p class="imgdescript">鍥�1-25銆�鏍囧噯鎸夐挳鏋勪欢灞炴�ц缃�</p>
               </div>
@@ -1193,39 +1214,59 @@
           <div class="fl ju-bt">
             <div>
               <div class="openImgBox">
-                  <img src="../../assets/images/img00023001.jpg" alt="" class="w100">
-                </div>
+                <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>
+                <img
+                  src="../../assets/images/img00023002.jpg"
+                  alt="鎸夐挳鎺掑垪"
+                  class="w100"
+                />
+              </div>
               <p class="imgdescript">鍥�1-27銆�鎸夐挳鎺掑垪</p>
             </div>
           </div>
-  
+
           <div class="qrbodyPic">
             <div class="openImgBox">
-                  <img src="../../assets/images/img00023003.jpg" alt="" class="w100">
-                </div>
+              <img
+                src="../../assets/images/img00023003.jpg"
+                alt="娣诲姞鎸囩ず鐏�"
+                class="w100"
+              />
+            </div>
             <p class="imgdescript">鍥�1-28銆�娣诲姞鎸囩ず鐏�</p>
           </div>
           <div class="fl">
             <div>
               <div class="openImgBox">
-                  <img src="../../assets/images/img00023004.jpg" alt="" class="w100">
-                </div>
+                <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>
+                <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>
@@ -1244,19 +1285,31 @@
       <div v-if="showPageList.indexOf(22) > -1">
         <div>
           <div class="mt-20">
-            <img src="../../assets/images/page-header.png" alt="" class="w100" />
+            <img
+              src="../../assets/images/page-header.png"
+              alt=""
+              class="w100"
+            />
           </div>
           <div class="padding-96">
             <div class="fl">
               <div>
                 <div class="openImgBox">
-                  <img src="../../assets/images/img00024001.jpg" alt="" class="w100">
+                  <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">
+                  <img
+                    src="../../assets/images/img00024002.jpg"
+                    alt="杈撳叆妗嗘帓鍒�"
+                    class="w100"
+                  />
                 </div>
                 <p class="imgdescript">鍥�1-32銆�杈撳叆妗嗘帓鍒�</p>
               </div>
@@ -1268,13 +1321,21 @@
             <div class="fl">
               <div>
                 <div class="openImgBox">
-                  <img src="../../assets/images/img00024003.jpg" alt="" class="w100">
+                  <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">
+                  <img
+                    src="../../assets/images/img00024004.jpg"
+                    alt="鎺у埗鎸夐挳璁剧疆"
+                    class="w100"
+                  />
                 </div>
                 <p class="imgdescript">鍥�1-34銆�鎺у埗鎸夐挳璁剧疆</p>
               </div>
@@ -1301,13 +1362,17 @@
               <div style="width: 40%">
                 <div class="qrbodyPic">
                   <div class="openImgBox">
-                    <img src="../../assets/images/img00024005.jpg" alt="" class="w100">
+                    <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"
@@ -1333,14 +1398,22 @@
           <div class="fl">
             <div>
               <div class="openImgBox">
-                    <img src="../../assets/images/img00025001.jpg" alt="" class="w100">
-                  </div>
+                <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>
+                <img
+                  src="../../assets/images/img00025002.jpg"
+                  alt="鎸変笅鍔熻兘璁剧疆"
+                  class="w100"
+                />
+              </div>
               <p class="imgdescript">鍥�1-37銆�鎸変笅鍔熻兘璁剧疆</p>
             </div>
           </div>
@@ -1350,14 +1423,22 @@
           <div class="fl">
             <div>
               <div class="openImgBox">
-                    <img src="../../assets/images/img00025003.jpg" alt="" class="w100">
-                  </div>
+                <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>
+                <img
+                  src="../../assets/images/img00025004.jpg"
+                  alt="鎸囩ず鐏�1灞炴�ф搷浣�"
+                  class="w100"
+                />
+              </div>
               <p class="imgdescript">鍥�1-39銆�鎸囩ず鐏�1灞炴�ф搷浣�</p>
             </div>
           </div>
@@ -1382,12 +1463,16 @@
             </p>
             <div style="width: 30%">
               <div class="openImgBox">
-                    <img src="../../assets/images/img00025006.jpg" alt="" class="w100">
-                  </div>
+                <img
+                  src="../../assets/images/img00025006.jpg"
+                  alt="鏍囧噯USB2.0鎵撳嵃鏈虹嚎"
+                  class="w100"
+                />
+              </div>
               <p class="imgdescript">鍥�1-40銆�鏍囧噯USB2.0鎵撳嵃鏈虹嚎</p>
             </div>
           </div>
-  
+
           <p class="content">
             锛�2锛夋柟妗堜簩锛氱綉绾夸笅杞姐�傜敤缃戝彛涓嬭浇鏃讹紝鍏堟煡鐪嬭Е鎽稿睆IP鍦板潃锛屽綋瑙︽懜灞忎笂鐢靛嚭鐜版粴鍔ㄨ繘搴︽潯浠ュ悗锛屽崟鍑绘粴鍔ㄦ潯锛屽湪鍚姩灞炴�ф煡鐪婭P鍦板潃锛屼緥濡侷P200.200.200.26锛屽垯璁剧疆璁$畻鏈烘湰鍦拌繛鎺ョ殑IP鍦板潃涓篒P200.200.200.126锛屼簩鑰呭湪鍚屼竴缃戞锛屽嵆IP鍓嶄笁娈垫暟瀛楀繀椤荤浉鍚屻�傛垨淇敼瑙︽懜灞忓湴鍧�锛屽垯杩涘叆瑙︽懜灞忔搷浣滅郴缁焀indows
             CE锛屽崟鍑籛indows鐨勨�滃紑濮嬧�濊彍鍗曪紝閫夋嫨鈥滆缃�濆懡浠わ紝杩愯鈥滅綉缁滄嫧鍙蜂笌杩炴帴鈥濓紝淇敼IP鍦板潃銆�
@@ -1411,7 +1496,11 @@
       <div v-if="showPageList.indexOf(24) > -1">
         <div>
           <div class="mt-20">
-            <img src="../../assets/images/page-header.png" alt="" class="w100" />
+            <img
+              src="../../assets/images/page-header.png"
+              alt=""
+              class="w100"
+            />
           </div>
           <div class="padding-96">
             <p class="content t0">淇℃祴璇曟甯稿悗锛屽崟鍑烩�滃伐绋嬩笅杞解�濇寜閽��</p>
@@ -1458,82 +1547,70 @@
                 </el-carousel-item>
               </el-carousel> -->
               <div class="banshi openImgBox">
-                  <div class="swiper-container swiper-img">
-                    <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 class="swiper-container swiper-img">
+                  <div class="swiper-wrapper">
+                    <div class="swiper-slide">
+                      <div class="imgBox" style="width: 100%; height: 100%">
+                        <img
+                          src="../../assets/images/img-list-one.png"
+                          alt="閫夋嫨鈥滆仈鏈鸿繍琛屸�濆拰鈥滈�氫俊娴嬭瘯鈥�"
+                        />
                       </div>
                     </div>
-                    <div class="swiper-pagination"></div>
-                    <div class="swiper-button-next"></div>
-                    <div class="swiper-button-prev"></div>
+                    <div class="swiper-slide">
+                      <div class="imgBox" style="width: 100%; height: 100%">
+                        <img
+                          src="../../assets/images/img-list-two.png"
+                          alt="宸ョ▼涓嬭浇"
+                        />
+                      </div>
+                    </div>
+                    <div class="swiper-slide">
+                      <div class="imgBox" style="width: 100%; height: 100%">
+                        <img
+                          src="../../assets/images/img-list-three.png"
+                          alt="瑙︽懜鈥滄寚绀虹伅1鈥濇寜閽�"
+                        />
+                      </div>
+                    </div>
+                    <div class="swiper-slide">
+                      <div class="imgBox" style="width: 100%; height: 100%">
+                        <img
+                          src="../../assets/images/img-list-four.png"
+                          alt="瑙︽懜鈥滄寚绀虹伅2鈥濇寜閽�"
+                        />
+                      </div>
+                    </div>
+                    <div class="swiper-slide">
+                      <div class="imgBox" style="width: 100%; height: 100%">
+                        <img
+                          src="../../assets/images/img-list-five.png"
+                          alt="鎸変笅鈥滄寚绀虹伅1鈥濇寜閽�"
+                        />
+                      </div>
+                    </div>
+                    <div class="swiper-slide">
+                      <div class="imgBox" style="width: 100%; height: 100%">
+                        <img
+                          src="../../assets/images/img-list-six.png"
+                          alt="鎸変笅鈥滄寚绀虹伅2鈥濇寜閽�"
+                        />
+                      </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">
@@ -1620,7 +1697,8 @@
               <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="fengong" />
+                灏忕粍鍒嗗伐
                 <input type="checkbox" name="xingshi" value="xiaozu" /> 灏忕粍
               </td>
               <td colspan="2" class="table-cn">
@@ -1807,7 +1885,7 @@
           <li class="footer-num">15</li>
           <li class="footer-box"></li>
         </ul>
-    </div>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/books/embedded/view/components/index.vue b/src/books/embedded/view/components/index.vue
index ef673e8..aa243a5 100644
--- a/src/books/embedded/view/components/index.vue
+++ b/src/books/embedded/view/components/index.vue
@@ -558,32 +558,46 @@
           // }
         });
       }
-      // swiper-container
       const pptDoms = (
         this.container ? this.container : document
-      ).querySelectorAll(".swiper-ppt");
+      ).querySelectorAll(".swiper_ppt");
       for (let i = 0; i < pptDoms.length; i++) {
-        debugger
         const dom = pptDoms[i];
         new Swiper(dom, {
-          loop: false, // 鏃犵紳
-          autoplay: false,
-          paginationClickable: true,
-          slidesPerView: 1, // 涓�缁勪笁涓�
-          spaceBetween: 30, // 闂撮殧
-          // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
-          navigation: {
-            nextEl: (this.container ? this.container : document).querySelector(
-              ".swiper-button-next"
-            ),
-            prevEl: (this.container ? this.container : document).querySelector(
-              ".swiper-button-prev"
-            )
+        loop: false, // 鏃犵紳
+        autoplay: false,
+        paginationClickable: true,
+        slidesPerView: 1, // 涓�缁勪笁涓�
+        spaceBetween: 30, // 闂撮殧
+        // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳
+        navigation: {
+          nextEl: (this.container ? this.container : document).querySelector(
+            ".swiper-button-next"
+          ),
+          prevEl: (this.container ? this.container : document).querySelector(
+            ".swiper-button-prev"
+          ),
+        },
+        // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
+        observer: true,
+        observeParents: true,
+        on: {
+          init:(value) => {
+            let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
+            let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁�
+            var paginationInfoEl = dom.querySelector('.pageBox');
+            if(paginationInfoEl)
+              paginationInfoEl.textContent = currentPage + '/' + totalPages;
           },
-          // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔�
-          observer: true,
-          observeParents: true
-        });
+          slideChange:(value) => {
+            let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級
+            let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁�
+            var paginationInfoEl = dom.querySelector('.pageBox');
+            if(paginationInfoEl)
+              paginationInfoEl.textContent = currentPage + '/' + totalPages;
+          },
+        },
+      });
       }
     },
     initViewer() {

--
Gitblit v1.9.1