Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

闫增涛

2024-06-14 fe614d7980573f66d91374dfb46c1c63b9b4e51f

 src/books/artAndDrama/view/components/chapter004.vue

New file
@@ -0,0 +1,290 @@
<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 :src="auidoPathOne" class="audio" controls></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>在戏剧演出中，除了舞台上的演员，导演、灯光、造型等幕后人员也发挥着重要的作用。本单元让我们从台前走进幕后，向默默奉献的工作人员致敬！</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>
                <div class="bodystyle">
                    <img src="../../assets/images/page5.png" alt="" />
                    <h2 id="b016">第一课　一模一样</h2>
                    <h3 class="lefth3" id="c031"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p><span class="hs1">◇</span>以小组为单位围成一圈，面朝圈外蹲下，相邻两人互挎手臂，组员同时站起来，看看哪个组最快！</p>
                    <p><span class="hs1">◇</span>说一说：快速站起来的秘诀是什么？</p>
                    <p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 70%"/></p>
                    <h3 class="lefth3" id="c032"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>以小组为单位，表演以下场景，注意保持动作一致哦。</p>
                    <p>蚂蚁队长吹响集合号，蚂蚁们迅速跑上场站好队形。</p>
                    <p>蚂蚁们抬着奶酪向前走着。</p>
                    <p>蚂蚁们跟随蚂蚁队长的口令消失在草丛里。</p>
                    <p>蚂蚁们由四面八方走回来。</p>
                    <p>蚂蚁们劲儿比刚才更足，抬起奶酪向山洞走去。</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/page6-header-green.png" alt="" style="height: auto; width: 100%" />
                </h1>
                <div class="bodystyle">
                    <h2 id="b017">第二课　造型变变变</h2>
                    <h3 class="lefth3" id="c033"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p><span class="hs1">◇</span>春天来了，春风吹过，柳树发芽了，迎春花开了，小燕子在天空自由地飞翔。一切都是那么生机勃勃。请为“春天”涂上你喜欢的颜色。</p>
                    <!-- 图片缺失 -->
                    <!-- <p class="center"><img class="img-e" alt="" src="./../assets/images/0033-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">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>
                <div class="bodystyle">
                    <h3 class="lefth3" id="c034"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</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/header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <img src="../../assets/images/page5.png" alt="" />
                    <h2 id="b018">第三课　变废为宝</h2>
                    <h3 class="lefth3" id="c035"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p><span class="hs1">◇</span>以小组为单位，头顶纸杯，腿夹报纸，进行夹纸运杯游戏！</p>
                    <h3 class="lefth3" id="c036"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>请根据《一块奶酪》的剧本，列出演出中需要的道具清单，请按照清单，利用你收集的旧物制作道具吧！</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>
                <div class="bodystyle">
                    <img src="../../assets/images/page5.png" alt="" />
                    <h2 id="b019">第四课　奇妙的舞台</h2>
                    <h3 class="lefth3" id="c037"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p><span class="hs1">◇</span>请你试着模拟演员候场、谢幕，舞台美术工作人员进行幕后准备的场景。</p>
                    <p class="center"><img class="img-e" alt="" src="../../assets/images/0036-1.jpg" /></p>
                    <h3 class="lefth3" id="c038"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>邀请同伴共同完成《一块奶酪》的展演吧！</p>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.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">32</div>
            </div>
        </div>
        <div class="page-box" page="36">
            <div v-if="showPageList.indexOf(36) > -1">
                <h1>
                    <img src="../../assets/images/page6-header-green.png" alt="" style="width: 100%; height: auto" />
                </h1>
                <div class="bodystyle">
                    <h2 id="b020">单元活动任务</h2>
                    <h3 class="lefth3" id="c039"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
                    <p class="center"><span class="hs">形体操练习</span></p>
                    <p><span class="hs1">◇</span>头部运动</p>
                    <p>第1个八拍：右手越过头顶摸左耳，向右轻轻压头部。</p>
                    <p>第2个八拍：左手越过头顶摸右耳，向左轻轻压头部。</p>
                    <p>第3个八拍：头部顺时针转一圈。</p>
                    <p>第4个八拍：头部逆时针转一圈。</p>
                    <p><span class="hs1">◇</span>开肩练习</p>
                    <p>平视前方，肩膀放松，双手自然下垂，双脚打开，与肩同宽。</p>
                    <p>第1个八拍：第1-4拍手肘内侧向外转动，带动 双肩打开；第5-8拍手肘内侧向内收回，后背拱起，带动双肩内扣。</p>
                    <p>第2至第4个八拍：重复第1个八拍的动作。</p>
                    <p><span class="hs1">◇</span>提沉肩运动</p>
                    <p>平视前方，肩膀放松，双手自然下垂，双脚打开，与肩同宽。</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-right">33</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>
                <div class="bodystyle">
                    <img src="../../assets/images/page5.png" alt="" />
                    <p>第1至第2个八拍：双手下垂，手心向下，双肩上提再沉下，两拍一动。</p>
                    <p>第3至第4个八拍：双手下垂，手心向下，左右肩膀依次上提再沉下，一拍一动。</p>
                    <p><span class="hs1">◇</span>伸展运动</p>
                    <p>身体放松，膝盖微屈，上身自然弯曲下沉，手臂自然下垂。</p>
                    <p>第1个八拍：第1-7拍身体直起，双臂举起，踮起脚尖；第8拍还原初始状态。</p>
                    <p>第2至第4个八拍：重复第1个八拍的动作。</p>
                    <h3 class="lefth3" id="c040"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p><span class="hs1">◇</span>写一篇排演总结，分享学习经验和感受！</p>
                    <p class="center">
                        <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-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
                    <h2>视频: 团结就是力量</h2>
                    </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">34</div>
            </div>
        </div>
    </div>
</template>

<script>
import { getResourcePath } from "@/assets/methods/resources";
export default {
    name: "chapterFour",
    props: {
        showPageList: {
            type: Array,
        },

    },
    //在这里对调用的方法进行挂载
    mounted() {
        this.getVidoePath();
        const bookQuestion = localStorage.getItem("artAndDrama-book-question-four");
        if (bookQuestion) {
            this.questionData = JSON.parse(bookQuestion);
        }
    },
    data() {
        return {
            videoPathOne: "",
            auidoPathOne: "",
            questionData: {
                warnUp: {
                    one: "",
     
                },
                reading: {
                    one: "",
                    two: "",
                },
                table: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                    seven: "",
                    enight: "",
                    nine: "",
                },
            },
        };
    },
    methods: {
        //视频和音频的MD5地址
        async getVidoePath() {
            this.videoPathOne = await getResourcePath(
                "09de7704eeaaf3a210b8c6af0a94d545"
            );
            // this.auidoPathOne = await getResourcePath(
            //   "2c5f6c69b0f9f7a3c03e473cb8c977f5"
            // );
        },
        setBookQuestion() {
            console.log("保存");
            localStorage.setItem(
                "artAndDrama-book-question-four",
                JSON.stringify(this.questionData)
            );
        },
    },
};
</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;
}

.macthing {
    background-color: rgb(188, 220, 164);
    padding: 5% 0%;
}
</style>