<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" 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">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" style="margin-top: 3%">
|
<h2 id="b006" class="problem">第一课 五官的力量</h2>
|
<h3 class="lefth3" id="c011">
|
<img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
|
</h3>
|
<p class="text"><span class="hs1">◇</span>我是小画家</p>
|
<p class="text">保持头部不动，试着用眼神画出下面的图案吧！</p>
|
<p class="center">
|
<img class="img-e" alt="" src="../../assets/images/0016-1.jpg" />
|
</p>
|
<p class="text"><span class="hs1">◇</span>嗅觉大冒险</p>
|
<p class="text">
|
你最爱吃的食物是 <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18"
|
@change="setBookQuestion" style="width: 10%" />。当闻到它的味道时，你会做出什么表情呢？
|
</p>
|
<p class="text">
|
你最不爱吃的食物是 <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>
|
<div style="display: flex; justify-content: flex-start;">
|
<p class="text" style="width: 50%">
|
<span class="hs1">◇</span>以小组为单位，使用手偶道具表演附录中的剧本选段2。
|
</p>
|
<p class="openImgBox" style="width: 50%">
|
<img class="img-e" alt="" src="../../assets/images/2-1.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-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" style="margin-top: 3%;">
|
<h2 id="b007" class="problem">第二课 明察秋毫</h2>
|
<h3 class="lefth3" id="c013"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
|
<p class="text"><span class="hs1">◇</span>我们的世界五彩斑斓。请你填一填，提到这些颜色，你想到了哪些事物？</p>
|
<p class="text">黄色：柠檬、<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 class="text">红色：鞭炮、<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 class="text">绿色：叶子、<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 class="text">黑色：黑板、<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 class="text">蓝色：大海、<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" style="margin-top: 7%;"><img class="img-gn1" alt=""
|
src="../../assets/images/czysj.jpg" /></h3>
|
<p class="text"><span class="hs1">◇</span>阅读下面的文字，为小蚂蚁选择一种性格吧。</p>
|
<choice class="text" :questions="questions"></choice>
|
<p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/2-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-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" style="margin-top: 3%;">
|
<h2 id="b008" class="problem">第三课 闻声识人</h2>
|
<h3 class="lefth3" id="c015"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
|
<p class="text">常言道：良言一句三冬暖，恶语伤人六月寒。语言在人与人的交往中起着重要的作用，有着无穷的力量。</p>
|
<p class="text"><span class="hs1">◇</span>如果朋友心情不好，你该怎么安慰他/她呢？</p>
|
<p class="text">“<input v-model="questionData.warnUp.thirteen" class="input-bottom-border fz-18"
|
@change="setBookQuestion" style="width: 80%" />。”</p>
|
<p class="text"><span class="hs1">◇</span>如果你邀请好朋友来家里做客，你该说什么来欢迎他/她呢？</p>
|
<p class="text">“<input v-model="questionData.warnUp.fourteen" class="input-bottom-border fz-18"
|
@change="setBookQuestion" style="width: 80%" />。”</p>
|
<h3 class="lefth3" id="c016" style="margin-top: 7%;"><img class="img-gn1" alt=""
|
src="../../assets/images/czysj.jpg" /></h3>
|
<p class="text"><span class="hs1">◇</span>请根据提示读出句子，注意声音和语气的变化。</p>
|
<p class="text"><span class="hs">这一大块奶酪都是我的了！</span>（一只狡猾的蚂蚁，想要把奶酪偷偷地占为己有）</p>
|
<p class="text"><span class="hs">这一大块奶酪都是我的了！</span>（一只善良的蚂蚁，在帮助他人后得到了奖励）</p>
|
<p class="text"><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" style="margin-top: 3%">
|
<p class="text"><span class="hs">这块奶酪太沉了，我们休息一下吧！</span>（一只弱小的蚂蚁，在向蚂蚁队长请求休息）</p>
|
<p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/2-3.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-right">15</div>
|
</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" style="margin-top: 3%;">
|
<h2 id="b009" class="problem">第四课 真听真看真感受</h2>
|
<h3 class="lefth3" id="c017"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
|
<p class="text">待人接物有礼有节、谦卑恭敬，在让他人感到如沐春风的同时，也会让自己受到他人的尊重和理解。请说一说，在下面这些场景中你应该如何做？</p>
|
<p class="text"><span class="hs1">◇</span>你看到妈妈的水杯没水了。</p>
|
<p class="text"><span class="hs1">◇</span>电梯里，你站在最前排，后面的人需要下电梯。</p>
|
<h3 class="lefth3" id="c018" style="margin-top: 7%;"><img class="img-gn1" alt=""
|
src="../../assets/images/czysj.jpg" /></h3>
|
<div style="display: flex; justify-content: flex-start; ">
|
<p class="text" style="width: 50%;">
|
你知道吗？无实物训练是一种训练演员的有效方法，不仅能够培养演员良好的想象能力，更能够培养其行动的逻辑性和情景适应性，最终提高其塑造人物形象的能力。</p>
|
<div class="openImgBox" style="width: 50%"><img class="img-e" alt="" src="../../assets/images/2-4.gif" />
|
</div>
|
</div>
|
<p class="text"><span class="hs1">◇</span>请试着用无实物表演的方式把下面的情景表演出来吧！</p>
|
<p class="center text"><img class="img-0" style="width: 100%; height: auto;" lt=""
|
src="../../assets/images/0020-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">16</div>
|
</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" style="margin-top: 3%">
|
<h2 id="b010" class="problem">单元活动任务</h2>
|
<h3 class="lefth3" id="c019"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
|
<p class="text"><span class="hs1">◇</span>吹纸练习</p>
|
<p class="center text" style="margin: 4% 0"><img class="img-e" alt="" src="../../assets/images/0021-1.jpg" />
|
</p>
|
<p class="text">找一张纸巾，将它按在墙上。移开双手，努力用气息将纸“钉”在墙面上，不要让它向下滑落。</p>
|
<p class="text"><span class="hs1">◇</span>吹笔练习</p>
|
<p class="text">将一支笔立于桌面，看看你能不能用一口气将它吹倒。</p>
|
<p class="text"><span class="hs1">◇</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">17</div>
|
</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" style="margin-top: 3%;">
|
<p class="text"><span class="hs1">◇</span>吹乒乓球练习</p>
|
<p class="text">用气息将桌面上的乒乓球从“起点”运送至“终点”，运送过程中避免乒乓球触碰障碍物。</p>
|
<h3 class="lefth3" id="c020" style="margin-top: 7%"><img class="img-gn1" alt=""
|
src="../../assets/images/tzyys.jpg" /></h3>
|
<p class="text"><span class="hs1">◇</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" @play="videoPlay"
|
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="chapterData.isCollectVideo ? 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">18</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
import { getResourcePath } from "@/assets/methods/resources";
|
import choice from "@/components/choice/choice.vue"
|
export default {
|
name: "chapterTwo",
|
components: { choice },
|
props: {
|
showPageList: {
|
type: Array,
|
},
|
},
|
//在这里对调用的方法进行挂载
|
mounted() {
|
this.getVidoePath();
|
const bookQuestion = localStorage.getItem("artAndDrama-book-question-two");
|
if (bookQuestion) {
|
this.questionData = JSON.parse(bookQuestion);
|
}
|
},
|
data() {
|
return {
|
collectImg: require("../../assets/images/icon/heart.png"),
|
collectCheck: require("../../assets/images/icon/heart-check.png"),
|
videoPathOne: "",
|
auidoPathOne: "",
|
chapterData: {
|
isCollectImg: false,
|
isCollectVideo: false,
|
txtOne: "",
|
txtTwo: "",
|
},
|
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: "",
|
},
|
},
|
questions: [
|
{
|
analysisCon: "undefined",
|
answer: ['C', 'A', 'B'],
|
difficulty: 0,
|
id: 47775,
|
isCollect: false,
|
isComplete: false,
|
isRight: null,
|
isUnfold: "",
|
isUserAnswer: false,
|
number: 1,
|
options: [
|
{
|
"img": "",
|
"index": "3CA6",
|
"txt": "胆小的",
|
"value": "A"
|
},
|
{
|
"img": "",
|
"index": "73EE",
|
"txt": "善良的",
|
"value": "B"
|
},
|
{
|
"img": "",
|
"index": "6AEF",
|
"txt": "沉稳的",
|
"value": "C"
|
},
|
],
|
optionStyle: "Image",
|
questionType: "singleChoice",
|
score: 2,
|
stem: {
|
"stemTxt": "蚂蚁队长走路昂首挺胸、步伐坚定，它是一只（ ）蚂蚁；小蚂蚁走起路来小心翼翼，眼神飘忽不定，它是一只（ ）蚂蚁；蚂蚁小妹面带微笑，时刻愿意帮助大家，它是一只（ ）蚂蚁。"
|
},
|
stemStyle: "Txt",
|
userAnswer: "",
|
// 单选题这里的字段内容就是"单选题"
|
type: 'sort'
|
},
|
],
|
};
|
},
|
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)
|
},
|
//视频
|
videoPlay(e) {
|
this.$emit('closeVideo', e.srcElement.currentSrc)
|
},
|
handleChapterData() {
|
localStorage.setItem(
|
"math-chapterData",
|
JSON.stringify(this.chapterData)
|
);
|
},
|
handleCollect(type) {
|
if (type == "img") {
|
this.chapterData.isCollectImg = !this.chapterData.isCollectImg;
|
} else if (type == "video") {
|
this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
|
}
|
this.handleChapterData();
|
},
|
},
|
};
|
</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>
|
