首页修改

src/views/home/navMenu/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<el-card class="card" v-loading="loading">
 		<el-row>
-			<el-col :span="3" v-for="(item, index) in navMenuList" :key="index">
+			<el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="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"
@@ -13,16 +13,39 @@
 		</el-row>
 		<br />
 		<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">
+			<el-col
-				<div v-if="!item.meta?.isHide" class="nav-menu-item-bottom" @click="handleClickBottomMenu(item)">
+				:xs="!item.meta?.isHide ? 8 : 0"
+				:sm="!item.meta?.isHide ? 6 : 0"
+				:md="!item.meta?.isHide ? 6 : 0"
+				:lg="!item.meta?.isHide ? 3 : 0"
+				:xl="!item.meta?.isHide ? 3 : 0"
+				v-for="(item, index) in navMenuListBottom"
+				:key="index"
+			>
+				<div
+					v-if="!item.meta?.isHide"
+					:class="['nav-menu-item-bottom', item.id == curLevel2ActiveMenuId ? 'nav-menu-item-active' : '']"
+					@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 class="nav-menu-item-name">
+						{{ $t(item.name) }}
+						<el-icon v-if="item.children?.length > 0"><CaretBottom /></el-icon>
+					</div>
 				</div>
 			</el-col>
 		</el-row>
 		<br />
-		<el-row v-if="navMenuLevel3.length > 0" style="background-color: #e2eff677; border-radius: 1rem; padding: 2rem">
+		<el-row v-if="navMenuLevel3.length > 0" style="background-color: #e2eff677; border-radius: 1rem; padding: 2rem; margin: 0 4rem">
-			<el-col v-for="(item, index) in navMenuLevel3" :key="index" :span="!item.meta?.isHide ? 3 : 0">
+			<el-col
+				:xs="!item.meta?.isHide ? 8 : 0"
+				:sm="!item.meta?.isHide ? 6 : 0"
+				:md="!item.meta?.isHide ? 4 : 0"
+				:lg="!item.meta?.isHide ? 4 : 0"
+				:xl="!item.meta?.isHide ? 3 : 0"
+				v-for="(item, index) in navMenuLevel3"
+				:key="index"
+			>
 				<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>
@@ -33,15 +56,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onActivated } from "vue"
+import { ref, onMounted } from "vue"
 import { ElMessage } from "element-plus"
 import { useMenuApi } from "/@/api/admin/menu"
+import { CaretBottom } from "@element-plus/icons-vue"
 
 const router = useRouter()
 const menuApi = useMenuApi()
 const loading = ref(false)
 const navMenuList = ref<any>([])
 const currentActiveMenuId = ref("")
+const curLevel2ActiveMenuId = ref("")
 const navMenuLevel3 = ref<any>([])
 const imageBaseUrl = import.meta.env.VITE_IMAGE_BASE_PATH
 
@@ -63,6 +88,7 @@ const getNavMenuList = async () => {
 const navMenuListBottom = computed(() => {
 	if (navMenuList.value) {
 		navMenuLevel3.value = []
+		curLevel2ActiveMenuId.value = ""
 		const currentMenuItem = navMenuList.value.find((item: any) => item.id == currentActiveMenuId.value)
 		if (currentMenuItem && currentMenuItem.children) return currentMenuItem.children
 	} else {
@@ -72,6 +98,7 @@ const navMenuListBottom = computed(() => {
 
 // 点击菜单项
 const handleClickBottomMenu = (item: any) => {
+	curLevel2ActiveMenuId.value = item.id
 	if (item.children && item.children.length > 0) {
 		navMenuLevel3.value = item.children
 	} else {
@@ -121,6 +148,7 @@ onMounted(async () => {
 }
 .nav-menu-item-active {
 	background-color: #e2eff6;
+	color: #2e5cf6;
 }
 
 .nav-menu-item-bottom {
@@ -146,23 +174,25 @@ onMounted(async () => {
 	color: #2e5cf6;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1000px) {
 	.nav-menu-item-top {
 		height: 10vw;
 		padding: 1vw;
 		margin: 1vw;
 		.nav-menu-item-icon {
-			display: none;
+			width: 3vw;
+			height: 3vw;
 		}
 		.nav-menu-item-name {
 			font-size: 2vw;
 		}
 	}
 	.nav-menu-item-bottom {
-		height: 4vw;
+		height: 6vw;
 
 		.nav-menu-item-icon {
-			display: none;
+			width: 3vw;
+			height: 3vw;
 		}
 		.nav-menu-item-name {
 			font-size: 1.8vw;