From 5502440dd8d7c8f7d911904150d14bdfc2c35944 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期三, 12 六月 2024 11:05:52 +0800
Subject: [PATCH] 数学
---
src/books/artAndDance/view/components/header.vue | 5
src/books/math/assets/main.less | 716 +++++++++++++++++++++++
src/books/math/view/index.vue | 76 ++
src/books/math/view/components/header.vue | 93 +++
src/books/artAndDance/view/components/index.vue | 1
src/books/math/assets/images/Cover.jpg | 0
src/books/math/view/components/index.vue | 862 ++++++++++++++++++++++++++++
src/App.vue | 9
8 files changed, 1,757 insertions(+), 5 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 81ff827..cc29709 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -8,6 +8,7 @@
v-if="activeBook.name == 'sportsAndHealth'"
></sportsAndHealth>
<artAndDance v-if="activeBook.name == 'artAndDance'"></artAndDance>
+ <math v-if="activeBook.name == 'math'"></math>
</div>
</template>
@@ -18,7 +19,7 @@
import english from "./books/English/view/index.vue";
import sportsAndHealth from "./books/sportsAndHealth/view/index";
import artAndDance from './books/artAndDance/view/index.vue'
-
+import math from './books/math/view/index.vue'
export default {
name: "App",
components: {
@@ -27,7 +28,8 @@
embedded,
english,
sportsAndHealth,
- artAndDance
+ artAndDance,
+ math
},
data() {
return {
@@ -72,7 +74,8 @@
// embedded
// english
// artAndDance
- this.config.resourceCtx + "sportsAndHealth"
+ // math
+ this.config.resourceCtx + "math"
);
// 娴嬭瘯璇曡30椤�
// this.activeBook.tryPageCount = 10;
diff --git a/src/books/artAndDance/view/components/header.vue b/src/books/artAndDance/view/components/header.vue
index 288065b..52ab8f4 100644
--- a/src/books/artAndDance/view/components/header.vue
+++ b/src/books/artAndDance/view/components/header.vue
@@ -1,8 +1,9 @@
<template>
<div class="chapter" num="1">
<div class="page-box mt-20" page="1" style="min-height: auto;">
- <div v-if="showPageList.indexOf(1) > -1"></div>
- <img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
+ <div v-if="showPageList.indexOf(1) > -1">
+ <img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
+ </div>
</div>
<div class="page-box" page="2" style="min-height: auto;">
<div v-if="showPageList.indexOf(2) > -1">
diff --git a/src/books/artAndDance/view/components/index.vue b/src/books/artAndDance/view/components/index.vue
index 0c3cdbe..5574cf3 100644
--- a/src/books/artAndDance/view/components/index.vue
+++ b/src/books/artAndDance/view/components/index.vue
@@ -60,6 +60,7 @@
import Viewer from "viewerjs";
import "viewerjs/dist/viewer.css";
export default {
+ name:"pageContent",
data() {
return {
catalogLength: 7, // 鎬荤珷鑺傛暟
diff --git a/src/books/math/assets/images/Cover.jpg b/src/books/math/assets/images/Cover.jpg
new file mode 100644
index 0000000..c8a593c
--- /dev/null
+++ b/src/books/math/assets/images/Cover.jpg
Binary files differ
diff --git a/src/books/math/assets/main.less b/src/books/math/assets/main.less
new file mode 100644
index 0000000..8d1dbdb
--- /dev/null
+++ b/src/books/math/assets/main.less
@@ -0,0 +1,716 @@
+.math-book {
+ 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:18px;
+ color: #000;
+ 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: 38px;
+ margin-top: 0.2em;
+ margin-bottom: 0.2em;
+ text-indent: 0em;
+ }
+
+ h3 {
+ font-family: "STKaiti";
+ color: #ef495d;
+ font-weight: bold;
+ // font-size: 1.15em;
+ font-size: 26px;
+ margin-top: 2em;
+ text-align: center;
+ margin-bottom: 20px;
+ 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;
+ font-size: 26px;
+ text-align: center;
+ text-indent: 0em;
+ margin: 6px 0;
+ }
+
+ .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 {
+ position: relative;
+ box-sizing: border-box;
+ min-height: 1150px;
+ margin-bottom: 20px;
+ box-shadow: 0 3px 6px 1px #00000029;
+ background-color: #fff;
+ }
+ .book {
+ margin: 0 auto;
+ width: 816px;
+ }
+
+ .text-center {
+ text-align: center;
+ }
+ .tl {
+ text-align: left !important;
+ }
+ .tl-ri {
+ text-align: right !important;
+ }
+ .tl-ju {
+ text-align: justify;
+ }
+ .ti2 {
+ text-indent: 2em !important;
+ }
+ .lineInput {
+ width: 90%;
+ font-size: 14px;
+ color: #666;
+ border: none;
+ border-bottom: 1px solid #15c0f2;
+ outline: none;
+ background: transparent;
+ }
+ .textarea-border {
+ border-color: #15c0f2;
+ }
+ .completion-input {
+ width: 64px !important;
+ color: #000 !important;
+ }
+ .judge-input {
+ width: 20px;
+ font-size: 14px;
+ color: #000;
+ border: none;
+ border: 0;
+ outline: none;
+ background: transparent;
+ }
+
+ .sport-text {
+ font-size: 20px;
+ line-height: 40px;
+ }
+ .img-text {
+ color: #000;
+ text-align: center;
+ font-size: 16px;
+ text-indent: 0em;
+ font-weight: 700;
+ }
+ .text-size {
+ font-size: 20px;
+ }
+ .fl {
+ display: flex;
+ }
+ .fl-evenly {
+ justify-content: space-evenly;
+ }
+ .fl-around {
+ justify-content: space-around;
+ }
+ .fl-between {
+ justify-content: space-between;
+ }
+ .ju-cn {
+ justify-content: center;
+ }
+ .fl-di {
+ flex-direction: column;
+ }
+ .fl-cn {
+ align-items: center;
+ }
+ .fz-18 {
+ font-size: 18px;
+ }
+ .fz-16 {
+ font-size: 16px;
+ }
+ .fz-14 {
+ font-size: 14px;
+ }
+ .fz-12 {
+ font-size: 12px;
+ }
+ .suspend-title {
+ white-space: nowrap;
+ min-width: 120px;
+ position: absolute;
+ top: -27px;
+ left: -15px;
+ background-color: #32a59e;
+ height: 34px;
+ line-height: 34px;
+ border-radius: 13px;
+ color: #fff;
+ text-align: center;
+ }
+ .m0 {
+ margin: 0;
+ }
+ .t0 {
+ text-indent: 0;
+ }
+ .t2 {
+ text-indent: 2em;
+ }
+ .m0-t0 {
+ margin: 0;
+ text-indent: 0 !important;
+ }
+
+ .learn-btn img {
+ cursor: pointer;
+ height: 30px;
+ // width: 25px;
+ }
+
+ .lh {
+ line-height: 1.5em;
+ margin-top: 0.5em;
+ }
+ .page-box {
+ box-sizing: border-box;
+ min-height: 1150px ;
+ margin-bottom: 20px;
+ box-shadow: 0 3px 6px 1px #00000029;
+ background-color: #fff;
+ }
+ .ds-bl {
+ display: block;
+ }
+ ul {
+ list-style: none;
+ padding: 0;
+ }
+
+ .lh2 {
+ line-height: 2em;
+ }
+
+ .header-box {
+ position: relative;
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 20px;
+ }
+
+ .header-border-box {
+ width: 90%;
+ height: 100px;
+ border-bottom: 1px solid #00aeef;
+ border-left: 1px solid #00aeef;
+ }
+
+ .header-num-box {
+ box-sizing: border-box;
+ position: absolute;
+ top: 50px;
+ width: 100%;
+ height: 26px !important;
+ line-height: 26px;
+ background-color: #15c0f2;
+ color: #fff;
+ padding-left: 50px;
+ }
+ .page-header-box {
+ padding-top: 96px;
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-end;
+ margin-bottom: 28px;
+ }
+ .page-header-text {
+ color: #616161;
+ font-size: 14px;
+ }
+ .page-header-num {
+ display: inline-block;
+ width: 100px;
+ height: 30px;
+ line-height: 30px;
+ padding-left: 20px;
+ box-sizing: border-box;
+ background-color: #15c0f2;
+ color: #fff;
+ margin-left: 20px;
+ font-weight: bold;
+ }
+ .fw-b {
+ font-weight: bold;
+ }
+ .italic {
+ font-style: italic;
+ }
+ .mb-0 {
+ margin-bottom: 0;
+ }
+ .mb-20 {
+ margin: 20px 0 !important;
+ }
+ .mb-40 {
+ margin-bottom: 40px !important;
+ }
+ .mt-20 {
+ margin-top: 20px;
+ }
+ .mt-40 {
+ margin-top: 40px;
+ }
+ .mb-80 {
+ margin-bottom: 80px !important;
+ }
+ .mr-20 {
+ margin-right: 20px;
+ }
+ .ml-30 {
+ margin-left: 30px;
+ }
+ .table-box {
+ width: 94%;
+ font-family: "STKaiti";
+ line-height: 1.5em;
+ }
+ .dl-bl {
+ display: inline-block;
+ }
+ .mt-10 {
+ margin-top: 10px;
+ }
+ .w100 {
+ width: 100% !important;
+ }
+ .primary-color {
+ color: #15c0f2;
+ }
+ .video-border {
+ border: 1px dotted #15c0f2;
+ }
+ .fm-st {
+ font-family: "STKaiti";
+ }
+ .btn {
+ cursor: pointer;
+ width: 23px;
+ border-radius: 5px;
+ margin-left: 5px;
+ }
+ .table-br-color {
+ border-color: #e9e9e9;
+ }
+ .span-border {
+ margin-left: -13px;
+ display: block;
+ width: 104%;
+ margin-top: 20px;
+ border-bottom: 2px dotted #1eb9ee;
+ border-radius: 10px;
+ }
+ .wh-no {
+ white-space: nowrap;
+ }
+ .annotation-border {
+ margin: 20px 0;
+ width: 150px;
+ border: 1px solid #00aeef;
+ }
+ .word-break-all {
+ word-break: break-all;
+ }
+ .textarea-text {
+ font-size: 16px;
+ font-family: "STKaiti";
+ }
+ .mt-20 {
+ margin-top: 20px;
+ }
+ .mt-40 {
+ margin-top: 40px;
+ }
+ .ta-br {
+ border-color: #c0c4cc;
+ }
+ textarea:focus {
+ border-color: #15c0f2;
+ outline: none;
+ }
+ .cl-66 {
+ color: #666;
+ }
+
+ .svg-btn {
+ margin-left: 5px;
+ cursor: pointer;
+ display: flex;
+ padding: 3px;
+ fill: #fff;
+ border: 1px solid #008bff;
+ border-radius: 5px;
+ background-color: #008bff;
+ &:hover{
+ fill: #008bff;
+ background-color: #fff;
+ }
+ }
+ a {
+ cursor: default;
+ }
+}
+
+/* 濯掍綋鏌ヨ鍋氬熀纭�鍝嶅簲寮忓竷灞� */
+@media (max-width: 430px) {
+ .ans-dance {
+ .page-box {
+ min-height: 750px;
+ }
+ .pg-mh {
+ min-height: 815px;
+ }
+ }
+}
+@media (max-width: 660px) {
+ .ans-dance {
+ /* 鍒嗛〉padding */
+ .page-padding {
+ padding: 104px 20px;
+ }
+ .padding-96 {
+ padding: 0 20px;
+ }
+ /* video澶у皬 */
+ .video-box {
+ max-width: 260px;
+ }
+ .audio-box {
+ margin-top: 20px;
+ flex-wrap: wrap;
+ li {
+ width: 100%;
+ }
+ li:nth-child(2) {
+ margin-top: 10px;
+ }
+ }
+ }
+}
+@media (min-width: 660px) {
+ .ans-dance {
+ .page-padding {
+ padding: 104px 96px;
+ }
+ .padding-96 {
+ padding: 0 96px;
+ }
+ .video-box {
+ max-width: 370px;
+ }
+ .audio-box {
+ margin-top: 20px;
+ flex-wrap: nowrap;
+ li {
+ width: 58%;
+ }
+ li:nth-child(2) {
+ margin-left: 10px;
+ }
+ }
+ }
+}
diff --git a/src/books/math/view/components/header.vue b/src/books/math/view/components/header.vue
new file mode 100644
index 0000000..f01d967
--- /dev/null
+++ b/src/books/math/view/components/header.vue
@@ -0,0 +1,93 @@
+
+<template>
+ <div class="chapter" num="1">
+ <!-- 灏侀潰 -->
+ <div class="page-box cover mt-20" page="1" style="min-height:auto">
+ <div v-if="showPageList.indexOf(1) > -1">
+ <img src="../../assets/images/Cover.jpg" alt="" />
+ </div>
+ </div>
+ <div class="page-box" page="2" style="min-height:auto">
+ <div v-if="showPageList.indexOf(1) > -1">
+ <img src="../../assets/images/Cover.jpg" alt="" />
+ </div>
+ </div>
+ <!-- 鐗堟潈椤� -->
+ <div class="page-box text-center" style="padding: 136px 0" page="3">
+ <div v-if="showPageList.indexOf(3) > -1">
+ <div class="box">
+ <hr class="line" />
+ <p class="tl fz-14"><b>鍥句功鍦ㄧ増缂栫洰锛圕IP锛夋暟鎹�</b></p>
+ <p class="tl fz-14 m0">
+ 瀛﹀墠鍎跨鍗敓涓庝繚鍋�/寮犲叞棣欙紝娼樼钀嶄富缂�.鈥�3鐗�.鈥斿寳浜細鍖椾含甯堣寖澶у鍑虹増绀撅紝2023.2锛�2024.2閲嶅嵃锛�
+ </p>
+ <p class="tl" style="margin-bottom: 10px">ISBN 978-7-303-26340-0</p>
+ <p class="tl fz-14 m0" style="margin-bottom: 10px">
+ 鈪�.鈶犲鈥� 鈪�.鈶犲紶鈥� 鈶℃綐鈥� 鈪�.鈶犲鍓嶅効绔モ�斿崼鐢熶繚鍋モ�斿辜鍎垮笀鑼冨鏍♀�旀暀鏉� 鈪�.鈶燫179
+ </p>
+ <p class="tl fz-14">涓浗鐗堟湰鍥句功棣咰IP鏁版嵁鏍稿瓧锛�2020锛夌179545鍙�</p>
+ <hr class="line" style="height: 1px" />
+ <p class="tl fz-14 m0" style="margin-top: 136px">
+ <b>鏁欐潗鎰忚鍙嶉锛歡aozhifk@bnupg.com 010-58805079</b>
+ </p>
+ <p class="tl fz-14 m0">钀ラ攢涓績鐢佃瘽锛�010-58802755 58800035</p>
+ <p class="tl fz-14 m0">缂栬緫閮ㄧ數璇濓細010-58802883</p>
+ <hr class="line" style="height: 1px" />
+ <p class="tl fz-14 m0">鍑虹増鍙戣锛氬寳浜笀鑼冨ぇ瀛﹀嚭鐗堢ぞ www.bnupg.com</p>
+ <p class="tl fz-14 m0">銆�銆�銆�銆�銆�鍖椾含甯傝タ鍩庡尯鏂拌鍙ｅ澶ц12-3鍙�</p>
+ <p class="tl fz-14 m0">銆�銆�銆�銆�銆�閭斂缂栫爜锛�100088</p>
+ <p class="tl fz-14 m0">鍗般��銆�鍒凤細澶╂触鏃潪鍗板埛鏈夐檺鍏徃</p>
+ <p class="tl fz-14 m0">缁忋��銆�閿�锛氬叏鍥芥柊鍗庝功搴�</p>
+ <p class="tl fz-14 m0">寮�銆�銆�鏈細889mm脳1194mm 1/16</p>
+ <p class="tl fz-14 m0">鍗般��銆�寮狅細18.25</p>
+ <p class="tl fz-14 m0">瀛椼��銆�鏁帮細373鍗冨瓧</p>
+ <p class="tl fz-14 m0">鐗堛��銆�娆★細2023骞�2鏈堢3鐗�</p>
+ <p class="tl fz-14 m0">鍗般��銆�娆★細2024骞�2鏈堢23娆″嵃鍒�</p>
+ <p class="tl fz-14 m0">瀹氥��銆�浠凤細39.80鍏�</p>
+ <hr class="line" />
+ <ul class="fl fl-between m0" style="padding: 0">
+ <li>
+ <p class="tl fz-14 m0">绛栧垝缂栬緫锛氬璐靛钩</p>
+ <p class="tl fz-14 m0">缇庢湳缂栬緫锛氱劍涓�</p>
+ <p class="tl fz-14 m0">璐ｄ换鏍″锛氶檲姘�</p>
+ </li>
+ <li>
+ <p class="tl fz-14 m0">璐ｄ换缂栬緫锛氬懆楣�</p>
+ <p class="tl fz-14 m0">瑁呭抚璁捐锛氱劍涓�</p>
+ <p class="tl fz-14 m0">璐ｄ换鍗板埗锛氶┈娲�</p>
+ </li>
+ </ul>
+ <p class="center m0" style="margin-top: 20px; font-size: 20px">
+ <b>鐗堟潈鎵�鏈� 渚垫潈蹇呯┒</b>
+ </p>
+ <p class="center m0"><b>鍙嶇洍鐗堛�� 渚垫潈涓炬姤鐢佃瘽锛�</b>010-58800697</p>
+ <p class="block2 m0">鍖椾含璇昏�呮湇鍔￠儴鐢佃瘽锛�010-58808104</p>
+ <p class="block2 m0">澶栧煚閭喘鐢佃瘽锛�010-58808083</p>
+ <p class="block2 m0">
+ 鏈功濡傛湁鍗拌璐ㄩ噺闂锛� 璇蜂笌鍗板埗绠＄悊閮ㄨ仈绯昏皟鎹€��
+ </p>
+ <p class="block2 m0">鍗板埗绠＄悊閮ㄧ數璇濓細010-58805079</p>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "page-header",
+ props: {
+ showPageList: {
+ type: Array,
+ default: [],
+ },
+ data() {
+ return {
+ }
+ },
+ },
+};
+</script>
+
+<style lang="less" scoped>
+</style>
\ No newline at end of file
diff --git a/src/books/math/view/components/index.vue b/src/books/math/view/components/index.vue
new file mode 100644
index 0000000..bb50f45
--- /dev/null
+++ b/src/books/math/view/components/index.vue
@@ -0,0 +1,862 @@
+<template>
+ <div class="page-main" @scroll="throttledScrollHandler">
+ <div id="searchDomBox" style="display: none">
+ <div id="searchContent"></div>
+ </div>
+ <div
+ class="page-content"
+ :style="{
+ fontSize: fontSize ? fontSize + 'px' : '16px',
+ transform: `scale(${pageZoom ? pageZoom : 1})`,
+ transformOrigin: 'center top',
+ }"
+ >
+ <pageHeader
+ v-if="showCatalogList.indexOf(1) > -1"
+ :showPageList="loadPageList"
+ ></pageHeader>
+ <!-- <chapterOne
+ v-if="showCatalogList.indexOf(2) > -1"
+ :showPageList="loadPageList"
+ ></chapterOne>
+ <chapterTwo
+ v-if="showCatalogList.indexOf(3) > -1"
+ :showPageList="loadPageList"
+ >
+ </chapterTwo>
+ <chapterThree
+ v-if="showCatalogList.indexOf(4) > -1"
+ :showPageList="loadPageList"
+ ></chapterThree>
+ <chapterFour
+ v-if="showCatalogList.indexOf(5) > -1"
+ :showPageList="loadPageList"
+ ></chapterFour>
+ <chapterFive
+ v-if="showCatalogList.indexOf(6) > -1"
+ :showPageList="loadPageList"
+ ></chapterFive>
+ <chapterSix
+ v-if="showCatalogList.indexOf(7) > -1"
+ :showPageList="loadPageList"
+ ></chapterSix> -->
+ </div>
+
+ </div>
+</template>
+
+<script>
+import pageHeader from "./header.vue";
+// import chapterOne from "./chapter001.vue";
+// import chapterTwo from "./chapter002.vue";
+// import chapterThree from "./chapter003.vue"
+// import chapterFour from './chapter004.vue'
+// import chapterFive from './chapter005.vue'
+// import chapterSix from './chapter006.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 {
+ name:"pageContent",
+ data() {
+ return {
+ catalogLength: 7, // 鎬荤珷鑺傛暟
+ showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
+ loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
+ throttleThreshold: 100, // 鑺傛祦闃堝��
+ previousScrollTop: 0,
+ throttledScrollHandler: null,
+ observer: null,
+ loadPageObserver: null,
+ loadPageList: [],
+ questionDataMap: {},
+ renderSignMap: {},
+ highlightData: null,
+ };
+ },
+ 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);
+ },
+ },
+ pageZoom: {
+ handler(newVal, oldVal) {
+ const scrollBox = (
+ this.container ? this.container : document
+ ).querySelector(".page-main");
+ scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
+ },
+ },
+ },
+ 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);
+ },
+ // 鍏ㄦ枃妫�绱�
+ searchBookByKeyword: (keyword) => {
+ return this.searchTextByPage(keyword);
+ },
+ // 璺宠浆妫�绱㈢粨鏋滀綅缃�
+ jumpSearchItem: (data) => {
+ this.searchItemLocation(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);
+
+ // 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: {
+ // setZoom1() {
+ // let scale = this.$store.state.qiankun.scale + 10;
+ // const scrollBox = (
+ // this.container ? this.container : document
+ // ).querySelector(".page-main");
+ // this.$store.commit("setZoom", scale);
+ // },
+ // setZoom2() {
+ // let scale = this.$store.state.qiankun.scale - 10;
+ // const scrollBox = (
+ // this.container ? this.container : document
+ // ).querySelector(".page-main");
+ // this.$store.commit("setZoom", scale);
+ // },
+ // 婊氬姩鐩戝惉
+ 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) {
+ // 鐖跺眰璁剧疆绂佹娓叉煋鏍囪鏃朵笉鍐嶈繘琛屾覆鏌�
+ if (this.$store.state.qiankun.disableSign) {
+ return false;
+ }
+ 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) {
+ console.log(element, className, "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, 50);
+ }
+ // 杩斿洖椤电爜鍜岀珷鑺備俊鎭�
+ 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"
+ );
+ // 娣诲姞椤电爜
+ this.loadPageList.push(Number(page));
+ const catalog = catalogDom.getAttribute("num");
+ // if (!this.questionDataMap[page]) {
+ // if (testData && testData[catalog]) {
+ // if (testData[catalog][page]) {
+ // if (Array.isArray(testData[catalog][page])) {
+ // this.questionDataMap[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.questionDataMap[page] = obj;
+ // }
+ // console.log("棰樼洰", this.questionDataMap);
+ // }
+ // }
+ // }
+ // 娓叉煋杩欎竴椤电殑鏍囪
+ for (const key in this.renderSignMap) {
+ if (this.renderSignMap[key][page]) {
+ this.renderSignMap[key][page].forEach((item) => {
+ this.renderSign(key, item);
+ });
+ }
+ }
+ // 澶勭悊楂樹寒
+ if (this.highlightData) {
+ // 楂樹寒琛�
+ setTimeout(() => {
+ // 鑾峰彇椤甸潰鎵�鏈塼ext鑺傜偣
+ const pageTextList = document.createTreeWalker(target, 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(
+ this.highlightData.txt
+ );
+ if (txtIndex > -1) {
+ textDom.parentNode.style.transition =
+ "background-color 0.8s";
+ textDom.parentNode.scrollIntoView();
+ textDom.parentNode.style.backgroundColor = "#79bbf0";
+ setTimeout(() => {
+ textDom.parentNode.style.backgroundColor = "";
+ }, 1000);
+ }
+ }
+ }, 100);
+ }
+ 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, // 鏄剧ず鏍囬
+ });
+ }
+ },
+ // 鏍规嵁鍏抽敭瀛楀叏鏂囨绱�
+ searchTextByPage(keyword) {
+ const searchResult = [];
+ let catalogIndex = 0;
+ // 鎵�鏈夌珷鑺傜粍浠讹紙姣忔湰涔﹀埗浣滄椂鍗曠嫭閰嶇疆锛�
+ const pageData = {
+ pageHeader,
+ // chapterOne,
+ // chapterTwo,
+ // chapterThree,
+ // chapterFour,
+ // chapterFive,
+ // chapterSix,
+ };
+ // 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
+ for (const key in pageData) {
+ catalogIndex++;
+ let pageComponent, pageExample;
+ // 鍏堟覆鏌撲竴娆″綋鍓嶇珷鑺傛枃浠讹紙杩欐椂椤甸潰鐨勫唴瀹逛负绌猴級锛岃幏鍙栭〉鐮佷俊鎭�
+ pageComponent = Vue.extend(pageData[key]);
+ pageExample = new pageComponent({
+ propsData: {
+ showPageList: [],
+ questionData: {},
+ isSearch: true
+ },
+ });
+ 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: {},
+ isSearch: true
+ },
+ });
+ 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 = 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.highlightData = data;
+ // 璺宠浆
+ this.gotoPage(data.catalog, data.page, () => {});
+ },
+ },
+ components: {
+ pageHeader,
+ // chapterOne,
+ // chapterTwo,
+ // chapterThree,
+ // chapterFour,
+ // chapterFive,
+ // chapterSix,
+ },
+};
+</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/math/view/index.vue b/src/books/math/view/index.vue
new file mode 100644
index 0000000..a507376
--- /dev/null
+++ b/src/books/math/view/index.vue
@@ -0,0 +1,76 @@
+<template>
+ <div class="math-book" @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