gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 左侧菜单缩进改为动画形式

Browse Source
This commit is contained in:
chenjinsong
2020-05-07 21:25:53 +08:00
parent de1b85b236
commit 7355d18f03
3 changed files with 28 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -443,9 +443,10 @@ li{
/* begin--左侧列表*/ /* begin--左侧列表*/
.content-left { .content-left {
float: left; display: inline-block;
width: 200px; width: 200px;
height: 100%; height: 100%;
vertical-align: top;
border-right: 1px solid #eeeeee; border-right: 1px solid #eeeeee;
padding: 0 0 0 15px; padding: 0 0 0 15px;
box-sizing: border-box; box-sizing: border-box;
@@ -507,8 +508,9 @@ li{
/* begin--右侧内容*/ /* begin--右侧内容*/
.content-right { .content-right {
height: 100%; height: 100%;
margin-left: 201px;
padding: 0 5px; padding: 0 5px;
display: inline-block;
box-sizing: border-box;
background-color: $content-right-background-color; background-color: $content-right-background-color;
} }
.content-right-option { .content-right-option {

42
nezha-fronted/src/components/common/leftMenu.vue
View File

@@ -6,8 +6,7 @@
<div class="bottom-divider"></div> <div class="bottom-divider"></div>
<div style="display: inline-block;float: right;margin-right:15px;"><i style="font-size: 24px;" :class="{'nz-icon nz-icon-push-pin-line':isShrink,'nz-icon nz-icon-push-pin-fill':!isShrink}" :style="{color:!isShrink?'#EE9D3F':''}"></i></div> <div style="display: inline-block;float: right;margin-right:15px;"><i style="font-size: 24px;" :class="{'nz-icon nz-icon-push-pin-line':isShrink,'nz-icon nz-icon-push-pin-fill':!isShrink}" :style="{color:!isShrink?'#EE9D3F':''}"></i></div>
</div> </div>
</div> </div><div class="content-right right-slot" :class="{'right-slot-open':isShrink}">
<div class="content-right right-slot" :class="{'right-slot-open':isShrink}">
<slot name="content-right" ></slot> <slot name="content-right" ></slot>
</div> </div>
</div> </div>
@@ -21,7 +20,7 @@
}, },
data(){ data(){
return{ return{
isShrink:false, isShrink: this.$store.state.leftMenuStat,
} }
}, },
methods:{ methods:{
@@ -33,9 +32,6 @@
} }
} }
}, },
mounted() {
this.isShrink=this.$store.state.leftMenuStat ;
}
} }
</script> </script>
@@ -50,27 +46,35 @@
.content .left-slot{ .content .left-slot{
position: relative; position: relative;
background-color: $left-menu-bgcolor; background-color: $left-menu-bgcolor;
transition: transform 200ms;
/*transition: width 200ms;*/
transform: scaleX(1);
transform-origin: left;
/*border-bottom: 1px solid #eeeeee;*/ /*border-bottom: 1px solid #eeeeee;*/
/*transition: all 100ms;*/ /*transition: all 100ms;*/
} }
.content .right-slot{ .content .right-slot{
margin-left: unset !important; width: calc(100% - 200px);
width: calc(100% - 210px); }
float: right; .content .right-slot-open{
width: calc(100% - 46px);
margin-left: -154px;
} }
.content .left-slot-shrink{ .content .left-slot-shrink{
width: 25px; /*width: 25px;*/
padding: 0px; transform: scaleX(0.25);
.bottom-icon .bottom-divider{ .bottom-icon .bottom-divider{
width: 0px; width: 0px;
} }
.slot-content{ .slot-content{
visibility: hidden; /*visibility: hidden;*/
opacity: 0;
} }
} }
.content .right-slot-open{ .slot-content {
width:calc(100% - 35px); transition: opacity 200ms;
} }
.left-slot .bottom-icon{ .left-slot .bottom-icon{
position:absolute; position:absolute;
bottom: 15px; bottom: 15px;
@@ -97,12 +101,14 @@
visibility: hidden; visibility: hidden;
} }
.content .left-slot-shrink:hover{ .content .left-slot-shrink:hover{
width: 200px; /*width: 200px;*/
padding: 0px 0px 0px 15px; transform: scaleX(1);
position: absolute; /*padding: 0px 0px 0px 15px;
position: absolute;*/
z-index: 100; z-index: 100;
.slot-content{ .slot-content{
visibility: visible; /*visibility: visible;*/
opacity: 1;
} }
.bottom-icon{ .bottom-icon{
z-index: 101; z-index: 101;

1
nezha-fronted/src/components/page/dashboard/overview/overview2.scss
View File

@@ -58,7 +58,6 @@
width: 100%; width: 100%;
} }
.overview-content .content-row-box { .overview-content .content-row-box {
width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-content: flex-start; align-content: flex-start;