src/App.vue
@@ -8,6 +8,7 @@ v-if="activeBook.name == 'sportsAndHealth'" ></sportsAndHealth> <artAndDance v-if="activeBook.name == 'artAndDance'"></artAndDance> <artAndDrama v-if="activeBook.name == 'artAndDrama'"></artAndDrama> </div> </template> @@ -18,6 +19,7 @@ import english from "./books/English/view/index.vue"; import sportsAndHealth from "./books/sportsAndHealth/view/index"; import artAndDance from './books/artAndDance/view/index.vue' import artAndDrama from './books/artAndDrama/view/index.vue' export default { name: "App", @@ -27,7 +29,8 @@ embedded, english, sportsAndHealth, artAndDance artAndDance, artAndDrama }, data() { return { @@ -72,7 +75,8 @@ // embedded // english // artAndDance this.config.resourceCtx + "sportsAndHealth" // artAndDrama this.config.resourceCtx + "artAndDrama" ); // æµè¯è¯è¯»30页 // this.activeBook.tryPageCount = 10; src/books/artAndDance/view/components/header.vue
@@ -69,4 +69,7 @@ }; </script> <style scoped></style> <style scoped> </style> src/books/artAndDrama/assets/images/0007-1.jpg
New file @@ -0,0 +1,563 @@ .ans-drama { width: 100%; height: 100%; font-family: "å®ä½", 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; } ul { list-style-type:none; } li { 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; } span.under1{ border-bottom:2px solid #F0BD4A; border-width:2px; } div.bodystyle { font-size:18px; text-align:justify; margin:5%; line-height:30px; } span.zt-0 { color:#0087AF; } p.pzt-0 { color:#0087AF; font-size:18px; } p.pzt-0-right { font-size:18px; color:#0087AF; text-align:right; } p.pzt-1 { font-weight:bold; color:#0087AF; font-size:18px; } .note{ font-size:0.85em; } .img{ text-align:center; font-size:0.8em; color:#5D78BB; margin-left:0%; margin-right:0%; text-indent:0em; } .img1{ text-align:right; font-size:0.85em; margin-left:0%; margin-right:2em; text-indent:0em; } p { margin-top:1em; text-indent:2em; line-height:30px; font-size:18px; text-align:justify; } .cover { width:100%; padding:0px; } .center { text-align:center; margin-left:0%; margin-right:0%; text-indent:0em; } .center1 { font-family:"STKaiti"; text-align:center; margin-left:0%; margin-right:0%; font-size:1.2em; text-indent:0em; font-weight:bold; } .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 { font-family:"STKaiti"; text-align:center; font-size:1.8em; color:#515594; margin-bottom:0.5cm; 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:1.5em; margin-bottom:1.5em; text-indent:0em; } h2.whleft2{ text-align:left; color:#AF0206; font-size:1.2em; margin-top:0.2em; margin-bottom:0.2em; text-indent:0em; } h3 { font-family:"STKaiti"; color:#EF495D; font-weight:bold; font-size:1.2em; margin-top:2em; text-align:center; margin-bottom:2em; text-indent:0em; } h3.lefth3{ text-align:left; margin-top:0.2em; margin-bottom:0.2em; text-indent:0em; } h4 { font-weight:bold; color:#5877BA; font-size:1.1em; margin-top:0.2em; margin-bottom:1em; text-indent:0em; } h5 { font-weight:bold; color:#C96653; font-size:1em; margin-top:0.2em; margin-bottom:1em; text-indent:2em; } h6 { font-family:"cnepub", serif; color:#36C3F4; font-size:1.1em; margin-top:10px; text-indent:2em; margin-bottom:10px; } .u { text-decoration:underline; } .img-0{ width:100%; } .imz{ width:96%; text-align:center; } .img-a{ width:95%; } .img-b{ width:80%; } .img-c{ width:70%; } .img-d{ width:60%; } .img-e{ width:50%; } .img-f{ width:40%; } .img-g{ width:30%; } .img-gh1{ width:30%; text-align:right; } .img-gh2{ width:45%; text-align:right; } .img-h{ width:25%; } .img-i{ width:10%; } .img-j{ width:5%; } .inline{ height:2em; margin-bottom:-0.5em; } .inline1{ height:1.5em; margin-top:-1em; margin-bottom:-0.4em; } .inline2{ height:2.5em; margin-top:2em; margin-bottom:-0.4em; } .inline3{ height:4em; margin-top:2em; margin-bottom:-0.4em; } .block { font-family:"STKaiti"; font-size:1.15em; } .block1 { font-family:"STKaiti"; color:#08A496; text-align:right; font-size:1.15em; margin-right:2em; text-indent:0em; } .block2 { font-family:"STKaiti"; font-size:1.15em; text-align:center; text-indent:0em; } .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; } .kaiti{ font-family:"STKaiti"; } div.bk{ border:4px dashed #3FB135; padding:15px; 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; } .img-gn{ height:2em; margin-bottom:-0.4em; } .img-gn1{ height:2em; } div.bj3{ background:#C6DFA5; padding:0.2em 0.5em 0.2em 0.5em; margin-top:1em; margin-left:0.5em; margin-right:0.5em; border-radius:1em; margin-bottom:1.5em; font-size:1.1em; } // èªå®ä¹ .page-box { position: relative; box-sizing: border-box; min-height: 1150px; margin-bottom: 20px; box-shadow: 0 3px 6px 1px #00000029; background-color: #fff; } ul { list-style: none; margin: 0; padding: 0; } .fl { display: flex; } .fw-wr { flex-wrap: wrap; } .fl-cl { flex-direction: column; } .ju-bt { justify-content: space-between; } .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; } .fm-son { font-family: "å®ä½", SimSun, sans-serif; } .auido-text { font-size: 22px; font-family: "FangSong", "PMingLiU", serif; font-weight: bold; } .input-bottom-border { border: 0; border-bottom: 1px solid #000000; width: 40%; &:focus { outline: none; } } /* åªä½æ¥è¯¢ååºç¡ååºå¼å¸å± */ @media (max-width: 660px) { .ans-drama { /* å页padding */ .page-padding { padding: 104px 20px; } .padding-96 { padding: 0 20px 104px 20px; } /* videoå¤§å° */ .video-box { max-width: 260px; } } } @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; } src/books/artAndDrama/view/components/chapter001.vue
New file @@ -0,0 +1,714 @@ <template> <div class="chapter" num="2"> <div class="page-box" page="4" style="min-height: auto"> <div v-if="showPageList.indexOf(4) > -1"> <h1 id="a004"> <!-- è¿éçå¨å¾æé®é¢ï¼æ²¡æèæ¯å¾ç --> <img class="img-0" alt="" src="../../assets/images/dy1.jpg" /> <audio :src="auidoPathOne" controls></audio> </h1> <div class="bodystyle"> <div class="bk"> <div class="bj1"> <p class="left"> <img class="img-gn" alt="" src="../../assets/images/dydd.jpg" /> </p> </div> <p class="block"> å¨æ äºãä¸åå¥¶é ªãä¸ï¼èè家åºçæ¯ä¸ä½æåé½ä¸ºäºå ±åçç®æ åå·¥åä½ãåªåå¥æï¼å¨é¢å¯¹è¯±æåæææ¶æ´æ¯ä¸¥äºå¾å·±ãéµå®å¢é纪å¾ãæ¬åå ï¼è®©æ们读ä¸è¯»ãä¸åå¥¶é ªãçæ äºï¼å¦ä¹ èè们çä¼ç§åæ ¼å§ï¼ </p> </div> </div> <p><br /></p> <h1><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1> </div> </div> <div class="page-box" page="5" style="min-height: auto"> <div v-if="showPageList.indexOf(5) > -1"> <h1> <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" /> </h1> <div class="bodystyle"> <img src="../../assets/images/page5.png" alt="" /> <h2 id="b001">第ä¸è¯¾ãé½å¿åå</h2> <h3 class="lefth3" id="c001"> <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /> </h3> <p> å¨è¯è¨è¡¨è¿°ä¸ï¼ä¸ºäºçªåºæ强è°æäºææï¼æ们ä¼ä½¿ç¨âé»è¾éé³âè¿ä¸æå·§ãåæ ·ä¸å¥è¯ï¼ä¸åçé»è¾éé³å¯ä»¥è¡¨è¾¾åºä¸ä¸æ ·çææã </p> <p> <span class="hs1">â</span >大声æ读ä¸é¢çå¥åï¼è¿ä¸è¿ä¸åé»è¾éé³å¼ºè°çææã </p> <h1> <audio :src="auidoPathTwo" controls></audio> </h1> <p>å°æ示ï¼å ç¹çæå为æ¬å¥è¯ä¸çé»è¾éé³ï¼å¨æ读åé³æ¶è¯·é读ã</p> <!-- è¿çº¿é¢ --> <matching :rawData="rawData" :item="question"></matching> </div> <p><br /></p> <!-- æ¤æ¬¡ä¸ºé¡µèé¨åï¼éè¦è®¾ç½®é¡µç ï¼ --> <div style="position: relative; "> <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; left: 98px; top: 38px; text-align: center; font-size: 25px;">2</div> <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1> </div> </div> </div> <div class="page-box" page="6" style="min-height: auto"> <div v-if="showPageList.indexOf(6) > -1"> <h1> <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" /> </h1> <div class="bodystyle"> <h1 class="lefth3" id="c002"> <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /> </h1> <p><span class="hs1">â</span>请éåºä½ 认为æ£ç¡®ççæ¡ã</p> <p class="center openImgBox"> <img class="img-e" alt="" src="../../assets/images/1-2èè举大æ .gif" /> </p> <p>èèæ¯å ¸åçï¼ããï¼æè«ãï¼å¤éï¼</p> <p>A.ç¾¤å± </p> <p>B.社ä¼æ§</p> <p>C.ç¬å± </p> <p>èèå é¨æï¼ããï¼åå·¥ãï¼å¤éï¼</p> <p>A.æç¡®ç</p> <p>B.å¥æªç</p> <p>C.æåºç</p> <p>ä¸ä¸ªï¼ããï¼ç¾¤ä½å°ä¸äºé»å¥çé åãï¼å¤éï¼</p> <p>A.å¢ç»ç</p> <p>B.ä¼ç§ç</p> <p>C.æ¾æ£ç</p> <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls controlslist="nodownload" class="w100" style="margin-top: 40px; border-radius: 10px; border: 2px solid green;" ></video> <h2>è§é¢: æ们æ¯ä¸å®¶äºº</h2> </div> <p class="center"> <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> </p> </div> </div> <div class="page-box" page="7" style="min-height: auto"> <div v-if="showPageList.indexOf(7) > -1"> <h1> <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" /> </h1> <div class="bodystyle"> <img src="../../assets/images/page5.png" alt="" /> <h2 id="b002">第äºè¯¾ã津津ä¹é</h2> <h3 class="lefth3" id="c003"> <img class="img-gn1" alt="" src="image/rhybx.jpg" /> </h3> <p> <span class="hs1">â</span >请å°ä»¥ä¸è¯¾æé段大声æ诵åºæ¥ï¼å ç¹çå请é读ã </p> <h1><audio :src="auidoPathThree" controls></audio></h1> <div class="bj3"> <p class="center"> <span class="hs" >æ¥<a id="w1"><sup>1</sup></a>ï¼èéï¼</span> </p> <p class="center">æ±èªæ¸ </p> <p class="block"> ç¼æçï¼<span class="un1">ç¼æç</span>ï¼ä¸é£æ¥äºï¼æ¥å¤©çèæ¥<span class="un1" >è¿</span >äºã </p> <p class="block"> ä¸åé½å<span class="un1">åç¡é</span>çæ ·åï¼æ¬£æ¬£ç¶<span class="un1" >å¼ å¼</span >äºç¼ãå±±<span class="un1">æ润</span>èµ·æ¥äºï¼æ°´<span class="un1" >涨</span >èµ·æ¥äºï¼å¤ªé³çè¸<span class="un1">红</span>èµ·æ¥äºã </p> </div> <h3 class="lefth3" id="c004"> <img class="img-gn1" alt="" src="image/czysj.jpg" /> </h3> <p> <span class="hs1">â</span >å¨ãä¸åå¥¶é ªãçæ äºä¸ï¼å°èè们é½æåèªçç«åºï¼ä½ è½ç解ä»ä»¬çæ³æ³åï¼è¯·ä½ ååä¼´æ ¹æ®æ äºå 容讨论ä¸ä¸ã </p> <hr /> <p class="note"> <a id="m1">1</a> æ±èªæ¸ ï¼ãæ¥ãï¼è§æ¸©åæçï¼ãä¹å¡æè²æç§ä¹¦ è¯æ ä¸å¹´çº§ä¸åãï¼2页ï¼å京ï¼äººæ°æè²åºç社ï¼2016ã </p> </div> <!-- æ¤æ¬¡ä¸ºé¡µèé¨åï¼éè¦è®¾ç½®é¡µç ï¼ --> <div> <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; margin-left: 98px; margin-top: 38px; text-align: center; font-size: 25px;">4</div> <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1> </div> </div> </div> <div class="page-box" page="8" style="min-height: auto"> <div v-if="showPageList.indexOf(8) > -1"> <h1> <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" /> </h1> <div class="bodystyle"> <img src="../../assets/images/page5.png" alt="" /> <h2 id="b003">第ä¸è¯¾ãå å¿ç声é³</h2> <h1 class="lefth3 openImgBox" id="c005"> <img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" /> </h1> <p> <span class="hs1">â</span >请å°ä»¥ä¸è¯¾æé段大声æ诵åºæ¥ï¼å ç¹çå请é读ã </p> <h1><audio :src="auidoPathTwo" controls></audio></h1> <div class="bj3"> <p class="center"> <span class="hs" >æ¥<a id="w1"></a><sup>1</sup>ï¼èéï¼</span > </p> <p class="center">æ±èªæ¸ </p> <p class="block"> å°èå·å·å°ä»åé<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> </div> <h3 class="lefth3" id="c006"> <img class="img-gn1" alt="" src="image/czysj.jpg" /> </h3> <p class="center"> <img class="img-e" alt="" src="image/0010-1.jpg" /> </p> <hr /> <p class="note"> <a id="m1">1</a> æ±èªæ¸ ï¼ãæ¥ãï¼è§æ¸©åæçï¼ãä¹å¡æè²æç§ä¹¦ è¯æ ä¸å¹´çº§ä¸åãï¼2页ï¼å京ï¼äººæ°æè²åºç社ï¼2016ã </p> </div> </div> <!-- æ¤æ¬¡ä¸ºé¡µèé¨åï¼éè¦è®¾ç½®é¡µç ï¼ --> <div> <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; margin-left: 98px; margin-top: 38px; text-align: center; font-size: 25px;">6</div> <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1> </div> </div> <div class="page-box" page="9" style="min-height: auto"> <div v-if="showPageList.indexOf(9) > -1"> <h1> <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" /> </h1> <div class="bodystyle"> <img src="../../assets/images/page5.png" alt="" /> <h3 class="lefth3" id="c006"> <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /> </h3> <h1 class="center openImgBox"> <img class="img-e" alt="" src="../../assets/images/1-4.gif" style="height: auto; width: 50%" /> </h1> <p> <span class="hs1">â</span >çæ´»ä¸ï¼æ们æ»ä¼éå°åç§åæ ·ç诱æãé¢å¯¹è¯±ææ¶ï¼æ们çå å¿å¸¸å¸¸ä¼æ两个ä¸åç声é³åºç°ï¼ä¸ä¸ªå£°é³è¦æ±æ们严äºå¾å·±ï¼å¦ä¸ä¸ªå£°é³è¦æ±æ们éå¿æ欲ãè¯·ä½ åæä¸ä¸ï¼å½èèéé¿é¢å¯¹æè½çå¥¶é ªæ¸£ç诱ææ¶ï¼ä»å å¿ç两个声é³ä¼è¯´äºä»ä¹å¢ï¼ </p> <p>æ£ä¹éé¿ï¼â <input v-model="questionData.warnUp.one.value" class="input-bottom-border fz-18" @blur="handleQuestion('one')" @change="setBookQuestion" />â</p> <p>é»æéé¿ï¼â <input v-model="questionData.warnUp.one.value" class="input-bottom-border fz-18" @blur="handleQuestion('two')" @change="setBookQuestion" />â</p> </div> </div> <!-- æ¤æ¬¡ä¸ºé¡µèé¨åï¼éè¦è®¾ç½®é¡µç ï¼ --> <div> <div style="position: absolute; z-index: 99;background-color: rgba(208,226,179); width: 30px; height: 30px; border-radius: 50%; margin-left: 98px; margin-top: 38px; text-align: center; font-size: 25px;">8</div> <h1 style="position: relative; z-index: 1;"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1> </div> </div> <div class="page-box" page="10" style="min-height: auto"> <div v-if="showPageList.indexOf(10) > -1"> <h1> <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" /> </h1> <div class="bodystyle"> <h2 id="b004">第å课ãèº«ä¸´å ¶å¢</h2> <h3 class="lefth3" id="c007"> <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /> </h3> <p> <span class="hs1">â</span >请å°ä»¥ä¸è¯¾æé段大声æ诵åºæ¥ï¼å ç¹çå请é读ã </p> <h1> <audio :src="auidoPathTwo" controls></audio> </h1> <div class="bj3"> <p class="center"> <span class="hs" >æ¥<a id="w1"><sup>1</sup></a >ï¼èéï¼</span > </p> <p class="center">æ±èªæ¸ </p> <p class="block"> <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> </div> <h3 class="lefth3" id="c008"> <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /> </h3> <p> <span class="hs1">â</span >åå¦ä½ æ¯æ¬è¿å¥¶é ªçèèï¼ä½ è¦æä¹æ¬è¿ä¸åå½¢ç¶ã大å°çå¥¶é ªå¢ï¼è¯·å 为èªå·±è®¾è®¡ä¸ä¸ªå§æ¬å§ï¼ </p> <p> ææ¯èè <input v-model="questionData.warnUp.one.value" class="input-bottom-border fz-18" style=" width: 10%;" @blur="handleQuestion('three')" @change="setBookQuestion" />ï¼ååï¼ï¼ä»å¤©æ¯ <input v-model="questionData.warnUp.one.value" class="input-bottom-border fz-18" style=" width: 10%;" @blur="handleQuestion('four')" @change="setBookQuestion" />ï¼å¤©æ°ï¼ï¼æçå¥¶é ªç¹å« <input v-model="questionData.warnUp.one.value" class="input-bottom-border fz-18" style=" width: 10%;" @blur="handleQuestion('five')" @change="setBookQuestion" />ï¼è½»/éï¼ï¼ææè§å¥½ <input v-model="questionData.warnUp.one.value" class="input-bottom-border fz-18" style=" width: 10%;" @blur="handleQuestion('six')" @change="setBookQuestion" />ï¼èº«ä½æè§ï¼åï¼ </p> <hr /> <p class="note"> <a id="m1">1</a> æ±èªæ¸ ï¼ãæ¥ãï¼è§æ¸©åæçï¼ãä¹å¡æè²æç§ä¹¦ è¯æ ä¸å¹´çº§ä¸åãï¼2页ï¼å京ï¼äººæ°æè²åºç社ï¼2016ã </p> </div> </div> <p class="center"> <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> </p> </div> <div class="page-box" page="11" style="min-height: auto"> <div v-if="showPageList.indexOf(11) > -1"> <h1> <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" /> </h1> <div class="bodystyle"> <img src="../../assets/images/page5.png" alt="" /> <p class="center openImgBox"> <img class="img-e" alt="" src="../../assets/images/1-5.gif" /> </p> <p> <span class="hs1">â</span >èèéé¿æå¥¶é ªæ¸£çç»äºå¹´é¾æå°çèèï¼èµ¢å¾äºå¤§å®¶ç认å¯ãå¨çæ´»ä¸ï¼ä½ æ¾ç»åâèèéé¿âä¸æ ·ç±æ¤å¼±å°åï¼æè åâå°èèâä¸æ ·å¾å°è¿å¥å¥å§å§ä»¬çå ³ç±åï¼ </p> </div> </div> <p class="center"> <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> </p> </div> <div class="page-box" page="12" style="min-height: auto"> <div v-if="showPageList.indexOf(12) > -1"> <h1> <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" /> </h1> <div class="bodystyle"> <h2 id="b005">åå æ´»å¨ä»»å¡</h2> <h3 class="lefth3" id="c009"> <img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /> </h3> <p><span class="hs1">â</span>æ¾å¤§ç¼©å°</p> <p> è¯·ä½ äº¤æ¿âæ¾å¤§âåâ缩å°âäºå®ãå¨âæ¾å¤§âæ¶ï¼æ³è±¡äºå®è¦é£å°å¤å¤ªç©ºï¼å¨â缩å°âæ¶ï¼æ³è±¡äºå®å ¨é¨ç¼©å°å°äºé¼»å°ä¸ã </p> <p><span class="hs1">â</span>æåè¹æè</p> <p> æ³è±¡ä½ å¨ä¸ä¸ªéççå°æ¹ï¼è°é½ä¸è®¤è¯ï¼çªç¶éè§äºå¥½æåï¼ä½ å¾é«å ´ï¼ä¸ååä»/她ææå¼ãåä¸åä½ æ¤æ¶ç表æ å§ã </p> <p><span class="hs1">â</span>å¾®ç¬è¯´âangâ</p> <p> è¯·ä½ è¯ä¸è¯å¨æåè¹æèçåºç¡ä¸ï¼ååºâangâçé³ã声é³è¦å°½å¯è½æé¿ãä¿æ稳å®ï¼å¹¶åè¿éã </p> <p><span class="hs1">â</span>åè¿å±±åâé¿æ¯â</p> <p> æ³è±¡èªå·±ç«å¨ä¸åº§é«å±±ä¸ï¼å¥½æåâé¿æ¯âç«å¨å¯¹é¢çé«å±±ä¸ï¼ä½ è¦å¦ä½åä»å¢ï¼ </p> </div> </div> <p class="center"> <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> </p> </div> <div class="page-box" page="13" style="min-height: auto"> <div v-if="showPageList.indexOf(13) > -1"> <h1> <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" /> </h1> <div class="bodystyle"> <h3 class="lefth3" id="c010"> <img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" /> </h3> <p><span class="hs1">â</span>æä¸æ·æ¼ä¸æ¼ï¼åè让梨</p> <p> åèåå²å°±æ礼è²ãç¥è°¦è®©ï¼æ¯æ们å¦ä¹ ç好æ¦æ ·ï¼è®©æ们è¿ç¨æ¬åå çæå§ç¥è¯ï¼æä»çæ äºè¡¨æ¼åºæ¥å§ï¼ </p> <p class="center"> <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls controlslist="nodownload" class="w100" style="margin-top: 40px; border-radius: 10px; border: 2px solid green;" ></video> <h2>è§é¢: æ们æ¯ä¸å®¶äºº</h2> </p> </div> </div> <p class="center"> <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> </p> </div> </div> </template> <script> import matching from "@/components/matching/matching.vue"; import { getResourcePath } from "@/assets/methods/resources"; export default { name: "chapterOne", components: { matching }, props: { showPageList: { type: Array, }, }, //å¨è¿é对è°ç¨çæ¹æ³è¿è¡æè½½ mounted() { this.getVidoePath(); }, data() { return { videoPathOne: "", auidoPathOne: "", auidoPathTwo: "", rawData: { left: [ { oldId: "FB34", txt: "æè¯·ä½ åè¹æå§ï¼", }, { oldId: "64D6", txt: "æè¯·ä½ åè¹æå§ï¼", }, { oldId: "2ED4", txt: "æè¯·ä½ åè¹æå§ï¼", }, { oldId: "44DE", txt: "æè¯·ä½ åè¹æå§ï¼", }, ], right: [ { oldId: "64D6", txt: "强è°æ¯è¯·å®¢", }, { oldId: "FB34", txt: "强è°è¯·çæ¯âä½ â", }, { oldId: "2ED4", txt: "强è°åçä¸è¥¿æ¯âè¹æâ", }, { oldId: "44DE", txt: "强è°è¯·å®¢ç人æ¯âæâ", }, ], }, question: { KnowledgePoint: "123", analysis: "123", answer: [ { id: "FB34", linkValue: "æè¯·ä½ åè¹æå§ï¼", value: "强è°æ¯è¯·å®¢", }, { id: "64D6", linkValue: "æè¯·ä½ åè¹æå§ï¼", value: "强è°è¯·çæ¯âä½ â", }, { id: "2ED4", linkValue: "æè¯·ä½ åè¹æå§ï¼", value: "强è°åçä¸è¥¿æ¯âè¹æâ", }, { id: "44DE", linkValue: "æè¯·ä½ åè¹æå§ï¼", value: "强è°è¯·å®¢ç人æ¯âæâ", }, ], optionStyle: undefined, id: 489306, options: { linkValues: [ { oldId: "64D6", txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.", }, { oldId: "44DE", txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.", }, { oldId: "FB34", txt: "The clothing material is quite popular among Roman women inancient times.", }, { oldId: "2ED4", txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.", }, ], values: [ { oldId: "FB34", txt: "Martin Silk", }, { oldId: "64D6", txt: "The Great Wall", }, { oldId: "2ED4", txt: "Chinese Food", }, { oldId: "44DE", txt: "Chinese Tea", }, ], }, questionType: "matching", stem: { stemTxt: "æ顺åºè¿çº¿", }, stemStyle: undefined, titleDescription: "1", userChoise: [], value: [], }, questionData: { warnUp: { one: { value: "", isRight: null, answer: "Chinese knot", }, two: { value: "", isRight: null, answer: "Chinese medicine", }, three: { value: "", isRight: null, answer: "Chinese calligraphy", }, four: { value: "", isRight: null, answer: "Taichi", }, five: { value: "", isRight: null, answer: "sweet dumpling", }, six: { value: "", isRight: null, answer: "Chinese chess", }, }, reading: { one: "", two: "", }, table: { one: "", two: "", three: "", four: "", five: "", six: "", seven: "", enight: "", nine: "", }, }, }; }, methods: { //è§é¢åé³é¢çMD5å°å async getVidoePath() { this.videoPathOne = await getResourcePath( "691cbd2c13198d04afc7800d0f2cafb0" ); this.videoPathTwo = await getResourcePath( "a3c9b55ac8227e4c885384ff2fc6c0e7" ); this.videoPathThree = await getResourcePath( "dd44a1e31b4304f50d10b2481a148411" ); this.videoPathFour = await getResourcePath( "09de7704eeaaf3a210b8c6af0a94d545" ); this.auidoPathOne = await getResourcePath( "2c5f6c69b0f9f7a3c03e473cb8c977f5" ); this.auidoPathTwo = await getResourcePath( "e93c0fdde08be5a4386c8c863892a287" ); this.auidoPathThree = await getResourcePath( "e93c0fdde08be5a4386c8c863892a287" ); }, }, }; </script> <style lang="less" scoped> .w70 { width: 78%; } .fw-400 { font-weight: 400 !important; } .fz-26 { font-size: 26px !important; } .cover-img { position: absolute; top: 33%; left: 23%; } .division-line { width: 2px; height: 100%; background-color: red; } </style>
New file @@ -0,0 +1,633 @@ <template> <div class="chapter" num="3"> <div class="page-box" page="14" style="min-height: auto"> <div v-if="showPageList.indexOf(14) > -1"> <h1 id="a004"> <!-- è¿éçå¨å¾æé®é¢ï¼æ²¡æèæ¯å¾ç --> <img class="img-0" alt="" src="../../assets/images/dy2.jpg" /> <audio :src="auidoPathOne" controls></audio> </h1> <div class="bodystyle"> <div class="bk"> <div class="bj1"> <p class="left"> <img class="img-gn" alt="" src="../../assets/images/dydd.jpg" /> </p> </div> <p class="block"> æå§è¡¨æ¼ä¸çå¨ä½ãä½æãç¼ç¥ã声é³å¨å¡é è§è²æ¶èµ·å°äºéè¦çä½ç¨ãæ¬åå æ们å°ç»§ç»å¦ä¹ ãä¸åå¥¶é ªãçæ äºï¼å¹¶ä»¥å¶å§çå½¢å¼è¿è¡è¡¨æ¼ã </p> </div> </div> <p><br /></p> <h1><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1> </div> </div> <div class="page-box" page="15" style="min-height: auto"> <div v-if="showPageList.indexOf(15) > -1"> <h1> <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" /> </h1> <div class="bodystyle"> <img src="../../assets/images/page5.png" alt="" /> <h2 id="b006">第ä¸è¯¾ãäºå®çåé</h2> <h3 class="lefth3" id="c011"> <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /> </h3> <p><span class="hs1">â</span>ææ¯å°ç»å®¶</p> <p>ä¿æ头é¨ä¸å¨ï¼è¯çç¨ç¼ç¥ç»åºä¸é¢çå¾æ¡å§ï¼</p> <p class="center"> <img class="img-e" alt="" src="../../assets/images/0016-1.jpg" /> </p> <p><span class="hs1">â</span>å è§å¤§åé©</p> <p> ä½ æç±åçé£ç©æ¯_________ãå½é»å°å®çå³éæ¶ï¼ä½ ä¼ååºä»ä¹è¡¨æ å¢ï¼ </p> <p> ä½ æä¸ç±åçé£ç©æ¯_________ãå½é»å°å®çå³éæ¶ï¼ä½ ä¼ååºä»ä¹è¡¨æ å¢ï¼ </p> <h3 class="lefth3" id="c012"> <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /> </h3> <p> <span class="hs1">â</span >以å°ç»ä¸ºåä½ï¼ä½¿ç¨æå¶éå ·è¡¨æ¼éå½ä¸çå§æ¬é段2ã </p> <p class="center"> <img class="img-e" alt="" src="../../assets/images/0016-2.jpg" /> </p> </div> <p><br /></p> <h1><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></h1> </div> </div> <!--<div class="page-box" page="16" style="min-height: auto"> <div v-if="showPageList.indexOf(16) > -1"> <h1> <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" /> </h1> <div class="bodystyle"> <h1 class="lefth3" id="c002"> <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /> </h1> <p><span class="hs1">â</span>请éåºä½ 认为æ£ç¡®ççæ¡ã</p> <p class="center"> <img class="img-e" alt="" src="../../assets/images/1-2èè举大æ .gif" /> </p> <p>èèæ¯å ¸åçï¼ããï¼æè«ãï¼å¤éï¼</p> <p>A.ç¾¤å± </p> <p>B.社ä¼æ§</p> <p>C.ç¬å± </p> <p>èèå é¨æï¼ããï¼åå·¥ãï¼å¤éï¼</p> <p>A.æç¡®ç</p> <p>B.å¥æªç</p> <p>C.æåºç</p> <p>ä¸ä¸ªï¼ããï¼ç¾¤ä½å°ä¸äºé»å¥çé åãï¼å¤éï¼</p> <p>A.å¢ç»ç</p> <p>B.ä¼ç§ç</p> <p>C.æ¾æ£ç</p> <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls controlslist="nodownload" class="w100" style="margin-top: 40px" ></video> </div> <p class="center"> <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> </p> </div> </div> <div class="page-box" page="17" style="min-height: auto"> <div v-if="showPageList.indexOf(17) > -1"> <h1> <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" /> </h1> <div class="bodystyle"> <img src="../../assets/images/page5.png" alt="" /> <h2 id="b002">第äºè¯¾ã津津ä¹é</h2> <h3 class="lefth3" id="c003"> <img class="img-gn1" alt="" src="image/rhybx.jpg" /> </h3> <p> <span class="hs1">â</span >请å°ä»¥ä¸è¯¾æé段大声æ诵åºæ¥ï¼å ç¹çå请é读ã </p> <audio :src="auidoPathThree" controls></audio> <div class="bj3"> <p class="center"> <span class="hs" >æ¥<a id="w1"></a><a href="chapter003.html#m1"><sup>[1]</sup></a >ï¼èéï¼</span > </p> <p class="center">æ±èªæ¸ </p> <p class="block"> ç¼æçï¼<span class="un1">ç¼æç</span>ï¼ä¸é£æ¥äºï¼æ¥å¤©çèæ¥<span class="un1" >è¿</span >äºã </p> <p class="block"> ä¸åé½å<span class="un1">åç¡é</span>çæ ·åï¼æ¬£æ¬£ç¶<span class="un1" >å¼ å¼</span >äºç¼ãå±±<span class="un1">æ润</span>èµ·æ¥äºï¼æ°´<span class="un1" >涨</span >èµ·æ¥äºï¼å¤ªé³çè¸<span class="un1">红</span>èµ·æ¥äºã </p> </div> <h3 class="lefth3" id="c004"> <img class="img-gn1" alt="" src="image/czysj.jpg" /> </h3> <p> <span class="hs1">â</span >å¨ãä¸åå¥¶é ªãçæ äºä¸ï¼å°èè们é½æåèªçç«åºï¼ä½ è½ç解ä»ä»¬çæ³æ³åï¼è¯·ä½ ååä¼´æ ¹æ®æ äºå 容讨论ä¸ä¸ã </p> <hr /> <p class="note"> <a id="m1"></a><a href="chapter003.html#w1">[1]</a> æ±èªæ¸ ï¼ãæ¥ãï¼è§æ¸©åæçï¼ãä¹å¡æè²æç§ä¹¦ è¯æ ä¸å¹´çº§ä¸åãï¼2页ï¼å京ï¼äººæ°æè²åºç社ï¼2016ã </p> </div> <p class="center"> <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> </p> </div> </div> <div class="page-box" page="18" style="min-height: auto"> <div v-if="showPageList.indexOf(18) > -1"> <h1> <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" /> </h1> <div class="bodystyle"> <img src="../../assets/images/page5.png" alt="" /> <h2 id="b003">第ä¸è¯¾ãå å¿ç声é³</h2> <h1 class="lefth3" id="c005"> <img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" /> </h1> <p> <span class="hs1">â</span >请å°ä»¥ä¸è¯¾æé段大声æ诵åºæ¥ï¼å ç¹çå请é读ã </p> <p class="center"> <img class="img-e" alt="" src="image/0009-1.jpg" /> </p> <audio :src="auidoPathTwo" controls></audio> <div class="bj3"> <p class="center"> <span class="hs" >æ¥<a id="w1"></a><a href="chapter004.html#m1"><sup>[1]</sup></a >ï¼èéï¼</span > </p> <p class="center">æ±èªæ¸ </p> <p class="block"> å°èå·å·å°ä»åé<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> </div> <h3 class="lefth3" id="c006"> <img class="img-gn1" alt="" src="image/czysj.jpg" /> </h3> <p class="center"> <img class="img-e" alt="" src="image/0010-1.jpg" /> </p> <hr /> <p class="note"> <a id="m1"></a><a href="chapter004.html#w1">[1]</a> æ±èªæ¸ ï¼ãæ¥ãï¼è§æ¸©åæçï¼ãä¹å¡æè²æç§ä¹¦ è¯æ ä¸å¹´çº§ä¸åãï¼2页ï¼å京ï¼äººæ°æè²åºç社ï¼2016ã </p> </div> </div> <p class="center"> <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> </p> </div> <div class="page-box" page="19" style="min-height: auto"> <div v-if="showPageList.indexOf(19) > -1"> <h1> <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" /> </h1> <div class="bodystyle"> <img src="../../assets/images/page5.png" alt="" /> <h3 class="lefth3" id="c006"> <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /> </h3> <h1 class="center"> <img class="img-e" alt="" src="../../assets/images/1-4.gif" style="height: auto; width: 50%" /> </h1> <p> <span class="hs1">â</span >çæ´»ä¸ï¼æ们æ»ä¼éå°åç§åæ ·ç诱æãé¢å¯¹è¯±ææ¶ï¼æ们çå å¿å¸¸å¸¸ä¼æ两个ä¸åç声é³åºç°ï¼ä¸ä¸ªå£°é³è¦æ±æ们严äºå¾å·±ï¼å¦ä¸ä¸ªå£°é³è¦æ±æ们éå¿æ欲ãè¯·ä½ åæä¸ä¸ï¼å½èèéé¿é¢å¯¹æè½çå¥¶é ªæ¸£ç诱ææ¶ï¼ä»å å¿ç两个声é³ä¼è¯´äºä»ä¹å¢ï¼ </p> <p>æ£ä¹éé¿ï¼â_________________________________ãâ</p> <p>é»æéé¿ï¼â_________________________________ãâ</p> </div> </div> <p class="center"> <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> </p> </div> <div class="page-box" page="20" style="min-height: auto"> <div v-if="showPageList.indexOf(20) > -1"> <h1> <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" /> </h1> <div class="bodystyle"> <h2 id="b004">第å课ãèº«ä¸´å ¶å¢</h2> <h3 class="lefth3" id="c007"> <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /> </h3> <p> <span class="hs1">â</span >请å°ä»¥ä¸è¯¾æé段大声æ诵åºæ¥ï¼å ç¹çå请é读ã </p> <audio :src="auidoPathTwo" controls></audio> <div class="bj3"> <p class="center"> <span class="hs" >æ¥<a id="w1"></a><a href="chapter005.html#m1"><sup>[1]</sup></a >ï¼èéï¼</span > </p> <p class="center">æ±èªæ¸ </p> <p class="block"> <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> </div> <h3 class="lefth3" id="c008"> <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /> </h3> <p> <span class="hs1">â</span >åå¦ä½ æ¯æ¬è¿å¥¶é ªçèèï¼ä½ è¦æä¹æ¬è¿ä¸åå½¢ç¶ã大å°çå¥¶é ªå¢ï¼è¯·å 为èªå·±è®¾è®¡ä¸ä¸ªå§æ¬å§ï¼ </p> <p> ææ¯èè_________ï¼ååï¼ï¼ä»å¤©æ¯_________ï¼å¤©æ°ï¼ï¼æçå¥¶é ªç¹å«_________ï¼è½»/éï¼ï¼ææè§å¥½_________ï¼èº«ä½æè§ï¼åï¼ </p> <hr /> <p class="note"> <a id="m1"></a><a href="chapter003.html#w1">[1]</a> æ±èªæ¸ ï¼ãæ¥ãï¼è§æ¸©åæçï¼ãä¹å¡æè²æç§ä¹¦ è¯æ ä¸å¹´çº§ä¸åãï¼2页ï¼å京ï¼äººæ°æè²åºç社ï¼2016ã </p> </div> </div> <p class="center"> <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> </p> </div> <div class="page-box" page="21" style="min-height: auto"> <div v-if="showPageList.indexOf(21) > -1"> <h1> <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" /> </h1> <div class="bodystyle"> <img src="../../assets/images/page5.png" alt="" /> <p class="center"> <img class="img-e" alt="" src="../../assets/images/1-5.gif" /> </p> <p> <span class="hs1">â</span >èèéé¿æå¥¶é ªæ¸£çç»äºå¹´é¾æå°çèèï¼èµ¢å¾äºå¤§å®¶ç认å¯ãå¨çæ´»ä¸ï¼ä½ æ¾ç»åâèèéé¿âä¸æ ·ç±æ¤å¼±å°åï¼æè åâå°èèâä¸æ ·å¾å°è¿å¥å¥å§å§ä»¬çå ³ç±åï¼ </p> </div> </div> <p class="center"> <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> </p> </div> <div class="page-box" page="22" style="min-height: auto"> <div v-if="showPageList.indexOf(22) > -1"> <h1> <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" /> </h1> <div class="bodystyle"> <h2 id="b005">åå æ´»å¨ä»»å¡</h2> <h3 class="lefth3" id="c009"> <img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /> </h3> <p><span class="hs1">â</span>æ¾å¤§ç¼©å°</p> <p> è¯·ä½ äº¤æ¿âæ¾å¤§âåâ缩å°âäºå®ãå¨âæ¾å¤§âæ¶ï¼æ³è±¡äºå®è¦é£å°å¤å¤ªç©ºï¼å¨â缩å°âæ¶ï¼æ³è±¡äºå®å ¨é¨ç¼©å°å°äºé¼»å°ä¸ã </p> <p><span class="hs1">â</span>æåè¹æè</p> <p> æ³è±¡ä½ å¨ä¸ä¸ªéççå°æ¹ï¼è°é½ä¸è®¤è¯ï¼çªç¶éè§äºå¥½æåï¼ä½ å¾é«å ´ï¼ä¸ååä»/她ææå¼ãåä¸åä½ æ¤æ¶ç表æ å§ã </p> <p><span class="hs1">â</span>å¾®ç¬è¯´âangâ</p> <p> è¯·ä½ è¯ä¸è¯å¨æåè¹æèçåºç¡ä¸ï¼ååºâangâçé³ã声é³è¦å°½å¯è½æé¿ãä¿æ稳å®ï¼å¹¶åè¿éã </p> <p><span class="hs1">â</span>åè¿å±±åâé¿æ¯â</p> <p> æ³è±¡èªå·±ç«å¨ä¸åº§é«å±±ä¸ï¼å¥½æåâé¿æ¯âç«å¨å¯¹é¢çé«å±±ä¸ï¼ä½ è¦å¦ä½åä»å¢ï¼ </p> </div> </div> <p class="center"> <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> </p> </div> <div class="page-box" page="23" style="min-height: auto"> <div v-if="showPageList.indexOf(23) > -1"> <h1> <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" /> </h1> <div class="bodystyle"> <h3 class="lefth3" id="c010"> <img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" /> </h3> <p><span class="hs1">â</span>æä¸æ·æ¼ä¸æ¼ï¼åè让梨</p> <p> åèåå²å°±æ礼è²ãç¥è°¦è®©ï¼æ¯æ们å¦ä¹ ç好æ¦æ ·ï¼è®©æ们è¿ç¨æ¬åå çæå§ç¥è¯ï¼æä»çæ äºè¡¨æ¼åºæ¥å§ï¼ </p> <p class="center"> <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls controlslist="nodownload" class="w100" style="margin-top: 40px" ></video> </p> </div> </div> <p class="center"> <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> </p> </div> --> </div> </template> <script> import matching from "@/components/matching/matching.vue"; import { getResourcePath } from "@/assets/methods/resources"; export default { name: "chapterTwo", components: { matching }, props: { showPageList: { type: Array, }, }, //å¨è¿é对è°ç¨çæ¹æ³è¿è¡æè½½ mounted() { this.getVidoePath(); }, data() { return { videoPathOne: "", auidoPathOne: "", auidoPathTwo: "", rawData: { left: [ { oldId: "FB34", txt: "æè¯·ä½ åè¹æå§ï¼", }, { oldId: "64D6", txt: "æè¯·ä½ åè¹æå§ï¼", }, { oldId: "2ED4", txt: "æè¯·ä½ åè¹æå§ï¼", }, { oldId: "44DE", txt: "æè¯·ä½ åè¹æå§ï¼", }, ], right: [ { oldId: "64D6", txt: "强è°æ¯è¯·å®¢", }, { oldId: "FB34", txt: "强è°è¯·çæ¯âä½ â", }, { oldId: "2ED4", txt: "强è°åçä¸è¥¿æ¯âè¹æâ", }, { oldId: "44DE", txt: "强è°è¯·å®¢ç人æ¯âæâ", }, ], }, question: { KnowledgePoint: "123", analysis: "123", answer: [ { id: "FB34", linkValue: "æè¯·ä½ åè¹æå§ï¼", value: "强è°æ¯è¯·å®¢", }, { id: "64D6", linkValue: "æè¯·ä½ åè¹æå§ï¼", value: "强è°è¯·çæ¯âä½ â", }, { id: "2ED4", linkValue: "æè¯·ä½ åè¹æå§ï¼", value: "强è°åçä¸è¥¿æ¯âè¹æâ", }, { id: "44DE", linkValue: "æè¯·ä½ åè¹æå§ï¼", value: "强è°è¯·å®¢ç人æ¯âæâ", }, ], optionStyle: undefined, id: 489306, options: { linkValues: [ { oldId: "64D6", txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.", }, { oldId: "44DE", txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.", }, { oldId: "FB34", txt: "The clothing material is quite popular among Roman women inancient times.", }, { oldId: "2ED4", txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.", }, ], values: [ { oldId: "FB34", txt: "Martin Silk", }, { oldId: "64D6", txt: "The Great Wall", }, { oldId: "2ED4", txt: "Chinese Food", }, { oldId: "44DE", txt: "Chinese Tea", }, ], }, questionType: "matching", stem: { stemTxt: "æ顺åºè¿çº¿", }, stemStyle: undefined, titleDescription: "1", userChoise: [], value: [], }, }; }, methods: { //è§é¢åé³é¢çMD5å°å async getVidoePath() { this.videoPathOne = await getResourcePath( "691cbd2c13198d04afc7800d0f2cafb0" ); this.videoPathTwo = await getResourcePath( "a3c9b55ac8227e4c885384ff2fc6c0e7" ); this.videoPathThree = await getResourcePath( "dd44a1e31b4304f50d10b2481a148411" ); this.videoPathFour = await getResourcePath( "09de7704eeaaf3a210b8c6af0a94d545" ); this.auidoPathOne = await getResourcePath( "2c5f6c69b0f9f7a3c03e473cb8c977f5" ); this.auidoPathTwo = await getResourcePath( "e93c0fdde08be5a4386c8c863892a287" ); this.auidoPathThree = await getResourcePath( "e93c0fdde08be5a4386c8c863892a287" ); }, }, }; </script> <style lang="less" scoped> .w70 { width: 78%; } .fw-400 { font-weight: 400 !important; } .fz-26 { font-size: 26px !important; } .cover-img { position: absolute; top: 33%; left: 23%; } .division-line { width: 2px; height: 100%; background-color: red; } </style>
src/books/artAndDrama/view/components/chapter004.vue
src/books/artAndDrama/view/components/header.vue
New file @@ -0,0 +1,72 @@ <template> <div class="chapter" num="1"> <div class="page-box mt-20" page="1" style="min-height: auto"> <div v-if="showPageList.indexOf(1) > -1"> <img class="img-0" alt="" src="../../assets/images/Cover.jpg" /> </div> </div> <div class="page-box mt-20" page="2" style="min-height: auto"> <div v-if="showPageList.indexOf(2) > -1"> <img class="img-0" alt="" src="../../assets/images/SMY.jpg" /> </div> </div> <div class="page-box mt-20" page="3"> <div v-if="showPageList.indexOf(3) > -1" > <div class="bodystyle"> <ul class="fl fl-cl ju-bt pg-mh" style="display: flex; flex-direction: column; justify-content: flex-end; " > <li> <div style="margin-bottom: 100px;" > <p id="a003" class="front" style="margin: 0%;">ç¼å§ä¼</p> <hr /> <p>顾ããé®ï¼<span class="kaiti">å½å象ã严çç</span></p> <p>主ããç¼ï¼<span class="kaiti">麻æç¦</span></p> <p>å¯ ä¸» ç¼ï¼<span class="kaiti">éãå©</span></p> <ul class="fl"> <li> <p class="wh-nr" style="margin: 0%;">ç¼åå§åï¼</p> </li> <li class="fl fl-cl"> <span class="kaiti">çè°·å·ãè°¢éåãææ¨æãå¨ååã</span> <span class="kaiti">é©çæ¥ è²</span> </li> </ul> <p>ç¾æ¯ç»ç»ï¼<span class="kaiti">ä½ãå°</span></p> <ul class="fl"> <li> <p class="wh-nr" style="margin: 0%;">表 æ¼ è ï¼</p> </li> <li class="fl fl-cl"> <span class="kaiti">æ¬ä¹¦é¨åæåä½åèä½æç±ä¸å½æåèä½æåä¼ææï¼</span> <span class="kaiti">çµè¯ï¼010-65978917ï¼ä¼ çï¼010-65978926ï¼</span> <span class="kaiti">E-mailï¼wenzhuxie@126.comã</span> </li> </ul> <p></p> <p>ããããã</p> <p>ããããã</p> </div> <!-- <p class="center pb-box"> <img class="img-0" alt="" src="../../assets/images/ym.jpg" /> </p> --> </li> </ul> </div> </div> </div> </div> </template> <script> export default { name: "pageHeader", props: { showPageList: { type: Array, }, }, }; </script> <style scoped></style>
New file @@ -0,0 +1,851 @@ <template> <div class="page-main" @scroll="throttledScrollHandler"> <div id="searchDomBox" style="display: none"> <div id="searchContent"></div> </div> <div class="page-content" :style="{ fontSize: fontSize ? fontSize + 'px' : '16px', transform: `scale(${pageZoom ? pageZoom : 1})`, transformOrigin: 'center top', }" > <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList" ></pageHeader> <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" ></chapterOne> <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList" > </chapterTwo> <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList" ></chapterThree> <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" ></chapterFour> </div> </div> </template> <script> import pageHeader from "./header.vue"; import chapterOne from "./chapter001.vue"; import chapterTwo from "./chapter002.vue"; import chapterThree from "./chapter003.vue"; import chapterFour from "./chapter004.vue"; import NoteIcon from "@/assets/images/biji.png"; import _ from "lodash"; import Swiper from "swiper/bundle"; import "swiper/swiper-bundle.css"; import Viewer from "viewerjs"; import "viewerjs/dist/viewer.css"; export default { data() { return { catalogLength: 4, // æ»ç« èæ° showCatalogList: [], // æ¾ç¤ºçç« è loadThreshold: 300, // 触åå è½½éå¼ throttleThreshold: 100, // èæµéå¼ previousScrollTop: 0, throttledScrollHandler: null, observer: null, loadPageObserver: null, loadPageList: [], questionDataMap: {}, renderSignMap: {}, highlightData: null, }; }, computed: { fontSize() { return this.$store.state.qiankun.fontSize; }, pageZoom() { return this.$store.state.qiankun.scale / 100; }, }, watch: { showCatalogList: { handler(newVal, oldVal) { if ( this.$store.state.qiankun && this.$store.state.qiankun.catalogChange ) { // è°ç¨ç¶å±æ¹æ³ this.$store.state.qiankun.catalogChange({ showCatalogList: newVal, }); } // å¯å¨é¡µç è§å¯ setTimeout(() => { this.initObservation(); this.initThemeColor(); }, 500); }, }, loadPageList: { handler(newVal, oldVal) { setTimeout(() => { this.initSwiper(); this.initViewer(); }, 200); }, }, pageZoom: { handler(newVal, oldVal) { const scrollBox = ( this.container ? this.container : document ).querySelector(".page-main"); scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal; }, }, }, mounted() { // é»è®¤å è½½ç« è this.showCatalogList = [1]; // æ»å¨çå¬èæµ this.throttledScrollHandler = _.throttle( this.scrollFun, this.throttleThreshold, { leading: true, trailing: false } ); // å®ä¹åå±æ¹æ³ if (this.setGlobalState) { // æä¾é¡µé¢è·³è½¬åè½ this.setGlobalState({ gotoPage: (catalog, page) => { this.gotoPage(catalog, page); }, // 渲æç¬è®°ãé«äº®ãå线 renderSign: (type, data) => { // å 为è°æ´ä¸ºé¡µé¢æå è½½ï¼æ以渲ææ è®°ä¹éè¦æç §é¡µé¢è¿è¡å¤çï¼å å¨åæ°æ®ï¼é¡µé¢å è½½å®æå渲æ对åºçæ è®°ï¼ this.handelSignData(type, data); // this.renderSign(type, data); }, // å é¤ç¬è®°ãé«äº®ãå线 delSign: (data) => { this.delSign(data); }, // å ¨ææ£ç´¢ searchBookByKeyword: (keyword) => { return this.searchTextByPage(keyword); }, // 跳转æ£ç´¢ç»æä½ç½® jumpSearchItem: (data) => { this.searchItemLocation(data); }, }); } // å建ä¸ä¸ªæ°ç Intersection Observer å®ä¾ï¼ç¨äºè§å¯ç®æ å ç´ åæ§è¡ç¸åºçåè°å½æ°ã // new IntersectionObserver(callback, options)ï¼ä½¿ç¨ä¹åå®ä¹ç callback åè°å½æ°å options é ç½®é项æ¥åå§å Intersection Observer å®ä¾ã this.observer = new IntersectionObserver(this.pageChangeCallback, { root: null, // æå®æ ¹å ç´ ï¼è¿é设为 nullï¼è¡¨ç¤ºéåæ´ä¸ªè§çªä½ä¸ºæ ¹å ç´ ã rootMargin: "0px", // æå®æ ¹å ç´ çè¾¹çï¼è¿é设为 "0px"ï¼è¡¨ç¤ºæ ¹å ç´ çè¾¹çåè§çªçè¾¹çéå threshold: 0.5, // æå®äº¤åæ¯ä¾ï¼è¿é设为 0.5ï¼è¡¨ç¤ºå½ç®æ å ç´ ä¸åææ´å¤æ¾ç¤ºå¨è§çªä¸æ¶è§¦ååè°å½æ°ã }); this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, { root: null, // æå®æ ¹å ç´ ï¼è¿é设为 nullï¼è¡¨ç¤ºéåæ´ä¸ªè§çªä½ä¸ºæ ¹å ç´ ã rootMargin: "0px", // æå®æ ¹å ç´ çè¾¹çï¼è¿é设为 "0px"ï¼è¡¨ç¤ºæ ¹å ç´ çè¾¹çåè§çªçè¾¹çéå threshold: 0, // æå®äº¤åæ¯ä¾ï¼è¿é设为 0.5ï¼è¡¨ç¤ºå½ç®æ å ç´ ä¸åææ´å¤æ¾ç¤ºå¨è§çªä¸æ¶è§¦ååè°å½æ°ã }); // å¯å¨é¡µç è§å¯ setTimeout(() => { this.initObservation(); this.initThemeColor(); }, 500); // æµè¯é¡µé¢è·³è½¬ // setTimeout(() => { // this.gotoPage(1, 10); // setTimeout(() => { // this.renderSign("Highlight", { // id: "2ACA9359", // txt: "é¢ä¸å¦ä¹ 主é¢ä¸ è¿å¨", // page: "10", // type: "Highlight", // color: "#F5E12A" // }); // setTimeout(() => { // this.delSign({ // ids: ["2ACA9359"] // }); // }, 2000); // }, 5000); // const pageDom = (this.container ? this.container : document) // .querySelector("#app") // .querySelectorAll(".page-box"); // æ£ç´¢ // console.log(this.searchTextByPage("ä¿æ¤å èå¨å®"), "searchTextByPage"); // æ£ç´¢è·³è½¬ // this.searchItemLocation({ // catalog: 2, // page: 10, // txt: " è¿å¨ç³»ç»æ¯ç±éª¨ã骨è¿ç»å骨骼èä¸é¨åç»æçãå ¨èº«ç骨éè¿éª¨è¿ç»ç»æ人ä½éª¨éª¼ï¼è§å¾1-1ï¼ã骨骼æ¯äººä½çæ¯æ¶ï¼å ·æä¿æ¤å èå¨å®ãä¾èèéçåä½ä¸ºèèè¿å¨çæ æçä½ç¨ãå¨ç¥ç»ç³»ç»çæ¯é ä¸ï¼èèæ¶ç¼©çµå¨æéçç骨ç»çå ³è转å¨ï¼ä½¿èº«ä½äº§çåç§å¨ä½ãæ以ï¼è¿å¨ç³»ç»å ·æè¿å¨ãæ¯æåä¿æ¤çåè½ï¼å¹¼å¹´æ¶æç骨骼è¿å ·æé è¡åè½ã ", // txtIndex: 57 // }); // }, 5000); }, methods: { // setZoom1() { // let scale = this.$store.state.qiankun.scale + 10; // const scrollBox = ( // this.container ? this.container : document // ).querySelector(".page-main"); // this.$store.commit("setZoom", scale); // }, // setZoom2() { // let scale = this.$store.state.qiankun.scale - 10; // const scrollBox = ( // this.container ? this.container : document // ).querySelector(".page-main"); // this.$store.commit("setZoom", scale); // }, // æ»å¨çå¬ scrollFun(event) { // å¤æåä¸æ»å¨è¿æ¯åä¸æ»å¨ if (event.target.scrollTop > this.previousScrollTop) { // åä¸ const currentScrollTop = event.target.scrollTop + event.target.offsetHeight; if ( currentScrollTop >= event.target.scrollHeight - this.loadThreshold ) { // å°è¾¾éå¼ if ( this.showCatalogList[this.showCatalogList.length - 1] < this.catalogLength ) { // å è½½ä¸ä¸ç« this.showCatalogList.push( this.showCatalogList[this.showCatalogList.length - 1] + 1 ); if (this.showCatalogList.length > 3) { // è¶ è¿ä¸ç« éè顶é¨ä¸ç« this.showCatalogList.shift(); } } } } else if (event.target.scrollTop < this.previousScrollTop) { // åä¸ const currentScrollTop = event.target.scrollTop; if (currentScrollTop <= this.loadThreshold) { // å°è¾¾éå¼ if (this.showCatalogList[0] > 0) { // å è½½ä¸ä¸ç« this.showCatalogList.unshift(this.showCatalogList[0] - 1); if (this.showCatalogList.length > 3) { // è¶ è¿ä¸ç« éèåºé¨ä¸ç« this.showCatalogList.pop(); } } } } // showCatalogList å½åæ¾ç¤ºçä¸ä¸ªç« èï¼watchçå¬ä¼ éç»ä¸»åºç¨ // æ´æ°ä¸ä¸æ¬¡æ»å¨çä½ç½® this.previousScrollTop = event.target.scrollTop; }, // ç« èã页é¢è·³è½¬ gotoPage(catalog, page) { if (catalog >= 0 && catalog <= this.catalogLength) { // å¤ç渲æç« è if (catalog == 0) { this.showCatalogList = [0, 1]; } else if (catalog == this.catalogLength) { this.showCatalogList = [ this.catalogLength - 2, this.catalogLength - 1, this.catalogLength, ]; } else { this.showCatalogList = [catalog - 1, catalog, catalog + 1]; } setTimeout(() => { // 跳转页ç const pageDom = ( this.container ? this.container : document ).querySelector(`[page="${page}"]`); if (pageDom) { pageDom.scrollIntoView(); } else { console.log("页ç é误ï¼"); } }, 500); } else { console.log("ç« èé误ï¼"); } }, // å¤çæ è®°æ°æ® handelSignData(type, data) { if (this.loadPageList.indexOf(Number(data.page)) > -1) { // ç«å³æ¸²æ this.renderSign(type, data); } // å¨åæ°æ® if (!this.renderSignMap[type]) this.renderSignMap[type] = {}; if (!this.renderSignMap[type][data.page]) this.renderSignMap[type][data.page] = []; this.renderSignMap[type][data.page].push(data); }, // 渲ææ è®° renderSign(type, data) { // ç¶å±è®¾ç½®ç¦æ¢æ¸²ææ è®°æ¶ä¸åè¿è¡æ¸²æ if (this.$store.state.qiankun.disableSign) { return false; } const existence = ( this.container ? this.container : document ).querySelector(`[dataid="${data.id}"]`); // å»é if (!existence) { const pageDom = ( this.container ? this.container : document ).querySelector(`[page="${data.page}"]`); // å建 createTreeWalker è¿ä»£å¨ï¼ç¨äºéåææ¬èç¹ï¼ä¿åå°ä¸ä¸ªæ°ç» const treeWalker = document.createTreeWalker(pageDom, NodeFilter.SHOW_TEXT); const allTextNodes = []; let currentNode = treeWalker.nextNode(); while (currentNode) { allTextNodes.push(currentNode); currentNode = treeWalker.nextNode(); } for (let i = 0; i < allTextNodes.length; i++) { const textDom = allTextNodes[i]; if (textDom.textContent.indexOf(data.txt) > -1) { let reg = new RegExp(`${data.txt}`, "ig"); switch (type) { case "Highlight": // é«äº® textDom.parentNode.innerHTML = textDom.parentNode.innerHTML.replace( reg, `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>` ); break; case "Dashing": // å线 textDom.parentNode.innerHTML = textDom.parentNode.innerHTML.replace( reg, `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>` ); break; case "Note": // ç¬è®° textDom.parentNode.innerHTML = textDom.parentNode.innerHTML.replace( reg, `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>` ); break; } } } } }, // å é¤æ 记渲æ delSign({ ids, type }) { if (ids && ids.length) { for (let i = 0; i < ids.length; i++) { const id = ids[i]; const dom = ( this.container ? this.container : document ).querySelector(`[dataid="${id}"]`); dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace( dom.outerHTML, dom.outerText ); } } if (type) { const doms = ( this.container ? this.container : document ).querySelectorAll(`[datatype="${type}"]`); for (let i = 0; i < doms.length; i++) { const dom = doms[i]; dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace( dom.outerHTML, dom.outerText ); } } }, initObservation() { const sections = ( this.container ? this.container : document ).querySelectorAll(".page-box"); sections.forEach((section) => { if (this.config.activeBook && this.config.activeBook.tryPageCount) { const page = section.getAttribute("page"); if (Number(page) > this.config.activeBook.tryPageCount) { let chapterDom = this.getParentWithClass(section, "chapter"); const chapterNum = chapterDom.getAttribute("num"); this.catalogLength = Number(chapterNum) - 1; section.remove(); return false; } } // observer è§å¯æ¯ä¸ªå ç´ ï¼ä»¥ä¾¿å¨å®ä»¬è¿å ¥æ离å¼è§çªæ¶è§¦ååè°å½æ°ã const isObserver = section.getAttribute("observer"); const isLoadObserver = section.getAttribute("loadObserver"); if (!isObserver) { this.observer.observe(section); section.setAttribute("observer", "1"); } if (!isLoadObserver) { this.loadPageObserver.observe(section); section.setAttribute("loadObserver", "1"); } }); }, initThemeColor() { // è·ååç§éè¦ä¸»é¢è²çèç¹ const colorDom = ( this.container ? this.container : document ).querySelectorAll(".theme-color"); const backgroundColorDom = ( this.container ? this.container : document ).querySelectorAll(".theme-back"); const borderColorDom = ( this.container ? this.container : document ).querySelectorAll(".theme-border"); // è·åé ç½®ç主é¢è² const bookThemeColor = this.config.activeBook && this.config.activeBook.bookThemeColor ? this.config.activeBook.bookThemeColor : null; const chapterThemeColor = this.config.activeBook && this.config.activeBook.chapterThemeColor ? this.config.activeBook.chapterThemeColor : null; const pageThemeColor = this.config.activeBook && this.config.activeBook.pageThemeColor ? this.config.activeBook.pageThemeColor : null; colorDom.forEach((domItem) => { // è·åç« èã页ç let pageDom = this.getParentWithClass(domItem, "page-box"); let chapterDom = this.getParentWithClass(domItem, "chapter"); let page, chapterNum; if (pageDom) page = pageDom.getAttribute("page"); if (chapterDom) chapterNum = chapterDom.getAttribute("num"); // åä¸å¹é 主é¢è² const themeColor = page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] ? chapterThemeColor[chapterNum] : bookThemeColor; if (themeColor) { domItem.style.color = themeColor; } }); backgroundColorDom.forEach((domItem) => { // è·åç« èã页ç let pageDom = this.getParentWithClass(domItem, "page-box"); let chapterDom = this.getParentWithClass(domItem, "chapter"); let page, chapterNum; if (pageDom) page = pageDom.getAttribute("page"); if (chapterDom) chapterNum = chapterDom.getAttribute("num"); // åä¸å¹é 主é¢è² const themeColor = page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] ? chapterThemeColor[chapterNum] : bookThemeColor; if (themeColor) { domItem.style.backgroundColor = themeColor; } }); borderColorDom.forEach((domItem) => { // è·åç« èã页ç let pageDom = this.getParentWithClass(domItem, "page-box"); let chapterDom = this.getParentWithClass(domItem, "chapter"); let page, chapterNum; if (pageDom) page = pageDom.getAttribute("page"); if (chapterDom) chapterNum = chapterDom.getAttribute("num"); // åä¸å¹é 主é¢è² const themeColor = page && pageThemeColor && pageThemeColor[page] ? pageThemeColor[page] : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum] ? chapterThemeColor[chapterNum] : bookThemeColor; if (themeColor) { domItem.style.borderColor = themeColor; } }); }, getParentWithClass(element, className) { console.log(element, className, "element, className"); while (element.parentElement) { element = element.parentElement; if (element.classList.contains(className)) { return element; } } }, pageChangeCallback(entries, observer) { //entriesï¼ä»£è¡¨è§å¯å°çç®æ å ç´ çéåã observerï¼ä»£è¡¨è§å¯è 对象ã entries.forEach((entry) => { //entry.isIntersectingï¼æ£æ¥å½åç®æ å ç´ æ¯å¦ä¸æ ¹å ç´ ç¸äº¤ã if (entry.isIntersecting) { const target = entry.target; //entry.targetï¼è·åå½åç®æ å ç´ const page = target.getAttribute("page"); const catalogDom = this.tool.getParentNodeByClassName( target, "chapter" ); const catalog = catalogDom.getAttribute("num"); let text = null; if (target.querySelector("p")) { text = target.querySelector("p").textContent.substring(0, 50); } // è¿å页ç åç« èä¿¡æ¯ if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange) this.$store.state.qiankun.pageChange({ page: page, catalog: catalog, text, }); // const sections = Array.from(document.querySelectorAll(".section")); //sectionsï¼è·åææå ·æ .section ç±»åçå ç´ ï¼å¹¶è½¬æ¢ä¸ºæ°ç»ã // let index = sections.findIndex((section) => section === target) + 1; //indexï¼æ¥æ¾å½åç®æ å ç´ å¨ sections æ°ç»ä¸çç´¢å¼ï¼å¹¶å 1ï¼ç¨äºç¡®å®å½å页ç ã } }); }, loadPageCallback(entries, observer) { entries.forEach(async (entry) => { if (entry.isIntersecting) { const target = entry.target; const page = target.getAttribute("page"); if (this.loadPageList.indexOf(Number(page)) == -1) { const catalogDom = this.tool.getParentNodeByClassName( target, "chapter" ); // æ·»å 页ç this.loadPageList.push(Number(page)); const catalog = catalogDom.getAttribute("num"); // if (!this.questionDataMap[page]) { // if (testData && testData[catalog]) { // if (testData[catalog][page]) { // if (Array.isArray(testData[catalog][page])) { // this.questionDataMap[page] = await getQuestionList( // page, // testData[catalog][page], // this.config.activeBook // ); // } else { // const obj = {}; // for (let key in testData[catalog][page]) { // obj[key] = await getQuestionList( // [], // testData[catalog][page][key], // this.config.activeBook // ); // } // this.questionDataMap[page] = obj; // } // console.log("é¢ç®", this.questionDataMap); // } // } // } // 渲æè¿ä¸é¡µçæ è®° for (const key in this.renderSignMap) { if (this.renderSignMap[key][page]) { this.renderSignMap[key][page].forEach((item) => { this.renderSign(key, item); }); } } // å¤çé«äº® if (this.highlightData) { // é«äº®è¡ setTimeout(() => { // è·å页é¢æætextèç¹ const pageTextList = document.createTreeWalker(target, NodeFilter.SHOW_TEXT); // å¹é å ³é®å const allPageTextNodes = []; let currentNode = pageTextList.nextNode(); while (currentNode) { allPageTextNodes.push(currentNode); currentNode = pageTextList.nextNode(); } for (let i = 0; i < allPageTextNodes.length; i++) { const textDom = allPageTextNodes[i]; let txtIndex = textDom.textContent.indexOf( this.highlightData.txt ); if (txtIndex > -1) { textDom.parentNode.style.transition = "background-color 0.8s"; textDom.parentNode.scrollIntoView(); textDom.parentNode.style.backgroundColor = "#79bbf0"; setTimeout(() => { textDom.parentNode.style.backgroundColor = ""; }, 1000); } } }, 100); } if (this.loadPageList.length > 5) { // è¶ è¿5页 this.loadPageList.shift(); } } } }); }, initSwiper() { const doms = ( this.container ? this.container : document ).querySelectorAll(".swiper-img"); for (let i = 0; i < doms.length; i++) { const dom = doms[i]; new Swiper(dom, { loop: false, // æ ç¼ autoplay: { //èªå¨å¼å§ delay: 3000, //æ¶é´é´é disableOnInteraction: false, //*æå¨æä½è½®æå¾åä¸ä¼æå* }, paginationClickable: true, slidesPerView: 1, // ä¸ç»ä¸ä¸ª spaceBetween: 30, // é´é // å¦æéè¦åè¿åéæé® navigation: { nextEl: (this.container ? this.container : document).querySelector( ".swiper-button-next" ), prevEl: (this.container ? this.container : document).querySelector( ".swiper-button-prev" ), }, // çªå£åå,éæ°init,é对F11å ¨å±åæ¾å¤§ç¼©å°,å¿ é¡»å observer: true, observeParents: true, // // å¦æéè¦åé¡µå¨ // pagination: { // el: (this.container ? this.container : document).querySelector( // ".swiper-pagination" // ), // clickable: true // å页å¨å¯ä»¥ç¹å» // } }); } const pptDoms = ( this.container ? this.container : document ).querySelectorAll(".swiper_ppt"); for (let i = 0; i < pptDoms.length; i++) { const dom = pptDoms[i]; new Swiper(dom, { loop: false, // æ ç¼ autoplay: false, paginationClickable: true, slidesPerView: 1, // ä¸ç»ä¸ä¸ª spaceBetween: 30, // é´é // å¦æéè¦åè¿åéæé® navigation: { nextEl: (this.container ? this.container : document).querySelector( ".swiper-button-next" ), prevEl: (this.container ? this.container : document).querySelector( ".swiper-button-prev" ), }, // çªå£åå,éæ°init,é对F11å ¨å±åæ¾å¤§ç¼©å°,å¿ é¡»å observer: true, observeParents: true, on: { init: (value) => { let currentPage = value.activeIndex + 1; // è·åå½å页ï¼ä»1å¼å§è®¡æ°ï¼ let totalPages = value.slides.length; // è·åæ»é¡µæ° var paginationInfoEl = dom.querySelector(".pageBox"); if (paginationInfoEl) paginationInfoEl.textContent = currentPage + "/" + totalPages; }, slideChange: (value) => { let currentPage = value.activeIndex + 1; // è·åå½å页ï¼ä»1å¼å§è®¡æ°ï¼ let totalPages = value.slides.length; // è·åæ»é¡µæ° var paginationInfoEl = dom.querySelector(".pageBox"); if (paginationInfoEl) paginationInfoEl.textContent = currentPage + "/" + totalPages; }, }, }); } }, initViewer() { const doms = ( this.container ? this.container : document ).querySelectorAll(".openImgBox"); for (let i = 0; i < doms.length; i++) { const dom = doms[i]; new Viewer(dom, { container: this.container ? this.container.querySelector("#app") : "body", navbar: true, // æ¾ç¤ºå¯¼èªæ toolbar: true, // æ¾ç¤ºå·¥å ·æ title: true, // æ¾ç¤ºæ é¢ }); } }, // æ ¹æ®å ³é®åå ¨ææ£ç´¢ searchTextByPage(keyword) { const searchResult = []; let catalogIndex = 0; // ææç« èç»ä»¶ï¼æ¯æ¬ä¹¦å¶ä½æ¶åç¬é ç½®ï¼ const pageData = { pageHeader, chapterOne, chapterTwo, chapterThree, chapterFour, chapterFive, chapterSix, }; // éåææç« èæ件 for (const key in pageData) { catalogIndex++; let pageComponent, pageExample; // å 渲æä¸æ¬¡å½åç« èæ件ï¼è¿æ¶é¡µé¢çå 容为空ï¼ï¼è·å页ç ä¿¡æ¯ pageComponent = Vue.extend(pageData[key]); pageExample = new pageComponent({ propsData: { showPageList: [], questionData: {}, isSearch: true }, }); pageExample.$mount( (this.container ? this.container : document).querySelector( "#searchContent" ) ); // è·å页ç const pageDom = (this.container ? this.container : document) .querySelector("#searchDomBox") .querySelectorAll(".page-box"); const pages = []; for (let i = 0; i < pageDom.length; i++) { const pageDomItem = pageDom[i]; pages.push(Number(pageDomItem.getAttribute("page"))); } // è·å页é¢ç»æï¼å¸è½½éæ¯ pageExample.$destroy(); (this.container ? this.container : document).querySelector( "#searchDomBox" ).innerHTML = '<div id="searchContent"></div>'; // éå页ç if (pages.length) { for (let i = 0; i < pages.length; i++) { const pageNum = pages[i]; // å¨æ渲æ对åºç« èç页ç pageComponent = Vue.extend(pageData[key]); pageExample = new pageComponent({ propsData: { showPageList: [pageNum], questionData: {}, isSearch: true }, }); pageExample.$mount( (this.container ? this.container : document).querySelector( "#searchContent" ) ); // è·å对åºé¡µé¢dom const thisPageDom = (this.container ? this.container : document) .querySelector("#searchDomBox") .querySelector(`[page="${pageNum}"]`); if (thisPageDom) { // è·å页é¢æætextèç¹ const pageTextList = document.createTreeWalker(thisPageDom, NodeFilter.SHOW_TEXT); // å¹é å ³é®å const allPageTextNodes = []; let currentNode = pageTextList.nextNode(); while (currentNode) { allPageTextNodes.push(currentNode); currentNode = pageTextList.nextNode(); } for (let i = 0; i < allPageTextNodes.length; i++) { const textDom = allPageTextNodes[i]; let txtIndex = textDom.textContent.indexOf(keyword); if (txtIndex > -1) { // è®°å½å ³é®åæå¨é¡µç ãç« è以åå¹é å°çæ®µè½ searchResult.push({ page: pageNum, catalog: catalogIndex, txt: textDom.textContent, txtIndex: txtIndex, }); } } // ç»æï¼å¸è½½éæ¯ pageExample.$destroy(); (this.container ? this.container : document).querySelector( "#searchDomBox" ).innerHTML = '<div id="searchContent"></div>'; } } } } // è¾åºæç´¢ç»æ console.log(searchResult); return searchResult; }, // æ ¹æ®æ£ç´¢ç»æ跳转对åºä½ç½®å¹¶é«äº® searchItemLocation(data) { // è®°å½é«äº®ä¿¡æ¯ this.highlightData = data; // 跳转 this.gotoPage(data.catalog, data.page, () => {}); }, }, components: { pageHeader, chapterOne, chapterTwo, chapterThree, chapterFour, }, }; </script> <style lang="less" scoped> .page-main { width: 100%; height: 100%; overflow: auto; .page-content { max-width: 816px; min-width: 375px; margin: 0 auto; padding-bottom: 100px; } } </style>
New file @@ -0,0 +1,76 @@ <template> <div class="ans-drama" @mouseup="handleMouseUp"> <pageContent></pageContent> </div> </template> <script> import pageContent from "./components/index.vue"; export default { name:"ansAndDrama", components: { pageContent, }, data() { return {}; }, mounted() {}, methods: { getParentWithClass(element, className) { while (element.parentElement) { element = element.parentElement; if (element.classList.contains(className)) { return element; } } }, handleMouseUp(e) { const selection = ( this.container ? this.container : window ).getSelection(); const txt = selection.toString(); if (selection.type != "none" && txt) { let node = selection.anchorNode.parentNode; let pageHtml = this.getParentWithClass( selection.anchorNode, "page-box" ); let chapterDom = this.getParentWithClass( selection.anchorNode, "chapter" ); let chapterNum; if (chapterDom) chapterNum = chapterDom.getAttribute("num"); if (pageHtml) { const page = pageHtml.getAttribute("page"); // çå¬éä¸ææ¬äºä»¶ï¼å¹¶è§¦åç¶å±æ¹æ³ if (this.$store.state.qiankun.windowSelection) { this.$store.state.qiankun.windowSelection({ chapterNum, txt, page, x: e.x, y: e.y, }); } } } else { if (this.$store.state.qiankun.windowSelection) { this.$store.state.qiankun.windowSelection({ chapterNum: "", txt: "", page: "", x: e.x, y: e.y, }); } } }, }, }; </script> <style lang="less"> @import "../assets/main.less"; </style>
