Skip to content

Commit d46f4c2

Browse files
bigrocsbigrocs
committed
全面改用flex布局
1 parent bd2f997 commit d46f4c2

File tree

8 files changed

+187
-155
lines changed

8 files changed

+187
-155
lines changed

‎src/assets/sass/mixin.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
$screen-xs-max: 768;
2-
$screen-sm-min: 768;
3-
$screen-md-min: 970;
4-
$screen-lg-min: 1170;
1+
$screen-xs-max: 768px;
2+
$screen-sm-min: 768px;
3+
$screen-md-min: 970px;
4+
$screen-lg-min: 1170px;
55

66
@mixin scrollBar {
77
&::-webkit-scrollbar-track-piece {

‎src/components/Layout.vue‎

Lines changed: 97 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,25 @@
11
<template>
2-
<div class="layout" :class="{ hideSidebar: isSidebar }">
3-
<div class="layout-sidebar-left">
4-
<layout-sidebar/>
5-
</div>
6-
<div class="layout-right">
7-
<layout-navbar v-on:sidebar="toggleClick"/>
2+
<div class="wrapper skin-red" :class="{ hideSidebar: isSidebar }">
3+
<layoutHeader v-on:sidebar="toggleClick"/>
4+
<layoutSidebar/>
5+
<div class="layout-main">
86
<layout-breadcrumb/>
97
<layout-content/>
108
<layout-footer/>
119
</div>
1210
</div>
1311
</template>
1412
<script>
13+
import layoutHeader from './Layout/Header.vue'
1514
import layoutSidebar from './Layout/Sidebar.vue'
16-
import layoutNavbar from './Layout/Navbar.vue'
1715
import layoutBreadcrumb from './Layout/Breadcrumb.vue'
1816
import layoutContent from './Layout/Content.vue'
1917
import layoutFooter from './Layout/Footer.vue'
2018
export default {
2119
name: 'layout',
2220
components: {
21+
layoutHeader,
2322
layoutSidebar,
24-
layoutNavbar,
2523
layoutBreadcrumb,
2624
layoutContent,
2725
layoutFooter
@@ -42,81 +40,109 @@
4240
@import './../assets/sass/mixin.scss';
4341
body{
4442
margin: 0;
45-
}
46-
.layout{
4743
background: #f5f7f9;
48-
position: relative;
49-
overflow: hidden;
50-
display: -webkit-box;
44+
}
45+
a{
46+
text-decoration: none;
47+
}
48+
.wrapper{
49+
display: -webkit-flex;
50+
display: flex;
51+
flex-direction: column;
5152
/* 收缩侧栏后的样式begin */
5253
&.hideSidebar {
53-
>.layout-sidebar-left {
54-
width: 50px;
55-
>.sidebar-container {
56-
>.el-menu--dark {
57-
>.el-submenu{
58-
>.el-submenu__title{
59-
>span{
60-
display: none;
61-
}
62-
>.el-submenu__icon-arrow{
63-
display: none;
64-
}
65-
display: -webkit-box;
66-
}
67-
>.el-menu{
68-
display: none !important;
69-
}
70-
&:hover{
71-
>.el-submenu__title{
72-
>span{
73-
margin-left: 22px;
74-
-moz-box-flex:1.0;
75-
-webkit-box-flex: 1.0;
76-
display: block;
77-
}
78-
>.el-submenu__icon-arrow{
79-
padding-top: 5px;
80-
display: block;
81-
}
82-
background-color: #222d32;
83-
width: 230px;
84-
border-top-right-radius: 4px;
85-
}
86-
>.el-menu{
87-
display: block !important;
88-
position: absolute;
89-
width: 180px;
90-
left: 50px;
91-
padding-top: 5px;
92-
padding-bottom: 5px;
93-
border-bottom-right-radius: 4px;
94-
}
95-
}
96-
}
97-
overflow-x:visible;
54+
>.main-header{
55+
>.logo{
56+
width: 50px;
57+
min-width: 50px;
58+
>.logo-mini{
59+
display: block;
9860
}
99-
>.layout-logo-lg{
61+
>.logo-lg{
10062
display: none;
10163
}
102-
>.layout-logo-mini{
103-
display: block;
64+
}
65+
}
66+
>.sidebar-menu {
67+
width:50px;
68+
overflow-x:visible;
69+
>.el-submenu{
70+
>.el-submenu__title{
71+
>span{
72+
display: none;
73+
}
74+
>.el-submenu__icon-arrow{
75+
display: none;
76+
}
77+
display: -webkit-box;
10478
}
105-
>.sidebar-menu {
106-
width:50px;
79+
>.el-menu{
80+
display: none !important;
81+
}
82+
&:hover{
83+
>.el-submenu__title{
84+
>span{
85+
margin-left: 22px;
86+
-moz-box-flex:1.0;
87+
-webkit-box-flex: 1.0;
88+
display: block;
89+
}
90+
>.el-submenu__icon-arrow{
91+
padding-top: 5px;
92+
display: block;
93+
}
94+
background-color: #222d32;
95+
width: 230px;
96+
border-top-right-radius: 4px;
97+
}
98+
>.el-menu{
99+
display: block !important;
100+
position: absolute;
101+
width: 180px;
102+
left: 50px;
103+
padding-top: 5px;
104+
padding-bottom: 5px;
105+
border-bottom-right-radius: 4px;
106+
}
107107
}
108108
}
109109
}
110+
>.layout-main{
111+
margin-left: 50px;
112+
}
110113
}
111114
/* 收缩侧栏后的样式end */
112115
}
113-
.layout-sidebar-left{
114-
width: 230px;
115-
transition: transform .3s ease-in-out,width .3s ease-in-out;
116+
.layout-main{
117+
flex: 1 0 auto;
118+
display: -webkit-flex;
119+
display: flex;
120+
flex-direction: column;
121+
margin-left: 230px;
122+
transition: margin-left 0.3s ease-in-out;
116123
}
117-
.layout-right{
118-
-moz-box-flex:1.0;
119-
-webkit-box-flex: 1.0;
120-
width: 100%;
124+
.skin-red{
125+
>.main-header{
126+
>.logo{
127+
background-color: #d73925;
128+
color: #fff;
129+
border-bottom: 0 solid transparent;
130+
}
131+
>.navbar{
132+
background-color: #dd4b39;
133+
>.menu-navbar{
134+
background-color: #dd4b39;
135+
}
136+
}
137+
}
138+
}
139+
140+
@media (max-width: $screen-xs-max) {
141+
.sidebar-menu{
142+
transform: translate(-230px, 0);
143+
}
144+
.layout-main{
145+
margin-left: 0;
146+
}
121147
}
122-
</style>
148+
</style>

‎src/components/Layout/Breadcrumb.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
</script>
1616
<style lang="scss" scoped>
1717
.layout-breadcrumb{
18+
flex: 0 0 auto;
1819
padding: 10px 15px 0;
1920
}
2021
</style>

‎src/components/Layout/Content.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
</script>
1313
<style lang="scss" scoped>
1414
.layout-content{
15-
min-height: 200px;
15+
flex: 1 0 auto;
16+
min-height: 300px;
1617
margin: 15px;
1718
overflow: hidden;
1819
background: #fff;

‎src/components/Layout/Footer.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
</script>
1111
<style lang="scss" scoped>
1212
.layout-footer{
13+
flex: 0 0 auto;
1314
text-align: center;
1415
padding: 10px 0 20px;
1516
color: #9ea7b4;

‎src/components/Layout/Navbar.vue‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎src/components/Layout/Sidebar.vue‎

Lines changed: 3 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
<template>
2-
<div class="sidebar-container">
3-
<div class="layout-logo-lg">CoreCMF</div>
4-
<div class="layout-logo-mini">Core</div>
5-
<el-menu default-active="1-4-1" theme="dark" class="sidebar-menu">
2+
<el-menu default-active="1-4-1" theme="dark" class="sidebar-menu">
63
<el-submenu index="1">
74
<template slot="title"><i class="el-icon-message"></i><span>Dashboard</span></template>
85
<el-menu-item index="1-1">选项1</el-menu-item>
@@ -43,8 +40,7 @@
4340
</el-submenu>
4441
<el-menu-item index="2">导航二</el-menu-item>
4542
<el-menu-item index="3">导航三</el-menu-item>
46-
</el-menu>
47-
</div>
43+
</el-menu>
4844
</template>
4945
<script>
5046
export default {
@@ -53,33 +49,14 @@
5349
</script>
5450
<style lang="scss">
5551
@import './../../assets/sass/mixin.scss';
56-
.layout-logo-lg {
57-
background-color: #d73925;
58-
height: 50px;
59-
line-height: 50px;
60-
font-size: 20px;
61-
color: #fff;
62-
text-align: center;
63-
width: 100%;
64-
}
65-
.layout-logo-mini {
66-
background-color: #d73925;
67-
height: 50px;
68-
line-height: 50px;
69-
font-size: 20px;
70-
color: #fff;
71-
text-align: center;
72-
width: 100%;
73-
display: none;
74-
}
7552
.sidebar-menu {
7653
position: fixed;
7754
width:230px;
7855
min-height: 100%;
7956
top: 50px;
8057
bottom:0;
8158
overflow-x: hidden;
82-
transition: transform .3s ease-in-out,width .3s ease-in-out;
59+
transition: transform .3s ease-in-out,width 0.3s ease-in-out;
8360
@include scrollBar;
8461
}
8562
/** 对饿了么菜单框架配色进行调整bengin **/

0 commit comments

Comments
 (0)