<template>
|
<div class="chapter" num="3">
|
<div class="page-box" page="8" style="min-height: auto;">
|
<div v-if="showPageList.indexOf(8) > -1">
|
<img class="img-0" alt="" src="../../assets/images/dy2.jpg" />
|
<img src="../../assets/images/03-2.gif" alt="" style="width: 55%;" class="cover-gif">
|
</div>
|
</div>
|
<div class="page-box" page="9">
|
<div v-if="showPageList.indexOf(9) > -1" class="pg-mh">
|
<img
|
src="../../assets/images/pageContentHeader.jpg"
|
alt=""
|
class="w100 mb-40"
|
/>
|
<div class="padding-96">
|
<p class="center">
|
<img class="img-b" alt="" src="../../assets/images/04-2.gif" />
|
</p>
|
<ul class="fl al-cn ju-bt img-state " style="margin-top: 100px;">
|
<li style="width: 45%;">
|
<img src="../../assets/images/05.gif" alt="" class="w100" :style="{opacity:(10 - num) / 10}">
|
</li>
|
<li style="width: 35%;">
|
<img src="../../assets/images/girl.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"> 6 </span>
|
</li>
|
<li>
|
<img class="img-0" alt="" src="../../assets/images/ym.jpg" />
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div class="page-box" page="10">
|
<div v-if="showPageList.indexOf(10) > -1" class="pg-mh">
|
<div>
|
<img src="../../assets/images/chapter-two-header.png" class="w100" />
|
</div>
|
<div class="padding-96">
|
<h2 class="lefth2" id="b005">
|
<img class="img-gn" alt="" src="../../assets/images/rhybx.jpg" />
|
</h2>
|
<h3 id="c004">元素</h3>
|
<p class="block2">单指立于头顶模仿羊角</p>
|
<p class="block1"><span class="ls">——羊角式</span></p>
|
<p class="block2">双膝跪于地面</p>
|
<p class="block1"><span class="ls">——双跪坐</span></p>
|
<p class="block2">左右脚交替踏地</p>
|
<p class="block1"><span class="ls">——原地小碎步、移动小碎步</span></p>
|
<p class="block2">腰部拧转</p>
|
<p class="block1"><span class="ls">——旁腰、拧腰</span></p>
|
<h3 id="c005">空间与方向</h3>
|
<p class="block2">高、中、低空间</p>
|
<p class="block2">1-8点方向</p>
|
<h2 class="lefth2" id="b006">
|
<img class="img-gn" alt="" src="../../assets/images/xsyty.jpg" />
|
</h2>
|
<h3 id="c006">亡羊补牢</h3>
|
<p class="block2">席一元</p>
|
<p class="block2">羊啊羊啊咩咩叫，有只小羊不见了。</p>
|
<p class="block2">墙啊墙啊垒高高，墙上有个大窟窿。</p>
|
</div>
|
<ul>
|
<li class="fl ju-end mr-40">
|
<div>
|
<span class="dl-ib"> 7 </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="11">
|
<div v-if="showPageList.indexOf(11) > -1" class="pg-mh">
|
<img
|
src="../../assets/images/pageContentHeader.jpg"
|
alt=""
|
class="w100 mb-40"
|
/>
|
<div class="padding-96">
|
<p class="block2">羊啊羊啊咩咩叫，羊儿全都吓坏了。</p>
|
<p class="block2">窟窿窟窿黑洞洞，快快补上才安心。</p>
|
<p class="center">
|
<!-- <img class="img-g" alt="" src="../../assets/images/i0012-1.jpg" /> -->
|
</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
|
class="w100"
|
></video>
|
<h2 class="lefth2 mt-40" id="b007">
|
<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 mt-40" id="b008">
|
<img class="img-gn1" alt="" src="../../assets/images/tz.jpg" />
|
</h2>
|
<div class="bj2">
|
<p class="block">
|
根据本单元所学的舞蹈元素以及成语寓意，发挥想象，创编出新的单一舞蹈动作或造型吧。
|
</p>
|
</div>
|
<!-- <p class="center"><img class="img-0" alt="" src="../../assets/images/ym.jpg" /></p> -->
|
</div>
|
<ul class="pb-box">
|
<li class="ml-40">
|
<img src="../../assets/images/icon/tree.jpg" />
|
<span class="dl-ib"> 8 </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: "chapterTwo",
|
props: {
|
showPageList: {
|
type: Array,
|
},
|
},
|
mounted() {
|
this.getVidoePath();
|
this.addNum()
|
},
|
unmounted() {
|
if(this.addTimer) {
|
clearInterval(this.addTimer)
|
}
|
if(this.cutTimer) {
|
clearInterval(this.cutTimer)
|
}
|
},
|
data() {
|
return {
|
videoPathOne: "",
|
num:0,
|
addTimer:null,
|
cutTimer:null
|
};
|
},
|
methods: {
|
getVidoePath() {
|
this.videoPathOne = getResourcePath("f6aaaed901868114d948031615250bed");
|
},
|
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)
|
}
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.cover-gif {
|
position: absolute;
|
top: 33%;
|
left: 23%;
|
|
}
|
</style>
|
