整体样式+首页

zhanghua

2024-11-22 33f7c189aee851636f57cd0de88812332944f185

 src/layout/components/Sidebar/index.vue

@@ -1,12 +1,29 @@
<template>
    <div :class="{'has-logo':showLogo}" :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
        <logo v-if="showLogo" :collapse="isCollapse" />
        <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
    <div
        :class="{ 'has-logo': showLogo }"
        :style="{ backgroundColor: variables.menuLightBackground }"
    >
        <!-- <logo v-if="showLogo" :collapse="isCollapse" /> -->
        <div class="hamburger-container">
            <div class="border">
                <div class="menu-tip" v-show="sidebar.opened">菜单管理</div>
                <hamburger
                    id="hamburger-container"
                    :is-active="sidebar.opened"
                    class="hamburger-icon"
                    @toggleClick="toggleSideBar"
                />
            </div>
        </div>
        <el-scrollbar
            :class="settings.sideTheme"
            wrap-class="scrollbar-wrapper"
        >
            <el-menu
                :default-active="activeMenu"
                :collapse="isCollapse"
                :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
                :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
                :background-color="variables.menuLightBackground"
                :text-color="variables.menuLightColor"
                :unique-opened="true"
                :active-text-color="settings.theme"
                :collapse-transition="false"
@@ -28,9 +45,10 @@
import Logo from "./Logo";
import SidebarItem from "./SidebarItem";
import variables from "@/assets/styles/variables.scss";
import Hamburger from '@/components/Hamburger'

export default {
    components: { SidebarItem, Logo },
    components: { SidebarItem, Logo, Hamburger },
    computed: {
        ...mapState(["settings"]),
        ...mapGetters(["sidebarRouters", "sidebar"]),
@@ -52,6 +70,45 @@
        isCollapse() {
            return !this.sidebar.opened;
        }
    },
    created() {
        // console.log(this.settings.sideTheme);
    },
    methods: {
        toggleSideBar() {
            this.$store.dispatch('app/toggleSideBar')
        },
    }
};
</script>
<style scoped>
.hamburger-container {
    display: flex;
    color: #fff;
    justify-content: space-between;
    height: 59px;
    line-height: 59px;
    .border {
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        width: 180px;
        border-bottom: 1px solid #e6eaf5;
    }
    .menu-tip {
        height: 50px;
        font-size: 14px;
        font-weight: 400;
        color: #000000;
        padding-left: 20px;
    }
    .hamburger-icon {
        width: 54px;
        text-align: center;
        cursor: pointer;
        &:hover {
            background: rgba(0, 0, 0, 0.025);
        }
    }
}
</style>