refactor: 样式优化

Former-commit-id: 634daf7077f7e534343648fa86acfebb99e9b4de

src/styles/element-plus.scss

@@ -2,8 +2,6 @@
   // 这里可以设置你自定义的颜色变量
   // 这个是element主要按钮:active的颜色，当主题更改后此变量的值也随之更改
   --el-color-primary-dark: #0d84ff;
-  // element plus 2.1.0 禁用文本色值和正常文本色值无法区分问题
-  --el-text-color-disabled: #ccc;
 }
 
 // 覆盖 element-plus 的样式

src/styles/index.scss

@@ -1,63 +1,10 @@
 @import 'src/styles/variables.module';
 @import 'src/styles/element-plus';
 @import './sidebar.scss';
+@import './tailwind.scss';
 
-body {
-  margin: 0;
-  padding: 0;
+html,body,#app{
   height: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
-    Microsoft YaHei, Arial, sans-serif;
-}
-
-label {
-  font-weight: 700;
-}
-
-html {
-  height: 100%;
-  box-sizing: border-box;
-}
-
-#app {
-  height: 100%;
-}
-
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
-}
-
-a:focus,
-a:active {
-  outline: none;
-}
-
-a,
-a:focus,
-a:hover {
-  cursor: pointer;
-  color: inherit;
-  text-decoration: none;
-}
-
-div:focus {
-  outline: none;
-}
-
-.clearfix {
-  &:after {
-    visibility: hidden;
-    display: block;
-    font-size: 0;
-    content: ' ';
-    clear: both;
-    height: 0;
-  }
 }
 
 // main-container global css
@@ -66,10 +13,13 @@ div:focus {
 }
 
 .search{
-  padding:18px  0 0  10px;
+  padding: 18px 0 0 10px;
   margin-bottom: 10px;
-  box-shadow: var(--el-box-shadow-light);
-  border-radius: var(--el-card-border-radius);
-  border: 1px solid var(--el-card-border-color);
+  border-radius: 5px;
+  border: 1px solid #ddd;
+  box-shadow: 6px 2px 6px #CCC;
 }
 
+svg{
+  display: inline-block;
+}

src/styles/sidebar.scss

@@ -12,7 +12,6 @@
     background-color: $menuBg;
     height: 100%;
     position: fixed;
-    font-size: 0px;
     top: 0;
     bottom: 0;
     left: 0;
@@ -47,11 +46,6 @@
       display: none;
     }
 
-    a {
-      display: inline-block;
-      width: 100%;
-      overflow: hidden;
-    }
 
     .svg-icon {
       margin-right: 16px;
@@ -226,3 +220,24 @@
     }
   }
 }
+body[layout="mix"] {
+
+  .horizontal-header{
+    .el-menu-item{
+      height: 50px!important;
+      line-height: 50px!important;
+    }
+
+    .el-sub-menu__title {
+      background-color: #001529!important;
+      height: 50px!important;
+    }
+  }
+  .horizontal-header-right>div {
+    color: #FFF;
+  }
+  .svg-icon{
+    margin-right: 16px;
+  }
+
+}

src/styles/variables.module.scss

@@ -1,7 +1,7 @@
 // sidebar
 $menuText: #bfcbd9;
 $menuActiveText: #409eff;
-$subMenuActiveText: #f4f4f5; //https://github.com/ElemeFE/element/issues/12951
+$subMenuActiveText: #f4f4f5;
 
 $menuBg: #304156;
 $menuHover: #263445;