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