zianxin/pj_admin_cloud
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页修改

Browse Source
This commit is contained in:
weiwei committed 2025-03-03 13:01:18 +08:00
1 parent dce8d8963e
commit 67fad4a44f
1 file changed
+41 -11
Download Patch File Download Diff File Expand all files Collapse all files
src/views/home/navMenu/index.vue
+41 -11
View File
@@ -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">
<div v-if="!item.meta?.isHide" class="nav-menu-item-bottom" @click="handleClickBottomMenu(item)">
<el-col
: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-col v-for="(item, index) in navMenuLevel3" :key="index" :span="!item.meta?.isHide ? 3 : 0">
<el-row v-if="navMenuLevel3.length > 0" style="background-color: #e2eff677; border-radius: 1rem; padding: 2rem; margin: 0 4rem">
<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;