user1
2024-06-17 f99d327dd2a9923c511373e76eef533457e4af32
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
<template>
  <div class="chapter" num="3">
    <div class="page-box" page="14">
      <div v-if="showPageList.indexOf(14) > -1">
        <h1 id="a004">
          <img class="img-0" alt="" src="../../assets/images/dy2.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">
              戏剧表演中的动作、体态、眼神、声音在塑造角色时起到了重要的作用。本单元我们将继续学习《一块奶酪》的故事,并以偶剧的形式进行表演。
            </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">11</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="15">
      <div v-if="showPageList.indexOf(15) > -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">
          <h2 id="b006">第一课 五官的力量</h2>
          <h3 class="lefth3" id="c011">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p><span class="hs1">◇</span>我是小画家</p>
          <p>保持头部不动,试着用眼神画出下面的图案吧!</p>
          <p class="center">
            <img class="img-e" alt="" src="../../assets/images/0016-1.jpg" />
          </p>
          <p><span class="hs1">◇</span>嗅觉大冒险</p>
          <p>
            你最爱吃的食物是 <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 10%" />。当闻到它的味道时,你会做出什么表情呢?
          </p>
          <p>
            你最不爱吃的食物是 <input v-model="questionData.warnUp.two" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 10%"/>。当闻到它的味道时,你会做出什么表情呢?
          </p>
          <h3 class="lefth3 openImgBox" id="c012">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <p>
            <span class="hs1">◇</span>以小组为单位,使用手偶道具表演附录中的剧本选段2。
          </p>
          <p class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/2-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">12</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="16">
      <div v-if="showPageList.indexOf(16) > -1">
        <h1>
          <img src="../../assets/images/unit2-header-img.png" alt="" style="height: auto; width: 100%" />
        </h1>
        <div class="bodystyle">
          <h2 id="b007">第二课 明察秋毫</h2>
          <h3 class="lefth3" id="c013"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
          <p><span class="hs1">◇</span>我们的世界五彩斑斓。请你填一填,提到这些颜色,你想到了哪些事物?</p>
          <p>黄色:柠檬、<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 15%"/>、<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 15%"/>。</p>
          <p>红色:鞭炮、<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 15%"/>、<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 15%"/>。</p>
          <p>绿色:叶子、<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 15%"/>、<input v-model="questionData.warnUp.eight" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 15%"/>。</p>
          <p>黑色:黑板、<input v-model="questionData.warnUp.nine" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 15%"/>、<input v-model="questionData.warnUp.ten" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 15%"/>。</p>
          <p>蓝色:大海、<input v-model="questionData.warnUp.eleven" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 15%"/>、<input v-model="questionData.warnUp.twelve" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 15%"/>。</p>
          <h3 class="lefth3" id="c014"><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/2-2.gif" /></p>
          <p>蚂蚁队长走路昂首挺胸、步伐坚定,它是一只(  )蚂蚁;小蚂蚁走起路来小心翼翼,眼神飘忽不定,它是一只(  )蚂蚁;蚂蚁小妹面带微笑,时刻愿意帮助大家,它是一只(  )蚂蚁。</p>
          <p>A.胆小的</p>
          <p>B.善良的</p>
          <p>C.沉稳的</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">13</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="17">
      <div v-if="showPageList.indexOf(17) > -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">
          <h2 id="b008">第三课 闻声识人</h2>
          <h3 class="lefth3" id="c015"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
          <p>常言道:良言一句三冬暖,恶语伤人六月寒。语言在人与人的交往中起着重要的作用,有着无穷的力量。</p>
          <p><span class="hs1">◇</span>如果朋友心情不好,你该怎么安慰他/她呢?</p>
          <p>“<input v-model="questionData.warnUp.thirteen" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 80%"/>。”</p>
          <p><span class="hs1">◇</span>如果你邀请好朋友来家里做客,你该说什么来欢迎他/她呢?</p>
          <p>“<input v-model="questionData.warnUp.fourteen" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 80%"/>。”</p>
          <h3 class="lefth3" id="c016"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
          <p><span class="hs1">◇</span>请根据提示读出句子,注意声音和语气的变化。</p>
          <p><span class="hs">这一大块奶酪都是我的了!</span>(一只狡猾的蚂蚁,想要把奶酪偷偷地占为己有)</p>
          <p><span class="hs">这一大块奶酪都是我的了!</span>(一只善良的蚂蚁,在帮助他人后得到了奖励)</p>
          <p><span class="hs">这块奶酪太沉了,我们休息一下吧!</span>(严肃的蚂蚁队长,向队伍发出命令)</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">14</div>
        </div>
      </div>
    </div>
    <div class="page-box" page="18">
      <div v-if="showPageList.indexOf(18) > -1">
        <h1>
          <img src="../../assets/images/unit2-header-img.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <p><span class="hs">这块奶酪太沉了,我们休息一下吧!</span>(一只弱小的蚂蚁,在向蚂蚁队长请求休息)</p>
          <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/2-3.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-right">15</div>
      </div>
    </div>
    <div class="page-box" page="19">
      <div v-if="showPageList.indexOf(19) > -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">
          <h2 id="b009">第四课 真听真看真感受</h2>
          <h3 class="lefth3" id="c017"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
          <p>待人接物有礼有节、谦卑恭敬,在让他人感到如沐春风的同时,也会让自己受到他人的尊重和理解。请说一说,在下面这些场景中你应该如何做?</p>
          <p><span class="hs1">◇</span>你看到妈妈的水杯没水了。</p>
          <p><span class="hs1">◇</span>电梯里,你站在最前排,后面的人需要下电梯。</p>
          <h3 class="lefth3" id="c018"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
          <p>你知道吗?无实物训练是一种训练演员的有效方法,不仅能够培养演员良好的想象能力,更能够培养其行动的逻辑性和情景适应性,最终提高其塑造人物形象的能力。</p>
          <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/2-4.gif" /></p>
          <p><span class="hs1">◇</span>请试着用无实物表演的方式把下面的情景表演出来吧!</p>
          <p class="center"><img class="img-0" alt="" src="../../assets/images/0020-2.jpg" /></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">16</div>
      </div>
    </div>
    <div class="page-box" page="20">
      <div v-if="showPageList.indexOf(20) > -1">
        <h1>
          <img src="../../assets/images/unit2-header-img.png" alt="" style="width: 100%; height: auto" />
        </h1>
        <div class="bodystyle">
          <h2 id="b010">单元活动任务</h2>
          <h3 class="lefth3" id="c019"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
          <p><span class="hs1">◇</span>吹纸练习</p>
          <p class="center"><img class="img-e" alt="" src="../../assets/images/0021-1.jpg" /></p>
          <p>找一张纸巾,将它按在墙上。移开双手,努力用气息将纸“钉”在墙面上,不要让它向下滑落。</p>
          <p><span class="hs1">◇</span>吹笔练习</p>
          <p>将一支笔立于桌面,看看你能不能用一口气将它吹倒。</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">17</div>
      </div>
    </div>
    <div class="page-box" page="21">
      <div v-if="showPageList.indexOf(21) > -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">
          <p><span class="hs1">◇</span>吹乒乓球练习</p>
          <p>用气息将桌面上的乒乓球从“起点”运送至“终点”,运送过程中避免乒乓球触碰障碍物。</p>
          <h3 class="lefth3" id="c020"><img class="img-gn1" alt="" src="../../assets/images/tzyys.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">18</div>
      </div>
    </div>
  </div>
</template>
 
<script>
 
import { getResourcePath } from "@/assets/methods/resources";
export default {
  name: "chapterTwo",
  props: {
    showPageList: {
      type: Array,
    },
  },
  //在这里对调用的方法进行挂载
  mounted() {
    this.getVidoePath();
    const bookQuestion = localStorage.getItem("artAndDrama-book-question-two");
    if (bookQuestion) {
      this.questionData = JSON.parse(bookQuestion);
    }
  },
  data() {
    return {
      videoPathOne: "",
      auidoPathOne: "",
      questionData: {
        warnUp: {
          one: "",
          two: "",
          three: "",
          four: "",
          five: "",
          six: "",
          seven:"",
          eight:"",
          nine:"",
          ten:"",
          eleven:"",
          twelve:"",
          thirteen:"",
          fourteen:"",
        },
        reading: {
          one: "",
          two: "",
        },
        table: {
          one: "",
          two: "",
          three: "",
          four: "",
          five: "",
          six: "",
          seven: "",
          enight: "",
          nine: "",
        },
      },
    };
  },
 
 
  methods: {
    //视频和音频的MD5地址
    async getVidoePath() {
      this.videoPathOne = await getResourcePath(
        "a3c9b55ac8227e4c885384ff2fc6c0e7"
      );
      // this.auidoPathOne = await getResourcePath(
      //   "2c5f6c69b0f9f7a3c03e473cb8c977f5"
      // );
    },
    setBookQuestion() {
      console.log("保存");
      localStorage.setItem(
        "artAndDrama-book-question-two",
        JSON.stringify(this.questionData)
      );
    },
    audioPlay(e) {
      this.$emit('closeAudio',e.srcElement.currentSrc)
    }
  },
};
</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;
}
</style>