From fe07e8a02cb41daac4d34562474b56dec5ab3efd Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期四, 06 六月 2024 11:57:40 +0800 Subject: [PATCH] 音频小窗 --- src/books/English/view/components/chapter001.vue | 54 ++++++++++++++++++++++++++++++++++++------------------ 1 files changed, 36 insertions(+), 18 deletions(-) diff --git a/src/books/English/view/components/chapter001.vue b/src/books/English/view/components/chapter001.vue index 4a537d1..979cc6b 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" @play="audioPlay"></audio> </h3> <p> <b @@ -514,15 +514,19 @@ corresponding descriptions.</b > </p> - <p class="center"> + <!-- <p class="center"> <img class="img-0" alt="" src="../../assets/images/0013-3.jpg" /> - </p> - <!-- <div> - <matching :rawData="rawData" :item="question" :value="value"></matching> - </div> --> + </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" @play="audioPlay"></audio> </h3> <p> 1.How was Chinese culture introduced to the world in ancient @@ -731,6 +735,8 @@ :src="resource.readingTwo" controls style="margin-left: 10px" + class="audio" + @play="audioPlay" ></audio> <p>wonderland /藞w蕦nd蓹l忙nd/ <i>n.</i> 鏈夎澶氬濡欎簨鐗╃殑鍦版柟</p> <div class="bkbj"> @@ -2331,19 +2337,19 @@ left: [ { oldId: "FB34", - txt: "Silk", + txt: "Martin銆�銆�銆�銆�Silk", }, { oldId: "64D6", - txt: "The Great Wall", + txt: "Jessica銆�銆�The Great Wall", }, { oldId: "2ED4", - txt: "Chinese Food", + txt: "Soren銆�銆�Chinese Food", }, { oldId: "44DE", - txt: "Chinese Tea", + txt: "Chinese銆�銆�銆�銆�Tea", }, ], right: [ @@ -2382,12 +2388,12 @@ }, { id: "2ED4", - linkValue: "C", + linkValue: "It is very delicious and I like the hot and spicy Sichuan lavor hest.", value: "Chinese Food", }, { id: "44DE", - linkValue: "D", + linkValue: "It was first discovered and drank in China and my favorileLongjing tca is praduced near the West Lake in Hangzhou.", value: "Chinese Tea", }, ], @@ -2400,6 +2406,10 @@ 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.", }, @@ -2407,15 +2417,12 @@ oldId: "2ED4", txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.", }, - { - oldId: "44DE", - txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.", - }, + ], values: [ { oldId: "FB34", - txt: "Silk", + txt: "Martin Silk", }, { oldId: "64D6", @@ -2439,6 +2446,7 @@ titleDescription: "1", userChoise: [], value: [], + answerImg:require("@/books/English/assets/images/matching-one.png") }, questionData: { warnUp: { @@ -2734,6 +2742,9 @@ saveData() { console.log(this.testData); }, + audioPlay() { + this.$emit("closeMiniAudio") + } }, }; </script> @@ -2794,4 +2805,11 @@ select { height: 24px; } +.mini-audio { + width: 200px; + height: 200px; + position: fixed; + right:0; + background-color: red; +} </style> -- Gitblit v1.9.1