From 5e84137576996f096e361d51adf05d7af5ff8084 Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期五, 31 五月 2024 17:50:08 +0800 Subject: [PATCH] 艺术分页 --- /dev/null | 0 src/books/artAndDance/assets/images/chapter-one-header.png | 0 src/books/artAndDance/view/components/chapter001.vue | 134 +++++++++++++++++++++++++++++++++++++++----- src/books/artAndDance/assets/images/icon/boy.jpg | 0 src/books/lifeCare/index.vue | 2 src/App.vue | 2 src/books/artAndDance/assets/main.less | 18 +++++- 7 files changed, 136 insertions(+), 20 deletions(-) diff --git a/src/App.vue b/src/App.vue index bba49f4..eff2cc5 100644 --- a/src/App.vue +++ b/src/App.vue @@ -70,7 +70,7 @@ // embedded // english // artAndDance - this.config.resourceCtx + "artAndDance" + this.config.resourceCtx + "lifeCare" ); // 娴嬭瘯璇曡30椤� // this.activeBook.tryPageCount = 10; diff --git a/src/books/artAndDance/assets/images/chapter-one-header.png b/src/books/artAndDance/assets/images/chapter-one-header.png new file mode 100644 index 0000000..1e863a8 --- /dev/null +++ b/src/books/artAndDance/assets/images/chapter-one-header.png Binary files differ diff --git a/src/books/artAndDance/assets/images/icon/boy.jpg b/src/books/artAndDance/assets/images/icon/boy.jpg new file mode 100644 index 0000000..e7bb4a2 --- /dev/null +++ b/src/books/artAndDance/assets/images/icon/boy.jpg Binary files differ diff --git "a/src/books/artAndDance/assets/images/icon/tree\0501\051.jpg" "b/src/books/artAndDance/assets/images/icon/tree\0501\051.jpg" deleted file mode 100644 index d3b7b06..0000000 --- "a/src/books/artAndDance/assets/images/icon/tree\0501\051.jpg" +++ /dev/null Binary files differ diff --git a/src/books/artAndDance/assets/main.less b/src/books/artAndDance/assets/main.less index 29d4c0d..d42ff24 100644 --- a/src/books/artAndDance/assets/main.less +++ b/src/books/artAndDance/assets/main.less @@ -169,10 +169,11 @@ font-family: "STKaiti"; color: #ef495d; font-weight: bold; - font-size: 1.15em; + // font-size: 1.15em; + font-size: 26px; margin-top: 2em; text-align: center; - margin-bottom: 2em; + margin-bottom: 20px; text-indent: 0em; } @@ -290,9 +291,11 @@ } .block2 { font-family: "STKaiti"; - font-size: 1.15em; + // font-size: 1.15em; + font-size: 26px; text-align: center; text-indent: 0em; + margin: 6px 0; } .bj1 { @@ -350,6 +353,9 @@ .ju-bt { justify-content: space-between; } + .ju-end { + justify-content: flex-end; + } .al-cn { align-items: center; } @@ -371,6 +377,9 @@ .ml-40 { margin-left: 40px; } + .mr-40 { + margin-right: 40px; + } .pg-mh { min-height: 1150px; } @@ -380,6 +389,9 @@ .w-min { width: min-content; } + .w40 { + width: 40px; + } } /* 濯掍綋鏌ヨ鍋氬熀纭�鍝嶅簲寮忓竷灞� */ diff --git a/src/books/artAndDance/view/components/chapter001.vue b/src/books/artAndDance/view/components/chapter001.vue index 114e433..64cfa3d 100644 --- a/src/books/artAndDance/view/components/chapter001.vue +++ b/src/books/artAndDance/view/components/chapter001.vue @@ -27,25 +27,116 @@ <p class="block2 fz-26">閰嶅悎姝ヤ紣</p> <p class="block1 w70"><span class="ls fz-26">鈥斺�斾笂姝ユ檭鎵�</span></p> </div> - <ul> <li class="ml-40"> - <img src="../../assets/images/icon/tree.jpg" > - <span class="dl-ib"> - 2 - </span> + <img src="../../assets/images/icon/tree.jpg" /> + <span class="dl-ib"> 2 </span> </li> <li> <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> </li> </ul> - + </div> + </div> + <div class="page-box" page="6"> + <div v-if="showPageList.indexOf(6) > -1"> + <div> + <img src="../../assets/images/chapter-one-header.png" class="w100" /> + </div> + <div class="padding-96"> + <h3 id="c002">绌洪棿涓庢柟鍚�</h3> + <p class="block2">楂樸�佷腑绌洪棿</p> + <p class="block2">1銆�2銆�4銆�8鐐规柟鍚�</p> + <h2 class="lefth2" id="b002"> + <img class="img-gn" alt="" src="../../assets/images/xsyty.jpg" /> + </h2> + <video + :src="videoPathOne" + webkit-playsinline="true" + x-webkit-airplay="true" + playsinline="true" + x5-video-orientation="h5" + x5-video-player-fullscreen="true" + x5-playsinline="" + controls + class="w100" + ></video> + <h3 id="c003">榛勯工妤奸�佸瓱娴╃劧涔嬪箍闄�</h3> + <p class="block2">銆斿攼銆曟潕鐧�</p> + <p class="block2">鏁呬汉瑗胯緸榛勯工妤硷紝</p> + <p class="block2">鐑熻姳涓夋湀涓嬫壃宸炪��</p> + <p class="block2">瀛ゅ竼杩滃奖纰х┖灏斤紝</p> + <p class="block2">鍞闀挎睙澶╅檯娴併��</p> + <p class="center"> + <img class="img-g" alt="" src="image/i0007-1.jpg" /> + </p> + <h2 class="lefth2" id="b003"> + <img class="img-gn" alt="" src="image/czysj.jpg" /> + </h2> + </div> + <ul> + <li class="fl ju-end mr-40"> + <div> + <span class="dl-ib"> 3 </span> + <img src="../../assets/images/icon/tree.jpg" /> + </div> + </li> + <li> + <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> + </li> + </ul> + </div> + </div> + <div class="page-box" page="7"> + <div v-if="showPageList.indexOf(5) > -1" class="fl fl-cl ju-bt"> + <img + src="../../assets/images/pageContentHeader.jpg" + alt="" + class="w100 mb-40" + /> + <div class="padding-96"> + <div class="bj1"> + <p class="block"> + <img + class="inline" + alt="" + src="../../assets/images/dn.png" + />杩愮敤鎵�瀛﹁垶韫堝厓绱狅紝璁剧珛涓や釜涓庡ソ鍙嬪憡鍒殑鍦烘櫙銆� + </p> + <p class="block"> + <img + class="inline" + alt="" + src="../../assets/images/dn.png" + />瀛︾敓鑷効鍒嗙粍锛屾瘡缁勮嚜琛岃缃笌閫佸埆鐩稿叧鐨勪富棰橈紝鍦ㄦ暀甯堢殑寮曞涓嬭繘琛屽垱缂栵紝骞跺瘜鏈夋儏鎰熷湴灞曠ず鍑烘潵銆� + </p> + </div> + <h2 class="lefth2" id="b004"> + <img class="img-gn1" alt="" src="../../assets/images/tz.jpg" /> + </h2> + <div class="bj2"> + <p class="block"> + 鍏呭垎鐞嗚В鍙よ瘲琛ㄨ揪鐨勬儏鎰燂紝鏍规嵁宸插鑸炶箞鍏冪礌锛屽垱缂栧甫鏈夐�佸埆鎰忓懗鐨勫崟涓�鑸炶箞鍔ㄤ綔鎴栭�犲瀷鍚с�� + </p> + </div> + <p class="center"><img class="img-0" alt="" src="image/ym.jpg" /></p> + </div> + <ul> + <li class="ml-40"> + <img src="../../assets/images/icon/tree.jpg" /> + <span class="dl-ib"> 2 </span> + </li> + <li> + <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> + </li> + </ul> </div> </div> </div> </template> <script> +import getResourcePath from "@/assets/methods/resources"; export default { name: "chapterOne", props: { @@ -53,17 +144,30 @@ type: Array, }, }, + mounted() { + this.getVidoePath(); + }, + data() { + return { + videoPathOne: "", + }; + }, + methods: { + getVidoePath() { + this.videoPathOne = getResourcePath("db8040667457cc6fc9b0209009acb316"); + }, + }, }; </script> <style lang="less" scoped> - .w70 { - width: 78%; - } - .fw-400 { - font-weight: 400 !important; - } - .fz-26 { - font-size: 26px !important; - } +.w70 { + width: 78%; +} +.fw-400 { + font-weight: 400 !important; +} +.fz-26 { + font-size: 26px !important; +} </style> diff --git a/src/books/lifeCare/index.vue b/src/books/lifeCare/index.vue index 6491730..6d97b95 100644 --- a/src/books/lifeCare/index.vue +++ b/src/books/lifeCare/index.vue @@ -186,7 +186,7 @@ }, mounted() { // 榛樿鍔犺浇绔犺妭 - this.showCatalogList = [1]; + this.showCatalogList = [8]; // 婊氬姩鐩戝惉鑺傛祦 this.throttledScrollHandler = _.throttle( this.scrollFun, -- Gitblit v1.9.1