闫增涛
2024-06-25 0e579505f189e885aa8e994db87217e087918899
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
<template>
    <div class="chapter" num="4">
        <div class="page-box" page="22">
            <div v-if="showPageList.indexOf(22) > -1">
                <h1 id="a004">
                    <!-- 这里的动图有问题,没有背景图片 -->
                    <img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
                    <audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
                </h1>
                <div class="bodystyle">
                    <div class="bk">
                        <div class="bj1">
                            <p class="left"><img class="img-gn" alt="" src="../../assets/images/dydd.jpg" /></p>
                        </div>
                        <p class="block" style="margin:  8% 5% 5% 7%">
                            每个人的心中都有一个舞台,演绎着生活的酸甜苦辣,记录着成长的点点滴滴。《一块奶酪》中的每只小蚂蚁也有很多心里话要表达,让我们一起演绎出来吧!</p>
                    </div>
                </div>
                <p><br /></p>
                <!-- 此次为页脚部分(需要设置页码) -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-right">19</div>
                </div>
            </div>
        </div>
        <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%;" />
                </h1>
                <img class="headerimg" src="../../assets/images/page5.png" alt="" />
                <div class="bodystyle" style="margin-top: 3%">
                    <h2 id="b011" class="problem">第一课 吹响劳动的集结号</h2>
                    <h3 class="lefth3" id="c021"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p class="text">寒来暑往,秋收冬藏。一年四季,劳碌奔忙。</p>
                    <p class="text">团结一心,吹响号角。幸福生活,劳动创造。</p>
                    <p class="text"><span class="hs1">◇</span>说一说你会做哪些家务?</p>
                    <p class="text"><span class="hs1">◇</span>和小伙伴讨论劳动在生活中的作用。</p>
                    <p class="text"><span class="hs1">◇</span>表演一种家务劳动,请小伙伴猜一猜。</p>
                    <h3 class="lefth3" id="c022" style="margin-top: 7%"><img class="img-gn1" alt=""
                            src="../../assets/images/czysj.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>邀请小伙伴分角色朗诵附录中的剧本选段1~2,重读加点文字。</p>
                    <p class="block3" style=""><span class="hs">剧本</span></p>
                    <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="">选段{{
                                segment }}</span>
                    </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" />
                    <div class="page-footer-number-left">20</div>
                </div>
            </div>
        </div>
        <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%" />
                </h1>
                <div class="bodystyle" style="margin-top: 3%;">
                    <h2 id="b012" class="problem">第二课 意外发生了!</h2>
                    <h3 class="lefth3" id="c023"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>当上半场比赛失利,中场休息时,你会怎么做?当别人夸赞你的时候,你会怎么做?请你和朋友一起演一演吧。</p>
                    <h3 class="lefth3" id="c024" style="margin-top: 7%;"><img class="img-gn1" alt=""
                            src="../../assets/images/czysj.jpg" /></h3>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-2.gif" /></p>
                    <p class="text"><span class="hs1">◇</span>请把蚂蚁队长的台词和他的内心独白连起来吧!</p>
                    <!-- 连线题 -->
                    <matching :rawData="rawData" :question="question" class="macthing" :primaryColor="'transparent'" :bordercolor="'transparent'">
                    </matching>
                </div>
                <!-- 此次为页脚部分(需要设置页码) -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-right">21</div>
                </div>
            </div>
        </div>
        <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" />
                </h1>
                <img class="headerimg" src="../../assets/images/page5.png" alt="" />
                <div class="bodystyle" style="margin-top: 3%;">
                    <h2 id="b013" class="problem">第三课 我该怎么办?</h2>
                    <h3 class="lefth3" id="c025"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>在《一块奶酪》的故事中,蚂蚁队长也起过贪心,但他最终成功克服了贪心,你认为他是怎么做到的呢?</p>
                    <p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18 "
                            @change="setBookQuestion" style="width: 90%" /></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,为自己的表演设计动作吧!</p>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/3-3.gif" /></p>
                </div>
                <!-- 此次为页脚部分(需要设置页码) -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-left">22</div>
                </div>
            </div>
        </div>
        <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" />
                </h1>
                <div class="bodystyle" style="margin-top: 3%;">
                    <h2 id="b014" class="problem">第四课 皆大欢喜</h2>
                    <h3 class="lefth3" id="c027"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>请按照事件六要素的结构给大家分享一件快乐的事吧!</p>
                    <p class="text2">时间:<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%" /></p>
                    <p class="text2">人物:<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text2">起因:<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text2">经过:<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text2">结果:<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text" style="margin-top: 7%;"><span class="hs1">◇</span>你有烦恼吗?说一说是什么,你是怎么处理它的?</p>
                    <p><input v-model="questionData.warnUp.enight" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 85%" /></p>
                </div>
                <!-- 此次为页脚部分(需要设置页码) -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-right">23</div>
                </div>
            </div>
        </div>
        <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" />
                </h1>
                <img class="headerimg" src="../../assets/images/page5.png" alt="" />
                <div class="bodystyle" style="margin-top: 3%;">
                    <h3 class="lefth3" id="c028"><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/3-3.gif" /></p>
                </div>
                <!-- 此次为页脚部分(需要设置页码) -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-left">24</div>
                </div>
            </div>
        </div>
        <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" />
                </h1>
                <div class="bodystyle" style="margin-top: 3%;">
                    <h2 id="b015" class="problem">单元活动任务</h2>
                    <h3 class="lefth3" id="c029"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>喘气练习</p>
                    <p class="text">平视前方,肩膀放松,双手自然下垂或叉腰,双脚分开,与肩同宽。模仿小狗喘气,感受腹部的“呼吸”状态,想象自己的腹部是一个气球,在吸气时腹部向外扩张,吐气时腹部向内收缩。
                    </p>
                    <p class="text"><span class="hs1">◇</span>“嘶”声练习</p>
                    <p class="text">在“喘气练习”的基础上,发出“嘶”音,每组4短1长。</p>
                    <p class="text"><span class="hs1">◇</span>“嘟”音练习</p>
                    <p class="text">平视前方,肩膀放松,双手自然下垂,双脚分开,与肩同宽。放松双唇,深吸气,吹出气流带动嘴唇抖动,发出“嘟”的声音,声音越长越好。</p>
                    <p class="text"><span class="hs1">◇</span>“我们赞美长江”气声练习</p>
                    <p class="text">平视前方,肩膀放松,双手自然下垂,双脚分开,与肩同宽。以说悄悄话的感觉,说出“我们赞美长江”,并逐步增加气声的力度,找到在舞台上说悄悄话的感觉。</p>
                </div>
                <!-- 此次为页脚部分(需要设置页码) -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-right">25</div>
                </div>
            </div>
        </div>
        <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" />
                </h1>
                <img class="headerimg" src="../../assets/images/page5.png" alt="" />
                <div class="bodystyle" style="margin-top: 3%">
                    <h3 class="lefth3" id="c030"><img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" /></h3>
                    <p class="text"><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" @play="videoPlay"
                            style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></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>
                    </p>
                </div>
                <!-- 此次为页脚部分(需要设置页码) -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                    <div class="page-footer-number-left">26</div>
                </div>
            </div>
        </div>
    </div>
</template>
 
<script>
import matching from "@/components/matching/matching.vue";
import { getResourcePath } from "@/assets/methods/resources";
export default {
    name: "chapterThree",
    components: { matching },
    props: {
        showPageList: {
            type: Array,
        },
        primaryColor: {
            type: String,
            default: "red",
        }
    },
    mounted() {
        this.getVidoePath();
        const bookQuestion = localStorage.getItem("artAndDrama-book-question-three");
        if (bookQuestion) {
            this.questionData = JSON.parse(bookQuestion);
        }
    },
    data() {
        return {
            collectImg: require("../../assets/images/icon/heart.png"),
            collectCheck: require("../../assets/images/icon/heart-check.png"),
            videoPathOne: "",
            auidoPathOne: "",
            segments: [1, 2, 3, 4, 5],
            activeIndex: null, // 用于追踪当前活动的按钮索引  
            contents: [ // 对应选段的内容,这里用字符串作为示例  
                ' <p class="block text">【起光,蚂蚁队长上场】</p><p class="block text">咻咻—</p><p class="block text">【蚂蚁队长吹响集合号,蚂蚁们迅速跑上场站好队形】</p><p class="block text">蚂蚁队长:<span class="un1">我宣布</span>!今天搬运粮食,只许<span class="un1">出力</span>,不许<span class="un1">偷嘴</span>。谁偷嘴就<span class="un1">罚谁</span>!</p><p class="block text">蚂蚁们:收到!</p><p class="block text">小蚂蚁:(嘀咕)要是偷嘴的<span class="un1">是您呢</span>?</p><p class="block text">蚂蚁队长:(义正词严)<span class="un1">照样受罚</span>!</p><p class="block text">【蚂蚁们鼓掌】</p><p class="block text">蚂蚁队长:稍息!立正!寻找食物!出发!</p><p class="block text">【蚂蚁们争先恐后四处寻食】</p><p class="block text">大头蚂蚁:(突然)<span class="un1">报告</span>!</p><p class="block text">蚂蚁队长:怎么了?</p><p class="block text">大头蚂蚁:(指着)这里有一块大奶酪!</p><p class="block text">【一块奶酪(演员)趴在角落处】</p><p class="block text">蚂蚁队长:(兴奋)哦?</p><p class="block text">【蚂蚁队长被奶酪的香味迷住,转起了圈圈】</p><p class="block text">【音乐起,蚂蚁队长和奶酪人跳起了舞蹈】</p><p class="block text">蚂蚁队长:(陶醉)奶酪……奶酪……填饱肚子不再呱呱叫。奶酪……奶酪……吃下一口一声美妙……</p><p class="block text">【蚂蚁们停下手里的搬运工作,看着队长】</p><p class="block text">大头蚂蚁:(大喊)队长!</p><p class="block text">【蚂蚁队长被吓醒,奶酪人趴在地上】</p><p class="block text">小眼镜蚂蚁:队长!队长!<span class="un1">快点搬运吧</span>!这么<span class="un1">热</span>的天,再不出发,奶酪就<span class="un1">化</span>啦!</p><p class="block text">蚂蚁队长:说得对!我现在就<span class="un1">搬</span>!</p><p class="block text">【蚂蚁队长走到奶酪面前使劲抬】</p><p class="block text">蚂蚁队长:哎哟,哎哟,哎哟哟。</p><p class="block text">【蚂蚁队长一次也没抬起来】</p>',
                ' <p class="block text">蚂蚁队长:(起身)<span class="un1">我决定了</span>!大家<span class="un1">一起搬</span>!这块奶酪以我为首,搬运的路上<span class="un1">不许偷吃</span>!</p><p class="block text">蚂蚁们:<span class="un1">是</span>!</p><p class="block text">【蚂蚁们迅速围成一圈,蚂蚁队长站在奶酪最前面】</p><p class="block text">蚂蚁队长:听我口令!3!2!1!抬!</p>                  <p class="block text">【奶酪被抬起】</p><p class="block text">大头蚂蚁:哇!这块奶酪<span class="un1">好香噢</span>!</p><p class="block text">小眼镜蚂蚁:我想<span class="un1">咬</span>一口!</p><p class="block text">小蚂蚁:如果能<span class="un1">舔一下</span>就好了!</p><p class="block text">蚂蚁小妹:我的口水流出来了!</p><p class="block text">蚂蚁队长:不许瞎想!不许偷吃!<span class="un1">出发</span>!</p><p class="block text">【音乐起,蚂蚁们抬着奶酪向前走着】</p><p class="block text">蚂蚁们:奶酪!奶酪!我们的奶酪!奶酪!奶酪!我们一起分享。</p><p class="block text">【蚂蚁们陶醉中】</p>',
                ' <p class="block text">嘭—</p><p class="block text">【蚂蚁们用劲过猛,奶酪的一个角掉了】</p><p class="block text">蚂蚁小妹:<span class="un1">啊</span>!队长!奶酪的角<span class="un1">掉了</span>!</p> <p class="block text">【大家看到掉在地上的奶酪】</p><p class="block text">蚂蚁们:哇哦!</p><p class="block text">蚂蚁队长:等等!</p><p class="block text">【舞台变光,演员动作定格】</p><p class="block text">蚂蚁队长:掉了<span class="un1">一个角</span>,这该<span class="un1">怎么办</span>!<span class="un1">丢掉</span>,实在<span class="un1">太可惜</span>!<span class="un1">趁机吃掉</span>,又要犯不许偷嘴的禁令。怎么办呢?有个办法!我要是<span class="un1">偷嘴</span>谁也<span class="un1">看不见</span>,<span class="un1">这样</span>不就行啦!大家听好啦!</p>',
                ' <p class="block text">【舞台变光,演员立正站好】</p><p class="block text">蚂蚁队长:休息一会儿!</p><p class="block text">蚂蚁小妹:<span class="un1">为什么</span>要休息呀?</p><p class="block text">小眼镜蚂蚁:队长!这块掉在地上的奶酪<span class="un1">怎么办呀</span>?</p><p class="block text">大头蚂蚁:我们要不把它<span class="un1">分了吧</span>!</p><p class="block text">蚂蚁队长:听我说!<span class="un1">休息</span>!<span class="un1">立刻休息</span>!大家搬运太辛苦啦!分散开,哪里凉快就到哪里休息!</p><p class="block text">【大家依旧不动】</p><p class="block text">蚂蚁队长:全体都有!稍息!立正!向后—转!齐步—走!</p><p class="block text">蚂蚁队长:立—定!原地休息!</p><p class="block text">【蚂蚁们跟随口令消失在草丛里】</p>', 
                ' <p class="block text">【蚂蚁队长向草丛里望去,确定没有声响】</p><p class="block text">蚂蚁队长:(小声)嘿嘿嘿,吃掉后就说被风刮走或者就说被老鹰吃掉就好啦!</p><p class="block text">【蚂蚁队长低下头,嗅了一下奶酪】</p><p class="block text">蚂蚁队长:味道<span class="un1">真</span>香!</p><p class="block text">【蚂蚁队长的手伸向奶酪渣,突然,奶酪人站了起来】</p><p class="block text">【变光】</p><p class="block text">奶酪人:不许吃!</p><p class="block text">蚂蚁队长:(吓了一跳)你你你!你怎么<span class="un1">站</span>起来啦!</p><p class="block text">奶酪人:我<span class="un1">实在</span>看不下去啦!</p><p class="block text">蚂蚁队长:(害怕)救命哇!奶酪<span class="un1">活</span>啦!</p><p class="block text">【蚂蚁队长跑】</p><p class="block text">奶酪人:<span class="un1">站住</span>!</p><p class="block text">蚂蚁队长:你要干什么?</p><p class="block text">奶酪人:<span class="un1">这块</span>,<span class="un1">你不能吃</span>!</p><p class="block text">蚂蚁队长:为什么?</p><p class="block text">奶酪人:<span class="un1">第一</span>!<span class="un1">你</span>定的规矩,今天搬运中,<span class="un1">不许偷吃</span>!如果<span class="un1">你</span>做不到,你就<span class="un1">不能要求别人</span>!<span class="un1">第二</span>!你是<span class="un1">蚂蚁队长</span>,大家选你当队长,是对你的<span class="un1">信任</span>和<span class="un1">尊重</span>!你却背着大家<span class="un1">偷吃</span>!<span class="un1">第三</span>!<span class="un1">诚实守信</span>是美德,你吃掉奶酪要<span class="un1">撒谎</span>,撒了<span class="un1">一个</span>谎就要用<span class="un1">无数</span>的谎来圆第一个谎,最后<span class="un1">还是</span>会被发现!</p><p class="block text">蚂蚁队长:(低头)我不吃了,我知道<span class="un1">错了</span>……可是,这掉在地上的奶酪怎么办呢?</p><p class="block text">奶酪人:(想了想)<span class="un1">有办法</span>!你可以选择大家<span class="un1">一起分</span>,也可以选择给年龄最小的蚂蚁吃!</p><p class="block text">蚂蚁队长:<span class="un1">好主意</span>!我这就问问大家,谢谢你!</p><p class="block text">【变光,奶酪慢慢地躺在地上】</p><p class="block text">蚂蚁队长:(喊)<span class="un1">注意啦</span>!全体都有!稍息!立正!</p><p class="block text">向后转!齐步走!</p><p class="block text">【蚂蚁们由四面八方走回来】</p><p class="block text">蚂蚁队长:大家休息好啦!我有一个<span class="un1">决定</span>!</p><p class="block text">蚂蚁们:什么决定?</p><p class="block text">蚂蚁队长:这点儿奶酪渣是刚才弄掉的,丢了可惜,(指向小蚂蚁)你是我们中年龄最小的,<span class="un1">你</span>吃掉它吧!</p><p class="block text">【蚂蚁们鼓掌】</p><p class="block text">【音乐起,大家劲儿比刚才更足,抬起奶酪向山洞走去】</p><p class="block text">【收光】</p>'
            ],
            activeContent: '', // 当前显示的HTML内容 
            chapterData: {
                isCollectImg: false,
                isCollectVideo: false,
                txtOne: "",
                txtTwo: "",
            },
            rawData: {
                left: [
                    {
                        oldId: "FB34",
                        txt: "“掉了一个角,这该怎么办!”",
                    },
                    {
                        oldId: "64D6",
                        txt: "“丢掉,实在太可惜!”",
                    },
                    {
                        oldId: "2ED4",
                        txt: "“我要是偷嘴谁也看不见。”",
                    },
                ],
                right: [
                    {
                        oldId: "64D6",
                        txt: "不能丢掉啊,如果能给我吃就太好了!",
                    },
                    {
                        oldId: "2ED4",
                        txt: "要不我把奶酪偷偷吃了吧。",
                    },
                    {
                        oldId: "FB34",
                        txt: "好可惜啊,这么美味的奶酪!",
                    },
                ],
            },
            question: {
                KnowledgePoint: "123",
                analysis: "123",
                answer: [
                    {
                        id: "FB34",
                        linkValue: "好可惜啊,这么美味的奶酪!",
                        value: "“掉了一个角,这该怎么办!”",
                    },
                    {
                        id: "64D6",
                        linkValue: "不能丢掉啊,如果能给我吃就太好了!",
                        value: "“丢掉,实在太可惜!”",
                    },
                    {
                        id: "2ED4",
                        linkValue: "要不我把奶酪偷偷吃了吧。",
                        value: "“我要是偷嘴谁也看不见。”",
                    },
                ],
                optionStyle: undefined,
                id: 489306,
                options: {
                    linkValues: [
                        {
                            oldId: "64D6",
                            txt: "不能丢掉啊,如果能给我吃就太好了!",
                        },
                        {
                            oldId: "2ED4",
                            txt: "要不我把奶酪偷偷吃了吧。",
                        },
                        {
                            oldId: "FB34",
                            txt: "好可惜啊,这么美味的奶酪!",
                        },],
                    values: [
                        {
                            oldId: "FB34",
                            txt: "“掉了一个角,这该怎么办!”",
                        },
                        {
                            oldId: "64D6",
                            txt: "“丢掉,实在太可惜!”",
                        },
                        {
                            oldId: "2ED4",
                            txt: "“我要是偷嘴谁也看不见。”",
                        },
                    ],
                },
                questionType: "matching",
                stem: {
                    stemTxt: "按顺序连线",
                },
                stemStyle: undefined,
                titleDescription: "1",
                userChoise: [],
                value: [],
                answerImg: require("../../assets/images/matching-two.png"),
            },
            questionData: {
                warnUp: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                    seven: "",
                    enight: "",
                },
                reading: {
                    one: "",
                    two: "",
                },
                table: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                    seven: "",
                    enight: "",
                    nine: "",
                },
            },
        };
    },
    methods: {
        //视频和音频的MD5地址
        async getVidoePath() {
            // 视频Md5地址
            this.videoPathOne = await getResourcePath(
                "dd44a1e31b4304f50d10b2481a148411"
            );
            // 音频Md5地址
            // this.auidoPathOne = await getResourcePath(
            //   "2c5f6c69b0f9f7a3c03e473cb8c977f5"
            // );
 
        },
        setBookQuestion() {
            console.log("保存");
            localStorage.setItem(
                "artAndDrama-book-question-three",
                JSON.stringify(this.questionData)
            );
        },
        audioPlay(e) {
            this.$emit('closeAudio', e.srcElement.currentSrc)
        },
        videoPlay(e) {
            this.$emit('closeVideo', e.srcElement.currentSrc)
        },
        handleChapterData() {
            localStorage.setItem(
                "math-chapterData",
                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;
            }
            this.handleChapterData();
        },
        showContent(index) {
            // 如果当前激活的索引和点击的索引相同,则隐藏内容  
            if (this.activeIndex === index) {
                this.activeIndex = null;
                this.activeContent = '';
            } else {
                // 否则显示对应索引的内容  
                this.activeIndex = index;
                this.activeContent = this.contents[index];
            }
        }
    },
};
</script>
 
<style lang="less" scoped>
.w70 {
    width: 78%;
}
 
.fw-400 {
    font-weight: 400 !important;
}
 
.fz-26 {
    font-size: 26px !important;
}
 
.cover-img {
    position: absolute;
    top: 33%;
    left: 23%;
}
 
.division-line {
    width: 2px;
    height: 100%;
    background-color: red;
}
 
.macthing {
    background-color: rgb(188, 220, 164);
    padding: 3% 0;
    margin: 0% 8%;
}
.content-wrapper{
    border: 1px solid black;
    border-radius: 10px;
}
</style>