water_maintenance/src/view/student/trainChapter/trainChapter.vue

<template>
    <div class="chapter-container">
        <div v-if="!state.hasRead" class="chapter-describe">
            <div class="describe-cnt" v-html="state.readHtml"></div>
            <div class="describe-readed">
                <a class="readed-btn" :class="{ reading: state.readingTime > 0 }" @click="hasReadClick">知道了{{ state.readingTime > 0 ? ` (${state.readingTime}s)` : '' }}</a>
            </div>
        </div>
        <div v-if="state.hasRead && state.showCnt" class="chapter-box">
            <NavMenus :back-confirm="state.lastChapterNum != maxChapterNum"></NavMenus>
            <div class="chapter-content">
                <div class="menu-box" :class="{ fold: state.menuFold }">
                    <div class="menu-title">{{ state.chapterTree[state.currentStep]?.name ?? '' }}</div>
                    <div class="menu-list">
                        <el-scrollbar :max-height="state.menuListHeight">
                            <!-- 没有子菜单，上下顶级菜单 space="7rem" 间距太高，这里进行修改减少 -->
                            <!-- <el-steps direction="vertical" space="7rem" :active="state.currentStep"> -->
                            <el-steps direction="vertical" space="3rem" :active="state.currentStep">
                                <el-step v-for="(item, idx) in state.chapterTree" :title="item.name" @click="menuClick($event, idx)">
                                    <template #icon>
                                        <div class="step-icon">
                                            <div class="step-icon-inner"></div>
                                        </div>
                                    </template>
                                    <template #description v-if="item.children?.length > 0">
                                        <el-steps
                                            direction="vertical"
                                            space="1.8rem"
                                            :active="idx < state.currentStep ? item.children.length : idx > state.currentStep ? -1 : state.activeSecondMenu"
                                        >
                                            <el-step v-for="item1 in item.children" :title="item1.name" @click="menuClick($event, idx, item1.id)">
                                                <template #icon><div class="step-icon-second"></div></template>
                                            </el-step>
                                        </el-steps>
                                    </template>
                                </el-step>
                            </el-steps>
                        </el-scrollbar>
                        <div class="menu-switch" @click="menuSwitch"></div>
                    </div>
                </div>
                <div v-if="state.currentChapter.type != 30" class="chapter-detail">
                    <div class="detail-title">{{ state.currentChapter.name }}</div>
                    <div class="detail-cnt" v-html="htmlContent"></div>
                </div>
                <!-- <div v-else class="chapter-3d">
                    <CourseChapter3d :config="state.chapterTree[state.currentStep]?.threeDimensionalConfig ?? ''"></CourseChapter3d>
                    <CourseChapter3dView></CourseChapter3dView>
                </div> -->
            </div>

            <!-- 后台交互,显示,上一步下一步逻辑UI -->
            <StepTips
                v-if="
                    stepTipsLook == true
                    && (
                        (
                            courseChapter3dShow().show.showToastViewBool == false
                            && courseChapter3dShow().show.showLinkOkNextBool == false
                        )
                        || (
                            courseChapter3dShow().show.showToastViewBool == true
                            && courseChapter3dShow().show.showToastState == ''
                            && courseChapter3dShow().show.showLinkOkNextBool == false
                        )
                    )
                "
                :msg="state.tipsMsg"
                :btns="state.tipsBtns"
                :countdown="tipsCountdown"
                :key="state.tipsKey"
            ></StepTips>
        </div>

        <!-- 3d组件放在这里，让它可以隐藏起来，提前加载好场景。要不然后续切换3d场景每次要重新加载，比较麻烦 -->
        <!-- <div v-show="state.hasRead && state.showCnt && state.currentChapter.type == 30" class="chapter-3d"> -->
        <div v-if="courseChapter3dViewBool == true" class="chapter-3d">
            <div v-show="state.hasRead && state.showCnt && state.currentChapter.type == 30">

                <!-- 老版本的三维逻辑了，用不到了 -->
                <!-- <CourseChapter3d
                    :config="state?.currentChapter ?? ''"
                    :studentTaskIdList="studentTaskIdList"
                    @tipsBtnsUpOpen="tipsBtnsUpOpenEvent"
                    @tipsBtnsDownOpen="tipsBtnsDownOpenEvent"
                ></CourseChapter3d>

                <CourseChapter3dView
                    @showOperationHelpExitEvent="showOperationHelpExitEvent"
                    @carCameraScreenshot="carCameraScreenshotEvent"
                    @carShutDown="carShutDownEvent"
                ></CourseChapter3dView> -->
                
                <QingXiCheAndQvMain :initTime="initTimeQingXiCarAndQv" :processUiOpen="(stepTipsLook == true ? false : true)"
                @callbackProgress="callbackProgressQingXiCheAndQv" ></QingXiCheAndQvMain>

            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, computed, watch, onUnmounted, nextTick, ref } from 'vue';
import NavMenus from '../components/navMenus.vue';
import StepTips from '../components/stepTips.vue';
import { useRoute } from 'vue-router';
import { getCourseInfo, getCourseChapterTree, studyReport, getCurrentChapter, updateProgress } from '@/api/student/trainChapter';
import { studentTaskOptionPipDefectListByStudentId } from '@/api/student/studentTaskOptionPipDefect';
import CourseChapter3d from '@/components/student/CourseChapter3d.vue';
import CourseChapter3dView from '@/components/student/courseChapter3d/view.vue';
import QingXiCheAndQvMain from '@/components/ThreeWorldEventQingXiCheAndQv/QingXiCheAndQvMain.vue';
import { getTrainDetail } from '@/api/student/trainList';
import router from '@/router/index';
import { courseChapter3dShow } from '@/stores/courseChapter3dShow.ts';
import { threeWorld } from '@/stores/threeWorld.ts';
import { uploadFileOss, getLiteMeta } from '../../../util/fileUtils';
import { ElMessage, ElMessageBox, ElNotification } from 'element-plus';
import { studentTaskPhoto } from '@/api/techer/taskStudentScore';
import { ModelHtml5Audio } from "../../../components/student/event/ModelHtml5Audio.ts";

const route = useRoute();
const taskId = route.params.taskId as string;
const studentTaskId = route.params.studentTaskId as string;
const state: anyObj = reactive({
    hasRead: true,
    readingTime: 10,
    readHtml: '',
    showCnt: false,
    menuFold: false,
    menuListHeight: ``,
    tipsKey: 0,
    tipsMsg: '',
    tipsBtns: [],
    chapterTree: [],
    currentStep: 0,
    currentNode: 0,
    currentChapter: { type: 10 },
    activeSecondMenu: -1,
    lastChapterNum: -1,
});

// 播放声音
let objAudio =  new ModelHtml5Audio();
let chapterQueue: Array<Array<anyObj>> = [];
let maxChapterNum = 0;
// 获取当前学生任务ID缺陷列表
let studentTaskIdList: any = ref([]);
// 用于控制3d场景什么时候加载显示
let courseChapter3dViewBool = ref(false);

/**
 * 因为引入了其他三维场景
 * 三维场景里,自带了上一步,下一步的逻辑UI
 * 所以控制,原先前端UI的 上一步,下一步的UI逻辑是否显示还是隐藏
 */
let stepTipsLook = ref(true);

// 控制清洗车回到第一个流程逻辑
let initTimeQingXiCarAndQv = ref("0");

const buildChapterQueue = (data: anyObj[], optionChapters: anyObj[], root = true): anyObj[] => {
    let chapters: anyObj[] = [];
    data?.forEach((item, idx) => {
        const children = item.children;
        //delete item.children;
        const opt = optionChapters.find((x) => x.chapterId == item.id);
        if (opt) item.durationStudyMin = opt.durationStudyMin;
        chapters.push(item);
        if (children && children.length > 0) {
            const childs = buildChapterQueue(children, optionChapters, false);
            chapters = chapters.concat(childs);
        }
        if (root) {
            chapterQueue[idx] = [...chapters];
            chapters = [];
        }
    });
    if (root) maxChapterNum = (chapterQueue.length - 1) * 100 + chapterQueue[chapterQueue.length - 1].length - 1;
    return chapters;
};
const menuSwitch = () => {
    state.menuFold = !state.menuFold;
};
const menuClick = (evt: Event, step: number, nodeId?: string) => {
    if ((evt.target as HTMLElement).classList.contains('el-step__title')) {
        let chapterNum = step * 100,
            node = 0;
        if (nodeId) {
            node = chapterQueue[step].findIndex((x) => x.id == nodeId);
            if (node > -1) chapterNum += node;
        }
        if (chapterNum <= state.lastChapterNum) {
            state.currentStep = step;
            state.currentNode = node;
            state.currentChapter = chapterQueue[step][node];
        } else {
            ElMessage({
                message: '该章节还未完成学习，请先按顺序完成学习！',
                type: 'warning',
            });
        }
    }
    evt.stopPropagation();
};
const hasReadClick = () => {
    state.hasRead = true;
    state.showCnt = true;
    setMenuListHeight();
};
const setMenuListHeight = () => {
    nextTick(() => {
        let height = document.querySelector('.menu-box')?.clientHeight ?? 0;
        if (height) state.menuListHeight = `calc(${height}px - 12rem)`;
    });
};
const countdown = (name: string, callback?: Function) => {
    if (state[name]) {
        const interval = setInterval(() => {
            state[name]--;
            if (state[name] == 0) {
                clearInterval(interval);
                if (callback) callback();
            }
        }, 1000);
    }
};
const tipsCountdown = computed(() => {
    let countdown = state.currentChapter.durationStudyMin ?? 0;
    const chapterNum = state.currentStep * 100 + state.currentNode;
    if (chapterNum <= state.lastChapterNum) countdown = 0;
    return countdown;
});
const htmlContent = computed(() => {
    if (state.currentChapter.type == 10) {
        return state.currentChapter.richText;
    } else if (state.currentChapter.type == 20) {
        return `<iframe src='${state.currentChapter.videoUrl}' width='100%' height='99%' scrolling='no' frameborder='0'><iframe>`;
    } else return '';
});
const prevStep = () => {
    if (state.currentNode == 0) {
        state.currentStep--;
        state.currentNode = chapterQueue[state.currentStep].length - 1;
    } else state.currentNode--;
    state.currentChapter = chapterQueue[state.currentStep][state.currentNode];
};
const nextStep = () => {
    updateStudyProgress();
    state.currentNode++;
    if (state.currentNode >= chapterQueue[state.currentStep].length) {
        state.currentStep++;
        state.currentNode = 0;
    }
    state.currentChapter = chapterQueue[state.currentStep][state.currentNode];
};
const completeStudy = () => {
    updateStudyProgress();
    router.push({ path: `/train/main/${taskId}` });
};
const updateStudyProgress = () => {
    //更新学习进度
    const num = state.currentStep * 100 + state.currentNode;
    if (num > state.lastChapterNum) {
        state.lastChapterNum = num;
        updateProgress(studentTaskId, state.currentChapter.id);
    }
};
const initTips = () => {
    state.tipsKey++;
    state.tipsMsg = state.currentChapter.tips;
    
    // 得到三维的参数
    let threeDimensionalConfig = state.currentChapter.threeDimensionalConfig;

    console.log(
        "initTips ===> 每次进入不同流程后,进行处理的逻辑",
        state.tipsMsg, state.currentChapter, threeDimensionalConfig
    );

    // /**
    //  * 因为加入了其他三维场景
    //  * 他们有自带的上一步,下一步的UI控制
    //  * 所以这里进行特殊处理
    //  */
    // if (typeof threeDimensionalConfig == "string" && threeDimensionalConfig == "仿真模拟_清洗车") {
    //     var thisTime = new Date().getTime();

    //     initTimeQingXiCarAndQv.value = "" + thisTime;

    //     // 此时进入三维场景,就默认进入到最后一个步骤
    //     state.tipsBtns = [
    //         {
    //             name: '上一步',
    //             click: prevStep,
    //             attr: { type: 'primary', plain: 'plain' },
    //         },
    //         {
    //             name: '完成并前往编制报告',
    //             click: completeStudy,
    //             attr: { type: 'primary' },
    //         },
    //     ];

    //     // 同时先隐藏UI
    //     stepTipsLook.value = false;

    //     return;
    // }

    // 显示UI
    stepTipsLook.value = true;

    if (state.currentStep == 0 && state.currentNode == 0) {
        state.tipsBtns = [
            {
                name: '下一步',
                click: nextStep,
                attr: { type: 'primary' },
            },
        ];
    } else if (state.currentStep == chapterQueue.length - 1 && state.currentNode == chapterQueue[state.currentStep].length - 1) {
        state.tipsBtns = [
            {
                name: '上一步',
                click: prevStep,
                attr: { type: 'primary', plain: 'plain' },
            },
            {
                name: '完成并前往编制报告',
                click: completeStudy,
                attr: { type: 'primary' },
            },
        ];
    } else {
        state.tipsBtns = [
            {
                name: '上一步',
                click: prevStep,
                attr: { type: 'primary', plain: 'plain' },
            },
            {
                name: '下一步',
                click: nextStep,
                attr: { type: 'primary' },
            },
        ];
    }

    /**
     * 因为加入了其他三维场景
     * 他们有自带的上一步,下一步的UI控制
     * 所以这里进行特殊处理
     */
    if (typeof threeDimensionalConfig == "string" && threeDimensionalConfig == "仿真模拟_清洗车") {
        
        var thisTime = new Date().getTime();

        initTimeQingXiCarAndQv.value = "" + thisTime;
        // 隐藏 上一步，下一步 UI
        stepTipsLook.value = false;

    }

};
let studyInterval: NodeJS.Timeout;
// 开场音乐
let musicIndex = new URL("./../../../assets/music/index.mp3", import.meta.url).href;
onMounted(() => {

    // // 第一次进来播放指定的声音
    // objAudio.pause();
    // // 设置播放音乐的文件，或者地址
    // objAudio.setUrl(musicIndex);
    // // 不需要循环播放
    // objAudio.loopClose();
    // // 继续播放音乐
    // objAudio.start();

    threeWorld().loadSuccess = false;
    courseChapter3dViewBool.value = false;

    //学习时间上报
    studyInterval = setInterval(() => {
        const type = state.currentChapter.type != 30 ? 1 : 2;
        studyReport(studentTaskId, type);
    }, 1000 * 100);

    //获取任务信息
    getTrainDetail(taskId).then((res) => {
        //获取课程信息
        getCourseInfo(res.data.data.courseId).then((res1) => {
            if (res1.data.data.description) {
                state.hasRead = false;
                state.readHtml = res1.data.data.description;
                countdown('readingTime');
            } else {
                state.hasRead = true;
                state.showCnt = true;
                setMenuListHeight();
            }
            window.addEventListener('resize', () => {
                setMenuListHeight();
            });
        });

        //获取课程树
        getCourseChapterTree(res.data.data.courseId).then((res2) => {
            state.chapterTree = res2.data.data;
            buildChapterQueue(res2.data.data, res.data.data.optionChapters);
            //需先根据学习进度确定开始章节：currentStep和currentNode，默认第一章第一节
            //获取学习到的章节
            getCurrentChapter(studentTaskId).then((res3) => {
                const chapterId = res3.data.data;
                if (chapterId) {
                    for (let i = 0; i < chapterQueue.length; i++) {
                        const idx = chapterQueue[i].findIndex((x) => x.id == chapterId);
                        if (idx > -1) {
                            state.currentStep = i;
                            state.currentNode = idx;
                            break;
                        }
                    }
                    state.lastChapterNum = state.currentStep * 100 + state.currentNode;
                }
                state.currentChapter = chapterQueue[state.currentStep][state.currentNode];
                initTips();
            });
        });

        // 根据学生id任务获取缺陷数据
        studentTaskOptionPipDefectListByStudentId(studentTaskId)
            .then((studentTaskOptionPipDefectListByStudentIdRes) => {
                studentTaskIdList.value = studentTaskOptionPipDefectListByStudentIdRes?.data?.data;

                courseChapter3dViewBool.value = true;

                // console.log(
                //     "根据学生id任务获取缺陷数据",
                //     studentTaskIdList.value,
                //     studentTaskId
                // );
            })
            .catch((error) => {
                courseChapter3dViewBool.value = true;
            });
    });
});
onUnmounted(() => {
    if (studyInterval) clearInterval(studyInterval);
});
watch(
    () => state.currentChapter,
    (newVal) => {
        initTips();

        //滚动当前课程菜单至可视区域
        nextTick(() => {
            const target = document.querySelector('.el-step__description .is-process') as HTMLElement;
            target?.scrollIntoView({ behavior: 'smooth', block: 'center' });
        });

        //课程菜单默认显示二级，兼容课程树层级大于二级的情况
        if (state.currentNode == 0) state.activeSecondMenu = -1;
        else {
            const idx = (state.chapterTree[state.currentStep].children as anyObj[])?.findIndex((x) => x.id == newVal.id);
            if (idx > -1) state.activeSecondMenu = idx;
        }
    }
);

/**
 * 检测实训注意事项 知道了点击回调
 */
courseChapter3dShow().show.showMatterGotItCallback = function () {
    // console.log(
    //     "检测实训注意事项 知道了点击回调", res
    // );

    // 触发下一步逻辑
    nextStep();
};

/**
 * 监听弹出提示隐藏后来触发不同的逻辑
 */
watch(
    () => courseChapter3dShow().show.showToastViewBool,
    (newVal, oldVal) => {
        if (courseChapter3dShow().show.showToastViewBool == true) {
            return;
        }

        // console.log(
        //     " () => courseChapter3dShow().show.showToastState 1111111111 ",
        //     courseChapter3dShow().show.showToastState
        // );

        switch (courseChapter3dShow().show.showToastState) {
            case '立即穿戴':
                // // 触发下一步逻辑
                // nextStep();
                break;
        }
    }
);

// 记录 tipsBtnsUpOpenEvent 事件是否显示上一步按钮
let tipsBtnsUpOpenEventBool: Boolean = true;

/**
 * 上一步是否显示
 * open     true - 显示， false - 隐藏
 */
const tipsBtnsUpOpenEvent = (open: Boolean) => {
    // console.log("上一步是否显示", open);
    tipsBtnsUpOpenEventBool = open;
    tipsBtnsUpAndDownOpenEvent();
};

// 记录 tipsBtnsUpOpenEvent 事件是否显示下一步按钮
let tipsBtnsDownOpenEventBool: Boolean = true;

/**
 * 下一步是否显示
 * open     true - 显示， false - 隐藏
 */
const tipsBtnsDownOpenEvent = (open: Boolean) => {
    // console.log("下一步是否显示", open);
    tipsBtnsDownOpenEventBool = open;
    tipsBtnsUpAndDownOpenEvent();
};

/**
 * 通过3d传来的事件来控制上一步下一步是否显示逻辑
 */
const tipsBtnsUpAndDownOpenEvent = () => {
    let newArray = [];

    if (tipsBtnsUpOpenEventBool == true) {
        // newArray.push({
        //     name: '上一步',
        //     click: prevStep,
        //     attr: { type: 'primary', plain: 'plain' },
        // });
    }

    if (tipsBtnsDownOpenEventBool == true) {
        newArray.push({
            name: '下一步',
            click: nextStep,
            attr: { type: 'primary' },
        });
    }

    // console.log(
    //     " ========= state.tipsBtns ========= ",
    //     state.tipsBtns
    // );

    // 如果出现 完成并前往编制报告 则不替换
    try {
        for (let i = 0; i < state.tipsBtns.length; i++) {
            let thisTipsBtns = state.tipsBtns[i];
            if (thisTipsBtns.name.indexOf('完成') >= 0) {
                return;
            }
        }
    } catch (e) {}

    state.tipsBtns = newArray;
};

// 操作帮助点击退出
const showOperationHelpExitEvent = () => {
    // 触发下一步逻辑
    nextStep();
};

/**
 * 车的完成下井实验
 */
const carShutDownEvent = () => {
    // 触发下一步逻辑
    nextStep();
};

/**
 * 车的相机截图
 * img       base64位图片
 */
const carCameraScreenshotEvent = (img: any) => {
    // console.log(
    //     "车的相机截图", img
    // );

    // 将 base64为转换成，Blob格式
    let objBlob = dataURLtoBlob(img);
    // blob 转换成 file对象
    const file = new File([objBlob], 'example.png', { type: 'text/plain' });

    // 优先上传文件
    // @ts-ignore
    uploadFileOss(file, 'course/cover', null)
        .then(function (e: any) {
            // console.log(
            //     "上传文件", e
            // );

            studentTaskPhoto({
                studentTaskId: studentTaskId,
                imageUrl: e,
                remark: '',
            })
                .then(function (studentTaskPhotoRes: any) {
                    // console.log(
                    //     "上传文件成功", studentTaskPhotoRes
                    // );

                    // ElMessage({
                    //     message: '截图上传完成',
                    //     type: 'success',
                    // });

                    courseChapter3dShow().show.showToastViewBool = false;

                    courseChapter3dShow().show.showPromptEvent('截图上传完成', null, function (res: any) {
                        // console.log("yes", res);
                    });
                })
                .catch(function (studentTaskPhotoResError: any) {
                    // ElMessage({
                    //     message: '上传失败',
                    //     type: 'warning',
                    // });

                    courseChapter3dShow().show.showToastViewBool = false;
                    courseChapter3dShow().show.showPromptEvent('上传失败', null, function (res: any) {
                        // console.log("yes", res);
                    });
                });
        })
        .catch(function (e: any) {
            // ElMessage({
            //     message: e || '上传失败',
            //     type: 'warning',
            // });

            courseChapter3dShow().show.showToastViewBool = false;
            courseChapter3dShow().show.showPromptEvent('上传失败', null, function (res: any) {
                // console.log("yes", res);
            });
        });
};

/**
 * 将base64转换为blob
 * @param dataurl   base64位图片
 */
const dataURLtoBlob = (dataurl: any) => {
    let arr = dataurl.split(','),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
};

/**
 * 清洗车自定义回调步骤
 */
const callbackProgressQingXiCheAndQv = (json : any) => {
    console.log("callbackProgressQingXiCheAndQv ===>", json);

    // 完成所有步骤
    if (json.name == "equipmentRepositioningWork") {
        stepTipsLook.value = true;
    }

}

</script>
<style lang="scss" scoped>
.chapter-container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;

    .chapter-describe {
        position: relative;
        width: 70%;
        height: 90%;
        background-image: url(/src/assets/student/bg_describe.png);
        background-size: 100% 100%;
        &:before {
            content: '';
            position: absolute;
            top: 3%;
            left: 28%;
            height: 6%;
            width: 70%;
            background-image: url(/src/assets/student/training.png);
            background-size: auto 100%;
            background-repeat: no-repeat;
        }
        .describe-cnt {
            overflow: auto;
            box-sizing: border-box;
            position: absolute;
            inset: 10rem 0 10rem 6rem;
            padding-right: 4rem;
        }
        .describe-readed {
            position: absolute;
            bottom: 3rem;
            width: 100%;
            display: flex;
            justify-content: center;
            .readed-btn {
                width: 20rem;
                height: 5.4rem;
                line-height: 5.4rem;
                text-align: center;
                color: white;
                font-size: 2rem;
                border-radius: 0.8rem;
                background: linear-gradient(90deg, #6cd9e9 0%, #4b90dd 100%);
                cursor: pointer;
                &.reading {
                    pointer-events: none;
                }
            }
        }
    }
    .chapter-box {
        width: 100%;
        height: 100%;
    }
    .chapter-content {
        position: absolute;
        width: 100%;
        height: 100%;
        .menu-box {
            position: absolute;
            top: 3.2rem;
            left: 2rem;
            width: 20rem;
            height: calc(100% - 18rem);
            transition-property: left;
            transition-duration: 0.6s;
            z-index: 2;
            &.fold {
                left: -20rem;
                .menu-switch {
                    background-image: url(/src/assets/student/training/menu_switch1.png);
                }
            }
            .menu-switch {
                position: absolute;
                width: 2rem;
                height: 5rem;
                background-image: url(/src/assets/student/training/menu_switch.png);
                background-size: 100% 100%;
                right: -2rem;
                top: 50%;
                margin-top: -2.5rem;
                cursor: pointer;
            }
            .menu-title {
                height: 5rem;
                background-image: url(/src/assets/student/training/menu_title.png);
                background-size: 100% 100%;
                color: white;
                // font-size: 2rem;
                font-size: 1.8rem;
                overflow: hidden;

                &:before {
                    content: '';
                    display: inline-block;
                    vertical-align: middle;
                    height: 5rem;
                    width: 8rem;
                    background-image: url(/src/assets/student/training/menu_icon.png);
                    background-size: auto 50%;
                    background-repeat: no-repeat;
                    background-position: center center;
                }
            }
            .menu-list {
                position: relative;
                min-height: 20rem;
                max-height: calc(100% - 6rem);
                margin-top: 1rem;
                padding: 3rem 0 3rem 2rem;
                background-image: url(/src/assets/student/training/menu_list.png);
                background-size: 100% 100%;
                box-sizing: border-box;
                --step-item-size: 2rem;
                --step-icon-size: 1.2rem;
                --step-line-left: 0.9rem;
                --step-border-width: 0.2rem;
                .step-icon {
                    width: var(--step-item-size);
                    height: var(--step-item-size);
                    border-radius: 50%;
                    border: var(--step-border-width) solid #5faaf4;
                    box-sizing: border-box;
                    transition: 0.15s ease-out;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    .step-icon-inner {
                        width: var(--step-icon-size);
                        height: var(--step-icon-size);
                        background-size: 100% 100%;
                    }
                }
                :deep(.el-step__head) {
                    width: var(--step-item-size);
                    .el-step__line {
                        width: var(--step-border-width);
                        top: var(--step-item-size);
                        left: var(--step-line-left);
                        background-color: #5faaf4;
                    }
                    .el-step__icon {
                        width: unset;
                        height: unset;
                        background: transparent;
                        display: flex;
                    }
                    &.is-process .step-icon-inner {
                        background-image: url(/src/assets/student/training/step_process.png);
                    }
                    &.is-finish .step-icon-inner {
                        background-image: url(/src/assets/student/training/step_finish.png);
                    }
                }
                :deep(.el-step__main) {
                    padding-left: 2rem;
                    padding-right: 2rem;
                    .el-step__title {
                        // font-size: var(--step-item-size);
                        font-size: 1.5rem;
                        color: white;
                        font-weight: unset;
                        line-height: var(--step-item-size);
                        cursor: pointer;
                        &.is-process,
                        &.is-finish {
                            text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
                            background: linear-gradient(180deg, #82ccdd 0%, #589cf2 100%);
                            background-clip: text;
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                        }
                    }
                    .el-step__description {
                        margin-left: -1.1rem;
                        // --step-item-size: 0.9rem;
                        --step-item-size: 1.1rem;
                        --step-icon-size: 0.6rem;
                        .el-steps {
                            margin: 0.8rem 0;
                        }
                        .el-step__head {
                            width: var(--step-icon-size);
                            &.is-process .step-icon-second {
                                background-color: #5ff49b;
                            }
                            &.is-finish .step-icon-second {
                                background-color: #5fa9f4;
                            }
                        }
                        .el-step__icon {
                            height: var(--step-item-size);
                            line-height: var(--step-item-size);
                        }
                        .step-icon-second {
                            width: var(--step-icon-size);
                            height: var(--step-icon-size);
                            border-radius: 50%;
                            box-sizing: border-box;
                            background-color: #ccc;
                        }
                        .el-step__line {
                            width: 0.1rem;
                            left: 0.25rem;
                            top: 0.6rem;
                            bottom: -0.4rem;
                            margin-bottom: unset !important;
                            &:after {
                                display: none;
                            }
                        }
                        .el-step:last-of-type .el-step__line {
                            display: none;
                        }
                        .el-step__main {
                            padding-left: 0.6rem;
                        }
                        .el-step__title {
                            font-size: var(--step-item-size);
                            &.is-process {
                                color: #5ff49b;
                                -webkit-text-fill-color: unset;
                            }
                            &.is-finish {
                                color: #5fa9f4;
                                -webkit-text-fill-color: unset;
                            }
                        }
                    }
                }
                :deep(.el-step:last-of-type) {
                    .el-step__line {
                        display: block;
                        margin-bottom: 1rem;
                        &:after {
                            content: '';
                            position: absolute;
                            border: 0.8rem solid transparent;
                            border-top-color: #5faaf4;
                            bottom: -1rem;
                            left: -0.7rem;
                        }
                        .el-step__line-inner {
                            transition-delay: 150ms;
                            border-width: 0px;
                            height: 0%;
                        }
                    }
                }
            }
        }
        .chapter-detail {
            position: absolute;
            top: 3.2rem;
            left: 28rem;
            width: 88rem;
            height: 56rem;
            max-height: calc(100% - 12rem);
            background-image: url(/src/assets/student/training/window_bg.png);
            background-size: 100% 100%;
            .detail-title {
                height: 18%;
                font-size: 3rem;
                text-align: center;
                color: white;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .detail-cnt {
                height: 76%;
                padding: 0 5rem;
                box-sizing: border-box;
                overflow: auto;
                :deep(img) {
                    max-width: 100%;
                }
            }
        }
    }
}
</style>