From 96d0790556f3a9c9d82fe7637202daa716b43e69 Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期五, 31 五月 2024 15:55:46 +0800 Subject: [PATCH] 艺术与舞蹈 --- src/books/artAndDance/assets/images/dy4.jpg | 0 src/books/artAndDance/assets/images/image27-4.jpg | 0 src/books/artAndDance/assets/images/pageHeader.png | 0 src/books/artAndDance/view/index.vue | 76 +++ src/books/artAndDance/assets/images/image28-1.jpg | 0 src/books/artAndDance/assets/images/image26-2.jpg | 0 src/books/artAndDance/assets/images/image18-1.jpg | 0 src/books/artAndDance/assets/images/czysj.jpg | 0 src/books/artAndDance/assets/main.less | 353 +++++++++++++++++ src/books/artAndDance/assets/images/image27-1.jpg | 0 src/books/artAndDance/assets/images/image29-3.jpg | 0 src/books/artAndDance/assets/images/image10-1.jpg | 0 src/books/artAndDance/assets/images/image30-1.jpg | 0 src/books/artAndDance/assets/images/dy1.jpg | 0 src/books/artAndDance/assets/images/image10-2.jpg | 0 src/books/artAndDance/assets/images/image22-1.jpg | 0 src/books/artAndDance/assets/images/image26-3.jpg | 0 src/books/artAndDance/view/components/index.vue | 653 ++++++++++++++++++++++++++++++++ src/books/artAndDance/assets/images/image28-2.jpg | 0 src/books/English/view/components/index.vue | 2 src/books/artAndDance/assets/images/dy5.jpg | 0 src/books/artAndDance/assets/images/dzk.jpg | 0 src/books/artAndDance/assets/images/rhybx.jpg | 0 src/books/artAndDance/assets/images/image14-1.jpg | 0 src/books/artAndDance/assets/images/image27-2.jpg | 0 src/books/artAndDance/assets/images/dn.png | 0 src/books/artAndDance/assets/images/image29-1.jpg | 0 src/books/artAndDance/assets/images/image30-2.jpg | 0 src/books/artAndDance/assets/images/xsyty.jpg | 0 src/books/artAndDance/view/components/chapter001.vue | 0 src/books/artAndDance/assets/images/image30-3.jpg | 0 src/books/artAndDance/assets/images/ym.jpg | 0 src/books/artAndDance/assets/images/image26-4.jpg | 0 src/books/artAndDance/assets/images/tz.jpg | 0 src/books/artAndDance/assets/images/dy2.jpg | 0 src/books/artAndDance/assets/images/image28-3.jpg | 0 src/books/artAndDance/assets/images/Cover.jpg | 0 src/books/artAndDance/assets/images/image6-1.jpg | 0 src/books/artAndDance/view/components/header.vue | 78 +++ src/books/artAndDance/assets/images/image27-3.jpg | 0 src/books/artAndDance/assets/images/SMY.jpg | 0 src/books/artAndDance/assets/images/image29-2.jpg | 0 src/books/artAndDance/assets/images/image30-4.jpg | 0 src/books/artAndDance/assets/images/image26-1.jpg | 0 src/App.vue | 8 src/books/artAndDance/assets/images/image28-4.jpg | 0 src/books/artAndDance/assets/images/dy3.jpg | 0 47 files changed, 1,167 insertions(+), 3 deletions(-) diff --git a/src/App.vue b/src/App.vue index c2d403e..11b6266 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,6 +7,7 @@ <sportsAndHealth v-if="activeBook.name == 'sportsAndHealth'" ></sportsAndHealth> + <artAndDance v-if="activeBook.name == 'artAndDance'"></artAndDance> </div> </template> @@ -16,6 +17,7 @@ import embedded from "./books/embedded/view/index.vue"; import english from "./books/English/view/index.vue"; import sportsAndHealth from "./books/sportsAndHealth"; +import artAndDance from './books/artAndDance/view/index.vue' export default { name: "App", @@ -24,7 +26,8 @@ lifeCare, embedded, english, - sportsAndHealth + sportsAndHealth, + artAndDance }, data() { return { @@ -66,7 +69,8 @@ // sportsAndHealth // embedded // english - this.config.resourceCtx + "english" + // artAndDance + this.config.resourceCtx + "artAndDance" ); // 娴嬭瘯璇曡30椤� // this.activeBook.tryPageCount = 10; diff --git a/src/books/English/view/components/index.vue b/src/books/English/view/components/index.vue index bb1feca..a8700d0 100644 --- a/src/books/English/view/components/index.vue +++ b/src/books/English/view/components/index.vue @@ -33,7 +33,7 @@ export default { data() { return { - catalogLength: 13, // 鎬荤珷鑺傛暟 + catalogLength: 2, // 鎬荤珷鑺傛暟 showCatalogList: [], // 鏄剧ず鐨勭珷鑺� loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝�� throttleThreshold: 100, // 鑺傛祦闃堝�� diff --git a/src/books/artAndDance/assets/images/Cover.jpg b/src/books/artAndDance/assets/images/Cover.jpg new file mode 100644 index 0000000..c7804b6 --- /dev/null +++ b/src/books/artAndDance/assets/images/Cover.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/SMY.jpg b/src/books/artAndDance/assets/images/SMY.jpg new file mode 100644 index 0000000..7561c15 --- /dev/null +++ b/src/books/artAndDance/assets/images/SMY.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/czysj.jpg b/src/books/artAndDance/assets/images/czysj.jpg new file mode 100644 index 0000000..3feeb9f --- /dev/null +++ b/src/books/artAndDance/assets/images/czysj.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/dn.png b/src/books/artAndDance/assets/images/dn.png new file mode 100644 index 0000000..76890dd --- /dev/null +++ b/src/books/artAndDance/assets/images/dn.png Binary files differ diff --git a/src/books/artAndDance/assets/images/dy1.jpg b/src/books/artAndDance/assets/images/dy1.jpg new file mode 100644 index 0000000..f9b9ffa --- /dev/null +++ b/src/books/artAndDance/assets/images/dy1.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/dy2.jpg b/src/books/artAndDance/assets/images/dy2.jpg new file mode 100644 index 0000000..e73accf --- /dev/null +++ b/src/books/artAndDance/assets/images/dy2.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/dy3.jpg b/src/books/artAndDance/assets/images/dy3.jpg new file mode 100644 index 0000000..e941511 --- /dev/null +++ b/src/books/artAndDance/assets/images/dy3.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/dy4.jpg b/src/books/artAndDance/assets/images/dy4.jpg new file mode 100644 index 0000000..658aa72 --- /dev/null +++ b/src/books/artAndDance/assets/images/dy4.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/dy5.jpg b/src/books/artAndDance/assets/images/dy5.jpg new file mode 100644 index 0000000..4ec20d1 --- /dev/null +++ b/src/books/artAndDance/assets/images/dy5.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/dzk.jpg b/src/books/artAndDance/assets/images/dzk.jpg new file mode 100644 index 0000000..839aaa3 --- /dev/null +++ b/src/books/artAndDance/assets/images/dzk.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image10-1.jpg b/src/books/artAndDance/assets/images/image10-1.jpg new file mode 100644 index 0000000..3c76cda --- /dev/null +++ b/src/books/artAndDance/assets/images/image10-1.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image10-2.jpg b/src/books/artAndDance/assets/images/image10-2.jpg new file mode 100644 index 0000000..cc4fb19 --- /dev/null +++ b/src/books/artAndDance/assets/images/image10-2.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image14-1.jpg b/src/books/artAndDance/assets/images/image14-1.jpg new file mode 100644 index 0000000..d25039f --- /dev/null +++ b/src/books/artAndDance/assets/images/image14-1.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image18-1.jpg b/src/books/artAndDance/assets/images/image18-1.jpg new file mode 100644 index 0000000..f445dfe --- /dev/null +++ b/src/books/artAndDance/assets/images/image18-1.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image22-1.jpg b/src/books/artAndDance/assets/images/image22-1.jpg new file mode 100644 index 0000000..5e30f96 --- /dev/null +++ b/src/books/artAndDance/assets/images/image22-1.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image26-1.jpg b/src/books/artAndDance/assets/images/image26-1.jpg new file mode 100644 index 0000000..71a2cf8 --- /dev/null +++ b/src/books/artAndDance/assets/images/image26-1.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image26-2.jpg b/src/books/artAndDance/assets/images/image26-2.jpg new file mode 100644 index 0000000..b60baf1 --- /dev/null +++ b/src/books/artAndDance/assets/images/image26-2.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image26-3.jpg b/src/books/artAndDance/assets/images/image26-3.jpg new file mode 100644 index 0000000..353ca5e --- /dev/null +++ b/src/books/artAndDance/assets/images/image26-3.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image26-4.jpg b/src/books/artAndDance/assets/images/image26-4.jpg new file mode 100644 index 0000000..3095046 --- /dev/null +++ b/src/books/artAndDance/assets/images/image26-4.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image27-1.jpg b/src/books/artAndDance/assets/images/image27-1.jpg new file mode 100644 index 0000000..484eb1c --- /dev/null +++ b/src/books/artAndDance/assets/images/image27-1.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image27-2.jpg b/src/books/artAndDance/assets/images/image27-2.jpg new file mode 100644 index 0000000..eab8076 --- /dev/null +++ b/src/books/artAndDance/assets/images/image27-2.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image27-3.jpg b/src/books/artAndDance/assets/images/image27-3.jpg new file mode 100644 index 0000000..7eed5d8 --- /dev/null +++ b/src/books/artAndDance/assets/images/image27-3.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image27-4.jpg b/src/books/artAndDance/assets/images/image27-4.jpg new file mode 100644 index 0000000..9b55c8f --- /dev/null +++ b/src/books/artAndDance/assets/images/image27-4.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image28-1.jpg b/src/books/artAndDance/assets/images/image28-1.jpg new file mode 100644 index 0000000..6867c09 --- /dev/null +++ b/src/books/artAndDance/assets/images/image28-1.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image28-2.jpg b/src/books/artAndDance/assets/images/image28-2.jpg new file mode 100644 index 0000000..aae4239 --- /dev/null +++ b/src/books/artAndDance/assets/images/image28-2.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image28-3.jpg b/src/books/artAndDance/assets/images/image28-3.jpg new file mode 100644 index 0000000..b8fdeff --- /dev/null +++ b/src/books/artAndDance/assets/images/image28-3.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image28-4.jpg b/src/books/artAndDance/assets/images/image28-4.jpg new file mode 100644 index 0000000..5d60b1a --- /dev/null +++ b/src/books/artAndDance/assets/images/image28-4.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image29-1.jpg b/src/books/artAndDance/assets/images/image29-1.jpg new file mode 100644 index 0000000..6012bb2 --- /dev/null +++ b/src/books/artAndDance/assets/images/image29-1.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image29-2.jpg b/src/books/artAndDance/assets/images/image29-2.jpg new file mode 100644 index 0000000..274329e --- /dev/null +++ b/src/books/artAndDance/assets/images/image29-2.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image29-3.jpg b/src/books/artAndDance/assets/images/image29-3.jpg new file mode 100644 index 0000000..cc68bb1 --- /dev/null +++ b/src/books/artAndDance/assets/images/image29-3.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image30-1.jpg b/src/books/artAndDance/assets/images/image30-1.jpg new file mode 100644 index 0000000..feed285 --- /dev/null +++ b/src/books/artAndDance/assets/images/image30-1.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image30-2.jpg b/src/books/artAndDance/assets/images/image30-2.jpg new file mode 100644 index 0000000..08f475d --- /dev/null +++ b/src/books/artAndDance/assets/images/image30-2.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image30-3.jpg b/src/books/artAndDance/assets/images/image30-3.jpg new file mode 100644 index 0000000..0d05cb9 --- /dev/null +++ b/src/books/artAndDance/assets/images/image30-3.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image30-4.jpg b/src/books/artAndDance/assets/images/image30-4.jpg new file mode 100644 index 0000000..e5ef59a --- /dev/null +++ b/src/books/artAndDance/assets/images/image30-4.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/image6-1.jpg b/src/books/artAndDance/assets/images/image6-1.jpg new file mode 100644 index 0000000..1a16826 --- /dev/null +++ b/src/books/artAndDance/assets/images/image6-1.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/pageHeader.png b/src/books/artAndDance/assets/images/pageHeader.png new file mode 100644 index 0000000..4c2684d --- /dev/null +++ b/src/books/artAndDance/assets/images/pageHeader.png Binary files differ diff --git a/src/books/artAndDance/assets/images/rhybx.jpg b/src/books/artAndDance/assets/images/rhybx.jpg new file mode 100644 index 0000000..f03dcf7 --- /dev/null +++ b/src/books/artAndDance/assets/images/rhybx.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/tz.jpg b/src/books/artAndDance/assets/images/tz.jpg new file mode 100644 index 0000000..0f2574f --- /dev/null +++ b/src/books/artAndDance/assets/images/tz.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/xsyty.jpg b/src/books/artAndDance/assets/images/xsyty.jpg new file mode 100644 index 0000000..a46257e --- /dev/null +++ b/src/books/artAndDance/assets/images/xsyty.jpg Binary files differ diff --git a/src/books/artAndDance/assets/images/ym.jpg b/src/books/artAndDance/assets/images/ym.jpg new file mode 100644 index 0000000..c15e1b1 --- /dev/null +++ b/src/books/artAndDance/assets/images/ym.jpg Binary files differ diff --git a/src/books/artAndDance/assets/main.less b/src/books/artAndDance/assets/main.less new file mode 100644 index 0000000..660c3bd --- /dev/null +++ b/src/books/artAndDance/assets/main.less @@ -0,0 +1,353 @@ +.ans-dance { + width: 100%; + height: 100%; + font-family: "瀹嬩綋", SimSun, sans-serif; + ul { + list-style-type: none; + } + + li { + list-style-type: none; + } + + .ls1 { + font-family: "HiFont Hei GB"; + color: #30aad1; + font-weight: bold; + } + .hs { + font-family: "HiFont Hei GB"; + color: #ea6b00; + font-weight: bold; + } + + .zs1 { + font-family: "HiFont Hei GB"; + color: #857eb4; + font-weight: bold; + } + + span.under1 { + border-bottom: 2px solid #f0bd4a; + border-width: 2px; + } + + div.bodystyle { + font-size: 18px; + text-align: justify; + margin: 5%; + line-height: 30px; + } + + span.zt-0 { + color: #0087af; + } + + p.pzt-0 { + color: #0087af; + font-size: 18px; + } + p.pzt-0-right { + font-size: 18px; + color: #0087af; + text-align: right; + } + p.pzt-1 { + font-weight: bold; + color: #0087af; + font-size: 18px; + } + + .note { + font-size: 0.85em; + } + + .img { + text-align: center; + font-size: 0.8em; + color: #5d78bb; + margin-left: 0%; + margin-right: 0%; + text-indent: 0em; + } + + .img1 { + text-align: right; + font-size: 0.85em; + margin-left: 0%; + margin-right: 2em; + text-indent: 0em; + } + + p { + // margin-top: 1em; + margin: 0; + text-indent: 2em; + line-height: 30px; + font-size: 18px; + text-align: justify; + } + .cover { + width: 100%; + padding: 0px; + } + .center { + text-align: center; + margin-left: 0%; + margin-right: 0%; + text-indent: 0em; + } + + .center1 { + font-family: "STKaiti"; + text-align: center; + margin-left: 0%; + margin-right: 0%; + text-indent: 0em; + } + + .left { + text-indent: 0em; + margin-left: 0%; + margin-right: 0%; + } + .right { + text-align: right; + margin-left: 0%; + margin-right: 0%; + } + .right1 { + font-family: "STKaiti"; + text-align: right; + margin-left: 0%; + margin-right: 0%; + } + .quote { + margin-top: 0%; + margin-bottom: 0%; + margin-left: 1em; + margin-right: 1em; + text-align: justify; + font-family: "cnepub", serif; + } + h1 { + font-family: "STKaiti"; + text-align: center; + font-size: 1.8em; + color: #515594; + margin-bottom: 0.5cm; + margin-top: 0.5cm; + } + + h2 { + font-family: "STKaiti"; + text-align: center; + font-size: 1.2em; + margin-top: 0.2em; + margin-bottom: 0.2em; + text-indent: 0em; + } + + h2.lefth2 { + text-align: left; + font-size: 1.2em; + margin-top: 0.2em; + margin-bottom: 0.2em; + text-indent: 0em; + } + + h2.whleft2 { + text-align: left; + color: #af0206; + font-size: 1.2em; + margin-top: 0.2em; + margin-bottom: 0.2em; + text-indent: 0em; + } + + h3 { + font-family: "STKaiti"; + color: #ef495d; + font-weight: bold; + font-size: 1.15em; + margin-top: 2em; + text-align: center; + margin-bottom: 2em; + text-indent: 0em; + } + + h4 { + font-weight: bold; + color: #5877ba; + font-size: 1.1em; + margin-top: 0.2em; + margin-bottom: 1em; + text-indent: 0em; + } + h5 { + font-weight: bold; + color: #c96653; + font-size: 1em; + margin-top: 0.2em; + margin-bottom: 1em; + text-indent: 2em; + } + h6 { + font-family: "cnepub", serif; + color: #36c3f4; + font-size: 1.1em; + margin-top: 10px; + text-indent: 2em; + margin-bottom: 10px; + } + .u { + text-decoration: underline; + } + + .img-0 { + width: 100%; + } + .imz { + width: 96%; + text-align: center; + } + + .img-a { + width: 95%; + } + .img-b { + width: 80%; + } + .img-c { + width: 70%; + } + .img-d { + width: 60%; + } + .img-e { + width: 50%; + } + .img-f { + width: 40%; + } + .img-g { + width: 30%; + } + .img-gh1 { + width: 30%; + text-align: right; + } + .img-gh2 { + width: 45%; + text-align: right; + } + .img-h { + width: 25%; + } + .img-i { + width: 10%; + } + .img-j { + width: 5%; + } + .img-gn { + width: 48%; + } + .img-gn1 { + width: 18%; + } + .inline { + height: 2em; + margin-bottom: -0.5em; + } + .inline1 { + height: 1.5em; + margin-top: -1em; + margin-bottom: -0.4em; + } + .inline2 { + height: 2.5em; + margin-top: 2em; + margin-bottom: -0.4em; + } + .inline3 { + height: 4em; + margin-top: 2em; + margin-bottom: -0.4em; + } + .block { + font-family: "STKaiti"; + font-size: 1.15em; + } + + .block1 { + font-family: "STKaiti"; + color: #08a496; + text-align: right; + font-size: 1.15em; + margin-right: 2em; + text-indent: 0em; + } + .block2 { + font-family: "STKaiti"; + font-size: 1.15em; + text-align: center; + text-indent: 0em; + } + + .bj1 { + border: 2px solid #0aa19c; + background: #e3efd7; + border-style: solid none none none; + padding: 0.2em 0.4em 0.2em 0.4em; + margin-top: 1em; + margin-left: 0.5em; + margin-right: 0.5em; + margin-bottom: 1em; + font-size: 1.1em; + box-shadow: 0.3em 0.3em 0px 0px #c3c2c0; + } + + .bj2 { + border: 2px solid #e04239; + background: #fdecd2; + border-style: solid none none none; + padding: 0.2em 0.4em 0.2em 0.4em; + margin-top: 1em; + margin-left: 0.5em; + margin-right: 0.5em; + margin-bottom: -0.8em; + font-size: 1.1em; + box-shadow: 0.3em 0.3em 0px 0px #c3c2c0; + } + + .kaiti { + font-family: "STKaiti"; + } + + // 鑷畾涔� + .page-box { + box-sizing: border-box; + min-height: 1150px !important; + margin-bottom: 20px; + box-shadow: 0 3px 6px 1px #00000029; + background-color: #fff; + } + ul { + list-style: none; + margin: 0; + padding: 0; + } + .fl { + display: flex; + } + .fw-wr { + flex-wrap: wrap; + } + .fl-cl { + flex-direction: column; + } + .ju-bt { + justify-content: space-between; + } +} diff --git a/src/books/artAndDance/view/components/chapter001.vue b/src/books/artAndDance/view/components/chapter001.vue new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/books/artAndDance/view/components/chapter001.vue diff --git a/src/books/artAndDance/view/components/header.vue b/src/books/artAndDance/view/components/header.vue new file mode 100644 index 0000000..b8a6a97 --- /dev/null +++ b/src/books/artAndDance/view/components/header.vue @@ -0,0 +1,78 @@ +<template> + <div class="chapter" num="1"> + <div class="page-box" page="1"> + <div class="bodystyle"> + <p class="center"> + <img class="img-0" alt="" src="../../assets/images/Cover.jpg" /> + </p> + </div> + </div> + <div class="page-box" page="2"> + <div class="bodystyle"> + <p class="center"> + <img class="img-0" alt="" src="../../assets/images/SMY.jpg" /> + </p> + </div> + </div> + <div class="page-box" page="3"> + <ul class="fl fl-cl ju-bt" style="min-height: 1150px;"> + <li> + <img src="../../assets/images/pageHeader.png" alt=""> + </li> + <li> + <div class="bodystyle"> + <h1 id="a003" class="front">缂栧浼�</h1> + <hr /> + <p>椤俱��銆�闂細<span class="kaiti">褰悏璞°��鍚曡壓鐢�</span></p> + <p>涓汇��銆�缂栵細<span class="kaiti">鐜嬫澃</span></p> + <p>鍓� 涓� 缂栵細<span class="kaiti">浜庢檽闆��寰愭ⅵ濠�</span></p> + <ul class="fl"> + <li> + <p>缂栧啓濮斿憳锛�</p> + </li> + <li class="fl fl-cl"> + <span class="kaiti">閭㈤珮鐔欍��鐜嬨��鐜层��鐜嬨��閿︺��宕旀槬鏉�</span> + <span class="kaiti">鏉庣传钖囥��鍒樿景鏇︺��鏅併��鑾广��鎴村垬棣欎緷</span> + <span class="kaiti">鏌��鍜忋��寮犺壓鐟躲��灏氬皬闆��鍛ㄣ��鐙�</span> + </li> + </ul> + <p>缇庢湳缁樼敾锛�<span class="kaiti">寮犲鑽�</span></p> + <p>涓昏鏁欏笀锛�<span class="kaiti">寮犳偊銆�銆�楂樻檽姊�</span></p> + <ul class="fl"> + <li> + <p>琛� 婕� 鑰咃細</p> + </li> + <li class="fl fl-cl"> + <span class="kaiti" + >钁f仼姹愩��濮氭槦鏈点��鍛ㄦ竻绔广��鏈卞婕�</span + > + <span class="kaiti" + >鎴村槈澧ㄣ��楂樺瓙娣囥��鑸掑崥鐟炪��鏇规仼娣�</span + > + <span class="kaiti">鍒樺瓙鐠愩��閮戞竻濡�</span> + </li> + </ul> + <p> + + </p> + <p> + 銆�銆�銆�銆�銆� + </p> + <p>銆�銆�銆�銆�銆�</p> + </div> + <p class="center"> + <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> + </p> + </li> + </ul> + </div> + </div> +</template> + +<script> +export default { + name: "pageHeader", +}; +</script> + +<style scoped></style> diff --git a/src/books/artAndDance/view/components/index.vue b/src/books/artAndDance/view/components/index.vue new file mode 100644 index 0000000..a8700d0 --- /dev/null +++ b/src/books/artAndDance/view/components/index.vue @@ -0,0 +1,653 @@ +<template> + <div class="page-main" @scroll="throttledScrollHandler"> + <div + class="page-content" + :style="{ + fontSize: fontSize ? fontSize + 'px' : '16px', + transform: `scale(${pageZoom ? pageZoom : 1})`, + transformOrigin: 'center top', + }" + > + <pageHeader + v-if="showCatalogList.indexOf(1) > -1" + :showPageList="loadPageList" + ></pageHeader> + <chapterOne + @saveCharacters="saveCharacters" + v-if="showCatalogList.indexOf(2) > -1" + :showPageList="loadPageList" + ></chapterOne> + </div> + </div> +</template> + +<script> +import pageHeader from "./header.vue"; +import chapterOne from "./chapter001.vue"; +import NoteIcon from "@/assets/images/biji.png"; +import _ from "lodash"; +import Swiper from "swiper/bundle"; +import "swiper/swiper-bundle.css"; +import Viewer from "viewerjs"; +import "viewerjs/dist/viewer.css"; +export default { + data() { + return { + catalogLength: 2, // 鎬荤珷鑺傛暟 + showCatalogList: [], // 鏄剧ず鐨勭珷鑺� + loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝�� + throttleThreshold: 100, // 鑺傛祦闃堝�� + previousScrollTop: 0, + throttledScrollHandler: null, + observer: null, + loadPageObserver: null, + loadPageList: [], + questionData: {}, + renderSignMap: {}, + }; + }, + computed: { + fontSize() { + return this.$store.state.qiankun.fontSize; + }, + pageZoom() { + return this.$store.state.qiankun.scale / 100; + }, + }, + watch: { + showCatalogList: { + handler(newVal, oldVal) { + if ( + this.$store.state.qiankun && + this.$store.state.qiankun.catalogChange + ) { + // 璋冪敤鐖跺眰鏂规硶 + this.$store.state.qiankun.catalogChange({ + showCatalogList: newVal, + }); + } + // 鍚姩椤电爜瑙傚療 + setTimeout(() => { + this.initObservation(); + this.initThemeColor(); + }, 500); + }, + }, + loadPageList: { + handler(newVal, oldVal) { + setTimeout(() => { + this.initSwiper(); + this.initViewer(); + }, 200); + }, + }, + }, + mounted() { + // 榛樿鍔犺浇绔犺妭 + this.showCatalogList = [1]; + // 婊氬姩鐩戝惉鑺傛祦 + this.throttledScrollHandler = _.throttle( + this.scrollFun, + this.throttleThreshold, + { leading: true, trailing: false } + ); + // 瀹氫箟瀛愬眰鏂规硶 + if (this.setGlobalState) { + // 鎻愪緵椤甸潰璺宠浆鍔熻兘 + this.setGlobalState({ + gotoPage: (catalog, page) => { + this.gotoPage(catalog, page); + }, + // 娓叉煋绗旇銆侀珮浜�佸垝绾� + renderSign: (type, data) => { + // 鍥犱负璋冩暣涓洪〉闈㈡噿鍔犺浇锛屾墍浠ユ覆鏌撴爣璁颁篃闇�瑕佹寜鐓ч〉闈㈣繘琛屽鐞嗭紝鍏堝偍瀛樻暟鎹紝椤甸潰鍔犺浇瀹屾垚鍐嶆覆鏌撳搴旂殑鏍囪锛� + this.handelSignData(type, data); + // this.renderSign(type, data); + }, + // 鍒犻櫎绗旇銆侀珮浜�佸垝绾� + delSign: (data) => { + this.delSign(data); + }, + }); + } + + // 鍒涘缓涓�涓柊鐨� Intersection Observer 瀹炰緥锛岀敤浜庤瀵熺洰鏍囧厓绱犲拰鎵ц鐩稿簲鐨勫洖璋冨嚱鏁般�� + // new IntersectionObserver(callback, options)锛氫娇鐢ㄤ箣鍓嶅畾涔夌殑 callback 鍥炶皟鍑芥暟鍜� options 閰嶇疆閫夐」鏉ュ垵濮嬪寲 Intersection Observer 瀹炰緥銆� + this.observer = new IntersectionObserver(this.pageChangeCallback, { + root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮�� + rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚� + threshold: 0.5, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般�� + }); + + this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, { + root: null, // 鎸囧畾鏍瑰厓绱狅紝杩欓噷璁句负 null锛岃〃绀洪�夊彇鏁翠釜瑙嗙獥浣滀负鏍瑰厓绱犮�� + rootMargin: "0px", // 鎸囧畾鏍瑰厓绱犵殑杈圭晫锛岃繖閲岃涓� "0px"锛岃〃绀烘牴鍏冪礌鐨勮竟鐣屽拰瑙嗙獥鐨勮竟鐣岄噸鍚� + threshold: 0, // 鎸囧畾浜ゅ弶姣斾緥锛岃繖閲岃涓� 0.5锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般�� + }); + + // 鍚姩椤电爜瑙傚療 + setTimeout(() => { + this.initObservation(); + this.initThemeColor(); + }, 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); + }, + methods: { + // 婊氬姩鐩戝惉 + scrollFun(event) { + // 鍒ゆ柇鍚戜笂婊氬姩杩樻槸鍚戜笅婊氬姩 + if (event.target.scrollTop > this.previousScrollTop) { + // 鍚戜笅 + const currentScrollTop = + event.target.scrollTop + event.target.offsetHeight; + if ( + currentScrollTop >= + event.target.scrollHeight - this.loadThreshold + ) { + // 鍒拌揪闃堝�� + if ( + this.showCatalogList[this.showCatalogList.length - 1] < + this.catalogLength + ) { + // 鍔犺浇涓嬩竴绔� + this.showCatalogList.push( + this.showCatalogList[this.showCatalogList.length - 1] + 1 + ); + if (this.showCatalogList.length > 3) { + // 瓒呰繃涓夌珷闅愯棌椤堕儴涓�绔� + this.showCatalogList.shift(); + } + } + } + } else if (event.target.scrollTop < this.previousScrollTop) { + // 鍚戜笂 + const currentScrollTop = event.target.scrollTop; + if (currentScrollTop <= this.loadThreshold) { + // 鍒拌揪闃堝�� + if (this.showCatalogList[0] > 0) { + // 鍔犺浇涓婁竴绔� + this.showCatalogList.unshift(this.showCatalogList[0] - 1); + if (this.showCatalogList.length > 3) { + // 瓒呰繃涓夌珷闅愯棌搴曢儴涓�绔� + this.showCatalogList.pop(); + } + } + } + } + // showCatalogList 褰撳墠鏄剧ず鐨勪笁涓珷鑺傦紝watch鐩戝惉浼犻�掔粰涓诲簲鐢� + // 鏇存柊涓婁竴娆℃粴鍔ㄧ殑浣嶇疆 + this.previousScrollTop = event.target.scrollTop; + }, + // 绔犺妭銆侀〉闈㈣烦杞� + gotoPage(catalog, page) { + if (catalog >= 0 && catalog <= this.catalogLength) { + // 澶勭悊娓叉煋绔犺妭 + if (catalog == 0) { + this.showCatalogList = [0, 1]; + } else if (catalog == this.catalogLength) { + this.showCatalogList = [ + this.catalogLength - 2, + this.catalogLength - 1, + this.catalogLength, + ]; + } else { + this.showCatalogList = [catalog - 1, catalog, catalog + 1]; + } + setTimeout(() => { + // 璺宠浆椤电爜 + const pageDom = ( + this.container ? this.container : document + ).querySelector(`[page="${page}"]`); + if (pageDom) { + pageDom.scrollIntoView(); + } else { + console.log("椤电爜閿欒锛�"); + } + }, 500); + } else { + console.log("绔犺妭閿欒锛�"); + } + }, + + // 澶勭悊鏍囪鏁版嵁 + handelSignData(type, data) { + if (this.loadPageList.indexOf(Number(data.page)) > -1) { + // 绔嬪嵆娓叉煋 + this.renderSign(type, data); + } + + // 鍌ㄥ瓨鏁版嵁 + if (!this.renderSignMap[type]) this.renderSignMap[type] = {}; + if (!this.renderSignMap[type][data.page]) + this.renderSignMap[type][data.page] = []; + this.renderSignMap[type][data.page].push(data); + }, + + // 娓叉煋鏍囪 + renderSign(type, data) { + const existence = ( + this.container ? this.container : document + ).querySelector(`[dataid="${data.id}"]`); + // 鍘婚噸 + if (!existence) { + const pageDom = ( + this.container ? this.container : document + ).querySelector(`[page="${data.page}"]`); + // 鍒涘缓 createTreeWalker 杩唬鍣紝鐢ㄤ簬閬嶅巻鏂囨湰鑺傜偣锛屼繚瀛樺埌涓�涓暟缁� + const treeWalker = document.createTreeWalker( + pageDom, + NodeFilter.SHOW_TEXT + ); + const allTextNodes = []; + let currentNode = treeWalker.nextNode(); + while (currentNode) { + allTextNodes.push(currentNode); + currentNode = treeWalker.nextNode(); + } + for (let i = 0; i < allTextNodes.length; i++) { + const textDom = allTextNodes[i]; + if (textDom.textContent.indexOf(data.txt) > -1) { + let reg = new RegExp(`${data.txt}`, "ig"); + switch (type) { + case "Highlight": + // 楂樹寒 + textDom.parentNode.innerHTML = + textDom.parentNode.innerHTML.replace( + reg, + `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>` + ); + break; + case "Dashing": + // 鍒掔嚎 + textDom.parentNode.innerHTML = + textDom.parentNode.innerHTML.replace( + reg, + `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>` + ); + break; + case "Note": + // 绗旇 + textDom.parentNode.innerHTML = + textDom.parentNode.innerHTML.replace( + reg, + `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>` + ); + break; + } + } + } + } + }, + // 鍒犻櫎鏍囪娓叉煋 + delSign({ ids, type }) { + if (ids && ids.length) { + for (let i = 0; i < ids.length; i++) { + const id = ids[i]; + const dom = ( + this.container ? this.container : document + ).querySelector(`[dataid="${id}"]`); + dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace( + dom.outerHTML, + dom.outerText + ); + } + } + if (type) { + const doms = ( + this.container ? this.container : document + ).querySelectorAll(`[datatype="${type}"]`); + for (let i = 0; i < doms.length; i++) { + const dom = doms[i]; + dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace( + dom.outerHTML, + dom.outerText + ); + } + } + }, + initObservation() { + const sections = ( + this.container ? this.container : document + ).querySelectorAll(".page-box"); + sections.forEach((section) => { + if (this.config.activeBook && this.config.activeBook.tryPageCount) { + const page = section.getAttribute("page"); + if (Number(page) > this.config.activeBook.tryPageCount) { + let chapterDom = this.getParentWithClass(section, "chapter"); + const chapterNum = chapterDom.getAttribute("num"); + this.catalogLength = Number(chapterNum) - 1; + section.remove(); + return false; + } + } + // observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般�� + const isObserver = section.getAttribute("observer"); + const isLoadObserver = section.getAttribute("loadObserver"); + if (!isObserver) { + this.observer.observe(section); + section.setAttribute("observer", "1"); + } + if (!isLoadObserver) { + this.loadPageObserver.observe(section); + section.setAttribute("loadObserver", "1"); + } + }); + }, + initThemeColor() { + // 鑾峰彇鍚勭闇�瑕佷富棰樿壊鐨勮妭鐐� + const colorDom = ( + this.container ? this.container : document + ).querySelectorAll(".theme-color"); + const backgroundColorDom = ( + this.container ? this.container : document + ).querySelectorAll(".theme-back"); + const borderColorDom = ( + this.container ? this.container : document + ).querySelectorAll(".theme-border"); + // 鑾峰彇閰嶇疆鐨勪富棰樿壊 + const bookThemeColor = + this.config.activeBook && this.config.activeBook.bookThemeColor + ? this.config.activeBook.bookThemeColor + : null; + const chapterThemeColor = + this.config.activeBook && this.config.activeBook.chapterThemeColor + ? this.config.activeBook.chapterThemeColor + : null; + const pageThemeColor = + this.config.activeBook && this.config.activeBook.pageThemeColor + ? this.config.activeBook.pageThemeColor + : null; + colorDom.forEach((domItem) => { + // 鑾峰彇绔犺妭銆侀〉鐮� + let pageDom = this.getParentWithClass(domItem, "page-box"); + let chapterDom = this.getParentWithClass(domItem, "chapter"); + let page, chapterNum; + if (pageDom) page = pageDom.getAttribute("page"); + if (chapterDom) chapterNum = chapterDom.getAttribute("num"); + // 鍚戜笂鍖归厤涓婚鑹� + const themeColor = + page && pageThemeColor && pageThemeColor[page] + ? pageThemeColor[page] + : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] + ? chapterThemeColor[chapterNum] + : bookThemeColor; + if (themeColor) { + domItem.style.color = themeColor; + } + }); + backgroundColorDom.forEach((domItem) => { + // 鑾峰彇绔犺妭銆侀〉鐮� + let pageDom = this.getParentWithClass(domItem, "page-box"); + let chapterDom = this.getParentWithClass(domItem, "chapter"); + let page, chapterNum; + if (pageDom) page = pageDom.getAttribute("page"); + if (chapterDom) chapterNum = chapterDom.getAttribute("num"); + // 鍚戜笂鍖归厤涓婚鑹� + const themeColor = + page && pageThemeColor && pageThemeColor[page] + ? pageThemeColor[page] + : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] + ? chapterThemeColor[chapterNum] + : bookThemeColor; + if (themeColor) { + domItem.style.backgroundColor = themeColor; + } + }); + borderColorDom.forEach((domItem) => { + // 鑾峰彇绔犺妭銆侀〉鐮� + let pageDom = this.getParentWithClass(domItem, "page-box"); + let chapterDom = this.getParentWithClass(domItem, "chapter"); + let page, chapterNum; + if (pageDom) page = pageDom.getAttribute("page"); + if (chapterDom) chapterNum = chapterDom.getAttribute("num"); + // 鍚戜笂鍖归厤涓婚鑹� + const themeColor = + page && pageThemeColor && pageThemeColor[page] + ? pageThemeColor[page] + : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] + ? chapterThemeColor[chapterNum] + : bookThemeColor; + if (themeColor) { + domItem.style.borderColor = themeColor; + } + }); + }, + getParentWithClass(element, className) { + while (element.parentElement) { + element = element.parentElement; + if (element.classList.contains(className)) { + return element; + } + } + }, + pageChangeCallback(entries, observer) { + //entries锛氫唬琛ㄨ瀵熷埌鐨勭洰鏍囧厓绱犵殑闆嗗悎銆� observer锛氫唬琛ㄨ瀵熻�呭璞°�� + entries.forEach((entry) => { + //entry.isIntersecting锛氭鏌ュ綋鍓嶇洰鏍囧厓绱犳槸鍚︿笌鏍瑰厓绱犵浉浜ゃ�� + if (entry.isIntersecting) { + const target = entry.target; + //entry.target锛氳幏鍙栧綋鍓嶇洰鏍囧厓绱� + const page = target.getAttribute("page"); + const catalogDom = this.tool.getParentNodeByClassName( + target, + "chapter" + ); + const catalog = catalogDom.getAttribute("num"); + let text = null; + if (target.querySelector("p")) { + text = target.querySelector("p").textContent.substring(0, 20); + } + // 杩斿洖椤电爜鍜岀珷鑺備俊鎭� + if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange) + this.$store.state.qiankun.pageChange({ + page: page, + catalog: catalog, + text, + }); + // const sections = Array.from(document.querySelectorAll(".section")); + //sections锛氳幏鍙栨墍鏈夊叿鏈� .section 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆� + // let index = sections.findIndex((section) => section === target) + 1; + //index锛氭煡鎵惧綋鍓嶇洰鏍囧厓绱犲湪 sections 鏁扮粍涓殑绱㈠紩锛屽苟鍔� 1锛岀敤浜庣‘瀹氬綋鍓嶉〉鐮併�� + } + }); + }, + loadPageCallback(entries, observer) { + entries.forEach(async (entry) => { + if (entry.isIntersecting) { + const target = entry.target; + const page = target.getAttribute("page"); + if (this.loadPageList.indexOf(Number(page)) == -1) { + const catalogDom = this.tool.getParentNodeByClassName( + target, + "chapter" + ); + const catalog = catalogDom.getAttribute("num"); + // if (!this.questionData[page]) { + // if (testData && testData[catalog]) { + // if (testData[catalog][page]) { + // if (Array.isArray(testData[catalog][page])) { + // this.questionData[page] = await getQuestionList( + // page, + // testData[catalog][page], + // this.config.activeBook + // ); + // } else { + // const obj = {}; + // for (let key in testData[catalog][page]) { + // obj[key] = await getQuestionList( + // [], + // testData[catalog][page][key], + // this.config.activeBook + // ); + // } + // this.questionData[page] = obj; + // } + // console.log("棰樼洰", this.questionData); + // } + // } + // } + // 娣诲姞椤电爜 + this.loadPageList.push(Number(page)); + // 娓叉煋杩欎竴椤电殑鏍囪 + for (const key in this.renderSignMap) { + if (this.renderSignMap[key][page]) { + this.renderSignMap[key][page].forEach((item) => { + this.renderSign(key, item); + }); + } + } + if (this.loadPageList.length > 5) { + // 瓒呰繃5椤� + this.loadPageList.shift(); + } + } + } + }); + }, + initSwiper() { + const doms = ( + this.container ? this.container : document + ).querySelectorAll(".swiper-img"); + for (let i = 0; i < doms.length; i++) { + const dom = doms[i]; + new Swiper(dom, { + loop: false, // 鏃犵紳 + autoplay: { + //鑷姩寮�濮� + delay: 3000, //鏃堕棿闂撮殧 + disableOnInteraction: 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, + // // 濡傛灉闇�瑕佸垎椤靛櫒 + // pagination: { + // el: (this.container ? this.container : document).querySelector( + // ".swiper-pagination" + // ), + // clickable: true // 鍒嗛〉鍣ㄥ彲浠ョ偣鍑� + // } + }); + } + const pptDoms = ( + this.container ? this.container : document + ).querySelectorAll(".swiper_ppt"); + for (let i = 0; i < pptDoms.length; i++) { + 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" + ), + }, + // 绐楀彛鍙樺寲,閲嶆柊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; + }, + 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() { + const doms = ( + this.container ? this.container : document + ).querySelectorAll(".openImgBox"); + for (let i = 0; i < doms.length; i++) { + const dom = doms[i]; + new Viewer(dom, { + container: this.container + ? this.container.querySelector("#app") + : "body", + navbar: true, // 鏄剧ず瀵艰埅鏍� + toolbar: true, // 鏄剧ず宸ュ叿鏍� + title: true, // 鏄剧ず鏍囬 + }); + } + }, + // 鐐瑰嚮浜嬩欢锛氬皢鐢熷兓鍗曡瘝浼犵粰 涓诲簲鐢� 浠庤�岃皟鐢ㄨ瘝鍏稿姛鑳� + saveCharacters(event, word) { + console.log("鐢熷兓瀛�", event, word); + if (this.$store.state.qiankun && this.$store.state.qiankun.chooseWords) { + this.$store.state.qiankun.chooseWords({ + type:"word", + word, + x: event.pageX, + y: event.pageY, + }); + } + // chooseWords + }, + }, + components: { + pageHeader, + chapterOne, + }, +}; +</script> + +<style lang="less" scoped> +.page-main { + width: 100%; + height: 100%; + overflow: auto; + .page-content { + max-width: 816px; + min-width: 375px; + margin: 0 auto; + padding-bottom: 100px; + } +} +</style> diff --git a/src/books/artAndDance/view/index.vue b/src/books/artAndDance/view/index.vue new file mode 100644 index 0000000..0729ee8 --- /dev/null +++ b/src/books/artAndDance/view/index.vue @@ -0,0 +1,76 @@ +<template> + <div class="ans-dance" @mouseup="handleMouseUp"> + <pageContent></pageContent> + </div> +</template> + +<script> +import pageContent from "./components/index.vue"; +export default { + name:"ansAndDance", + components: { + pageContent, + }, + data() { + return {}; + }, + + mounted() {}, + methods: { + getParentWithClass(element, className) { + while (element.parentElement) { + element = element.parentElement; + if (element.classList.contains(className)) { + return element; + } + } + }, + handleMouseUp(e) { + const selection = ( + this.container ? this.container : window + ).getSelection(); + const txt = selection.toString(); + if (selection.type != "none" && txt) { + let node = selection.anchorNode.parentNode; + let pageHtml = this.getParentWithClass( + selection.anchorNode, + "page-box" + ); + let chapterDom = this.getParentWithClass( + selection.anchorNode, + "chapter" + ); + let chapterNum; + if (chapterDom) chapterNum = chapterDom.getAttribute("num"); + if (pageHtml) { + const page = pageHtml.getAttribute("page"); + // 鐩戝惉閫変腑鏂囨湰浜嬩欢锛屽苟瑙﹀彂鐖跺眰鏂规硶 + if (this.$store.state.qiankun.windowSelection) { + this.$store.state.qiankun.windowSelection({ + chapterNum, + txt, + page, + x: e.x, + y: e.y, + }); + } + } + } else { + if (this.$store.state.qiankun.windowSelection) { + this.$store.state.qiankun.windowSelection({ + chapterNum: "", + txt: "", + page: "", + x: e.x, + y: e.y, + }); + } + } + }, + }, +}; +</script> + +<style lang="less"> +@import "../assets/main.less"; +</style> \ No newline at end of file -- Gitblit v1.9.1