src/App.vue
@@ -63,7 +63,9 @@ } else { this.activeBook = await this.config.getBookConfig( // childHealth this.config.resourceCtx + "childHealth" // lifeCare // sportsAndHealth this.config.resourceCtx + "sportsAndHealth" ); // æµè¯è¯è¯»30页 // this.activeBook.tryPageCount = 10; src/books/English/assets/images/Cover.jpg
src/books/English/assets/images/grammar.jpgsrc/books/English/assets/images/icon/2¹³.svg
New file @@ -0,0 +1,7 @@ <svg t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20"> <path d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" fill="#1AFA29" p-id="18768"></path> </svg> src/books/English/assets/images/icon/´íÎó-copy.svg
New file @@ -0,0 +1,7 @@ <svg t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"> <path d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" fill="#d81e06" p-id="25746"></path> </svg> src/books/English/assets/main.less
@@ -586,7 +586,7 @@ margin-top: 0.5em; } .bjh3 { border: 10px dotted #faeec6; border: 5px dotted #faeec6; background: #0da785; padding: 0.2em 0.4em 0.2em 0.4em; color: #ffffff; @@ -712,6 +712,9 @@ .mb-20 { margin-bottom: 20px; } .mt-40 { margin-top: 40px; } .wh-nr { white-space: nowrap; } src/books/English/view/components/chapter001.vue
@@ -1,7 +1,7 @@ <template> <div class="chapter" num="0"> <!-- 1 --> <div class="page-box" page="6"> <div class="page-box" page="7"> <div class="bodystyle"> <h1 id="a005"> <img class="img-0" alt="" src="../../assets/images/dy1.jpg" /> @@ -23,7 +23,7 @@ </div> </div> <!-- 2 --> <div class="page-box" page="7"> <div class="page-box" page="8"> <div class="w100 mb-20" style="padding-right: 20px"> <div class="event-header-bc fl al-end" @@ -52,7 +52,6 @@ width="20.501" height="20.501" viewBox="0 0 20.501 20.501" > <path class="a" @@ -82,14 +81,20 @@ @change="setBookQuestion" /> <span class="icon-box"> <i class="el-icon-check correct-icon" v-if="questionData.warnUp.one.isRight" ></i> <i class="el-icon-close error-icon" v-if="questionData.warnUp.one.isRight == false" ></i> <svg v-if="questionData.warnUp.one.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20"> <path d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" fill="#1AFA29" p-id="18768"></path> </svg> <svg v-if="questionData.warnUp.one.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"> <path d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" fill="#d81e06" p-id="25746"></path> </svg> </span> </p> </div> @@ -118,14 +123,20 @@ @change="setBookQuestion" /> <span class="icon-box"> <i class="el-icon-check correct-icon" v-if="questionData.warnUp.two.isRight" ></i> <i class="el-icon-close error-icon" v-if="questionData.warnUp.two.isRight == false" ></i> <svg v-if="questionData.warnUp.two.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20"> <path d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" fill="#1AFA29" p-id="18768"></path> </svg> <svg v-if="questionData.warnUp.two.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"> <path d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" fill="#d81e06" p-id="25746"></path> </svg> </span> </p> </div> @@ -153,14 +164,20 @@ @change="setBookQuestion" /> <span class="icon-box"> <i class="el-icon-check correct-icon" v-if="questionData.warnUp.three.isRight" ></i> <i class="el-icon-close error-icon" v-if="questionData.warnUp.three.isRight == false" ></i> <svg v-if="questionData.warnUp.three.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20"> <path d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" fill="#1AFA29" p-id="18768"></path> </svg> <svg v-if="questionData.warnUp.three.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"> <path d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" fill="#d81e06" p-id="25746"></path> </svg> </span> </p> </div> @@ -189,14 +206,20 @@ @change="setBookQuestion" /> <span class="icon-box"> <i class="el-icon-check correct-icon" v-if="questionData.warnUp.four.isRight" ></i> <i class="el-icon-close error-icon" v-if="questionData.warnUp.four.isRight == false" ></i> <svg v-if="questionData.warnUp.four.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20"> <path d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" fill="#1AFA29" p-id="18768"></path> </svg> <svg v-if="questionData.warnUp.four.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"> <path d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" fill="#d81e06" p-id="25746"></path> </svg> </span> </p> </div> @@ -224,14 +247,20 @@ @change="setBookQuestion" /> <span class="icon-box"> <i class="el-icon-check correct-icon" v-if="questionData.warnUp.five.isRight" ></i> <i class="el-icon-close error-icon" v-if="questionData.warnUp.five.isRight == false" ></i> <svg v-if="questionData.warnUp.five.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20"> <path d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" fill="#1AFA29" p-id="18768"></path> </svg> <svg v-if="questionData.warnUp.five.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"> <path d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" fill="#d81e06" p-id="25746"></path> </svg> </span> </p> </div> @@ -260,14 +289,20 @@ @change="setBookQuestion" /> <span class="icon-box"> <i class="el-icon-check correct-icon" v-if="questionData.warnUp.six.isRight" ></i> <i class="el-icon-close error-icon" v-if="questionData.warnUp.six.isRight == false" ></i> <svg v-if="questionData.warnUp.six.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20"> <path d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" fill="#1AFA29" p-id="18768"></path> </svg> <svg v-if="questionData.warnUp.six.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"> <path d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" fill="#d81e06" p-id="25746"></path> </svg> </span> </p> </div> @@ -294,7 +329,6 @@ width="20.501" height="20.501" viewBox="0 0 20.501 20.501" > <path class="a" @@ -329,7 +363,7 @@ </div> </div> <!-- 3 --> <div class="page-box" page="8"> <div class="page-box" page="9"> <ul class="preface-odd-header w100 fl ju-bt"> <li class=""></li> <li class="fz-18"> @@ -373,7 +407,6 @@ width="20.501" height="20.501" viewBox="0 0 20.501 20.501" > <path class="a" @@ -413,7 +446,6 @@ width="20.501" height="20.501" viewBox="0 0 20.501 20.501" > <path class="a" @@ -457,7 +489,9 @@ student for PhD studies at one university.When I arrived in China,I was like Alice in Alice in Wonderland.I was curious about the people,the culture,the <span class="word-bc" @click="saveWord($event,'cuisine')">cuisine</span> <span class="word-bc" @click="saveWord($event, 'cuisine')" >cuisine</span > and of course the huge variety of <span class="word-bc" @click="saveWord($event,'landscapes')" >landscapes</span @@ -480,7 +514,9 @@ </p> <p> You cannot <span class="word-bc" @click="saveWord($event,'explore')">explore</span> <span class="word-bc" @click="saveWord($event, 'explore')" >explore</span > China properly if you do not try its delicious variety of food.If you ate </p> @@ -491,7 +527,7 @@ </div> </div> <!-- 4 --> <div class="page-box"> <div class="page-box" page="10"> <div class="w100 mb-20" style="padding-right: 20px"> <div class="event-header-bc fl al-end" @@ -516,8 +552,10 @@ <span class="word-bc" @click="saveWord($event,'stimulating')" >stimulating</span >.For a <span class="word-bc" @click="saveWord($event,'foodie')">foodie</span> like me,China is a heaven.I simply cannot live without Chinese food. <span class="word-bc" @click="saveWord($event, 'foodie')" >foodie</span > like me,China is a heaven.I simply cannot live without Chinese food. </p> <p> Like I said earlier,China is a huge wonderland.It has thousands of @@ -525,7 +563,9 @@ its own story and history.From the big and advanced cities like Shanghai or Guangzhou to the ancient cities like Xiâan and Hangzhou,each city has its <span class="word-bc" @click="saveWord($event,'unique')">unique</span> <span class="word-bc" @click="saveWord($event, 'unique')" >unique</span > <span class="word-bc" style="margin-left: 5px" @@ -544,8 +584,8 @@ <!-- <p class="center"> <img class="img-g" alt="" src="../../assets/images/0014-1.jpg" /> </p> --> <p class="fl al-cn"> <span class="zt-cs">Words & Expressions</span> <p class="fl al-cn mt-40"> <span class="zt-cs " style="font-size:20px">Words & Expressions</span> <span class="line-border-box"></span> </p> <audio @@ -609,7 +649,7 @@ </div> </div> <!-- 5 --> <div class="page-box"> <div class="page-box" page="11"> <ul class="preface-odd-header w100 fl ju-bt"> <li class=""></li> <li class="fz-18"> @@ -653,8 +693,8 @@ <p>be curious about ...对â¦â¦æå°å¥½å¥</p> <p>along the way 沿é</p> <div class="bj-note"> <p><b>Notes:</b></p> <p> <p class="m0 "><b class="fz-18">Notes:</b></p> <p class="m0"> <i>Alice in Wonderland</i> ï¼<i >Alice's Adventures in Wonderland</i >çç®åï¼ä¸æè¯ä¸ºãç±ä¸½ä¸æ¢¦æ¸¸ä»å¢ãï¼ï¼æ¯19ä¸çºªè±å½ä½å®¶åææ¯Â·å¡ç½å°åä½çèåå¿ç«¥æå¦ä½åï¼è®²è¿°äºä¸ä¸ªåå«ç±ä¸½ä¸çè±å½å°å¥³å©ä¸ºäºè¿½éä¸åªæ£çæè¡¨ãä¼è¯´è¯çå åè䏿 æå ¥äºå åæ´ï¼ä»èè¿å ¥äºä¸ä¸ªç¥å¥çå½åº¦å¹¶ç»åäºä¸ç³»åå¥å¹»åé©çæ äºã @@ -665,13 +705,15 @@ A.Mark the items that made the author curious when she arrived in China. </p> <p>â¡ Language</p> <p>â¡ People</p> <p>â¡ Culture</p> <p>â¡ Cuisine</p> <p>â¡ Folk art</p> <p>â¡ Landscapes</p> <p>â¡ Transportation</p> <p> <input type="checkbox" name="ball" value="basketball" id="1" checked="checked"/> Language</p> <p><input type="checkbox" name="ball" value="basketball" id="1" /> People</p> <p><input type="checkbox" name="ball" value="basketball" id="1"/> Culture</p> <p><input type="checkbox" name="ball" value="basketball" id="1" /> Cuisine</p> <p><input type="checkbox" name="ball" value="basketball" id="1" /> Folk art</p> <p><input type="checkbox" name="ball" value="basketball" id="1" /> Landscapes</p> <p><input type="checkbox" name="ball" value="basketball" id="1" /> Transportation</p> </div> </div> <div class="preface-bottom"> @@ -679,7 +721,7 @@ </div> </div> <!-- 6 --> <div class="page-box"> <div class="page-box" page="12"> <div class="w100 mb-20" style="padding-right: 20px"> <div class="event-header-bc fl al-end" @@ -914,7 +956,7 @@ </div> </div> <!-- 7 --> <div class="page-box"> <div class="page-box" page="13"> <ul class="preface-odd-header w100 fl ju-bt"> <li class=""></li> <li class="fz-18"> @@ -1160,11 +1202,17 @@ çæ¡ï¼ 1.whether 2.if 3.whether 4.whether 5.if </p> <div class="w100 fl ju-cn"> <ul class="fl ju-ev" style="width: 50%"> <li><button class="btn-border btn-w">æäº¤</button></li> <li><button @click="setTestData" class="btn-border btn-w">ä¿å</button></li> <li> <button @click="setTestData" class="btn-border btn-w"> ä¿å </button> </li> <li> <button style="min-height:24px" @click="showQuestionAnswer = !showQuestionAnswer" class="parimary-btn" > @@ -1174,12 +1222,13 @@ </ul> </div> </div> </div> <div class="preface-bottom"> <span class="contet-num-box">7</span> </div> </div> <!-- 8 --> <div class="page-box"> <div class="page-box" page="14"> <div class="w100 mb-20" style="padding-right: 20px"> <div class="event-header-bc fl al-end" @@ -1317,16 +1366,22 @@ </p> <div class="bk-wh"> <p class="dl-box"> <span class="word-bc mr-20 dl-span" @click="saveWord($event,'exquisite')" <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'exquisite')" >exquisite</span > <span class="word-bc mr-20 dl-span" @click="saveWord($event,'ancient')" <span class="word-bc mr-20 dl-span" @click="saveWord($event, 'ancient')" >ancient</span ><span class="word-bc mr-20 dl-span" @click="saveWord($event,'incredible')" >incredible</span ><span class="word-bc mr-20 dl-span" @click="saveWord($event,'unique')" ><span class="word-bc mr-20 dl-span" @click="saveWord($event, 'unique')" >unique</span ><span class="word-bc mr-20 dl-span" @@ -1340,7 +1395,9 @@ class="word-bc mr-20 dl-span" @click="saveWord($event,'mouth-watering')" >mouth-watering</span ><span class="word-bc mr-20 dl-span" @click="saveWord($event,'diverse')" ><span class="word-bc mr-20 dl-span" @click="saveWord($event, 'diverse')" >diverse</span ><span class="word-bc mr-20 dl-span" @@ -1354,7 +1411,9 @@ class="word-bc mr-20 dl-span" @click="saveWord($event,'memorable')" >memorable</span ><span class="word-bc mr-20 dl-span" @click="saveWord($event,'charming')" ><span class="word-bc mr-20 dl-span" @click="saveWord($event, 'charming')" >charming</span > </p> @@ -1388,7 +1447,7 @@ </div> </div> <!-- 9 --> <div class="page-box"> <div class="page-box" page="15"> <ul class="preface-odd-header w100 fl ju-bt"> <li class=""></li> <li class="fz-18"> @@ -1434,14 +1493,20 @@ </option> </select> <span class="icon-box"> <i class="el-icon-check correct-icon" v-if="dropdownData.one.isRight" ></i> <i class="el-icon-close error-icon" v-if="dropdownData.one.isRight == false" ></i> <svg v-if="dropdownData.one.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20"> <path d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" fill="#1AFA29" p-id="18768"></path> </svg> <svg v-if="dropdownData.one.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"> <path d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" fill="#d81e06" p-id="25746"></path> </svg> </span> </p> </div> @@ -1474,14 +1539,20 @@ </option> </select> <span class="icon-box"> <i class="el-icon-check correct-icon" v-if="dropdownData.two.isRight" ></i> <i class="el-icon-close error-icon" v-if="dropdownData.two.isRight == false" ></i> <svg v-if="dropdownData.two.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20"> <path d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" fill="#1AFA29" p-id="18768"></path> </svg> <svg v-if="dropdownData.two.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"> <path d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" fill="#d81e06" p-id="25746"></path> </svg> </span> </p> </div> @@ -1513,14 +1584,20 @@ </option> </select> <span class="icon-box"> <i class="el-icon-check correct-icon" v-if="dropdownData.three.isRight" ></i> <i class="el-icon-close error-icon" v-if="dropdownData.three.isRight == false" ></i> <svg v-if="dropdownData.three.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20"> <path d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" fill="#1AFA29" p-id="18768"></path> </svg> <svg v-if="dropdownData.three.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"> <path d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" fill="#d81e06" p-id="25746"></path> </svg> </span> </p> </div> @@ -1553,14 +1630,20 @@ </option> </select> <span class="icon-box"> <i class="el-icon-check correct-icon" v-if="dropdownData.four.isRight" ></i> <i class="el-icon-close error-icon" v-if="dropdownData.four.isRight == false" ></i> <svg v-if="dropdownData.four.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20"> <path d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" fill="#1AFA29" p-id="18768"></path> </svg> <svg v-if="dropdownData.four.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"> <path d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" fill="#d81e06" p-id="25746"></path> </svg> </span> </p> </div> @@ -1592,14 +1675,20 @@ </option> </select> <span class="icon-box"> <i class="el-icon-check correct-icon" v-if="dropdownData.five.isRight" ></i> <i class="el-icon-close error-icon" v-if="dropdownData.five.isRight == false" ></i> <svg v-if="dropdownData.five.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20"> <path d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" fill="#1AFA29" p-id="18768"></path> </svg> <svg v-if="dropdownData.five.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"> <path d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" fill="#d81e06" p-id="25746"></path> </svg> </span> </p> </div> @@ -1632,14 +1721,20 @@ </option> </select> <span class="icon-box"> <i class="el-icon-check correct-icon" v-if="dropdownData.six.isRight" ></i> <i class="el-icon-close error-icon" v-if="dropdownData.six.isRight == false" ></i> <svg v-if="dropdownData.six.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="20"> <path d="M1439.374222 216.007111s-169.472 56.490667-367.179852 282.443852C888.604444 703.222519 846.241185 787.949037 775.632593 900.93037 768.568889 893.866667 662.651259 689.095111 380.207407 540.814222l148.290371-141.226666s134.162963 91.790222 225.953185 261.262222c0 0 233.016889-360.116148 684.923259-536.642371v91.799704z m0 0" fill="#1AFA29" p-id="18768"></path> </svg> <svg v-if="dropdownData.six.isRight == false" t="1716987085767" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25745" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20"> <path d="M116.579135 38.64349531L38.703935 103.74399781c138.82075969 102.96027281 268.24660875 221.31426938 381.68489719 339.96758156C246.29374906 618.40145938 109.95003031 790.19602344 38.10817906 859.25288281l148.35573469 123.62658094c52.61360812-108.17625656 167.23381594-272.86683656 320.56281844-445.01635875 153.50744156 173.21056312 268.36844625 338.43166313 321.38977781 447.49243969 0 0 144.5682225-152.96636906 157.47435281-129.29729625-55.80632344-62.49011156-191.37776625-244.16501625-374.17990593-430.27403438 104.68422375-107.1132975 222.15274031-213.10127719 347.60304468-306.24740437L925.17746562 56.03842156C782.85412063 126.51895625 647.69328031 231.09093594 526.07845437 342.39755 403.34886594 226.82662719 264.46095125 116.16373719 116.579135 38.64349531L116.579135 38.64349531zM116.579135 38.64349531" fill="#d81e06" p-id="25746"></path> </svg> </span> </p> </div> @@ -1652,18 +1747,22 @@ </p> </div> </div> <div class="fl ju-ev" style="width: 70%"> <div class="w100 fl ju-cn"> <div class="fl ju-ev" style="width: 60%"> <button @click="setDropdownData" class="btn-border btn-w"> ä¿å </button> <button class="btn-border btn-w">æäº¤</button> <button @click="handleDropdown('judge')" class="btn-border btn-w">夿æ£ç¡®</button> <button class="btn-border btn-w" @click="handleDropdown('judge')"> æäº¤ </button> <button style="min-height:24px" @click="showAnswerFive = !showAnswerFive" class="parimary-btn" > æ¥ççæ¡ </button> </div> </div> </div> </div> @@ -2001,6 +2100,7 @@ font-size: 14px; border-width:1px; min-width: 80px; min-height: 24px; background-color:#fff; &:hover { background-color:#0bab87 ; src/books/English/view/components/header.vue
@@ -1,13 +1,19 @@ <template> <div class="chapter" num="0"> <!-- 1 --> <!-- --> <div class="page-box" page="1"> <p class="center"> <img class="img-0" alt="" src="../../assets/images/Cover.jpg" /> </p> </div> <!-- 1 --> <div class="page-box" page="2"> <p class="center"> <img class="img-0" alt="" src="../../assets/images/SMY.jpg" /> </p> </div> <!-- 2 --> <div class="page-box text-center" style="padding: 136px 0" page="2"> <div class="page-box text-center" style="padding: 136px 0" page="3"> <div class="box"> <hr class="line" /> <p class="tl fz-14"><b>å¾ä¹¦å¨çç¼ç®ï¼CIPï¼æ°æ®</b></p> @@ -65,7 +71,7 @@ </div> </div> <!-- 3 --> <div class="page-box " page="3"> <div class="page-box " page="4"> <div class="pd-20 "> <div class="preface w100 fl al-end ju-cn"> <h1 id="a003" class="front preface-text">åè¨</h1> @@ -93,7 +99,7 @@ </div> </div> <!-- 4 --> <div class="page-box" page="4"> <div class="page-box" page="5"> <div class="mb-20" style="padding-right: 20px;"> <div class="primary-bc fl al-end" style="height: 100px;padding-left: 40px;"> <div class="preface-header-box y-bc"> @@ -137,7 +143,7 @@ </div> </div> <!-- 5 --> <div class="page-box" page="5"> <div class="page-box" page="6"> <ul class="preface-odd-header w100 fl ju-bt"> <li class="left primary-bc "></li> <li> src/books/childHealth/view/content/components/chapter001.vue
@@ -67,7 +67,7 @@ </div> <!-- 2 --> <div class="page-box" page="10" :show="showPageList.indexOf(10) > -1"> <div v-if="showPageList.indexOf(10) > -1"> <div v-show="showPageList.indexOf(10) > -1"> <div class="header-box"> <div class="header-border-box"></div> <div class="header-num-box"> @@ -360,8 +360,6 @@ v-if="testOne && questionData" ref="examinationOne" :cardList="questionData[10]" :chapter="1" :page="2" /> </div> <h2 class="module_block" id="b001" style="margin: 0"> @@ -434,7 +432,7 @@ </div> <!-- 3 --> <div class="page-box" page="11" :show="showPageList.indexOf(11) > -1"> <div v-if="showPageList.indexOf(11) > -1"> <div v-show="showPageList.indexOf(11) > -1"> <div class="page-header-box"> <span class="page-header-text" >ä¸é¢ä¸ å¦åå¿ç«¥ççåå±ç¹ç¹ä¸ä¿å¥</span src/books/childHealth/view/content/index.vue
@@ -556,6 +556,7 @@ testData[catalog][page], this.config.activeBook ); } else { const obj = {}; for (let key in testData[catalog][page]) { @@ -567,6 +568,7 @@ } this.questionData[page] = obj; } console.log('é¢ç®',this.questionData); } } } src/books/embedded/view/components/chapter001.vue
@@ -1,7 +1,8 @@ <template> <div class="chapter" num="1"> <div class="chapter" num="2"> <!-- 1 --> <div class="page-box fl fl-cl ju-bt al-end padding-87" page="11"> <div v-if="showPageList.indexOf(11) > -1"> <div class="mt-100 w100"> <!-- <h1>项ç®ä¸ã触æ¸å±ç»æä»ç»</h1> --> <img src="../../assets/images/project-one.png" alt="" class="w100" /> @@ -55,8 +56,10 @@ <li class="footer-box"></li> </ul> </div> </div> <!-- 2 --> <div class="page-box fl fl-cl ju-bt" page="12"> <div v-if="showPageList.indexOf(12) > -1"> <div> <div class="mt-20"> <img src="../../assets/images/page-header.png" class="w100" /> @@ -201,6 +204,7 @@ </div> </div> </div> </div> <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96"> <li class="footer-num">2</li> <li class="footer-box"></li> @@ -208,6 +212,7 @@ </div> <!-- 3 --> <div class="page-box fl fl-cl ju-bt al-end padding-86" page="13"> <div v-if="showPageList.indexOf(13) > -1"> <div> <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20"> <img src="../../assets/images/header-one.png" alt="" /> @@ -275,8 +280,10 @@ <li class="footer-box"></li> </ul> </div> </div> <!-- 4 --> <div class="page-box fl fl-cl ju-bt" page="14"> <div v-if="showPageList.indexOf(14) > -1"> <div> <div class="mt-20"> <img src="../../assets/images/page-header.png" alt="" class="w100" /> @@ -352,8 +359,10 @@ <li class="footer-box"></li> </ul> </div> </div> <!-- 5 --> <div class="page-box fl fl-cl ju-bt al-end padding-96" page="15"> <div v-if="showPageList.indexOf(15) > -1"> <div class="w100"> <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20"> <img src="../../assets/images/header-one.png" alt="" /> @@ -371,7 +380,9 @@ <p class="imgdescript">å¾1-6ãæ£è§å¾</p> </div> <div class=""> <el-image :src="imgSeven" :preview-src-list="[imgSeven]" /> <div class="openImgBox"> <img src="../../assets/images/img00017002.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-7ãèè§å¾</p> </div> </div> @@ -385,7 +396,9 @@ <p class="content">â¢ä½¿ç¨ä¸å头æå ·å°TPCçµæºæå¤´èºééç´§ã</p> </div> <div class="right"> <el-image :src="imgEnight" :preview-src-list="[imgEnight]" /> <div class="openImgBox"> <img src="../../assets/images/img00017003.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-8ãçµæºæå¤´ç¤ºæå¾åå¼èå®ä¹</p> </div> </div> @@ -394,11 +407,15 @@ ï¼4ï¼TPC7062Kå¤é¨æ¥å£ãæ¥å£è¯´æå¦å¾1-9æç¤ºï¼ä¸²å£å¼èå®ä¹å¦å¾1-10æç¤ºã </p> <div> <el-image :src="imgNine" :preview-src-list="[imgNine]" class="w100" /> <div class="openImgBox"> <img src="../../assets/images/img00017004.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-9ãæ¥å£è¯´æ</p> </div> <div> <el-image :src="imgTen" :preview-src-list="[imgTen]" /> <div class="openImgBox"> <img src="../../assets/images/img00017005.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-10ã串å£å¼èå®ä¹</p> </div> <p class="content"> @@ -410,15 +427,19 @@ <li class="footer-box"></li> </ul> </div> </div> <!-- 6 --> <div class="page-box fl fl-cl ju-bt" page="16"> <div v-if="showPageList.indexOf(16) > -1"> <div> <div class="mt-20"> <img src="../../assets/images/page-header.png" alt="" class="w100" /> </div> <div class="padding-96"> <div> <el-image :src="imgEleven" :preview-src-list="[imgEleven]" /> <div class="openImgBox"> <img src="../../assets/images/img00018001.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-11ãTPCå¯å¨è¿ç¨</p> </div> <p class="quotation fl al-cn t0 primary-color"> @@ -433,14 +454,19 @@ TPC7062Kä¸ä¸æ¬¾ä¸»æµPLCéä¿¡æ¥çº¿å¦å¾1-12ï½å¾1-14æç¤ºã </p> <div style="width: 90%" class="m0-auto"> <el-image :src="imgTwelve" :preview-src-list="[imgTwelve]" /> <div class="openImgBox"> <img src="../../assets/images/img00018002.jpg" alt="" class="w100"> </div> <p class="imgdescript"> å¾1-12ãTPC7062Kä¸è¥¿é¨åS7-200ç³»åPLCéä¿¡æ¥çº¿ </p> </div> <div class="m0-auto" style="width: 90%"> <el-image :src="imgThirteen" :preview-src-list="[imgThirteen]" /> <div class="openImgBox"> <img src="../../assets/images/img00018003.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-13ãTPC7062K䏿¬§å§é¾PLCéä¿¡æ¥çº¿</p> </div> </div> </div> </div> @@ -451,12 +477,15 @@ </div> <!-- 7 --> <div class="page-box fl fl-cl ju-bt al-end padding-96" page="17"> <div v-if="showPageList.indexOf(17) > -1"> <div class="w100"> <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20"> <img src="../../assets/images/header-one.png" alt="" /> </div> <div> <el-image :src="imgFourteen" :preview-src-list="[imgFourteen]" /> <div class="openImgBox"> <img src="../../assets/images/img00019001.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-14ãTPC7062Kä¸ä¸è±FXç³»åPLCéä¿¡æ¥çº¿</p> </div> <p class="content">è¯å表è§è¡¨1-1ã</p> @@ -663,8 +692,10 @@ <li class="footer-box"></li> </ul> </div> </div> <!-- 8 --> <div class="page-box fl fl-cl ju-bt" page="18"> <div v-if="showPageList.indexOf(18) > -1"> <div> <div class="mt-20"> <img src="../../assets/images/page-header.png" alt="" class="w100" /> @@ -689,27 +720,79 @@ ï¼6ï¼å®è£ 宿åï¼Windowsæä½ç³»ç»çæ¡é¢ä¸æ·»å äºå¦å¾1-20æç¤ºçä¸¤ä¸ªå¿«æ·æ¹å¼å¾æ ï¼åå«ç¨äºå¯å¨MCGSåµå ¥å¼ç»æç¯å¢å模æè¿è¡ç¯å¢ã </p> <div class="qrbodyPic"> <el-carousel trigger="click" class="bones-carousel carousel-image" arrow="always" indicator-position="none" <div class="banshi openImgBox"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="imgBox" style="width: 100%; height: 100%" > <el-carousel-item v-for="(item, index) in bonesList" :key="index" class="bones-carousel-item" > <el-image :src="item" :preview-src-list="bonesList" :preview-teleported="true" class="open-image" <img src="../../assets/images/carousel-one.png" /> </el-carousel-item> </el-carousel> </div> </div> <div class="swiper-slide"> <div class="imgBox" style="width: 100%; height: 100%" > <img src="../../assets/images/carousel-two.png" /> </div> </div> <div class="swiper-slide"> <div class="imgBox" style="width: 100%; height: 100%" > <img src="../../assets/images/carousel-three.png" /> </div> </div> <div class="swiper-slide"> <div class="imgBox" style="width: 100%; height: 100%" > <img src="../../assets/images/carousel-four.png" /> </div> </div> <div class="swiper-slide"> <div class="imgBox" style="width: 100%; height: 100%" > <img src="../../assets/images/carousel-five.png" /> </div> </div> <div class="swiper-slide"> <div class="imgBox" style="width: 100%; height: 100%" > <img src="../../assets/images/carousel-six.png" /> </div> </div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div> </div> </div> </div> </div> <ul class="page-footer fl fl-cl al-cn w-mi p0 mb-40 padding-96"> <li class="footer-num">8</li> @@ -718,6 +801,7 @@ </div> <!-- 9 --> <div class="page-box fl fl-cl ju-bt al-end padding-96 pr" page="19"> <div v-if="showPageList.indexOf(19) > -1"> <div class="w100"> <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20"> <img src="../../assets/images/header-one.png" alt="" /> @@ -1013,7 +1097,9 @@ ï¼2ï¼éæ©âæä»¶âèåä¸çâå·¥ç¨å¦å为âå½ä»¤ï¼å¼¹åºâæä»¶ä¿åâå¯¹è¯æ¡ï¼å¨æä»¶å䏿 å è¾å ¥âå¸¸ç¨æä»¶ä½¿ç¨âï¼åå»âä¿åâæé®ï¼å·¥ç¨åå»ºå®æ¯ã </p> <div class="qrbodyPic"> <img src="../../assets/images/img00021003.jpg" active="true" /> <div class="openImgBox"> <img src="../../assets/images/img00021003.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-21ãéæ©TPCç±»å</p> </div> <p class="quotation fl al-cn t0 primary-color"> @@ -1036,8 +1122,10 @@ <li class="footer-box"></li> </ul> </div> </div> <!-- 10 --> <div class="page-box fl fl-cl ju-bt" page="20"> <div v-if="showPageList.indexOf(20) > -1"> <div> <div class="mt-20"> <img src="../../assets/images/page-header.png" alt="" class="w100" /> @@ -1045,11 +1133,15 @@ <div class="padding-96"> <div class="fl ju-bt w100"> <div> <el-image :src="imgFifteen" :preview-src-list="[imgFifteen]" /> <div class="openImgBox"> <img src="../../assets/images/img00022001.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-22ãå»ºç«æ°çªå£</p> </div> <div class=""> <el-image :src="imgSixteen" :preview-src-list="[imgSixteen]" /> <div class="openImgBox"> <img src="../../assets/images/img00022002.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-23ãçªå£å±æ§è®¾ç½®</p> </div> </div> @@ -1061,14 +1153,15 @@ </p> <div class="fl ju-bt"> <div> <el-image :src="imgSeventeen" :preview-src-list="[imgSeventeen]" /> <div class="openImgBox"> <img src="../../assets/images/img00022003.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-24ãæé®å¶ä½</p> </div> <div> <el-image :src="imgEighteen" :preview-src-list="[imgSeventeen]" /> <div class="openImgBox"> <img src="../../assets/images/img00022004.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-25ãæ åæé®æä»¶å±æ§è®¾ç½®</p> </div> </div> @@ -1091,38 +1184,46 @@ <li class="footer-box"></li> </ul> </div> </div> <!-- 11 --> <div class="page-box fl fl-cl ju-bt al-end padding-96 pr" page="21"> <div v-if="showPageList.indexOf(21) > -1"> <div class="w100"> <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20"> <img src="../../assets/images/header-one.png" alt="" /> </div> <div class="fl ju-bt"> <div> <el-image :src="imgNineTeen" :preview-src-list="[imgNineTeen]" /> <div class="openImgBox"> <img src="../../assets/images/img00023001.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-26ãæé®æåä¿®æ¹</p> </div> <div> <el-image :src="imgTwenty" :preview-src-list="[imgTwenty]" /> <div class="openImgBox"> <img src="../../assets/images/img00023002.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-27ãæé®æå</p> </div> </div> <div class="qrbodyPic"> <el-image :src="imgtOne" :preview-src-list="[imgtOne]" class="source-img" /> <div class="openImgBox"> <img src="../../assets/images/img00023003.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-28ãæ·»å æç¤ºç¯</p> </div> <div class="fl"> <div> <el-image :src="imgtTwo" :preview-src-list="[imgtTwo]" /> <div class="openImgBox"> <img src="../../assets/images/img00023004.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-29ãå¶ä½æ ç¾</p> </div> <div style="width: 66%"> <el-image :src="imgtThree" :preview-src-list="[imgtThree]" /> <div class="openImgBox"> <img src="../../assets/images/img00023005.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-30ãæ ç¾å¨ç»ç»æå±æ§è®¾ç½®</p> </div> </div> @@ -1139,8 +1240,10 @@ <li class="footer-box"></li> </ul> </div> </div> <!-- 12 --> <div class="page-box fl fl-cl ju-bt" page="22"> <div v-if="showPageList.indexOf(22) > -1"> <div> <div class="mt-20"> <img src="../../assets/images/page-header.png" alt="" class="w100" /> @@ -1148,11 +1251,15 @@ <div class="padding-96"> <div class="fl"> <div> <el-image :src="imgtFour" :preview-src-list="[imgtFour]" /> <div class="openImgBox"> <img src="../../assets/images/img00024001.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-31ãå¶ä½è¾å ¥æ¡</p> </div> <div> <el-image :src="imgtFive" :preview-src-list="[imgtFive]" /> <div class="openImgBox"> <img src="../../assets/images/img00024002.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-32ãè¾å ¥æ¡æå</p> </div> </div> @@ -1162,11 +1269,15 @@ </p> <div class="fl"> <div> <el-image :src="imgtSix" :preview-src-list="[imgtSix]" /> <div class="openImgBox"> <img src="../../assets/images/img00024003.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-33ãæ åæé®æä»¶å±æ§è®¾ç½®âå¯¹è¯æ¡</p> </div> <div> <el-image :src="imgtSeven" :preview-src-list="[imgtSeven]" /> <div class="openImgBox"> <img src="../../assets/images/img00024004.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-34ãæ§å¶æé®è®¾ç½®</p> </div> </div> @@ -1191,7 +1302,9 @@ </div> <div style="width: 40%"> <div class="qrbodyPic"> <el-image :src="imgtEnight" :preview-src-list="[imgtEnight]" /> <div class="openImgBox"> <img src="../../assets/images/img00024005.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-35ãç»æéè¯¯å¯¹è¯æ¡</p> </div> </div> @@ -1211,19 +1324,25 @@ <li class="footer-box"></li> </ul> </div> </div> <!-- 13 --> <div class="page-box fl fl-cl ju-bt al-end padding-96 pr" page="23"> <div v-if="showPageList.indexOf(23) > -1"> <div class="w100"> <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20"> <img src="../../assets/images/header-one.png" alt="" /> </div> <div class="fl"> <div> <el-image :src="imgtNine" :preview-src-list="[imgtNine]" /> <div class="openImgBox"> <img src="../../assets/images/img00025001.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-36ãæ°æ®å¯¹è±¡å±æ§è®¾ç½®</p> </div> <div> <el-image :src="imgtTen" :preview-src-list="[imgtTen]" /> <div class="openImgBox"> <img src="../../assets/images/img00025002.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-37ãæä¸åè½è®¾ç½®</p> </div> </div> @@ -1232,11 +1351,15 @@ </p> <div class="fl"> <div> <el-image :src="imgrOne" :preview-src-list="[imgrOne]" /> <div class="openImgBox"> <img src="../../assets/images/img00025003.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-38ãéæ©æ°æ®å¯¹è±¡æç¤ºç¯</p> </div> <div> <el-image :src="imgrTwo" :preview-src-list="[imgrTwo]" /> <div class="openImgBox"> <img src="../../assets/images/img00025004.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-39ãæç¤ºç¯1屿§æä½</p> </div> </div> @@ -1260,7 +1383,9 @@ />æé®ï¼è¿è¡ä¸è½½é ç½®ãåå»âèæºè¿è¡âæé®ï¼å¦å¾1-41æç¤ºï¼éæ©âUSBéä¿¡âè¿æ¥æ¹å¼ï¼ç¶ååå»âéä¿¡æµè¯âæé®ï¼éä¿¡æµè¯æ£å¸¸åï¼åå»âå·¥ç¨ä¸è½½âæé®ï¼å¦å¾1-42æç¤ºã </p> <div style="width: 30%"> <el-image :src="imgrThree" :preview-src-list="[imgrThree]" /> <div class="openImgBox"> <img src="../../assets/images/img00025006.jpg" alt="" class="w100"> </div> <p class="imgdescript">å¾1-40ãæ åUSB2.0æå°æºçº¿</p> </div> </div> @@ -1282,8 +1407,10 @@ <li class="footer-box"></li> </ul> </div> </div> <!-- 14 --> <div class="page-box fl fl-cl ju-bt" page="24"> <div v-if="showPageList.indexOf(24) > -1"> <div> <div class="mt-20"> <img src="../../assets/images/page-header.png" alt="" class="w100" /> @@ -1313,7 +1440,7 @@ é¤äºä¸è½½å°TPCè¿è¡æ¨¡æè°è¯å¤ï¼å¯ä»¥å¨è®¡ç®æºä¸è¿è¡æ¨¡æè¿è¡ãéæ©âæ¨¡æè¿è¡âï¼åå»âå·¥ç¨ä¸è½½âæé®åè¿å ¥è¿è¡ç¯å¢ãæä¸âæç¤ºç¯1âæé®ï¼å¦å¾1-45æç¤ºï¼âæç¤ºç¯1âå绿ï¼âç¶ææ¾ç¤º1ï¼â为â1âï¼æ¾æåå¤ä½ï¼æä¸âæç¤ºç¯2âæé®ï¼å¦å¾1-46æç¤ºï¼âæç¤ºç¯2âå绿ï¼âç¶ææ¾ç¤º2ï¼â为â1âã </p> <div class="qrbodyPic"> <el-carousel <!-- <el-carousel trigger="click" class="img-carousel carousel-image" arrow="always" @@ -1331,7 +1458,77 @@ class="open-image" /> </el-carousel-item> </el-carousel> </el-carousel> --> <div class="banshi openImgBox"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="imgBox" style="width: 100%; height: 100%" > <img src="../../assets/images/img-list-one.png" /> </div> </div> <div class="swiper-slide"> <div class="imgBox" style="width: 100%; height: 100%" > <img src="../../assets/images/img-list-two.png" /> </div> </div> <div class="swiper-slide"> <div class="imgBox" style="width: 100%; height: 100%" > <img src="../../assets/images/img-list-three.png" /> </div> </div> <div class="swiper-slide"> <div class="imgBox" style="width: 100%; height: 100%" > <img src="../../assets/images/img-list-four.png" /> </div> </div> <div class="swiper-slide"> <div class="imgBox" style="width: 100%; height: 100%" > <img src="../../assets/images/img-list-five.png" /> </div> </div> <div class="swiper-slide"> <div class="imgBox" style="width: 100%; height: 100%" > <img src="../../assets/images/img-list-six.png" /> </div> </div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div> </div> </div> </div> </div> @@ -1342,6 +1539,7 @@ </div> <!-- 15 --> <div class="page-box fl fl-cl ju-bt al-end padding-96 pr" page="25"> <div v-if="showPageList.indexOf(25) > -1"> <div class="w100"> <div class="primary-color fz-18 fw-bl mt-100 fl ju-ed mb-20"> <img src="../../assets/images/header-one.png" alt="" /> @@ -1613,55 +1811,18 @@ </ul> </div> </div> </div> </template> <script> export default { name: "chapterOne", props: { showPageList: { type: Array, }, }, data() { return { imgOne: require("../../assets/images/img00014001.jpg"), imgTwo: require("../../assets/images/img00014002.jpg"), imgThree: require("../../assets/images/img00014003.jpg"), imgFour: require("../../assets/images/img00014004.jpg"), imgFive: require("../../assets/images/img00015001.jpg"), imgSix: require("../../assets/images/img00017001.jpg"), imgSeven: require("../../assets/images/img00017002.jpg"), imgEnight: require("../../assets/images/img00017003.jpg"), imgNine: require("../../assets/images/img00017004.jpg"), imgTen: require("../../assets/images/img00017005.jpg"), imgEleven: require("../../assets/images/img00018001.jpg"), imgTwelve: require("../../assets/images/img00018002.jpg"), imgThirteen: require("../../assets/images/img00018003.jpg"), imgFourteen: require("../../assets/images/img00019001.jpg"), imgFifteen: require("../../assets/images/img00022001.jpg"), imgSixteen: require("../../assets/images/img00022002.jpg"), imgSeventeen: require("../../assets/images/img00022003.jpg"), imgEighteen: require("../../assets/images/img00022004.jpg"), imgNineTeen: require("../../assets/images/img00023001.jpg"), imgTwenty: require("../../assets/images/img00023002.jpg"), imgtOne: require("../../assets/images/img00023003.jpg"), imgtTwo: require("../../assets/images/img00023004.jpg"), imgtThree: require("../../assets/images/img00023005.jpg"), imgtFour: require("../../assets/images/img00024001.jpg"), imgtFive: require("../../assets/images/img00024002.jpg"), imgtSix: require("../../assets/images/img00024003.jpg"), imgtSeven: require("../../assets/images/img00024004.jpg"), imgtEnight: require("../../assets/images/img00024005.jpg"), imgtNine: require("../../assets/images/img00025001.jpg"), imgtTen: require("../../assets/images/img00025002.jpg"), imgrOne: require("../../assets/images/img00025003.jpg"), imgrTwo: require("../../assets/images/img00025004.jpg"), imgrThree: require("../../assets/images/img00025006.jpg"), tableOne: require("../../assets/images/img00019002.jpg"), videoOne: true, bonesList: [ require("../../assets/images/carousel-one.png"), require("../../assets/images/carousel-two.png"), require("../../assets/images/carousel-three.png"), require("../../assets/images/carousel-four.png"), require("../../assets/images/carousel-five.png"), require("../../assets/images/carousel-six.png"), ], imgList: [ require("../../assets/images/img-list-one.png"), require("../../assets/images/img-list-two.png"), @@ -1695,7 +1856,8 @@ </script> <style scoped lang="less"> p { font-family: "Segoe UI", Arial, "å®ä½", SimSun, sans-serif !important; // font-family: "Segoe UI", Arial, "å®ä½", SimSun, sans-serif !important; font-family: "Times New Roman", "å®ä½", SimSun, sans-serif !important; margin: 0; text-align: justify; } @@ -1759,4 +1921,10 @@ text-indent: 0; padding-left: 23px; } .banshi { margin-top: 40px; width: 100%; height: 350px; margin: 0 auto; } </style> src/books/embedded/view/components/header.vue
@@ -1,10 +1,16 @@ <template> <div class="chapter" num="0"> <div class="chapter" num="1"> <!-- å°é¢ --> <div class="page-box" page="1"> <div v-if="showPageList.indexOf(1) > -1"> <h1 class="frontCover" title=""> <img alt="å°é¢" src="../../assets/images/device_pad_Frontcover.jpg" class="cover-box w100" /> <img alt="å°é¢" src="../../assets/images/device_pad_Frontcover.jpg" class="cover-box w100" /> </h1> </div> </div> <!-- ä½è ç®ä» --> <div @@ -12,6 +18,7 @@ style="width: 408px; margin: 0 auto" page="2" > <div v-if="showPageList.indexOf(2) > -1"> <document> <h1 class="author-box">ä½è ç®ä»</h1> <div class="bodyPic"> @@ -28,14 +35,22 @@ </p> </document> </div> </div> <!-- å°é¢ --> <div class="page-box" page="3"> <div v-if="showPageList.indexOf(3) > -1"> <h1 class="frontCover" title="å°é¢"> <img alt="å°é¢" src="../../assets/images/device_pad_Frontcover.jpg" class="cover-box w100"> <img alt="å°é¢" src="../../assets/images/device_pad_Frontcover.jpg" class="cover-box w100" /> </h1> </div> </div> <!-- å 容ç®ä» --> <div class="page-box page-padding neirong" page="4"> <div v-if="showPageList.indexOf(4) > -1"> <document> <h1>å 容ç®ä»</h1> <p class="quotation cl-66"> @@ -59,8 +74,8 @@ <p class="contentCR">ISBNï¼9787113254025</p> <p class="contentCR">æ¬ä¹¦ç±ä¸å½ééåºç社è¿è¡å¶ä½ä¸åè¡ã</p> <p class="contentCR">çæææÂ·ä¾µæå¿ ç©¶</p> --> <div style="width: 65%;" class="fw-box"> <img src="../../assets/images/banquan.png"> <div style="width: 65%" class="fw-box"> <img src="../../assets/images/banquan.png" /> <!-- <p class="content">å¾ä¹¦å¨çç¼ç®(CIP)æ°æ®</p> <p class="content">åµå ¥å¼ç»ææ§å¶ææ¯/å¼ ææï¼åç¥é¶ä¸»ç¼.-3 ç.</p> <p class="content">-å京:ä¸å½ééåºç社æéå ¬å¸ï¼2019.7</p> @@ -92,13 +107,27 @@ </div> <hr /> <p class="t0">åºçåè¡ï¼ä¸å½ééåºç社æéå ¬å¸(100054ï¼å京å¸è¥¿ååºå³å®é¨è¥¿è¡8å·)</p> <p class="t0">ç½ åï¼http:// www.tdpress.com/5 leds/</p> <p class="t0">å° å·ï¼å京æåè¡å½©å°æéå ¬å¸</p> <p class="t0">ç æ¬¡ï¼2011å¹´8æç¬¬1ç 2019å¹´7æç¬¬3ç 2019å¹´7æç¬¬1次å°å·</p> <p class="t0">å¼ æ¬ï¼787mmx1092mm1/16å°å¼ ï¼18åæ°ï¼433å</p> <p class="t0"> åºçåè¡ï¼ä¸å½ééåºç社æéå ¬å¸(100054ï¼å京å¸è¥¿ååºå³å®é¨è¥¿è¡8å·) </p> <p class="t0"> ç½ åï¼http:// www.tdpress.com/5 leds/ </p> <p class="t0"> å° å·ï¼å京æåè¡å½©å°æéå ¬å¸ </p> <p class="t0"> ç æ¬¡ï¼2011å¹´8æç¬¬1ç 2019å¹´7æç¬¬3ç 2019å¹´7æç¬¬1次å°å· </p> <p class="t0"> å¼ æ¬ï¼787mmx1092mm1/16å°å¼ ï¼18åæ°ï¼433å </p> <p class="t0">å° æ°ï¼1~2000å</p> <p class="t0">书 å·ï¼SBN978-7-113-25402-5</p> <p class="t0"> 书 å·ï¼SBN978-7-113-25402-5 </p> <p class="t0">å® ä»·ï¼59.80å </p> <hr /> <p class="tl-cn">çæææï¼ä¾µæå¿ ç©¶</p> @@ -107,8 +136,10 @@ </p> <p class="tl-cn">æå»çç举æ¥çµè¯:(010)51873659</p> </div> </div> <!-- ç¼å®¡å§åä¼ --> <div class="page-box page-padding" page="5"> <div v-if="showPageList.indexOf(5) > -1"> <document> <p class="content t-center bs-box"> å ¨å½é«èé«ä¸é¢æ ¡æºçµç±»ä¸ä¸è§åææ @@ -151,8 +182,10 @@ </div> </document> </div> </div> <!-- åºç说æ --> <div class="page-box pd-104" page="6"> <div v-if="showPageList.indexOf(6) > -1"> <div class="page-heder-img"> <img src="../../assets/images/publish.png" alt="" class="mt-100" /> </div> @@ -190,8 +223,10 @@ </document> </div> </div> </div> <!-- 第ä¸ç --> <div class="page-box pd-104" page="7"> <div v-if="showPageList.indexOf(7) > -1"> <div class="page-heder-img"> <img src="../../assets/images/qianyan.png" class="mt-100" alt="" /> </div> @@ -231,15 +266,18 @@ </document> </div> </div> </div> <!-- 3-1 --> <div class="page-box fl fl-cl ju-bt" page="8"> <div> <div v-if="showPageList.indexOf(8) > -1"> <div class="mt-20"> <img src="../../assets/images/page-header.png" alt="" class="w100" /> </div> <div class="padding-96"> <document> <p class="t0">å°æé«å¦çå¦ä¹ å ´è¶£åæç以åæå¦ãææãæä¸æçç®çã</p> <p class="t0"> å°æé«å¦çå¦ä¹ å ´è¶£åæç以åæå¦ãææãæä¸æçç®çã </p> <p class="quotation fl al-cn t0"> <img src="../../assets/images/icon/neirong.png" @@ -249,7 +287,11 @@ <b>åºæ¬å 容</b> </p> <p class="quotation"> æ¬ä¹¦ç±å½©è²çº¸è´¨ææåç½ç»èµæºç»æã彩è²çº¸è´¨ææç±ä¹ä¸ªé¡¹ç®ç»æï¼æ¯ä¸ªé¡¹ç®ä¸çä»»å¡å®æäºä»»å¡ç®æ ãä»»å¡æè¿°åä»»å¡è®ç»ãç½ç»èµæºå«åµå ¥çç»æè½¯ä»¶ãå·¥ç¨æ¡ä¾ãæå¦æ¡ä¾ãç¨åºæºä»£ç ã微课çï¼ä¸ºâæâåâå¦âæä¾äºçå¨ãç´è§ã便æ·ãç«ä½çæå¦èµæºå ãè§é¢èµæºéè¿æ«æäºç»´ç è·åï¼å ¶ä»ç¸å ³èµæºå¯ä»æç¤¾ç½ç«ï¼<a href="http://www.tdpress.com/51eds/">http://www.tdpress.com/51eds/</a> ï¼ä¸è½½ã æ¬ä¹¦ç±å½©è²çº¸è´¨ææåç½ç»èµæºç»æã彩è²çº¸è´¨ææç±ä¹ä¸ªé¡¹ç®ç»æï¼æ¯ä¸ªé¡¹ç®ä¸çä»»å¡å®æäºä»»å¡ç®æ ãä»»å¡æè¿°åä»»å¡è®ç»ãç½ç»èµæºå«åµå ¥çç»æè½¯ä»¶ãå·¥ç¨æ¡ä¾ãæå¦æ¡ä¾ãç¨åºæºä»£ç ã微课çï¼ä¸ºâæâåâå¦âæä¾äºçå¨ãç´è§ã便æ·ãç«ä½çæå¦èµæºå ãè§é¢èµæºéè¿æ«æäºç»´ç è·åï¼å ¶ä»ç¸å ³èµæºå¯ä»æç¤¾ç½ç«ï¼<a href="http://www.tdpress.com/51eds/" >http://www.tdpress.com/51eds/</a > ï¼ä¸è½½ã </p> <p class="quotation"> æ¬ä¹¦ç±å¼ ææãåç¥é¶ä»»ä¸»ç¼ï¼çä¸å¡ãéä¸åã黿ä¼ãæ¹å»ºåãå®é»èã缪建åãä»åè¯ãè´¾å贤任å¯ä¸»ç¼ï¼å ·ä½ç¼ååå·¥å¦ä¸ï¼å¼ æææææ°ååè¨ï¼å¼ ææææååç¥é¶æ»å·¥ç¨å¸å ±åç¼å项ç®ä¸ï¼é»æä¼å·¥ç¨å¸ç¼å项ç®äºã项ç®ä¸ï¼ä»»å¡ä¸ï½ä»»å¡åï¼ï¼éä¸åå·¥ç¨å¸ç¼å项ç®äºï¼çä¸å¡å¯ææç¼å项ç®åã项ç®å ï¼å®é»èå·¥ç¨å¸ç¼å项ç®ä¸ã项ç®ä¸ï¼ä»»å¡å ï¼ï¼ä»åè¯å¯ææç¼å项ç®ä¸ï¼ä»»å¡äºï¼ãæ¹å»ºå坿æåè´¾å贤讲å¸å ±åç¼å项ç®å «ï¼ç¼ªå»ºåé«çº§æå¸ç¼å项ç®ä¹ãå ¨ä¹¦ç±å¼ æææææå¯¼å¹¶è´è´£ç»ç¨¿ï¼æ±¤æåææåå京æä»éæèªå¨åè½¯ä»¶ç§ææéå ¬å¸åå¿åé«çº§å·¥ç¨å¸ä¸»å®¡ã @@ -272,8 +314,13 @@ </div> <!-- 第ä¸ç --> <div class="page-box" page="9"> <div v-if="showPageList.indexOf(9) > -1"> <div class="page-heder-img"> <img src="../../assets/images/qianyan-one.png" class="mt-100" alt="" /> <img src="../../assets/images/qianyan-one.png" class="mt-100" alt="" /> </div> <div class="padding-96"> <document> @@ -311,11 +358,17 @@ </document> </div> </div> </div> <!-- 1-1 --> <div class="page-box fl fl-cl ju-bt" page="10"> <div v-if="showPageList.indexOf(10) > -1"> <div> <div class="mt-20"> <img src="../../assets/images/page-header.png" alt="" class="w100" /> <img src="../../assets/images/page-header.png" alt="" class="w100" /> </div> <div class="padding-96"> <document> @@ -351,21 +404,22 @@ </ul> </div> </div> </div> </template> <script> export default { name: "headerPage", props:{ showPageList:{ type:Array } } type: Array, }, }, }; </script> <style scoped lang="less"> p { text-align: justify; // color: #666; font-family: "Times New Roman", "å®ä½", SimSun, sans-serif !important; } .author-padding { padding: 104px 20px 104px 20px; src/books/embedded/view/components/index.vue
@@ -1,12 +1,21 @@ <template> <div class="page-main" @scroll="throttledScrollHandler"> <div class="page-content" :style="{ <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" /> }" > <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList" ></pageHeader> <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" /> </div> </div> </template> @@ -42,7 +51,7 @@ loadPageObserver: null, loadPageList: [], questionData: {}, testData:{} testData: {}, }; }, watch: { @@ -62,7 +71,7 @@ this.initObservation(); this.initThemeColor(); }, 500); } }, }, loadPageList: { handler(newVal, oldVal) { @@ -70,8 +79,8 @@ this.initSwiper(); this.initViewer(); }, 200); } } }, }, }, mounted() { // é»è®¤å è½½ç« è @@ -418,7 +427,7 @@ this.$store.state.qiankun.pageChange({ page: page, catalog: catalog, text text, }); // const sections = Array.from(document.querySelectorAll(".section")); //sectionsï¼è·åææå ·æ .section ç±»åçå ç´ ï¼å¹¶è½¬æ¢ä¸ºæ°ç»ã @@ -463,6 +472,7 @@ // } // } this.loadPageList.push(Number(page)); console.log('页ç å表',this.loadPageList); if (this.loadPageList.length > 5) { // è¶ è¿5页 this.loadPageList.shift(); @@ -482,7 +492,7 @@ autoplay: { //èªå¨å¼å§ delay: 3000, //æ¶é´é´é disableOnInteraction: false //*æå¨æä½è½®æå¾åä¸ä¼æå* disableOnInteraction: false, //*æå¨æä½è½®æå¾åä¸ä¼æå* }, paginationClickable: true, slidesPerView: 1, // ä¸ç»ä¸ä¸ª @@ -490,7 +500,7 @@ // 妿éè¦åè¿åéæé® navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev" prevEl: ".swiper-button-prev", }, // çªå£åå,éæ°init,é对F11å ¨å±åæ¾å¤§ç¼©å°,å¿ é¡»å observer: true, @@ -512,10 +522,10 @@ new Viewer(dom, { navbar: true, // æ¾ç¤ºå¯¼èªæ toolbar: true, // æ¾ç¤ºå·¥å ·æ title: true // æ¾ç¤ºæ é¢ title: true, // æ¾ç¤ºæ é¢ }); } } }, }, }; </script> src/books/embedded/view/index.vue
@@ -2,10 +2,6 @@ <div class="embedded-book" @mouseup="handleMouseUp" :style="{ fontSize: fontSize ? fontSize + 'px' : '16px', transform: `scale(${pageZoom ? pageZoom : 1})`, }" > <pageContent></pageContent> </div> @@ -26,14 +22,6 @@ cardList: [], isMouseDown: false, }; }, computed: { fontSize() { return this.$store.state.qiankun.fontSize; }, pageZoom() { return this.$store.state.qiankun.scale / 100; }, }, mounted() { }, src/books/lifeCare/index.vue
@@ -135,6 +135,7 @@ loadPageObserver: null, loadPageList: [], questionData: {}, renderSignMap: {} }; }, computed: { @@ -301,7 +302,7 @@ this.showCatalogList = [ this.catalogLength - 2, this.catalogLength - 1, this.catalogLength, this.catalogLength ]; } else { this.showCatalogList = [catalog - 1, catalog, catalog + 1]; @@ -322,6 +323,14 @@ } }, // å¤çæ è®°æ°æ® handelSignData(type, data) { if (!this.renderSignMap[type]) this.renderSignMap[type] = {}; if (!this.renderSignMap[type][data.page]) this.renderSignMap[type][data.page] = []; this.renderSignMap[type][data.page].push(data); }, // æ¸²ææ è®° renderSign(type, data) { const existence = ( @@ -332,29 +341,48 @@ 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": // é«äº® pageDom.innerHTML = pageDom.innerHTML.replace( 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": // å线 pageDom.innerHTML = pageDom.innerHTML.replace( 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": // ç¬è®° pageDom.innerHTML = pageDom.innerHTML.replace( 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; } } } } }, @@ -536,7 +564,7 @@ if (entry.isIntersecting) { const target = entry.target; const page = target.getAttribute("page"); if (this.loadPageList.indexOf(page) == -1) { if (this.loadPageList.indexOf(Number(page)) == -1) { const catalogDom = this.tool.getParentNodeByClassName( target, "chapter" @@ -565,7 +593,16 @@ } } } // æ·»å 页ç this.loadPageList.push(Number(page)); // 渲æè¿ä¸é¡µçæ è®° for (const key in this.renderSignMap) { if (this.renderSignMap[key][page]) { this.renderSignMap[key][page].forEach((item) => { this.renderSign(key, item); }); } } if (this.loadPageList.length > 5) { // è¶ è¿5页 this.loadPageList.shift(); src/books/sportsAndHealth/css/default.less
@@ -42,13 +42,13 @@ justify-content: center; table { border: 1px solid #0aa2e9; border: 1px solid #95b2dc; border-collapse: collapse; padding: 0; margin: 0; tr th { border: 1px solid #0aa2e9; border: 1px solid #95b2dc; background-color: #b0a3cf; color: #f49a4c; text-align: center; @@ -57,10 +57,11 @@ } tr td { border: 1px solid #0aa2e9; border: 1px solid #95b2dc; text-align: center; padding: 3px 10px; font-size: 14px; line-height: 25px; input { cursor: pointer; src/books/sportsAndHealth/index.vue
@@ -73,6 +73,7 @@ loadPageObserver: null, loadPageList: [], questionData: {}, renderSignMap: {} }; }, computed: { src/books/sportsAndHealth/view/chapter002.vue
@@ -94,49 +94,235 @@ </thead> <tbody> <tr> <td>1. ææè§å¿«ä¹ï¼å¿æ èç </td> <td><input :value="chapter002.tablexyx1.text1" type="checkbox" />5</td> <td><input :value="chapter002.tablexyx1.text2" type="checkbox" />4</td> <td><input :value="chapter002.tablexyx1.text3" type="checkbox" />3</td> <td><input :value="chapter002.tablexyx1.text4" type="checkbox" />2</td> <td><input :value="chapter002.tablexyx1.text5" type="checkbox" />1</td> <td><input :value="chapter002.tablexyx1.text6" type="checkbox" />0</td> <td style="text-align: left">1. ææè§å¿«ä¹ï¼å¿æ èç </td> <td> <input @change="changeBox($event, 'text1')" :checked="chapter002.tablexyx1.text1" type="checkbox" />5 </td> <td> <input @change="changeBox($event, 'text2')" :checked="chapter002.tablexyx1.text2" type="checkbox" />4 </td> <td> <input @change="changeBox($event, 'text3')" :checked="chapter002.tablexyx1.text3" type="checkbox" />3 </td> <td> <input @change="changeBox($event, 'text4')" :checked="chapter002.tablexyx1.text4" type="checkbox" />2 </td> <td> <input @change="changeBox($event, 'text5')" :checked="chapter002.tablexyx1.text5" type="checkbox" />1 </td> <td> <input @change="changeBox($event, 'text6')" :checked="chapter002.tablexyx1.text6" type="checkbox" />0 </td> </tr> <tr> <td>2. ææè§å®éåæ¾æ¾</td> <td><input :value="chapter002.tablexyx1.text7" type="checkbox" />5</td> <td><input :value="chapter002.tablexyx1.text8" type="checkbox" />4</td> <td><input :value="chapter002.tablexyx1.text9" type="checkbox" />3</td> <td><input :value="chapter002.tablexyx1.text10" type="checkbox" />2</td> <td><input :value="chapter002.tablexyx1.text11" type="checkbox" />1</td> <td><input :value="chapter002.tablexyx1.text12" type="checkbox" />0</td> <td style="text-align: left">2. ææè§å®éåæ¾æ¾</td> <td> <input @change="changeBox($event, 'text7')" :checked="chapter002.tablexyx1.text7" type="checkbox" />5 </td> <td> <input @change="changeBox($event, 'text8')" :checked="chapter002.tablexyx1.text8" type="checkbox" />4 </td> <td> <input @change="changeBox($event, 'text9')" :checked="chapter002.tablexyx1.text9" type="checkbox" />3 </td> <td> <input @change="changeBox($event, 'text10')" :checked="chapter002.tablexyx1.text10" type="checkbox" />2 </td> <td> <input @change="changeBox($event, 'text11')" :checked="chapter002.tablexyx1.text11" type="checkbox" />1 </td> <td> <input @change="changeBox($event, 'text12')" :checked="chapter002.tablexyx1.text12" type="checkbox" />0 </td> </tr> <tr> <td>3. ææè§å 满活åï¼ç²¾åå æ²</td> <td>5</td> <td>4</td> <td>3</td> <td>2</td> <td>1</td> <td>0</td> <td style="text-align: left"> 3. ææè§å 满活åï¼ç²¾åå æ² </td> <td> <input @change="changeBox($event, 'text13')" :checked="chapter002.tablexyx1.text13" type="checkbox" />5 </td> <td> <input @change="changeBox($event, 'text14')" :checked="chapter002.tablexyx1.text14" type="checkbox" />4 </td> <td> <input @change="changeBox($event, 'text15')" :checked="chapter002.tablexyx1.text15" type="checkbox" />3 </td> <td> <input @change="changeBox($event, 'text16')" :checked="chapter002.tablexyx1.text16" type="checkbox" />2 </td> <td> <input @change="changeBox($event, 'text17')" :checked="chapter002.tablexyx1.text17" type="checkbox" />1 </td> <td> <input @change="changeBox($event, 'text18')" :checked="chapter002.tablexyx1.text18" type="checkbox" />0 </td> </tr> <tr> <td>4. æç¡éæ¶æå°æ¸ éï¼å¾å°äºè¶³å¤ä¼æ¯</td> <td>5</td> <td>4</td> <td>3</td> <td>2</td> <td>1</td> <td>0</td> <td style="text-align: left"> 4. æç¡éæ¶æå°æ¸ éï¼å¾å°äºè¶³å¤ä¼æ¯ </td> <td> <input @change="changeBox($event, 'text19')" :checked="chapter002.tablexyx1.text19" type="checkbox" />5 </td> <td> <input @change="changeBox($event, 'text20')" :checked="chapter002.tablexyx1.text20" type="checkbox" />4 </td> <td> <input @change="changeBox($event, 'text21')" :checked="chapter002.tablexyx1.text21" type="checkbox" />3 </td> <td> <input @change="changeBox($event, 'text22')" :checked="chapter002.tablexyx1.text22" type="checkbox" />2 </td> <td> <input @change="changeBox($event, 'text23')" :checked="chapter002.tablexyx1.text23" type="checkbox" />1 </td> <td> <input @change="changeBox($event, 'text24')" :checked="chapter002.tablexyx1.text24" type="checkbox" />0 </td> </tr> <tr> <td>5. ææ¯å¤©ççæ´»å æ»¡äºæè¶£çäºæ </td> <td>5</td> <td>4</td> <td>3</td> <td>2</td> <td>1</td> <td>0</td> <td style="text-align: left"> 5. ææ¯å¤©ççæ´»å æ»¡äºæè¶£çäºæ </td> <td> <input @change="changeBox($event, 'text25')" :checked="chapter002.tablexyx1.text25" type="checkbox" />5 </td> <td> <input @change="changeBox($event, 'text26')" :checked="chapter002.tablexyx1.text26" type="checkbox" />4 </td> <td> <input @change="changeBox($event, 'text27')" :checked="chapter002.tablexyx1.text27" type="checkbox" />3 </td> <td> <input @change="changeBox($event, 'text28')" :checked="chapter002.tablexyx1.text28" type="checkbox" />2 </td> <td> <input @change="changeBox($event, 'text29')" :checked="chapter002.tablexyx1.text29" type="checkbox" />1 </td> <td> <input @change="changeBox($event, 'text30')" :checked="chapter002.tablexyx1.text30" type="checkbox" />0 </td> </tr> </tbody> </table> @@ -200,59 +386,59 @@ <tbody> <tr> <td>1</td> <td>æ£å¸¸å¥åº·</td> <td>å¥åº·</td> <td>å¥åº·</td> <td>å¥åº·</td> <td><input @change="changeByb($event,'text1')" type="checkbox" :checked="chapter002.tablebyb1.text1" />æ£å¸¸å¥åº·</td> <td><input @change="changeByb($event,'text2')" type="checkbox" :checked="chapter002.tablebyb1.text2" />å¥åº·</td> <td><input @change="changeByb($event,'text2')" type="checkbox" :checked="chapter002.tablebyb1.text2" />å¥åº·</td> <td><input @change="changeByb($event,'text4')" type="checkbox" :checked="chapter002.tablebyb1.text4" />å¥åº·</td> </tr> <tr> <td>2</td> <td>æ²è§</td> <td>ä¸å¥åº·</td> <td>å¥åº·</td> <td>å¥åº·</td> <td><input @change="changeByb($event,'text5')" type="checkbox" :checked="chapter002.tablebyb1.text5" />æ²è§</td> <td><input @change="changeByb($event,'text6')" type="checkbox" :checked="chapter002.tablebyb1.text6" />ä¸å¥åº·</td> <td><input @change="changeByb($event,'text7')" type="checkbox" :checked="chapter002.tablebyb1.text7" />å¥åº·</td> <td><input @change="changeByb($event,'text8')" type="checkbox" :checked="chapter002.tablebyb1.text8" />å¥åº·</td> </tr> <tr> <td>3</td> <td>ç¤¾ä¼æ¹é¢ä¸å¥åº·</td> <td>å¥åº·</td> <td>å¥åº·</td> <td>ä¸å¥åº·</td> <td><input @change="changeByb($event,'text9')" type="checkbox" :checked="chapter002.tablebyb1.text9" />ç¤¾ä¼æ¹é¢ä¸å¥åº·</td> <td><input @change="changeByb($event,'text10')" type="checkbox" :checked="chapter002.tablebyb1.text10" />å¥åº·</td> <td><input @change="changeByb($event,'text11')" type="checkbox" :checked="chapter002.tablebyb1.text11" />å¥åº·</td> <td><input @change="changeByb($event,'text12')" type="checkbox" :checked="chapter002.tablebyb1.text12" />ä¸å¥åº·</td> </tr> <tr> <td>4</td> <td>æ£çç ç</td> <td>ä¸å¥åº·</td> <td>å¥åº·</td> <td>å¥åº·</td> <td><input @change="changeByb($event,'text13')" type="checkbox" :checked="chapter002.tablebyb1.text13" />æ£çç ç</td> <td><input @change="changeByb($event,'text14')" type="checkbox" :checked="chapter002.tablebyb1.text14" />ä¸å¥åº·</td> <td><input @change="changeByb($event,'text15')" type="checkbox" :checked="chapter002.tablebyb1.text15" />å¥åº·</td> <td><input @change="changeByb($event,'text16')" type="checkbox" :checked="chapter002.tablebyb1.text16" />å¥åº·</td> </tr> <tr> <td>5</td> <td>身ä½ä¸å¥åº·</td> <td>å¥åº·</td> <td>ä¸å¥åº·</td> <td>å¥åº·</td> <td><input @change="changeByb($event,'text17')" type="checkbox" :checked="chapter002.tablebyb1.text17" />身ä½ä¸å¥åº·</td> <td><input @change="changeByb($event,'text18')" type="checkbox" :checked="chapter002.tablebyb1.text18" />å¥åº·</td> <td><input @change="changeByb($event,'text19')" type="checkbox" :checked="chapter002.tablebyb1.text19" />ä¸å¥åº·</td> <td><input @change="changeByb($event,'text20')" type="checkbox" :checked="chapter002.tablebyb1.text20" />å¥åº·</td> </tr> <tr> <td>6</td> <td>é¿æåç æç£¨</td> <td>ä¸å¥åº·</td> <td>ä¸å¥åº·</td> <td>å¥åº·</td> <td><input @change="changeByb($event,'text21')" type="checkbox" :checked="chapter002.tablebyb1.text21" />é¿æåç æç£¨</td> <td><input @change="changeByb($event,'text22')" type="checkbox" :checked="chapter002.tablebyb1.text22" />ä¸å¥åº·</td> <td><input @change="changeByb($event,'text23')" type="checkbox" :checked="chapter002.tablebyb1.text23" />ä¸å¥åº·</td> <td><input @change="changeByb($event,'text24')" type="checkbox" :checked="chapter002.tablebyb1.text24" />å¥åº·</td> </tr> <tr> <td>7</td> <td>ä¹è§</td> <td>å¥åº·</td> <td>ä¸å¥åº·</td> <td>å¥åº·</td> <td><input @change="changeByb($event,'text25')" type="checkbox" :checked="chapter002.tablebyb1.text25" />ä¹è§</td> <td><input @change="changeByb($event,'text26')" type="checkbox" :checked="chapter002.tablebyb1.text26" />å¥åº·</td> <td><input @change="changeByb($event,'text27')" type="checkbox" :checked="chapter002.tablebyb1.text27" />ä¸å¥åº·</td> <td><input @change="changeByb($event,'text28')" type="checkbox" :checked="chapter002.tablebyb1.text28" />å¥åº·</td> </tr> <tr> <td>8</td> <td>æ£ç 严é</td> <td>ä¸å¥åº·</td> <td>ä¸å¥åº·</td> <td>ä¸å¥åº·</td> <td><input @change="changeByb($event,'text29')" type="checkbox" :checked="chapter002.tablebyb1.text29" />æ£ç 严é</td> <td><input @change="changeByb($event,'text30')" type="checkbox" :checked="chapter002.tablebyb1.text30" />ä¸å¥åº·</td> <td><input @change="changeByb($event,'text31')" type="checkbox" :checked="chapter002.tablebyb1.text31" />ä¸å¥åº·</td> <td><input @change="changeByb($event,'text32')" type="checkbox" :checked="chapter002.tablebyb1.text32" />ä¸å¥åº·</td> </tr> </tbody> </table> @@ -1022,11 +1208,26 @@ return { chapter002:{ tablexyx1:{}, } tablebyb1:{} }, }; }, created() { const localData = JSON.parse(localStorage.getItem("chapter002")); if (localData) { this.chapter002 = { ...Object.assign(this.chapter002, localData) }; console.log(this.chapter002); } }, methods: { changeBox(e, val) { this.chapter002.tablexyx1[val] = e.target.checked; localStorage.setItem("chapter002", JSON.stringify(this.chapter002)); }, changeByb(e, val) { this.chapter002.tablebyb1[val] = e.target.checked; localStorage.setItem("chapter002", JSON.stringify(this.chapter002)); }, }, }; </script>