water_maintenance/src/view/student/trainMain/assessmentSelect.vue

<template>
    <div class="assessmentSelect">
        <NavMenus :back-confirm="false" ></NavMenus>
        <div class="content" >
            
            <!-- <div class="card liLunKaoHe" >
                <div class="txt" >
                    理论考核
                </div>
            </div>

            <div class="card shiJiKaoHe" >
                <div class="txt" >
                    实训考核
                </div>
            </div> -->

            <div
            @click="itemClick(item)"
            :class="'card ' + (item.class)"
            v-for="(item, index) of list" :key="index" >
                <div class="txt" >
                    {{ item.txt }}
                </div>
            </div>

        </div>
        
    </div>
</template>
<script setup lang="ts">
import { reactive, onMounted, ref } from 'vue';
import ItemCard from './itemCard.vue';
import NavMenus from '../components/navMenus.vue';
import StepTips from '../components/stepTips.vue';
import { useUserInfo } from '@/stores/userInfo';
import { useRoute } from 'vue-router';
import router from '@/router/index';
//import { ElLoading } from 'element-plus';

import { getTrainSelfByTid } from '@/api/student/trainMian';

const userInfo = useUserInfo();
const route = useRoute();

const state: anyObj = reactive({
    trainingProgress: {
        show: true,
        name: '课程进度',
        percent: 0,
    },
    tipsMsg: '点击上方【实训学习】开始/继续学习。',
    taskId: route.params.taskId as string,
    trainDetail: {},
    trainSelf: {},
});

let list = ref([
    {
        "class" : "liLunKaoHe",
        "txt" : "理论考核",
    },
    {
        "class" : "shiJiKaoHe",
        "txt" : "实训考核",
    },
]);

const itemClick = (json: any) => {
    console.log("itemClick json", json);
    
    switch(json.class) {

        case 'liLunKaoHe':

            break;

        case 'shiJiKaoHe':

            break;

    }

};

onMounted(() => {

    getTrainSelfByTid(state.taskId).then((res) => {
        
        state.trainSelf = res.data.data;
        const percent = state.trainSelf.studyProgress < 0 ? 0 : state.trainSelf.studyProgress > 1 ? 1 : state.trainSelf.studyProgress;
        state.trainingProgress.percent = percent * 100;
        if (state.trainSelf.isSubmit) {
            state.tipsMsg = '任务已完成，共享报告中可选择需要的文件下载查看。';
        }
        else if (percent == 1) {
            state.tipsMsg = '实训学习已完成，点击上方【技术报告编制】开始或继续编写报告。';
        }

        console.log("--- state.trainSelf ---", state.trainSelf);

    });
    
});

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

        .card {
            position: relative;
            width: 31.85rem;
            height: 42.71rem;
            display: inline-block;
            margin: 0px 3.21rem 0px 3.21rem;
            // 手势
            cursor:pointer;

            background-size: 100% auto;
            background-repeat: no-repeat;
            background-position: center center;

            .txt {
                position: absolute;
                width: 100%;
                font-weight: 500;
                font-size: 2.5rem;
                color: #BBD3CF;
                text-align: center;
                bottom: 9.64rem;
            }

        }

        .liLunKaoHe {
            background-image: url(/src/assets/student/step/new/LiLunKaoHe_No.webp);
        }

        .liLunKaoHe:hover {
            background-image: url(/src/assets/student/step/new/LiLunKaoHe_Yes.webp);

            .txt {
                color: #9DFFD7;
            }
        }

        .shiJiKaoHe {
            background-image: url(/src/assets/student/step/new/ShiJiKaoHe_No.webp);
        }

        .shiJiKaoHe:hover {
            background-image: url(/src/assets/student/step/new/ShiJiKaoHe_Yes.webp);
            .txt {
                color: #9DFFD7;
            }
        }

    }
    
}
</style>