搭建错题本页面

luohairen

2024-11-04 06419b10e17c72e07f1c740836e5abb79df619d0

 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,18 +25,23 @@

<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,
        path: '/train'
      },
      {
        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: '/folder'
      },
    ]
  },
@@ -44,16 +49,29 @@
    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'
      },
      {
        title: '我的错题',
        iconPath: new URL('@/assets/icons/icon3.png', import.meta.url).href,
        path: '/wrong-list'
      },
    ]
  },
]);

const menuClick = (item) => {
  if (item.path) {
    router.push(item.path);
  }
};
</script>

<style lang="scss" scoped>
@@ -72,13 +90,11 @@
}

.item-icon {
  width: 90px;
  height: 90px;
  width: 65%;
}

.icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>