Skip to content

Commit a1f0385

Browse files
lpyalpya
committed
refactor:重构界面布局
1 parent 4f0e744 commit a1f0385

File tree

5 files changed

+69
-125
lines changed

5 files changed

+69
-125
lines changed

‎src/layout/Index.vue‎

Lines changed: 2 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
* @Author: hutu
44
* @Date: 2021-12-07 08:36:02
55
* @LastEditors: hutu
6-
* @LastEditTime: 2022-01-06 17:32:44
6+
* @LastEditTime: 2022-01-07 08:45:25
77
-->
88
<template>
99
<div class="layout" :class="menuCollapse ? 'hideSidebar' : 'openSidebar'">
10-
<Sidebar class="sidebar-container" :list="accessRoutes" :route="route.path" :collapse="menuCollapse" />
10+
<Sidebar class="sidebar-container app-sidebar-bg" :list="accessRoutes" :route="route.path" :collapse="menuCollapse" />
1111
<div class="main-container">
1212
<div class="layout-header app-header-bg">
1313
<Navbar />
@@ -16,17 +16,6 @@
1616
<AppMain />
1717
</div>
1818
</div>
19-
<!-- <div class="layout-menu app-sidebar-bg" :style="{ minWidth: menuCollapse ? '64px' : '210px' }">
20-
<Sidebar :list="accessRoutes" :route="route.path" :collapse="menuCollapse" />
21-
</div>
22-
<div class="layout-main">
23-
<div class="layout-header app-header-bg">
24-
<Navbar />
25-
</div>
26-
<div class="layout-content app-main-bg">
27-
<AppMain />
28-
</div>
29-
</div>-->
3019
</div>
3120
</template>
3221

@@ -44,60 +33,3 @@ const route = useRoute()
4433
const menuCollapse = computed(() => store.state.permission.menuCollapse)
4534
const accessRoutes = computed(() => store.state.permission.accessRoutes)
4635
</script>
47-
48-
<style lang="scss">
49-
#app {
50-
position: fixed;
51-
height: 100%;
52-
width: 100%;
53-
}
54-
.layout {
55-
position: relative;
56-
height: 100%;
57-
width: 100%;
58-
.sidebar-container {
59-
position: fixed;
60-
height: 100%;
61-
top: 0px;
62-
bottom: 0;
63-
left: 0;
64-
z-index: 1001;
65-
overflow: hidden;
66-
background-color: $menuBg;
67-
transition: width 0.28s;
68-
}
69-
.main-container {
70-
transition: margin-left 0.28s;
71-
}
72-
}
73-
.openSidebar {
74-
.sidebar-container {
75-
width: 210px !important;
76-
}
77-
.main-container {
78-
margin-left: 210px;
79-
}
80-
}
81-
.hideSidebar {
82-
.sidebar-container {
83-
width: 64px !important;
84-
}
85-
.main-container {
86-
margin-left: 64px;
87-
}
88-
}
89-
// .layout {
90-
// display: flex;
91-
// .layout-menu {
92-
// transition: all 0.3s;
93-
// overflow: hidden;
94-
// }
95-
// .layout-main {
96-
// flex: 1;
97-
// .layout-header {
98-
// height: 50px;
99-
// border-bottom: 1px solid #eee;
100-
// }
101-
// }
102-
// }
103-
</style>

‎src/styles/index.scss‎

Lines changed: 49 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,54 @@
1-
@import "./sidebar.scss";
1+
@import './sidebar.scss';
2+
23
* {
3-
padding: 0px;
4-
margin: 0px;
4+
padding: 0px;
5+
margin: 0px;
56
}
6-
a{
7-
text-decoration: none;
7+
a {
8+
text-decoration: none;
89
}
910
#app {
10-
font-size: 14px;
11-
}
12-
13-
// // 自定义滚动条
14-
// ::-webkit-scrollbar {
15-
// width: 6px;
16-
// /*滚动条宽度*/
17-
// height: 6px;
18-
// /*滚动条高度*/
19-
// transform: translateX(-50px);
20-
// }
11+
position: fixed;
12+
height: 100%;
13+
width: 100%;
14+
font-size: 14px;
2115

22-
// /*定义滚动条轨道 */
23-
// ::-webkit-scrollbar-track {
24-
// background-color: transparent;
25-
// /*滚动条的背景颜色*/
26-
// }
27-
28-
// /*定义滑块 */
29-
// ::-webkit-scrollbar-thumb {
30-
// cursor: pointer;
31-
// background-color: #d2e0ed;
32-
// border-radius: 2px;
33-
// /*滚动条的背景颜色*/
34-
// }
35-
36-
// ::-webkit-scrollbar-thumb:hover {
37-
// background-color: #d2e0ed;
38-
// /*滚动条的背景颜色*/
39-
// }
40-
// ::-webkit-scrollbar-thumb:active {
41-
// background-color: #d2e0ed;
42-
// /*滚动条的背景颜色*/
43-
// }
16+
.layout {
17+
position: relative;
18+
height: 100%;
19+
width: 100%;
20+
.sidebar-container {
21+
position: fixed;
22+
height: 100%;
23+
top: 0px;
24+
z-index: 1001;
25+
overflow: hidden;
26+
transition: width 0.28s;
27+
-moz-transition: width 0.28s;
28+
-webkit-transition: width 0.28s;
29+
-o-transition: width 0.28s;
30+
}
31+
.main-container {
32+
transition: margin-left 0.28s;
33+
-moz-transition: margin-left 0.28s;
34+
-webkit-transition: margin-left 0.28s;
35+
-o-transition: margin-left 0.28s;
36+
}
37+
}
38+
.openSidebar {
39+
.sidebar-container {
40+
width: 210px !important;
41+
}
42+
.main-container {
43+
margin-left: 210px;
44+
}
45+
}
46+
.hideSidebar {
47+
.sidebar-container {
48+
width: 64px !important;
49+
}
50+
.main-container {
51+
margin-left: 64px;
52+
}
53+
}
54+
}

‎src/styles/variables.scss‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
$white: #fff;
2-
$baseBg: #f0f2f5;
3-
$menuText: #bfcbd9;
4-
$menuActiveText: #409eff;
5-
$subMenuActiveText: #f4f4f5;
6-
$menuBg: #304156;
7-
$menuHover: #263445;
8-
$subMenuBg: #1f2d3d;
9-
$subMenuHover: #001528;
10-
$sideBarWidth: 210px;
2+
// $baseBg: #f0f2f5;
3+
// $menuText: #bfcbd9;
4+
// $menuActiveText: #409eff;
5+
// $subMenuActiveText: #f4f4f5;
6+
// $menuBg: #304156;
7+
// $menuHover: #263445;
8+
// $subMenuBg: #1f2d3d;
9+
// $subMenuHover: #001528;
10+
// $sideBarWidth: 210px;
1111
$breadcrumbColor: #97a8be;
1212

1313
.app-icon-hover {

‎src/views/dashboard/Index.vue‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
22
<div class="dashboard">
33
<PanelGroup :list="state.panelList" />
4-
<!-- <el-row :gutter="32">
4+
<el-row>
55
<el-col :xs="24" :sm="24" :lg="24">
66
<div class="chart-wrapper">
77
<LineChart />
88
</div>
99
</el-col>
10-
</el-row> -->
10+
</el-row>
1111
<div style="height: 1800px"></div>
1212
</div>
1313
</template>
@@ -30,10 +30,11 @@ const state = reactive({
3030
</script>
3131
<style lang="scss">
3232
.dashboard {
33-
// overflow: hidden;
34-
height: calc(100vh - 51px);
33+
overflow-y: auto;
34+
overflow-x: hidden;
35+
// height: calc(100vh - 51px);
3536
// height: 1600px;
37+
height: 100%;
3638
padding: 0 20px;
37-
overflow: auto;
3839
}
3940
</style>

‎src/views/dashboard/components/LineChart.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
* @Author: hutu
44
* @Date: 2022-01-06 14:51:10
55
* @LastEditors: hutu
6-
* @LastEditTime: 2022-01-06 17:33:33
6+
* @LastEditTime: 2022-01-07 08:35:56
77
-->
88
<template>
99
<div style="height: 360px; padding: 20px">
@@ -68,14 +68,14 @@ const initLineChart = () => {
6868
lchart.setOption(option)
6969
chart.value = lchart
7070
}
71-
onActivated(() => {
71+
onMounted(() => {
7272
mounted()
7373
nextTick(() => {
7474
initLineChart()
7575
})
7676
})
7777
78-
onDeactivated(() => {
78+
onBeforeUnmount(() => {
7979
beforeDestroy()
8080
})
8181

0 commit comments

Comments
 (0)