Skip to content

Commit b0b5412

Browse files
author
=
committed
修改布局
layout组件实现上中下布局，中间自适应
1 parent 07378ca commit b0b5412

File tree

8 files changed

+125
-122
lines changed

8 files changed

+125
-122
lines changed

‎src/App.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,5 +37,6 @@ body {
3737
width: 100%;
3838
height: 100%;
3939
margin: 0 auto;
40+
overflow: hidden;
4041
}
4142
</style>

‎src/components/tree/tree-view.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export default {
4141
.tree-view-menu {
4242
width: 300px;
4343
min-height: 300px;
44-
height: 100%;
44+
/* height: 100%; */
4545
overflow-y: auto;
4646
overflow-x: hidden;
4747
}

‎src/router/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* @Author: calebman
33
* @Date: 2018-03-22 11:28:33
44
* @Last Modified by: calebman
5-
* @Last Modified time: 2018-05-06 12:13:02
5+
* @Last Modified time: 2018-05-08 13:34:10
66
*/
77

88
import Vue from 'vue';

‎src/views/demo/datatable/data-table.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -490,7 +490,6 @@ export default {
490490
.table {
491491
height: 100%;
492492
.table-card {
493-
margin: 10px;
494493
padding: 16px;
495494
height: 100%;
496495
border-radius: 5px;

‎src/views/demo/test.vue‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
<!-- -->
1+
<!-- 布局测试组件 -->
22
<template>
3-
<div></div>
3+
<div>
4+
<ul>
5+
<li v-for="i in 1000">布局测试{{i}}</li>
6+
</ul>
7+
</div>
48
</template>
59

610
<script>

‎src/views/demo/tree-view-demo.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,6 @@ export default {
111111
height: 100%;
112112
text-align: left;
113113
margin-right: 10px;
114-
padding: 16px;
115114
background: #fff;
116115
}
117116
</style>

‎src/views/layout.vue‎

Lines changed: 72 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
<!-- 主页面 -->
1+
<!-- 核心布局 -->
22
<template>
33
<div class="layout">
4-
<div ref="mainheader" class="layout-header">
4+
<div class="layout-header">
55
<el-row>
66
<el-col :xs="10" :sm="12" :md="14" :lg="16" :xl="18">
77
<div class="system-info">
@@ -29,10 +29,10 @@
2929
</el-col>
3030
</el-row>
3131
</div>
32-
<div :style="{height:contentHeight}" class="layout-main">
32+
<div class="layout-main">
3333
<router-view/>
3434
</div>
35-
<div ref="mainfooter" class="layout-footer">
35+
<div class="layout-footer">
3636
<a href="https://github.com/calebman/vue-DBM">
3737
点此进入代码仓库
3838
</a>
@@ -42,12 +42,10 @@
4242

4343
<script>
4444
export default {
45-
name: "dbm-main",
45+
name: "layout1",
4646
components: {},
4747
data() {
48-
return {
49-
contentHeight: "100px"
50-
};
48+
return {};
5149
},
5250
props: {},
5351
computed: {
@@ -65,17 +63,6 @@ export default {
6563
}
6664
},
6765
methods: {
68-
computeContentHeight() {
69-
let headerHeight = this.$refs["mainheader"]
70-
? this.$refs["mainheader"].offsetHeight
71-
: null;
72-
headerHeight = headerHeight ? headerHeight : 65;
73-
let footerHeight = this.$refs["mainfooter"]
74-
? this.$refs["mainfooter"].offsetHeight
75-
: null;
76-
footerHeight = footerHeight ? footerHeight : 60;
77-
return `${window.innerHeight - (headerHeight + footerHeight + 5)}px`;
78-
},
7966
userCommand(command) {
8067
switch (command) {
8168
case "usercenter":
@@ -86,93 +73,87 @@ export default {
8673
}
8774
},
8875
watch: {},
89-
mounted() {
90-
let self = this;
91-
self.contentHeight = self.computeContentHeight();
92-
window.onresize = function() {
93-
self.contentHeight = self.computeContentHeight();
94-
};
95-
},
9676
created() {}
9777
};
9878
</script>
9979

10080
<style lang="less" scoped>
10181
.layout {
102-
// border: 1px solid #d7dde4;
103-
background: #f5f7f9;
104-
position: relative;
105-
// border-radius: 4px;
106-
overflow: hidden;
107-
}
108-
109-
.layout-header {
110-
background: #495060;
11182
width: 100%;
11283
height: 100%;
113-
line-height: 64px;
114-
.system-tools {
115-
text-align: right;
116-
.d-icon-tongzhi {
117-
font-size: 24px;
118-
color: #fff;
119-
cursor: pointer;
120-
}
84+
margin: 0 auto;
85+
background: #f5f7f9;
86+
.layout-header,
87+
.layout-main,
88+
.layout-footer {
89+
position: absolute;
90+
width: 100%;
12191
}
122-
.system-info {
123-
text-align: left;
124-
.logo {
125-
width: 40px;
126-
height: 40px;
127-
border-radius: 50px;
128-
margin-top: 12px;
129-
margin-left: 20px;
130-
margin-right: 10px;
131-
float: left;
132-
position: relative;
133-
}
134-
.title {
135-
font-size: 18px;
136-
font-weight: bold;
137-
color: azure;
138-
line-height: 64px;
92+
.layout-header {
93+
background: #495060;
94+
line-height: 64px;
95+
height: 64px;
96+
top: 0;
97+
.system-tools {
98+
text-align: right;
99+
.d-icon-tongzhi {
100+
font-size: 24px;
101+
color: #fff;
102+
cursor: pointer;
103+
}
139104
}
140-
}
141-
.system-user {
142-
text-align: right;
143-
margin-right: 5px;
144-
.userinfo-inner {
145-
cursor: pointer;
146-
color: #fff;
147-
img {
105+
.system-info {
106+
text-align: left;
107+
.logo {
148108
width: 40px;
149109
height: 40px;
150-
border-radius: 20px;
151-
margin: 10px 0px 10px 10px;
152-
float: right;
110+
border-radius: 50px;
111+
margin-top: 12px;
112+
margin-left: 20px;
113+
margin-right: 10px;
114+
float: left;
115+
position: relative;
116+
}
117+
.title {
118+
font-size: 18px;
119+
font-weight: bold;
120+
color: azure;
121+
line-height: 64px;
122+
}
123+
}
124+
.system-user {
125+
text-align: right;
126+
margin-right: 5px;
127+
.userinfo-inner {
128+
cursor: pointer;
129+
color: #fff;
130+
img {
131+
width: 40px;
132+
height: 40px;
133+
border-radius: 20px;
134+
margin: 10px 0px 10px 10px;
135+
float: right;
136+
}
153137
}
154138
}
155139
}
156-
}
157-
158-
.layout-footer {
159-
background-color: #fafafa;
160-
text-align: center;
161-
font-size: 15px;
162-
height: 50px;
163-
line-height: 50px;
164-
width: 100%;
165-
a {
166-
color: #303133;
167-
font-weight: 400;
140+
.layout-footer {
141+
background-color: #fafafa;
142+
height: 50px;
143+
text-align: center;
144+
font-size: 15px;
145+
line-height: 50px;
146+
bottom: 0;
147+
a {
148+
color: #303133;
149+
font-weight: 400;
150+
}
151+
}
152+
.layout-main {
153+
background-color: #fafafa;
154+
top: 64px;
155+
bottom: 50px;
156+
height: auto;
168157
}
169-
}
170-
171-
.layout-main {
172-
width: 100%;
173-
background-color: #fafafa;
174-
// position: relative;
175-
// overflow: scroll;
176-
// overflow-x: hidden;
177158
}
178159
</style>

‎src/views/main.vue‎

Lines changed: 44 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
</el-submenu>
1616
</el-menu>
1717
</div>
18+
<div class="container-center"></div>
1819
<div class="container-right">
1920
<div class="breadcrumb">
2021
<el-breadcrumb separator-class="el-icon-arrow-right">
@@ -69,40 +70,58 @@ export default {
6970
this.initBreadcrumbItems(to);
7071
}
7172
},
73+
mounted() {
74+
let self = this;
75+
self.contentHeight = self.computeContentHeight();
76+
window.onresize = function() {
77+
self.contentHeight = self.computeContentHeight();
78+
};
79+
},
7280
created() {
7381
this.initBreadcrumbItems(this.$route);
7482
}
7583
};
7684
</script>
7785

78-
<style scoped>
86+
<style lang="less" scoped>
7987
.container {
8088
width: 100%;
8189
height: 100%;
90+
position: relative;
8291
display: flex; /*设为伸缩容器*/
83-
}
84-
.container-left {
85-
/* float: left; */
86-
width: 240px;
87-
height: 100%;
88-
}
89-
.menu {
90-
text-align: left;
91-
height: 100%;
92-
padding: 16px;
93-
}
94-
.container-right {
95-
flex: 1;
96-
margin-top: 16px;
97-
margin-left: 16px;
98-
}
99-
.breadcrumb {
100-
padding-left: 10px;
101-
}
102-
.content {
103-
margin-top: 16px;
104-
width: 100%;
105-
height: 100%;
106-
background-color: #fff;
92+
.container-left {
93+
width: 240px;
94+
height: 100%;
95+
.menu {
96+
text-align: left;
97+
height: 100%;
98+
padding: 16px;
99+
}
100+
}
101+
.container-center {
102+
width: 16px;
103+
height: 100%;
104+
}
105+
.container-right {
106+
flex: 1;
107+
padding-top: 16px;
108+
width: 100%;
109+
height: 100%;
110+
position: relative;
111+
.breadcrumb {
112+
padding-left: 10px;
113+
width: 100%;
114+
height: 20px;
115+
}
116+
.content {
117+
background-color: #fff;
118+
overflow: auto;
119+
width: 100%;
120+
position: absolute;
121+
top: 50px;
122+
bottom: 0px;
123+
left: 0px;
124+
}
125+
}
107126
}
108127
</style>

0 commit comments

Comments
 (0)