艺术戏剧（选择题完成版）

user1

2024-06-21 5b07f649010c3db7b3eb95d64d2d40560637b496

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

@@ -12,7 +12,8 @@
                        <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>
                        <p class="block" style="margin:  8% 5% 5% 7%">
                            在戏剧演出中，除了舞台上的演员，导演、灯光、造型等幕后人员也发挥着重要的作用。本单元让我们从台前走进幕后，向默默奉献的工作人员致敬！</p>
                    </div>
                </div>
                <p><br /></p>
@@ -34,7 +35,8 @@
                    <h3 class="lefth3" id="c031"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>以小组为单位围成一圈，面朝圈外蹲下，相邻两人互挎手臂，组员同时站起来，看看哪个组最快！</p>
                    <p class="text"><span class="hs1">◇</span>说一说：快速站起来的秘诀是什么？</p>
                    <p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 90%"/></p>
                    <p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 90%" /></p>
                    <h3 class="lefth3" id="c032"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>以小组为单位，表演以下场景，注意保持动作一致哦。</p>
                    <p class="text">蚂蚁队长吹响集合号，蚂蚁们迅速跑上场站好队形。</p>
@@ -60,7 +62,8 @@
                <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"><span class="hs1">◇</span>春天来了，春风吹过，柳树发芽了，迎春花开了，小燕子在天空自由地飞翔。一切都是那么生机勃勃。请为“春天”涂上你喜欢的颜色。</p>
                    <p class="text"><span
                            class="hs1">◇</span>春天来了，春风吹过，柳树发芽了，迎春花开了，小燕子在天空自由地飞翔。一切都是那么生机勃勃。请为“春天”涂上你喜欢的颜色。</p>
                    <!-- 图片缺失 -->
                    <!-- <p class="center"><img class="img-e" alt="" src="./../assets/images/0033-1.jpg" /></p> -->
                </div>
@@ -98,7 +101,8 @@
                    <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"><span class="hs1">◇</span>以小组为单位，头顶纸杯，腿夹报纸，进行夹纸运杯游戏！</p>
                    <h3 class="lefth3" id="c036" style="margin-top: 7%"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <h3 class="lefth3" id="c036" 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="center"><img class="img-e" alt="" src="../../assets/images/0035-1.jpg" /></p>
                </div>
@@ -120,7 +124,8 @@
                    <h3 class="lefth3" id="c037"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p class="text"><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" style="margin-top: 7%;"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <h3 class="lefth3" id="c038" 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="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p>
                </div>
@@ -173,7 +178,8 @@
                    <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>
                    <h3 class="lefth3" id="c040" 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"
@@ -199,7 +205,6 @@
        </div>
    </div>
</template>

<script>
import { getResourcePath } from "@/assets/methods/resources";
export default {
@@ -208,7 +213,6 @@
        showPageList: {
            type: Array,
        },

    },
    //在这里对调用的方法进行挂载
    mounted() {
@@ -253,6 +257,13 @@
            },
        };
    },
    //测试
    computed: {
        currentQuestion() {
            return this.questions[this.currentIndex];
        },
    },
    //测试结束
    methods: {
        //视频和音频的MD5地址
        async getVidoePath() {
@@ -291,11 +302,100 @@
            this.handleChapterData();
        },
    },

};
</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%;
}