<template>
|
<div class="chapter" num="7">
|
<div class="page-box" page="24">
|
<div v-if="showPageList.indexOf(24) > -1">
|
<img class="img-0" alt="" src="../../assets/images/dzk.jpg" />
|
</div>
|
</div>
|
<div class="page-box" page="25">
|
<div v-if="showPageList.indexOf(25) > -1" class="pg-mh">
|
<img
|
src="../../assets/images/pageContentHeader.jpg"
|
alt=""
|
class="w100 mb-40"
|
/>
|
<div class="padding-96">
|
<h2 class="whleft2" id="b021">第一单元 黄鹤楼送孟浩然之广陵</h2>
|
<div class="banshi openImgBox">
|
<div class="swiper-container swiper-img">
|
<div class="swiper-wrapper">
|
<div class="swiper-slide">
|
<div class="imgBox" style="width: 100%; height: 100%">
|
<img
|
src="../../assets/images/image26-1.png"
|
alt="1 “故人西辞黄鹤楼”动作"
|
/>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="imgBox" style="width: 100%; height: 100%">
|
<img
|
src="../../assets/images/image26-2.png"
|
alt="2 “烟花三月下扬州”动作"
|
/>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="imgBox" style="width: 100%; height: 100%">
|
<img
|
src="../../assets/images/image26-3.png"
|
alt="3 “孤帆远影碧空尽”动作"
|
/>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="imgBox" style="width: 100%; height: 100%">
|
<img
|
src="../../assets/images/image26-4.png"
|
alt="4 “唯见长江天际流”动作"
|
/>
|
</div>
|
</div>
|
</div>
|
<div class="swiper-pagination"></div>
|
<div class="swiper-button-next"></div>
|
<div class="swiper-button-prev"></div>
|
</div>
|
</div>
|
</div>
|
<ul>
|
<li class="ml-40">
|
<img src="../../assets/images/icon/tree.jpg" />
|
<span class="dl-ib"> 22 </span>
|
</li>
|
<li>
|
<img class="img-0" alt="" src="../../assets/images/ym.jpg" />
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div class="page-box" page="26">
|
<div v-if="showPageList.indexOf(26) > -1" class="pg-mh">
|
<img
|
src="../../assets/images/pageContentHeader.jpg"
|
alt=""
|
class="w100 mb-40"
|
/>
|
<div class="padding-96">
|
<h2 class="whleft2" id="b022">第二单元 亡羊补牢</h2>
|
<div class="banshi openImgBox">
|
<div class="swiper-container swiper-img">
|
<div class="swiper-wrapper">
|
<div class="swiper-slide">
|
<div class="imgBox" style="width: 100%; height: 100%">
|
<img
|
src="../../assets/images/image27-1.png"
|
alt="1 “羊角式”舞姿"
|
/>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="imgBox" style="width: 100%; height: 100%">
|
<img
|
src="../../assets/images/image27-2.png"
|
alt="2 模仿“窟窿”舞姿"
|
/>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="imgBox" style="width: 100%; height: 100%">
|
<img
|
src="../../assets/images/image27-3.png"
|
alt="3 “捂嘴状”舞姿"
|
/>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="imgBox" style="width: 100%; height: 100%">
|
<img
|
src="../../assets/images/image27-4.png"
|
alt="4 “双人配合”舞姿"
|
/>
|
</div>
|
</div>
|
</div>
|
<div class="swiper-pagination"></div>
|
<div class="swiper-button-next"></div>
|
<div class="swiper-button-prev"></div>
|
</div>
|
</div>
|
</div>
|
<ul>
|
<li class="fl ju-end mr-40">
|
<div>
|
<span class="dl-ib"> 23 </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="27">
|
<div v-if="showPageList.indexOf(27) > -1" class="pg-mh">
|
<img
|
src="../../assets/images/pageContentHeader.jpg"
|
alt=""
|
class="w100 mb-40"
|
/>
|
<div class="padding-96">
|
<h2 class="whleft2" id="b023">第三单元 小儿垂钓</h2>
|
<div class="banshi openImgBox">
|
<div class="swiper-container swiper-img">
|
<div class="swiper-wrapper">
|
<div class="swiper-slide">
|
<div class="imgBox" style="width: 100%; height: 100%">
|
<img
|
src="../../assets/images/image28-1.png"
|
alt="1 吸跳步"
|
/>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="imgBox" style="width: 100%; height: 100%">
|
<img
|
src="../../assets/images/image28-2.png"
|
alt="2 “侧坐莓苔草映身”动作"
|
/>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="imgBox" style="width: 100%; height: 100%">
|
<img
|
src="../../assets/images/image28-3.png"
|
alt="3 “路人借问遥招手”动作"
|
/>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="imgBox" style="width: 100%; height: 100%">
|
<img
|
src="../../assets/images/image28-4.png"
|
alt="4 模仿“钓鱼”舞姿"
|
/>
|
</div>
|
</div>
|
</div>
|
<div class="swiper-pagination"></div>
|
<div class="swiper-button-next"></div>
|
<div class="swiper-button-prev"></div>
|
</div>
|
</div>
|
</div>
|
<ul class="pb-box">
|
<li class="ml-40">
|
<img src="../../assets/images/icon/tree.jpg" />
|
<span class="dl-ib"> 24 </span>
|
</li>
|
<li>
|
<img class="img-0" alt="" src="../../assets/images/ym.jpg" />
|
</li>
|
</ul>
|
</div>
|
</div>
|
<div class="page-box" page="28">
|
<div v-if="showPageList.indexOf(28) > -1" class="pg-mh">
|
<img
|
src="../../assets/images/pageContentHeader.jpg"
|
alt=""
|
class="w100 mb-40"
|
/>
|
<div class="padding-96">
|
<h2 class="whleft2" id="b024">第四单元 寻隐者不遇</h2>
|
<div class="banshi openImgBox">
|
<div class="swiper-container swiper-img">
|
<div class="swiper-wrapper">
|
<div class="swiper-slide">
|
<div class="imgBox" style="width: 100%; height: 100%">
|
<img
|
src="../../assets/images/image29-1.png"
|
alt="1 “松下问童子”动作"
|
/>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="imgBox" style="width: 100%; height: 100%">
|
<img
|
src="../../assets/images/image29-2.png"
|
alt="2 “言师采药去”动作"
|
/>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="imgBox" style="width: 100%; height: 100%">
|
<img
|
src="../../assets/images/image29-3.png"
|
alt="3 “云深不知处”动作"
|
/>
|
</div>
|
</div>
|
</div>
|
<div class="swiper-pagination"></div>
|
<div class="swiper-button-next"></div>
|
<div class="swiper-button-prev"></div>
|
</div>
|
</div>
|
</div>
|
<ul>
|
<li class="fl ju-end mr-40">
|
<div>
|
<span class="dl-ib"> 25 </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="29">
|
<div v-if="showPageList.indexOf(29) > -1" class="pg-mh">
|
<img
|
src="../../assets/images/pageContentHeader.jpg"
|
alt=""
|
class="w100 mb-40"
|
/>
|
<div class="padding-96">
|
<h2 class="whleft2" id="b025">第五单元 渔歌子</h2>
|
<div class="banshi openImgBox">
|
<div class="swiper-container swiper-img">
|
<div class="swiper-wrapper">
|
<div class="swiper-slide">
|
<div class="imgBox" style="width: 100%; height: 100%">
|
<img
|
src="../../assets/images/image30-1.png"
|
alt="1 “西塞山前白鹭飞”动作"
|
/>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="imgBox" style="width: 100%; height: 100%">
|
<img
|
src="../../assets/images/image30-2.png"
|
alt="2 “桃花流水鳜鱼肥”动作"
|
/>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="imgBox" style="width: 100%; height: 100%">
|
<img
|
src="../../assets/images/image30-3.png"
|
alt="3 “青箬笠，绿蓑衣”动作"
|
/>
|
</div>
|
</div>
|
<div class="swiper-slide">
|
<div class="imgBox" style="width: 100%; height: 100%">
|
<img
|
src="../../assets/images/image30-4.png"
|
alt="4 “斜风细雨不须归”动作"
|
/>
|
</div>
|
</div>
|
</div>
|
<div class="swiper-pagination"></div>
|
<div class="swiper-button-next"></div>
|
<div class="swiper-button-prev"></div>
|
</div>
|
</div>
|
</div>
|
<ul >
|
<li class="ml-40">
|
<img src="../../assets/images/icon/tree.jpg" />
|
<span class="dl-ib"> 26 </span>
|
</li>
|
<li>
|
<img class="img-0" alt="" src="../../assets/images/ym.jpg" />
|
</li>
|
</ul>
|
</div>
|
</div>
|
<!-- <div class="page-box" page="30">
|
<paint ></paint>
|
</div> -->
|
</div>
|
</template>
|
|
<script>
|
import paint from '@/components/paint/index.vue'
|
export default {
|
name: "chapterSix",
|
props: {
|
showPageList: {
|
type: Array,
|
},
|
},
|
components:{paint}
|
};
|
</script>
|
|
<style lang="less" scoped>
|
.banshi {
|
width: 100%;
|
height: 800px;
|
}
|
</style>
|
