首页增加三级菜单

src/views/home/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<navMmenu />
+	<nav-menu />
 	<!-- <div v-if="pageLoading">
 			<el-main>
 				<el-card shadow="never">
@@ -13,8 +13,8 @@
 		<widgets /> -->
 </template>
 
-<script setup lang="ts" name="dashboard">
-const navMmenu = defineAsyncComponent(() => import('./navMenu/index.vue'));
+<script setup lang="ts">
+const NavMenu = defineAsyncComponent(() => import("./navMenu/index.vue"))
 
 // const Widgets = defineAsyncComponent(() => import('./widgets/index.vue'));
 // const pageLoading = ref(true);

src/views/home/navMenu/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<el-card class="card" v-loading="loading">
 		<el-row>
-			<el-col :span="4" v-for="(item, index) in navMenuList" :key="index">
+			<el-col :span="3" v-for="(item, index) in navMenuList" :key="index">
 				<div
 					:class="['nav-menu-item-top', item.id == currentActiveMenuId ? 'nav-menu-item-active' : '']"
 					@click="currentActiveMenuId = item.id"
@@ -12,19 +12,28 @@
 			</el-col>
 		</el-row>
 		<br />
-		<el-row v-if="currentActiveMenuId" style="background-color: #e2eff677; border-radius: 1rem; padding: 2rem 6rem">
-			<el-col v-for="(item, index) in navMenuListBottom" :key="index" :span="!item.meta?.isHide ? 4 : 0">
+		<el-row v-if="currentActiveMenuId" style="background-color: #e2eff677; border-radius: 1rem; padding: 2rem">
+			<el-col v-for="(item, index) in navMenuListBottom" :key="index" :span="!item.meta?.isHide ? 2.4 : 0">
 				<div v-if="!item.meta?.isHide" class="nav-menu-item-bottom" @click="handleClickBottomMenu(item)">
 					<el-image class="nav-menu-item-icon" :src="imageBaseUrl + item.menuPic" fit="cover" />
 					<div class="nav-menu-item-name">{{ $t(item.name) }}</div>
 				</div>
 			</el-col>
 		</el-row>
+		<br />
+		<el-row v-if="navMenuLevel3.length > 0" style="background-color: #e2eff677; border-radius: 1rem; padding: 2rem">
+			<el-col v-for="(item, index) in navMenuLevel3" :key="index" :span="!item.meta?.isHide ? 3 : 0">
+				<div v-if="!item.meta?.isHide" class="nav-menu-item-bottom" @click="handleClickNavMenuLevel3(item)">
+					<el-image class="nav-menu-item-icon" :src="imageBaseUrl + item.menuPic" fit="cover" />
+					<div class="nav-menu-item-name">{{ $t(item.name) }}</div>
+				</div>
+			</el-col>
+		</el-row>
 	</el-card>
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
+import { ref, onMounted, onActivated } from "vue"
 import { ElMessage } from "element-plus"
 import { useMenuApi } from "/@/api/admin/menu"
 
@@ -33,6 +42,7 @@ const menuApi = useMenuApi()
 const loading = ref(false)
 const navMenuList = ref<any>([])
 const currentActiveMenuId = ref("")
+const navMenuLevel3 = ref<any>([])
 const imageBaseUrl = import.meta.env.VITE_IMAGE_BASE_PATH
 
 // 获取菜单列表
@@ -52,6 +62,7 @@ const getNavMenuList = async () => {
 
 const navMenuListBottom = computed(() => {
 	if (navMenuList.value) {
+		navMenuLevel3.value = []
 		const currentMenuItem = navMenuList.value.find((item: any) => item.id == currentActiveMenuId.value)
 		if (currentMenuItem && currentMenuItem.children) return currentMenuItem.children
 	} else {
@@ -61,9 +72,16 @@ const navMenuListBottom = computed(() => {
 
 // 点击菜单项
 const handleClickBottomMenu = (item: any) => {
-	router.push(item.path)
+	if (item.children && item.children.length > 0) {
+		navMenuLevel3.value = item.children
+	} else {
+		router.push(item.path)
+	}
 }
 
+// 点击三级菜单
+const handleClickNavMenuLevel3 = (item: any) => router.push(item.path)
+
 onMounted(async () => {
 	await getNavMenuList()
 })
@@ -71,12 +89,13 @@ onMounted(async () => {
 
 <style scoped lang="scss">
 .card {
-	padding: 5vw;
+	padding: 1vh 3vw 0;
 	height: calc(100vh - 85px);
 	background-image: linear-gradient(0deg, #ffffff 0%, #e4ebff 100%);
+	overflow-y: auto;
 }
 .nav-menu-item-top {
-	height: 6.5vw;
+	height: 6vw;
 	padding: 0.5vw;
 	margin: 0.5vw;
 	display: flex;
@@ -89,8 +108,8 @@ onMounted(async () => {
 	cursor: pointer;
 
 	.nav-menu-item-icon {
-		width: 2.5vw;
-		height: 2.5vw;
+		width: 2.2vw;
+		height: 2.2vw;
 	}
 	.nav-menu-item-name {
 		font-size: 1.2vw;
@@ -105,8 +124,8 @@ onMounted(async () => {
 }
 
 .nav-menu-item-bottom {
-	min-height: 4vw;
-	margin: 1vw 2vw;
+	min-height: 3vw;
+	margin: 1vw;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -115,8 +134,8 @@ onMounted(async () => {
 	cursor: pointer;
 
 	.nav-menu-item-icon {
-		width: 2.3vw;
-		height: 2.3vw;
+		width: 2vw;
+		height: 2vw;
 	}
 	.nav-menu-item-name {
 		font-size: 1vw;