<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 style="margin-top: 1em;" :src="audioPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></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" style="margin: 8% 5% 5% 7%">
|
在戏剧演出中，除了舞台上的演员，导演、灯光、造型等幕后人员也发挥着重要的作用。本单元让我们从台前走进幕后，向默默奉献的工作人员致敬！</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>
|
<img class="headerimg" src="../../assets/images/page5.png" alt="" />
|
<div class="bodystyle" style="margin-top: 3%">
|
<h2 id="b016" class="problem">第一课 一模一样</h2>
|
<h3 class="lefth3" id="c031"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
|
<p class="text rhombusFather"><span class="hs1 rhombus">◇</span>以小组为单位围成一圈，面朝圈外蹲下，相邻两人互挎手臂，组员同时站起来，看看哪个组最快！</p>
|
<p class="text t-l rhombusFather"><span class="hs1 rhombus">◇</span>说一说：快速站起来的秘诀是什么？
|
<textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
|
style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
|
:class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')"
|
@blur="handleBlur('one')">
|
</textarea>
|
</p>
|
<h3 class="lefth3" id="c032"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
|
<p class="text rhombusFather"><span class="hs1 rhombus">◇</span>以小组为单位，表演以下场景，注意保持动作一致哦。</p>
|
<p class="text">蚂蚁队长吹响集合号，蚂蚁们迅速跑上场站好队形。</p>
|
<p class="text">蚂蚁们抬着奶酪向前走着。</p>
|
<p class="text">蚂蚁们跟随蚂蚁队长的口令消失在草丛里。</p>
|
<p class="text">蚂蚁们由四面八方走回来。</p>
|
<p class="text">蚂蚁们劲儿比刚才更足，抬起奶酪向山洞走去。</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/unit4-header-img.png" alt="" style="height: auto; width: 100%" />
|
</h1>
|
<div class="bodystyle" style="margin-top: 3%;">
|
<h2 id="b017" class="problem">第二课 造型变变变</h2>
|
<h3 class="lefth3" id="c033"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
|
<p class="text rhombusFather"><span
|
class="hs1 rhombus">◇</span>春天来了，春风吹过，柳树发芽了，迎春花开了，小燕子在天空自由地飞翔。一切都是那么生机勃勃。请为“春天”涂上你喜欢的颜色。</p>
|
<!-- 图片缺失 -->
|
<!-- <p class="center"><img class="img-e" alt="" src="./../assets/images/0033-1.jpg" /></p> -->
|
<!-- <graffiti :page="32" :bcImg="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'"
|
:imgWidth="596" :imgHeight="500" /> -->
|
<paint :imgUrl="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'" :page="32"
|
/>
|
</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>
|
<img class="headerimg" src="../../assets/images/page5.png" alt="" />
|
<div class="bodystyle" style="margin-top: 3%;">
|
<h3 class="lefth3" id="c034"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
|
<p class="text rhombusFather"><span class="hs1 rhombus">◇</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/unit4-header-img.png" alt="" style="width: 100%; height: auto" />
|
</h1>
|
<div class="bodystyle" style="margin-top: 3%">
|
<h2 id="b018" class="problem">第三课 变废为宝</h2>
|
<h3 class="lefth3" id="c035"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
|
<p class="text rhombusFather"><span class="hs1 rhombus">◇</span>以小组为单位，头顶纸杯，腿夹报纸，进行夹纸运杯游戏！</p>
|
<h3 class="lefth3" id="c036" style="margin-top: 7%"><img class="img-gn1" alt=""
|
src="../../assets/images/czysj.jpg" /></h3>
|
<p class="text rhombusFather"><span class="hs1 rhombus">◇</span>请根据《一块奶酪》的剧本，列出演出中需要的道具清单，请按照清单，利用你收集的旧物制作道具吧！</p>
|
<p class="text">
|
<textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6"
|
style="margin: 1em 0; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
|
:class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')"
|
@blur="handleBlur('two')">
|
</textarea>
|
</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>
|
<img class="headerimg" src="../../assets/images/page5.png" alt="" />
|
<div class="bodystyle" style="margin-top: 3%;">
|
<h2 id="b019" class="problem">第四课 奇妙的舞台</h2>
|
<h3 class="lefth3" id="c037"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
|
<p class="text rhombusFather"><span class="hs1 rhombus">◇</span>请你试着模拟演员候场、谢幕，舞台美术工作人员进行幕后准备的场景。</p>
|
<p class="center"><img class="img-e" alt="" src="../../assets/images/0036-1.jpg" /></p>
|
<h3 class="lefth3" id="c038" style="margin-top: 7%;"><img class="img-gn1" alt=""
|
src="../../assets/images/czysj.jpg" /></h3>
|
<p class="text rhombusFather"><span class="hs1 rhombus">◇</span>邀请同伴共同完成《一块奶酪》的展演吧！</p>
|
<p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/0036-2.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-left">32</div>
|
</div>
|
</div>
|
</div>
|
<div class="page-box" page="36">
|
<div v-if="showPageList.indexOf(36) > -1">
|
<h1>
|
<img src="../../assets/images/unit4-header-img.png" alt="" style="width: 100%; height: auto" />
|
</h1>
|
<div class="bodystyle" style="margin-top: 3%;">
|
<h2 id="b020" class="problem">单元活动任务</h2>
|
<h3 class="lefth3" id="c039"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
|
<p class="center text1"><span class="hs">形体操练习</span></p>
|
<p class="text ends rhombusFather">
|
<span><span class="hs1 rhombus">◇</span>头部运动</span>
|
<span> <audio :src="audioPathTwo" controls controlslist="noplaybackrate nodownload"
|
class="audio"></audio> </span>
|
</p>
|
<p class="text">第1个八拍：右手越过头顶摸左耳，向右轻轻压头部。</p>
|
<p class="text">第2个八拍：左手越过头顶摸右耳，向左轻轻压头部。</p>
|
<p class="text">第3个八拍：头部顺时针转一圈。</p>
|
<p class="text">第4个八拍：头部逆时针转一圈。</p>
|
<p class="text ends rhombusFather">
|
<span><span class="hs1 rhombus">◇</span>开肩练习</span>
|
<span> <audio :src="audioPathThree" controls controlslist="noplaybackrate nodownload"
|
class="audio"></audio> </span>
|
</p>
|
<p class="text">平视前方，肩膀放松，双手自然下垂，双脚打开，与肩同宽。</p>
|
<p class="text">第1个八拍：第1-4拍手肘内侧向外转动，带动 双肩打开；第5-8拍手肘内侧向内收回，后背拱起，带动双肩内扣。</p>
|
<p class="text">第2至第4个八拍：重复第1个八拍的动作。</p>
|
<p class="text ends rhombusFather">
|
<span><span class="hs1 rhombus">◇</span>提沉肩运动</span>
|
<span> <audio :src="audioPathFour" controls controlslist="noplaybackrate nodownload"
|
class="audio"></audio> </span>
|
</p>
|
<p class="text">平视前方，肩膀放松，双手自然下垂，双脚打开，与肩同宽。</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">33</div>
|
</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>
|
<img class="headerimg" src="../../assets/images/page5.png" alt="" />
|
<div class="bodystyle" style="margin-top: 3%;">
|
<p class="text">第1至第2个八拍：双手下垂，手心向下，双肩上提再沉下，两拍一动。</p>
|
<p class="text">第3至第4个八拍：双手下垂，手心向下，左右肩膀依次上提再沉下，一拍一动。</p>
|
<p class="text ends rhombusFather">
|
<span><span class="hs1 rhombus">◇</span>伸展运动</span>
|
<span> <audio :src="audioPathFive" controls controlslist="noplaybackrate nodownload"
|
class="audio"></audio> </span>
|
</p>
|
<p class="text">身体放松，膝盖微屈，上身自然弯曲下沉，手臂自然下垂。</p>
|
<p class="text">第1个八拍：第1-7拍身体直起，双臂举起，踮起脚尖；第8拍还原初始状态。</p>
|
<p class="text">第2至第4个八拍：重复第1个八拍的动作。</p>
|
<h3 class="lefth3" id="c040" style="margin-top: 7%;"><img class="img-gn1" alt=""
|
src="../../assets/images/tzyys.jpg" /></h3>
|
<p class="text rhombusFather"><span class="hs1 rhombus">◇</span>写一篇排演总结，分享学习经验和感受！</p>
|
<p class="center text">
|
<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 video"
|
style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
|
</p>
|
<p class="center videoname">
|
<span>视频：团结就是力量 </span>
|
<el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
|
placement="top-start">
|
<img :src="collectResourceList.findIndex(item => item.id == '691cbd2c13198d04afc7800d0f2cafb0') > -1 ? collectCheck : collectImg"
|
alt="" class="collect-btn" @click="handleCollect('video')" />
|
</el-tooltip>
|
</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">34</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
<script>
|
import { getResourcePath } from "@/assets/methods/resources";
|
import paint from '@/components/paint/index.vue'
|
import { getCollectResource, setCollectResource } from "@/assets/methods/resources";
|
export default {
|
name: "chapterFour",
|
props: {
|
showPageList: {
|
type: Array,
|
},
|
},
|
components: {
|
paint
|
},
|
//在这里对调用的方法进行挂载
|
async mounted() {
|
this.getVidoePath();
|
const bookQuestion = localStorage.getItem("artAndDrama-book-question-four");
|
if (bookQuestion) {
|
this.questionData = JSON.parse(bookQuestion);
|
}
|
|
const data = localStorage.getItem("artAndDrama-chapter04-Data");
|
if (data) {
|
this.chapterData = JSON.parse(data);
|
}
|
this.collectResourceList = await getCollectResource(this.config.activeBook.bookId)
|
},
|
data() {
|
return {
|
collectImg: require("../../assets/images/icon/heart.png"),
|
collectCheck: require("../../assets/images/icon/heart-check.png"),
|
videoPathOne: "",
|
audioPathOne: "",
|
audioPathTwo: "",
|
audioPathThree: "",
|
audioPathFour: "",
|
audioPathFive: "",
|
isFocused: null, // 用于跟踪textarea的聚焦状态
|
collectResourceList: [],
|
chapterData: {
|
isCollectImg: false,
|
isCollectVideo: false,
|
txtOne: "",
|
txtTwo: "",
|
},
|
questionData: {
|
warnUp: {
|
one: "",
|
},
|
reading: {
|
one: "",
|
two: "",
|
},
|
table: {
|
one: "",
|
two: "",
|
three: "",
|
four: "",
|
five: "",
|
six: "",
|
seven: "",
|
enight: "",
|
nine: "",
|
},
|
},
|
};
|
},
|
//测试
|
computed: {
|
currentQuestion() {
|
return this.questions[this.currentIndex];
|
},
|
},
|
//测试结束
|
methods: {
|
//视频和音频的MD5地址
|
async getVidoePath() {
|
this.videoPathOne = await getResourcePath(
|
"09de7704eeaaf3a210b8c6af0a94d545"
|
);
|
this.audioPathOne = await getResourcePath(
|
"7c74b4da6fe6981d5c2148e48a0d66ed"
|
);
|
this.audioPathTwo = await getResourcePath(
|
"b9ce656b414814b49213a2d5838844fe"
|
);
|
this.audioPathThree = await getResourcePath(
|
"87f0de453538e671a27b9e8ffc8f34b9"
|
);
|
this.audioPathFour = await getResourcePath(
|
"e5b62ed418572b13405115020682e1cd"
|
);
|
this.audioPathFive = await getResourcePath(
|
"7abb747bd16745afb83715fcbb3579ab"
|
);
|
},
|
handleFocus(id) {
|
this.isFocused = id; // 当textarea聚焦时，设置为true
|
},
|
handleBlur(id) {
|
this.isFocused = null; // 当textarea失去焦点时，设置为false
|
},
|
setBookQuestion() {
|
localStorage.setItem(
|
"artAndDrama-book-question-four",
|
JSON.stringify(this.questionData)
|
);
|
},
|
handleChapterData() {
|
localStorage.setItem(
|
"artAndDrama-chapter04-Data",
|
JSON.stringify(this.chapterData)
|
);
|
},
|
handleCollect(type) {
|
if (type == "video") {
|
this.handleCollectResource("09de7704eeaaf3a210b8c6af0a94d545", "09de7704eeaaf3a210b8c6af0a94d545", '', "视频", "bits", '视频：团结就是力量')
|
}
|
this.handleChapterData();
|
},
|
//资源收藏事件
|
handleCollectResource(id, md5, resourcePath, resourceType, source, resourceName) {
|
let list = this.collectResourceList
|
if (list.findIndex(item => item.id == id) > -1) {
|
list = list.filter(item => item.id != id)
|
} else {
|
list.push({
|
id,
|
md5,
|
resourcePath,
|
resourceType,
|
source,
|
resourceName,
|
})
|
}
|
this.collectResourceList = list
|
setCollectResource(this.config.activeBook.bookId, this.collectResourceList)
|
}
|
},
|
};
|
</script>
|
|
<style lang="less" scoped>
|
//测试
|
.all-options {
|
display: flex;
|
justify-content: space-between;
|
margin-left: 10%;
|
}
|
|
.option {
|
position: relative;
|
/* 设置为相对定位容器 */
|
display: inline-flex;
|
/* 使用 Flexbox 以便更好地控制布局和对齐 */
|
align-items: center;
|
/* 垂直居中对齐 */
|
|
}
|
|
.option-img {
|
width: 80%;
|
height: auto;
|
// z-index: -1;
|
}
|
|
.option-text {
|
position: absolute;
|
z-index: 1;
|
left: 29px;
|
top: 64px;
|
}
|
|
.cloud-icon {
|
fill: rgb(245, 130, 32);
|
}
|
|
.btn-button {
|
width: 70%;
|
margin: 10px auto 0 auto;
|
display: flex;
|
justify-content: space-evenly;
|
flex-wrap: wrap;
|
}
|
|
.btn-button>button {
|
width: 80px;
|
height: 30px;
|
margin-top: 10px;
|
border: 1px solid rgb(245, 130, 32);
|
background-color: transparent;
|
border-radius: 5px;
|
cursor: pointer;
|
}
|
|
.btn-button>button:hover {
|
background-color: rgb(245, 130, 32);
|
/* 鼠标悬停时背景色变为红色 */
|
color: white;
|
/* 鼠标悬停时字体颜色变为白色 */
|
/* 其他你想要的悬停样式... */
|
}
|
|
.active {
|
color: white;
|
transition: color 0.3s;
|
}
|
|
.key {
|
display: flex;
|
justify-content: space-around;
|
}
|
|
.right-key {
|
color: green;
|
}
|
|
.correct-answer {
|
color: green;
|
/* 正确答案的字体颜色 */
|
}
|
|
.incorrect-answer {
|
color: red;
|
/* 错误答案的字体颜色 */
|
}
|
|
.face {
|
width: 15%;
|
height: auto;
|
}
|
|
//测试结束
|
.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>
|
