From 97f4159845c4c02d3d01f35723b477d73a414fb1 Mon Sep 17 00:00:00 2001 From: zhongshujie <2862698242@qq.com> Date: 星期四, 23 一月 2025 15:10:10 +0800 Subject: [PATCH] 婴幼儿游戏活动实施 --- src/books/toddlerGameImplementation/assets/images/feiye.png | 0 src/books/childcareInstitutionsManagement/assets/main.less | 1 src/books/childcareInstitutionsManagement/view/components/chapter001.vue | 2 src/books/toddlerGameImplementation/assets/main.less | 186 +++++++++-------- src/books/toddlerGameImplementation/view/components/index.vue | 6 src/books/toddlerGameImplementation/assets/images/mk.png | 0 src/App.vue | 2 src/books/toddlerGameImplementation/view/components/header.vue | 11 src/books/toddlerGameImplementation/view/components/chapter001.vue | 367 ++++++++++++++++++++++++++++++------ 9 files changed, 412 insertions(+), 163 deletions(-) diff --git a/src/App.vue b/src/App.vue index db0a26a..3553588 100644 --- a/src/App.vue +++ b/src/App.vue @@ -108,7 +108,7 @@ // aviationBasicSkills //鍩烘湰鎶�鑳� // aviationSafety //瀹夊叏妫�鏌ュ疄鍔� // aviationEtiquette //绀间华鏈嶅姟 - //childcareInstitutionsManagement //鎵樿偛鏈烘瀯绠$悊涓庡疄鍔� + // childcareInstitutionsManagement //鎵樿偛鏈烘瀯绠$悊涓庡疄鍔� // toddlerGameImplementation //濠村辜鍎挎父鎴忔椿鍔ㄥ疄鏂� // preschoolGameGuidance //瀛﹀墠娓告垙鎸囧 preschoolGameGuidance // kindergartenLanguageActivity diff --git a/src/books/childcareInstitutionsManagement/assets/main.less b/src/books/childcareInstitutionsManagement/assets/main.less index cf8a67f..8b36f4c 100644 --- a/src/books/childcareInstitutionsManagement/assets/main.less +++ b/src/books/childcareInstitutionsManagement/assets/main.less @@ -154,7 +154,6 @@ height: 50px; text-align: center; margin: 0 auto; - padding-top: 30%; position: relative; } diff --git a/src/books/childcareInstitutionsManagement/view/components/chapter001.vue b/src/books/childcareInstitutionsManagement/view/components/chapter001.vue index d5c69c0..59dcc20 100644 --- a/src/books/childcareInstitutionsManagement/view/components/chapter001.vue +++ b/src/books/childcareInstitutionsManagement/view/components/chapter001.vue @@ -4,7 +4,7 @@ <div class="page-box" page="10"> <div v-if="showPageList.indexOf(10) > -1" class="fl f1"> <div class="img-g"> - <img class="" alt="" src="../../assets/images/mk.png" class="mk-img"/> + <img alt="" src="../../assets/images/mk.png" class="mk-img"/> </div> <div class="bodystyle"> diff --git a/src/books/toddlerGameImplementation/assets/images/feiye.png b/src/books/toddlerGameImplementation/assets/images/feiye.png new file mode 100644 index 0000000..80dfd7d --- /dev/null +++ b/src/books/toddlerGameImplementation/assets/images/feiye.png Binary files differ diff --git a/src/books/toddlerGameImplementation/assets/images/mk.png b/src/books/toddlerGameImplementation/assets/images/mk.png new file mode 100644 index 0000000..a87fb92 --- /dev/null +++ b/src/books/toddlerGameImplementation/assets/images/mk.png Binary files differ diff --git a/src/books/toddlerGameImplementation/assets/main.less b/src/books/toddlerGameImplementation/assets/main.less index b6b2179..c98bd07 100644 --- a/src/books/toddlerGameImplementation/assets/main.less +++ b/src/books/toddlerGameImplementation/assets/main.less @@ -81,6 +81,10 @@ width: 100%; } + .mk-img { + height: 100%; + } + .w90 { width: 90%; } @@ -130,6 +134,9 @@ font-size: 18px !important; } + .fm-kt { + font-family: "kaiti"; + } .img-0 { width: 100%; @@ -220,7 +227,7 @@ } .ta-l { - text-align: left; + text-align: left !important; } .wh-no { @@ -259,13 +266,18 @@ } .headerNumber { - width: 90px; + width: 110px; color: #fff; font-size: 12px; - padding-left: 10px; text-align: left; - background-color: #6BCFF6; - border-radius: 15px 0 0 15px; + position: relative; + padding-bottom: 5px; + + span{ + position: absolute; + top: 33%; + left: 25%; + } } .header-left-Number { @@ -276,7 +288,7 @@ border-radius: 15px; position: relative; - span{ + span { position: absolute; left: 50%; top: 35%; @@ -876,6 +888,19 @@ } } + .inputChoice{ + display: flex; + align-items: center; + + input{ + margin: 0 5px; + } + + span{ + + } + } + .parimary-btn { cursor: pointer; min-width: 80px; @@ -1228,7 +1253,7 @@ .right { text-align: right; margin-left: 0%; - margin-right: 0%; + margin-right: 4%; } .left1 { @@ -1277,7 +1302,7 @@ color: #01AFEE; font-weight: bold; font-size: 1.9em; - margin-bottom: 1em; + margin-bottom: 20px; margin-top: -0.5em; text-indent: 0em; @@ -1304,17 +1329,18 @@ h2 { font-family: 'FZHTJW'; color: #00ADEF; - font-weight: bold; + font-weight: 400; font-size: 1.6em; margin-bottom: 0em; - margin-top: 0.1em; + margin-top: 0.3em; text-indent: 2em; + line-height: 1.3em; } .h2-zt { font-family: 'FZHTJW'; color: #00ADEF; - font-weight: bold; + font-weight: 400; font-size: 1.4em; margin-top: 0em; text-indent: 2.2em; @@ -1644,32 +1670,80 @@ color: #6F84AF; font-weight: bold; font-size: 1.1em; + } + .bj1 { + background-color: rgb(204, 236, 251); + padding: 0.2em 0.5em 0.2em 0.5em; + border-radius: 1em; + margin-bottom: 2em; + margin-left: 0.6em; + box-shadow: 0 0 30px rgba(135 209 243); + } + + .title { + width: 260px; + height: 50px; + text-align: center; + margin: 0 auto; + padding-top: 5%; + position: relative; } div.bj2 { - background-color: #9ADBF9; - padding: 0.1px 0.5px 0.1px 0.5px; + position: absolute; + width: 260px; + height: 45px; + background-color: #9adbf9; border-radius: 1.5em; - margin-bottom: 0.2em; - margin-left: -0.6em; - margin-right: -0.7em; - margin-top: -1.4em; - box-shadow: 10px -8px 1px #C7EAFD; - // box-shadow: 5px -8px #C7EAFD; + top: 8px; + mix-blend-mode: multiply; } div.bj3 { - background-color: #C7EAFD; - padding: 28px 10px 6px 10px; + position: absolute; + width: 265px; + height: 45px; + background-color: #9ADBF9; border-radius: 1.5em; - margin-bottom: 3em; - margin-left: 0em; - margin-right: 5em; - margin-top: 0; } + .frontOne { + font-family: "瀹嬩綋"; + color: #fff; + margin: 0 !important; + font-size: 24px; + position: absolute; + width: 260px; + height: 50px; + line-height: 50px; + } + .rw-bg { + width: 90%; + height: 90px; + position: relative; + color: #00B1F5; + margin-bottom: 1em; + } + + .bj4 { + position: absolute; + width: 100%; + height: 85px; + background-color: #C7EAFD; + border-radius: 1em; + } + + .bj5 { + position: absolute; + width: 98%; + height: 85px; + background-color: #C7EAFD; + border-radius: 1em; + top: 10px; + mix-blend-mode: multiply; + } span.bj3-xyx { background-color: #92B03E; @@ -1689,8 +1763,6 @@ } - - .ts-1 { font-weight: bold; } @@ -1705,66 +1777,6 @@ padding: 0.2em 0; text-indent: 0em; margin-left: 0%; - } - - .bj4 { - background-color: #D7E2F0; - padding: 10px 20px; - border-radius: 0.1em; - margin-bottom: 1em; - margin-top: 1em; - - } - - div.bj4-xyx { - font-size: 18px; - color: #fff; - line-height: 20px; - padding: 12.5px 15px 12.5px 15px; - margin-right: 10px; - background-color: #5192C6; - border-radius: 5px; - } - - .bj4-xyx-pd { - font-size: 16px; - color: #fff; - line-height: 20px; - padding: 22px 10px 22px 10px; - background-color: #5192C6; - margin-right: 10px; - border-radius: 5px; - flex-wrap: nowrap; - } - - .bj4-xyx-icon { - color: #5192C6; - text-wrap: nowrap; - } - - .bj5 { - background-color: #CEC9DA; - padding: 20px; - border-radius: 0.5em; - margin-bottom: 1.5em; - margin-top: 1.5em; - position: relative; - } - - span.bj5-xyx { - background-color: #7C719E; - color: #FFFFFF; - border-radius: 1.5em; - padding: 5px 20px 5px 20px; - font-size: 1em; - font-weight: bold; - - } - - div.bj5-xyx { - position: absolute; - top: -20px; - } .bj6 { diff --git a/src/books/toddlerGameImplementation/view/components/chapter001.vue b/src/books/toddlerGameImplementation/view/components/chapter001.vue index ffd5a44..80ebe42 100644 --- a/src/books/toddlerGameImplementation/view/components/chapter001.vue +++ b/src/books/toddlerGameImplementation/view/components/chapter001.vue @@ -4,19 +4,18 @@ <div class="page-box" page="8"> <div v-if="showPageList.indexOf(8) > -1"> <div style="display: flex;"> - <div style="background-color: #c6eafa;"> - <p><br></p> - <!-- <p><img class="rwmb-1" alt="" src="../../assets/images/xxdt.png" /></p> --> + <div class="img-0"> + <img alt="" src="../../assets/images/mk.png" class="img-0" style="height: 100%;" /> </div> - <div class="" style="padding: 15% 0;"> - <h1 id="a008">瀛︿範妯″潡涓�</h1> + <div class="" style="margin:0 10% 0 2%; padding: 10% 0 22% 0;"> + <h1 id="a008" class="ta-l">瀛︿範妯″潡涓�</h1> <p class="h1-zt">濠村辜鍎挎父鎴忔杩�</p> <div class="bj1"> <p>娓告垙鏄┐骞煎効鐨勫伐浣滐紝鐞嗚В娓告垙瀵瑰┐骞煎効鍙戝睍鐨勬剰涔夎嚦鍏抽噸瑕併�傚湪鏁欏涓紝鎴戜滑搴斿綋灏嗕績杩涘┐骞煎効娓告垙涓庝繚闅滃┐骞煎効瀹夊叏鍜岃繘琛屾棩甯哥収鎶ゅ悓绛夎鐪熷寰呫�傚彧鏈夐噸瑙嗗苟鏀寔濠村辜鍎跨殑娓告垙锛屼粬浠墠鑳借寔澹垚闀裤�備粠杩欎釜瑙掑害鏉ヨ锛屾垜浠偐璐熺潃涓�椤归噸瑕佺殑璐d换锛屽嵆鍩轰簬濠村辜鍎跨殑鍏磋叮銆佽兘鍔涘拰鍙戝睍杩涚▼鏉ヤ績杩涗粬浠殑娓告垙锛屽府鍔╀粬浠湪鍚勪釜棰嗗煙鑾峰緱鍏ㄩ潰鍙戝睍銆傚洜姝わ紝娣卞叆浜嗚В濠村辜鍎挎棭鏈熷彂灞曠殑鐩稿叧鐭ヨ瘑锛屽苟鍦ㄦ鍩虹涓婅瀵熻褰曞┐骞煎効鐨勫彂灞曟儏鍐靛氨鏄惧緱灏や负閲嶈銆� </p> </div> <p><img class="rwmb-1" alt="" src="../../assets/images/xxdt.png" /></p> - <p class="center"><img class="img-b" alt="" src="../../assets/images/0013-1.jpg" /></p> + <p class="center"><img class="w80" alt="" src="../../assets/images/0013-1.jpg" /></p> <p><img class="rwmb-1" alt="" src="../../assets/images/xxcty.png" /></p> <p>娓告垙鏄瀛愭暣涓殑鐢熸椿銆傚瀛愪袱涓変釜鏈堝ぇ鏃跺氨鍦ㄥ簥涓婁笉鍋滃湴鍔ㄦ墜韪㈣剼锛岀嫭鑷湴鐜┿�傚埌浜嗕簲鍏釜鏈堢殑鏃跺�欙紝鐪嬭涓滆タ灏辫鎶擄紱鍐嶅ぇ涓�鐐瑰氨杩欓噷鎺ㄦ帹銆侀偅閲屾媺鎷夛紝杩樹細涓嶅仠鍦扮埇鏉ョ埇鍘汇�佽蛋鏉ヨ蛋鍘伙紱鍒颁簡涓夊洓宀佺殑鏃跺�欙紝娓告垙鐨勭绫绘洿鍔犵箒澶氥�備綘璁や负娓告垙瀵瑰┐骞煎効鍙戝睍鐨勬剰涔夋槸浠�涔堬紵鐓ф姢鑰呭湪0锝�3宀佸┐骞煎効娓告垙涓殑浣滅敤鏄粈涔堬紵濠村辜鍎跨殑鍙戝睍涓庡叾娓告垙涔嬮棿鏈夋�庢牱鐨勫叧绯诲憿锛� </p> @@ -34,10 +33,12 @@ </li> <li class="header-left-text">濠村辜鍎挎父鎴忔椿鍔ㄥ疄鏂�</li> </ul> - <div class="bj3"> - <div class="bj2"> - <h2 id="b001">瀛︿範浠诲姟涓�</h2> - <p class="h2-zt">0锝�3宀佸┐骞煎効鍙戝睍姒傚喌</p> + <div class="rw-bg"> + <div class="bj4"> + <div class="bj5"> + <h2 id="b001">瀛︿範浠诲姟涓�</h2> + <p class="h2-zt">鎵樿偛鏈烘瀯鐨勫彂灞曞強鐜扮姸</p> + </div> </div> </div> <div class="bodystyle"> @@ -103,7 +104,10 @@ <ul class="fl al-c jc-fe pad-t-55 mb-45"> <li class="headerText-bc">瀛︿範妯″潡涓�</li> <li class="headerText">濠村効娓告垙姒傝堪</li> - <li class="headerNumber">3</li> + <li class="headerNumber"> + <img class="img-0" src="../../assets/images/headerRight.png" alt=""> + <span>3</span> + </li> </ul> <div class="bodystyle"> <p class="mb-10"><img class="rwmb-2" alt="" src="../../assets/images/aldr.png" /></p> @@ -176,7 +180,10 @@ <ul class="fl al-c jc-fe pad-t-55 mb-45"> <li class="headerText-bc">瀛︿範妯″潡涓�</li> <li class="headerText">濠村効娓告垙姒傝堪</li> - <li class="headerNumber">5</li> + <li class="headerNumber"> + <img class="img-0" src="../../assets/images/headerRight.png" alt=""> + <span>5</span> + </li> </ul> <div class="bodystyle"> <p class="td-0"> @@ -235,16 +242,16 @@ <li> {{ index + 1 }}.锛堝崟閫夛級{{ item.txt }}銆� </li> - <li v-for="(citem, cindex) in item.option" :key="cindex"> + <li class="inputChoice" v-for="(citem, cindex) in item.option" :key="cindex"> <input type="radio" :disabled="unitQuestion.isComplete" :name="item.txt" :value="citem.value" v-model="item.userAnswer" @change="saveUnitOne" /> - {{ citem.value }} . {{ citem.txt }} + <span>{{ citem.value }}.{{ citem.txt }}</span> </li> - <li v-if="unitQuestion.isComplete" class="event-header-text-bc pd-5 fl jc-sa"> + <li v-if="unitQuestion.isShowAnswer" class="event-header-text-bc pd-5 fl jc-sa"> <span class="c-g"> 绛旀锛歿{ item.answer }}</span> <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">鎮ㄧ殑绛旀锛歿{ item.userAnswer - }}</span> + }}</span> <span class="icon-box-big fl al-c"> <svg v-if="item.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767" @@ -272,23 +279,26 @@ <ul class="fl al-c jc-fe pad-t-55 mb-45"> <li class="headerText-bc">瀛︿範妯″潡涓�</li> <li class="headerText">濠村効娓告垙姒傝堪</li> - <li class="headerNumber">7</li> + <li class="headerNumber"> + <img class="img-0" src="../../assets/images/headerRight.png" alt=""> + <span>7</span> + </li> </ul> <div class="bodystyle"> <ul v-for="(item, index) in unitQuestion.unitOne.slice(2, 4)" :key="index"> <li> {{ index + 3 }}.锛堝崟閫夛級{{ item.txt }}銆� </li> - <li v-for="(citem, cindex) in item.option" :key="cindex"> + <li class="inputChoice" v-for="(citem, cindex) in item.option" :key="cindex"> <input type="radio" :disabled="unitQuestion.isComplete" :name="item.txt" :value="citem.value" v-model="item.userAnswer" @change="saveUnitOne" /> - {{ citem.value }} . {{ citem.txt }} + <span>{{ citem.value }}.{{ citem.txt }}</span> </li> - <li v-if="unitQuestion.isComplete" class="event-header-text-bc pd-5 fl jc-sa"> + <li v-if="unitQuestion.isShowAnswer" class="event-header-text-bc pd-5 fl jc-sa"> <span class="c-g"> 绛旀锛歿{ item.answer }}</span> <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">鎮ㄧ殑绛旀锛歿{ item.userAnswer - }}</span> + }}</span> <span class="icon-box-big fl al-c"> <svg v-if="item.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767" @@ -329,7 +339,7 @@ </button> </li> <li> - <button @click=" unitQuestion.isComplete = !unitQuestion.isComplete" + <button @click="unitQuestion.isShowAnswer = !unitQuestion.isShowAnswer" class="parimary-btn"> 鏌ョ湅绛旀 </button> @@ -349,10 +359,12 @@ </li> <li class="header-left-text">濠村辜鍎挎父鎴忔椿鍔ㄥ疄鏂�</li> </ul> - <div class="bj3"> - <div class="bj2"> - <h2 class="pt-10" id="b001">瀛︿範浠诲姟浜�</h2> - <p class="h2-zt">濠村辜鍎挎父鎴忕悊璁哄強鍏跺惎绀�</p> + <div class="rw-bg"> + <div class="bj4"> + <div class="bj5"> + <h2 id="b001">瀛︿範浠诲姟浜�</h2> + <p class="h2-zt">濠村辜鍎挎父鎴忕悊璁哄強鍏跺惎绀�</p> + </div> </div> </div> <div class="bodystyle"> @@ -417,7 +429,10 @@ <ul class="fl al-c jc-fe pad-t-55 mb-45"> <li class="headerText-bc">瀛︿範妯″潡涓�</li> <li class="headerText">濠村効娓告垙姒傝堪</li> - <li class="headerNumber">9</li> + <li class="headerNumber"> + <img class="img-0" src="../../assets/images/headerRight.png" alt=""> + <span>9</span> + </li> </ul> <div class="bodystyle"> <p><img class="rwmb-2" alt="" src="../../assets/images/aldr.png" /></p> @@ -514,13 +529,60 @@ </div> <div class="bk2"> <p><img class="rwmb-5" alt="" src="../../assets/images/bkzn.png" /></p> - <p class="center"><span class="ls2">2021骞村垵绾ц偛濠村笀鐞嗚鐭ヨ瘑鑰冭瘯鐪熼</span></p> - <p>锛堝崟閫夐锛変互涓嬭娉曠鍚堢敓娲诲噯澶囪瑙傜偣鐨勬槸锛堛��銆�锛夈��</p> - <p>A.娓告垙鏄墿浣欑簿鍔涚殑鍙戞硠</p> - <p>B.娓告垙鏄敤鏉ユ仮澶嶇簿鍔涚殑杞绘澗娲诲姩</p> - <p>C.娓告垙鏄负鏈潵鐢熸椿鍋氬噯澶�</p> - <p>D.娓告垙鏄汉绫荤敓鐗╅仐浼犵殑缁撴灉</p> - <p>鍙傝�冪瓟妗堬細C銆�</p> + <ul v-for="(item, index) in exampleOne.unitOne" :key="index"> + <li> + {{ index + 1 }}.锛堝崟閫夛級{{ item.txt }}銆� + </li> + <li class="inputChoice" v-for="(citem, cindex) in item.option" :key="cindex"> + <input type="radio" :disabled="exampleOne.isComplete" :name="item.txt" + :value="citem.value" v-model="item.userAnswer" @change="saveExampleOne" /> + <span>{{ citem.value }} . {{ citem.txt }}</span> + </li> + <li v-if="exampleOne.isShowAnswer" class="event-header-text-bc pd-5 fl jc-sa"> + <span class="c-g"> 绛旀锛歿{ item.answer }}</span> + <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">鎮ㄧ殑绛旀锛歿{ + item.userAnswer + }}</span> + <span class="icon-box-big fl al-c"> + <svg v-if="item.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.6044444 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="item.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> + </li> + </ul> + <!-- 鎻愪氦鎸夐挳 --> + <div class="w100 fl ju-cn"> + <ul class="fl ju-ev w80 choice"> + <li> + <button class="btn-border btn-w" @click="goExampleOne"> + 鎻愪氦 + </button> + </li> + <li> + <button @click="changeExampleOne" class="btn-border btn-w"> + 閲嶅仛 + </button> + </li> + <li> + <button @click="exampleOne.isShowAnswer = !exampleOne.isShowAnswer" + class="parimary-btn"> + 鏌ョ湅绛旀 + </button> + </li> + </ul> + </div> </div> <h3 id="c006">涓夈�佸婕旇</h3> <p>澶嶆紨璇寸殑涓昏鍊″鑰呮槸缇庡浗蹇冪悊瀛﹀闇嶅皵銆傚湪浠栫湅鏉ワ紝鍎跨鐨勬父鎴忔槸瀵逛汉绫荤鍏堢敓娲荤殑鈥滃洖蹇嗏�濋噸瑙嗐�傞湇灏斿鏍奸瞾鏂殑娓告垙鐞嗚鏄笉璁ゅ悓鐨勶紝浠栬涓烘牸椴佹柉鍏充簬娓告垙鏄鏈潵鎴愪汉娲诲姩鐨勭粌涔犵殑瑙傜偣鏄潪甯哥墖闈㈢殑銆佽〃闈㈢殑鍜岄敊璇殑锛屽洜涓哄畠蹇借浜嗚繃鍘汇�傞湇灏旇涓猴紝鑳庡効鍦ㄨ儙鍐呯殑鍙戝睍閲嶆紨浜嗗姩鐗╄繘鍖栫殑杩囩▼锛堜粠鍘熺敓鐗╁埌浜猴級锛屽効绔ユ椂鏈熺殑鍙戝睍鍒欓噸婕斾簡浜虹被杩涘寲鐨勮繃绋嬶紙浠庣尶鍒颁汉锛夈�備粠鍎跨鐨勮韩涓婂彲浠ユ壘鍒颁笌涔嬬浉搴旂殑娓告垙琛屼负琛ㄧ幇锛岃繖鏄汉绫荤鍏堣涓虹殑鍙嶆槧銆傚効绔ョ殑娓告垙灏辨槸绁栧厛鐨勨�滃伐浣溾�濓紝鍘熷浜虹殑鎵撶寧銆佽拷閫愮瓑鏋勬垚浜嗙幇浠e効绔ユ父鎴忕殑鍩烘湰鍐呭銆傜敱浜庤繖浜涙椿鍔ㄥ凡缁忔垚涓轰汉鐨勬湰鑳斤紝鍥犳鍎跨鍋氳捣鏉ヤ笉闇�瑕佽姳璐瑰姏姘旓紝骞朵笖娓告垙鐨勫揩涔愪篃鎬绘槸鐩存帴涓庨仐浼犺秼鍔跨殑鏂瑰悜鍜屽姏閲忔垚姣斾緥鐨勩�傜幇浠g敓娲讳腑鏄壘涓嶅埌浠讳綍瀵逛簬娓告垙蹇箰鐨勮В @@ -535,7 +597,10 @@ <ul class="fl al-c jc-fe pad-t-55 mb-45"> <li class="headerText-bc">瀛︿範妯″潡涓�</li> <li class="headerText">濠村効娓告垙姒傝堪</li> - <li class="headerNumber">11</li> + <li class="headerNumber"> + <img class="img-0" src="../../assets/images/headerRight.png" alt=""> + <span>11</span> + </li> </ul> <div class="bodystyle"> <p class="td-0"> @@ -646,7 +711,10 @@ <ul class="fl al-c jc-fe pad-t-55 mb-45"> <li class="headerText-bc">瀛︿範妯″潡涓�</li> <li class="headerText">濠村効娓告垙姒傝堪</li> - <li class="headerNumber">13</li> + <li class="headerNumber"> + <img class="img-0" src="../../assets/images/headerRight.png" alt=""> + <span>13</span> + </li> </ul> <div class="bodystyle"> <h3 id="c009">鍏�佽鐭ュ彂灞曞娲剧殑娓告垙鐞嗚</h3> @@ -679,13 +747,59 @@ </p> <div class="bk2"> <p><img class="rwmb-5" alt="" src="../../assets/images/bkzn.png" /></p> - <p class="center"><span class="ls2">2019骞撮珮绾ц偛濠村笀鐞嗚鐭ヨ瘑鑰冭瘯鐪熼</span></p> - <p>锛堝崟閫夐锛夋垜浠簲璇ユ姄浣忓┐骞煎効鎰熸儏鍩瑰吇鐨勶紙銆�銆�锛夛紝閫氳繃鏈夐拡瀵规�х殑娲诲姩涓庢父鎴忔縺鍙戝叾鍏磋叮銆�</p> - <p>A.鏈轰細</p> - <p>B.鏃舵満</p> - <p>C.鏁忔劅鏈�</p> - <p>D.鏃舵湡</p> - <p>鍙傝�冪瓟妗堬細C銆�</p> + <ul v-for="(item, index) in exampleTwo.unitOne" :key="index"> + <li> + {{ index + 1 }}.锛堝崟閫夛級{{ item.txt }}銆� + </li> + <li class="inputChoice" v-for="(citem, cindex) in item.option" :key="cindex"> + <input type="radio" :disabled="exampleTwo.isComplete" :name="item.txt" + :value="citem.value" v-model="item.userAnswer" @change="saveExampleTwo" /> + <span>{{ citem.value }}.{{ citem.txt }}</span> + </li> + <li v-if="exampleTwo.isShowAnswer" class="event-header-text-bc pd-5 fl jc-sa"> + <span class="c-g"> 绛旀锛歿{ item.answer }}</span> + <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">鎮ㄧ殑绛旀锛歿{ + item.userAnswer + }}</span> + <span class="icon-box-big fl al-c"> + <svg v-if="item.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.6044444 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="item.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> + </li> + </ul> + <!-- 鎻愪氦鎸夐挳 --> + <div class="w100 fl ju-cn"> + <ul class="fl ju-ev w80 choice"> + <li> + <button class="btn-border btn-w" @click="goExampleTwo"> + 鎻愪氦 + </button> + </li> + <li> + <button @click="changeExampleTwo" class="btn-border btn-w"> + 閲嶅仛 + </button> + </li> + <li> + <button @click="exampleTwo.isShowAnswer = !exampleTwo.isShowAnswer" + class="parimary-btn"> + 鏌ョ湅绛旀 + </button> + </li> + </ul> + </div> </div> </div> </div> @@ -753,12 +867,13 @@ <!-- 15椤� --> <div class="page-box" page="22"> <div v-if="showPageList.indexOf(22) > -1"> - <ul class="fl al-c pad-t-55 pad-l-60 mb-45"> - <li class="header-left-Number"> - <img class="img-0" src="../../assets/images/headerBj.png" alt=""> + <ul class="fl al-c jc-fe pad-t-55 mb-45"> + <li class="headerText-bc">瀛︿範妯″潡涓�</li> + <li class="headerText">濠村効娓告垙姒傝堪</li> + <li class="headerNumber"> + <img class="img-0" src="../../assets/images/headerRight.png" alt=""> <span>15</span> </li> - <li class="header-left-text">濠村辜鍎挎父鎴忔椿鍔ㄥ疄鏂�</li> </ul> <div class="bodystyle"> <div class="img-rights w115"> @@ -790,16 +905,16 @@ <li> {{ index + 1 }}.锛堝崟閫夛級{{ item.txt }}銆� </li> - <li v-for="(citem, cindex) in item.option" :key="cindex"> + <li class="inputChoice" v-for="(citem, cindex) in item.option" :key="cindex"> <input type="radio" :disabled="unitQuestionOne.isComplete" :name="item.txt" :value="citem.value" v-model="item.userAnswer" @change="saveUnitOne" /> - {{ citem.value }} . {{ citem.txt }} + <span>{{ citem.value }}.{{ citem.txt }}</span> </li> - <li v-if="unitQuestionOne.isComplete" class="event-header-text-bc pd-5 fl jc-sa"> + <li v-if="unitQuestionOne.isShowAnswer" class="event-header-text-bc pd-5 fl jc-sa"> <span class="c-g"> 绛旀锛歿{ item.answer }}</span> <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">鎮ㄧ殑绛旀锛歿{ item.userAnswer - }}</span> + }}</span> <span class="icon-box-big fl al-c"> <svg v-if="item.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767" @@ -827,7 +942,7 @@ <ul class="fl al-c pad-t-55 pad-l-60 mb-45"> <li class="header-left-Number"> <img class="img-0" src="../../assets/images/headerBj.png" alt=""> - <span>16</span> + <span>16</span> </li> <li class="header-left-text">濠村辜鍎挎父鎴忔椿鍔ㄥ疄鏂�</li> </ul> @@ -836,16 +951,16 @@ <li> {{ index + 4 }}.锛堝崟閫夛級{{ item.txt }}銆� </li> - <li v-for="(citem, cindex) in item.option" :key="cindex"> + <li class="inputChoice" v-for="(citem, cindex) in item.option" :key="cindex"> <input type="radio" :disabled="unitQuestionOne.isComplete" :name="item.txt" :value="citem.value" v-model="item.userAnswer" @change="saveUnitTwo" /> - {{ citem.value }} . {{ citem.txt }} + <span>{{ citem.value }}.{{ citem.txt }}</span> </li> - <li v-if="unitQuestionOne.isComplete" class="event-header-text-bc pd-5 fl jc-sa"> + <li v-if="unitQuestionOne.isShowAnswer" class="event-header-text-bc pd-5 fl jc-sa"> <span class="c-g"> 绛旀锛歿{ item.answer }}</span> <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">鎮ㄧ殑绛旀锛歿{ item.userAnswer - }}</span> + }}</span> <span class="icon-box-big fl al-c"> <svg v-if="item.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767" @@ -868,18 +983,17 @@ <li> {{ index + 6 }}.锛堝閫夛級{{ item.txt }}銆� </li> - <li v-for="(citem, cindex) in item.option" :key="cindex"> + <li class="inputChoice" v-for="(citem, cindex) in item.option" :key="cindex"> <input type="checkbox" :disabled="unitQuestionOne.isComplete" :name="item.txt" :value="citem.value" v-model="item.userAnswer" @change="saveUnitTwo" /> - {{ citem.value }} . {{ citem.txt }} + <span>{{ citem.value }}.{{ citem.txt }}</span> </li> - <li v-if="unitQuestionOne.isComplete" class="event-header-text-bc pd-5 fl jc-sa"> + <li v-if="unitQuestionOne.isShowAnswer" class="event-header-text-bc pd-5 fl jc-sa"> <span class="c-g"> 绛旀锛�<span v-for="(answer, index) in item.answer" :key="'answer-' + index">{{ answer }}銆�</span></span> - <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">鎮ㄧ殑绛旀锛�<span v-for="(userAnswer, index) in item.userAnswer" :key="'userAnswer-' + index">{{ - userAnswer }}銆�</span></span> + userAnswer }}銆�</span></span> <span class="icon-box-big fl al-c"> <svg v-if="item.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767" @@ -920,7 +1034,7 @@ </button> </li> <li> - <button @click="unitQuestionOne.isComplete = !unitQuestionOne.isComplete" + <button @click="unitQuestionOne.isShowAnswer = !unitQuestionOne.isShowAnswer" class="parimary-btn"> 鏌ョ湅绛旀 </button> @@ -984,6 +1098,7 @@ }, unitQuestion: { isComplete: false, + isShowAnswer: false, unitOne: [ { txt: "鏂扮敓鍎跨殑瑙嗙▼澶ф鏄紙銆�銆�锛�", @@ -1087,6 +1202,7 @@ }, unitQuestionOne: { isComplete: false, + isShowAnswer: false, unitTwo: [ { txt: "璁や负娓告垙鏄敤鏉ユ仮澶嶇簿鍔涚殑杞绘澗娲诲姩鐨勬父鎴忕悊璁烘槸锛堛��銆�锛�", @@ -1261,6 +1377,66 @@ ], textOne: "", textTwo: "", + }, + exampleOne: { + isComplete: false, + isShowAnswer: false, + unitOne: [ + { + txt: "浠ヤ笅璇存硶绗﹀悎鐢熸椿鍑嗗璇磋鐐圭殑鏄紙銆�銆�锛�", + isRight: null, + answer: "C", + userAnswer: "", + option: [ + { + txt: "娓告垙鏄墿浣欑簿鍔涚殑鍙戞硠", + value: "A" + }, + { + txt: "娓告垙鏄敤鏉ユ仮澶嶇簿鍔涚殑杞绘澗娲诲姩", + value: "B" + }, + { + txt: "娓告垙鏄负鏈潵鐢熸椿鍋氬噯澶�", + value: "C" + }, + { + txt: "娓告垙鏄汉绫荤敓鐗╅仐浼犵殑缁撴灉", + value: "D" + }, + ] + }, + ], + }, + exampleTwo: { + isComplete: false, + isShowAnswer: false, + unitOne: [ + { + txt: "鎴戜滑搴旇鎶撲綇濠村辜鍎挎劅鎯呭煿鍏荤殑锛堛��銆�锛夛紝閫氳繃鏈夐拡瀵规�х殑娲诲姩涓庢父鎴忔縺鍙戝叾鍏磋叮", + isRight: null, + answer: "C", + userAnswer: "", + option: [ + { + txt: "鏈轰細", + value: "A" + }, + { + txt: "鏃舵満", + value: "B" + }, + { + txt: "鏁忔劅鏈�", + value: "C" + }, + { + txt: "鏃舵湡", + value: "D" + }, + ] + }, + ], } } }, @@ -1283,6 +1459,16 @@ const unitTwo = localStorage.getItem("toddleGame-book-chapter01-UnitTwo"); if (unitTwo) { this.unitQuestionOne = JSON.parse(unitTwo); + } + + const exampleOne = localStorage.getItem("toddleGame-book-chapter01-exampleOne"); + if (exampleOne) { + this.exampleOne = JSON.parse(exampleOne); + } + + const exampleTwo = localStorage.getItem("toddleGame-book-chapter01-exampleTwo"); + if (exampleTwo) { + this.exampleTwo = JSON.parse(exampleTwo); } this.getVidoePath() @@ -1387,6 +1573,7 @@ } } this.unitQuestion.isComplete = true + this.unitQuestion.isShowAnswer = true }, changeCheckData() { localStorage.removeItem("toddleGame-book-chapter01-UnitOne") @@ -1396,6 +1583,7 @@ item.isRight = null } this.unitQuestion.isComplete = false + this.unitQuestion.isShowAnswer = false this.unitQuestion.textOne = "" this.unitQuestion.textTwo = "" }, @@ -1422,6 +1610,7 @@ } } this.unitQuestionOne.isComplete = true + this.unitQuestionOne.isShowAnswer = true }, changeUnitTwo() { localStorage.removeItem("toddleGame-book-chapter01-UnitTwo") @@ -1436,12 +1625,60 @@ item.isRight = null } this.unitQuestionOne.isComplete = false + this.unitQuestionOne.isShowAnswer = false this.unitQuestionOne.textOne = "" this.unitQuestionOne.textTwo = "" + }, + saveExampleOne() { + localStorage.setItem('toddleGame-book-chapter01-exampleOne', JSON.stringify(this.exampleOne)) + }, + goExampleOne() { + for (let index = 0; index < this.exampleOne.unitOne.length; index++) { + const item = this.exampleOne.unitOne[index]; + if (item.userAnswer == item.answer) { + item.isRight = true + } else { + item.isRight = false + } + } + this.exampleOne.isComplete = true + this.exampleOne.isShowAnswer = true + }, + changeExampleOne() { + localStorage.removeItem("toddleGame-book-chapter01-exampleOne") + for (let index = 0; index < this.exampleOne.unitOne.length; index++) { + const item = this.exampleOne.unitOne[index]; + item.userAnswer = "" + item.isRight = null + } + this.exampleOne.isComplete = false + this.exampleOne.isShowAnswer = false + }, + saveExampleTwo() { + localStorage.setItem('toddleGame-book-chapter01-exampleTwo', JSON.stringify(this.exampleTwo)) + }, + goExampleTwo() { + for (let index = 0; index < this.exampleTwo.unitOne.length; index++) { + const item = this.exampleTwo.unitOne[index]; + if (item.userAnswer == item.answer) { + item.isRight = true + } else { + item.isRight = false + } + } + this.exampleTwo.isComplete = true + this.exampleTwo.isShowAnswer = true + }, + changeExampleTwo() { + localStorage.removeItem("toddleGame-book-chapter01-exampleTwo") + for (let index = 0; index < this.exampleTwo.unitOne.length; index++) { + const item = this.exampleTwo.unitOne[index]; + item.userAnswer = "" + item.isRight = null + } + this.exampleTwo.isComplete = false + this.exampleTwo.isShowAnswer = false } - - - } } diff --git a/src/books/toddlerGameImplementation/view/components/header.vue b/src/books/toddlerGameImplementation/view/components/header.vue index 7d179be..716caa8 100644 --- a/src/books/toddlerGameImplementation/view/components/header.vue +++ b/src/books/toddlerGameImplementation/view/components/header.vue @@ -7,7 +7,7 @@ </div> <div class="page-box mt-20" page="2" style="padding-bottom: 0px"> <div v-if="showPageList.indexOf(2) > -1"> - <img class="img-0" alt="" src="../../assets/images/SMY.jpg" /> + <img class="img-0" alt="" src="../../assets/images/feiye.png" /> </div> </div> <!-- 浠嬬粛椤甸潰 --> @@ -78,11 +78,13 @@ <div v-if="showPageList.indexOf(3) > -1"> <div style="background-color: #c6eafa;"> <div class="fz-16" style="margin: 0 13%; padding: 30% 12%; background-color: #fff;"> + <div class="title"> <div class="bj3"> <div class="bj2"> - <h1 id="a003">缂栧浼�</h1> </div> + <div class="frontOne">缂栧浼�</div> </div> + </div> <p class="td-0 mt-20"><b class="tal-j">涓涗功涓荤紪锛�</b>銆�娲鏁�</p> <p class="td-0"> <b class="tal-j">涓涗功鍓富缂栵細</b>銆�寮犳牴鍋ャ��鍟嗕紶杈� @@ -142,7 +144,6 @@ <p>鈥滃欢浼搁槄璇烩�濋儴鍒嗘帹鑽愪笌瀛︿範浠诲姟鐩稿叧鐨勫浘涔︺�佽鏂囩瓑锛岃瀛︾敓杩涜瀛︿範涓庢嫇灞曘��</p> <p><span class="ls2">涓夈�佽鏃跺垎閰�</span></p> <p>鏈暀鏉愬搴旂殑鏁欏鏃堕棿涓�32瀛︽椂锛岃2瀛﹀垎銆傛瘡鍛ㄥ畨鎺掍竴娆¤銆�</p> - </div> </div> </div> @@ -184,7 +185,7 @@ </p> <p>鏈涓涗功鐨勭紪鍐欏緱鍒颁簡鍖椾含甯堣寖澶у鍑虹増绀剧殑澶у姏鏀寔銆傚湪鎾板啓杩囩▼涓紝鏈涓涗功鍙傝�冨拰寮曠敤浜嗗浗鍐呭璁稿鐮旂┒鎴愭灉涓庤鐐癸紝鍦ㄦ娣辫嚧璋㈠勘銆傜湡璇氬笇鏈涙湰濂椾笡涔︾殑鍑虹増鑳藉涓烘墭鑲插煿璁�呭拰绠$悊鑰呫�佸箍澶ф墭鑲叉満鏋勫伐浣滆�呯瓑鎻愪緵鏈夌泭鐨勫弬鑰冧笌鍊熼壌銆� </p> - <p class="right"><b>鍖椾含甯堣寖澶у 娲鏁�</b></p> + <p class="right fm-kt"><b>鍖椾含甯堣寖澶у 娲鏁�</b></p> </div> </div> </div> @@ -208,7 +209,7 @@ <p> 鍦ㄧ紪鍐欒繃绋嬩腑锛屾垜浠弬鑰冧簡璁稿涓撳鍜屽鑰呯殑鐮旂┒鎴愭灉锛屼篃寮曠敤鍜屽�熼壌浜嗕竴閮ㄥ垎鏃╂暀銆佹墭鑲插吀鍨嬫渚嬪拰鍥剧墖璧勬枡锛屽湪姝ゅ浠栦滑琛ㄧず琛峰績鐨勬劅璋€�備篃甯屾湜濠村辜鍎挎墭鑲茬収鎶ゅ悓琛屼互鍙婂叾浠栧叧娉ㄥ┐骞煎効鍙戝睍鐨勮鑰呰兘浠庢湰鏁欐潗涓湁鎵�鏀惰幏锛屽叡鍚屼负淇冭繘濠村辜鍎跨殑鍋ュ悍鎴愰暱璐$尞鍔涢噺銆� </p> - <p class="right"><b>璧栬帋鑾�</b></p> + <p class="right fm-kt"><b>璧栬帋鑾�</b></p> </div> </div> </div> diff --git a/src/books/toddlerGameImplementation/view/components/index.vue b/src/books/toddlerGameImplementation/view/components/index.vue index c4d9ea0..f3e9bc2 100644 --- a/src/books/toddlerGameImplementation/view/components/index.vue +++ b/src/books/toddlerGameImplementation/view/components/index.vue @@ -183,8 +183,8 @@ }, 500); // 娴嬭瘯椤甸潰璺宠浆 - setTimeout(() => { - this.gotoPage(2, 9); + // setTimeout(() => { + // this.gotoPage(1, 1); // setTimeout(() => { // this.renderSign("Highlight", { // id: "2ACA9359", @@ -198,7 +198,7 @@ // ids: ["2ACA9359"] // }); // }, 2000); - }, 500); + // }, 500); // const pageDom = (this.container ? this.container : document) // .querySelector("#app") -- Gitblit v1.9.1