From 0905d4eaf3420f47db1a19c49413a157c65474f8 Mon Sep 17 00:00:00 2001
From: songshankun <songshankun@foxmail.com>
Date: 星期二, 17 十月 2023 18:36:01 +0800
Subject: [PATCH] style: 页头/侧边栏/页面布局 样式调整
---
src/components/layout/components/appsidebar/index.scss | 42 +++++++++++++++++----
src/assets/style/index.scss | 12 +++--
vue.config.js | 4 +-
src/components/layout/components/appHeader/index.vue | 17 +++++---
src/components/layout/components/AppMain.vue | 1
5 files changed, 53 insertions(+), 23 deletions(-)
diff --git a/src/assets/style/index.scss b/src/assets/style/index.scss
index ad72597..8899a6a 100644
--- a/src/assets/style/index.scss
+++ b/src/assets/style/index.scss
@@ -183,16 +183,18 @@
.rightContent {
height: 100%;
- padding: 10px;
+ padding: 12px 20px 10px 20px;
background: #e6ecf2;
.top {
- margin-bottom: 20px;
- height: 60px;
+ margin-bottom: 10px;
+ height: 80px;
background: #fff;
- border-radius: 8px;
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
}
.list-view {
- height: calc(100% - 120px);
+ height: calc(100% - 92px);
background: #fff;
border-radius: 12px;
.table {
diff --git a/src/components/layout/components/AppMain.vue b/src/components/layout/components/AppMain.vue
index d711451..4fd1095 100644
--- a/src/components/layout/components/AppMain.vue
+++ b/src/components/layout/components/AppMain.vue
@@ -24,7 +24,6 @@
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.app-main {
- margin-left: 10px;
box-sizing: border-box;
display: flex;
flex: 1;
diff --git a/src/components/layout/components/appHeader/index.vue b/src/components/layout/components/appHeader/index.vue
index e83742e..5718bf9 100644
--- a/src/components/layout/components/appHeader/index.vue
+++ b/src/components/layout/components/appHeader/index.vue
@@ -37,15 +37,18 @@
<style lang="scss" scoped>
.sales-lead {
display: flex;
- height: 55px;
- line-height: 55px;
- background-color: #fff;
- margin-bottom: 10px;
- margin-left: -10px;
+ height: 50px;
+ line-height: 50px;
+ flex-shrink: 0;
+ box-sizing: border-box;
+ background-color: transparent;
+ border: 1px solid #ccc;
+ align-items: center;
.header-title {
margin-left: 16px;
- font-size: 16px;
- color: #475059;
+ font-size: 18px;
+ font-weight: 700;
+ color: #171718;
}
.header-user-info {
margin-left: auto;
diff --git a/src/components/layout/components/appsidebar/index.scss b/src/components/layout/components/appsidebar/index.scss
index 42ced06..6a93335 100644
--- a/src/components/layout/components/appsidebar/index.scss
+++ b/src/components/layout/components/appsidebar/index.scss
@@ -3,10 +3,11 @@
// height: 100%;
background-color: #314255;
.box {
- width: 200px;
+ width: 187px;
.logo-view {
margin: 40px 20px 10px;
}
+
.el-menu {
border-right: solid 0px #e6e6e6;
}
@@ -16,12 +17,37 @@
.icon {
color: #bfcbd9;
}
- // .el-submenu__title:hover,
- // .el-menu-item:focus,
- // .el-menu-item:hover {
- // min-width: 180px;
- // color: #fff;
- // background-color: #2a78fb !important;
- // }
+ .el-submenu__title:hover,
+ .el-menu-item:focus,
+ .el-menu-item:hover {
+ background-color: #011527 !important;
+ }
+
+ ::v-deep{
+ .el-menu .el-submenu .el-submenu__title:hover{
+ background-color: #011527 !important;
+ }
+ }
+
+ .el-submenu .el-menu-item {
+ width: 166px;
+ min-width: 166px;
+ height: 38px;
+ display: flex;
+ align-items: center;
+ margin-left: 11px;
+ border-radius: 6px;
+
+ &.is-active {
+ color: #fff !important;
+ flex-grow: 0;
+ fill: #fff !important;
+ background: #2a78fb !important;
+ i {
+ color: #fff;
+ }
+
+ }
+ }
}
}
diff --git a/vue.config.js b/vue.config.js
index fe24245..e91cfb3 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -30,13 +30,13 @@
"crypto-js",
"sockjs-client"
],
- configureWebpack: (config) => {
+ configureWebpack: () => {
const configNew = {}
if (process.env.NODE_ENV === "production") {
configNew.externals = externals
configNew.plugins = []
} else if (process.env.NODE_ENV === "development") {
- console.log("development", config)
+ // console.log("development", config)
}
return configNew
},
--
Gitblit v1.8.0