From afbfa1a094fb6d65ce5fb047a02fe3528f242d0f Mon Sep 17 00:00:00 2001
From: longyvfengyun <496960745@qq.com>
Date: 星期五, 16 六月 2023 10:57:39 +0800
Subject: [PATCH] 平台logo提交
---
src/views/mainLayout/components/SlideMenu.vue | 106 ++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 72 insertions(+), 34 deletions(-)
diff --git a/src/views/mainLayout/components/SlideMenu.vue b/src/views/mainLayout/components/SlideMenu.vue
index f10a3f8..e468f9d 100644
--- a/src/views/mainLayout/components/SlideMenu.vue
+++ b/src/views/mainLayout/components/SlideMenu.vue
@@ -1,12 +1,14 @@
<script setup>
-import {computed, ref} from "vue";
+import {computed, ref, watchEffect} from "vue";
import usePageMenuStore from "@/store/usePageMenuStore";
+import FlexLayout from "@/components/FlexLayout.vue";
const pageMenuStore = usePageMenuStore();
const isCollapse = computed(()=>{
return pageMenuStore.isCollapse;
});
+const isOpen = ref(!isCollapse.value);
const menuActive = ref("/");
const menuData = ref([]);
menuData.value = [
@@ -37,45 +39,63 @@
},
];
-const handleOpen = ()=>{};
-const handleClose = ()=>{};
+const handleOpen = ()=>{
+ isOpen.value = true;
+};
+
+watchEffect(()=>{
+ if(isCollapse.value) {
+ isOpen.value = false;
+ }
+});
</script>
<template>
- <div class="menu-wrapper">
- <el-menu
- :router="true"
- text-color="#4ba1fa"
- active-text-color="#00fefe"
- background-color="#021a64"
- :default-active="menuActive"
- :unique-opened="true"
- class="el-menu-vertical"
- :collapse="isCollapse"
- @open="handleOpen"
- @close="handleClose">
- <template v-for="menu in menuData" :key="menu.path">
- <el-sub-menu :index="menu.path" v-if="menu.children">
- <template #title>
+ <flex-layout no-bg>
+ <template #header>
+ <div class="sys-logo">
+ <div class="logo-img">
+ <img src="@/assets/images/logo.png" alt="" />
+ </div>
+ <div class="sys-name" v-if="isOpen">
+ 鐜鐩戞帶绯荤粺
+ </div>
+ </div>
+ </template>
+ <div class="menu-wrapper">
+ <el-menu
+ :router="true"
+ text-color="#4ba1fa"
+ active-text-color="#00fefe"
+ background-color="#021a64"
+ :default-active="menuActive"
+ :unique-opened="true"
+ class="el-menu-vertical"
+ :collapse="isCollapse"
+ @open="handleOpen">
+ <template v-for="menu in menuData" :key="menu.path">
+ <el-sub-menu :index="menu.path" v-if="menu.children">
+ <template #title>
+ <el-icon>
+ <component :is="menu.icon"></component>
+ </el-icon>
+ <span>{{menu.title}}</span>
+ </template>
+ <el-menu-item
+ v-for="children in menu.children"
+ :key="children.path"
+ :index="children.path">{{children.title}}</el-menu-item>
+ </el-sub-menu>
+ <el-menu-item :index="menu.path" v-else>
<el-icon>
<component :is="menu.icon"></component>
</el-icon>
- <span>{{menu.title}}</span>
- </template>
- <el-menu-item
- v-for="children in menu.children"
- :key="children.path"
- :index="children.path">{{children.title}}</el-menu-item>
- </el-sub-menu>
- <el-menu-item :index="menu.path" v-else>
- <el-icon>
- <component :is="menu.icon"></component>
- </el-icon>
- <template #title>{{menu.title}}</template>
- </el-menu-item>
- </template>
- </el-menu>
- </div>
+ <template #title>{{menu.title}}</template>
+ </el-menu-item>
+ </template>
+ </el-menu>
+ </div>
+ </flex-layout>
</template>
<style lang="less" scoped>
@@ -98,4 +118,22 @@
width: 200px;
min-height: 400px;
}
+.sys-logo {
+ padding: 6px 0 6px 16px;
+ .logo-img {
+ display: inline-block;
+ height: 28px;
+ vertical-align: bottom;
+ img {
+ width: auto;
+ height: 100%;
+ }
+ }
+ .sys-name {
+ display: inline-block;
+ margin-left: 6px;
+ font-weight: bold;
+ color: @font-color-primary;
+ }
+}
</style>
--
Gitblit v1.9.1