154 lines
3.4 KiB
Vue
154 lines
3.4 KiB
Vue
<template>
|
|
<el-card class="card" v-loading="loading">
|
|
<el-row>
|
|
<el-col :span="4" 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"
|
|
>
|
|
<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="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">
|
|
<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>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from "vue"
|
|
import { ElMessage } from "element-plus"
|
|
import { useMenuApi } from "/@/api/admin/menu"
|
|
|
|
const router = useRouter()
|
|
const menuApi = useMenuApi()
|
|
const loading = ref(false)
|
|
const navMenuList = ref<any>([])
|
|
const currentActiveMenuId = ref("")
|
|
const imageBaseUrl = import.meta.env.VITE_IMAGE_BASE_PATH
|
|
|
|
// 获取菜单列表
|
|
const getNavMenuList = async () => {
|
|
loading.value = true
|
|
try {
|
|
const res = await menuApi.getAdminMenu().finally(() => (loading.value = false))
|
|
if (res.code == 0 && res.data.length > 0) {
|
|
navMenuList.value = res.data
|
|
}
|
|
} catch (error) {
|
|
navMenuList.value = []
|
|
ElMessage.error("加载错误")
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
const navMenuListBottom = computed(() => {
|
|
if (navMenuList.value) {
|
|
const currentMenuItem = navMenuList.value.find((item: any) => item.id == currentActiveMenuId.value)
|
|
if (currentMenuItem && currentMenuItem.children) return currentMenuItem.children
|
|
} else {
|
|
return []
|
|
}
|
|
})
|
|
|
|
// 点击菜单项
|
|
const handleClickBottomMenu = (item: any) => {
|
|
router.push(item.path)
|
|
}
|
|
|
|
onMounted(async () => {
|
|
await getNavMenuList()
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.card {
|
|
padding: 5vw;
|
|
height: calc(100vh - 85px);
|
|
background-image: linear-gradient(0deg, #ffffff 0%, #e4ebff 100%);
|
|
}
|
|
.nav-menu-item-top {
|
|
height: 6.5vw;
|
|
padding: 0.5vw;
|
|
margin: 0.5vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
justify-content: space-around;
|
|
background-color: #f9f9f9;
|
|
border-radius: 1rem;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
|
|
.nav-menu-item-icon {
|
|
width: 2.5vw;
|
|
height: 2.5vw;
|
|
}
|
|
.nav-menu-item-name {
|
|
font-size: 1.2vw;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.nav-menu-item-top:hover {
|
|
color: #2e5cf6;
|
|
}
|
|
.nav-menu-item-active {
|
|
background-color: #e2eff6;
|
|
}
|
|
|
|
.nav-menu-item-bottom {
|
|
min-height: 4vw;
|
|
margin: 1vw 2vw;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-around;
|
|
border-radius: 1rem;
|
|
cursor: pointer;
|
|
|
|
.nav-menu-item-icon {
|
|
width: 2.3vw;
|
|
height: 2.3vw;
|
|
}
|
|
.nav-menu-item-name {
|
|
font-size: 1vw;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
.nav-menu-item-bottom:hover {
|
|
color: #2e5cf6;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.nav-menu-item-top {
|
|
height: 10vw;
|
|
padding: 1vw;
|
|
margin: 1vw;
|
|
.nav-menu-item-icon {
|
|
display: none;
|
|
}
|
|
.nav-menu-item-name {
|
|
font-size: 2vw;
|
|
}
|
|
}
|
|
.nav-menu-item-bottom {
|
|
height: 4vw;
|
|
|
|
.nav-menu-item-icon {
|
|
display: none;
|
|
}
|
|
.nav-menu-item-name {
|
|
font-size: 1.8vw;
|
|
}
|
|
}
|
|
}
|
|
</style>
|