From 4a005e0d39e74f0175d67d0d6f06ae438f3a6c50 Mon Sep 17 00:00:00 2001 From: unknown <qq1940665526@163.com> Date: 星期四, 30 五月 2024 18:32:27 +0800 Subject: [PATCH] 分页修改 --- src/books/lifeCare/view/chapter003.vue | 376 +++++++++++++++++++++++++---------------------------- 1 files changed, 177 insertions(+), 199 deletions(-) diff --git a/src/books/lifeCare/view/chapter003.vue b/src/books/lifeCare/view/chapter003.vue index 5771971..2953fbf 100644 --- a/src/books/lifeCare/view/chapter003.vue +++ b/src/books/lifeCare/view/chapter003.vue @@ -1,7 +1,7 @@ <template> <div class="chapter" num="4"> - <div class="page-box" page="30"> - <div v-if="showPageList.indexOf(30) > -1"> + <div class="page-box" page="33"> + <div v-if="showPageList.indexOf(33) > -1"> <div class="bodystyle topImg"> <h2 id="b003"> <img class="img-0" alt="" src="../image/dy3.jpg" /> @@ -54,8 +54,8 @@ </div> </div> </div> - <div class="page-box" page="31"> - <div v-if="showPageList.indexOf(31) > -1"> + <div class="page-box" page="34"> + <div v-if="showPageList.indexOf(34) > -1"> <div class="header"> <div class="pageHeader-second"> <div class="second-con"> @@ -76,13 +76,8 @@ <img class="img-gn" alt="" src="../image/dy-xxdh.jpg" /> </p> </div> - <p class="center"> - <el-image - class="chapter002-img-0035" - :src="picOneUrl" - :preview-src-list="picArr" - /> - <!-- <img class="img-a" alt="" src="../image/0041-1.jpg" /> --> + <p class="center openImgBox"> + <img class="img-a" alt="" src="../image/0041-1.jpg" /> </p> </div> <div class="bk"> @@ -98,8 +93,8 @@ </div> </div> </div> - <div class="page-box" page="32"> - <div v-if="showPageList.indexOf(32) > -1"> + <div class="page-box" page="35"> + <div v-if="showPageList.indexOf(35) > -1"> <div class="header"> <div class="pageHeader-first"> <div class="header-bj"></div> @@ -191,27 +186,54 @@ <p>绗簲姝ワ細涓�鎵嬫彙鍙︿竴鎵嬬殑鎷囨寚鏃嬭浆鎼撴摝锛岀劧鍚庝氦鎹㈣繘琛岋紙瑙佸浘1-3-5锛夈��</p> <p>绗叚姝ワ細鎸囧皷鍦ㄥ彟涓�鎵嬬殑鎺屽績鎼撴摝锛堣鍥�1-3-6锛夈��</p> <p>绗竷姝ワ細鏃嬭浆鎻夋悡鑵曢儴鑷宠倶閮紙瑙佸浘1-3-7锛夈��</p> - <el-carousel - :interval="3000" - :type="sevenImgList?.length > 2 ? 'card' : ''" - indicator-position="none" - > - <el-carousel-item v-for="(item, i) in sevenImgList" :key="i"> - <div class="imgCarousel"> - <el-image - :src="item.url" - :preview-src-list="sevenSrcList" - :fit="'fill'" - /> - <span v-if="item.name" class="medium">{{ item.name }}</span> + <div class="imgBox-003 openImgBox"> + <div class="swiper-container"> + <div class="swiper-wrapper"> + <div class="swiper-slide"> + <div class="imgBox" style="width: 100%; height: 100%"> + <img src="../image/0042-2.jpg" /> + </div> + </div> + <div class="swiper-slide"> + <div class="imgBox" style="width: 100%; height: 100%"> + <img src="../image/0042-3.jpg" /> + </div> + </div> + <div class="swiper-slide"> + <div class="imgBox" style="width: 100%; height: 100%"> + <img src="../image/0042-4.jpg" /> + </div> + </div> + <div class="swiper-slide"> + <div class="imgBox" style="width: 100%; height: 100%"> + <img src="../image/0043-1.jpg" /> + </div> + </div> + <div class="swiper-slide"> + <div class="imgBox" style="width: 100%; height: 100%"> + <img src="../image/0043-2.jpg" /> + </div> + </div> + <div class="swiper-slide"> + <div class="imgBox" style="width: 100%; height: 100%"> + <img src="../image/0043-3.jpg" /> + </div> + </div> + <div class="swiper-slide"> + <div class="imgBox" style="width: 100%; height: 100%"> + <img src="../image/0043-4.jpg" /> + </div> + </div> </div> - </el-carousel-item> - </el-carousel> + <div class="swiper-button-next"></div> + <div class="swiper-button-prev"></div> + </div> + </div> </div> </div> </div> - <div class="page-box" page="33"> - <div v-if="showPageList.indexOf(33) > -1"> + <div class="page-box" page="36"> + <div v-if="showPageList.indexOf(36) > -1"> <div class="header"> <div class="pageHeader-second"> <div class="second-con"> @@ -343,8 +365,8 @@ </div> </div> </div> - <div class="page-box" page="34"> - <div v-if="showPageList.indexOf(34) > -1"> + <div class="page-box" page="37"> + <div v-if="showPageList.indexOf(37) > -1"> <div class="header"> <div class="pageHeader-first"> <div class="header-bj"></div> @@ -465,8 +487,8 @@ </div> </div> </div> - <div class="page-box" page="35"> - <div v-if="showPageList.indexOf(35) > -1"> + <div class="page-box" page="38"> + <div v-if="showPageList.indexOf(38) > -1"> <div class="header"> <div class="pageHeader-second"> <div class="second-con"> @@ -589,8 +611,8 @@ </div> </div> </div> - <div class="page-box" page="36"> - <div v-if="showPageList.indexOf(36) > -1"> + <div class="page-box" page="39"> + <div v-if="showPageList.indexOf(39) > -1"> <div class="header"> <div class="pageHeader-first"> <div class="header-bj"></div> @@ -648,8 +670,8 @@ </div> </div> </div> - <div class="page-box" page="37"> - <div v-if="showPageList.indexOf(37) > -1"> + <div class="page-box" page="40"> + <div v-if="showPageList.indexOf(40) > -1"> <div class="header"> <div class="pageHeader-second"> <div class="second-con"> @@ -770,8 +792,8 @@ </div> </div> </div> - <div class="page-box" page="38"> - <div v-if="showPageList.indexOf(38) > -1"> + <div class="page-box" page="41"> + <div v-if="showPageList.indexOf(41) > -1"> <div class="header"> <div class="pageHeader-first"> <div class="header-bj"></div> @@ -835,8 +857,8 @@ </div> </div> </div> - <div class="page-box" page="39"> - <div v-if="showPageList.indexOf(39) > -1"> + <div class="page-box" page="42"> + <div v-if="showPageList.indexOf(42) > -1"> <div class="header"> <div class="pageHeader-second"> <div class="second-con"> @@ -989,8 +1011,8 @@ </div> </div> </div> - <div class="page-box" page="40"> - <div v-if="showPageList.indexOf(40) > -1"> + <div class="page-box" page="43"> + <div v-if="showPageList.indexOf(43) > -1"> <div class="header"> <div class="pageHeader-first"> <div class="header-bj"></div> @@ -1114,8 +1136,8 @@ </div> </div> </div> - <div class="page-box" page="41"> - <div v-if="showPageList.indexOf(41) > -1"> + <div class="page-box" page="44"> + <div v-if="showPageList.indexOf(44) > -1"> <div class="header"> <div class="pageHeader-second"> <div class="second-con"> @@ -1177,8 +1199,8 @@ </div> </div> </div> - <div class="page-box" page="42"> - <div v-if="showPageList.indexOf(42) > -1"> + <div class="page-box" page="45"> + <div v-if="showPageList.indexOf(45) > -1"> <div class="header"> <div class="pageHeader-first"> <div class="header-bj"></div> @@ -1320,8 +1342,8 @@ </div> </div> </div> - <div class="page-box" page="43"> - <div v-if="showPageList.indexOf(43) > -1"> + <div class="page-box" page="46"> + <div v-if="showPageList.indexOf(46) > -1"> <div class="header"> <div class="pageHeader-second"> <div class="second-con"> @@ -1435,8 +1457,8 @@ </div> </div> </div> - <div class="page-box" page="44"> - <div v-if="showPageList.indexOf(44) > -1"> + <div class="page-box" page="47"> + <div v-if="showPageList.indexOf(47) > -1"> <div class="header"> <div class="pageHeader-first"> <div class="header-bj"></div> @@ -1495,8 +1517,8 @@ </div> </div> </div> - <div class="page-box" page="45"> - <div v-if="showPageList.indexOf(45) > -1"> + <div class="page-box" page="48"> + <div v-if="showPageList.indexOf(48) > -1"> <div class="header"> <div class="pageHeader-second"> <div class="second-con"> @@ -1701,8 +1723,8 @@ </div> </div> </div> - <div class="page-box" page="46"> - <div v-if="showPageList.indexOf(46) > -1"> + <div class="page-box" page="49"> + <div v-if="showPageList.indexOf(49) > -1"> <div class="header"> <div class="pageHeader-first"> <div class="header-bj"></div> @@ -1848,8 +1870,8 @@ </div> </div> </div> - <div class="page-box" page="47"> - <div v-if="showPageList.indexOf(47) > -1"> + <div class="page-box" page="50"> + <div v-if="showPageList.indexOf(50) > -1"> <div class="header"> <div class="pageHeader-second"> <div class="second-con"> @@ -1864,7 +1886,7 @@ </div> </div> <div class="bodystyle"> - <p class="center"> + <p class="center openImgBox"> <img class="img-b" alt="" src="../image/0057-1.jpg" /> </p> <p class="img">鍥�1-3-8</p> @@ -1897,8 +1919,8 @@ </div> </div> </div> - <div class="page-box" page="48"> - <div v-if="showPageList.indexOf(48) > -1"> + <div class="page-box" page="51"> + <div v-if="showPageList.indexOf(51) > -1"> <div class="header"> <div class="pageHeader-first"> <div class="header-bj"></div> @@ -1989,17 +2011,6 @@ </div> </div> <p><br /></p> - <!-- <div class="bk-sys"> - <div class="bj1-sys"> - <p class="left"> - <img class="img-gn1" alt="" src="../image/dy-sys.png" /> - </p> - </div> - <p class="center"> - <img class="img-h" alt="" src="../image/0058-2.jpg" /> - </p> - <p class="img">鍒风墮</p> - </div> --> <p><b>鈶℃椿鍔ㄨ繃绋�</b></p> <p>1.鏃犵墮鏈熺殑鍙h厰鎶ょ悊锛堣鍥�1-3-9锛夈��</p> <p> @@ -2016,22 +2027,43 @@ <p> 绗簩姝ワ細璋冩暣濂藉┐鍎垮湪鎬�涓殑浣嶇疆锛屼娇濠村効鐨勫ご閮ㄥ敖閲忓線鍚庝话锛岀劧鍚庡皢鎸囧鐗欏埛浣╂埓鍦ㄦ墜涓婏紝灏忓績鍦版摝鎷┐鍎跨殑鐗欓娇鍜岀墮榫堥儴鍒嗭紝閲嶇偣娓呯悊瀵硅薄涓虹墮榻夸笌鐗欏簥浜ゆ帴鐨勫湴鏂瑰強鐗欑紳锛屾竻闄ょ墮榫堝拰涔崇墮涓婃畫鐣欑殑濂舵笉鍜岃緟椋燂紝娉ㄦ剰鍔ㄤ綔瑕佽交鏌斻�� </p> - <el-carousel - :interval="3000" - :type="picImageList?.length > 2 ? 'card' : ''" - indicator-position="none" - > - <el-carousel-item v-for="(item, i) in picImageList" :key="i"> - <div class="imgCarousel"> - <el-image - :src="item.url" - :preview-src-list="picArr110" - :fit="'fill'" - /> - <span v-if="item.name" class="medium">{{ item.name }}</span> + </div> + </div> + </div> + <div class="page-box" page="52"> + <div v-if="showPageList.indexOf(52) > -1"> + <div class="header"> + <div class="pageHeader-second"> + <div class="second-con"> + <div class="second-left"></div> + <div class="second-right"> + <img src="../image/pageImg.png" alt="" /> + <span class="pageStr">绗笁鍗曞厓路鐩ユ礂娲诲姩鐓ф姢</span> + <span class="pageNum">1-43</span> </div> - </el-carousel-item> - </el-carousel> + </div> + <div class="borderLine"></div> + </div> + </div> + <div class="bodystyle"> + <div class="imgBox-003 openImgBox"> + <div class="swiper-container"> + <div class="swiper-wrapper"> + <div class="swiper-slide"> + <div class="imgBox" style="width: 100%; height: 100%"> + <img src="../image/0059-1.jpg" /> + </div> + </div> + <div class="swiper-slide"> + <div class="imgBox" style="width: 100%; height: 100%"> + <img src="../image/0059-2.jpg" /> + </div> + </div> + </div> + <div class="swiper-button-next"></div> + <div class="swiper-button-prev"></div> + </div> + </div> <p>3.涓�宀佷互涓婂辜鍎跨殑鍙h厰鎶ょ悊锛堣鍥�1-3-11锛夈��</p> <p>绗竴姝ワ細灏嗙墮鍒风敤娓╂按娴告场1锝�2鍒嗛挓锛屼娇鍒锋瘺鍙樺緱鏌旇蒋銆�</p> <p> @@ -2042,7 +2074,7 @@ </p> <p>绗洓姝ワ細鐢ㄦ俯姘村惈婕辨暟娆★紝鐩磋嚦鐗欒啅娉℃搏瀹屽叏婕卞共鍑�涓烘銆�</p> <p>绗簲姝ワ細鎿︽礂鍢磋鍙婇潰閮ㄦ畫浣欐按娓嶃��</p> - <p class="center"> + <p class="center openImgBox"> <img class="img-b" alt="" src="../image/0059-3.jpg" /> </p> <p class="img">鍥�1-3-11銆�宸存皬鍒风墮娉�</p> @@ -2060,19 +2092,18 @@ </div> </div> </div> - <div class="page-box" page="49"> - <div v-if="showPageList.indexOf(49) > -1"> + <div class="page-box" page="53"> + <div v-if="showPageList.indexOf(53) > -1"> <div class="header"> - <div class="pageHeader-second"> - <div class="second-con"> - <div class="second-left"></div> - <div class="second-right"> - <img src="../image/pageImg.png" alt="" /> - <span class="pageStr">绗笁鍗曞厓路鐩ユ礂娲诲姩鐓ф姢</span> - <span class="pageNum">1-43</span> + <div class="pageHeader-first"> + <div class="header-bj"></div> + <div class="content"> + <div class="pageStr">1-44</div> + <div class="title"> + <img src="../image/chapter.png" alt="" /> + <span class="cahpter">濠村辜鍎跨敓娲荤収鎶ぢ疯鍔ㄦ墜鍐�</span> </div> </div> - <div class="borderLine"></div> </div> </div> <div class="bodystyle"> @@ -2080,18 +2111,6 @@ <p> 2锝�4浜轰负涓�缁勫紑灞曞┐骞煎効鍙h厰娓呮磥鐨勬ā鎷熷疄璁紝鍏朵腑涓�浜烘搷浣滐紝鍏朵粬鍚屽瑙傛懇銆傛搷浣滆�呬竴杈瑰疄鎿嶄竴杈硅瑙f搷浣滆棰嗭紝鍏朵粬鍚屽鎸夌収濠村辜鍎垮彛鑵旀竻娲佺殑璇勫垎鏍囧噯缁欐搷浣滆�呮墦鍒嗐�� </p> - <!-- <p><br /></p> - <div class="bk-sys"> - <div class="bj1-sys"> - <p class="left"> - <img class="img-gn1" alt="" src="../image/dy-sys.png" /> - </p> - </div> - <p class="center"> - <img class="img-h" alt="" src="../image/0060-1.jpg" /> - </p> - <p class="img">濠村辜鍎垮彛鑵旀竻娲佺殑璇勫垎鏍囧噯</p> - </div> --> <h4 id="d028"> 鈻垛柖 娲诲姩3锛氭寚瀵煎辜鍎挎急鍙�<span class="fontsz1">锛烇紴锛烇紴锛烇紴锛烇紴</span> </h4> @@ -2139,17 +2158,6 @@ </div> </div> <p><br /></p> - <!-- <div class="bk-sys"> - <div class="bj1-sys"> - <p class="left"> - <img class="img-gn1" alt="" src="../image/dy-sys.png" /> - </p> - </div> - <p class="center"> - <img class="img-h" alt="" src="../image/0060-2.jpg" /> - </p> - <p class="img">鎸囧骞煎効婕卞彛</p> - </div> --> <img class="img-gn2" alt="" src="../image/xxgcy.png" /> <p> 璇疯鐪嬭棰戯紝瑙傚療瑙嗛涓殑骞煎効鍦ㄦ急鍙f椂锛屼繚鏁欎汉鍛橀兘鍋氫簡鍝簺鎸囧銆傝鐢诲嚭婕卞彛鎸囧鐨勬祦绋嬪浘锛岃褰曟寚瀵煎辜鍎挎急鍙g殑鍎挎瓕骞跺洖绛旂浉鍏抽棶棰樸�� @@ -2187,18 +2195,19 @@ </div> </div> </div> - <div class="page-box" page="50"> - <div v-if="showPageList.indexOf(50) > -1"> + <div class="page-box" page="54"> + <div v-if="showPageList.indexOf(54) > -1"> <div class="header"> - <div class="pageHeader-first"> - <div class="header-bj"></div> - <div class="content"> - <div class="pageStr">1-44</div> - <div class="title"> - <img src="../image/chapter.png" alt="" /> - <span class="cahpter">濠村辜鍎跨敓娲荤収鎶ぢ疯鍔ㄦ墜鍐�</span> + <div class="pageHeader-second"> + <div class="second-con"> + <div class="second-left"></div> + <div class="second-right"> + <img src="../image/pageImg.png" alt="" /> + <span class="pageStr">绗笁鍗曞厓路鐩ユ礂娲诲姩鐓ф姢</span> + <span class="pageNum">1-45</span> </div> </div> + <div class="borderLine"></div> </div> </div> <div class="bodystyle"> @@ -2282,17 +2291,6 @@ </div> </div> <p><br /></p> - <!-- <div class="bk-sys"> - <div class="bj1-sys"> - <p class="left"> - <img class="img-gn1" alt="" src="../image/dy-sys.png" /> - </p> - </div> - <p class="center"> - <img class="img-h" alt="" src="../image/0061-1.jpg" /> - </p> - <p class="img">骞煎効涓嶈壇娲楁墜涔犳儻</p> - </div> --> <img class="img-gn2" alt="" src="../image/xxgcy.png" /> <p> 璇疯鐪嬭棰戯紝瑙傚療瑙嗛涓殑骞煎効鏈夊摢浜涗笉鑹崼鐢熶範鎯�傚鏋滄湁璇锋寚鍑洪棶棰橈紝骞舵彁鍑烘敼姝g殑鏂规硶銆� @@ -2310,19 +2308,18 @@ </div> </div> </div> - <div class="page-box" page="51"> - <div v-if="showPageList.indexOf(51) > -1"> + <div class="page-box" page="55"> + <div v-if="showPageList.indexOf(55) > -1"> <div class="header"> - <div class="pageHeader-second"> - <div class="second-con"> - <div class="second-left"></div> - <div class="second-right"> - <img src="../image/pageImg.png" alt="" /> - <span class="pageStr">绗笁鍗曞厓路鐩ユ礂娲诲姩鐓ф姢</span> - <span class="pageNum">1-45</span> + <div class="pageHeader-first"> + <div class="header-bj"></div> + <div class="content"> + <div class="pageStr">1-46</div> + <div class="title"> + <img src="../image/chapter.png" alt="" /> + <span class="cahpter">濠村辜鍎跨敓娲荤収鎶ぢ疯鍔ㄦ墜鍐�</span> </div> </div> - <div class="borderLine"></div> </div> </div> <div class="bodystyle"> @@ -2385,17 +2382,6 @@ </div> </div> <p><br /></p> - <!-- <div class="bk-sys"> - <div class="bj1-sys"> - <p class="left"> - <img class="img-gn1" alt="" src="../image/dy-sys.png" /> - </p> - </div> - <p class="center"> - <img class="img-h" alt="" src="../image/0062-1.jpg" /> - </p> - <p class="img">骞煎効鐨勪笉鑹埛鐗欎範鎯�</p> - </div> --> <p><b>鈶犳椿鍔ㄥ噯澶�</b></p> <p>1.鐜鍑嗗锛氶�夋嫨閫氶涓旈噰鍏夎壇濂界殑鐜銆�</p> <p> @@ -2436,18 +2422,19 @@ </div> </div> </div> - <div class="page-box" page="52"> - <div v-if="showPageList.indexOf(52) > -1"> + <div class="page-box" page="56"> + <div v-if="showPageList.indexOf(56) > -1"> <div class="header"> - <div class="pageHeader-first"> - <div class="header-bj"></div> - <div class="content"> - <div class="pageStr">1-46</div> - <div class="title"> - <img src="../image/chapter.png" alt="" /> - <span class="cahpter">濠村辜鍎跨敓娲荤収鎶ぢ疯鍔ㄦ墜鍐�</span> + <div class="pageHeader-second"> + <div class="second-con"> + <div class="second-left"></div> + <div class="second-right"> + <img src="../image/pageImg.png" alt="" /> + <span class="pageStr">绗笁鍗曞厓路鐩ユ礂娲诲姩鐓ф姢</span> + <span class="pageNum">1-47</span> </div> </div> + <div class="borderLine"></div> </div> </div> <div class="bodystyle"> @@ -2501,19 +2488,18 @@ </div> </div> </div> - <div class="page-box" page="53"> - <div v-if="showPageList.indexOf(53) > -1"> + <div class="page-box" page="57"> + <div v-if="showPageList.indexOf(57) > -1"> <div class="header"> - <div class="pageHeader-second"> - <div class="second-con"> - <div class="second-left"></div> - <div class="second-right"> - <img src="../image/pageImg.png" alt="" /> - <span class="pageStr">绗笁鍗曞厓路鐩ユ礂娲诲姩鐓ф姢</span> - <span class="pageNum">1-47</span> + <div class="pageHeader-first"> + <div class="header-bj"></div> + <div class="content"> + <div class="pageStr">1-48</div> + <div class="title"> + <img src="../image/chapter.png" alt="" /> + <span class="cahpter">濠村辜鍎跨敓娲荤収鎶ぢ疯鍔ㄦ墜鍐�</span> </div> </div> - <div class="borderLine"></div> </div> </div> <div class="bodystyle"> @@ -2617,18 +2603,19 @@ </div> </div> </div> - <div class="page-box" page="54"> - <div v-if="showPageList.indexOf(54) > -1"> + <div class="page-box" page="58"> + <div v-if="showPageList.indexOf(58) > -1"> <div class="header"> - <div class="pageHeader-first"> - <div class="header-bj"></div> - <div class="content"> - <div class="pageStr">1-48</div> - <div class="title"> - <img src="../image/chapter.png" alt="" /> - <span class="cahpter">濠村辜鍎跨敓娲荤収鎶ぢ疯鍔ㄦ墜鍐�</span> + <div class="pageHeader-second"> + <div class="second-con"> + <div class="second-left"></div> + <div class="second-right"> + <img src="../image/pageImg.png" alt="" /> + <span class="pageStr">绗笁鍗曞厓路鐩ユ礂娲诲姩鐓ф姢</span> + <span class="pageNum">1-49</span> </div> </div> + <div class="borderLine"></div> </div> </div> <div class="bodystyle"> @@ -2755,15 +2742,6 @@ name: "鍥�1-3-10", url: require("../image/0059-2.jpg"), }, - ], - sevenSrcList: [ - "../image/0042-2.jpg", - "../image/0042-3.jpg", - "../image/0042-4.jpg", - "../image/0043-1.jpg", - "../image/0043-2.jpg", - "../image/0043-3.jpg", - "../image/0043-4.jpg", ], sevenImgList: [ { -- Gitblit v1.9.1