From 24bfecf770d1c85a1d9ee1e41f36d07c7d920a9d Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期四, 06 六月 2024 15:42:14 +0800
Subject: [PATCH] feat:退出考试提示框
---
src/views/menu/index.vue | 81 +++++++++++++++++++++++++++++++++++++++-
1 files changed, 79 insertions(+), 2 deletions(-)
diff --git a/src/views/menu/index.vue b/src/views/menu/index.vue
index aaf3acb..4ff1669 100644
--- a/src/views/menu/index.vue
+++ b/src/views/menu/index.vue
@@ -1,13 +1,90 @@
<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/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>
\ No newline at end of file
--
Gitblit v1.8.0