diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index b6531d8..228548c 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -2,6 +2,16 @@
margin: 0;
padding: 0;
}
+:root{
+ --header-height:55px;
+ --sidebar-width:200px;
+ --sidemenu-height:45px;
+}
+
+.el-menu-item, .el-submenu__title{
+ height: var(--sidemenu-height) !important;
+ line-height: var(--sidemenu-height) !important;
+}
html,
body,
@@ -23,9 +33,9 @@ a {
.content-box {
position: absolute;
- left: 250px;
+ left: var(--sidebar-width);
right: 0;
- top: 70px;
+ top: var(--header-height);
bottom: 0;
padding-bottom: 30px;
-webkit-transition: left .3s ease-in-out;
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 53bb453..0fd031c 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -22,21 +22,23 @@
-
+
+
{{username}}
-
-
-
- 项目仓库
-
- 个人中心
- 退出登录
-
-
-
+
+
+
+ 项目仓库
+
+ 个人中心
+ 退出登录
+
+
+
+
@@ -58,7 +60,7 @@ export default {
};
onMounted(() => {
- if (document.body.clientWidth < 1500) {
+ if (document.body.clientWidth < 1000) {
collapseChage();
}
});
@@ -89,7 +91,7 @@ export default {
position: relative;
box-sizing: border-box;
width: 100%;
- height: 70px;
+ height: var(--header-height);
font-size: 22px;
color: #fff;
}
@@ -97,12 +99,12 @@ export default {
float: left;
padding: 0 21px;
cursor: pointer;
- line-height: 70px;
+ line-height: var(--header-height);
}
.header .logo {
float: left;
width: 250px;
- line-height: 70px;
+ line-height: var(--header-height);
}
.header-right {
float: right;
@@ -110,7 +112,7 @@ export default {
}
.header-user-con {
display: flex;
- height: 70px;
+ height: var(--header-height);
align-items: center;
}
.btn-fullscreen {
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index d74c5c7..abcb84d 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -138,7 +138,7 @@ export default {
display: block;
position: absolute;
left: 0;
- top: 70px;
+ top: var(--header-height);
bottom: 0;
overflow-y: scroll;
}
@@ -146,7 +146,7 @@ export default {
width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
- width: 250px;
+ width: var(--sidebar-width);
}
.sidebar > ul {
height: 100%;