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';

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

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

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

onMounted(() => {
    
});

</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>