From 06419b10e17c72e07f1c740836e5abb79df619d0 Mon Sep 17 00:00:00 2001
From: luohairen <3399054449@qq.com>
Date: 星期一, 04 十一月 2024 17:55:38 +0800
Subject: [PATCH] 搭建错题本页面
---
src/views/menu/index.vue | 91 ++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 89 insertions(+), 2 deletions(-)
diff --git a/src/views/menu/index.vue b/src/views/menu/index.vue
index aaf3acb..b6987e4 100644
--- a/src/views/menu/index.vue
+++ b/src/views/menu/index.vue
@@ -1,13 +1,100 @@
<template>
- <div>
-123
+ <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: '/folder'
+ },
+ ]
+ },
+ {
+ 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'
+ },
+ {
+ 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>
+@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>
\ No newline at end of file
--
Gitblit v1.8.0