From 28f79c906721eea9ff2c74cf87ae1179a831d534 Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期二, 04 六月 2024 17:43:59 +0800 Subject: [PATCH] 合并 --- src/books/English/view/components/chapter001.vue | 213 +++++++++++++++++++++++++++++++++++------------------ 1 files changed, 141 insertions(+), 72 deletions(-) diff --git a/src/books/English/view/components/chapter001.vue b/src/books/English/view/components/chapter001.vue index eadab25..d7b3a6e 100644 --- a/src/books/English/view/components/chapter001.vue +++ b/src/books/English/view/components/chapter001.vue @@ -505,7 +505,7 @@ <div class="bodystyle"> <h3 id="c002" class="fl al-cn"> <span class="bjh3">Listening</span> - <audio :src="resource.listenOne" controls></audio> + <audio :src="resource.listenOne" controls class="audio"></audio> </h3> <p> <b @@ -517,9 +517,16 @@ <p class="center"> <img class="img-0" alt="" src="../../assets/images/0013-3.jpg" /> </p> + <div> + <ul class="fl ju-bt"> + <li>Speakers銆�Chinese Cultural Symbols</li> + <li style="width:40%;text-align:center">Descriptions</li> + </ul> + <matching :rawData="rawData" :item="question"></matching> + </div> <h3 id="c003" class="fl al-cn"> <span class="bjh3">Reading</span> - <audio :src="resource.readingOne" controls></audio> + <audio :src="resource.readingOne" controls class="audio"></audio> </h3> <p> 1.How was Chinese culture introduced to the world in ancient @@ -728,6 +735,7 @@ :src="resource.readingTwo" controls style="margin-left: 10px" + class="audio" ></audio> <p>wonderland /藞w蕦nd蓹l忙nd/ <i>n.</i> 鏈夎澶氬濡欎簨鐗╃殑鍦版柟</p> <div class="bkbj"> @@ -841,8 +849,7 @@ <p>along the way 娌块��</p> </li> </ul> - - + <div class="bj-note"> <p class="m0"><b class="fz-18">Notes:</b></p> <p class="m0"> @@ -1812,9 +1819,9 @@ </div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> + <div class="pageBox"></div> </div> <!-- 鏄剧ず褰撳墠椤靛拰鎬婚〉鏁扮殑鍏冪礌 --> - <div class="pageBox">{{ pageNum }} / {{ total }}</div> </div> </div> </div> @@ -2305,32 +2312,16 @@ </template> <script> -import getResourcePath from "@/assets/methods/resources"; -import Swiper from "swiper/bundle"; -import "swiper/swiper-bundle.css"; +import matching from "@/components/matching/matching.vue"; +import { getResourcePath } from "@/assets/methods/resources"; export default { name: "chapter-one", + components:{matching}, props: { showPageList: { type: Array, }, - pageNum:{ - type:String - }, - total:{ - type:String - } }, - // watch: { - // showPageList: { - // handler(newVal, oldVal) { - // if (newVal.indexOf(14) > -1) { - // console.log("椤电爜", newVal, oldVal); - // this.setSwiper(); - // } - // }, - // }, - // }, data() { return { imgThirteen: require("../../assets/images/grammar.jpg"), @@ -2341,8 +2332,121 @@ showAnswerFive: false, showImg: false, showQuestionAnswer: false, - // pageNum: "1", - // total: "27", + rawData: { + left: [ + { + oldId: "FB34", + txt: "Martin銆�銆�銆�銆�Silk", + }, + { + oldId: "64D6", + txt: "Jessica銆�銆�The Great Wall", + }, + { + oldId: "2ED4", + txt: "Soren銆�銆�Chinese Food", + }, + { + oldId: "44DE", + txt: "Chinese銆�銆�銆�銆�Tea", + }, + ], + right: [ + { + oldId: "64D6", + txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.", + }, + { + oldId: "FB34", + txt: "It was first discovered and drank in China and my favorileLongjing tca is praduced near the West Lake in Hangzhou.", + }, + { + oldId: "2ED4", + txt: "The clothing material is quite popular among Roman women inancient times.", + }, + { + oldId: "44DE", + txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.", + }, + ], + }, + value: [], + question: { + KnowledgePoint: "123", + analysis: "123", + answer: [ + { + id: "FB34", + linkValue: "The clothing material is quite popular among Roman women inancient times.", + value: "Silk", + }, + { + id: "64D6", + linkValue: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.", + value: "The Great Wall", + }, + { + id: "2ED4", + linkValue: "It is very delicious and I like the hot and spicy Sichuan lavor hest.", + value: "Chinese Food", + }, + { + id: "44DE", + linkValue: "It was first discovered and drank in China and my favorileLongjing tca is praduced near the West Lake in Hangzhou.", + value: "Chinese Tea", + }, + ], + optionStyle: undefined, + id: 489306, + options: { + linkValues: [ + { + oldId: "64D6", + txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.", + }, + { + oldId: "44DE", + txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.", + }, + { + oldId: "FB34", + txt: "The clothing material is quite popular among Roman women inancient times.", + }, + { + oldId: "2ED4", + txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.", + }, + + ], + values: [ + { + oldId: "FB34", + txt: "Martin Silk", + }, + { + oldId: "64D6", + txt: "The Great Wall", + }, + { + oldId: "2ED4", + txt: "Chinese Food", + }, + { + oldId: "44DE", + txt: "Chinese Tea", + }, + ], + }, + questionType: "matching", + stem: { + stemTxt: "鎸夐『搴忚繛绾�", + }, + stemStyle: undefined, + titleDescription: "1", + userChoise: [], + value: [], + answerImg:require("@/books/English/assets/images/matching-one.png") + }, questionData: { warnUp: { one: { @@ -2559,14 +2663,14 @@ JSON.stringify(this.questionData) ); }, - getPath() { - this.resource.listenOne = getResourcePath( + async getPath() { + this.resource.listenOne = await getResourcePath( "422139A2EF66EA888C5ED1D550AE23E0" ); - this.resource.readingOne = getResourcePath( + this.resource.readingOne = await getResourcePath( "3F442B682D84C8AB06C800B29D734920" ); - this.resource.readingTwo = getResourcePath( + this.resource.readingTwo = await getResourcePath( "E8719EC88026BCFB11D292AA999F6D3D" ); }, @@ -2637,48 +2741,6 @@ saveData() { console.log(this.testData); }, - setSwiper() { - const that = this; - const dom = document.querySelector(".swiper_ppt"); - console.log("dom", dom); - new Swiper(dom, { - loop: false, // 鏃犵紳 - autoplay: false, - paginationClickable: true, - slidesPerView: 1, // 涓�缁勪笁涓� - spaceBetween: 30, // 闂撮殧 - // 濡傛灉闇�瑕佸墠杩涘悗閫�鎸夐挳 - navigation: { - nextEl: (this.container ? this.container : document).querySelector( - ".swiper-button-next" - ), - prevEl: (this.container ? this.container : document).querySelector( - ".swiper-button-prev" - ), - }, - // 绐楀彛鍙樺寲,閲嶆柊init,閽堝F11鍏ㄥ睆鍜屾斁澶х缉灏�,蹇呴』鍔� - observer: true, - observeParents: true, - on: { - slideChange: function (value) { - console.log("ppt椤电爜", value); - let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級 - let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁� - // this.changePage(currentPage) - that.pageNum = currentPage; - this.total = totalPages; - console.log(this.pageNum, this.total); - }, - // slideChangeTran sitionStart:function (value) { - // // 姣忓綋婊戝潡鏀瑰彉鏃惰Е鍙戯紝鏇存柊褰撳墠椤靛拰鎬婚〉鏁扮殑鏄剧ず - // let currentPage = value.activeIndex + 1; // 鑾峰彇褰撳墠椤碉紙浠�1寮�濮嬭鏁帮級 - // let totalPages = value.slides.length; // 鑾峰彇鎬婚〉鏁� - // var paginationInfoEl = document.querySelector('.pagination-info'); - // paginationInfoEl.textContent = currentPage + '/' + totalPages; - // } - }, - }); - }, }, }; </script> @@ -2739,4 +2801,11 @@ select { height: 24px; } +.mini-audio { + width: 200px; + height: 200px; + position: fixed; + right:0; + background-color: red; +} </style> -- Gitblit v1.9.1