<template>
|
<div class="menu-container container mx-auto py-5">
|
<div class="categroy-item mb-5" v-for="menu in menuList">
|
<el-row class="mb-2">
|
<div class="menu-title text-lg font-bold">{{ menu.name }}</div>
|
</el-row>
|
<el-row :gutter="20" class="mb-2">
|
<el-col :span="3" v-for="item in menu.categroy">
|
<div class="menu-item cursor-pointer" @click="menuClick(item)">
|
<el-card shadow="hover" class="menu-card">
|
<div class="item-icon mx-auto">
|
<img :src="item.iconPath" class="icon-img" alt="">
|
</div>
|
<div class="item-title text-center">
|
{{ item.title }}
|
</div>
|
</el-card>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue';
|
import { useRouter } from 'vue-router';
|
|
const router = useRouter();
|
|
const menuList = ref([
|
{
|
name: '课程',
|
categroy: [
|
{
|
title: '在线培训',
|
iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href,
|
path: '/train'
|
},
|
{
|
title: '我的课程',
|
iconPath: new URL('@/assets/icons/icon1.png', import.meta.url).href,
|
path: '/exam-list'
|
},
|
]
|
},
|
{
|
name: '考试',
|
categroy: [
|
{
|
title: '我的考试',
|
iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href,
|
path: '/exam-list'
|
},
|
{
|
title: '我的成绩',
|
iconPath: new URL('@/assets/icons/icon1.png', import.meta.url).href,
|
path: '/grade-list'
|
},
|
]
|
},
|
]);
|
|
const menuClick = (item) => {
|
if (item.path) {
|
router.push(item.path);
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
@media (min-width: 1836px) {
|
.container {
|
max-width: 1724px;
|
}
|
}
|
|
.menu-card {
|
border-radius: 10px;
|
|
&:hover {
|
border: 1px solid #1890ff;
|
}
|
}
|
|
.item-icon {
|
width: 65%;
|
}
|
|
.icon-img {
|
width: 100%;
|
object-fit: cover;
|
}
|
</style>
|
