feat: 样式调整

frontend/src/components/business/LayoutContent.vue

@@ -11,7 +11,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import "~@/styles/element-variables";
+@import "~@/styles/variables";
 
 .content-container {
   transition: 0.3s;

frontend/src/components/business/complex-table/index.vue

@@ -64,7 +64,7 @@ export default {
 
 <style lang="scss">
 @import "~@/styles/mixin.scss";
-@import "~@/styles/element-variables.scss";
+@import "~@/styles/variables.scss";
 .complex-table {
   .complex-table__header {
     @include flex-row(flex-start, center);

frontend/src/layout/components/Sidebar/index.vue

@@ -6,7 +6,7 @@
         :default-active="activeMenu"
         :collapse="isCollapse"
         :background-color="variables.menuBg"
-        :text-color="variables.menuText"
+
         :unique-opened="false"
         :active-text-color="variables.menuActiveText"
         :collapse-transition="false"

frontend/src/main.js

@@ -4,8 +4,8 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets
 import '@/styles/index.scss' // global css
 import ElementUI from 'element-ui'
 import Fit2CloudUI from 'fit2cloud-ui'
-import 'element-ui/lib/theme-chalk/index.css'
+// import 'element-ui/lib/theme-chalk/index.css'
-import './styles/element-variables.scss'
+// import './styles/variables.scss'
 import i18n from './lang' // internationalization
 
 import App from './App'

frontend/src/metersphere/common/css/main.css

@@ -10,11 +10,11 @@
   width: 100%;
 }
 
-body {
+/* body {
   font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
   font-size: 14px;
   margin: 0;
-}
+} */
 
 /* 解决 document.body.clientHeight 为0 */
 html,body {

frontend/src/store/modules/settings.js

@@ -1,5 +1,5 @@
 import defaultSettings from '@/settings'
-import variables from '@/styles/element-variables.scss'
+import variables from '@/styles/variables.scss'
 // const { showSettings, fixedHeader, sidebarLogo } = defaultSettings
 const { showSettings, sidebarLogo } = defaultSettings
 const state = {

frontend/src/styles/element-variables.scss

@@ -1,31 +0,0 @@
-/**
-* I think element-ui's default theme color is too light for long-term use.
-* So I modified the default color and you can modify it to your liking.
-**/
-
-/* theme color */
-$--color-primary: #1890ff;
-$--color-success: #13ce66;
-$--color-warning: #ffba00;
-$--color-danger: #ff4949;
-// $--color-info: #1E1E1E;
-
-$--button-font-weight: 400;
-
-// $--color-text-regular: #1f2d3d;
-
-$--border-color-light: #dfe4ed;
-$--border-color-lighter: #e6ebf5;
-
-$--table-border: 1px solid #dfe6ec;
-
-/* icon font path, required */
-$--font-path: "~element-ui/lib/theme-chalk/fonts";
-
-@import "~element-ui/packages/theme-chalk/src/index";
-@import "~fit2cloud-ui/src/styles/common/variables";
-// the :export directive is the magic sauce for webpack
-// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
-:export {
-  theme: $--color-primary;
-}

frontend/src/styles/sidebar.scss

@@ -25,6 +25,7 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
+    border-right: 1px solid rgba(0, 0, 0, 0.12);
 
     // reset element-ui css
     .horizontal-collapse-transition {
@@ -67,6 +68,10 @@
       border: none;
       height: 100%;
       width: 100% !important;
+      
+      .is-active {
+        background-color: $menuHover;
+      }
     }
 
     // menu hover

frontend/src/styles/topbar.scss

@@ -1,7 +1,8 @@
 .top-nav {
     // margin-left: $sideBarWidth;
     width: 100%;
-    background-color: #304156;
+    // background-color: #304156;
+    background-color: $--color-primary;
     position: fixed;
     top: 0;
     left: 0;
@@ -13,18 +14,21 @@
       line-height: 56px;
       font-size: 24px;
       font-weight: bold;
-      color: rgb(191, 203, 217);
+      // color: rgb(191, 203, 217);
+      color: rgba(255,255,255,0.87);
       float: left;
     }
     .el-menu {
       float: left;
       border: none!important;
-      background-color: #304156;
+      // background-color: #304156;
+      background-color: $--color-primary;
 
       .nav-item {
         display: inline-block;
         .el-menu-item {
-          color: rgb(191, 203, 217);
+          // color: rgb(191, 203, 217);
+          color: rgba(255,255,255,0.87);
           &:hover {
             background-color: $subMenuHover !important;
           }

frontend/src/styles/variables.scss

@@ -1,10 +1,39 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #1890ff;
+$--color-success: #13ce66;
+$--color-warning: #ffba00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+
+$--border-color-light: #dfe4ed;
+$--border-color-lighter: #e6ebf5;
+
+$--table-border: 1px solid #dfe6ec;
+
+/* icon font path, required */
+$--font-path: "~element-ui/lib/theme-chalk/fonts";
+
+@import "~element-ui/packages/theme-chalk/src/index";
+@import "~fit2cloud-ui/src/styles/common/variables";
+
 // sidebar
 $menuText:#bfcbd9;
 $menuActiveText:#409EFF;
 $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg:#304156;
+// $menuBg:#304156;
-$menuHover:#263445;
+$menuBg:#ffffff;
+// $menuHover:#263445;
+$menuHover: rgba(158, 158, 158, 0.2);
 
 $subMenuBg:#1f2d3d;
 $subMenuHover:#001528;
@@ -16,6 +45,7 @@ $contentHeight: calc(100vh - 56px);
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
 :export {
+  theme: $--color-primary;
   menuText: $menuText;
   menuActiveText: $menuActiveText;
   subMenuActiveText: $subMenuActiveText;

frontend/src/views/login/index.vue

@@ -113,7 +113,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/element-variables";
+@import "../../styles/variables";
 
 @mixin login-center {
   display: flex;