user1
2024-06-14 88c89a86c370f9824e975d8958bfd057013aa9fd
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
<template>
    <div class="chapter" num="5">
        <div class="page-box" page="30">
            <div v-if="showPageList.indexOf(30) > -1">
                <h1 id="a004">
                    <!-- 这里的动图有问题,没有背景图片 -->
                    <img class="img-0" alt="" src="../../assets/images/dy4.jpg" />
                    <audio :src="auidoPathOne" class="audio" controls></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>在戏剧演出中,除了舞台上的演员,导演、灯光、造型等幕后人员也发挥着重要的作用。本单元让我们从台前走进幕后,向默默奉献的工作人员致敬!</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">27</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="31">
            <div v-if="showPageList.indexOf(31) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <img src="../../assets/images/page5.png" alt="" />
                    <h2 id="b016">第一课 一模一样</h2>
                    <h3 class="lefth3" id="c031"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p><span class="hs1">◇</span>以小组为单位围成一圈,面朝圈外蹲下,相邻两人互挎手臂,组员同时站起来,看看哪个组最快!</p>
                    <p><span class="hs1">◇</span>说一说:快速站起来的秘诀是什么?</p>
                    <p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 70%"/></p>
                    <h3 class="lefth3" id="c032"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>以小组为单位,表演以下场景,注意保持动作一致哦。</p>
                    <p>蚂蚁队长吹响集合号,蚂蚁们迅速跑上场站好队形。</p>
                    <p>蚂蚁们抬着奶酪向前走着。</p>
                    <p>蚂蚁们跟随蚂蚁队长的口令消失在草丛里。</p>
                    <p>蚂蚁们由四面八方走回来。</p>
                    <p>蚂蚁们劲儿比刚才更足,抬起奶酪向山洞走去。</p>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-1.gif" /></p>
                </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-left">28</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="32">
            <div v-if="showPageList.indexOf(32) > -1">
                <h1>
                    <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
                </h1>
                <div class="bodystyle">
                    <h2 id="b017">第二课 造型变变变</h2>
                    <h3 class="lefth3" id="c033"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p><span class="hs1">◇</span>春天来了,春风吹过,柳树发芽了,迎春花开了,小燕子在天空自由地飞翔。一切都是那么生机勃勃。请为“春天”涂上你喜欢的颜色。</p>
                    <!-- 图片缺失 -->
                    <!-- <p class="center"><img class="img-e" alt="" src="./../assets/images/0033-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-right">29</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="33">
            <div v-if="showPageList.indexOf(33) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <h3 class="lefth3" id="c034"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>动动手,为《一块奶酪》中的蚂蚁角色设计简单的服装吧!</p>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.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">30</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="34">
            <div v-if="showPageList.indexOf(34) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <img src="../../assets/images/page5.png" alt="" />
                    <h2 id="b018">第三课 变废为宝</h2>
                    <h3 class="lefth3" id="c035"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p><span class="hs1">◇</span>以小组为单位,头顶纸杯,腿夹报纸,进行夹纸运杯游戏!</p>
                    <h3 class="lefth3" id="c036"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>请根据《一块奶酪》的剧本,列出演出中需要的道具清单,请按照清单,利用你收集的旧物制作道具吧!</p>
                    <p class="center"><img class="img-e" alt="" src="../../assets/images/0035-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-right">31</div>
                </div>
            </div>
        </div>
        <div class="page-box" page="35">
            <div v-if="showPageList.indexOf(35) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <img src="../../assets/images/page5.png" alt="" />
                    <h2 id="b019">第四课 奇妙的舞台</h2>
                    <h3 class="lefth3" id="c037"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p><span class="hs1">◇</span>请你试着模拟演员候场、谢幕,舞台美术工作人员进行幕后准备的场景。</p>
                    <p class="center"><img class="img-e" alt="" src="../../assets/images/0036-1.jpg" /></p>
                    <h3 class="lefth3" id="c038"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>邀请同伴共同完成《一块奶酪》的展演吧!</p>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p>
                </div>
            </div>
            <!-- 此次为页脚部分(需要设置页码) -->
            <div class="page-footer">
                <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                <div class="page-footer-number-left">32</div>
            </div>
        </div>
        <div class="page-box" page="36">
            <div v-if="showPageList.indexOf(36) > -1">
                <h1>
                    <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <h2 id="b020">单元活动任务</h2>
                    <h3 class="lefth3" id="c039"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
                    <p class="center"><span class="hs">形体操练习</span></p>
                    <p><span class="hs1">◇</span>头部运动</p>
                    <p>第1个八拍:右手越过头顶摸左耳,向右轻轻压头部。</p>
                    <p>第2个八拍:左手越过头顶摸右耳,向左轻轻压头部。</p>
                    <p>第3个八拍:头部顺时针转一圈。</p>
                    <p>第4个八拍:头部逆时针转一圈。</p>
                    <p><span class="hs1">◇</span>开肩练习</p>
                    <p>平视前方,肩膀放松,双手自然下垂,双脚打开,与肩同宽。</p>
                    <p>第1个八拍:第1-4拍手肘内侧向外转动,带动 双肩打开;第5-8拍手肘内侧向内收回,后背拱起,带动双肩内扣。</p>
                    <p>第2至第4个八拍:重复第1个八拍的动作。</p>
                    <p><span class="hs1">◇</span>提沉肩运动</p>
                    <p>平视前方,肩膀放松,双手自然下垂,双脚打开,与肩同宽。</p>
                </div>
            </div>
            <!-- 此次为页脚部分(需要设置页码) -->
            <div class="page-footer">
                <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                <div class="page-footer-number-right">33</div>
            </div>
        </div>
        <div class="page-box" page="37">
            <div v-if="showPageList.indexOf(37) > -1">
                <h1>
                    <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <img src="../../assets/images/page5.png" alt="" />
                    <p>第1至第2个八拍:双手下垂,手心向下,双肩上提再沉下,两拍一动。</p>
                    <p>第3至第4个八拍:双手下垂,手心向下,左右肩膀依次上提再沉下,一拍一动。</p>
                    <p><span class="hs1">◇</span>伸展运动</p>
                    <p>身体放松,膝盖微屈,上身自然弯曲下沉,手臂自然下垂。</p>
                    <p>第1个八拍:第1-7拍身体直起,双臂举起,踮起脚尖;第8拍还原初始状态。</p>
                    <p>第2至第4个八拍:重复第1个八拍的动作。</p>
                    <h3 class="lefth3" id="c040"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>写一篇排演总结,分享学习经验和感受!</p>
                    <p class="center">
                        <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"
                            style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
                    <h2>视频: 团结就是力量</h2>
                    </p>
                </div>
            </div>
            <!-- 此次为页脚部分(需要设置页码) -->
            <div class="page-footer">
                <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
                <div class="page-footer-number-left">34</div>
            </div>
        </div>
    </div>
</template>
 
<script>
import { getResourcePath } from "@/assets/methods/resources";
export default {
    name: "chapterFour",
    props: {
        showPageList: {
            type: Array,
        },
 
    },
    //在这里对调用的方法进行挂载
    mounted() {
        this.getVidoePath();
        const bookQuestion = localStorage.getItem("artAndDrama-book-question-four");
        if (bookQuestion) {
            this.questionData = JSON.parse(bookQuestion);
        }
    },
    data() {
        return {
            videoPathOne: "",
            auidoPathOne: "",
            questionData: {
                warnUp: {
                    one: "",
     
                },
                reading: {
                    one: "",
                    two: "",
                },
                table: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                    seven: "",
                    enight: "",
                    nine: "",
                },
            },
        };
    },
    methods: {
        //视频和音频的MD5地址
        async getVidoePath() {
            this.videoPathOne = await getResourcePath(
                "09de7704eeaaf3a210b8c6af0a94d545"
            );
            // this.auidoPathOne = await getResourcePath(
            //   "2c5f6c69b0f9f7a3c03e473cb8c977f5"
            // );
        },
        setBookQuestion() {
            console.log("保存");
            localStorage.setItem(
                "artAndDrama-book-question-four",
                JSON.stringify(this.questionData)
            );
        },
    },
};
</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: 5% 0%;
}
</style>