From affe2b63e194ccdf8e6fbb2dffb6f47b8f12896c Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Mon, 27 Sep 2021 11:07:02 +0800
Subject: [PATCH] 浮动隐藏菜单栏
---
src/styles/media未修改隐藏的菜单样式.scss | 182 +++++++++++++++++++++++++++++++++++++++++++++
src/store/modules/common.js | 8 +
src/page/index/index.vue | 12 ++
src/styles/media.scss | 27 ++----
src/page/index/sidebar/index.vue | 6
5 files changed, 210 insertions(+), 25 deletions(-)
diff --git a/src/page/index/index.vue b/src/page/index/index.vue
index 4804156..5a7a108 100644
--- a/src/page/index/index.vue
+++ b/src/page/index/index.vue
@@ -1,15 +1,15 @@
<template>
<div class="avue-contail" :class="{ 'avue--collapse': isCollapse }">
- <div class="avue-header">
+ <div class="avue-header" @mouseenter="enterMain">
<!-- 顶部导航栏 -->
<top ref="top" />
</div>
<div class="avue-layout">
- <div class="avue-left">
+ <div class="avue-left" @mouseenter="enter">
<!-- 左侧导航栏 -->
<sidebar />
</div>
- <div class="avue-main">
+ <div class="avue-main" @mouseenter="enterMain">
<!-- 顶部标签卡 -->
<tags />
<transition name="fade-scale">
@@ -83,6 +83,12 @@
]),
props: [],
methods: {
+ enter() {
+ this.$store.commit("SET_COLLAPSE", false);
+ },
+ enterMain() {
+ this.$store.commit("SET_COLLAPSE", true);
+ },
showCollapse() {
this.$store.commit("SET_COLLAPSE");
},
diff --git a/src/page/index/sidebar/index.vue b/src/page/index/sidebar/index.vue
index fc8a917..bba6289 100644
--- a/src/page/index/sidebar/index.vue
+++ b/src/page/index/sidebar/index.vue
@@ -1,5 +1,5 @@
<template>
- <div class="avue-sidebar">
+ <div class="avue-sidebar" id="menuLeft">
<logo></logo>
<el-scrollbar style="height: 100%">
<div v-if="validatenull(menu)" class="avue-sidebar--tip">
@@ -12,8 +12,6 @@
:show-timeout="200"
:collapse="keyCollapse"
background-color="#fff"
- text-color="#000"
- active-text-color="#ffd04b"
>
<sidebar-item
:menu="menu"
@@ -41,6 +39,8 @@
},
created() {
this.index.openMenu();
+ // var menuDom = document.getElementById("menuLeft");
+ // menuDom.
},
computed: {
...mapGetters([
diff --git a/src/store/modules/common.js b/src/store/modules/common.js
index 0cc276d..38bd3a1 100644
--- a/src/store/modules/common.js
+++ b/src/store/modules/common.js
@@ -40,8 +40,12 @@
SET_SHADE: (state, active) => {
state.isShade = active;
},
- SET_COLLAPSE: (state) => {
- state.isCollapse = !state.isCollapse;
+ SET_COLLAPSE: (state, val = 3) => {
+ if (val == 3) {
+ state.isCollapse = !state.isCollapse;
+ } else {
+ state.isCollapse = val;
+ }
},
SET_FULLSCREN: (state) => {
state.isFullScren = !state.isFullScren;
diff --git a/src/styles/media.scss b/src/styles/media.scss
index 2781c4c..3f1db09 100644
--- a/src/styles/media.scss
+++ b/src/styles/media.scss
@@ -2,10 +2,9 @@
.avue-header,
.avue-top,
.avue-logo,
-.avue-layout
-.login-logo,
+.avue-layout .login-logo,
.avue-main {
- transition: all .3s;
+ transition: all 0.3s;
}
.avue-contail {
@@ -16,14 +15,13 @@
background-repeat: no-repeat;
}
-
.avue-left {
position: fixed;
left: 0;
top: 0;
width: 240px;
height: 100%;
- z-index: 1025;
+ z-index: 1027;
}
.avue--collapse {
@@ -43,7 +41,7 @@
}
.avue-header {
- padding-left: 240px;
+ padding-left: 60px;
width: 100%;
background-color: #fff;
box-sizing: border-box;
@@ -51,10 +49,10 @@
.avue-main {
position: absolute;
- left: 240px;
+ left: 60px;
padding: 0;
padding-bottom: 20px;
- width: calc(100% - 240px);
+ width: calc(100% - 60px);
height: calc(100% - 64px);
box-sizing: border-box;
overflow: hidden;
@@ -102,7 +100,7 @@
right: 0;
top: 0;
bottom: 0;
- background-color: rgba(0, 0, 0, .3);
+ background-color: rgba(0, 0, 0, 0.3);
z-index: 1024;
&--show {
@@ -166,17 +164,12 @@
}
.avue-main {
- left: $width;
- width: 100%;
+ width: calc(100% - 60px);
+ left: 60px;
}
.avue-header {
- padding: 0;
- transform: translate3d(230px, 0, 0);
- }
-
- .avue-shade {
- display: block;
+ padding-left: 60px;
}
}
}
diff --git "a/src/styles/media\346\234\252\344\277\256\346\224\271\351\232\220\350\227\217\347\232\204\350\217\234\345\215\225\346\240\267\345\274\217.scss" "b/src/styles/media\346\234\252\344\277\256\346\224\271\351\232\220\350\227\217\347\232\204\350\217\234\345\215\225\346\240\267\345\274\217.scss"
new file mode 100644
index 0000000..2781c4c
--- /dev/null
+++ "b/src/styles/media\346\234\252\344\277\256\346\224\271\351\232\220\350\227\217\347\232\204\350\217\234\345\215\225\346\240\267\345\274\217.scss"
@@ -0,0 +1,182 @@
+.avue-left,
+.avue-header,
+.avue-top,
+.avue-logo,
+.avue-layout
+.login-logo,
+.avue-main {
+ transition: all .3s;
+}
+
+.avue-contail {
+ width: 100%;
+ height: 100%;
+ background: #f0f2f5;
+ background-size: 100%;
+ background-repeat: no-repeat;
+}
+
+
+.avue-left {
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 240px;
+ height: 100%;
+ z-index: 1025;
+}
+
+.avue--collapse {
+ .avue-left,
+ .avue-logo {
+ width: 60px;
+ }
+
+ .avue-header {
+ padding-left: 60px;
+ }
+
+ .avue-main {
+ width: calc(100% - 60px);
+ left: 60px;
+ }
+}
+
+.avue-header {
+ padding-left: 240px;
+ width: 100%;
+ background-color: #fff;
+ box-sizing: border-box;
+}
+
+.avue-main {
+ position: absolute;
+ left: 240px;
+ padding: 0;
+ padding-bottom: 20px;
+ width: calc(100% - 240px);
+ height: calc(100% - 64px);
+ box-sizing: border-box;
+ overflow: hidden;
+ transition: all 0.5s;
+ background: #f0f2f5;
+ z-index: 1026;
+
+ &--fullscreen {
+ width: 100%;
+ left: 0;
+ }
+}
+
+.avue-view {
+ padding: 0 10px !important;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+.avue-footer {
+ margin: 0 auto;
+ padding: 0 22px;
+ width: 1300px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ .logo {
+ margin-left: -50px;
+ }
+
+ .copyright {
+ color: #666;
+ line-height: 1.5;
+ font-size: 12px;
+ }
+}
+
+.avue-shade {
+ position: fixed;
+ display: none;
+ width: 100%;
+ height: 100%;
+ left: 0;
+ right: 0;
+ top: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, .3);
+ z-index: 1024;
+
+ &--show {
+ display: block;
+ }
+}
+
+@media screen and (max-width: 992px) {
+ $width: 240px;
+ // ele的自适应
+ .el-dialog,
+ .el-message-box {
+ width: 98% !important;
+ }
+ //登录页面
+ .login-left {
+ display: none !important;
+ }
+ .login-logo {
+ padding-top: 30px !important;
+ margin-left: -30px;
+ }
+ .login-weaper {
+ margin: 0 auto;
+ width: 96% !important;
+ }
+ .login-border {
+ border-radius: 5px;
+ padding: 40px;
+ margin: 0 auto;
+ float: none !important;
+ width: 100% !important;
+ }
+ .login-main {
+ width: 100% !important;
+ }
+ //主框架
+ .avue-tags {
+ display: none;
+ }
+ .avue-left,
+ .avue-logo {
+ left: -$width;
+ }
+ .avue-main {
+ left: 0;
+ width: 100%;
+ }
+ .avue-header {
+ margin-bottom: 15px;
+ padding-left: 15px;
+ }
+ .top-bar__item {
+ display: none;
+ }
+ .avue--collapse {
+ .avue-left,
+ .avue-logo {
+ width: $width;
+ left: 0;
+ }
+
+ .avue-main {
+ left: $width;
+ width: 100%;
+ }
+
+ .avue-header {
+ padding: 0;
+ transform: translate3d(230px, 0, 0);
+ }
+
+ .avue-shade {
+ display: block;
+ }
+ }
+}
--
Gitblit v1.9.3