src/books/English/view/components/chapter001.vue
@@ -359,7 +359,7 @@ shadow puppet show, traditional Chinese medicine, Peking Opera scenery </p> <p class="center"><b>My Experience in <span class="word-bc">Wonderland</span> </b></p> <p class="center"><b>My Experience in <span class="word-bc" word="wonderland">Wonderland</span> </b></p> <p class="center"> <audio :src="resource.readingOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio> </p> @@ -379,7 +379,7 @@ the people,the culture,the <span class="word-bc" >cuisine</span> and of course the huge variety of <span class="word-bc">landscapes</span>. <span class="word-bc" word="landscape">landscapes</span>. </p> <p> I found many great people and made several Chinese friends along @@ -1965,7 +1965,7 @@ was for my studies.In a matter of days,I made a lot of friends from different countries and one afternoon,my friends and I planned to visit the world-famous Sun Yat-sen <span class="word-bc">Mausoleum</span> <span class="word-bc" word="mausoleum">Mausoleum</span> .A.<input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 90%" v-model="testData.tg.one" @change="setTestData" /> I looked around with curiosity,and everything seemed to move at a @@ -1987,7 +1987,7 @@ my room to turn on my <span class="word-bc">laptop</span> and typed in the key words.I was <span class="word-bc">stunned</span> <span class="word-bc" word="stun">stunned</span> ; I couldn’t believe my eyes.It is actually an online shopping website where you can buy anything you can think of. </p> @@ -1995,7 +1995,7 @@ After my graduation in 2015,I joined another university in Shanghai for further studies.I always saw my Chinese classmates paying with their phones; this <span class="word-bc" >triggered</span> <span class="word-bc" word="trigger">triggered</span> my attention.With the help of my classmates,I finally got my own online payment account.This is an absolute @@ -2024,7 +2024,7 @@ millions of people around China.The Chinese <span class="word-bc">economy</span> is <span class="word-bc">booming</span> <span class="word-bc" word="boom">booming</span> ,which makes people well off.I’ve been in China for several years and witnessed China’s <span class="word-bc" >potential</span> @@ -4714,7 +4714,7 @@ if (testData) { this.testData = JSON.parse(testData); } const bookQuestion = localStorage.getItem("english-book-question-one"); const bookQuestion = localStorage.getItem("english-book-chapter01-question-one"); if (bookQuestion) { this.questionData = JSON.parse(bookQuestion); } @@ -4869,7 +4869,7 @@ }, setBookQuestion() { localStorage.setItem( "english-book-question-one", "english-book-chapter01-question-one", JSON.stringify(this.questionData) ); }, src/books/English/view/components/chapter002.vue
@@ -1844,7 +1844,7 @@ <span class="word-bc">cauldron</span> ,formed by the smaller snowflakes with names of the <span class="word-bc">participating</span> <span class="word-bc" word="participate">participating</span> countries and regions on them,was lit by two young Chinese athletes. </p> @@ -1890,7 +1890,7 @@ </p> <p>It was like getting over my schoolgirl crush and focusing on learning to love.</p> <p>I could not agree more with what a gold medal winner said during an interview.“In 2008 we <span class="word-bc">impressed</span> the <span class="word-bc" word="impress">impressed</span> the world while in 2022 we became people-centered —for athletes and the people.” </p> <p>I failed to control myself the moments when the Chinese national @@ -4735,7 +4735,7 @@ if (testData) { this.testData = JSON.parse(testData); } const bookQuestion = localStorage.getItem("english-book-question-one"); const bookQuestion = localStorage.getItem("english-book-chapter02-question-one"); if (bookQuestion) { this.questionData = JSON.parse(bookQuestion); } @@ -4911,7 +4911,7 @@ }, setBookQuestion() { localStorage.setItem( "english-book-question-one", "english-book-chapter02-question-one", JSON.stringify(this.questionData) ); }, src/books/English/view/components/chapter003.vue
@@ -533,13 +533,13 @@ <p> What’s more,volunteering is a fun and easy way to explore your interests and <span class="word-bc">passions</span> <span class="word-bc" word="passion">passions</span> .Doing volunteer work can be a relaxing, <span class="word-bc">energizing</span> <span class="word-bc" word="energize">energizing</span> escape from your day-to-day routine of work,school,or family <span class="word-bc">commitments</span> <span class="word-bc" word="commitment">commitments</span> .Volunteering also provides you with <span class="word-bc">creativity</span> ,motivation,and @@ -1934,7 +1934,7 @@ </p> <p> The engineers have solar- <span class="word-bc">electrified</span> <span class="word-bc" word="electrify">electrified</span> 45,000 houses.Please remember that our students are <span class="word-bc">primarily</span> src/books/English/view/components/chapter004.vue
@@ -329,11 +329,11 @@ <p>Robots are on the rise! Today they can be found working in hotels and stores.Machines will soon be used to study sea <span class="word-bc">creatures</span> <span class="word-bc" word="creature">creatures</span> up close.These robots can <span class="word-bc">blend</span> blend right in with underwater <span class="word-bc">habitats</span> <span class="word-bc" word="habitat">habitats</span> .Robots take on tasks to make our life easier and safer.Scientists keep coming up with jobs that machines can do.Sometimes,the machines can do a better job than humans.Take a look at the latest robots. @@ -347,7 +347,7 @@ by slowly opening its soft <span class="word-bc">rubber</span> arms and then <span class="word-bc"> snapping</span> <span class="word-bc" word="snap"> snapping</span> them shut.During tests,fish swam alongside the Octobot.Researchers can use the robot to study sea creatures. </p> @@ -387,7 +387,7 @@ <span class="word-bc">rescue</span> <span class="word-bc">missions</span> and to carry heavy <span class="word-bc">facilities</span> <span class="word-bc" word="facility">facilities</span> . </p> <p class="center"><img class="img-f" alt="" src="../../assets/images/0071-3.jpg" /></p> @@ -601,28 +601,28 @@ <li> <span>Pepper</span> <dropdown :options="readingOne[1].option" @changeDropdownData="changeDropdownDataOne" ref="choiceDropdownOne"></dropdown> ref="choiceDropdownOne" :value ="readingOne[1].value[0].userAnswer"></dropdown> <img :src="readingOne[1].value[0].isRight ? correctIcon : errorIcon" alt="" v-if="readingOne[1].isComplete"> </li> <li> <span>Spot</span> <dropdown :options="readingOne[1].option" @changeDropdownData="changeDropdownDataTwo" ref="choiceDropdownTwo"></dropdown> ref="choiceDropdownTwo" :value ="readingOne[1].value[1].userAnswer"></dropdown> <img :src="readingOne[1].value[1].isRight ? correctIcon : errorIcon" alt="" v-if="readingOne[1].isComplete"> </li> <li> <span>Mingo</span> <dropdown :options="readingOne[1].option" @changeDropdownData="changeDropdownDataThree" ref="choiceDropdownThree"></dropdown> ref="choiceDropdownThree" :value ="readingOne[1].value[2].userAnswer"></dropdown> <img :src="readingOne[1].value[2].isRight ? correctIcon : errorIcon" alt="" v-if="readingOne[1].isComplete"> </li> <li> <span>Octobot</span> <dropdown :options="readingOne[1].option" @changeDropdownData="changeDropdownDataFour" ref="choiceDropdownFour"></dropdown> ref="choiceDropdownFour" :value ="readingOne[1].value[3].userAnswer"></dropdown> <img :src="readingOne[1].value[3].isRight ? correctIcon : errorIcon" alt="" v-if="readingOne[1].isComplete"> </li> @@ -1360,12 +1360,12 @@ <div class="padding-93"> <div class="bodystyle"> <p>quite helpful in the discovery of around 340 <span class="word-bc">pulsars</span> <span class="word-bc" word="pulsar">pulsars</span> ,since becoming operational in September 2016.It has also contributed to helping human beings better understand the <span class="word-bc">origin</span> of fast radio <span class="word-bc">bursts</span> <span class="word-bc" word="burst">bursts</span> ,extremely brief but powerful flashes in the <span class="word-bc">universe</span> .FAST was listed by the journals @@ -1402,7 +1402,7 @@ spent 15 years on FAST,and,in return,FAST helped him to grow,increased his knowledge,and <span class="word-bc" word="reward">rewarded</span> him with confidence as he <span class="word-bc">overcame</span> <span class="word-bc" word="overcome">overcame</span> many difficulties and setbacks. </p> <p>The “Sky Eye” is open to the world and offers more src/books/English/view/components/chapter005.vue
@@ -1816,12 +1816,12 @@ </p> <p>Just this summer,a group of researchers in the UK published a study comparing the carbon footprints connected with different diets:meat-eaters,fish-eaters,and <span class="word-bc" >vegans</span> <span class="word-bc" word="vegan">vegans</span> .It turns out that <span class="word-bc">eliminating</span> <span class="word-bc" word="eliminate">eliminating</span> meat from your diet can reduce your carbon <span class="word-bc">emissions</span> <span class="word-bc" word="emission">emissions</span> by half.A vegan diet was connected with the least amount of greenhouse gas emissions—99 percent to 102 percent less than meateaters—but even switching from meat to fish can reduce your dietary emissions @@ -1829,7 +1829,7 @@ </p> <p>Before learning about this study,I never thought about how my diet impacted anyone but myself.I always <span class="word-bc">figured</span> <span class="word-bc" word="figure">figured</span> that what I put into my body was a personal decision,but it’s a public concern. </p> @@ -4603,7 +4603,7 @@ if (testData) { this.testData = JSON.parse(testData); } const bookQuestion = localStorage.getItem("english-book-question-one"); const bookQuestion = localStorage.getItem("english-book-chapter05-question-one"); if (bookQuestion) { this.questionData = JSON.parse(bookQuestion); } @@ -4647,7 +4647,7 @@ }, setBookQuestion() { localStorage.setItem( "english-book-question-one", "english-book-chapter05-question-one", JSON.stringify(this.questionData) ); }, src/books/English/view/components/chapter006.vue
@@ -322,7 +322,7 @@ <span class="word-bc">behavioral</span> <span class="word-bc">approach</span> .Good behavior also <span class="word-bc">determines</span> <span class="word-bc" word="determine">determines</span> good and peaceful environment.Another way is to ensure healthy relationships among the staff; that is why communication is quite necessary.Keeping an eye on staff @@ -382,7 +382,7 @@ The work environment can greatly influence how the employees feel about their jobs.Because of this,it’s important to find an employer that <span class="word-bc">fosters</span> <span class="word-bc" word="foster">fosters</span> a positive atmosphere and encourages employees <span class="word-bc">consistently</span> .A positive work environment can improve employees’ @@ -1196,7 +1196,7 @@ You can usually find a company’s code of conduct in an employee handbook.Each company has different rules in its code of conduct,and each company has its own policies for <span class="word-bc">enforcing</span> <span class="word-bc" word="enforce">enforcing</span> this code. </p> <p> @@ -1259,7 +1259,7 @@ </p> <p> 5.Advertising.Products should not be <span class="word-bc">advertised</span> <span class="word-bc" word="advertise">advertised</span> in a <span class="word-bc">misleading</span> way. @@ -1329,7 +1329,7 @@ </p> <p> 14. <span class="word-bc">Complaints</span> <span class="word-bc" word="complaint">Complaints</span> .Handle the complaints fairly and quickly. </p> <p> @@ -1937,14 +1937,15 @@ and Ross and match the following information with the corresponding speaker.</b> </p> <audio :src="resource.listenThree" controls controlslist="noplaybackrate nodownload" class="audio"></audio> <audio :src="resource.listenThree" controls controlslist="noplaybackrate nodownload" class="audio"> </audio> <table border="1" cellpadding="4" cellspacing="0" style="border-color: #fff" class="fz-14"> <tr class="table-tr-bc"> <td class="tl-cn wh-no table-th-bc">Sally</td> <td class="fl de-cl al-cn ju-cn"> <img src="../../assets/images/table/c2.jpg" alt=""> <dropdown :options="listenThree[1].option" @changeDropdownData="changeDropdownDataOne" ref="choiceDropdownOne" :userAnswer="listenThree[1].value[0].userAnswer" /> ref="choiceDropdownOne" :value="listenThree[1].value[0].userAnswer" /> <img :src="listenThree[1].value[0].isRight ? correctIcon : errorIcon" v-if="listenThree[1].isComplete"> </td> @@ -1975,7 +1976,7 @@ <td class="fl de-cl al-cn ju-cn"> <img src="../../assets/images/table/c1.jpg" alt=""> <dropdown :options="listenThree[1].option" @changeDropdownData="changeDropdownDataTwo" ref="choiceDropdownTwo" /> ref="choiceDropdownTwo" :value="listenThree[1].value[1].userAnswer" /> <img :src="listenThree[1].value[1].isRight ? correctIcon : errorIcon" v-if="listenThree[1].isComplete"> </td> @@ -2616,7 +2617,7 @@ watch: { showPageList: { handler(newVal) { console.log(123, newVal, this.$refs); }, immediate: true @@ -2630,6 +2631,7 @@ errorIcon: require('@/assets/images/error.svg'), showImg: false, showImgOne: false, selectedValue: null, // 用于存储当前选中的值 rawData: { left: [ { @@ -3812,12 +3814,7 @@ const listenThree = localStorage.getItem('english-chapter06-listenThree') if (listenThree) { this.listenThree = JSON.parse(listenThree) } }, methods: { arrayToString(data) { @@ -4053,8 +4050,12 @@ localStorage.setItem('english-chapter06-listenThree', JSON.stringify(this.listenThree)) }, changeDropdownDataOne(data) { this.$set(this.listenThree[1].value[0], 'userAnswer', data) this.saveListenThree() // 假设data是新的userAnswer值 if (this.listenThree.length > 1 && this.listenThree[1].value && this.listenThree[1].value.length > 0) { this.$set(this.listenThree[1].value[0], 'userAnswer', data); this.selectedValue = data; // 更新selectedValue以反映当前选中的值 this.saveListenThree(); // 保存更改到localStorage } }, changeDropdownDataTwo(data) { this.$set(this.listenThree[1].value[1], 'userAnswer', data) @@ -4095,13 +4096,14 @@ } } localStorage.removeItem('english-chapter06-listenThree') this.$emit('empty'); }, viewListenThree() { for (let index = 0; index < this.listenThree.length; index++) { const item = this.listenThree[index]; item.isShowAnswer = !item.isShowAnswer } } }, }, }; </script> src/books/English/view/components/chapter007.vue
@@ -461,7 +461,7 @@ <span class="word-bc">dedication</span> has made him a role model for young people.Wang Innovation Studio now has nearly 100 members,who have <span class="word-bc">achieved</span> <span class="word-bc" word="achieve">achieved</span> achieved more than 30 technological innovations. </p> <p>By the end of 2020,a total of 35 UHV projects had been completed or were under @@ -909,11 +909,11 @@ <div class="bk-wh"> <p class="dl-box"> <span class="word-bc mr-20 dl-span">strong-willed</span> <span class="word-bc mr-20 dl-span">motivated</span> <span class="word-bc mr-20 dl-span" word="motivate">motivated</span> <span class="word-bc mr-20 dl-span">active</span> <span class="word-bc mr-20 dl-span">cooperative</span> <span class="word-bc mr-20 dl-span">stressful</span> <span class="word-bc mr-20 dl-span">disciplined</span> <span class="word-bc mr-20 dl-span" word="discipline">disciplined</span> <span class="word-bc mr-20 dl-span">risky</span> <span class="word-bc mr-20 dl-span">helpful</span> <span class="word-bc mr-20 dl-span">dutiful</span> src/books/English/view/components/chapter008.vue
@@ -348,7 +348,7 @@ <div class="padding-93"> <div class="bodystyle"> <p>So,I <span class="word-bc" >inquired</span> <span class="word-bc" word="inquire" >inquired</span> as to who could give me work around town.I lived in the town of Woodway,which had enough people,especially <span class="word-bc">elderly</span> @@ -368,7 +368,7 @@ pull out weeds one by one in her front yard and backyard.After this <span class="word-bc" >tedious</span> task,I <span class="word-bc" >mowed</span> <span class="word-bc" word="mow">mowed</span> her <span class="word-bc" >lawn</span> —front and back.That was it for my first day,and it took me about two hours.I asked her @@ -1007,9 +1007,9 @@ <span class="word-bc mr-20 dl-span" >repetitive</span> <span class="word-bc mr-20 dl-span" >risky</span> <span class="word-bc mr-20 dl-span" <span class="word-bc mr-20 dl-span" word="satisfy" >satisfying</span> <span class="word-bc mr-20 dl-span" <span class="word-bc mr-20 dl-span" word="stimulate" >stimulating</span> <span class="word-bc mr-20 dl-span" >stressful</span> @@ -1373,17 +1373,17 @@ <p>We shouldn’t spend a lot of time worrying about where we should be.Things will fall into place as they are meant to.There isn’t one correct path and everyone’s life is different.We may face challenges that bring greater <span class="word-bc" >outcomes</span> <span class="word-bc" word="outcome" >outcomes</span> later on. </p> <p>Some may argue that they need more money to survive and be happy.It is true that we need money to survive,but after a certain amount it doesn’t give us any more happiness.It can provide <span class="word-bc" >necessities</span> <span class="word-bc" word="necessity">necessities</span> like food,water,clothes,and <span class="word-bc" >shelter</span> .It can also provide <span class="word-bc" >luxuries</span> <span class="word-bc" word="luxury" >luxuries</span> like vacations and going out to eat at a restaurant.But when we enjoy something,the feeling of enjoyment doesn’t last forever.We usually return to our src/books/English/view/components/index.vue
@@ -205,8 +205,8 @@ }, 500); // 测试页面跳转 setTimeout(() => { this.gotoPage(8,140); // setTimeout(() => { // this.gotoPage(5,69); // setTimeout(() => { // this.renderSign("Highlight", { // id: "2ACA9359", @@ -234,7 +234,7 @@ // txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ", // txtIndex: 57 // }); }, 50); // }, 50); }, methods: { // setZoom1() { src/books/artAndDrama/view/components/chapter001.vue
@@ -79,7 +79,7 @@ <span>视频：我们是一家人 </span> <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'" placement="top-start"> <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt="" class="collect-btn" <img :src="collectResourceList.findIndex(item => item.id == '691cbd2c13198d04afc7800d0f2cafb0') > -1 ? collectCheck : collectImg" alt="" class="collect-btn" @click="handleCollect('video')" /> </el-tooltip> </p> @@ -202,11 +202,15 @@ </p> <p class="text t-l">正义队长： <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6" style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')" @blur="handleBlur('one')" ></textarea> style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')" @blur="handleBlur('one')"></textarea> </p> <p class="text t-l">黑暗队长： <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6" style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')" @blur="handleBlur('two')"></textarea> style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')" @blur="handleBlur('two')"></textarea> </p> </div> <!-- 此次为页脚部分（需要设置页码） --> @@ -372,7 +376,7 @@ <span>视频：我们是一家人 </span> <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'" placement="top-start"> <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt="" class="collect-btn" <img :src="collectResourceList.findIndex(item => item.id == '691cbd2c13198d04afc7800d0f2cafb0') > -1 ? collectCheck : collectImg" alt="" class="collect-btn" @click="handleCollect('video')" /> </el-tooltip> </p> @@ -391,6 +395,7 @@ import matching from "@/components/matching/matching.vue"; import choice from "@/components/choice/choice.vue" import { getResourcePath } from "@/assets/methods/resources"; import { getCollectResource, setCollectResource } from "@/assets/methods/resources"; export default { name: "chapterOne", components: { @@ -403,12 +408,18 @@ }, }, //在这里对调用的方法进行挂载 mounted() { this.getVidoePath(); async mounted() { const bookQuestion = localStorage.getItem("artAndDrama-book-question-one"); if (bookQuestion) { this.questionData = JSON.parse(bookQuestion); } this.getVidoePath(); const data = localStorage.getItem("artAndDrama-chapter01-Data"); if (data) { this.chapterData = JSON.parse(data); } this.collectResourceList = await getCollectResource(this.config.activeBook.bookId) }, data() { return { @@ -427,6 +438,7 @@ accentColor: "", color: "#fff", isFocused: null, // 用于跟踪textarea的聚焦状态 collectResourceList:[], chapterData: { isCollectImg: false, isCollectVideo: false, @@ -741,7 +753,6 @@ this.isFocused = null; // 当textarea失去焦点时，设置为false }, setBookQuestion() { console.log("保存"); localStorage.setItem( "artAndDrama-book-question-one", JSON.stringify(this.questionData) @@ -749,18 +760,34 @@ }, handleChapterData() { localStorage.setItem( "math-chapterData", "artAndDrama-chapter01-Data", JSON.stringify(this.chapterData) ); }, handleCollect(type) { if (type == "img") { this.chapterData.isCollectImg = !this.chapterData.isCollectImg; } else if (type == "video") { this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo; if (type == "video") { this.handleCollectResource("691cbd2c13198d04afc7800d0f2cafb0","691cbd2c13198d04afc7800d0f2cafb0",'',"视频","bits",'视频：我们是一家人') } this.handleChapterData(); }, //资源收藏事件 handleCollectResource(id, md5, resourcePath, resourceType, source, resourceName) { let list = this.collectResourceList if (list.findIndex(item => item.id == id) > -1) { list = list.filter(item => item.id != id) } else { list.push({ id, md5, resourcePath, resourceType, source, resourceName, }) } this.collectResourceList = list setCollectResource(this.config.activeBook.bookId, this.collectResourceList) } }, }; </script> src/books/artAndDrama/view/components/chapter002.vue
@@ -249,7 +249,7 @@ <span>视频：惟妙惟肖的人物 </span> <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'" placement="top-start"> <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt="" class="collect-btn" <img :src="collectResourceList.findIndex(item => item.id == 'a3c9b55ac8227e4c885384ff2fc6c0e7') > -1 ? collectCheck : collectImg" alt="" class="collect-btn" @click="handleCollect('video')" /> </el-tooltip> </p> @@ -267,6 +267,7 @@ <script> import drag from "@/components/dragQuestion/index.vue" import { getResourcePath } from "@/assets/methods/resources"; import { getCollectResource, setCollectResource } from "@/assets/methods/resources"; export default { name: "chapterTwo", components: { drag }, @@ -276,12 +277,17 @@ }, }, //在这里对调用的方法进行挂载 mounted() { async mounted() { this.getVidoePath(); const bookQuestion = localStorage.getItem("artAndDrama-book-question-two"); if (bookQuestion) { this.questionData = JSON.parse(bookQuestion); } const data = localStorage.getItem("artAndDrama-chapter02-Data"); if (data) { this.chapterData = JSON.parse(data); } this.collectResourceList = await getCollectResource(this.config.activeBook.bookId) }, data() { return { @@ -294,6 +300,7 @@ auidoPathFour: "", auidoPathFive: "", isFocused: null, // 用于跟踪textarea的聚焦状态 collectResourceList:[], chapterData: { isCollectImg: false, isCollectVideo: false, @@ -476,7 +483,6 @@ this.isFocused = null; // 当textarea失去焦点时，设置为false }, setBookQuestion() { console.log("保存"); localStorage.setItem( "artAndDrama-book-question-two", JSON.stringify(this.questionData) @@ -484,18 +490,34 @@ }, handleChapterData() { localStorage.setItem( "math-chapterData", "artAndDrama-chapter02-Data", JSON.stringify(this.chapterData) ); }, handleCollect(type) { if (type == "img") { this.chapterData.isCollectImg = !this.chapterData.isCollectImg; } else if (type == "video") { this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo; if (type == "video") { this.handleCollectResource("a3c9b55ac8227e4c885384ff2fc6c0e7","a3c9b55ac8227e4c885384ff2fc6c0e7",'',"视频","bits",'视频：惟妙惟肖的人物') } this.handleChapterData(); }, //资源收藏事件 handleCollectResource(id, md5, resourcePath, resourceType, source, resourceName) { let list = this.collectResourceList if (list.findIndex(item => item.id == id) > -1) { list = list.filter(item => item.id != id) } else { list.push({ id, md5, resourcePath, resourceType, source, resourceName, }) } this.collectResourceList = list setCollectResource(this.config.activeBook.bookId, this.collectResourceList) } }, }; </script> src/books/artAndDrama/view/components/chapter003.vue
@@ -5,12 +5,7 @@ <h1 id="a004"> <!-- 这里的动图有问题，没有背景图片 --> <img class="img-0" alt="" src="../../assets/images/dy3.jpg" /> <audio :src="audioPathOne" controls controlslist="noplaybackrate nodownload" class="audio" ></audio> <audio :src="audioPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio> </h1> <div class="bodystyle"> <div class="bk"> @@ -27,11 +22,7 @@ <p><br /></p> <!-- 此次为页脚部分（需要设置页码） --> <div class="page-footer"> <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" /> <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" /> <div class="page-footer-number-right">19</div> </div> </div> @@ -39,11 +30,7 @@ <div class="page-box" page="23"> <div v-if="showPageList.indexOf(23) > -1"> <h1> <img src="../../assets/images/header-green.png" alt="" style="width: 100%" /> <img src="../../assets/images/header-green.png" alt="" style="width: 100%" /> </h1> <img class="headerimg" src="../../assets/images/page5.png" alt="" /> <div class="bodystyle" style="margin-top: 3%"> @@ -64,8 +51,7 @@ <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /> </h3> <p class="text"> <span class="hs1">◇</span >邀请小伙伴分角色朗诵附录中的剧本选段1～2，重读加点文字。 <span class="hs1">◇</span>邀请小伙伴分角色朗诵附录中的剧本选段1～2，重读加点文字。 </p> <p class="block3" style="margin: 3% 0%"> <span class="hs">剧本: 一块奶酪</span> @@ -73,32 +59,19 @@ <!-- <p class="center1 text" style="font-size: 25px; margin: 3% 0;"><span class="hs">一块奶酪</span></p> --> <!-- 此处为附录资源处 --> <div class="Options text"> <span class="folder" v-for="(segment, index) in segments" :key="index" @click="showContent(index)" ><img src="../../assets/images/icon/folder.svg" alt="" />选段{{ <span class="folder" v-for="(segment, index) in segments" :key="index" @click="showContent(index)"><img src="../../assets/images/icon/folder.svg" alt="" />选段{{ segment }}</span > }}</span> </div> <div v-if="activeIndex !== null" class="content-wrapper text" v-html="activeContent" ></div> <div v-if="activeIndex !== null" class="content-wrapper text" v-html="activeContent"></div> <p class="center text"> <img class="img-e" alt="" src="../../assets/images/0024-1.jpg" /> </p> </div> <!-- 此次为页脚部分（需要设置页码） --> <div class="page-footer"> <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" /> <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" /> <div class="page-footer-number-left">20</div> </div> </div> @@ -106,11 +79,7 @@ <div class="page-box" page="24"> <div v-if="showPageList.indexOf(24) > -1"> <h1> <img src="../../assets/images/unit3-header-img.png" alt="" style="height: auto; width: 100%" /> <img src="../../assets/images/unit3-header-img.png" alt="" style="height: auto; width: 100%" /> </h1> <div class="bodystyle" style="margin-top: 3%"> <h2 id="b012" class="problem">第二课 意外发生了！</h2> @@ -118,8 +87,7 @@ <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /> </h3> <p class="text"> <span class="hs1">◇</span >当上半场比赛失利，中场休息时，你会怎么做？当别人夸赞你的时候，你会怎么做？请你和朋友一起演一演吧。 <span class="hs1">◇</span>当上半场比赛失利，中场休息时，你会怎么做？当别人夸赞你的时候，你会怎么做？请你和朋友一起演一演吧。 </p> <h3 class="lefth3" id="c024" style="margin-top: 7%"> <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /> @@ -131,22 +99,13 @@ <span class="hs1">◇</span>请把蚂蚁队长的台词和他的内心独白连起来吧！ </p> <!-- 连线题 --> <matching :rawData="rawData" :question="question" class="macthing" :primary-color="color" :bordercolor="'#fff'" > <matching :rawData="rawData" :question="question" class="macthing" :primary-color="color" :bordercolor="'#fff'"> </matching> </div> <!-- 此次为页脚部分（需要设置页码） --> <div class="page-footer"> <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" /> <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" /> <div class="page-footer-number-right">21</div> </div> </div> @@ -154,11 +113,7 @@ <div class="page-box" page="25"> <div v-if="showPageList.indexOf(25) > -1"> <h1> <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" /> <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" /> </h1> <img class="headerimg" src="../../assets/images/page5.png" alt="" /> <div class="bodystyle" style="margin-top: 3%"> @@ -167,25 +122,18 @@ <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /> </h3> <p class="text t-l"> <span class="hs1">◇</span >在《一块奶酪》的故事中，蚂蚁队长也起过贪心，但他最终成功克服了贪心，你认为他是怎么做到的呢？ <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6" style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')" @blur="handleBlur('one')" > <span class="hs1">◇</span>在《一块奶酪》的故事中，蚂蚁队长也起过贪心，但他最终成功克服了贪心，你认为他是怎么做到的呢？ <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6" style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')" @blur="handleBlur('one')"> </textarea> </p> <h3 class="lefth3" id="c026" style="margin-top: 7%"> <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /> </h3> <p class="text"> <span class="hs1">◇</span >阅读附录中的剧本选段5，为自己的表演设计动作吧！ <span class="hs1">◇</span>阅读附录中的剧本选段5，为自己的表演设计动作吧！ </p> <p class="center openImgBox"> <img class="img-e" alt="" src="../../assets/images/3-3.gif" /> @@ -193,11 +141,7 @@ </div> <!-- 此次为页脚部分（需要设置页码） --> <div class="page-footer"> <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" /> <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" /> <div class="page-footer-number-left">22</div> </div> </div> @@ -205,11 +149,7 @@ <div class="page-box" page="26"> <div v-if="showPageList.indexOf(26) > -1"> <h1> <img src="../../assets/images/unit3-header-img.png" alt="" style="width: 100%; height: auto" /> <img src="../../assets/images/unit3-header-img.png" alt="" style="width: 100%; height: auto" /> </h1> <div class="bodystyle" style="margin-top: 3%"> <h2 id="b014" class="problem">第四课 皆大欢喜</h2> @@ -217,95 +157,57 @@ <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /> </h3> <p class="text"> <span class="hs1">◇</span >请按照事件六要素的结构给大家分享一件快乐的事吧！ <span class="hs1">◇</span>请按照事件六要素的结构给大家分享一件快乐的事吧！ </p> <p class="text2"> 时间：<input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%" /> 时间：<input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%" /> </p> <p class="text2"> 地点：<input v-model="questionData.warnUp.two" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%" /> 地点：<input v-model="questionData.warnUp.two" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%" /> </p> <p class="text2"> 人物：<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%" /> 人物：<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 70%" /> </p> <p class="text2 t-l"> 起因： <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6" style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')" @blur="handleBlur('two')" > <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6" style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')" @blur="handleBlur('two')"> </textarea> </p> <p class="text2 t-l"> 经过： <textarea v-model="questionData.reading.three" placeholder="请输入内容" rows="6" style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'three' }" @focus="handleFocus('three')" @blur="handleBlur('three')" > <textarea v-model="questionData.reading.three" placeholder="请输入内容" rows="6" style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'three' }" @focus="handleFocus('three')" @blur="handleBlur('three')"> </textarea> </p> <p class="text2 t-l"> 结果： <textarea v-model="questionData.reading.four" placeholder="请输入内容" rows="6" style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'four' }" @focus="handleFocus('four')" @blur="handleBlur('four')" > <textarea v-model="questionData.reading.four" placeholder="请输入内容" rows="6" style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'four' }" @focus="handleFocus('four')" @blur="handleBlur('four')"> </textarea> </p> <p class="text t-l" style="margin-top: 7%"> <span class="hs1">◇</span >你有烦恼吗？说一说是什么，你是怎么处理它的？ <textarea v-model="questionData.reading.five" placeholder="请输入内容" rows="6" style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'five' }" @focus="handleFocus('five')" @blur="handleBlur('five')" > <span class="hs1">◇</span>你有烦恼吗？说一说是什么，你是怎么处理它的？ <textarea v-model="questionData.reading.five" placeholder="请输入内容" rows="6" style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'five' }" @focus="handleFocus('five')" @blur="handleBlur('five')"> </textarea> </p> </div> <!-- 此次为页脚部分（需要设置页码） --> <div class="page-footer"> <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" /> <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" /> <div class="page-footer-number-right">23</div> </div> </div> @@ -313,11 +215,7 @@ <div class="page-box" page="27"> <div v-if="showPageList.indexOf(27) > -1"> <h1> <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" /> <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" /> </h1> <img class="headerimg" src="../../assets/images/page5.png" alt="" /> <div class="bodystyle" style="margin-top: 3%"> @@ -325,20 +223,15 @@ <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /> </h3> <p class="text"> <span class="hs1">◇</span >运用重音、内心独白和动作设计等表现方式，将《一块奶酪》的故事表演出来吧！（剧本见附录） <span class="hs1">◇</span>运用重音、内心独白和动作设计等表现方式，将《一块奶酪》的故事表演出来吧！（剧本见附录） </p> <p class="center openImgBox"> <img class="img-e" alt="" src="../../assets/images/3-3.gif" /> <img class="img-a" alt="" src="../../assets/images/0028-1.jpg" /> </p> </div> <!-- 此次为页脚部分（需要设置页码） --> <div class="page-footer"> <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" /> <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" /> <div class="page-footer-number-left">24</div> </div> </div> @@ -346,11 +239,7 @@ <div class="page-box" page="28"> <div v-if="showPageList.indexOf(28) > -1"> <h1> <img src="../../assets/images/unit3-header-img.png" alt="" style="width: 100%; height: auto" /> <img src="../../assets/images/unit3-header-img.png" alt="" style="width: 100%; height: auto" /> </h1> <div class="bodystyle" style="margin-top: 3%"> <h2 id="b015" class="problem">单元活动任务</h2> @@ -360,12 +249,7 @@ <p class="text ends"> <span><span class="hs1">◇</span>喘气练习</span> <span> <audio :src="audioPathTwo" controls controlslist="noplaybackrate nodownload" class="audio" ></audio> <audio :src="audioPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"></audio> </span> </p> <p class="text"> @@ -374,39 +258,24 @@ <p class="text ends"> <span><span class="hs1">◇</span>“嘶”声练习</span> <span> <audio :src="audioPathThree" controls controlslist="noplaybackrate nodownload" class="audio" ></audio> <audio :src="audioPathThree" controls controlslist="noplaybackrate nodownload" class="audio"></audio> </span> </p> <p class="text">在“喘气练习”的基础上，发出“嘶”音，每组4短1长。</p> <p class="text ends"> <span><span class="hs1">◇</span>“嘟”音练习</span> <span> <audio :src="audioPathFour" controls controlslist="noplaybackrate nodownload" class="audio" ></audio> <audio :src="audioPathFour" controls controlslist="noplaybackrate nodownload" class="audio"></audio> </span> </p> <p class="text"> 平视前方，肩膀放松，双手自然下垂，双脚分开，与肩同宽。放松双唇，深吸气，吹出气流带动嘴唇抖动，发出“嘟”的声音，声音越长越好。 </p> <p class="text" style="text-align: left"> <span><span class="hs1">◇</span>“我们赞美长江”气声练</span> <span><span class="hs1">◇</span>“我们赞美长江”气声练习</span> <span class="text"> <audio :src="audioPathFive" controls controlslist="noplaybackrate nodownload" class="audio" ></audio ></span> <audio :src="audioPathFive" controls controlslist="noplaybackrate nodownload" class="audio"></audio></span> </p> <p class="text"> 平视前方，肩膀放松，双手自然下垂，双脚分开，与肩同宽。以说悄悄话的感觉，说出“我们赞美长江”，并逐步增加气声的力度，找到在舞台上说悄悄话的感觉。 @@ -414,11 +283,7 @@ </div> <!-- 此次为页脚部分（需要设置页码） --> <div class="page-footer"> <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" /> <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" /> <div class="page-footer-number-right">25</div> </div> </div> @@ -426,11 +291,7 @@ <div class="page-box" page="29"> <div v-if="showPageList.indexOf(29) > -1"> <h1> <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" /> <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" /> </h1> <img class="headerimg" src="../../assets/images/page5.png" alt="" /> <div class="bodystyle" style="margin-top: 3%"> @@ -438,52 +299,29 @@ <img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" /> </h3> <p class="text"> <span class="hs1">◇</span >劳动最光荣！请为家中长辈做一件力所能及的事情，用实际行动表达你的爱意！体验过程中要记住每一个动作的细节，再尝试以无实物表演的方式进行展示。 <span class="hs1">◇</span>劳动最光荣！请为家中长辈做一件力所能及的事情，用实际行动表达你的爱意！体验过程中要记住每一个动作的细节，再尝试以无实物表演的方式进行展示。 </p> <p class="center text"> <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls controlslist="nodownload" class="w100 video" style=" <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls controlslist="nodownload" class="w100 video" style=" margin-top: 40px; border-radius: 10px; border: 2px solid green; " ></video> "></video> </p> <p class="center videoname"> <span>视频：心有多大，舞台就有多大 </span> <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'" placement="top-start" > <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt="" class="collect-btn" @click="handleCollect('video')" /> <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'" placement="top-start"> <img :src="collectResourceList.findIndex(item => item.id == 'dd44a1e31b4304f50d10b2481a148411') > -1 ? collectCheck : collectImg" alt="" class="collect-btn" @click="handleCollect('video')" /> </el-tooltip> </p> </div> <!-- 此次为页脚部分（需要设置页码） --> <div class="page-footer"> <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" /> <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" /> <div class="page-footer-number-left">26</div> </div> </div> @@ -494,6 +332,7 @@ <script> import matching from "@/components/matching/matching.vue"; import { getResourcePath } from "@/assets/methods/resources"; import { getCollectResource, setCollectResource } from "@/assets/methods/resources"; export default { name: "chapterThree", components: { matching }, @@ -506,7 +345,7 @@ default: "red", }, }, mounted() { async mounted() { this.getVidoePath(); const bookQuestion = localStorage.getItem( "artAndDrama-book-question-three" @@ -514,6 +353,11 @@ if (bookQuestion) { this.questionData = JSON.parse(bookQuestion); } const data = localStorage.getItem("artAndDrama-chapter03-Data"); if (data) { this.chapterData = JSON.parse(data); } this.collectResourceList = await getCollectResource(this.config.activeBook.bookId) }, data() { return { @@ -527,6 +371,7 @@ audioPathFive: "", isFocused: null, // 用于跟踪textarea的聚焦状态 segments: [1, 2, 3, 4, 5], collectResourceList:[], color: "#fff", activeIndex: null, // 用于追踪当前活动的按钮索引 contents: [ @@ -694,7 +539,6 @@ this.isFocused = null; // 当textarea失去焦点时，设置为false }, setBookQuestion() { console.log("保存"); localStorage.setItem( "artAndDrama-book-question-three", JSON.stringify(this.questionData) @@ -708,15 +552,13 @@ }, handleChapterData() { localStorage.setItem( "math-chapterData", "artAndDrama-chapter03-Data", JSON.stringify(this.chapterData) ); }, handleCollect(type) { if (type == "img") { this.chapterData.isCollectImg = !this.chapterData.isCollectImg; } else if (type == "video") { this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo; if (type == "video") { this.handleCollectResource("dd44a1e31b4304f50d10b2481a148411","dd44a1e31b4304f50d10b2481a148411",'',"视频","bits",'视频：心有多大，舞台就有多大') } this.handleChapterData(); }, @@ -731,6 +573,25 @@ this.activeContent = this.contents[index]; } }, //资源收藏事件 handleCollectResource(id, md5, resourcePath, resourceType, source, resourceName) { let list = this.collectResourceList if (list.findIndex(item => item.id == id) > -1) { list = list.filter(item => item.id != id) } else { list.push({ id, md5, resourcePath, resourceType, source, resourceName, }) } this.collectResourceList = list setCollectResource(this.config.activeBook.bookId, this.collectResourceList) } }, }; </script> src/books/artAndDrama/view/components/chapter004.vue
@@ -133,7 +133,7 @@ <h3 class="lefth3" id="c038" style="margin-top: 7%;"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3> <p class="text"><span class="hs1">◇</span>邀请同伴共同完成《一块奶酪》的展演吧！</p> <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p> <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/0036-2.jpg" /></p> </div> <!-- 此次为页脚部分（需要设置页码） --> <div class="page-footer"> @@ -212,8 +212,8 @@ <span>视频：团结就是力量 </span> <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'" placement="top-start"> <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt="" class="collect-btn" @click="handleCollect('video')" /> <img :src="collectResourceList.findIndex(item => item.id == '691cbd2c13198d04afc7800d0f2cafb0') > -1 ? collectCheck : collectImg" alt="" class="collect-btn" @click="handleCollect('video')" /> </el-tooltip> </p> </div> @@ -229,6 +229,7 @@ <script> import { getResourcePath } from "@/assets/methods/resources"; import graffiti from '@/components/graffiti/index.vue' import { getCollectResource, setCollectResource } from "@/assets/methods/resources"; export default { name: "chapterFour", props: { @@ -238,12 +239,18 @@ }, components: { graffiti }, //在这里对调用的方法进行挂载 mounted() { async mounted() { this.getVidoePath(); const bookQuestion = localStorage.getItem("artAndDrama-book-question-four"); if (bookQuestion) { this.questionData = JSON.parse(bookQuestion); } const data = localStorage.getItem("artAndDrama-chapter04-Data"); if (data) { this.chapterData = JSON.parse(data); } this.collectResourceList = await getCollectResource(this.config.activeBook.bookId) }, data() { return { @@ -256,6 +263,7 @@ audioPathFour: "", audioPathFive: "", isFocused: null, // 用于跟踪textarea的聚焦状态 collectResourceList: [], chapterData: { isCollectImg: false, isCollectVideo: false, @@ -319,7 +327,6 @@ this.isFocused = null; // 当textarea失去焦点时，设置为false }, setBookQuestion() { console.log("保存"); localStorage.setItem( "artAndDrama-book-question-four", JSON.stringify(this.questionData) @@ -327,18 +334,34 @@ }, handleChapterData() { localStorage.setItem( "math-chapterData", "artAndDrama-chapter04-Data", JSON.stringify(this.chapterData) ); }, handleCollect(type) { if (type == "img") { this.chapterData.isCollectImg = !this.chapterData.isCollectImg; } else if (type == "video") { this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo; if (type == "video") { this.handleCollectResource("09de7704eeaaf3a210b8c6af0a94d545", "09de7704eeaaf3a210b8c6af0a94d545", '', "视频", "bits", '视频：团结就是力量') } this.handleChapterData(); }, //资源收藏事件 handleCollectResource(id, md5, resourcePath, resourceType, source, resourceName) { let list = this.collectResourceList if (list.findIndex(item => item.id == id) > -1) { list = list.filter(item => item.id != id) } else { list.push({ id, md5, resourcePath, resourceType, source, resourceName, }) } this.collectResourceList = list setCollectResource(this.config.activeBook.bookId, this.collectResourceList) } }, }; </script> src/books/artAndDrama/view/components/index.vue
@@ -159,8 +159,8 @@ }, 500); // 测试页面跳转 // setTimeout(() => { // this.gotoPage(4,26); setTimeout(() => { this.gotoPage(3,24); // setTimeout(() => { // this.renderSign("Highlight", { // id: "2ACA9359", @@ -188,7 +188,7 @@ // txt: " 运动系统是由骨、骨连结和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ", // txtIndex: 57 // }); // }, 500); }, 500); }, methods: { // setZoom1() { src/components/dropdown/index.vue
@@ -2,32 +2,17 @@ <div class="dropdown"> <div class="selected-option" > <div class="selected-values"> <span v-for="(option, index) in selectedOptions" :key="index" class="selected-value" > <span v-for="(option, index) in selectedOptions" :key="index" class="selected-value"> <span class="selected-value-txt">{{ option }}</span> <span class="delete" @click="removeOption(option)"> × </span> </span> </div> <input type="text" v-model="searchText" placeholder="请选择选项" @input="filterOptions" v-if="isShowSearch" /> <input type="text" v-model="searchText" placeholder="请选择选项" @input="filterOptions" v-if="isShowSearch" /> <span class="arrow" @click="toggleDropdown"></span> </div> <!-- <button class="confirm-button" @click="submitSelection">确认</button> --> <ul v-if="showDropdown" class="options-list"> <li v-for="option in filteredOptions" :key="option" @click="toggleOption(option)" > <li v-for="option in filteredOptions" :key="option" @click="toggleOption(option)"> <input type="checkbox" :value="option" :checked="isSelected(option)" /> <label>{{ option }}</label> </li> @@ -39,6 +24,9 @@ export default { props:{ options:{ type: Array }, value: { type:Array }, isShowSearch:{ @@ -54,6 +42,7 @@ searchText: "", // 过滤选项的搜索文本 // ... showConfirmButton: false, selected: this.value }; }, computed: { @@ -65,9 +54,16 @@ }, watch:{ value: { deep: true, // 深度监视(针对复杂类型) immediate: true, // 是否立刻执行一次handler handler(newValue) { this.selectedOptions = newValue } }, selectedOptions:{ handler(newValue) { console.log('选中项变化',newValue); this.$emit('changeDropdownData',newValue) } },deep:true @@ -92,8 +88,6 @@ } }, submitSelection() { // 在这里处理提交选项的逻辑 console.log("已选择的选项:", this.selectedOptions); // 重置选项并隐藏确认按钮 this.selectedOptions = []; this.showConfirmButton = false; @@ -107,8 +101,12 @@ //暴露 changeSelectData(value){ this.selectedOptions = value } }, handleChange(event) { // 当选中项变化时触发 // 通知父组件新的选中值 this.$emit('changeDropdownData', event.target.value); }, }, }; </script> @@ -127,6 +125,7 @@ right: -31%; top: -21%; } .dropdown { min-width: 200px; position: relative; @@ -163,6 +162,7 @@ margin-right: 4px; margin-bottom: 4px; } .selected-value .selected-value-txt { height: 24px; display: inline-block; @@ -171,6 +171,7 @@ white-space: nowrap; width: 80px; } .selected-value .delete { margin-left: 4px; cursor: pointer;
