FT/foton-laws-system-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

左侧菜单栏收缩放到右侧

Browse Source
This commit is contained in:
yanyizhou
2021-10-22 14:16:21 +08:00
parent 858f215e53
commit 9cdc77656c
2 changed files with 859 additions and 832 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+12 -11
View File
@@ -27,11 +27,11 @@
</el-dropdown>
</div>
</div>
<!-- <div class="logo">-->
<!-- <img :src="logo" />-->
<!-- </div>-->
<!-- <div class="logo">-->
<!-- <img :src="logo" />-->
<!-- </div>-->
</div>
<!-- <com-header></com-header>-->
<!-- <com-header></com-header>-->
<div class="container-box">
<router-view />
</div>
@@ -41,9 +41,9 @@
</template>
<script>
import {mapGetters, mapState} from 'vuex'
import { webLoginType } from '@/sysConfig'
export default {
import {mapGetters, mapState} from 'vuex'
import { webLoginType } from '@/sysConfig'
export default {
name: 'App',
data () {
return {
@@ -277,11 +277,11 @@
clearInterval(this.intervalForLogin)
clearInterval(this.intervalForHome)
}
}
}
</script>
<style lang="less">
#app {
#app {
position: relative;
width: 100%;
height: 100%;
@@ -312,7 +312,8 @@
//flex: 1;
background: #F4F4F4;
overflow-y: auto;
padding: 10px 10px 0;
padding: 10px 0 10px 0;
//padding: 10px 10px 0;
.pagination {
border-top: 1px solid #f4f4f4;
width: calc(~'100% - 20px');
@@ -324,5 +325,5 @@
/deep/.el-menu--vertical {
background: red;
}
}
}
</style>
src/components/navMenu/index.vue
+56 -30
View File
@@ -8,10 +8,10 @@
</div>
</div>
</div>
<div class="toggle-btn el-icon-s-fold" v-if="isCollapse === false" style="margin: 10px 0; display: flex;justify-content: center; font-size: 30px; color: #333333;" @click="handleToggleSideBar">
<div style="font-size: 14px; line-height: 30px;">{{ this.isCollapse ? '' : '' }}</div><i class=""></i></div>
<div class="toggle-btn el-icon-s-unfold" v-else style="margin: 10px 0; display: flex;justify-content: center; font-size: 30px; color: #333333;" @click="handleToggleSideBar">
<div style="font-size: 14px; line-height: 30px;">{{ this.isCollapse ? '' : '' }}</div></div>
<!-- <div class="toggle-btn el-icon-s-fold" v-if="isCollapse === false" style="margin: 10px 0; display: flex;justify-content: center; font-size: 30px; color: #333333;" @click="handleToggleSideBar">-->
<!-- <div style="font-size: 14px; line-height: 30px;">{{ this.isCollapse ? '' : '' }}</div><i class=""></i></div>-->
<!-- <div class="toggle-btn el-icon-s-unfold" v-else style="margin: 10px 0; display: flex;justify-content: center; font-size: 30px; color: #333333;" @click="handleToggleSideBar">-->
<!-- <div style="font-size: 14px; line-height: 30px;">{{ this.isCollapse ? '' : '' }}</div></div>-->
<div class="left-tree">
<el-menu
unique-opened
@@ -66,11 +66,16 @@
</template>
</el-menu>
</div>
<div class="tree-collapse" @click="handleToggleSideBar" :class="{ 'tree-close': isCollapse }">
<!--切换折叠样式-->
<i class="el-icon-arrow-left" v-if="isCollapse === false"></i>
<i class="el-icon-arrow-right" v-if="isCollapse === true"></i>
</div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
import { mapGetters, mapMutations } from 'vuex'
export default {
name: 'NavMenu',
data () {
return {
@@ -461,6 +466,11 @@
handleToggleSideBar () {
this.toggleSideBar(!this.isCollapse)
},
// 收展按钮
collapseIcon() {
return this.sideClose ? 'el-icon-arrow-left' : 'el-icon-arrow-right'
// return 'el-icon-arrow-left'
},
...mapMutations(['toggleSideBar'])
},
computed: {
@@ -482,16 +492,17 @@
}
}
}
}
}
</script>
<style lang="less" scoped>
@import '~@/assets/styles/mixins';
.nav-menu {
@import '~@/assets/styles/mixins';
.nav-menu {
width: 58px;
height: 100%;
overflow-y: auto;
user-select: none;
box-sizing: border-box;
position: relative;
background: rgb(255, 255, 255);
background-size: 100% 100%;
/deep/.el-tooltip {
@@ -518,6 +529,21 @@
}
}
}
.tree-collapse{
position: absolute;
right: 0;
top: 65px;
display: flex;
align-items: center;
justify-content: center;
width: 15px;
height: calc(100% - 69px);
background: #EEE;
cursor: pointer;
&:hover{
background-color: #3391CE;
}
}
.logo{
text-align: center;
padding: 15px 0;
@@ -533,37 +559,37 @@
background: #f0f7ff !important;
color: #4091FF !important;
}
}
.has-no-read{
}
.has-no-read{
position: relative;
top:-15px;
left:10px
}
.nav-menu /deep/.el-submenu__title i {
}
.nav-menu /deep/.el-submenu__title i {
color: #000;
}
.nav-menu{
}
.nav-menu{
scrollbar-width: none;
-ms-overflow-style: none; /* IE 10+ */
}
.nav-menu::-webkit-scrollbar {
}
.nav-menu::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
.nav-menu-popper .el-menu .el-menu-item {
}
.nav-menu-popper .el-menu .el-menu-item {
color: #fff !important;
}
.nav-menu-popper .el-menu .el-menu-item.is-active {
}
.nav-menu-popper .el-menu .el-menu-item.is-active {
background-color: #fff !important;
color: #5ea9f6 !important;
font-weight: bold;
}
.nav-menu-popper .el-menu .el-menu-item:hover {
}
.nav-menu-popper .el-menu .el-menu-item:hover {
background-color: #fff !important;
color: #5ea9f6 !important;
font-weight: bold;
}
}
.el-menu-item {
.el-menu-item {
padding: 0 16px !important;
span {
font-weight: normal;
@@ -595,8 +621,8 @@
background-image: url("~assets/images/shangqi/sideBar/liucheng.png");
}
}
}
.el-submenu {
}
.el-submenu {
/deep/.el-submenu__title {
padding: 0 16px !important;
span {
@@ -639,8 +665,8 @@
/deep/.el-menu {
padding-left: 18px;
}
}
.el-menu--collapse{
}
.el-menu--collapse{
width: 100%;
.shangqi-icon{
width: 24px;
@@ -654,5 +680,5 @@
}
}
}
}
}
</style>