From f77e02b69e4512f00251929b14888f3e6bbac37f Mon Sep 17 00:00:00 2001
From: zhongshujie <2862698242@qq.com>
Date: 星期一, 09 九月 2024 10:41:19 +0800
Subject: [PATCH] 艺术戏剧（bug解决）
---
src/books/artAndDrama/view/components/chapter005.vue | 19
src/books/artAndDrama/assets/images/unit4-header-img.png | 0
src/books/artAndDrama/view/components/chapter003.vue | 98 ++-
src/books/artAndDrama/assets/images/fengdi.png | 0
src/components/dragQuestion/index.vue | 4
src/books/artAndDrama/assets/images/unit3-header-img.png | 0
src/books/artAndDrama/view/components/chapter004.vue | 60 +-
src/books/artAndDrama/assets/images/unit5-header-img.png | 0
src/books/artAndDrama/view/components/header.vue | 14
src/books/artAndDrama/assets/main.less | 1032 ++++++++++++++++++++++++--------------------
src/books/artAndDrama/assets/images/header-green.png | 0
src/books/artAndDrama/view/components/chapter002.vue | 44
src/books/artAndDrama/view/components/chapter001.vue | 54 +-
src/books/artAndDrama/assets/images/page6-header-green.png | 0
src/books/artAndDrama/assets/images/unit2-header-img.png | 0
src/components/paint/index.vue | 2
src/App.vue | 4
src/books/artAndDrama/view/components/index.vue | 2
18 files changed, 738 insertions(+), 595 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index b1f30bd..1d19255 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,5 @@
<template>
<div id="app">
-
<childHealth v-if="activeBook.name == 'childHealth'"></childHealth>
<lifeCare v-if="activeBook.name == 'lifeCare'"></lifeCare>
<embedded v-if="activeBook.name == 'embedded'"></embedded>
@@ -24,6 +23,7 @@
artAndDance: () => import("./books/artAndDance/view/index.vue"),
mathBook: () => import("./books/mathBook/view/index.vue"),
artAndDrama: () => import("./books/artAndDrama/view/index.vue")
+
},
data() {
return {
@@ -67,7 +67,7 @@
process.env.VUE_APP_RESOURCE_CTX +
(process.env.VUE_APP_ENV == "product"
? process.env.VUE_APP_BOOK_ID
- : "artAndDance")
+ : "artAndDrama")
);
// 娴嬭瘯璇曡30椤�
// this.activeBook.tryPageCount = 10;
diff --git a/src/books/artAndDrama/assets/images/fengdi.png b/src/books/artAndDrama/assets/images/fengdi.png
new file mode 100644
index 0000000..6c23a20
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/fengdi.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/header-green.png b/src/books/artAndDrama/assets/images/header-green.png
index 69e012e..182f7d9 100644
--- a/src/books/artAndDrama/assets/images/header-green.png
+++ b/src/books/artAndDrama/assets/images/header-green.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/page6-header-green.png b/src/books/artAndDrama/assets/images/page6-header-green.png
index 16db856..4ba1598 100644
--- a/src/books/artAndDrama/assets/images/page6-header-green.png
+++ b/src/books/artAndDrama/assets/images/page6-header-green.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/unit2-header-img.png b/src/books/artAndDrama/assets/images/unit2-header-img.png
index a454827..d6883e4 100644
--- a/src/books/artAndDrama/assets/images/unit2-header-img.png
+++ b/src/books/artAndDrama/assets/images/unit2-header-img.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/unit3-header-img.png b/src/books/artAndDrama/assets/images/unit3-header-img.png
index 229cc52..1e0890f 100644
--- a/src/books/artAndDrama/assets/images/unit3-header-img.png
+++ b/src/books/artAndDrama/assets/images/unit3-header-img.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/unit4-header-img.png b/src/books/artAndDrama/assets/images/unit4-header-img.png
index a4cc696..26574d1 100644
--- a/src/books/artAndDrama/assets/images/unit4-header-img.png
+++ b/src/books/artAndDrama/assets/images/unit4-header-img.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/images/unit5-header-img.png b/src/books/artAndDrama/assets/images/unit5-header-img.png
index 48f15f1..f475719 100644
--- a/src/books/artAndDrama/assets/images/unit5-header-img.png
+++ b/src/books/artAndDrama/assets/images/unit5-header-img.png
Binary files differ
diff --git a/src/books/artAndDrama/assets/main.less b/src/books/artAndDrama/assets/main.less
index 56a070f..6f0393a 100644
--- a/src/books/artAndDrama/assets/main.less
+++ b/src/books/artAndDrama/assets/main.less
@@ -1,414 +1,463 @@
.ans-drama {
- width: 100%;
- height: 100%;
- font-family: "瀹嬩綋","STKaiti", SimSun, sans-serif;
-span.un1{
- -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;
-}
+ width: 100%;
+ height: 100%;
+ font-family: "瀹嬩綋", "STKaiti", SimSun, sans-serif;
+ span.un1 {
+ -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;
+ }
+
+ // audio{
+ // width: 300px;
+ // height: 54px;
+ // }
+
+ .rhombusFather {
+ position: relative;
+ text-indent: 3em;
+ }
+ .rhombus {
+ position: absolute;
+ left: -23px;
+ }
+ .rhombuSpecial {
+ position: absolute;
+ left: -23px;
+
+ }
ul {
- list-style-type:none;
+ list-style-type: none;
}
li {
- list-style-type:none;
+ list-style-type: none;
}
-.ls1{
- font-family:"HiFont Hei GB";
- color:#30AAD1;
- font-weight:bold;
-}
-.hs{
- color:#B0441D;
-}
-.hs1{
- color:#E78D2D;
- font-weight:bold;
-}
-.zs1{
- font-family:"HiFont Hei GB";
- color:#857EB4;
- font-weight:bold;
-}
+ .ls1 {
+ font-family: "HiFont Hei GB";
+ color: #30AAD1;
+ font-weight: bold;
+ }
-span.under1{
- border-bottom:2px solid #F0BD4A;
- border-width:2px;
+ .hs {
+ color: #B0441D;
+ }
-}
+ .hs1 {
+ font-size: 40px;
+ color: #E78D2D;
+ font-weight: bold;
+ }
-div.bodystyle {
- text-align:justify;
- margin:0 12%;
- line-height:30px;
+ .zs1 {
+ font-family: "HiFont Hei GB";
+ color: #857EB4;
+ font-weight: bold;
+ }
-}
+ span.under1 {
+ border-bottom: 2px solid #F0BD4A;
+ border-width: 2px;
-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;
-}
+ div.bodystyle {
+ text-align: justify;
+ margin: 0 12%;
+ line-height: 30px;
-.note{
-font-size:0.85em;
-padding: 0 9%;
-}
-.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;
-}
+ span.zt-0 {
+ color: #0087AF;
+ }
-p
-{
- //margin-top:1em;
- margin: 0;
- text-indent:2em;
- line-height:30px;
- 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%;
- font-size:1.2em;
- text-indent:0em;
- font-weight:bold;
-}
+ 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;
+ padding: 0 9%;
+ }
+
+ .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;
+ 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%;
+ font-size: 1.2em;
+ text-indent: 0em;
+ font-weight: bold;
+ }
-.left {
- text-indent:0em;
- margin-left:0%;
- margin-right:0%;
-}
+ .left {
+ text-indent: 0em;
+ margin-left: 0%;
+ margin-right: 0%;
+ }
-.left1 {
- // font-family:"STKaiti";
- 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 {
+ .left1 {
+ // font-family:"STKaiti";
+ text-indent: 0em;
+ margin-left: 0%;
+ margin-right: 0%;
+ }
- font-family:"STKaiti";
- text-align:center;
- font-size:1.8em;
- color:#515594;
- margin-bottom:0%;
- margin-top:0.5cm;
-}
+ .right {
+ text-align: right;
+ margin-left: 0%;
+ margin-right: 0%;
+ }
-h1.left-h1 {
- text-indent:0em;
- text-align:left;
- text-indent:0em;
-}
+ .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%;
+ margin-top: 0.5cm;
+ }
+
+ h1.left-h1 {
+ text-indent: 0em;
+ text-align: left;
+ text-indent: 0em;
+ }
-h2 {
- font-family:"STKaiti";
- text-align:center;
- font-size:1.5em;
- margin-top:0%;
- margin-bottom:1.8em;
- text-indent:0em;
-}
+ h2 {
+ font-family: "STKaiti";
+ text-align: center;
+ font-size: 1.5em;
+ margin-top: 0%;
+ margin-bottom: 1.8em;
+ text-indent: 0em;
+ }
-h2.whleft2{
+ h2.whleft2 {
- text-align:left;
- color:#AF0206;
- font-size:1.2em;
- margin-top:0.2em;
- margin-bottom:0.2em;
- text-indent:0em;
-}
+ 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.2em;
- margin-top:2em;
- text-align:center;
- margin-bottom:2em;
- text-indent:0em;
-}
+ h3 {
+ font-family: "STKaiti";
+ color: #EF495D;
+ font-weight: bold;
+ font-size: 1.2em;
+ margin-top: 2em;
+ text-align: center;
+ margin-bottom: 2em;
+ text-indent: 0em;
+ }
-h3.lefth3{
+ h3.lefth3 {
+ text-align: left;
+ margin-top: 0.2em;
+ margin-bottom: 1.2em;
+ margin-left: 2em;
+ text-indent: 0em;
- text-align:left;
- margin-top:0.2em;
- margin-bottom:1.2em;
- margin-left: 2em;
- text-indent:0em;
-}
+ }
-h4 {
+ 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: #5877BA;
+ font-size: 1.1em;
+ margin-top: 0.2em;
+ margin-bottom: 1em;
+ text-indent: 0em;
+ }
- font-weight:bold;
- color:#C96653;
- font-size:1em;
- margin-top:0.2em;
- margin-bottom:1em;
- text-indent:2em;
-}
-h6 {
+ h5 {
- font-family:"cnepub", serif;
- color:#36C3F4;
- font-size:1.1em;
- margin-top:10px;
- text-indent:2em;
- margin-bottom:10px;
-}
-.u {
+ font-weight: bold;
+ color: #C96653;
+ font-size: 1em;
+ margin-top: 0.2em;
+ margin-bottom: 1em;
+ text-indent: 2em;
+ }
- text-decoration:underline; }
+ h6 {
-.img-0{
-width:100%;
-}
-.imz{
- width:96%;
- text-align:center;
+ 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 {
+ display: flex;
+ 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-a {
+ width: 95%;
+ }
-.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;
- font-weight: 400;
-}
+ .img-b {
+ width: 80%;
+ }
-.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;
-}
+ .img-c {
+ width: 70%;
+ }
-.block3{
- font-weight:bold;
- font-family:"STKaiti";
- font-size:1.2em;
-}
-div.bj{
- 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;
-}
+ .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%;
+ }
+
+ .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;
+ font-weight: 400;
+ }
+
+ .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;
+ }
+
+ .block3 {
+ font-weight: bold;
+ font-family: "STKaiti";
+ font-size: 1.2em;
+ }
+
+ div.bj {
+ 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;
+ }
-.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;
-}
+ .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";
-}
+ .kaiti {
+ font-family: "STKaiti";
+ }
-div.bk{
- border:4px dashed #3FB135;
- padding:0.79em;
- margin-bottom:2em;
- margin-top:1em;
-}
+ div.bk {
+ border: 4px dashed #3FB135;
+ padding: 0.79em;
+ margin-bottom: 2em;
+ margin-top: 1em;
+ }
-div.bj1{
- padding:0.01em 1em 0.01em 1em;
- margin-top:-2.95em;
- margin-left:-1em;
- margin-right:-1em;
+ div.bj1 {
+ padding: 0.01em 1em 0.01em 1em;
+ margin-top: -2.95em;
+ margin-left: -1em;
+ margin-right: -1em;
-}
-.img-gn{
- height:2em;
- margin-bottom:-1.9em;
-}
+ }
-.img-gn1{
- height:2em;
-}
+ .img-gn {
+ height: 2em;
+ margin-bottom: -1.9em;
+ }
-div.bj3{
- background:#C6DFA5;
- padding:0.2em 0.5em 0.2em 0.5em;
- margin-top:1em;
- margin-left:1em;
- margin-right:1em;
- border-radius:1em;
- margin-bottom:1.5em;
- font-size:1.1em;
- padding-left: 1em;
-}
- // 鑷畾涔�
- .page-box {
+ .img-gn1 {
+ height: 2.5em;
+ }
+
+ div.bj3 {
+ background: #C6DFA5;
+ padding: 0.2em 0.5em 0.2em 0.5em;
+ margin-top: 1em;
+ margin-left: 1em;
+ margin-right: 1em;
+ border-radius: 1em;
+ margin-bottom: 1.5em;
+ font-size: 1.1em;
+ padding-left: 1em;
+ }
+
+ // 鑷畾涔�
+ .page-box {
position: relative;
box-sizing: border-box;
min-height: 1150px;
@@ -417,73 +466,87 @@
background-color: #fff;
padding-bottom: 117px;
}
- // .front{
- // font-family:"SimSun";
- // font-weight: bold;
- // font-size: 18px;
- // }
- .t-l{
+
+ .fw-b {
+ font-weight: bold;
+ }
+
+ .t-l {
text-align: left;
}
- textarea{
+
+ textarea {
outline: none;
font-family: "STkaiti";
font-size: 1em;
+ margin-top: 1em;
}
- .textarea-focused {
- border-color: #42b983;
- box-shadow: 0 0 5px rgba(66, 185, 131, 0.5);
- }
- input{
+
+ .textarea-focused {
+ border-color: #42b983;
+ box-shadow: 0 0 5px rgba(66, 185, 131, 0.5);
+ }
+
+ input {
font-family: "STkaiti";
}
- .folder{
+
+ .folder {
color: brown;
display: flex;
align-items: center;
margin-right: 7%;
}
- .folder>img{
+
+ .folder>img {
color: brown;
height: 20px;
width: auto;
margin-top: 1px;
}
- .Options{
+
+ .Options {
display: flex;
flex-direction: row;
cursor: pointer;
}
- .text{
- margin: 0 8%;
- font-family: "STkaiti";
+
+ .text {
+ margin: 0 8%;
+ font-family: "STkaiti";
}
- .text1{
- margin-bottom: 3%;
- font-family: "STkaiti";
- font-size: 1.15em;
+
+ .text1 {
+ margin-bottom: 3%;
+ font-family: "STkaiti";
+ font-size: 1.15em;
}
- .text2{
+
+ .text2 {
margin: 0 8%;
font-family: "STkaiti";
text-align: left;
}
- .text3{
+
+ .text3 {
margin: 6% 8%;
font-family: "STkaiti";
font-size: 1.58em;
}
+
//搴曢儴鍙傝�冩枃鐚殑鏍峰紡
- .references{
+ .references {
font-family: "STkaiti";
font-size: 0.8em;
}
+
//瑙嗛搴曢儴瀛椾綋鍙婂浘鐗囨牱寮�
- .videoname{
+ .videoname {
display: flex;
justify-content: center;
}
+
.collect-btn {
cursor: pointer;
width: 20px;
@@ -491,106 +554,137 @@
margin-left: 10px;
margin-top: 0.8%;
}
- .problem{
- font-family:"kaiti";
- font-size:1.6em;
+
+ .problem {
+ font-family: "kaiti";
+ font-size: 1.6em;
font-weight: normal;
}
- .lesson1{
+
+ .lesson1 {
margin-top: 0%;
}
+
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;
}
+
.ju-end {
justify-content: flex-end;
}
+
.al-cn {
align-items: center;
}
+
.wh-nr {
white-space: nowrap;
}
+
.w100 {
width: 100%;
}
+
.m0 {
margin: 0;
}
+
.mr-8 {
margin-right: 8px;
}
+
.mt-20 {
margin-top: 20px;
}
+
.mt-40 {
margin-top: 40px !important;
}
+
.mb-20 {
margin-bottom: 20px;
}
+
.mb-40 {
margin-bottom: 40px;
}
+
.ml-40 {
margin-left: 40px;
}
+
.mr-40 {
margin-right: 40px;
}
+
.pg-mh {
min-height: 1150px;
}
+
.dl-ib {
display: inline-block;
}
+
.w-min {
width: min-content;
}
+
.w40 {
width: 40px;
}
+
.pb-box {
position: absolute;
bottom: 0;
}
+
.m16-0 {
margin: 16px 0;
}
+
.auido-text {
font-size: 1.15em;
font-family: "FangSong", "PMingLiU", serif;
font-weight: bold;
}
+
.input-bottom-border {
border: 0;
border-bottom: 1px solid #000000;
width: 40%;
+
&:focus {
outline: none;
}
}
+
// 鏁磋鐨刬nput鏍囩
- .input-w-60{
+ .input-w-60 {
width: 60%;
}
- .headerimg{
+
+ .headerimg {
margin-left: 5%;
}
+
.page-footer {
position: relative;
display: flex;
@@ -599,7 +693,7 @@
bottom: 0;
/* 鍨傜洿灞呬腑 */
}
-
+
.page-footer-image {
/* 鍥剧墖鏍峰紡 */
max-width: 100%;
@@ -609,29 +703,33 @@
z-index: 1;
/* 纭繚椤电爜鏁板瓧鍦ㄥ浘鐗囦笂鏂� */
}
- .ends{
+
+ .ends {
display: flex;
align-items: center;
justify-content: space-between;
}
+
/* 褰撳睆骞曞搴﹁嚦灏戜负600px鏃跺簲鐢ㄦ鏍峰紡 */
-@media screen and (max-width: 430px) {
- .ends{
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-wrap: wrap;
+ @media screen and (max-width: 430px) {
+ .ends {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ }
}
-}
+
.option {
- position: relative;
- display: flex;
- flex-direction: row;
- //flex-wrap: nowrap;
- width: 170px;
- height: 250px;
- height: min-content;
-}
+ position: relative;
+ display: flex;
+ flex-direction: row;
+ //flex-wrap: nowrap;
+ width: 170px;
+ height: 250px;
+ height: min-content;
+ }
+
.page-footer-number-left {
color: black;
left: 15%;
@@ -640,7 +738,7 @@
font-size: 2em;
/* 浣犲彲浠ユ牴鎹渶瑕佽皟鏁村瓧浣撳ぇ灏� */
z-index: 2;
-
+
/* 纭繚椤电爜鏁板瓧鍦ㄥ浘鐗囦笂鏂� */
/* 浣跨敤::before浼厓绱犲垱寤虹豢鑹插渾褰㈣儗鏅� */
&::before {
@@ -663,6 +761,7 @@
/* 纭繚鍦嗗舰鑳屾櫙鍦ㄦ枃鏈笅鏂� */
}
}
+
.page-footer-number-right {
color: black;
right: 15%;
@@ -671,7 +770,7 @@
font-size: 2em;
/* 浣犲彲浠ユ牴鎹渶瑕佽皟鏁村瓧浣撳ぇ灏� */
z-index: 2;
-
+
/* 纭繚椤电爜鏁板瓧鍦ㄥ浘鐗囦笂鏂� */
/* 浣跨敤::before浼厓绱犲垱寤虹豢鑹插渾褰㈣儗鏅� */
&::before {
@@ -695,60 +794,69 @@
}
}
}
+
/* 濯掍綋鏌ヨ鍋氬熀纭�鍝嶅簲寮忓竷灞� */
@media (max-width: 660px) {
- .ans-drama {
- .pg-mh {
- min-height: 815px !important;
- }
- /* 鍒嗛〉padding */
- .page-padding {
- padding: 104px 20px;
- }
- .padding-96 {
- padding: 0 20px 104px 20px;
- }
- /* video澶у皬 */
- .video-box {
- max-width: 260px;
- }
- .page-box{
- min-height: 500px;
- }
+ .ans-drama {
+ .pg-mh {
+ min-height: 815px !important;
}
- }
- @media (min-width: 660px) {
- .ans-drama {
- .page-padding {
- padding: 104px 96px;
- }
- .padding-96 {
- padding: 0 96px 104px 96px;
- }
- .video-box {
- max-width: 370px;
- }
+ /* 鍒嗛〉padding */
+ .page-padding {
+ padding: 104px 20px;
+ }
+
+ .padding-96 {
+ padding: 0 20px 104px 20px;
+ }
+
+ /* video澶у皬 */
+ .video-box {
+ max-width: 260px;
+ }
+
+ .page-box {
+ min-height: 500px;
}
}
+}
+
+@media (min-width: 660px) {
+ .ans-drama {
+ .page-padding {
+ padding: 104px 96px;
+ }
+
+ .padding-96 {
+ padding: 0 96px 104px 96px;
+ }
+
+ .video-box {
+ max-width: 370px;
+ }
+
+ }
+}
+
::-webkit-scrollbar {
- width: 8px;
- height: 10px;
- }
-
- ::-webkit-scrollbar-track-piece {
- background-color: rgba(0, 0, 0, 0.1);
- -webkit-border-radius: 6px;
- }
-
- ::-webkit-scrollbar-thumb:vertical {
- height: 5px;
- background-color: rgba(125, 125, 125, 0.3);
- -webkit-border-radius: 6px;
- }
-
- ::-webkit-scrollbar-thumb:horizontal {
- width: 5px;
- background-color: rgba(125, 125, 125, 0.3);
- -webkit-border-radius: 6px;
- }
\ No newline at end of file
+ width: 8px;
+ height: 10px;
+}
+
+::-webkit-scrollbar-track-piece {
+ background-color: rgba(0, 0, 0, 0.1);
+ -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:vertical {
+ height: 5px;
+ background-color: rgba(125, 125, 125, 0.3);
+ -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+ width: 5px;
+ background-color: rgba(125, 125, 125, 0.3);
+ -webkit-border-radius: 6px;
+}
\ No newline at end of file
diff --git a/src/books/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
index 2afd848..cee59a7 100644
--- a/src/books/artAndDrama/view/components/chapter001.vue
+++ b/src/books/artAndDrama/view/components/chapter001.vue
@@ -4,7 +4,7 @@
<div v-if="showPageList.indexOf(4) > -1">
<h1 id="a004">
<img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
- <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
+ <audio style="margin-top: 1em" :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -36,11 +36,11 @@
<h3 class="lefth3" id="c001">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
- <p class="text">
+ <p class="text ">
鍦ㄨ瑷�琛ㄨ堪涓紝涓轰簡绐佸嚭鎴栧己璋冩煇浜涙剰鎬濓紝鎴戜滑浼氫娇鐢ㄢ�滈�昏緫閲嶉煶鈥濊繖涓�鎶�宸с�傚悓鏍蜂竴鍙ヨ瘽锛屼笉鍚岀殑閫昏緫閲嶉煶鍙互琛ㄨ揪鍑轰笉涓�鏍风殑鎰忔�濄��
</p>
- <p class="text">
- <span class="hs1">鈼�</span>澶у０鏈楄涓嬮潰鐨勫彞瀛愶紝杩炰竴杩炰笉鍚岄�昏緫閲嶉煶寮鸿皟鐨勬剰鎬濄��
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>澶у０鏈楄涓嬮潰鐨勫彞瀛愶紝杩炰竴杩炰笉鍚岄�昏緫閲嶉煶寮鸿皟鐨勬剰鎬濄��
</p>
<h1>
<!-- <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"
@@ -102,8 +102,8 @@
<h3 class="lefth3" id="c003">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
- <p class="text">
- <span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus" style="">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
<h1><audio :src="auidoPathThree" controls controlslist="noplaybackrate nodownload" class="audio"></audio></h1>
<div class="bj3">
@@ -122,8 +122,8 @@
<h3 class="lefth3" id="c004">
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
- <p class="text">
- <span class="hs1">鈼�</span>鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝灏忚殏铓佷滑閮芥湁鍚勮嚜鐨勭珛鍦猴紝浣犺兘鐞嗚В浠栦滑鐨勬兂娉曞悧锛熻浣犲拰鍚屼即鏍规嵁鏁呬簨鍐呭璁ㄨ涓�涓嬨��
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝灏忚殏铓佷滑閮芥湁鍚勮嚜鐨勭珛鍦猴紝浣犺兘鐞嗚В浠栦滑鐨勬兂娉曞悧锛熻浣犲拰鍚屼即鏍规嵁鏁呬簨鍐呭璁ㄨ涓�涓嬨��
</p>
<hr style="margin-left: 9%; margin-top: 10%; width: 25%;" />
<p class="note left1 references">
@@ -148,8 +148,8 @@
<h3 class="lefth3" id="c006">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
- <p class="text">
- <span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
<h1 class="lefth3 openImgBox" id="c005">
<img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" />
@@ -196,9 +196,9 @@
<h1 class="center openImgBox">
<img class="img-e" alt="" src="../../assets/images/1-4.gif" style="height: auto; width: 50%" />
</h1>
- <p class="text">
+ <p class="text rhombusFather">
<span
- class="hs1">鈼�</span>鐢熸椿涓紝鎴戜滑鎬讳細閬囧埌鍚勭鍚勬牱鐨勮鎯戙�傞潰瀵硅鎯戞椂锛屾垜浠殑鍐呭績甯稿父浼氭湁涓や釜涓嶅悓鐨勫０闊冲嚭鐜帮細涓�涓０闊宠姹傛垜浠弗浜庡緥宸憋紝鍙︿竴涓０闊宠姹傛垜浠殢蹇冩墍娆层�傝浣犲垎鏋愪竴涓嬶紝褰撹殏铓侀槦闀块潰瀵规帀钀界殑濂堕叒娓ｇ殑璇辨儜鏃讹紝浠栧唴蹇冪殑涓や釜澹伴煶浼氳浜涗粈涔堝憿锛�
+ class="hs1 rhombus">鈼�</span>鐢熸椿涓紝鎴戜滑鎬讳細閬囧埌鍚勭鍚勬牱鐨勮鎯戙�傞潰瀵硅鎯戞椂锛屾垜浠殑鍐呭績甯稿父浼氭湁涓や釜涓嶅悓鐨勫０闊冲嚭鐜帮細涓�涓０闊宠姹傛垜浠弗浜庡緥宸憋紝鍙︿竴涓０闊宠姹傛垜浠殢蹇冩墍娆层�傝浣犲垎鏋愪竴涓嬶紝褰撹殏铓侀槦闀块潰瀵规帀钀界殑濂堕叒娓ｇ殑璇辨儜鏃讹紝浠栧唴蹇冪殑涓や釜澹伴煶浼氳浜涗粈涔堝憿锛�
</p>
<p class="text t-l">姝ｄ箟闃熼暱锛�
<textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
@@ -230,8 +230,8 @@
<h3 class="lefth3" id="c007">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
- <p class="text">
- <span class="hs1">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>璇峰皢浠ヤ笅璇炬枃閫夋澶у０鏈楄鍑烘潵锛屽姞鐐圭殑瀛楄閲嶈銆�
</p>
<h1>
<audio :src="auidoPathFive" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
@@ -251,8 +251,8 @@
<h3 class="lefth3" id="c008">
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
- <p class="text">
- <span class="hs1">鈼�</span>鍋囧浣犳槸鎼繍濂堕叒鐨勮殏铓侊紝浣犺鎬庝箞鎼繍涓嶅悓褰㈢姸銆佸ぇ灏忕殑濂堕叒鍛紵璇峰厛涓鸿嚜宸辫璁′竴涓墽鏈惂锛�
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>鍋囧浣犳槸鎼繍濂堕叒鐨勮殏铓侊紝浣犺鎬庝箞鎼繍涓嶅悓褰㈢姸銆佸ぇ灏忕殑濂堕叒鍛紵璇峰厛涓鸿嚜宸辫璁′竴涓墽鏈惂锛�
</p>
<p class="text">
鎴戞槸铓傝殎 <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" style=" width: 13%;"
@@ -288,8 +288,8 @@
<p class="center openImgBox">
<img class="img-e" alt="" src="../../assets/images/1-5.gif" />
</p>
- <p class="text">
- <span class="hs1">鈼�</span>铓傝殎闃熼暱鎶婂ザ閰福鐣欑粰浜嗗勾榫勬渶灏忕殑铓傝殎锛岃耽寰椾簡澶у鐨勮鍙�傚湪鐢熸椿涓紝浣犳浘缁忓儚鈥滆殏铓侀槦闀库�濅竴鏍风埍鎶ゅ急灏忓悧锛熸垨鑰呭儚鈥滃皬铓傝殎鈥濅竴鏍峰緱鍒拌繃鍝ュ摜濮愬浠殑鍏崇埍鍚楋紵
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>铓傝殎闃熼暱鎶婂ザ閰福鐣欑粰浜嗗勾榫勬渶灏忕殑铓傝殎锛岃耽寰椾簡澶у鐨勮鍙�傚湪鐢熸椿涓紝浣犳浘缁忓儚鈥滆殏铓侀槦闀库�濅竴鏍风埍鎶ゅ急灏忓悧锛熸垨鑰呭儚鈥滃皬铓傝殎鈥濅竴鏍峰緱鍒拌繃鍝ュ摜濮愬浠殑鍏崇埍鍚楋紵
</p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -309,8 +309,8 @@
<h3 class="lefth3" id="c009">
<img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" />
</h3>
- <p class="text ends">
- <span><span class="hs1">鈼�</span>鏀惧ぇ缂╁皬</span>
+ <p class="text ends rhombusFather">
+ <span><span class="hs1 rhombuSpecial">鈼�</span>鏀惧ぇ缂╁皬</span>
<span> <audio :src="auidoPathSex" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
</span>
</p>
@@ -318,16 +318,16 @@
璇蜂綘浜ゆ浛鈥滄斁澶р�濆拰鈥滅缉灏忊�濅簲瀹樸�傚湪鈥滄斁澶р�濇椂锛屾兂璞′簲瀹樿椋炲埌澶栧お绌猴紱鍦ㄢ�滅缉灏忊�濇椂锛屾兂璞′簲瀹樺叏閮ㄧ缉灏忓埌浜嗛蓟灏栦笂銆�
</p>
- <p class="text ends">
- <span><span class="hs1">鈼�</span>鎻愬崌鑻规灉鑲�</span>
+ <p class="text ends rhombusFather">
+ <span><span class="hs1 rhombuSpecial">鈼�</span>鎻愬崌鑻规灉鑲�</span>
<span><audio :src="auidoPathSeven" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
</span>
</p>
<p class="text">
鎯宠薄浣犲湪涓�涓檶鐢熺殑鍦版柟锛岃皝閮戒笉璁よ瘑锛岀獊鐒堕亣瑙佷簡濂芥湅鍙嬶紝浣犲緢楂樺叴锛屼笂鍓嶅拰浠�/濂规墦鎷涘懠銆傚仛涓�鍋氫綘姝ゆ椂鐨勮〃鎯呭惂銆�
</p>
- <p class="text ends">
- <span><span class="hs1">鈼�</span>寰瑧璇粹�渁ng鈥�</span>
+ <p class="text ends rhombusFather">
+ <span style="text-wrap: nowrap"><span class="hs1 rhombuSpecial">鈼�</span>寰瑧璇粹�渁ng鈥�</span>
<span><audio :src="auidoPathEight" controls controlslist="noplaybackrate nodownload"
class="audio"></audio></span>
</p>
@@ -335,8 +335,8 @@
璇蜂綘璇曚竴璇曞湪鎻愬崌鑻规灉鑲岀殑鍩虹涓婏紝鍙戝嚭鈥渁ng鈥濈殑闊炽�傚０闊宠灏藉彲鑳芥媺闀裤�佷繚鎸佺ǔ瀹氾紝骞跺悜杩滈�併��
</p>
- <p class="text ends">
- <span style="text-wrap: nowrap"><span class="hs1">鈼�</span>鍚戣繙灞卞枈鈥滈樋姣涒��</span>
+ <p class="text ends rhombusFather">
+ <span style="text-wrap: nowrap"><span class="hs1 rhombuSpecial">鈼�</span>鍚戣繙灞卞枈鈥滈樋姣涒��</span>
<span style="margin-left: -4%;"><audio :src="auidoPathNine" controls
controlslist="noplaybackrate nodownload" class="audio"></audio></span>
@@ -362,7 +362,7 @@
<h3 class="lefth3" id="c010">
<img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
</h3>
- <p class="text"><span class="hs1">鈼�</span>鎺掍竴鎺捖锋紨涓�婕旓細瀛旇瀺璁╂ⅷ</p>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>鎺掍竴鎺捖锋紨涓�婕旓細瀛旇瀺璁╂ⅷ</p>
<p class="text">
瀛旇瀺鍥涘瞾灏辨噦绀艰矊銆佺煡璋﹁锛屾槸鎴戜滑瀛︿範鐨勫ソ姒滄牱锛岃鎴戜滑杩愮敤鏈崟鍏冪殑鎴忓墽鐭ヨ瘑锛屾妸浠栫殑鏁呬簨琛ㄦ紨鍑烘潵鍚э紒
</p>
diff --git a/src/books/artAndDrama/view/components/chapter002.vue b/src/books/artAndDrama/view/components/chapter002.vue
index f982cfe..fd20564 100644
--- a/src/books/artAndDrama/view/components/chapter002.vue
+++ b/src/books/artAndDrama/view/components/chapter002.vue
@@ -4,7 +4,7 @@
<div v-if="showPageList.indexOf(14) > -1">
<h1 id="a004">
<img class="img-0" alt="" src="../../assets/images/dy2.jpg" />
- <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
+ <audio style="margin-top: 1em;" :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -37,12 +37,12 @@
<h3 class="lefth3" id="c011">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
- <p class="text"><span class="hs1">鈼�</span>鎴戞槸灏忕敾瀹�</p>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>鎴戞槸灏忕敾瀹�</p>
<p class="text">淇濇寔澶撮儴涓嶅姩锛岃瘯鐫�鐢ㄧ溂绁炵敾鍑轰笅闈㈢殑鍥炬鍚э紒</p>
<p class="center openImgBox">
<img class="img-e" alt="" src="../../assets/images/0016-1.jpg" />
</p>
- <p class="text"><span class="hs1">鈼�</span>鍡呰澶у啋闄�</p>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>鍡呰澶у啋闄�</p>
<p class="text">
浣犳渶鐖卞悆鐨勯鐗╂槸 <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18"
@change="setBookQuestion" style="width: 13%" />銆傚綋闂诲埌瀹冪殑鍛抽亾鏃讹紝浣犱細鍋氬嚭浠�涔堣〃鎯呭憿锛�
@@ -55,8 +55,8 @@
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
<div style="display: flex; justify-content: flex-start;">
- <p class="text" style="width: 50%">
- <span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅锛屼娇鐢ㄦ墜鍋堕亾鍏疯〃婕旈檮褰曚腑鐨勫墽鏈�夋2銆�
+ <p class="text rhombusFather" style="width: 50%">
+ <span class="hs1 rhombus">鈼�</span>浠ュ皬缁勪负鍗曚綅锛屼娇鐢ㄦ墜鍋堕亾鍏疯〃婕旈檮褰曚腑鐨勫墽鏈�夋2銆�
</p>
<p class="openImgBox" style="width: 50%">
<img class="img-e" alt="" src="../../assets/images/2-1.gif" />
@@ -78,7 +78,7 @@
<div class="bodystyle" style="margin-top: 3%;">
<h2 id="b007" class="problem">绗簩璇俱��鏄庡療绉嬫</h2>
<h3 class="lefth3" id="c013"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
- <p class="text"><span class="hs1">鈼�</span>鎴戜滑鐨勪笘鐣屼簲褰╂枒鏂撱�傝浣犲～涓�濉紝鎻愬埌杩欎簺棰滆壊锛屼綘鎯冲埌浜嗗摢浜涗簨鐗╋紵</p>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>鎴戜滑鐨勪笘鐣屼簲褰╂枒鏂撱�傝浣犲～涓�濉紝鎻愬埌杩欎簺棰滆壊锛屼綘鎯冲埌浜嗗摢浜涗簨鐗╋紵</p>
<p class="text">榛勮壊锛氭煚妾��<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18"
@change="setBookQuestion" style="width: 70%" /></p>
<p class="text">绾㈣壊锛氶灜鐐��<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18"
@@ -113,19 +113,19 @@
<h2 id="b008" class="problem">绗笁璇俱��闂诲０璇嗕汉</h2>
<h3 class="lefth3" id="c015"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
<p class="text">甯歌█閬擄細鑹█涓�鍙ヤ笁鍐殩锛屾伓璇激浜哄叚鏈堝瘨銆傝瑷�鍦ㄤ汉涓庝汉鐨勪氦寰�涓捣鐫�閲嶈鐨勪綔鐢紝鏈夌潃鏃犵┓鐨勫姏閲忋��</p>
- <p class="text t-l" ><span class="hs1">鈼�</span>濡傛灉鏈嬪弸蹇冩儏涓嶅ソ锛屼綘璇ユ�庝箞瀹夋叞浠�/濂瑰憿锛�
+ <p class="text t-l rhombusFather" ><span class="hs1 rhombus">鈼�</span>濡傛灉鏈嬪弸蹇冩儏涓嶅ソ锛屼綘璇ユ�庝箞瀹夋叞浠�/濂瑰憿锛�
<textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')" @blur="handleBlur('one')" ></textarea>
</p>
- <p class="text t-l"><span class="hs1">鈼�</span>濡傛灉浣犻個璇峰ソ鏈嬪弸鏉ュ閲屽仛瀹紝浣犺璇翠粈涔堟潵娆㈣繋浠�/濂瑰憿锛�
+ <p class="text t-l rhombusFather"><span class="hs1 rhombus">鈼�</span>濡傛灉浣犻個璇峰ソ鏈嬪弸鏉ュ閲屽仛瀹紝浣犺璇翠粈涔堟潵娆㈣繋浠�/濂瑰憿锛�
<textarea v-model="questionData.reading.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')" @blur="handleBlur('two')" ></textarea>
</p>
<h3 class="lefth3" id="c016" style="margin-top: 7%;"><img class="img-gn1" alt=""
src="../../assets/images/czysj.jpg" /></h3>
- <p class="text"><span class="hs1">鈼�</span>璇锋牴鎹彁绀鸿鍑哄彞瀛愶紝娉ㄦ剰澹伴煶鍜岃姘旂殑鍙樺寲銆�</p>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>璇锋牴鎹彁绀鸿鍑哄彞瀛愶紝娉ㄦ剰澹伴煶鍜岃姘旂殑鍙樺寲銆�</p>
<p class="text"><span class="hs">杩欎竴澶у潡濂堕叒閮芥槸鎴戠殑浜嗭紒</span>锛堜竴鍙嫛鐚剧殑铓傝殎锛屾兂瑕佹妸濂堕叒鍋峰伔鍦板崰涓哄繁鏈夛級</p>
<p class="text"><span class="hs">杩欎竴澶у潡濂堕叒閮芥槸鎴戠殑浜嗭紒</span>锛堜竴鍙杽鑹殑铓傝殎锛屽湪甯姪浠栦汉鍚庡緱鍒颁簡濂栧姳锛�</p>
<p class="text"><span class="hs">杩欏潡濂堕叒澶矇浜嗭紝鎴戜滑浼戞伅涓�涓嬪惂锛�</span>锛堜弗鑲冪殑铓傝殎闃熼暱锛屽悜闃熶紞鍙戝嚭鍛戒护锛�</p>
@@ -163,8 +163,8 @@
<h2 id="b009" class="problem">绗洓璇俱��鐪熷惉鐪熺湅鐪熸劅鍙�</h2>
<h3 class="lefth3" id="c017"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
<p class="text">寰呬汉鎺ョ墿鏈夌ぜ鏈夎妭銆佽唉鍗戞伃鏁紝鍦ㄨ浠栦汉鎰熷埌濡傛矏鏄ラ鐨勫悓鏃讹紝涔熶細璁╄嚜宸卞彈鍒颁粬浜虹殑灏婇噸鍜岀悊瑙ｃ�傝璇翠竴璇达紝鍦ㄤ笅闈㈣繖浜涘満鏅腑浣犲簲璇ュ浣曞仛锛�</p>
- <p class="text"><span class="hs1">鈼�</span>浣犵湅鍒板濡堢殑姘存澂娌℃按浜嗐��</p>
- <p class="text"><span class="hs1">鈼�</span>鐢垫閲岋紝浣犵珯鍦ㄦ渶鍓嶆帓锛屽悗闈㈢殑浜洪渶瑕佷笅鐢垫銆�</p>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>浣犵湅鍒板濡堢殑姘存澂娌℃按浜嗐��</p>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>鐢垫閲岋紝浣犵珯鍦ㄦ渶鍓嶆帓锛屽悗闈㈢殑浜洪渶瑕佷笅鐢垫銆�</p>
<h3 class="lefth3" id="c018" style="margin-top: 7%;"><img class="img-gn1" alt=""
src="../../assets/images/czysj.jpg" /></h3>
<div style="display: flex; justify-content: flex-start; ">
@@ -173,7 +173,7 @@
<div class="openImgBox" style="width: 50%"><img class="img-e" alt="" src="../../assets/images/2-4.gif" />
</div>
</div>
- <p class="text"><span class="hs1">鈼�</span>璇疯瘯鐫�鐢ㄦ棤瀹炵墿琛ㄦ紨鐨勬柟寮忔妸涓嬮潰鐨勬儏鏅〃婕斿嚭鏉ュ惂锛�</p>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>璇疯瘯鐫�鐢ㄦ棤瀹炵墿琛ㄦ紨鐨勬柟寮忔妸涓嬮潰鐨勬儏鏅〃婕斿嚭鏉ュ惂锛�</p>
<p class="center text"><img class="img-0" style="width: 100%; height: auto;" lt=""
src="../../assets/images/0020-2.jpg" /></p>
</div>
@@ -193,22 +193,22 @@
<div class="bodystyle" style="margin-top: 3%">
<h2 id="b010" class="problem">鍗曞厓娲诲姩浠诲姟</h2>
<h3 class="lefth3" id="c019"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
- <p class="text ends">
- <span><span class="hs1">鈼�</span>鍚圭焊缁冧範</span>
+ <p class="text ends rhombusFather">
+ <span><span class="hs1 rhombuSpecial">鈼�</span>鍚圭焊缁冧範</span>
<span> <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload"
class="audio"></audio></span>
</p>
<p class="center text" style="margin: 4% 0"><img class="img-e" alt="" src="../../assets/images/0021-1.jpg" />
</p>
<p class="text">鎵句竴寮犵焊宸撅紝灏嗗畠鎸夊湪澧欎笂銆傜Щ寮�鍙屾墜锛屽姫鍔涚敤姘旀伅灏嗙焊鈥滈拤鈥濆湪澧欓潰涓婏紝涓嶈璁╁畠鍚戜笅婊戣惤銆�</p>
- <p class="text ends">
- <span> <span class="hs1">鈼�</span>鍚圭瑪缁冧範</span>
+ <p class="text ends rhombusFather">
+ <span> <span class="hs1 rhombuSpecial">鈼�</span>鍚圭瑪缁冧範</span>
<span> <audio :src="auidoPathThree" controls controlslist="noplaybackrate nodownload"
class="audio"></audio></span>
</p>
<p class="text">灏嗕竴鏀瑪绔嬩簬妗岄潰锛岀湅鐪嬩綘鑳戒笉鑳界敤涓�鍙ｆ皵灏嗗畠鍚瑰�掋��</p>
- <p class="text ends">
- <span><span class="hs1">鈼�</span>鍚硅瀛愮粌涔�</span>
+ <p class="text ends rhombusFather">
+ <span><span class="hs1 rhombuSpecial">鈼�</span>鍚硅瀛愮粌涔�</span>
<span> <audio :src="auidoPathFour" controls controlslist="noplaybackrate nodownload"
class="audio"></audio></span>
</p>
@@ -228,16 +228,16 @@
</h1>
<img class="headerimg" src="../../assets/images/page5.png" alt="" />
<div class="bodystyle" style="margin-top: 3%;">
- <p class="text ends">
- <span> <span class="hs1">鈼�</span>鍚逛箳涔撶悆缁冧範</span>
+ <p class="text ends rhombusFather">
+ <span style="text-wrap: nowrap"> <span class="hs1 rhombuSpecial">鈼�</span>鍚逛箳涔撶悆缁冧範</span>
<span> <audio :src="auidoPathFive" controls controlslist="noplaybackrate nodownload"
class="audio"></audio></span>
</p>
<p class="text">鐢ㄦ皵鎭皢妗岄潰涓婄殑涔掍箵鐞冧粠鈥滆捣鐐光�濊繍閫佽嚦鈥滅粓鐐光�濓紝杩愰�佽繃绋嬩腑閬垮厤涔掍箵鐞冭Е纰伴殰纰嶇墿銆�</p>
<h3 class="lefth3" id="c020" style="margin-top: 7%"><img class="img-gn1" alt=""
src="../../assets/images/tzyys.jpg" /></h3>
- <p class="text">
- <span class="hs1">鈼�</span>璇疯蛋杩涘墽鍦鸿鐪嬩笉鍚屽墽绉嶇殑鐜板満婕斿嚭锛屾劅鍙楁垙鍓х殑榄呭姏鍚э紒
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>璇疯蛋杩涘墽鍦鸿鐪嬩笉鍚屽墽绉嶇殑鐜板満婕斿嚭锛屾劅鍙楁垙鍓х殑榄呭姏鍚э紒
</p>
<p class="center text">
<video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
diff --git a/src/books/artAndDrama/view/components/chapter003.vue b/src/books/artAndDrama/view/components/chapter003.vue
index da54dc5..7b813aa 100644
--- a/src/books/artAndDrama/view/components/chapter003.vue
+++ b/src/books/artAndDrama/view/components/chapter003.vue
@@ -5,7 +5,8 @@
<h1 id="a004">
<!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
<img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
- <audio :src="audioPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
+ <audio style="margin-top: 1em" :src="audioPathOne" controls controlslist="noplaybackrate nodownload"
+ class="audio"></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -14,7 +15,7 @@
<img class="img-gn" alt="" src="../../assets/images/dydd.jpg" />
</p>
</div>
- <p class="" style="margin: 8% 5% 5% 7%">
+ <p class="block" style="margin: 8% 5% 5% 7%">
姣忎釜浜虹殑蹇冧腑閮芥湁涓�涓垶鍙帮紝婕旂粠鐫�鐢熸椿鐨勯吀鐢滆嫤杈ｏ紝璁板綍鐫�鎴愰暱鐨勭偣鐐规淮婊淬�傘�婁竴鍧楀ザ閰�嬩腑鐨勬瘡鍙皬铓傝殎涔熸湁寰堝蹇冮噷璇濊琛ㄨ揪锛岃鎴戜滑涓�璧锋紨缁庡嚭鏉ュ惂锛�
</p>
</div>
@@ -40,21 +41,21 @@
</h3>
<p class="text">瀵掓潵鏆戝線锛岀鏀跺啲钘忋�備竴骞村洓瀛ｏ紝鍔崇濂斿繖銆�</p>
<p class="text">鍥㈢粨涓�蹇冿紝鍚瑰搷鍙疯銆傚垢绂忕敓娲伙紝鍔冲姩鍒涢�犮��</p>
- <p class="text"><span class="hs1">鈼�</span>璇翠竴璇翠綘浼氬仛鍝簺瀹跺姟锛�</p>
- <p class="text">
- <span class="hs1">鈼�</span>鍜屽皬浼欎即璁ㄨ鍔冲姩鍦ㄧ敓娲讳腑鐨勪綔鐢ㄣ��
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>璇翠竴璇翠綘浼氬仛鍝簺瀹跺姟锛�</p>
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>鍜屽皬浼欎即璁ㄨ鍔冲姩鍦ㄧ敓娲讳腑鐨勪綔鐢ㄣ��
</p>
- <p class="text">
- <span class="hs1">鈼�</span>琛ㄦ紨涓�绉嶅鍔″姵鍔紝璇峰皬浼欎即鐚滀竴鐚溿��
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus ">鈼�</span>琛ㄦ紨涓�绉嶅鍔″姵鍔紝璇峰皬浼欎即鐚滀竴鐚溿��
</p>
<h3 class="lefth3" id="c022" style="margin-top: 7%">
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
- <p class="text">
- <span class="hs1">鈼�</span>閭�璇峰皬浼欎即鍒嗚鑹叉湕璇甸檮褰曚腑鐨勫墽鏈�夋1锝�2锛岄噸璇诲姞鐐规枃瀛椼��
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>閭�璇峰皬浼欎即鍒嗚鑹叉湕璇甸檮褰曚腑鐨勫墽鏈�夋1锝�2锛岄噸璇诲姞鐐规枃瀛椼��
</p>
<p class="block3" style="margin: 3% 0%">
- <span class="hs">鍓ф湰:銆�涓�鍧楀ザ閰�</span>
+ <span class="hs">鍓ф湰:銆�涓�鍧楀ザ閰紙閫夋1~2锛�</span>
</p>
<!-- <p class="center1 text" style="font-size: 25px; margin: 3% 0;"><span class="hs">涓�鍧楀ザ閰�</span></p> -->
<!-- 姝ゅ涓洪檮褰曡祫婧愬 -->
@@ -86,8 +87,8 @@
<h3 class="lefth3" id="c023">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
- <p class="text">
- <span class="hs1">鈼�</span>褰撲笂鍗婂満姣旇禌澶卞埄锛屼腑鍦轰紤鎭椂锛屼綘浼氭�庝箞鍋氾紵褰撳埆浜哄じ璧炰綘鐨勬椂鍊欙紝浣犱細鎬庝箞鍋氾紵璇蜂綘鍜屾湅鍙嬩竴璧锋紨涓�婕斿惂銆�
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>褰撲笂鍗婂満姣旇禌澶卞埄锛屼腑鍦轰紤鎭椂锛屼綘浼氭�庝箞鍋氾紵褰撳埆浜哄じ璧炰綘鐨勬椂鍊欙紝浣犱細鎬庝箞鍋氾紵璇蜂綘鍜屾湅鍙嬩竴璧锋紨涓�婕斿惂銆�
</p>
<h3 class="lefth3" id="c024" style="margin-top: 7%">
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
@@ -95,8 +96,8 @@
<p class="center openImgBox">
<img class="img-e" alt="" src="../../assets/images/3-2.gif" />
</p>
- <p class="text">
- <span class="hs1">鈼�</span>璇锋妸铓傝殎闃熼暱鐨勫彴璇嶅拰浠栫殑鍐呭績鐙櫧杩炶捣鏉ュ惂锛�
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>璇锋妸铓傝殎闃熼暱鐨勫彴璇嶅拰浠栫殑鍐呭績鐙櫧杩炶捣鏉ュ惂锛�
</p>
<!-- 杩炵嚎棰� -->
<matching :rawData="rawData" :question="question" class="macthing" :primary-color="color"
@@ -121,8 +122,8 @@
<h3 class="lefth3" id="c025">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
- <p class="text t-l">
- <span class="hs1">鈼�</span>鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝铓傝殎闃熼暱涔熻捣杩囪椽蹇冿紝浣嗕粬鏈�缁堟垚鍔熷厠鏈嶄簡璐績锛屼綘璁や负浠栨槸鎬庝箞鍋氬埌鐨勫憿锛�
+ <p class="text t-l rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>鍦ㄣ�婁竴鍧楀ザ閰�嬬殑鏁呬簨涓紝铓傝殎闃熼暱涔熻捣杩囪椽蹇冿紝浣嗕粬鏈�缁堟垚鍔熷厠鏈嶄簡璐績锛屼綘璁や负浠栨槸鎬庝箞鍋氬埌鐨勫憿锛�
<textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
:class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')"
@@ -132,9 +133,20 @@
<h3 class="lefth3" id="c026" style="margin-top: 7%">
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
- <p class="text">
- <span class="hs1">鈼�</span>闃呰闄勫綍涓殑鍓ф湰閫夋5锛屼负鑷繁鐨勮〃婕旇璁″姩浣滃惂锛�
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>闃呰闄勫綍涓殑鍓ф湰閫夋5锛屼负鑷繁鐨勮〃婕旇璁″姩浣滃惂锛�
</p>
+ <p class="block3" style="margin: 3% 0%">
+ <span class="hs">鍓ф湰:銆�涓�鍧楀ザ閰紙閫夋3~5锛�</span>
+ </p>
+ <!-- 姝ゅ涓洪檮褰曡祫婧愬 -->
+ <div class="Options text">
+ <span class="folder" v-for="(segment, index) in paragraph" :key="index" @click="showContent(index+2)"><img
+ src="../../assets/images/icon/folder.svg" alt="" />閫夋{{
+ segment
+ }}</span>
+ </div>
+ <div v-if="activeIndex !== null" class="content-wrapper text" v-html="activeContent"></div>
<p class="center openImgBox">
<img class="img-e" alt="" src="../../assets/images/3-3.gif" />
</p>
@@ -156,8 +168,8 @@
<h3 class="lefth3" id="c027">
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
</h3>
- <p class="text">
- <span class="hs1">鈼�</span>璇锋寜鐓т簨浠跺叚瑕佺礌鐨勭粨鏋勭粰澶у鍒嗕韩涓�浠跺揩涔愮殑浜嬪惂锛�
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>璇锋寜鐓т簨浠跺叚瑕佺礌鐨勭粨鏋勭粰澶у鍒嗕韩涓�浠跺揩涔愮殑浜嬪惂锛�
</p>
<p class="text2">
鏃堕棿锛�<input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion"
@@ -196,8 +208,8 @@
@blur="handleBlur('four')">
</textarea>
</p>
- <p class="text t-l" style="margin-top: 7%">
- <span class="hs1">鈼�</span>浣犳湁鐑︽伡鍚楋紵璇翠竴璇存槸浠�涔堬紝浣犳槸鎬庝箞澶勭悊瀹冪殑锛�
+ <p class="text t-l rhombusFather" style="margin-top: 7%">
+ <span class="hs1 rhombus">鈼�</span>浣犳湁鐑︽伡鍚楋紵璇翠竴璇存槸浠�涔堬紝浣犳槸鎬庝箞澶勭悊瀹冪殑锛�
<textarea v-model="questionData.reading.five" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
:class="{ 'textarea-focused': isFocused === 'five' }" @focus="handleFocus('five')"
@@ -222,8 +234,8 @@
<h3 class="lefth3" id="c028">
<img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
</h3>
- <p class="text">
- <span class="hs1">鈼�</span>杩愮敤閲嶉煶銆佸唴蹇冪嫭鐧藉拰鍔ㄤ綔璁捐绛夎〃鐜版柟寮忥紝灏嗐�婁竴鍧楀ザ閰�嬬殑鏁呬簨琛ㄦ紨鍑烘潵鍚э紒锛堝墽鏈闄勫綍锛�
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>杩愮敤閲嶉煶銆佸唴蹇冪嫭鐧藉拰鍔ㄤ綔璁捐绛夎〃鐜版柟寮忥紝灏嗐�婁竴鍧楀ザ閰�嬬殑鏁呬簨琛ㄦ紨鍑烘潵鍚э紒锛堝墽鏈闄勫綍锛�
</p>
<p class="center openImgBox">
<img class="img-a" alt="" src="../../assets/images/0028-1.jpg" />
@@ -246,8 +258,8 @@
<h3 class="lefth3" id="c029">
<img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" />
</h3>
- <p class="text ends">
- <span><span class="hs1">鈼�</span>鍠樻皵缁冧範</span>
+ <p class="text ends rhombusFather">
+ <span style="text-wrap: nowrap"><span class="hs1 rhombuSpecial">鈼�</span>鍠樻皵缁冧範</span>
<span>
<audio :src="audioPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
</span>
@@ -255,15 +267,15 @@
<p class="text">
骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傛垨鍙夎叞锛屽弻鑴氬垎寮�锛屼笌鑲╁悓瀹姐�傛ā浠垮皬鐙楀枠姘旓紝鎰熷彈鑵归儴鐨勨�滃懠鍚糕�濈姸鎬侊紝鎯宠薄鑷繁鐨勮吂閮ㄦ槸涓�涓皵鐞冿紝鍦ㄥ惛姘旀椂鑵归儴鍚戝鎵╁紶锛屽悙姘旀椂鑵归儴鍚戝唴鏀剁缉銆�
</p>
- <p class="text ends">
- <span><span class="hs1">鈼�</span>鈥滃樁鈥濆０缁冧範</span>
+ <p class="text ends rhombusFather">
+ <span style="text-wrap: nowrap"><span class="hs1 rhombuSpecial">鈼�</span>鈥滃樁鈥濆０缁冧範</span>
<span>
<audio :src="audioPathThree" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
</span>
</p>
<p class="text">鍦ㄢ�滃枠姘旂粌涔犫�濈殑鍩虹涓婏紝鍙戝嚭鈥滃樁鈥濋煶锛屾瘡缁�4鐭�1闀裤��</p>
- <p class="text ends">
- <span><span class="hs1">鈼�</span>鈥滃槦鈥濋煶缁冧範</span>
+ <p class="text ends rhombusFather">
+ <span style="text-wrap: nowrap"><span class="hs1 rhombuSpecial">鈼�</span>鈥滃槦鈥濋煶缁冧範</span>
<span>
<audio :src="audioPathFour" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
</span>
@@ -271,8 +283,8 @@
<p class="text">
骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鍒嗗紑锛屼笌鑲╁悓瀹姐�傛斁鏉惧弻鍞囷紝娣卞惛姘旓紝鍚瑰嚭姘旀祦甯﹀姩鍢村攪鎶栧姩锛屽彂鍑衡�滃槦鈥濈殑澹伴煶锛屽０闊宠秺闀胯秺濂姐��
</p>
- <p class="text" style="text-align: left">
- <span><span class="hs1">鈼�</span>鈥滄垜浠禐缇庨暱姹熲�濇皵澹扮粌涔�</span>
+ <p class="text rhombusFather" style="text-align: left">
+ <span><span class="hs1 rhombuSpecial">鈼�</span>鈥滄垜浠禐缇庨暱姹熲�濇皵澹扮粌涔�</span>
<span class="text">
<audio :src="audioPathFive" controls controlslist="noplaybackrate nodownload"
class="audio"></audio></span>
@@ -298,8 +310,8 @@
<h3 class="lefth3" id="c030">
<img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
</h3>
- <p class="text">
- <span class="hs1">鈼�</span>鍔冲姩鏈�鍏夎崳锛佽涓哄涓暱杈堝仛涓�浠跺姏鎵�鑳藉強鐨勪簨鎯咃紝鐢ㄥ疄闄呰鍔ㄨ〃杈句綘鐨勭埍鎰忥紒浣撻獙杩囩▼涓璁颁綇姣忎竴涓姩浣滅殑缁嗚妭锛屽啀灏濊瘯浠ユ棤瀹炵墿琛ㄦ紨鐨勬柟寮忚繘琛屽睍绀恒��
+ <p class="text rhombusFather">
+ <span class="hs1 rhombus">鈼�</span>鍔冲姩鏈�鍏夎崳锛佽涓哄涓暱杈堝仛涓�浠跺姏鎵�鑳藉強鐨勪簨鎯咃紝鐢ㄥ疄闄呰鍔ㄨ〃杈句綘鐨勭埍鎰忥紒浣撻獙杩囩▼涓璁颁綇姣忎竴涓姩浣滅殑缁嗚妭锛屽啀灏濊瘯浠ユ棤瀹炵墿琛ㄦ紨鐨勬柟寮忚繘琛屽睍绀恒��
</p>
<p class="center text">
<video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
@@ -314,8 +326,9 @@
<span>瑙嗛锛氬績鏈夊澶э紝鑸炲彴灏辨湁澶氬ぇ </span>
<el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '鐐瑰嚮鍙栨秷' : '鐐瑰嚮鏀惰棌'"
placement="top-start">
- <img :src="collectResourceList.findIndex(item => item.id == 'dd44a1e31b4304f50d10b2481a148411') > -1 ? collectCheck : collectImg" alt="" class="collect-btn"
- @click="handleCollect('video')" />
+ <img
+ :src="collectResourceList.findIndex(item => item.id == 'dd44a1e31b4304f50d10b2481a148411') > -1 ? collectCheck : collectImg"
+ alt="" class="collect-btn" @click="handleCollect('video')" />
</el-tooltip>
</p>
</div>
@@ -370,8 +383,9 @@
audioPathFour: "",
audioPathFive: "",
isFocused: null, // 鐢ㄤ簬璺熻釜textarea鐨勮仛鐒︾姸鎬�
- segments: [1, 2, 3, 4, 5],
- collectResourceList:[],
+ segments: [1, 2],
+ paragraph:[3,4,5],
+ collectResourceList: [],
color: "#fff",
activeIndex: null, // 鐢ㄤ簬杩借釜褰撳墠娲诲姩鐨勬寜閽储寮�
contents: [
@@ -380,9 +394,9 @@
' <p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙璧疯韩锛�<span class="un1">鎴戝喅瀹氫簡</span>锛佸ぇ瀹�<span class="un1">涓�璧锋惉</span>锛佽繖鍧楀ザ閰互鎴戜负棣栵紝鎼繍鐨勮矾涓�<span class="un1">涓嶈鍋峰悆</span>锛�</p><p class=" mar-l-r-4">铓傝殎浠細<span class="un1">鏄�</span>锛�</p><p class=" mar-l-r-4">銆愯殏铓佷滑杩呴�熷洿鎴愪竴鍦堬紝铓傝殎闃熼暱绔欏湪濂堕叒鏈�鍓嶉潰銆�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氬惉鎴戝彛浠わ紒3锛�2锛�1锛佹姮锛�</p> <p class=" mar-l-r-4">銆愬ザ閰鎶捣銆�</p><p class=" mar-l-r-4">澶уご铓傝殎锛氬搰锛佽繖鍧楀ザ閰�<span class="un1">濂介鍣�</span>锛�</p><p class=" mar-l-r-4">灏忕溂闀滆殏铓侊細鎴戞兂<span class="un1">鍜�</span>涓�鍙ｏ紒</p><p class=" mar-l-r-4">灏忚殏铓侊細濡傛灉鑳�<span class="un1">鑸斾竴涓�</span>灏卞ソ浜嗭紒</p><p class=" mar-l-r-4">铓傝殎灏忓锛氭垜鐨勫彛姘存祦鍑烘潵浜嗭紒</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氫笉璁哥瀻鎯筹紒涓嶈鍋峰悆锛�<span class="un1">鍑哄彂</span>锛�</p><p class=" mar-l-r-4">銆愰煶涔愯捣锛岃殏铓佷滑鎶潃濂堕叒鍚戝墠璧扮潃銆�</p><p class=" mar-l-r-4">铓傝殎浠細濂堕叒锛佸ザ閰紒鎴戜滑鐨勫ザ閰紒濂堕叒锛佸ザ閰紒鎴戜滑涓�璧峰垎浜��</p><p class=" mar-l-r-4">銆愯殏铓佷滑闄堕唹涓��</p>',
' <p class=" mar-l-r-4">鍢��</p><p class=" mar-l-r-4">銆愯殏铓佷滑鐢ㄥ姴杩囩寷锛屽ザ閰殑涓�涓鎺変簡銆�</p><p class=" mar-l-r-4">铓傝殎灏忓锛�<span class="un1">鍟�</span>锛侀槦闀匡紒濂堕叒鐨勮<span class="un1">鎺変簡</span>锛�</p> <p class=" mar-l-r-4">銆愬ぇ瀹剁湅鍒版帀鍦ㄥ湴涓婄殑濂堕叒銆�</p><p class=" mar-l-r-4">铓傝殎浠細鍝囧摝锛�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氱瓑绛夛紒</p><p class=" mar-l-r-4">銆愯垶鍙板彉鍏夛紝婕斿憳鍔ㄤ綔瀹氭牸銆�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氭帀浜�<span class="un1">涓�涓</span>锛岃繖璇�<span class="un1">鎬庝箞鍔�</span>锛�<span class="un1">涓㈡帀</span>锛屽疄鍦�<span class="un1">澶彲鎯�</span>锛�<span class="un1">瓒佹満鍚冩帀</span>锛屽張瑕佺姱涓嶈鍋峰槾鐨勭浠ゃ�傛�庝箞鍔炲憿锛熸湁涓姙娉曪紒鎴戣鏄�<span class="un1">鍋峰槾</span>璋佷篃<span class="un1">鐪嬩笉瑙�</span>锛�<span class="un1">杩欐牱</span>涓嶅氨琛屽暒锛佸ぇ瀹跺惉濂藉暒锛�</p>',
' <p class=" mar-l-r-4">銆愯垶鍙板彉鍏夛紝婕斿憳绔嬫绔欏ソ銆�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氫紤鎭竴浼氬効锛�</p><p class=" mar-l-r-4">铓傝殎灏忓锛�<span class="un1">涓轰粈涔�</span>瑕佷紤鎭憖锛�</p><p class=" mar-l-r-4">灏忕溂闀滆殏铓侊細闃熼暱锛佽繖鍧楁帀鍦ㄥ湴涓婄殑濂堕叒<span class="un1">鎬庝箞鍔炲憖</span>锛�</p><p class=" mar-l-r-4">澶уご铓傝殎锛氭垜浠涓嶆妸瀹�<span class="un1">鍒嗕簡鍚�</span>锛�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氬惉鎴戣锛�<span class="un1">浼戞伅</span>锛�<span class="un1">绔嬪埢浼戞伅</span>锛佸ぇ瀹舵惉杩愬お杈涜嫤鍟︼紒鍒嗘暎寮�锛屽摢閲屽噳蹇氨鍒板摢閲屼紤鎭紒</p><p class=" mar-l-r-4">銆愬ぇ瀹朵緷鏃т笉鍔ㄣ��</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氬叏浣撻兘鏈夛紒绋嶆伅锛佺珛姝ｏ紒鍚戝悗鈥旇浆锛侀綈姝モ�旇蛋锛�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氱珛鈥斿畾锛佸師鍦颁紤鎭紒</p><p class=" mar-l-r-4">銆愯殏铓佷滑璺熼殢鍙ｄ护娑堝け鍦ㄨ崏涓涢噷銆�</p>',
- ' <p class=" mar-l-r-4">銆愯殏铓侀槦闀垮悜鑽変笡閲屾湜鍘伙紝纭畾娌℃湁澹板搷銆�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙灏忓０锛夊樋鍢垮樋锛屽悆鎺夊悗灏辫琚鍒蛋鎴栬�呭氨璇磋鑰侀拱鍚冩帀灏卞ソ鍟︼紒</p><p class=" mar-l-r-4">銆愯殏铓侀槦闀夸綆涓嬪ご锛屽梾浜嗕竴涓嬪ザ閰��</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氬懗閬�<span class="un1">鐪�</span>棣欙紒</p><p class=" mar-l-r-4">銆愯殏铓侀槦闀跨殑鎵嬩几鍚戝ザ閰福锛岀獊鐒讹紝濂堕叒浜虹珯浜嗚捣鏉ャ��</p><p class=" mar-l-r-4">銆愬彉鍏夈��</p><p class=" mar-l-r-4">濂堕叒浜猴細涓嶈鍚冿紒</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙鍚撲簡涓�璺筹級浣犱綘浣狅紒浣犳�庝箞<span class="un1">绔�</span>璧锋潵鍟︼紒</p><p class=" mar-l-r-4">濂堕叒浜猴細鎴�<span class="un1">瀹炲湪</span>鐪嬩笉涓嬪幓鍟︼紒</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙瀹虫�曪級鏁戝懡鍝囷紒濂堕叒<span class="un1">娲�</span>鍟︼紒</p><p class=" mar-l-r-4">銆愯殏铓侀槦闀胯窇銆�</p><p class=" mar-l-r-4">濂堕叒浜猴細<span class="un1">绔欎綇</span>锛�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氫綘瑕佸共浠�涔堬紵</p><p class=" mar-l-r-4">濂堕叒浜猴細<span class="un1">杩欏潡</span>锛�<span class="un1">浣犱笉鑳藉悆</span>锛�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氫负浠�涔堬紵</p><p class=" mar-l-r-4">濂堕叒浜猴細<span class="un1">绗竴</span>锛�<span class="un1">浣�</span>瀹氱殑瑙勭煩锛屼粖澶╂惉杩愪腑锛�<span class="un1">涓嶈鍋峰悆</span>锛佸鏋�<span class="un1">浣�</span>鍋氫笉鍒帮紝浣犲氨<span class="un1">涓嶈兘瑕佹眰鍒汉</span>锛�<span class="un1">绗簩</span>锛佷綘鏄�<span class="un1">铓傝殎闃熼暱</span>锛屽ぇ瀹堕�変綘褰撻槦闀匡紝鏄浣犵殑<span class="un1">淇′换</span>鍜�<span class="un1">灏婇噸</span>锛佷綘鍗磋儗鐫�澶у<span class="un1">鍋峰悆</span>锛�<span class="un1">绗笁</span>锛�<span class="un1">璇氬疄瀹堜俊</span>鏄編寰凤紝浣犲悆鎺夊ザ閰<span class="un1">鎾掕皫</span>锛屾拻浜�<span class="un1">涓�涓�</span>璋庡氨瑕佺敤<span class="un1">鏃犳暟</span>鐨勮皫鏉ュ渾绗竴涓皫锛屾渶鍚�<span class="un1">杩樻槸</span>浼氳鍙戠幇锛�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙浣庡ご锛夋垜涓嶅悆浜嗭紝鎴戠煡閬�<span class="un1">閿欎簡</span>鈥︹�﹀彲鏄紝杩欐帀鍦ㄥ湴涓婄殑濂堕叒鎬庝箞鍔炲憿锛�</p><p class=" mar-l-r-4">濂堕叒浜猴細锛堟兂浜嗘兂锛�<span class="un1">鏈夊姙娉�</span>锛佷綘鍙互閫夋嫨澶у<span class="un1">涓�璧峰垎</span>锛屼篃鍙互閫夋嫨缁欏勾榫勬渶灏忕殑铓傝殎鍚冿紒</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛�<span class="un1">濂戒富鎰�</span>锛佹垜杩欏氨闂棶澶у锛岃阿璋綘锛�</p><p class=" mar-l-r-4">銆愬彉鍏夛紝濂堕叒鎱㈡參鍦拌汉鍦ㄥ湴涓娿��</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙鍠婏級<span class="un1">娉ㄦ剰鍟�</span>锛佸叏浣撻兘鏈夛紒绋嶆伅锛佺珛姝ｏ紒</p><p class=" mar-l-r-4">鍚戝悗杞紒榻愭璧帮紒</p><p class=" mar-l-r-4">銆愯殏铓佷滑鐢卞洓闈㈠叓鏂硅蛋鍥炴潵銆�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氬ぇ瀹朵紤鎭ソ鍟︼紒鎴戞湁涓�涓�<span class="un1">鍐冲畾</span>锛�</p><p class=" mar-l-r-4">铓傝殎浠細浠�涔堝喅瀹氾紵</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氳繖鐐瑰効濂堕叒娓ｆ槸鍒氭墠寮勬帀鐨勶紝涓簡鍙儨锛岋紙鎸囧悜灏忚殏铓侊級浣犳槸鎴戜滑涓勾榫勬渶灏忕殑锛�<span class="un1">浣�</span>鍚冩帀瀹冨惂锛�</p><p class=" mar-l-r-4">銆愯殏铓佷滑榧撴帉銆�</p><p class=" mar-l-r-4">銆愰煶涔愯捣锛屽ぇ瀹跺姴鍎挎瘮鍒氭墠鏇磋冻锛屾姮璧峰ザ閰悜灞辨礊璧板幓銆�</p><p class=" mar-l-r-4">銆愭敹鍏夈��</p>',
+ ' <p class=" mar-l-r-4">銆愯殏铓侀槦闀垮悜鑽変笡閲屾湜鍘伙紝纭畾娌℃湁澹板搷銆�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙灏忓０锛夊樋鍢垮樋锛屽悆鎺夊悗灏辫琚鍒蛋鎴栬�呭氨璇磋鑰侀拱鍚冩帀灏卞ソ鍟︼紒</p><p class=" mar-l-r-4">銆愯殏铓侀槦闀夸綆涓嬪ご锛屽梾浜嗕竴涓嬪ザ閰��</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氬懗閬�<span class="un1">鐪�</span>棣欙紒</p><p class=" mar-l-r-4">銆愯殏铓侀槦闀跨殑鎵嬩几鍚戝ザ閰福锛岀獊鐒讹紝濂堕叒浜虹珯浜嗚捣鏉ャ��</p><p class=" mar-l-r-4">銆愬彉鍏夈��</p><p class=" mar-l-r-4">濂堕叒浜猴細涓嶈鍚冿紒</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙鍚撲簡涓�璺筹級浣犱綘浣狅紒浣犳�庝箞<span class="un1">绔�</span>璧锋潵鍟︼紒</p><p class=" mar-l-r-4">濂堕叒浜猴細鎴�<span class="un1">瀹炲湪</span>鐪嬩笉涓嬪幓鍟︼紒</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙瀹虫�曪級鏁戝懡鍝囷紒濂堕叒<span class="un1">娲�</span>鍟︼紒</p><p class=" mar-l-r-4">銆愯殏铓侀槦闀胯窇銆�</p><p class=" mar-l-r-4">濂堕叒浜猴細<span class="un1">绔欎綇</span>锛�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氫綘瑕佸共浠�涔堬紵</p><p class=" mar-l-r-4">濂堕叒浜猴細<span class="un1">杩欏潡</span>锛�<span class="un1">浣犱笉鑳藉悆</span>锛�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氫负浠�涔堬紵</p><p class=" mar-l-r-4">濂堕叒浜猴細<span class="un1">绗竴</span>锛�<span class="un1">浣�</span>瀹氱殑瑙勭煩锛屼粖澶╂惉杩愪腑锛�<span class="un1">涓嶈鍋峰悆</span>锛佸鏋�<span class="un1">浣�</span>鍋氫笉鍒帮紝浣犲氨<span class="un1">涓嶈兘瑕佹眰鍒汉</span>锛�<span class="un1">绗簩</span>锛佷綘鏄�<span class="un1">铓傝殎闃熼暱</span>锛屽ぇ瀹堕�変綘褰撻槦闀匡紝鏄浣犵殑<span class="un1">淇′换</span>鍜�<span class="un1">灏婇噸</span>锛佷綘鍗磋儗鐫�澶у<span class="un1">鍋峰悆</span>锛�<span class="un1">绗笁</span>锛�<span class="un1">璇氬疄瀹堜俊</span>鏄編寰凤紝浣犲悆鎺夊ザ閰<span class="un1">鎾掕皫</span>锛屾拻浜�<span class="un1">涓�涓�</span>璋庡氨瑕佺敤<span class="un1">鏃犳暟</span>鐨勮皫鏉ュ渾绗竴涓皫锛屾渶鍚�<span class="un1">杩樻槸</span>浼氳鍙戠幇锛�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙浣庡ご锛夋垜涓嶅悆浜嗭紝鎴戠煡閬�<span class="un1">閿欎簡</span>鈥︹�﹀彲鏄紝杩欐帀鍦ㄥ湴涓婄殑濂堕叒鎬庝箞鍔炲憿锛�</p><p class=" mar-l-r-4">濂堕叒浜猴細锛堟兂浜嗘兂锛�<span class="un1">鏈夊姙娉�</span>锛佷綘鍙互閫夋嫨澶у<span class="un1">涓�璧峰垎</span>锛屼篃鍙互閫夋嫨缁欏勾榫勬渶灏忕殑铓傝殎鍚冿紒</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛�<span class="un1">濂戒富鎰�</span>锛佹垜杩欏氨闂棶澶у锛岃阿璋綘锛�</p><p class=" mar-l-r-4">銆愬彉鍏夛紝濂堕叒鎱㈡參鍦拌汉鍦ㄥ湴涓娿��</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氾紙鍠婏級<span class="un1">娉ㄦ剰鍟�</span>锛佸叏浣撻兘鏈夛紒绋嶆伅锛佺珛姝ｏ紒</p><p class=" mar-l-r-4">鍚戝悗杞紒榻愭璧帮紒</p><p class=" mar-l-r-4">銆愯殏铓佷滑鐢卞洓闈㈠叓鏂硅蛋鍥炴潵銆�</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氬ぇ瀹朵紤鎭ソ鍟︼紒鎴戞湁涓�涓�<span class="un1">鍐冲畾</span>锛�</p><p class=" mar-l-r-4">铓傝殎浠細浠�涔堝喅瀹氾紵</p><p class=" mar-l-r-4">铓傝殎闃熼暱锛氳繖鐐瑰効濂堕叒娓ｆ槸鍒氭墠寮勬帀鐨勶紝涓簡鍙儨锛岋紙鎸囧悜灏忚殏铓侊級浣犳槸鎴戜滑涓勾榫勬渶灏忕殑锛�<span class="un1">浣�</span>鍚冩帀瀹冨惂锛�</p><p class=" mar-l-r-4">銆愯殏铓佷滑榧撴帉銆�</p><p class=" mar-l-r-4">銆愰煶涔愯捣锛屽ぇ瀹跺姴鍎挎瘮鍒氭墠鏇磋冻锛屾姮璧峰ザ閰悜灞辨礊璧板幓銆�</p><p class=" mar-l-r-4">銆愭敹鍏夈��</p>',
],
- activeContent: "", // 褰撳墠鏄剧ず鐨凥TML鍐呭
+ activeContent: "", // 褰撳墠鏄剧ず鐨凥TML鍐呭
chapterData: {
isCollectImg: false,
isCollectVideo: false,
@@ -558,8 +572,8 @@
},
handleCollect(type) {
if (type == "video") {
- this.handleCollectResource("dd44a1e31b4304f50d10b2481a148411","dd44a1e31b4304f50d10b2481a148411",'',"瑙嗛","bits",'瑙嗛锛氬績鏈夊澶э紝鑸炲彴灏辨湁澶氬ぇ')
- }
+ this.handleCollectResource("dd44a1e31b4304f50d10b2481a148411", "dd44a1e31b4304f50d10b2481a148411", '', "瑙嗛", "bits", '瑙嗛锛氬績鏈夊澶э紝鑸炲彴灏辨湁澶氬ぇ')
+ }
this.handleChapterData();
},
showContent(index) {
diff --git a/src/books/artAndDrama/view/components/chapter004.vue b/src/books/artAndDrama/view/components/chapter004.vue
index f8ccd77..dde03c4 100644
--- a/src/books/artAndDrama/view/components/chapter004.vue
+++ b/src/books/artAndDrama/view/components/chapter004.vue
@@ -5,7 +5,7 @@
<h1 id="a004">
<!-- 杩欓噷鐨勫姩鍥炬湁闂锛屾病鏈夎儗鏅浘鐗� -->
<img class="img-0" alt="" src="../../assets/images/dy4.jpg" />
- <audio :src="audioPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
+ <audio style="margin-top: 1em;" :src="audioPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
</h1>
<div class="bodystyle">
<div class="bk">
@@ -33,8 +33,8 @@
<div class="bodystyle" style="margin-top: 3%">
<h2 id="b016" class="problem">绗竴璇俱��涓�妯′竴鏍�</h2>
<h3 class="lefth3" id="c031"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
- <p class="text"><span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅鍥存垚涓�鍦堬紝闈㈡湞鍦堝韫蹭笅锛岀浉閭讳袱浜轰簰鎸庢墜鑷傦紝缁勫憳鍚屾椂绔欒捣鏉ワ紝鐪嬬湅鍝釜缁勬渶蹇紒</p>
- <p class="text t-l"><span class="hs1">鈼�</span>璇翠竴璇达細蹇�熺珯璧锋潵鐨勭璇�鏄粈涔堬紵
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>浠ュ皬缁勪负鍗曚綅鍥存垚涓�鍦堬紝闈㈡湞鍦堝韫蹭笅锛岀浉閭讳袱浜轰簰鎸庢墜鑷傦紝缁勫憳鍚屾椂绔欒捣鏉ワ紝鐪嬬湅鍝釜缁勬渶蹇紒</p>
+ <p class="text t-l rhombusFather"><span class="hs1 rhombus">鈼�</span>璇翠竴璇达細蹇�熺珯璧锋潵鐨勭璇�鏄粈涔堬紵
<textarea v-model="questionData.reading.one" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
:class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')"
@@ -42,7 +42,7 @@
</textarea>
</p>
<h3 class="lefth3" id="c032"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
- <p class="text"><span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅锛岃〃婕斾互涓嬪満鏅紝娉ㄦ剰淇濇寔鍔ㄤ綔涓�鑷村摝銆�</p>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>浠ュ皬缁勪负鍗曚綅锛岃〃婕斾互涓嬪満鏅紝娉ㄦ剰淇濇寔鍔ㄤ綔涓�鑷村摝銆�</p>
<p class="text">铓傝殎闃熼暱鍚瑰搷闆嗗悎鍙凤紝铓傝殎浠繀閫熻窇涓婂満绔欏ソ闃熷舰銆�</p>
<p class="text">铓傝殎浠姮鐫�濂堕叒鍚戝墠璧扮潃銆�</p>
<p class="text">铓傝殎浠窡闅忚殏铓侀槦闀跨殑鍙ｄ护娑堝け鍦ㄨ崏涓涢噷銆�</p>
@@ -66,12 +66,14 @@
<div class="bodystyle" style="margin-top: 3%;">
<h2 id="b017" class="problem">绗簩璇俱��閫犲瀷鍙樺彉鍙�</h2>
<h3 class="lefth3" id="c033"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
- <p class="text"><span
- class="hs1">鈼�</span>鏄ュぉ鏉ヤ簡锛屾槬椋庡惞杩囷紝鏌虫爲鍙戣娊浜嗭紝杩庢槬鑺卞紑浜嗭紝灏忕嚂瀛愬湪澶╃┖鑷敱鍦伴缈斻�備竴鍒囬兘鏄偅涔堢敓鏈哄媰鍕冦�傝涓衡�滄槬澶┾�濇秱涓婁綘鍠滄鐨勯鑹层��</p>
+ <p class="text rhombusFather"><span
+ class="hs1 rhombus">鈼�</span>鏄ュぉ鏉ヤ簡锛屾槬椋庡惞杩囷紝鏌虫爲鍙戣娊浜嗭紝杩庢槬鑺卞紑浜嗭紝灏忕嚂瀛愬湪澶╃┖鑷敱鍦伴缈斻�備竴鍒囬兘鏄偅涔堢敓鏈哄媰鍕冦�傝涓衡�滄槬澶┾�濇秱涓婁綘鍠滄鐨勯鑹层��</p>
<!-- 鍥剧墖缂哄け -->
<!-- <p class="center"><img class="img-e" alt="" src="./../assets/images/0033-1.jpg" /></p> -->
- <graffiti :page="32" :bcImg="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'"
- :imgWidth="596" :imgHeight="500" />
+ <!-- <graffiti :page="32" :bcImg="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'"
+ :imgWidth="596" :imgHeight="500" /> -->
+ <paint :imgUrl="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'" :page="32"
+ />
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
@@ -88,7 +90,7 @@
<img class="headerimg" src="../../assets/images/page5.png" alt="" />
<div class="bodystyle" style="margin-top: 3%;">
<h3 class="lefth3" id="c034"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
- <p class="text"><span class="hs1">鈼�</span>鍔ㄥ姩鎵嬶紝涓恒�婁竴鍧楀ザ閰�嬩腑鐨勮殏铓佽鑹茶璁＄畝鍗曠殑鏈嶈鍚э紒</p>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>鍔ㄥ姩鎵嬶紝涓恒�婁竴鍧楀ザ閰�嬩腑鐨勮殏铓佽鑹茶璁＄畝鍗曠殑鏈嶈鍚э紒</p>
<p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -106,10 +108,17 @@
<div class="bodystyle" style="margin-top: 3%">
<h2 id="b018" class="problem">绗笁璇俱��鍙樺簾涓哄疂</h2>
<h3 class="lefth3" id="c035"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
- <p class="text"><span class="hs1">鈼�</span>浠ュ皬缁勪负鍗曚綅锛屽ご椤剁焊鏉紝鑵垮す鎶ョ焊锛岃繘琛屽す绾歌繍鏉父鎴忥紒</p>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>浠ュ皬缁勪负鍗曚綅锛屽ご椤剁焊鏉紝鑵垮す鎶ョ焊锛岃繘琛屽す绾歌繍鏉父鎴忥紒</p>
<h3 class="lefth3" id="c036" style="margin-top: 7%"><img class="img-gn1" alt=""
src="../../assets/images/czysj.jpg" /></h3>
- <p class="text"><span class="hs1">鈼�</span>璇锋牴鎹�婁竴鍧楀ザ閰�嬬殑鍓ф湰锛屽垪鍑烘紨鍑轰腑闇�瑕佺殑閬撳叿娓呭崟锛岃鎸夌収娓呭崟锛屽埄鐢ㄤ綘鏀堕泦鐨勬棫鐗╁埗浣滈亾鍏峰惂锛�</p>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>璇锋牴鎹�婁竴鍧楀ザ閰�嬬殑鍓ф湰锛屽垪鍑烘紨鍑轰腑闇�瑕佺殑閬撳叿娓呭崟锛岃鎸夌収娓呭崟锛屽埄鐢ㄤ綘鏀堕泦鐨勬棫鐗╁埗浣滈亾鍏峰惂锛�</p>
+ <p class="text">
+ <textarea v-model="questionData.reading.two" placeholder="璇疯緭鍏ュ唴瀹�" rows="6"
+ style="margin: 1em 0; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
+ :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')"
+ @blur="handleBlur('two')">
+ </textarea>
+ </p>
<p class="center"><img class="img-e" alt="" src="../../assets/images/0035-1.jpg" /></p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -128,11 +137,11 @@
<div class="bodystyle" style="margin-top: 3%;">
<h2 id="b019" class="problem">绗洓璇俱��濂囧鐨勮垶鍙�</h2>
<h3 class="lefth3" id="c037"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
- <p class="text"><span class="hs1">鈼�</span>璇蜂綘璇曠潃妯℃嫙婕斿憳鍊欏満銆佽阿骞曪紝鑸炲彴缇庢湳宸ヤ綔浜哄憳杩涜骞曞悗鍑嗗鐨勫満鏅��</p>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>璇蜂綘璇曠潃妯℃嫙婕斿憳鍊欏満銆佽阿骞曪紝鑸炲彴缇庢湳宸ヤ綔浜哄憳杩涜骞曞悗鍑嗗鐨勫満鏅��</p>
<p class="center"><img class="img-e" alt="" src="../../assets/images/0036-1.jpg" /></p>
<h3 class="lefth3" id="c038" style="margin-top: 7%;"><img class="img-gn1" alt=""
src="../../assets/images/czysj.jpg" /></h3>
- <p class="text"><span class="hs1">鈼�</span>閭�璇峰悓浼村叡鍚屽畬鎴愩�婁竴鍧楀ザ閰�嬬殑灞曟紨鍚э紒</p>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>閭�璇峰悓浼村叡鍚屽畬鎴愩�婁竴鍧楀ザ閰�嬬殑灞曟紨鍚э紒</p>
<p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/0036-2.jpg" /></p>
</div>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
@@ -151,8 +160,8 @@
<h2 id="b020" class="problem">鍗曞厓娲诲姩浠诲姟</h2>
<h3 class="lefth3" id="c039"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
<p class="center text1"><span class="hs">褰綋鎿嶇粌涔�</span></p>
- <p class="text ends">
- <span><span class="hs1">鈼�</span>澶撮儴杩愬姩</span>
+ <p class="text ends rhombusFather">
+ <span><span class="hs1 rhombus">鈼�</span>澶撮儴杩愬姩</span>
<span> <audio :src="audioPathTwo" controls controlslist="noplaybackrate nodownload"
class="audio"></audio> </span>
</p>
@@ -160,16 +169,16 @@
<p class="text">绗�2涓叓鎷嶏細宸︽墜瓒婅繃澶撮《鎽稿彸鑰筹紝鍚戝乏杞昏交鍘嬪ご閮ㄣ��</p>
<p class="text">绗�3涓叓鎷嶏細澶撮儴椤烘椂閽堣浆涓�鍦堛��</p>
<p class="text">绗�4涓叓鎷嶏細澶撮儴閫嗘椂閽堣浆涓�鍦堛��</p>
- <p class="text ends">
- <span><span class="hs1">鈼�</span>寮�鑲╃粌涔�</span>
+ <p class="text ends rhombusFather">
+ <span><span class="hs1 rhombus">鈼�</span>寮�鑲╃粌涔�</span>
<span> <audio :src="audioPathThree" controls controlslist="noplaybackrate nodownload"
class="audio"></audio> </span>
</p>
<p class="text">骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鎵撳紑锛屼笌鑲╁悓瀹姐��</p>
<p class="text">绗�1涓叓鎷嶏細绗�1-4鎷嶆墜鑲樺唴渚у悜澶栬浆鍔紝甯﹀姩 鍙岃偐鎵撳紑锛涚5-8鎷嶆墜鑲樺唴渚у悜鍐呮敹鍥烇紝鍚庤儗鎷辫捣锛屽甫鍔ㄥ弻鑲╁唴鎵ｃ��</p>
<p class="text">绗�2鑷崇4涓叓鎷嶏細閲嶅绗�1涓叓鎷嶇殑鍔ㄤ綔銆�</p>
- <p class="text ends">
- <span><span class="hs1">鈼�</span>鎻愭矇鑲╄繍鍔�</span>
+ <p class="text ends rhombusFather">
+ <span><span class="hs1 rhombus">鈼�</span>鎻愭矇鑲╄繍鍔�</span>
<span> <audio :src="audioPathFour" controls controlslist="noplaybackrate nodownload"
class="audio"></audio> </span>
</p>
@@ -191,8 +200,8 @@
<div class="bodystyle" style="margin-top: 3%;">
<p class="text">绗�1鑷崇2涓叓鎷嶏細鍙屾墜涓嬪瀭锛屾墜蹇冨悜涓嬶紝鍙岃偐涓婃彁鍐嶆矇涓嬶紝涓ゆ媿涓�鍔ㄣ��</p>
<p class="text">绗�3鑷崇4涓叓鎷嶏細鍙屾墜涓嬪瀭锛屾墜蹇冨悜涓嬶紝宸﹀彸鑲╄唨渚濇涓婃彁鍐嶆矇涓嬶紝涓�鎷嶄竴鍔ㄣ��</p>
- <p class="text ends">
- <span><span class="hs1">鈼�</span>浼稿睍杩愬姩</span>
+ <p class="text ends rhombusFather">
+ <span><span class="hs1 rhombus">鈼�</span>浼稿睍杩愬姩</span>
<span> <audio :src="audioPathFive" controls controlslist="noplaybackrate nodownload"
class="audio"></audio> </span>
</p>
@@ -201,7 +210,7 @@
<p class="text">绗�2鑷崇4涓叓鎷嶏細閲嶅绗�1涓叓鎷嶇殑鍔ㄤ綔銆�</p>
<h3 class="lefth3" id="c040" style="margin-top: 7%;"><img class="img-gn1" alt=""
src="../../assets/images/tzyys.jpg" /></h3>
- <p class="text"><span class="hs1">鈼�</span>鍐欎竴绡囨帓婕旀�荤粨锛屽垎浜涔犵粡楠屽拰鎰熷彈锛�</p>
+ <p class="text rhombusFather"><span class="hs1 rhombus">鈼�</span>鍐欎竴绡囨帓婕旀�荤粨锛屽垎浜涔犵粡楠屽拰鎰熷彈锛�</p>
<p class="center text">
<video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
@@ -228,7 +237,7 @@
</template>
<script>
import { getResourcePath } from "@/assets/methods/resources";
-import graffiti from '@/components/graffiti/index.vue'
+import paint from '@/components/paint/index.vue'
import { getCollectResource, setCollectResource } from "@/assets/methods/resources";
export default {
name: "chapterFour",
@@ -237,7 +246,9 @@
type: Array,
},
},
- components: { graffiti },
+ components: {
+ paint
+ },
//鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
async mounted() {
this.getVidoePath();
@@ -276,6 +287,7 @@
},
reading: {
one: "",
+ two: "",
},
table: {
one: "",
diff --git a/src/books/artAndDrama/view/components/chapter005.vue b/src/books/artAndDrama/view/components/chapter005.vue
index be49fe1..4864f66 100644
--- a/src/books/artAndDrama/view/components/chapter005.vue
+++ b/src/books/artAndDrama/view/components/chapter005.vue
@@ -36,7 +36,7 @@
<div class="page-box" page="39">
<div v-if="showPageList.indexOf(39) > -1">
<h1>
- <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto;" >
+ <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto;">
</h1>
<img class="headerimg mar-b-5" src="../../assets/images/page5.png" alt="" />
<div class="bodystyle">
@@ -199,6 +199,11 @@
<div class="page-footer-number-left">40</div>
</div>
</div>
+ <div class="page-box mt-20" page="44" style="padding-bottom: 0px;">
+ <div v-if="showPageList.indexOf(44) > -1">
+ <img class="img-0" alt="" src="../../assets/images/fengdi.png" />
+ </div>
+ </div>
</div>
</template>
@@ -253,18 +258,22 @@
background-color: rgb(188, 220, 164);
padding: 5% 0%;
}
-.mar-t-b-5{
+
+.mar-t-b-5 {
margin: 5% 0;
}
-.mar-b-5{
+
+.mar-b-5 {
margin-bottom: 5%;
}
-.selections{
+
+.selections {
margin-top: 5%;
margin-bottom: 1%;
margin: 5% 8% 1% 8%
}
-.ft-25{
+
+.ft-25 {
font-size: 25px;
font-family: "STkaiti";
}
diff --git a/src/books/artAndDrama/view/components/header.vue b/src/books/artAndDrama/view/components/header.vue
index aba635a..2c02f5c 100644
--- a/src/books/artAndDrama/view/components/header.vue
+++ b/src/books/artAndDrama/view/components/header.vue
@@ -15,23 +15,23 @@
<ul class="fl fl-cl ju-bt pg-mh" style="display: flex; flex-direction: column; justify-content: flex-end; " >
<li>
<div class="bodystyle" style="margin-bottom: 100px;" >
- <p id="a003" class="front left1">缂栧浼�</p>
+ <p id="a003" class="front left1 kaiti fw-b">缂栧浼�</p>
<hr style="margin-bottom: 5%;" />
- <p class="left1" >椤俱��銆�闂細<span class="kaiti">褰悏璞°��涓ョ嚂鐢�</span></p>
- <p class="left1" >涓汇��銆�缂栵細<span class="kaiti">楹绘枃鐞�</span></p>
- <p class="left1" >鍓� 涓� 缂栵細<span class="kaiti">闄堛��鍒�</span></p>
+ <p class="left1 kaiti" >椤俱��銆�闂細<span class="kaiti">褰悏璞°��涓ョ嚂鐢�</span></p>
+ <p class="left1 kaiti" >涓汇��銆�缂栵細<span class="kaiti">楹绘枃鐞�</span></p>
+ <p class="left1 kaiti" >鍓� 涓� 缂栵細<span class="kaiti">闄堛��鍒�</span></p>
<ul class="fl left1">
<li>
- <p class="wh-nr left1" style="margin: 0%;">缂栧啓濮斿憳锛�</p>
+ <p class="wh-nr left1 kaiti" style="margin: 0%;">缂栧啓濮斿憳锛�</p>
</li>
<li class="fl fl-cl">
<span class="kaiti">鐜嬭胺宸濄��璋㈤湝鍗椼��鏉庢櫒鎴愩��鍛ㄥ姏鍚涖��闊╃嚂妤犺彶</span>
</li>
</ul>
- <p class="left1">缇庢湳缁樼敾锛�<span class="kaiti">浣曘��鍐�</span></p>
+ <p class="left1 kaiti">缇庢湳缁樼敾锛�<span class="kaiti">浣曘��鍐�</span></p>
<ul class="fl">
<li>
- <p class="wh-nr left1" style="margin: 0%;">鐗堟潈璇存槑锛�</p>
+ <p class="wh-nr left1 kaiti" style="margin: 0%;">鐗堟潈璇存槑锛�</p>
</li>
<li class="fl fl-cl">
<span class="kaiti">鏈功閮ㄥ垎鏂囧瓧浣滃搧钁椾綔鏉冪敱涓浗鏂囧瓧钁椾綔鏉冨崗浼氭巿鏉冿紝</span>
diff --git a/src/books/artAndDrama/view/components/index.vue b/src/books/artAndDrama/view/components/index.vue
index 9c02de6..a2b876d 100644
--- a/src/books/artAndDrama/view/components/index.vue
+++ b/src/books/artAndDrama/view/components/index.vue
@@ -186,7 +186,7 @@
// 娴嬭瘯椤甸潰璺宠浆
// setTimeout(() => {
- // this.gotoPage(3,24);
+ // this.gotoPage(5,3);
// setTimeout(() => {
// this.renderSign("Highlight", {
// id: "2ACA9359",
diff --git a/src/components/dragQuestion/index.vue b/src/components/dragQuestion/index.vue
index f057489..cc91498 100644
--- a/src/components/dragQuestion/index.vue
+++ b/src/components/dragQuestion/index.vue
@@ -1,8 +1,8 @@
<template>
<div class="drag-box" :style="{ borderColor: bcColor }">
<div class="title-box">
- <p class="text" style="text-indent: 2em !important">
- <span class="hs1">鈼�</span>{{ titileText }}
+ <p class="text rhombusFather" style="text-indent: 2em !important">
+ <span class="hs1 rhombus">鈼�</span>{{ titileText }}
</p>
<span
class="svg-btn t0"
diff --git a/src/components/paint/index.vue b/src/components/paint/index.vue
index e10c782..11f9075 100644
--- a/src/components/paint/index.vue
+++ b/src/components/paint/index.vue
@@ -22,7 +22,7 @@
<option
v-for="(item, index) in modelList"
:value="item.value"
- ::key="index"
+ :key="index"
>
{{ item.name }}
</option>
--
Gitblit v1.9.1