ZhangXianQiang
2024-06-20 6e226cf788a6f06d90f20a2a8bd3306a4b73be82
src/views/menu/index.vue
@@ -6,7 +6,7 @@
      </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">
          <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="">
@@ -25,35 +25,43 @@
<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/icon1.png', import.meta.url).href
      },
      {
        title: '我的考试',
        iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href
      },
        title: '在线培训',
        iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href,
        path: '/train'
      }
    ]
  },
  {
    name: '考试',
    categroy: [
      {
        title: '我的课程',
        iconPath: new URL('@/assets/icons/icon1.png', import.meta.url).href
        title: '我的考试',
        iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href,
        path: '/exam-list'
      },
      {
        title: '我的考试',
        iconPath: new URL('@/assets/icons/icon2.png', import.meta.url).href
        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>
@@ -72,13 +80,11 @@
}
.item-icon {
  width: 90px;
  height: 90px;
  width: 65%;
}
.icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>