From 0df037ea5a1ee04e35eb339ff1fcddf658e4901f Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期三, 22 五月 2024 11:03:25 +0800
Subject: [PATCH] 英语
---
src/books/English/assets/images/dy1-le1.jpg | 0
src/books/English/assets/images/0011-2.jpg | 0
src/assets/js/config.js | 2
vue.config.js | 4
src/books/English/assets/images/0012-4.jpg | 0
src/books/English/assets/images/0013-2.jpg | 0
src/books/English/assets/main.less | 648 ++++++++++++++++++++++++++++++
src/books/English/assets/images/0012-3.jpg | 0
src/books/embedded/assets/main.less | 5
src/books/English/assets/images/0018-1.jpg | 0
src/books/English/assets/images/SMY.jpg | 0
src/books/English/view/components/header.vue | 126 ++++++
src/books/English/assets/images/0013-1.jpg | 0
src/books/English/view/components/index.vue | 299 +++++++++++++
src/books/English/assets/images/0014-1.jpg | 0
src/books/English/assets/images/0012-2.jpg | 0
src/books/embedded/view/index.vue | 40 -
src/books/English/view/index.vue | 83 +++
src/books/embedded/view/components/header.vue | 4
src/books/English/assets/images/0012-5.jpg | 0
src/books/English/assets/images/dy1-wordbank.jpg | 0
src/books/English/assets/images/0012-6.jpg | 0
src/books/English/assets/images/0012-1.jpg | 0
src/App.vue | 3
src/books/English/assets/images/0013-3.jpg | 0
25 files changed, 1,154 insertions(+), 60 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index f24ca81..8d95a78 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,6 +3,7 @@
<childHealth v-if="activeBook.name == 'childHealth'"></childHealth>
<book v-if="activeBook.name == 'content'"></book>
<embedded v-if="activeBook.name == 'embedded'"></embedded>
+ <english v-if="activeBook.name == 'english'"></english>
</div>
</template>
@@ -10,6 +11,7 @@
import childHealth from "./books/childHealth/view/index.vue";
import book from "./books/content/index.vue";
import embedded from "./books/embedded/view/index.vue";
+import english from "./books/English/view/index.vue"
export default {
name: "App",
@@ -17,6 +19,7 @@
childHealth,
book,
embedded,
+ english
},
data() {
return {
diff --git a/src/assets/js/config.js b/src/assets/js/config.js
index a9ea822..5d22fd5 100644
--- a/src/assets/js/config.js
+++ b/src/assets/js/config.js
@@ -1,6 +1,6 @@
import axios from "axios";
export const requestCtx = "https://jsek.bnuic.com"; // 璇锋眰鍦板潃
-export const resourceCtx = "http://182.92.203.7:3007/books/resource/3"; // 璧勬簮璇锋眰鍦板潃
+export const resourceCtx = "http://182.92.203.7:3007/books/resource/4"; // 璧勬簮璇锋眰鍦板潃
export const publicCtx = "http://182.92.203.7:3007/books/book/1"; // 璧勬簮璇锋眰鍦板潃
export let activeBook = {}; // 璧勬簮璇锋眰鍦板潃
export let goodsStore = "";
diff --git a/src/books/English/assets/images/0011-2.jpg b/src/books/English/assets/images/0011-2.jpg
new file mode 100644
index 0000000..1d4aea3
--- /dev/null
+++ b/src/books/English/assets/images/0011-2.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0012-1.jpg b/src/books/English/assets/images/0012-1.jpg
new file mode 100644
index 0000000..b235e41
--- /dev/null
+++ b/src/books/English/assets/images/0012-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0012-2.jpg b/src/books/English/assets/images/0012-2.jpg
new file mode 100644
index 0000000..89510f3
--- /dev/null
+++ b/src/books/English/assets/images/0012-2.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0012-3.jpg b/src/books/English/assets/images/0012-3.jpg
new file mode 100644
index 0000000..92be353
--- /dev/null
+++ b/src/books/English/assets/images/0012-3.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0012-4.jpg b/src/books/English/assets/images/0012-4.jpg
new file mode 100644
index 0000000..abe2808
--- /dev/null
+++ b/src/books/English/assets/images/0012-4.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0012-5.jpg b/src/books/English/assets/images/0012-5.jpg
new file mode 100644
index 0000000..5f1eb9e
--- /dev/null
+++ b/src/books/English/assets/images/0012-5.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0012-6.jpg b/src/books/English/assets/images/0012-6.jpg
new file mode 100644
index 0000000..7d75900
--- /dev/null
+++ b/src/books/English/assets/images/0012-6.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0013-1.jpg b/src/books/English/assets/images/0013-1.jpg
new file mode 100644
index 0000000..bb555c3
--- /dev/null
+++ b/src/books/English/assets/images/0013-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0013-2.jpg b/src/books/English/assets/images/0013-2.jpg
new file mode 100644
index 0000000..5cef4df
--- /dev/null
+++ b/src/books/English/assets/images/0013-2.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0013-3.jpg b/src/books/English/assets/images/0013-3.jpg
new file mode 100644
index 0000000..8e6392a
--- /dev/null
+++ b/src/books/English/assets/images/0013-3.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0014-1.jpg b/src/books/English/assets/images/0014-1.jpg
new file mode 100644
index 0000000..0b1ca43
--- /dev/null
+++ b/src/books/English/assets/images/0014-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/0018-1.jpg b/src/books/English/assets/images/0018-1.jpg
new file mode 100644
index 0000000..484c60b
--- /dev/null
+++ b/src/books/English/assets/images/0018-1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/SMY.jpg b/src/books/English/assets/images/SMY.jpg
new file mode 100644
index 0000000..28e7bbc
--- /dev/null
+++ b/src/books/English/assets/images/SMY.jpg
Binary files differ
diff --git a/src/books/English/assets/images/dy1-le1.jpg b/src/books/English/assets/images/dy1-le1.jpg
new file mode 100644
index 0000000..bb26383
--- /dev/null
+++ b/src/books/English/assets/images/dy1-le1.jpg
Binary files differ
diff --git a/src/books/English/assets/images/dy1-wordbank.jpg b/src/books/English/assets/images/dy1-wordbank.jpg
new file mode 100644
index 0000000..4c80904
--- /dev/null
+++ b/src/books/English/assets/images/dy1-wordbank.jpg
Binary files differ
diff --git a/src/books/English/assets/main.less b/src/books/English/assets/main.less
index e69de29..ff47c23 100644
--- a/src/books/English/assets/main.less
+++ b/src/books/English/assets/main.less
@@ -0,0 +1,648 @@
+.english-book {
+ .ls1 {
+ font-family: "Times New Roman";
+ color: #30aad1;
+ font-weight: bold;
+ }
+ .hs {
+ font-family: "Times New Roman";
+ color: #ea6b00;
+ font-weight: bold;
+ }
+
+ .zs1 {
+ font-family: "Times New Roman";
+ color: #857eb4;
+ font-weight: bold;
+ }
+
+ span.under1 {
+ border-bottom: 2px solid #f0bd4a;
+ border-width: 2px;
+ }
+ div.bodystyle {
+ font-family: "Times New Roman", "瀹嬩綋";
+ 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-right {
+ font-family: "Times New Roman", "瀹嬩綋";
+ text-align: right;
+ font-size: 0.85em;
+ color: #5d78bb;
+ margin-left: 0%;
+ margin-right: 5%;
+ text-indent: 0em;
+ }
+
+ .img {
+ font-family: "Times New Roman", "瀹嬩綋";
+ text-align: center;
+ font-size: 0.8em;
+ color: #5d78bb;
+ margin-left: 0%;
+ margin-right: 0%;
+ text-indent: 0em;
+ }
+
+ .img1 {
+ font-family: "Times New Roman", "瀹嬩綋";
+ text-align: right;
+ font-size: 0.85em;
+ margin-left: 0%;
+ margin-right: 2em;
+ text-indent: 0em;
+ }
+
+ p {
+ margin-top: 1em;
+ 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: "Times New Roman", "瀹嬩綋";
+ 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: "Times New Roman", "瀹嬩綋";
+ 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: "Times New Roman", "瀹嬩綋";
+ text-align: center;
+ font-size: 2em;
+ margin-bottom: 0.5cm;
+ margin-top: 0.5cm;
+ }
+ h1.front {
+ font-family: "Times New Roman", "瀹嬩綋";
+ color: #b898c7;
+ text-align: center;
+ font-size: 1.8em;
+ margin-bottom: 0.5cm;
+ margin-top: 0.5cm;
+ }
+ h1.lefth1 {
+ font-family: "Times New Roman", "瀹嬩綋";
+ text-align: right;
+ font-size: 2em;
+ margin-bottom: 0.5cm;
+ margin-top: 0.5cm;
+ }
+
+ h2 {
+ font-family: "Times New Roman", "瀹嬩綋";
+ font-weight: bold;
+ font-size: 1.2em;
+ margin-top: 0.2em;
+ margin-bottom: 0.2em;
+ text-indent: 0em;
+ }
+
+ h3 {
+ font-family: "Times New Roman", "瀹嬩綋";
+ color: #5877ba;
+ font-weight: bold;
+ font-size: 1.15em;
+ margin-top: 2em;
+ text-align: left;
+ margin-bottom: 2em;
+ text-indent: 0em;
+ }
+
+ h3.lefth3 {
+ font-family: "Times New Roman", "瀹嬩綋";
+ color: #5877ba;
+ font-weight: bold;
+ font-size: 1.15em;
+ margin-top: 2em;
+ text-align: center;
+ margin-bottom: 2em;
+ text-indent: 0em;
+ text-align: left;
+ }
+
+ h4 {
+ font-family: "Times New Roman", "瀹嬩綋";
+ font-weight: bold;
+ color: #5877ba;
+ font-size: 1.1em;
+ margin-top: 0.2em;
+ margin-bottom: 1em;
+ text-indent: 0em;
+ }
+ h4.h4-zt {
+ font-family: "Times New Roman", "瀹嬩綋";
+ font-weight: bold;
+ color: #7bb4e3;
+ font-size: 1.1em;
+ margin-top: 0.2em;
+ margin-bottom: 1em;
+ text-indent: 0em;
+ }
+
+ h5 {
+ font-family: "Times New Roman", "瀹嬩綋";
+ font-weight: bold;
+ color: #c96653;
+ font-size: 1em;
+ margin-top: 0.2em;
+ margin-bottom: 1em;
+ text-indent: 2em;
+ }
+ h6 {
+ font-family: "cnepub", serif;
+ font-family: "Times New Roman", "瀹嬩綋";
+ 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: 20%;
+ }
+ .img-i {
+ width: 10%;
+ }
+ .img-j {
+ width: 5%;
+ }
+ .inline {
+ height: 1em;
+ margin-bottom: -0.3em;
+ }
+ .inline1 {
+ height: 1.9em;
+ margin-bottom: -0.4em;
+ }
+ .em_dot {
+ -webkit-text-emphasis-style: dot;
+ -moz-text-emphasis-style: dot;
+ -ms-text-emphasis-style: dot;
+ text-emphasis-style: dot;
+ -webkit-text-emphasis-position: under;
+ -moz-text-emphasis-position: under;
+ -ms-text-emphasis-position: under;
+ text-emphasis-position: under;
+ }
+
+ .fieldset {
+ border: 2px solid #5f5f5d;
+ font-size: 0.9em;
+ margin-left: 1.5em;
+ margin-right: 1.5em;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding: 0.3em 0.5em 0.3em 0.5em;
+ font-family: "Times New Roman", "瀹嬩綋";
+ }
+ .fieldset-2 {
+ border: 2px solid #e9a10e;
+ font-size: 0.9em;
+ margin-left: 3em;
+ margin-right: 3em;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding: 0.3em 0.5em 0.3em 0.5em;
+ font-family: "Times New Roman", "瀹嬩綋";
+ }
+ .fieldset-1 {
+ border: 3px dotted #3fb084;
+ font-size: 0.9em;
+ margin-left: 1em;
+ margin-right: 1em;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding: 0.3em 0.5em 0.3em 0.5em;
+ font-family: "Times New Roman", "瀹嬩綋";
+ }
+
+ .fieldset-3 {
+ border: 5px double #0da687;
+ background: #ebf5ec;
+ font-size: 0.9em;
+ margin-left: 1em;
+ margin-right: 1em;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding: 0.3em 0.5em 0.3em 0.5em;
+ font-family: "Times New Roman", "瀹嬩綋";
+ }
+ .fieldset-4 {
+ border: 5px double #e6a20f;
+ font-size: 0.9em;
+ margin-left: 1em;
+ margin-right: 1em;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding: 0.3em 0.5em 0.3em 0.5em;
+ font-family: "Times New Roman", "瀹嬩綋";
+ }
+
+ .fieldset-5 {
+ border: 5px double #e6a20f;
+ background: #f6ead0;
+ font-size: 0.9em;
+ margin-left: 2em;
+ margin-right: 2em;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding: 0.3em 0.5em 0.3em 0.5em;
+ font-family: "Times New Roman", "瀹嬩綋";
+ }
+
+ .fieldset-6 {
+ border: 5px double #02a381;
+ font-size: 0.9em;
+ margin-left: 1em;
+ margin-right: 1em;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding: 0.3em 0.5em 0.3em 0.5em;
+ font-family: "Times New Roman", "瀹嬩綋";
+ }
+
+ .fieldset-61 {
+ border: 5px dotted #d2dbc6;
+ background: #eaf4eb;
+ font-size: 0.9em;
+ margin-left: 2em;
+ margin-right: 2em;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding: 0.3em 0.5em 0.3em 0.5em;
+ font-family: "Times New Roman", "瀹嬩綋";
+ }
+ .fieldset-7 {
+ border: 5px solid #e8a20c;
+ background: #f6ead0;
+ font-size: 0.9em;
+ margin-left: 1em;
+ margin-right: 1em;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding: 0.3em 0.5em 0.3em 0.5em;
+ font-family: "Times New Roman", "瀹嬩綋";
+ }
+ .fieldset-8 {
+ border: 3px solid #e8a20c;
+ font-size: 0.9em;
+ margin-left: 1em;
+ margin-right: 1em;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding: 0.3em 0.5em 0.3em 0.5em;
+ font-family: "Times New Roman", "瀹嬩綋";
+ }
+
+ .fieldset-9 {
+ border: 5px dotted #01a4e9;
+ font-size: 0.9em;
+ margin-left: 1em;
+ margin-right: 1em;
+ margin-top: 1em;
+ margin-bottom: 1em;
+ padding: 0.3em 0.5em 0.3em 0.5em;
+ font-family: "Times New Roman", "瀹嬩綋";
+ }
+
+ span.linethrough {
+ text-decoration: line-through;
+ }
+
+ .border {
+ /*斯锟斤拷锟�-锟竭匡拷锟斤拷*/
+ border-width: 1px;
+ border-style: solid;
+ }
+
+ /* 鏂板鏍峰紡 */
+ .custom_title1 {
+ font-family: "Times New Roman", "瀹嬩綋";
+ background-color: rgb(125, 164, 64);
+ width: 70vw;
+ position: relative;
+ left: 50%;
+ transform: translateX(-50%);
+ color: #ffffff;
+ padding: 10px 0;
+ border-radius: 20px;
+ display: flex;
+ align-items: center;
+ font-size: 21px;
+ margin-bottom: 0.5cm;
+ margin-top: 0.5cm;
+ }
+ .title_icon {
+ width: 50px;
+ margin: 0 20px 0 15px;
+ }
+ .custom_chapter {
+ font-family: "Times New Roman", "瀹嬩綋";
+ color: rgb(108, 152, 65);
+ padding: 15px 10px;
+ background-color: rgb(202, 217, 180);
+ position: relative;
+ display: inline-block;
+ padding: 10px;
+ font-size: 19px;
+ left: 50%;
+ transform: translateX(-50%);
+ margin-bottom: 0.2cm;
+ margin-top: 0.2cm;
+ }
+ .custom_chapter::before {
+ font-family: "Times New Roman", "瀹嬩綋";
+ content: "";
+ width: 12px;
+ height: 60%;
+ background-color: rgb(125, 164, 64);
+ position: absolute;
+ left: -12px;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+ .custom_chapter::after {
+ font-family: "Times New Roman", "瀹嬩綋";
+ content: "";
+ width: 12px;
+ height: 60%;
+ background-color: rgb(125, 164, 64);
+ position: absolute;
+ right: -12px;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ .custom_title2 {
+ color: rgb(154, 106, 17);
+ background: url(image/xt.png) no-repeat;
+ background-size: 100% 100%;
+ display: inline-block;
+ padding: 18px;
+ font-size: 21px;
+ margin-bottom: 0.2cm;
+ margin-top: 0.2cm;
+ font-family: "Times New Roman", "瀹嬩綋";
+ }
+ .img-gn {
+ height: 1.6em;
+ margin-bottom: -0.4em;
+ }
+ .img-gn1 {
+ height: 2.5em;
+ margin-bottom: -0.4em;
+ }
+ .img-gn2 {
+ height: 2em;
+ margin-bottom: -0.5em;
+ }
+ .img-gn-zt {
+ height: 2.5em;
+ margin-bottom: -0.4em;
+ }
+
+ .div-img-h3 {
+ display: flex;
+ align-items: center;
+ }
+ .div-img-h3 h3 {
+ flex: 1;
+ }
+
+ .bold1 {
+ font-weight: bold;
+ font-size: 1.1em;
+ }
+
+ .lvz {
+ font-family: "Times New Roman", "瀹嬩綋";
+ color: #6eb92c;
+ font-weight: bold;
+ }
+ ul {
+ list-style-type: none;
+ }
+
+ li {
+ list-style-type: none;
+ }
+
+ p.hr {
+ padding: 0.3em;
+ line-height: 1.5em;
+ border-bottom: 1px solid #f49a4c;
+ }
+
+ .zt-ls {
+ color: #99b4df;
+ font-weight: bold;
+ }
+ .zt-cs {
+ color: #f5ae08;
+ font-weight: bold;
+ }
+
+ div.bk {
+ border: 3px dotted #f49a4c;
+ padding: 15px;
+ margin-bottom: 2em;
+ margin-top: 0.5em;
+ }
+
+ div.bk-11 {
+ border: 3px double #f49a4c;
+ border-radius: 2em;
+ padding: 15px;
+ margin-bottom: 2em;
+ margin-top: 0.5em;
+ }
+ div.bk-12 {
+ background: #1bada0;
+ color: #ffffff;
+ border-radius: 2em;
+ padding: 15px;
+ margin-bottom: 2em;
+ margin-top: 0.5em;
+ }
+ div.bk-13 {
+ border: 3px dashed #dddddd;
+ border-radius: 2em;
+ padding: 15px;
+ margin-bottom: 2em;
+ margin-top: 0.5em;
+ }
+ div.bk-14 {
+ border: 3px solid #e7a310;
+ padding: 15px;
+ margin-bottom: 2em;
+ margin-top: 0.5em;
+ }
+ .bjh3 {
+ border: 10px dotted #faeec6;
+ background: #0da785;
+ padding: 0.2em 0.4em 0.2em 0.4em;
+ color: #ffffff;
+ border-radius: 1em;
+ margin-top: -1em;
+ margin-left: 0.5em;
+ margin-right: 0.5em;
+ margin-bottom: -0.8em;
+ font-size: 1.1em;
+ font-weight: bold;
+ }
+
+ div.bkbj {
+ border: 1px dotted #e9f6fe;
+ background: #e9f6fe;
+ padding: -0.01em;
+ }
+
+ div.bj-note {
+ background: #fde2d1;
+ padding: 0.3em 0.5em 0.3em 0.5em;
+ }
+
+ div.bk-wh {
+ border: 3px dotted #f49a4c;
+ padding: 0.3em 0.5em 0.3em 0.5em;
+ margin-bottom: 2em;
+ margin-left: 2em;
+ margin-right: 2em;
+ border-radius: 1em;
+ margin-top: 0.5em;
+ }
+
+ div.dy1-bj4 {
+ background: #f8be6c;
+ padding: 0.01em 1em 0.01em 1em;
+ color: #000000;
+ margin-left: 0.2em;
+ margin-right: 0.2em;
+ margin-bottom: 0.2em;
+ margin-top: 0.5em;
+ font-size: 1.3em;
+ font-weight: bold;
+ }
+
+ div.dy1-bj5 {
+ background: #f6ead0;
+ padding: 0.01em 1em 0.01em 1em;
+ color: #000000;
+ margin-top: -1em;
+ font-size: 1.3em;
+ font-weight: bold;
+ margin-left: 0.2em;
+ margin-right: 0.2em;
+ }
+
+ div.un-h2 {
+ display: flex;
+ border-bottom: 10px double #0183bf;
+ align-items: center;
+ }
+}
diff --git a/src/books/English/view/components/header.vue b/src/books/English/view/components/header.vue
new file mode 100644
index 0000000..ea2dca7
--- /dev/null
+++ b/src/books/English/view/components/header.vue
@@ -0,0 +1,126 @@
+<template>
+ <div class="chapter" num="0">
+ <!-- 1 -->
+ <div class="page-box" page="1">
+ <p class="center"><img class="img-0" alt="" src="image/SMY.jpg" /></p>
+ </div>
+ <!-- 2 -->
+ <div class="page-box" page="2">
+ <div class="bodystyle">
+ <p><b>鍥句功鍦ㄧ増缂栫洰锛圕IP锛夋暟鎹�</b></p>
+ <p>
+ 鏂版爣鍑嗛�氱敤鑱屽満鑻辫锛氬熀纭�妯″潡涓�/鍒樺ぇ鍒╋紝缃楀繝鏄庯紝閭撳啲鑷充富缂�.鈥斿寳浜細鍖椾含甯堣寖澶у鍑虹増绀撅紝2023.9
+ </p>
+ <p>鏂版爣鍑嗛�氱敤鑱屽満鑻辫/鐜嬫湞鏅栨�讳富缂�</p>
+ <p>ISBN 978-7-303-29145-8</p>
+ <p>鈪�.鈶犳柊鈥� 鈪�.鈶犲垬鈥︹憽缃椻�︹憿閭撯�� 鈪�.鈶犺嫳璇�-楂樼瓑鑱屼笟鏁欒偛-鏁欐潗 鈪�.鈶燞319.39</p>
+ <p>涓浗鐗堟湰鍥句功棣咰IP鏁版嵁鏍稿瓧锛�2023锛夌092550鍙�</p>
+ <p><br /></p>
+ <p><br /></p>
+ <p><b>鍥句功鎰忚鍙嶉 gaozhifk@bnupg.com 010-58805079</b></p>
+ <p>钀ラ攢涓績鐢佃瘽 010-58802755 58800035</p>
+ <p><br /></p>
+ <p>鍑虹増鍙戣锛氬寳浜笀鑼冨ぇ瀛﹀嚭鐗堢ぞ www.bnup.com</p>
+ <p>銆�銆�銆�銆�銆�鍖椾含甯傝タ鍩庡尯鏂拌鍙ｅ澶ц12-3鍙�</p>
+ <p>銆�銆�銆�銆�銆�閭斂缂栫爜锛�100088</p>
+ <p>鍗般��銆�鍒凤細鍖椾含鐩涢�氬嵃鍒疯偂浠芥湁闄愬叕鍙�</p>
+ <p>缁忋��銆�閿�锛氬叏鍥芥柊鍗庝功搴�</p>
+ <p>寮�銆�銆�鏈細889mm脳1194mm 1/16</p>
+ <p>鍗般��銆�寮狅細10.25</p>
+ <p>瀛椼��銆�鏁帮細246鍗冨瓧</p>
+ <p>鐗堛��銆�娆★細2023骞�9鏈堢1鐗�</p>
+ <p>鍗般��銆�娆★細2023骞�9鏈堢1娆″嵃鍒�</p>
+ <p>瀹氥��銆�浠凤細48.80鍏�</p>
+ <p>绛栧垝缂栬緫锛氭槗鏂�</p>
+ <p>璐ｄ换缂栬緫锛氶檲鍊�</p>
+ <p>缇庢湳缂栬緫锛氶檲娑� 鐒︿附</p>
+ <p>瑁呭抚璁捐锛氶檲娑� 鐒︿附</p>
+ <p>璐ｄ换鏍″锛氶檲鑽�</p>
+ <p>璐ｄ换鍗板埗锛氶┈娲�</p>
+ <p class="center"><b>鐗堟潈鎵�鏈� 渚垫潈蹇呯┒</b></p>
+ <p class="center"><b>鍙嶇洍鐗堛�佷镜鏉冧妇鎶ョ數璇濓細</b>010-58800697</p>
+ <p class="block2">鍖椾含璇昏�呮湇鍔￠儴鐢佃瘽锛�010-58808104</p>
+ <p class="block2">澶栧煚閭喘鐢佃瘽锛�010-58808083</p>
+ <p class="block2">鏈功濡傛湁鍗拌璐ㄩ噺闂锛岃涓庡嵃鍒剁鐞嗛儴鑱旂郴璋冩崲銆�</p>
+ <p class="block2">鍗板埗绠＄悊閮ㄧ數璇濓細010-58808284</p>
+ </div>
+ </div>
+ <!-- 3 -->
+ <div class="page-box" page="3">
+ <div class="bodystyle">
+ <h1 id="a003" class="front">鍓嶈█</h1>
+ <p>
+ 銆婃柊鏍囧噯閫氱敤鑱屽満鑻辫銆嬬殑缂栧啓鍥㈤槦浠ュ厷鐨勬暀鑲叉柟閽堜负瀹楁棬锛岃疮褰诲厷鐨勪簩鍗佸ぇ鎶ュ憡绮剧锛屽鏍囥�婇珮绛夎亴涓氭暀鑲蹭笓绉戣嫳璇绋嬫爣鍑嗭紙2021骞寸増锛夈�嬶紝閬靛惊銆婇珮绛夊鏍¤绋嬫�濇斂寤鸿鎸囧绾茶銆嬬殑瑕佹眰锛屽弬鐓с�婁腑鍥借嫳璇兘鍔涚瓑绾ч噺琛ㄣ�嬪洓绾у拰浜旂骇鑳藉姏瑕佹眰锛岀珛瓒抽珮鑱岃嫳璇暀瀛﹀疄闄咃紝杩涜璁捐鍜岀紪鍐欙紝鏃㈡敞閲嶆彁鍗囧鐢熺殑鏍稿績绱犲吇銆佷績杩涙櫘鑱岃瀺閫氾紝鍙堝叏鏂逛綅铻嶅叆璇剧▼鎬濇斂锛岃惤瀹炵珛寰锋爲浜烘牴鏈换鍔°��
+ </p>
+ <p class="center"><b>涓�銆佹暀鏉愮紪鍐欑悊蹇�</b></p>
+ <p><span class="kaiti">1.鍏ㄩ潰璐交钀藉疄鏂拌绋嬫爣鍑嗚姹�</span></p>
+ <p>
+ 銆婃柊鏍囧噯閫氱敤鑱屽満鑻辫銆嬬郴鍒楁暀鏉愬叏闈㈠鏍囥�婇珮绛夎亴涓氭暀鑲蹭笓绉戣嫳璇绋嬫爣鍑嗭紙2021骞寸増锛夈�嬶紝鍏呭垎绐佸嚭楂樿亴鑻辫璇剧▼鐨勬�濇兂鎬с�佺瀛︽�с�佽亴涓氭�с�佹椂浠ｆ�э紝鍏虫敞鍚勫娈电殑琛旀帴鎬э紝瀹炵幇浠峰�煎紩棰嗭紝鍩瑰吇瀛︾敓鐨勫繀澶囪兘鍔涘拰鍏抽敭鑳藉姏銆�
+ </p>
+ <p>
+ <span class="kaiti">2.鍏ㄧ▼铻嶅叆璇剧▼鎬濇斂锛屽桨鏄捐瑷�璇剧▼鐨勮偛浜哄姛鑳�</span>
+ </p>
+ <p>
+ 鏁欐潗浠庡崟鍏冧富棰樸�佺礌鏉愰�夊彇銆佺粌涔犺缃瓑鍚勬柟闈㈢患鍚堣璁★紝绱у瘑鑱旂郴涓浗绀句細鍜屾枃鍖栵紝寮樻壃姝ｈ兘閲忋�傚湪鎻愬崌瀛︾敓鏍稿績绱犲吇鐨勫悓鏃讹紝寮曞瀛︾敓鍏虫敞绀句細锛屽叧娉ㄤ粬浜猴紝娼滅Щ榛樺寲鍦板煿鍏诲鐢熺殑瀹跺浗鎯呮��鍜屼汉鏂囩礌鍏伙紝澧炲己瀛︾敓鍦ㄥ鍏冩枃鍖栦氦娴佺幆澧冧腑璁茶堪涓浗鏁呬簨鍜屾帹浠嬩腑鍥芥枃鍖栫殑鑳藉姏銆傛暀鏉愪互鈥滅珛寰锋爲浜衡�濅负鏍规湰浠诲姟锛岀珛瓒虫柊鏃朵唬涓浗鑱屼笟鏁欒偛澶ц儗鏅紝浠ヨ亴涓氫负鍏抽敭璇嶏紝閫夊彇鑱屼笟涓庝釜浜恒�佽亴涓氫笌绀句細銆佽亴涓氫笌鐜涓婚鐨勮瑷�鏉愭枡锛屽湪鍔╁姏璇█鏁欏鐨勫悓鏃讹紝寮曞瀛︾敓璐＄尞绀句細銆佸叧蹇冪ぞ浼氥�佺埍宀楁暚涓氾紝瀹炵幇鍏叡鑻辫璇剧▼鍩规牴閾搁瓊銆佸惎鏅哄鎱х殑鍔熻兘锛屼績杩涘鐢熷叏闈㈠彂灞曘��
+ </p>
+ <p><span class="kaiti">3.鍩轰簬浜у嚭瀵煎悜鐞嗗康锛屽疄鏂介」鐩寲鏁欏</span></p>
+ <p>
+ 鏁欐潗鍩轰簬浜у嚭瀵煎悜鐨勭悊蹇碉紝鎵撶牬浼犵粺鍚�佽銆佽銆佸啓鍒嗘澘鍧楃紪鍐欑殑浣撲緥锛岃繘琛屼竴鍗曞厓涓�椤圭洰鐨勯」鐩寲鏁欏璁捐锛岀患鍚堣繍鐢ㄥ惉銆佽銆佽銆佸啓銆佺湅绛夊绉嶈瑷�鎶�鑳藉拰铻嶅獟浣撴墜娈碉紝鎼缓璇█鏀灦锛屽眰灞傞�掕繘锛岀幆鐜浉鎵ｏ紝鍔╁姏瀛︾敓鏈�缁堝畬鎴愬崟鍏冮」鐩换鍔°��
+ </p>
+ <p><span class="kaiti">4.婊¤冻鏁欎笌瀛︾殑澶氬厓闇�姹�</span></p>
+ <p>
+ 楂樿亴鎵╂嫑涔嬪悗锛屽鐢熷憟澶氬厓鍖栧眰绾х粨鏋勶紝瀵瑰涔犵殑闇�姹備篃鍙樺緱澶氬厓鍖栥�傛湰濂楁暀鏉愶紝鍩轰簬楂樿亴瀛︾敓鍏叡鑻辫璇剧▼鐨勭幇鐘惰皟鐮旓紝鑱氱劍鏁欏鍐呭銆佹暀瀛︽椿鍔ㄣ�佹暀瀛︽ā寮忕瓑鏂归潰锛岀潃鍔涘紑鍙戞柊褰㈡�佹暀鏉愬拰鐩稿叧璧勬簮锛屾弧瓒抽珮鑱岄櫌鏍″鐢熺殑澶氱瀛︿範闇�姹傘��
+ </p>
+ <p class="center"><b>浜屻�佹暀鏉愪綋绯昏璁�</b></p>
+ <p><span class="kaiti">1.椤圭洰涓哄鍚戠殑鍗曞厓璁捐</span></p>
+ <p>
+ 姣忎釜鍗曞厓鍖呭惈涓変釜瀛愰」鐩�傝緭鍏ユ潗鏂欑敱娴呭叆娣憋紝浠庤瑷�銆佸唴瀹广�佺粨鏋勪笂閫愭笎鎼缓鏀灦锛屽紩棰嗗鐢熸湁閽堝鎬у湴鎺㈢储銆佸涔狅紝鏈�缁堝畬鎴愬崟鍏冮」鐩��
+ </p>
+ <p><span class="kaiti">2.鑱屽満涓哄鍚戠殑鎯呭璁剧疆</span></p>
+ <p>
+ 灏嗗崟鍏冮」鐩瀺鍏ヨ亴鍦烘儏澧冿紝缁撳悎琛屼笟鍜屼紒涓氬楂樿亴瀛︾敓璇█鎶�鑳界殑瑕佹眰锛屼粠姹傝亴搴旇仒銆佺敓浜ф湇鍔°�佽惀閿�鍞悗绛夊吀鍨嬭亴涓氬満鏅鍒掕瑷�瀛︿範鍐呭锛屽垱璁惧涔犳儏澧冨拰鍏蜂綋瀛︿範浠诲姟锛屽煿鍏诲鐢熷湪鑱屽満鐜涓敤鑻辫杩涜娌熼�氱殑鑳藉姏鍙婅В鍐宠亴鍦洪棶棰樼殑鑳藉姏銆�
+ </p>
+ <p><span class="kaiti">3.娣峰悎寮忓涔犱负瀵煎悜鐨勬暀瀛︽ā寮�</span></p>
+ <p>
+ 渚濇墭鍖楀笀澶р�滀含甯堜箰瀛︹�濆拰鈥滀含甯圗璇锯�濆钩鍙帮紝寮�鍙戜笌鏁欐潗娣卞害铻嶅悎鐨勭Щ鍔ㄦ暟瀛楃骇鍒涙柊鎱曡骞冲彴銆傛暟瀛楄绋嬪寘鍚棰戝井璇俱�佸湪绾跨粌涔犮�佷簰鍔ㄨ璁虹瓑锛屼笌鏁欐潗鏈夋満缁撳悎锛岀浉浜掍緷鎵樸�傜嚎涓婄嚎涓嬫繁搴﹁瀺鍚堬紝璧嬭兘鏁欏銆�
+ </p>
+ <p class="center"><b>涓夈�佹暀鏉愮壒鑹�</b></p>
+ <p>1.绱ф墸鏂拌鏍囪姹傦紝绐佸嚭瀛︾敓鏍稿績绱犲吇鍩瑰吇锛岃惤瀹炵珛寰锋爲浜烘牴鏈换鍔�</p>
+ <p>
+ 鍩轰簬瀛︾敓鐜版湁鐨勮嫳璇按骞冲拰鏈潵鐨勫伐浣滈渶姹傦紝閽堝鍩虹妯″潡璇剧▼锛岀粨鍚堣亴鍦烘儏澧冭璁′换鍔★紝閫氳繃澶氭ā鎬佽绡囧拰涓嶅悓绫诲瀷浣撹鐨勫涔犵礌鏉愶紝澶疄瀛︾敓鐨勫惉銆佽銆佽銆佸啓銆佽瘧銆佺湅绛夋妧鑳斤紝鎻愰珮瀛︾敓鐨勮亴鍦烘秹澶栨矡閫氳兘鍔涳紝寮�鎷撳鐢熺殑鍥介檯瑙嗛噹銆傚崟鍏冮」鐩缃仛鐒︽�濊鲸鍜屽垱鏂版�濈淮璁粌锛屾棬鍦ㄦ彁鍗囧鐢熺殑璇█鎬濈淮鑳藉姏锛屼娇鍏跺吇鎴愬杽浜庢帰绌剁殑鎬濈淮鍝佹牸銆傝嚜鎴戣瘎浼扮幆鑺傛棬鍦ㄦ娴嬪鐢熺殑瀛︿範鏁堟灉锛屼娇鍏堕�傛椂璋冩暣瀛︿範绛栫暐锛屼績杩涜嚜涓诲鑳界殑鎻愬崌銆�
+ </p>
+ <p>
+ <span class="kaiti">2.杩愮敤淇℃伅鎶�鏈紝寤鸿铻嶅獟浣撹祫婧愶紝璧嬭兘鏁欏</span>
+ </p>
+ <p>
+ 鍦ㄩ伒寰瑷�涔犲緱瑙勫緥鐨勫熀纭�涓婏紝鎺㈢┒灏嗕紶缁熺焊璐ㄦ暀鏉愯瀺鍏ヤ赴瀵岀殑铻嶅獟浣撴暀瀛﹁祫婧愮殑璺緞涓庢柟娉曪紝鍏呭垎鍒╃敤鐜颁唬鍖栫殑鏁欏鎵嬫鍜屽嚭鐗堢ぞ鐨勪俊鎭寲骞冲彴锛屽厠鏈嶄紶缁熸暀鏉愮煡璇嗗閲忔湁闄愩�佸唴瀹规洿鏂板懆鏈熸參銆佸浘鏂囧舰寮忓崟涓�銆佺己涔忎笌瀛︾敓鐨勪簰鍔ㄥ拰鍙嶉绛夌殑灞�闄愭�э紝閽堝褰撲唬瀛︾敓渚濊禆浜掕仈缃戙�佹敞閲嶉槄璇讳綋楠屻�佹劅鐭ュ拰鎺ュ彈鏂颁簨鐗╄兘鍔涘己鐨勭壒鐐癸紝鏇存柊鏁欐潗鍐呭鍜屽憟鐜板舰寮忥紝搴旂敤淇℃伅鎶�鏈拰璧勬簮锛屽舰鎴愨�滅焊璐ㄦ暀鏉�+寰鍫�+浜戣祫婧愨��
+ 绛夎瀺濯掍綋鏁欏璧勬簮鐨勭嚎涓婄嚎涓嬫暀瀛︽柊褰㈡�侊紝婊¤冻瀛︾敓纰庣墖鍖栧涔犮�佽嚜涓诲涔犮�佷釜鎬у寲瀛︿範鐨勯渶姹傦紝澧炲姞瀛︾敓鐨勫弬涓庡害锛屼粠鑰屾彁楂樺鐢熺殑瀛︿範鏁堢巼銆�
+ </p>
+ <p class="center"><b>鍥涖�佹暀鏉愬垱鏂�</b></p>
+ <p><span class="kaiti">1.椤圭洰瀵煎悜锛屼换鍔″垱璁炬儏澧冨寲</span></p>
+ <p>
+ 鏁欐潗缂栧啓鍥㈤槦绱ф墸鏂拌鏍囦富棰樼被鍒瘽棰樿姹傦紝浠ュ眰灞傞�掕繘鐨勯」鐩寲浠诲姟涓哄紩棰嗭紝閫氳繃寮曞瀛︾敓瀹屾垚绮惧績璁捐鐨勬儏澧冭瑷�浠诲姟锛屽府鍔╁鐢熷叏闈㈠涔犲苟鎺屾彙涓庝富棰樺拰鎯呭鐩稿叧鐨勮瑷�鏂囧寲鐭ヨ瘑锛屾彁楂樺鐢熺殑璇█娌熼�氫氦娴佽兘鍔涖��
+ </p>
+ <p><span class="kaiti">2.瀛︾敤缁撳悎锛岃兘鍔涘煿鍏荤郴缁熷寲</span></p>
+ <p>
+ 鏁欐潗閲囩敤绯荤粺鍖栫殑鏁欏璁捐锛屼互鍙戝睍瀛︾敓鐨勬牳蹇冪礌鍏讳负鏍稿績锛屽皢瀛︾敤缁撳悎鐨勫師鍒欒疮绌挎暀瀛︽椿鍔ㄥ叏杩囩▼锛岃瀛︾敓涔犲緱鐨勬妧鑳芥湁鐢ㄦ涔嬪湴銆�
+ </p>
+ <p class="center"><b>浜斻�佺紪鍐欓槦浼�</b></p>
+ <p>
+ 銆婃柊鏍囧噯閫氱敤鑱屽満鑻辫銆嬬郴鍒楁暀鏉愮敱鎴愰兘绾虹粐楂樼瓑涓撶瀛︽牎鐨勭帇鏈濇櫀鎷呬换鎬讳富缂栵紝鐢卞洓宸濇枃杞╄亴涓氬闄㈢殑鍒樺ぇ鍒┿�佸洓宸濆缓绛戣亴涓氭妧鏈闄㈢殑缃楀繝鏄庡拰閭撳啲鑷虫媴浠讳富缂栵紝鏈唽鐢辨垚閮界汉缁囬珮绛変笓绉戝鏍＄殑璐句附钀嶃�佹垚閮借亴涓氭妧鏈闄㈢殑鍒樻捣鐕曘�佸洓宸濆紑鏀惧ぇ瀛︾殑渚功鍗庢媴浠诲壇涓荤紪銆傚叿浣撶紪鍐欎汉鍛樺潎涓哄骞翠粠浜嬮珮鑱屽叕鍏辫嫳璇暀瀛︿笌鐮旂┒鐨勯鍐涗汉鐗┿�侀骞叉暀甯堛�佸弻甯堝瀷绱犺川鏁欏笀銆傜紪鍐欏洟闃熸暀瀛︺�佺鐞嗙粡楠屼赴瀵岋紝鐔熸倝璇█鏁欏瑙勫緥锛屼簡瑙ｈ亴涓氭暀鑲茬悊蹇碉紝鍏虫敞鑱屼笟鏁欒偛鏁欏鐨勬斂绛栧拰鍔ㄦ�侊紝纭繚浜嗘湰濂楁暀鏉愮殑缂栧啓璐ㄩ噺銆�
+ </p>
+ <p>
+ 鍥夸簬姘村钩锛屾暀鏉愮枏婕忎箣澶勯毦鍏嶃�傛垜浠湡璇氭杩庝笓瀹躲�佸笀鐢熷鏁欐潗鎻愬嚭瀹濊吹鎰忚鍜屽缓璁紝浠ヤ究鎴戜滑鍔ㄦ�佸畬鍠勬暀鏉愶紝鏇村ソ鍦版湇鍔￠珮鑱屽璇暀鑲叉暀瀛︼紝鏈嶅姟骞垮ぇ甯堢敓銆�
+ </p>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+export default {
+ name: "page-header",
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/books/English/view/components/index.vue b/src/books/English/view/components/index.vue
index 83ed5bf..4813604 100644
--- a/src/books/English/view/components/index.vue
+++ b/src/books/English/view/components/index.vue
@@ -1,15 +1,300 @@
<template>
- <div>
-
+ <div class="page-main" @scroll="throttledScrollHandler">
+ <div class="page-content">
+ <pageHeader></pageHeader>
+ <chapterOne></chapterOne>
+ </div>
</div>
</template>
<script>
- export default {
- name:'pageContent'
- }
+import pageHeader from './header.vue'
+import chapterOne from './chapter001.vue'
+export default {
+ name: "pageContent",
+ components:{pageHeader,chapterOne},
+ data() {
+ return {
+ catalogLength: 2, // 鎬荤珷鑺傛暟
+ showCatalogList: [], // 鏄剧ず鐨勭珷鑺�
+ loadThreshold: 300, // 瑙﹀彂鍔犺浇闃堝��
+ throttleThreshold: 100, // 鑺傛祦闃堝��
+ previousScrollTop: 0,
+ throttledScrollHandler: null,
+ observer: null,
+ };
+ },
+ 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();
+ }, 500);
+ },
+ },
+ },
+ mounted() {
+ // 榛樿鍔犺浇绔犺妭
+ this.showCatalogList = [0, 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.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锛岃〃绀哄綋鐩爣鍏冪礌涓�鍗婃垨鏇村鏄剧ず鍦ㄨ绐椾腑鏃惰Е鍙戝洖璋冨嚱鏁般��
+ });
+
+ // 鍚姩椤电爜瑙傚療
+ setTimeout(() => {
+ this.initObservation();
+ }, 500);
+
+ // 娴嬭瘯椤甸潰璺宠浆
+ // setTimeout(() => {
+ // this.gotoPage(5, 100);
+ // setTimeout(() => {
+ // this.renderSign("Note", {
+ // id: "2ACA9359",
+ // txt: "钀ュ吇绱犲拰鐑噺锛屾墠鑳�",
+ // page: "100",
+ // type: "Highlight",
+ // color: "#F5E12A"
+ // });
+ // setTimeout(() => {
+ // this.delSign({
+ // ids: ["2ACA9359"]
+ // });
+ // }, 2000);
+ // }, 1000);
+ // }, 3000);
+ },
+ 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("绔犺妭閿欒锛�");
+ }
+ },
+ // 娓叉煋鏍囪
+ 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}"]`);
+ let reg = new RegExp(`${data.txt}`, "ig");
+ switch (type) {
+ case "Highlight":
+ // 楂樹寒
+ pageDom.innerHTML = pageDom.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":
+ // 鍒掔嚎
+ pageDom.innerHTML = pageDom.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":
+ // 绗旇
+ pageDom.innerHTML = pageDom.innerHTML.replace(
+ reg,
+ `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')">${data.txt}<img src="${NoteIcon}" style="cursor: pointer" /></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");
+ //observer 瑙傚療姣忎釜鍏冪礌锛屼互渚垮湪瀹冧滑杩涘叆鎴栫寮�瑙嗙獥鏃惰Е鍙戝洖璋冨嚱鏁般��
+ sections.forEach((section) => {
+ const isObserver = section.getAttribute("observer");
+ if (!isObserver) {
+ this.observer.observe(section);
+ section.setAttribute("observer", "1");
+ }
+ });
+ },
+ 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");
+ console.log("page", page, catalog);
+ // 杩斿洖椤电爜鍜岀珷鑺備俊鎭�
+ if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
+ this.$store.state.qiankun.pageChange({
+ page: page,
+ catalog: catalog,
+ });
+ // const sections = Array.from(document.querySelectorAll(".section"));
+ //sections锛氳幏鍙栨墍鏈夊叿鏈� .section 绫诲悕鐨勫厓绱狅紝骞惰浆鎹负鏁扮粍銆�
+ // let index = sections.findIndex((section) => section === target) + 1;
+ //index锛氭煡鎵惧綋鍓嶇洰鏍囧厓绱犲湪 sections 鏁扮粍涓殑绱㈠紩锛屽苟鍔� 1锛岀敤浜庣‘瀹氬綋鍓嶉〉鐮併��
+ }
+ });
+ },
+ },
+};
</script>
<style lang="less" scoped>
-
-</style>
\ No newline at end of file
+.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/English/view/index.vue b/src/books/English/view/index.vue
index 487bb80..2777634 100644
--- a/src/books/English/view/index.vue
+++ b/src/books/English/view/index.vue
@@ -1,15 +1,82 @@
<template>
- <div class="english-book">
-
+ <div
+ class="english-book"
+ @mouseup="handleMouseUp"
+ :style="{
+ fontSize: fontSize ? fontSize + 'px' : '16px',
+ transform: `scale(${pageZoom ? pageZoom : 1})`,
+ }"
+ >
+ <pageContent></pageContent>
</div>
</template>
<script>
- export default {
- name:'english-book'
- }
+import pageContent from "./components/index.vue";
+export default {
+ name: "english-book",
+ components: { pageContent },
+ computed: {
+ fontSize() {
+ return this.$store.state.qiankun.fontSize;
+ },
+ pageZoom() {
+ return this.$store.state.qiankun.scale / 100;
+ },
+ },
+ 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" scoped>
-
-</style>
\ No newline at end of file
+<style lang="less" scoped></style>
diff --git a/src/books/embedded/assets/main.less b/src/books/embedded/assets/main.less
index 815a2cf..01cf278 100644
--- a/src/books/embedded/assets/main.less
+++ b/src/books/embedded/assets/main.less
@@ -781,6 +781,11 @@
.tl-cn {
text-align: center;
}
+ .cover-box {
+ width: 815px;
+ height: 1125px;
+ object-fit: contain;
+ }
}
body {
background-color: #e6e6e6;
diff --git a/src/books/embedded/view/components/header.vue b/src/books/embedded/view/components/header.vue
index 7efe13c..1af85b5 100644
--- a/src/books/embedded/view/components/header.vue
+++ b/src/books/embedded/view/components/header.vue
@@ -3,7 +3,7 @@
<!-- 灏侀潰 -->
<div class="page-box" page="1">
<h1 class="frontCover" title="灏侀潰">
- <img alt="灏侀潰" src="../../assets/images/device_phone_Frontcover.jpg" />
+ <img alt="灏侀潰" src="../../assets/images/device_phone_Frontcover.jpg" class="cover-box" />
</h1>
</div>
<!-- 浣滆�呯畝浠� -->
@@ -31,7 +31,7 @@
<!-- 灏侀潰 -->
<div class="page-box" page="3">
<h1 class="frontCover" title="灏侀潰">
- <img alt="灏侀潰" src="../../assets/images/device_phone_Frontcover.jpg" />
+ <img alt="灏侀潰" src="../../assets/images/device_phone_Frontcover.jpg" class="cover-box">
</h1>
</div>
<!-- 鍐呭绠�浠� -->
diff --git a/src/books/embedded/view/index.vue b/src/books/embedded/view/index.vue
index d298a9c..07d96f6 100644
--- a/src/books/embedded/view/index.vue
+++ b/src/books/embedded/view/index.vue
@@ -38,46 +38,6 @@
mounted() {
},
methods: {
- getBookInfo() {
- let query = {
- path: "*",
- queryType: "*",
- productId: this.config.bookId,
- favoriteTypes: "FavoriteBookCity",
- itemFields: {
- "SysType=": "CmsFolder",
- },
- coverSize: {
- height: 300,
- },
- fields: {
- seriesName: [],
- author: [],
- isbn: [],
- publicationDate: [],
- bookClassification: [],
- paperPrice: [],
- JDLink: [],
- tmallLink: [],
- dangdangLink: [],
- weidianLink: [],
- content: [],
- authorIntroduction: [],
- // isApplyPaperBook: [],
- // isApplyEBook: [],
- isApplyBook: [],
- isSell: [],
- pdf: [],
- protectedEpub: [],
- probationPage: [], //pdf璇曡椤垫暟
- freeEpubPage: [], //epub璇曡鐧惧垎姣�
- },
- };
- this.MG.store.getProductDetail(query).then((res) => {
- this.$data.bookData = res.datas;
- this.$store.commit("setRootCmsItemId", res.datas.rootCmsItemId);
- });
- },
getParentWithClass(element, className) {
while (element.parentElement) {
element = element.parentElement;
diff --git a/vue.config.js b/vue.config.js
index 805e9d9..8d76185 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -2,8 +2,8 @@
// import {publicCtx} from '@/assets/js/config'
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
- publicPath: 'http://182.92.203.7:3007/books/book/3',
- // publicPath:'/books/book/1',
+ // publicPath: 'http://182.92.203.7:3007/books/book/3',
+ publicPath:'/books/book/1',
transpileDependencies: true,
lintOnSave: false,
// devServer: {
--
Gitblit v1.9.1