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
+2 -1
View File
@@ -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');
src/components/navMenu/index.vue
+30 -4
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,6 +66,11 @@
</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>
@@ -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: {
@@ -492,6 +502,7 @@
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;