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>

            <div class="card shiJiKaoHe" >

            </div>

        </div>
        
    </div>
</template>
<script setup lang="ts">
import { reactive, onMounted } 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();

const itemClick = (type: any) => {
    
};

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

        .card {
            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;
        }

        .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);
        }

        .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);
        }

    }
    
}
</style>