平台logo提交

longyvfengyun

2023-06-16 afbfa1a094fb6d65ce5fb047a02fe3528f242d0f

平台logo提交

 public/favicon.ico

 src/assets/images/logo.png

 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>