From c1ab140c6a5ae4da17b61a080c0facd0f83815e2 Mon Sep 17 00:00:00 2001 From: zhongshujie <2862698242@qq.com> Date: 星期四, 24 七月 2025 00:14:19 +0800 Subject: [PATCH] 婴幼儿抚育与教育全本 --- src/books/OralAndBroadcasting/view/components/chapter005.vue | 148 +++++++++++++++---------------------------------- 1 files changed, 46 insertions(+), 102 deletions(-) diff --git a/src/books/OralAndBroadcasting/view/components/chapter005.vue b/src/books/OralAndBroadcasting/view/components/chapter005.vue index 8817fdf..07598ee 100644 --- a/src/books/OralAndBroadcasting/view/components/chapter005.vue +++ b/src/books/OralAndBroadcasting/view/components/chapter005.vue @@ -3,7 +3,7 @@ <div class="page-box" page="161"> <div v-if="showPageList.indexOf(161) > -1"> <div class="first-page"> - <img class="img-0" alt="" src="../../assets/images/xm5.jpg" /> + <img class="img-0" alt="" src="../../assets/images/xm5.jpg" /> <div class="first-txt"> <p> 鑸┖鏈嶅姟浜哄憳瀵规矡閫氭妧宸х殑杩愮敤锛屼笉浠呬綋鐜板湪璇█鐨勮〃杈句笂锛岃繕浣撶幇鍦ㄤ互韬綋杈呭姪鍜屽寮鸿〃杈剧殑闈炶瑷�娌熼�氳兘鍔涳紝浠ュ強闈㈠鐗规畩鏃呭鐨勬湇鍔¤兘鍔涗笂銆傚畠瑕佹眰鏈嶅姟浜哄憳闄や簡浣跨敤閫傚綋鐨勮瑷�杩涜娌熼�氬锛岃繕瑕佺敤蹇冩彛鎽╁拰鍒嗘瀽鏃呭鐨勮瘔姹傚拰鎰忚銆傝繖浜涙矡閫氭妧宸т笉浠呰兘浣撶幇姘戣埅鐨勬湇鍔℃按鍑嗭紝杩樿兘鍐冲畾鏃呭瀵规皯鑸湇鍔$殑鍗拌薄銆� @@ -39,8 +39,7 @@ 闈炶瑷�娌熼�氬氨鏄湪涓庢梾瀹氦璋堢殑杩囩▼涓紝闄や簡杩愮敤澶ч噺鐨勫彛澶磋瑷�澶栵紝杩樿杈呬互澶ч噺鐨勮〃鎯呫�佹墜鍔跨瓑韬綋璇█锛屼粠鑰屽己鍖栬嚜宸辨墍瑕佽〃杈剧殑鎰忔�濄�傝繖鏈夊姪浜庝娇鑷繁鐨勮〃杈炬洿娓呮櫚锛岃繘鑰屼娇鏃呭鎺ュ彈鑸┖鏈嶅姟浜哄憳鎵�鎸佺殑鎯虫硶銆� </p> <h3 id="c072"> - <span class="h3-zt">涓�銆�</span - ><span class="h3-zt1">闈炶瑷�娌熼�氱殑鍩烘湰瑕佹眰</span> + <span class="h3-zt">涓�銆�</span><span class="h3-zt1">闈炶瑷�娌熼�氱殑鍩烘湰瑕佹眰</span> </h3> <h4 id="d128">锛堜竴锛夎绾夸綅缃�</h4> <p> @@ -52,11 +51,7 @@ <div class="page-box" page="163"> <div v-if="showPageList.indexOf(163) > -1"> <ul class="fl al-c jc-fe mr-70 pad-t-55 mb-45"> - <img - class="headerImg mr-10" - src="../../assets/images/headerlogo.png" - alt="" - /> + <img class="headerImg mr-10" src="../../assets/images/headerlogo.png" alt="" /> <li class="headerText">椤圭洰浜�</li> <li class="headerText">鎵撳ソ鑸┖鏈嶅姟鍙h浜ら檯鍩虹</li> <li class="headerNumber">155</li> @@ -104,19 +99,13 @@ <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="imgBox swiper-imgBox" style="width: 100%; height: 100%"> - <img - src="../../assets/images/0167-1.jpg" - alt="鍥�5-1 浜插瘑璺濈" - /> + <img src="../../assets/images/0167-1.jpg" alt="鍥�5-1 浜插瘑璺濈" /> <span>鍥�5-1 浜插瘑璺濈</span> </div> </div> <div class="swiper-slide"> <div class="imgBox swiper-imgBox" style="width: 100%; height: 100%"> - <img - src="../../assets/images/0167-2.jpg" - alt="鍥�5-2 绉佷汉璺濈" - /> + <img src="../../assets/images/0167-2.jpg" alt="鍥�5-2 绉佷汉璺濈" /> <span>鍥�5-2 绉佷汉璺濈</span> </div> </div> @@ -157,11 +146,7 @@ 鎵嬫槸浜哄湪娲诲姩涓娇鐢ㄦ渶涓洪绻併�佺伒渚跨殑涓�閮ㄥ垎锛屽湪鑸┖鏈嶅姟杩囩▼涓紝杩愮敤濂芥墜鍔夸篃鑳藉姪鏈嶅姟鏇翠笂涓�灞傛ゼ銆� </p> <p> - <img - class="img-g openImgBox float-left" - alt="" - src="../../assets/images/0168-1.jpg" - /> + <img class="img-g openImgBox float-left" alt="" src="../../assets/images/0168-1.jpg" /> 瀵硅埅绌烘湇鍔′汉鍛樻潵璇达紝鎵嬫帉鏈濅笂琛ㄧず姣棤闅愯棌銆傚洜姝わ紝鍦ㄦ寚鍚戠墿鍝佹垨璇存槑浜嬬墿鏃讹紝搴旀墜鎺屾湞涓婏紱鍦ㄦ寚鍚戠粏寰殑涓滆タ鏃讹紝铏藉彧鐢ㄤ竴鏍规寚澶达紝涔熸渶濂芥墜鎺屾湞涓娿�傛墜鍔跨殑鍚箟闈炲父涓板瘜锛屽湪鏈嶅姟杩囩▼涓紝鑻ヨ兘杈呬互鎵嬪娍鏉ヨ繘涓�姝ヨ鏄庯紝蹇呰兘鎻愰珮鏈嶅姟鐨勮川閲忋�� </p> <p> @@ -178,11 +163,7 @@ <p>鈶㈡墦鍛垫瑺鈥斺�斿帉鐑︺��</p> <p>鈶i紦鎺屸�斺�旇禐鎴愭垨楂樺叴銆�</p> <p> - <img - class="img-f openImgBox float-right" - alt="" - src="../../assets/images/0168-2.jpg" - /> + <img class="img-f openImgBox float-right" alt="" src="../../assets/images/0168-2.jpg" /> 鈶よ交鎷嶈偐鑳屸�斺�旈紦鍔便�佹伃鍠滄垨瀹夋叞銆� </p> <p>鈶ョ瑧鈥斺�斿悓鎰忔垨婊℃剰銆�</p> @@ -199,11 +180,7 @@ <div class="page-box" page="165"> <div v-if="showPageList.indexOf(165) > -1"> <ul class="fl al-c jc-fe mr-70 pad-t-55 mb-45"> - <img - class="headerImg mr-10" - src="../../assets/images/headerlogo.png" - alt="" - /> + <img class="headerImg mr-10" src="../../assets/images/headerlogo.png" alt="" /> <li class="headerText">椤圭洰浜�</li> <li class="headerText">鎵撳ソ鑸┖鏈嶅姟鍙h浜ら檯鍩虹</li> <li class="headerNumber">157</li> @@ -239,11 +216,7 @@ </li> <li> <p class="center"> - <img - class="img-c openImgBox" - alt="" - src="../../assets/images/0169-1.jpg" - /> + <img class="img-c openImgBox" alt="" src="../../assets/images/0169-1.jpg" /> </p> <p class="img">鍥�5-3 寰瑧</p> </li> @@ -274,11 +247,7 @@ <div class="bj3"> <p>2.妯℃嫙寰瑧璁粌娉�</p> <p> - <img - class="img-g openImgBox float-left" - alt="" - src="../../assets/images/0170-1.jpg" - /> + <img class="img-g openImgBox float-left" alt="" src="../../assets/images/0170-1.jpg" /> 鈶犺交鍚堝弻鍞囥�傗憽涓ゆ墜椋熸寚浼稿嚭锛屾寚灏栧鎺ワ紝鏀惧湪鍢村墠15锝�20鍘樼背澶勩�傗憿璁╀袱椋熸寚鎸囧皷浠ョ紦鎱㈠寑閫熷垎鍒悜宸﹀彸绉诲姩锛屼娇涔嬫媺寮�5锝�10鍘樼背鐨勮窛绂伙紝鍢村攪闅忎袱椋熸寚鐨勭Щ鍔ㄩ�熷害鑰屽悓姝ュ鍔犲攪瑙掔殑灞曞紑搴︼紝骞跺湪鎰忓康涓舰鎴愮編涓界殑寰瑧銆傝寰瑧鍋滅暀鏁扮銆傗懀涓ら鎸囦互缂撴參鍖�閫熷悜涓棿闈犳嫝锛岀洿鑷充袱椋熸寚鐩告帴锛涘井绗戠殑鍞囪浠ヤ袱鎸囩Щ鍔ㄧ殑閫熷害鍚屾缂撶紦鏀跺洖銆傞渶瑕佹彁绀虹殑鏄紝杩樿璁粌灏嗗井绗戠紦缂撴敹浣忥紝杩欏緢閲嶈銆傚垏璁颁笉鑳借寰瑧绐佺劧鍋滄銆傚姝ゅ弽澶嶅紑鍚堣缁�20锝�30娆°�� </p> <p>3.鎯呯华璇卞娉�</p> @@ -290,11 +259,7 @@ 杩欐槸鍑犱釜浜哄噾鍦ㄤ竴璧凤紝浜掔浉瑙傛懇鍜岃璁猴紝浜掔浉浜ゆ祦锛屼簰鐩搁紦鍔憋紝浜掔浉鍒嗕韩寮�蹇冪殑浜嬶紝鑾峰緱寰瑧鐨勪竴绉嶆柟娉曘�備篃鍙互鍦ㄥ钩鏃剁暀蹇冭瀵熶粬浜虹殑寰瑧锛屾妸绮惧僵鐨勨�滈暅澶粹�濆皝瀛樺湪璁板繂涓紝鏃舵椂妯′豢銆� </p> <p> - <img - class="img-g openImgBox float-right" - alt="" - src="../../assets/images/0170-2.jpg" - /> + <img class="img-g openImgBox float-right" alt="" src="../../assets/images/0170-2.jpg" /> 5.鍚娉� </p> <p> @@ -311,22 +276,14 @@ <div class="page-box" page="167"> <div v-if="showPageList.indexOf(167) > -1"> <ul class="fl al-c jc-fe mr-70 pad-t-55 mb-45"> - <img - class="headerImg mr-10" - src="../../assets/images/headerlogo.png" - alt="" - /> + <img class="headerImg mr-10" src="../../assets/images/headerlogo.png" alt="" /> <li class="headerText">椤圭洰浜�</li> <li class="headerText">鎵撳ソ鑸┖鏈嶅姟鍙h浜ら檯鍩虹</li> <li class="headerNumber">159</li> </ul> <div class="bodystyle"> <p> - <img - class="img-f openImgBox float-right" - alt="" - src="../../assets/images/0171-1.jpg" - /> + <img class="img-f openImgBox float-right" alt="" src="../../assets/images/0171-1.jpg" /> 鐪肩鐨勯泦涓害锛氫笉瑕佸皢鐩厜鑱氶泦鍦ㄦ梾瀹㈣劯涓婄殑鏌愪釜閮ㄤ綅锛岃�岃鐢ㄧ溂鐫涙敞瑙嗘梾瀹㈣劯閮ㄧ殑涓夎閮ㄤ綅锛屽嵆浠ュ弻鐪间负涓婄嚎锛屽槾涓轰笅椤惰锛屼篃灏辨槸鍙岀溂鍜屽槾涔嬮棿銆� </p> <p> @@ -345,11 +302,7 @@ 璇█鏄汉浠繘琛屾矡閫氱殑宸ュ叿锛岃�屽井绗戞槸涓�绉嶆棤澹扮殑璇█銆傚畠鏄矡閫氱殑寮�濮嬶紝鏄汉闄呬氦寰�鐨勯瓟鍔涘紑鍏炽�傚井寰竴绗戯紝璧涜繃涓囪鍗冭█銆傚鑸┖鏈嶅姟浜哄憳鏉ヨ锛屸�滃井绗戞湇鍔♀�濇洿鏄竴绉嶇壒娈婄殑鎯呯华璇█锛屾槸鏈嶅姟宸ヤ綔鐨勬鼎婊戝墏锛屾槸鏈�璧风爜鐨勮亴涓氳姹傘�傚湪鏌愪簺鏃跺�欙紝瀹冪敋鑷冲彲浠ュ彇浠h瑷�銆� </p> <p> - <img - class="img-g openImgBox float-right" - alt="" - src="../../assets/images/0171-2.jpg" - /> + <img class="img-g openImgBox float-right" alt="" src="../../assets/images/0171-2.jpg" /> 寰瑧鑳借〃鐜板嚭鍠勬剰銆佸皧閲嶅拰鍙嬪ソ锛屼粠鑰屼娇鏃呭娑堥櫎闄岀敓鎰熷拰鎭愭儳鎰燂紝杩涜�屼骇鐢熲�滃鑷冲褰掆�濅箣鎰燂紝骞朵笌鑸┖鏈嶅姟浜哄憳寤虹珛鑹ソ鐨勬矡閫氭笭閬撳拰鍏崇郴銆傚井绗戜篃鏄寲瑙f湇鍔$煕鐩剧殑鏈夋晥鏂瑰紡锛屾湁鍒╀簬鑸┖鏈嶅姟浜哄憳鍋氬ソ鏈嶅姟宸ヤ綔銆� </p> <p>鑸┖鏈嶅姟浜哄憳鎺屾彙寰瑧鐨勫叓澶у師鍒欙紝鎵嶈兘鏇村ソ鍦板睍鐜拌嚜韬殑榄呭姏銆�</p> @@ -396,11 +349,7 @@ 瀵硅埅绌烘湇鍔′汉鍛樻潵璁诧紝寰瑧搴旀槸鑷劧銆佷範鎯殑琛ㄦ儏锛屼负姝わ紝搴旇鑷繁淇濇寔澶╁ぉ寰瑧鐨勪範鎯紝涓嶈兘浠婂ぉ楂樺叴灏卞井绗戯紝涓嶉珮鍏村氨涓嶅井绗戯紱瑕佸仛鍒颁竴鍒板伐浣滃矖浣嶏紝灏辫兘鎶涘嵈涓汉鐑︽伡銆佷笉瀹夈�佷笉蹇殑鎯呯华锛屽仛鍒扮簿绁炴尟濂嬨�佺儹鎯呭湴涓烘梾瀹㈡湇鍔°�傛湁浜嗚壇濂界殑寰瑧涔犳儻锛屾墠鑳借寰瑧鏈嶅姟杩涘叆鏂扮殑澧冪晫銆� </p> <p> - <img - class="img-f openImgBox float-left" - alt="" - src="../../assets/images/0172-1.jpg" - /> + <img class="img-f openImgBox float-left" alt="" src="../../assets/images/0172-1.jpg" /> 8.涓�瑙嗗悓浠佸師鍒� </p> <p> @@ -413,11 +362,7 @@ <div class="page-box" page="169"> <div v-if="showPageList.indexOf(169) > -1"> <ul class="fl al-c jc-fe mr-70 pad-t-55 mb-45"> - <img - class="headerImg mr-10" - src="../../assets/images/headerlogo.png" - alt="" - /> + <img class="headerImg mr-10" src="../../assets/images/headerlogo.png" alt="" /> <li class="headerText">椤圭洰浜�</li> <li class="headerText">鎵撳ソ鑸┖鏈嶅姟鍙h浜ら檯鍩虹</li> <li class="headerNumber">161</li> @@ -429,8 +374,7 @@ 鍦ㄥ伐浣滀腑锛岃埅绌烘湇鍔′汉鍛樹細閬囧埌涓�浜涚壒娈婄殑鏃呭锛岃繖灏遍渶瑕佹湇鍔′汉鍛樺叿澶囩壒娈婃湇鍔$殑娌熼�氳兘鍔涳紝杩欐牱鎵嶈兘鏇村ソ鍦版彁渚涚壒娈婄殑鏈嶅姟銆� </p> <h3 id="c074"> - <span class="h3-zt">涓�銆�</span - ><span class="h3-zt1">甯哥敤鐨勬湇鍔¤嫳璇�</span> + <span class="h3-zt">涓�銆�</span><span class="h3-zt1">甯哥敤鐨勬湇鍔¤嫳璇�</span> </h3> <p> 闅忕潃绉戞妧鐨勫彂灞曪紝涓栫晫鍙樺緱瓒婃潵瓒娾�滃皬鈥濓紝鍦ㄥ伐浣滀腑锛岃埅绌烘湇鍔′汉鍛樺簲鐢ㄥ璇殑鏈轰細浼氳秺鏉ヨ秺澶氾紝闇�瑕佹帉鎻′竴浜涘父鐢ㄧ殑鑻辫鍙h銆� @@ -502,11 +446,7 @@ <div class="page-box" page="171"> <div v-if="showPageList.indexOf(171) > -1"> <ul class="fl al-c jc-fe mr-70 pad-t-55 mb-45"> - <img - class="headerImg mr-10" - src="../../assets/images/headerlogo.png" - alt="" - /> + <img class="headerImg mr-10" src="../../assets/images/headerlogo.png" alt="" /> <li class="headerText">椤圭洰浜�</li> <li class="headerText">鎵撳ソ鑸┖鏈嶅姟鍙h浜ら檯鍩虹</li> <li class="headerNumber">163</li> @@ -575,11 +515,7 @@ <div class="page-box" page="173"> <div v-if="showPageList.indexOf(173) > -1"> <ul class="fl al-c jc-fe mr-70 pad-t-55 mb-45"> - <img - class="headerImg mr-10" - src="../../assets/images/headerlogo.png" - alt="" - /> + <img class="headerImg mr-10" src="../../assets/images/headerlogo.png" alt="" /> <li class="headerText">椤圭洰浜�</li> <li class="headerText">鎵撳ソ鑸┖鏈嶅姟鍙h浜ら檯鍩虹</li> <li class="headerNumber">165</li> @@ -622,7 +558,8 @@ </p> <p> <img class="img-f openImgBox float-right" alt="" src="../../assets/images/0177-2.jpg" /> - 2.鍦ㄩ鏈轰笂锛屼竴鍚嶆梾瀹笉鍋滃湴鎻愰棶銆�</p> + 2.鍦ㄩ鏈轰笂锛屼竴鍚嶆梾瀹笉鍋滃湴鎻愰棶銆� + </p> <p class="block"> 鎻愮ず锛氶鍏堬紝瀵规梾瀹㈡彁鍑虹殑闂瑕佽繘琛岃�愬績缁嗚嚧鐨勮В绛斻�傛梾瀹㈠彲鑳藉鏈夊叧椋炴満鐨勪竴浜涢棶棰樹骇鐢熷ソ濂囷紝杩欐槸鍙互鐞嗚В鐨勶紝鍦ㄤ笉褰卞搷鑷繁宸ヤ綔鐨勬儏鍐典笅锛岃灏藉彲鑳藉湴鍥炵瓟鏃呭鐨勬彁闂�傝嫢褰卞搷鍒颁簡鑷繁鐨勫伐浣滐紝搴斿悜鏃呭璇存槑锛屽緟宸ヤ綔澶勭悊瀹岋紝鍐嶅鏃呭鐨勯棶棰樿繘琛岃В绛斻�傜劧鍚庯紝缁欐梾瀹竴浜涜埅绌烘柟闈㈢殑涔︾睄闃呰銆傝繖鏍凤紝鏃㈠彲浠ヤ负鏃呭鐨勬梾閫斿娣讳箰瓒o紝鍙堝彲浠ヤ赴瀵屾梾瀹㈢殑鐭ヨ瘑銆� </p> @@ -650,19 +587,22 @@ </p> <div class="bk2"> <div class="bj2-dyd"> - <p><span class="bj2-dyd">鎷撳睍闊抽鈻�</span></p> + <p><span class="bj2-dyd">鎷撳睍瑙嗛鈻�</span></p> </div> <!-- 瑙嗛 --> - <ul class="videos-box"> - <li v-for="(item, index) in audios" :key="item.md5"> - <audio - :src="item.url" - controls - controlslist="noplaybackrate nodownload" - class="audio" - ></audio> + <ul class="vertical-video"> + <li v-for="(item, index) in videoOne" :key="item.md5"> + <video :src="item.url" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" + x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls + controlslist="nodownload" class="video-border w100 video"></video> <p class="img fl al-cn ju-cn"> <span>{{ item.name }}</span> + <img :src="collectResourceList.findIndex( + (citem) => citem.md5 == item.md5 + ) > -1 + ? collectCheck + : collectImg + " alt="" class="collect-btn" @click="handleCollect('videoOne', index)" /> </p> </li> </ul> @@ -697,14 +637,14 @@ collectImg: require("../../assets/images/icon/heart.png"), collectCheck: require("../../assets/images/icon/heart-check.png"), collectResourceList: [], - audios:[ + videoOne: [ { - name:'甯歌鏈嶅姟娌熼��-灏忓姩鐗╂墭杩�', - md5:'ab4c2e484b40257c290d80cc968aee78' + name: '甯歌鏈嶅姟娌熼��-灏忓姩鐗╂墭杩�', + md5: 'ab4c2e484b40257c290d80cc968aee78' }, { - name:'甯歌闂鏈嶅姟娌熼��-鏅氬埌鏃呭', - md5:'4dbaa41af8b91b54becb6166af6f4c42' + name: '甯歌闂鏈嶅姟娌熼��-鏅氬埌鏃呭', + md5: '4dbaa41af8b91b54becb6166af6f4c42' }, ] }; @@ -713,7 +653,7 @@ this.collectResourceList = await getCollectResource( this.config.activeBook.bookId ); - await this.getVideoPath("audios"); + await this.getVideoPath("videoOne"); }, methods: { async getVideoPath(dataName) { @@ -722,13 +662,13 @@ item["url"] = await getResourcePath(item.md5); } }, - handleCollect(dataName,num) { + handleCollect(dataName, num) { const data = this[dataName][num]; this.handleCollectResource( data.md5, data.md5, "", - "闊抽", + "瑙嗛", "bits", data.name ); @@ -771,9 +711,11 @@ .h3-zt { color: #5193c7 !important; } + .task { border-top: 0.7em solid #5193c7 !important; } + .table-p { font-size: 16px !important; line-height: 20px !important; @@ -810,10 +752,12 @@ height: 2px; background-color: #000; } + .banshi { width: 100%; - height:300px; + height: 300px; } + .swiper-imgBox { display: flex !important; flex-direction: column-reverse !important; -- Gitblit v1.9.1