virtualSimulation/src/layout/knowledgePage.vue

<template>
    <div class="container-bgc">
        <div class="top">
            <div class="title">{{ setting.title }}</div>
        </div>
        <!-- 右边箭头 -->
        <button class="submit-right" @click="SubRight"></button>
        <!-- 左边按钮 -->
        <button class="submit-left" @click="SubLeft"></button>
        <div class="question-body">
            <div class="sumTotal">第<span>{{currentKnowledgeIndex+1}}</span>个/共{{Knowledges .length}}个</div>
            <div class="question">{{currentKnowledgeTitle}}</div>

            <el-scrollbar height="210px">
                 <div class="txt" v-html="currentKnowledge"></div>
            </el-scrollbar>
            <div class="finished">已学习</div>
        </div>
        <div class="submit-buttons">
            <!-- <button class="submit-btn" @click="reset">退出</button> -->
            <!-- <button class="submit-btn" @click="enter">进入仿真实验</button> -->
            <router-link class="submit-btn" to="">返回</router-link>
            <router-link class="submit-btn" to="/program">完成学习</router-link>
        </div>

    </div>
</template>

<script lang="ts" setup name="knowledgePage">
import settingStore from "@/store/modules/setting";
import { ref, computed, onMounted, } from "vue"
import { ElMessage } from 'element-plus'
import {getKnowledgeService } from '@/api/user'
const setting = settingStore();
//左箭头
const SubLeft = () => {
 console.log(currentKnowledgeIndex.value)
        if(currentKnowledgeIndex.value >= 1){
            currentKnowledgeIndex.value = currentKnowledgeIndex.value - 1
        }else{
            ElMessage.warning('无法上翻')
        }
}
//右箭头
const SubRight = () => {
    if (currentKnowledgeIndex.value+1 < Knowledges.value.length) {
        currentKnowledgeIndex.value++; // 更新到下一题
    }
    else {
        ElMessage.success('知识点已学习完毕，请提交')
    }
}

const Knowledges = ref<any[]>([]);
const getKnowledge = async () => {
    const res: any = await getKnowledgeService();
    Knowledges.value = res.result.records
    // console.log(Knowledges.value,'ress')
}
// 当前题目的索引
    const currentKnowledgeIndex = ref(0);
const currentKnowledge = computed(() => {
        // 确保 questions.value 至少有一个元素
        if (Knowledges.value.length > 0) {
            return Knowledges.value[currentKnowledgeIndex.value].knowledgeContext;
        }
        return '';
        });
        const currentKnowledgeTitle = computed(() => {
        // 确保 questions.value 至少有一个元素
        if (Knowledges.value.length > 0) {
            return Knowledges.value[currentKnowledgeIndex.value].knowledgeName;
           
        }
        return '';
        });

onMounted(() => { getKnowledge() });
</script>

<style lang="scss" scoped>
.container-bgc {
    position: relative;
    width: 100%;
    // height: 1000px;
    min-height: 100vh;
    // background-color: #091d22;
    background: url("@/assets/images/bg3.png") no-repeat;
    background-size: cover;

    .submit-right {
        background: url("@/assets/images/right.png") no-repeat;
        background-size: contain;
        width: 60px;
        /* 按钮宽度 */
        height: 60px;
        /* 按钮高度 */
        border: none;
        cursor: pointer;
        position: absolute;
        right: 0;
        /* 紧靠右部 */
        top: 40%;
        /* 垂直居中*/
    }

    .submit-left {
        background: url("@/assets/images/left.png") no-repeat;
        background-size: contain;
        width: 60px;
        /* 按钮宽度 */
        height: 60px;
        /* 按钮高度 */
        border: none;
        cursor: pointer;
        position: absolute;
        left: 0;
        /* 紧靠左部 */
        top: 40%;
        /* 垂直居中*/
    }

    .top {
        width: 100%;
        height: 75px;
        text-align: center;
        font-size: 42px;
        line-height: 75px;
        font-style: italic;
        background: url("@/assets/images/topbgc.png") no-repeat;
        background-size: cover;

        .title {
            color: #fff;
        }
    }

    .question-body {
        position: relative;
        background: url("@/assets/images/FakeAnimateForPrototype.png") no-repeat center center;
        /* 添加 background-position */
        background-size: 99%;
        /* 确保背景图片覆盖整个元素 */
        width: 1100px;
        /* 100% 宽度以确保背景图片完全显示 */
        height: 600px;
        /* 固定高度 */
        margin-top: 100px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 50px;
        padding-right: 50px;
        padding-top: 30px;

        .sumTotal {
            font-size: 30px;
            /* 字体大小 */
            text-align: right;
            /* 水平居中 */
            letter-spacing: 3px;
            /* 字符间距，单位可以是 px、em 等 */
            color: #dc4758;
            margin-top: 48px;
            margin-bottom: -50px;
        }

        .question {
            font-size: 42px;
            /* 字体大小 */
            text-align: center;
            /* 水平居中 */
            letter-spacing: 3px;
            /* 字符间距，单位可以是 px、em 等 */
            margin-top: 25px;
            margin-bottom: 20px;
            color: #fff;
        }

        .scrollbar-demo-item {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 50px;
            margin: 20px;
            margin-top: 30px;
            text-align: center;
            border-radius: 4px;
            background: var(--el-color-primary-light-9);
            color: var(--el-color-primary);
        }

        .txt {
            margin-top: 28px;
            margin-left: 20px;
            margin-right: 20px;
            font-size: 18px;
            /* 字体大小 */
            font-family: Consolas, sans-serif;
            /* 字体样式 */
            letter-spacing: 1.5px;
            /* 字符间距，单位可以是 px、em 等 */
            line-height: 1.5;
            /* 行间距，1.5 表示字体大小的 1.5 倍 */
            color: #9b9a9a;
        }

        .finished {
            font-size: 30px;
            /* 字体大小 */
            text-align: right;
            /* 水平居中 */
            letter-spacing: 3px;
            /* 字符间距，单位可以是 px、em 等 */
            color: #dc4758;
            margin-top: -235px;
            margin-right: 20px;
        }
    }

    .submit-buttons {
        display: flex;
        /* 使用 Flexbox 布局 */
        flex-direction: row;
        /* 水平排列按钮 */
        justify-content: center;
        /* 水平居中 */
        gap: 450px;
        /* 按钮之间的间距 */
        margin-top: 10px;
    }

    .submit-btn {
        background: url("@/assets/images/Button.png") center;
        background-size: contain;
        /* 确保背景图片覆盖整个元素 */
        background-color: transparent;
        /* 背景颜色设置为透明 */
        border: none;
        /* 移除边框 */
        cursor: pointer;
        /* 鼠标悬停时显示手型 */
        width: 300px;
        height: 41px;
        font-size: 17px;
        font-weight: bold;
        /* 文字加粗 */
        color: #fff;
        display: flex;
        align-items: center;
        /* 垂直居中 */
        justify-content: center;
        /* 水平居中 */
        text-decoration: none
    }

}
</style>