<template>
|
<div class="chapter" num="6">
|
<div class="page-box" page="20" style="min-height: auto">
|
<div v-if="showPageList.indexOf(20) > -1">
|
<img class="img-0" alt="" src="../../assets/images/dy5.jpg" />
|
<img
|
src="../../assets/images/10-2.gif"
|
alt=""
|
style="width: 54%"
|
class="cover-gif"
|
/>
|
</div>
|
</div>
|
<div class="page-box" page="21">
|
<div v-if="showPageList.indexOf(21) > -1" class="pg-mh fl fl-cl">
|
<img
|
src="../../assets/images/pageContentHeader.jpg"
|
alt=""
|
class="w100 mb-40"
|
/>
|
<div class="padding-96">
|
<ul class="fl fl-cl al-cn img-state" style="margin-top: 100px">
|
<li style="width: 45%">
|
<img
|
src="../../assets/images/crane.png"
|
alt=""
|
class="w100"
|
:style="{ opacity: (10 - num) / 10 }"
|
/>
|
</li>
|
<li style="width: 35%">
|
<img
|
src="../../assets/images/rise.png"
|
alt=""
|
class="w100"
|
:style="{ opacity: num / 10 }"
|
/>
|
</li>
|
</ul>
|
<p class="img">“西塞山前白鹭飞”动作</p>
|
</div>
|
<ul class="pb-box">
|
<li class="ml-40">
|
<img src="../../assets/images/icon/tree.jpg" />
|
<span class="dl-ib"> 18 </span>
|
</li>
|
<li>
|
<img class="img-0" alt="" src="../../assets/images/ym.jpg" />
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div class="page-box" page="22">
|
<div v-if="showPageList.indexOf(22) > -1">
|
<div>
|
<img
|
src="../../assets/images/chapter-five-header.png"
|
class="w100"
|
/>
|
</div>
|
<div class="padding-96">
|
<h2 class="lefth2" id="b001">
|
<img class="img-gn" alt="" src="../../assets/images/rhybx.jpg" />
|
</h2>
|
<h3 id="c001" class="fw-400 fz-26 mb-20">元素</h3>
|
<p class="block2 fw-400 fz-26">模仿白鹭轻扇翅膀</p>
|
<p class="block1 w70">
|
<span class="ls fz-26">——小波浪手</span>
|
</p>
|
<p class="block2 fz-26">模仿白鹭翱翔</p>
|
<p class="block1 w70">
|
<span class="ls fz-26">——大波浪手</span>
|
</p>
|
<h3 id="c002">空间与方向</h3>
|
<p class="block2">高、中、低空间</p>
|
<p class="block2">1、2、3、7、8点方向</p>
|
<h2 class="lefth2" id="b002">
|
<img class="img-gn" alt="" src="../../assets/images/xsyty.jpg" />
|
</h2>
|
<ul class="fl fl-cl al-cn audio-box">
|
<li class="fl al-cn">
|
<span class="wh-nr auido-text mr-8">男童音</span>
|
<audio :src="auidoPathOne" controls class="audio" @play="audioPlay"></audio>
|
</li>
|
<li class="fl al-cn mt-20">
|
<span class="wh-nr auido-text mr-8"> 女童音 </span>
|
<audio :src="auidoPathTwo" controls class="audio" @play="audioPlay"></audio>
|
</li>
|
</ul>
|
<h3 id="c015">渔歌子</h3>
|
<p class="block2 fm-son">〔唐〕张志和</p>
|
<p class="block2 m16-0">西塞山前白鹭飞，</p>
|
<p class="block2 m16-0">桃花流水鳜鱼肥。</p>
|
</div>
|
<ul>
|
<li class="fl ju-end mr-40">
|
<div>
|
<span class="dl-ib"> 19 </span>
|
<img src="../../assets/images/icon/tree.jpg" />
|
</div>
|
</li>
|
<li>
|
<img class="img-0" alt="" src="../../assets/images/ym.jpg" />
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div class="page-box" page="23">
|
<div v-if="showPageList.indexOf(23) > -1" class="pg-mh">
|
<img
|
src="../../assets/images/pageContentHeader.jpg"
|
alt=""
|
class="w100 mb-40"
|
/>
|
<div class="padding-96">
|
<p class="block2 m16-0">青箬笠，绿蓑衣，</p>
|
<p class="block2 m16-0">斜风细雨不须归。</p>
|
<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:38px 0"
|
></video>
|
<h2 class="lefth2" id="b003">
|
<img class="img-gn" alt="" src="../../assets/images/czysj.jpg" />
|
</h2>
|
<div class="bj1">
|
<p class="block">
|
<img
|
class="inline"
|
alt=""
|
src="../../assets/images/dn.png"
|
/>运用所学舞蹈元素，设立白鹭飞翔的两个不同场景。
|
</p>
|
<p class="block">
|
<img
|
class="inline"
|
alt=""
|
src="../../assets/images/dn.png"
|
/>学生自愿分组，每组自行设置与该诗情感相关的主题，在教师的引导下进行创编，并富有情感地展示出来。
|
</p>
|
</div>
|
<h2 class="lefth2" id="b004">
|
<img class="img-gn1" alt="" src="../../assets/images/tz.jpg" />
|
</h2>
|
<div class="bj2">
|
<p class="block">
|
根据本单元所学的舞蹈元素以及古诗寓意，发挥想象，创编新的单一舞蹈动作或造型吧。
|
</p>
|
</div>
|
</div>
|
<ul>
|
<li class="ml-40">
|
<img src="../../assets/images/icon/tree.jpg" />
|
<span class="dl-ib"> 20 </span>
|
</li>
|
<li>
|
<img class="img-0" alt="" src="../../assets/images/ym.jpg" />
|
</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getResourcePath } from "@/assets/methods/resources";
|
export default {
|
name: "chapterFive",
|
props: {
|
showPageList: {
|
type: Array,
|
},
|
},
|
mounted() {
|
this.getVidoePath();
|
this.addNum();
|
},
|
data() {
|
return {
|
videoPathOne: "",
|
auidoPathOne: "",
|
auidoPathTwo: "",
|
num: 0,
|
};
|
},
|
unmounted() {
|
if (this.addTimer) {
|
clearInterval(this.addTimer);
|
}
|
if (this.cutTimer) {
|
clearInterval(this.cutTimer);
|
}
|
},
|
methods: {
|
async getVidoePath() {
|
this.videoPathOne = await getResourcePath(
|
"97758c885b8668f42c9df0b3ff030672"
|
);
|
this.auidoPathOne = await getResourcePath(
|
"aed4d7b398283b35df0ca46f7c0bbdd4"
|
);
|
this.auidoPathTwo = await getResourcePath(
|
"ec8b7f69df81b1d6230968ad2313132c"
|
);
|
},
|
addNum() {
|
this.addTimer = setInterval(() => {
|
if (this.num < 10) {
|
this.num++;
|
} else {
|
clearInterval(this.addTimer);
|
this.cutNum();
|
}
|
}, 200);
|
},
|
cutNum() {
|
this.cutTimer = setInterval(() => {
|
if (this.num > 0) {
|
this.num--;
|
} else {
|
clearInterval(this.cutTimer);
|
this.addNum();
|
}
|
}, 200);
|
},
|
audioPlay(e) {
|
this.$emit('closeAudio',e.srcElement.currentSrc)
|
}
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.cover-gif {
|
position: absolute;
|
top: 32%;
|
left: 22%;
|
}
|
</style>
|
