From 33f7c189aee851636f57cd0de88812332944f185 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期五, 22 十一月 2024 19:19:25 +0800
Subject: [PATCH] 整体样式+首页
---
src/layout/components/Sidebar/index.vue | 71 ++++++++++++++++++++++++++++++++---
1 files changed, 64 insertions(+), 7 deletions(-)
diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue
index 51d0839..8ee9d82 100644
--- a/src/layout/components/Sidebar/index.vue
+++ b/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"
@@ -14,7 +31,7 @@
>
<sidebar-item
v-for="(route, index) in sidebarRouters"
- :key="route.path + index"
+ :key="route.path + index"
:item="route"
:base-path="route.path"
/>
@@ -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>
\ No newline at end of file
--
Gitblit v1.8.0