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

首页导航菜单响应式适配。超市erp的货商管理的新增货商类别改为下拉菜单。智慧超市的商品新增的分类和品牌改为下拉选择。

Browse Source
This commit is contained in:
ctw committed 2024-12-26 17:28:43 +08:00
1 parent cd30aecc5e
commit 8b863ccd96
11 files changed
+1042 -920
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/views/home/index.vue
+17 -14
View File
@@ -1,24 +1,27 @@
<template>
<div>
<div v-if="pageLoading">
<el-main>
<el-card shadow="never">
<el-skeleton :rows="1"></el-skeleton>
</el-card>
<el-card shadow="never" style="margin-top: 15px;">
<el-skeleton></el-skeleton>
</el-card>
</el-main>
</div>
<widgets/>
</div>
<div>
<navMmenu />
<div v-if="pageLoading">
<el-main>
<el-card shadow="never">
<el-skeleton :rows="1"></el-skeleton>
</el-card>
<el-card shadow="never" style="margin-top: 15px">
<el-skeleton></el-skeleton>
</el-card>
</el-main>
</div>
<widgets />
</div>
</template>
<script setup lang="ts" name="dashboard">
import navMmenu from './navMenu/index.vue';
const Widgets = defineAsyncComponent(() => import('./widgets/index.vue'));
const pageLoading = ref(true);
onMounted(() => {
pageLoading.value = false;
pageLoading.value = false;
});
</script>
src/views/home/widgets/components/nav-menu.vue → src/views/home/navMenu/index.vue
+49 -29
View File
@@ -1,26 +1,18 @@
<script lang="ts">
export default {
title: '首页导航菜单',
icon: 'Postcard',
description: '首页导航菜单展示',
};
</script>
<template>
<el-card class="box-card p-10" v-loading="loading">
<el-card class="box-card p-10" style="min-height: 40vw; background-image: linear-gradient(0deg, #ffffff 0%, #d3f9f1aa 100%)" v-loading="loading">
<el-row>
<el-col :span="6" v-for="(item, index) in navMenuListTop" :key="index">
<el-col :span="4" v-for="(item, index) in navMenuListTop" :key="index">
<div :class="['nav-menu-item-top', item.id == currentActiveMenuId ? 'nav-menu-item-active' : '']" @click="currentActiveMenuId = item.id">
<el-icon class="nav-menu-item-icon"><List /></el-icon>
<el-image class="nav-menu-item-icon" :src="imageBaseUrl + item.menuPic" fit="cover" />
<div class="nav-menu-item-name">{{ item.name }}</div>
</div>
</el-col>
</el-row>
<br />
<el-row v-if="currentActiveMenuId" style="background-color: #eaf4fa; border-radius: 1rem; padding: 1rem">
<el-col :span="4" v-for="(item, index) in navMenuListBottom" :key="index">
<el-row v-if="currentActiveMenuId" style="background-color: #e2eff677; border-radius: 1rem; padding: 2rem 6rem">
<el-col :span="3" v-for="(item, index) in navMenuListBottom" :key="index">
<div class="nav-menu-item-bottom" @click="handleClickBottomMenu(item)">
<el-icon class="nav-menu-item-icon"><List /></el-icon>
<el-image class="nav-menu-item-icon" :src="imageBaseUrl + item.menuPic" fit="cover" />
<div class="nav-menu-item-name">{{ item.name }}</div>
</div>
</el-col>
@@ -38,6 +30,7 @@ const loading = ref(false);
const navMenuList = ref<any>([]);
const navMenuListTop = ref<any>([]);
const currentActiveMenuId = ref('');
const imageBaseUrl = import.meta.env.VITE_IMAGE_BASE_PATH;
// 获取菜单列表
const getNavMenuList = async () => {
@@ -48,7 +41,7 @@ const getNavMenuList = async () => {
});
if (res.code == 0 && res.data.length > 0) {
navMenuList.value = res.data;
navMenuListTop.value = res.data.map((item: any) => ({ id: item.id, name: item.name, path: item.path }));
navMenuListTop.value = res.data.map((item: any) => ({ id: item.id, name: item.name, path: item.path, menuPic: item.menuPic }));
}
} catch (error) {
navMenuList.value = [];
@@ -62,7 +55,7 @@ const navMenuListBottom = computed(() => {
if (navMenuList.value) {
const currentMenuItem = navMenuList.value.find((item: any) => item.id == currentActiveMenuId.value);
if (currentMenuItem && currentMenuItem.children) {
return currentMenuItem.children.map((item: any) => ({ id: item.id, name: item.name, path: item.path }));
return currentMenuItem.children.map((item: any) => ({ id: item.id, name: item.name, path: item.path, menuPic: item.menuPic }));
}
} else {
return [];
@@ -80,9 +73,9 @@ onMounted(async () => {
<style scoped lang="scss">
.nav-menu-item-top {
height: 7rem;
padding: 1rem;
margin: 0.5rem;
height: 6.5vw;
padding: 0.5vw;
margin: 0.5vw;
display: flex;
flex-direction: column;
align-items: start;
@@ -93,21 +86,24 @@ onMounted(async () => {
overflow: hidden;
.nav-menu-item-icon {
width: 2rem;
height: 2rem;
width: 2.5vw;
height: 2.5vw;
}
.nav-menu-item-name {
font-size: 1.5rem;
font-size: 1.2vw;
font-weight: 600;
}
}
.nav-menu-item-top:hover {
color: #2e5cf6;
}
.nav-menu-item-active {
background-color: #eaf4fa;
background-color: #e2eff6;
}
.nav-menu-item-bottom {
width: 100%;
height: 6rem;
min-height: 4vw;
margin: 1vw;
display: flex;
flex-direction: column;
align-items: center;
@@ -116,16 +112,40 @@ onMounted(async () => {
cursor: pointer;
.nav-menu-item-icon {
width: 2rem;
height: 2rem;
background-color: aquamarine;
width: 2.3vw;
height: 2.3vw;
}
.nav-menu-item-name {
font-size: 1rem;
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>
src/views/home/widgets/index.vue
+3 -4
View File
@@ -150,7 +150,6 @@ const allCompsList = computed(() => {
const myCompsList = computed(() => {
// 支持列表
const myGrid = [
'nav-menu',
'calendar',
'current-user',
'news',
@@ -229,9 +228,9 @@ onMounted(() => {
</script>
<style scoped lang="scss">
.custom_btn {
position: absolute;
top: 7px;
right: 5px;
position: fixed;
bottom: 5px;
right: 20px;
z-index: 9;
color: white;
}