From 7399b5eb2c364b896af1c755422e829b8b886898 Mon Sep 17 00:00:00 2001
From: junjie <junjie.xia@fit2cloud.com>
Date: Thu, 24 Jun 2021 14:30:02 +0800
Subject: [PATCH] =?UTF-8?q?fix:frontend=20css=E7=BC=A9=E8=BF=9B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/styles/common/mixins.scss |  25 ++--
 frontend/src/styles/index.scss         | 141 +++++++++---------
 frontend/src/styles/mixin.scss         |  10 +-
 frontend/src/styles/sidebar.scss       |   2 +-
 frontend/src/styles/topbar.scss        | 198 ++++++++++++-------------
 5 files changed, 182 insertions(+), 194 deletions(-)

diff --git a/frontend/src/styles/common/mixins.scss b/frontend/src/styles/common/mixins.scss
index 91ed5a95f8..8cb316fb91 100644
--- a/frontend/src/styles/common/mixins.scss
+++ b/frontend/src/styles/common/mixins.scss
@@ -1,16 +1,15 @@
 @mixin flex-row($justify: flex-start, $align: stretch) {
-    display: flex;
-    @if $justify != flex-start {
-      justify-content: $justify;
-    }
-    @if $align != stretch {
-      align-items: $align;
-    }
+  display: flex;
+  @if $justify != flex-start {
+    justify-content: $justify;
   }
-  
-  @mixin variant($color, $background-color, $border-color) {
-    color: $color;
-    background-color: $background-color;
-    border-color: $border-color;
+  @if $align != stretch {
+    align-items: $align;
   }
-  
\ No newline at end of file
+}
+
+@mixin variant($color, $background-color, $border-color) {
+  color: $color;
+  background-color: $background-color;
+  border-color: $border-color;
+}
diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 36c8250e6d..0301675a23 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -73,34 +73,32 @@ div:focus {
 }
 
 .de-dialog {
-    width: 30% !important;
+  width: 30% !important;
 
-    .el-dialog__header{
-        background-color: #f4f4f5;
-        padding: 10px 20px !important;
-    }
-    .el-dialog__body{
-        padding: 1px 20px !important;
-
-    }
+  .el-dialog__header{
+    background-color: #f4f4f5;
+    padding: 10px 20px !important;
+  }
+  .el-dialog__body{
+    padding: 1px 20px !important;
+  }
 }
 
 .de-filter-dialog {
-    min-width: 500px !important;
-    width: 50% !important;
+  min-width: 500px !important;
+  width: 50% !important;
 
-    .el-dialog__header{
-        // background-color: #f4f4f5;
-        padding: 10px 20px !important;
-
-        .el-dialog__headerbtn {
-            top: 15px !important;
-        }
-    }
-    .el-dialog__body{
-        padding: 1px 15px !important;
+  .el-dialog__header{
+    // background-color: #f4f4f5;
+    padding: 10px 20px !important;
 
+    .el-dialog__headerbtn {
+      top: 15px !important;
     }
+  }
+  .el-dialog__body{
+    padding: 1px 15px !important;
+  }
 }
 
 .de-style-dialog {
@@ -117,7 +115,6 @@ div:focus {
   }
   .el-dialog__body{
     padding: 1px 15px !important;
-
   }
 }
 
@@ -129,7 +126,6 @@ div:focus {
 
   .el-dialog__header{
     display:none!important;
-
   }
   .el-dialog__body{
     padding: 0px!important;
@@ -138,79 +134,74 @@ div:focus {
 }
 
 .de-search-header {
-    .el-tabs__header{
-        display: none !important;;
-    }
+  .el-tabs__header{
+    display: none !important;;
+  }
 }
 
 .de-input{
-    margin-bottom: 14px;
-    margin-top: 10px;
-    .el-input{
-        .el-input__inner {
-            line-height: 30px !important;
-            height: 30px !important;
-            border-right: none;
-
-        }
+  margin-bottom: 14px;
+  margin-top: 10px;
+  .el-input{
+    .el-input__inner {
+      line-height: 30px !important;
+      height: 30px !important;
+      border-right: none;
     }
-    .el-input__inner:focus{
-        border-color: #E6E6E6 !important;
-    }
-    .el-input-group__append {
-        background-color: #ffffff;
-    }
-
+  }
+  .el-input__inner:focus{
+    border-color: #E6E6E6 !important;
+  }
+  .el-input-group__append {
+    background-color: #ffffff;
+  }
 }
 
 .filter-card-class {
-    width: 100%;
-    .el-card__header {
-        padding: 5px 0 !important;
-        border-bottom: none !important;
-    }
+  width: 100%;
+  .el-card__header {
+    padding: 5px 0 !important;
+    border-bottom: none !important;
+  }
 
-    .el-card__body {
-        padding: 10px;
-    }
+  .el-card__body {
+    padding: 10px;
+  }
 }
 
 .real-input {
-
-    .el-input__inner {
-        height: 25px !important;
-        border: none !important;
-    }
+  .el-input__inner {
+    height: 25px !important;
+    border: none !important;
+  }
 }
 
 .de-filter-data-table {
-    .el-table__body-wrapper >table>{
-        tbody {
-            .el-table__row {
-                :hover {
-                    cursor: pointer;
-                }
-                td {
-                    border: none !important;
-                }
-            }
-
+  .el-table__body-wrapper >table>{
+    tbody {
+      .el-table__row {
+        :hover {
+          cursor: pointer;
         }
-
+        td {
+          border: none !important;
+        }
+      }
     }
+  }
 }
 .de-filter-data-table::before {
-    height: 0px !important;
+  height: 0px !important;
 }
 
 .custom-component-class {
-    width: 100%;
-    div.el-input-group__append {
-        width: 10% !important;
-    }
-    div {
-      width: 100% !important;
-    }
+  width: 100%;
+  div.el-input-group__append {
+    width: 10% !important;
+  }
+  div {
+    width: 100% !important;
+  }
 }
 
 %field-icon{
diff --git a/frontend/src/styles/mixin.scss b/frontend/src/styles/mixin.scss
index a02e67210f..8c6cd60a6c 100644
--- a/frontend/src/styles/mixin.scss
+++ b/frontend/src/styles/mixin.scss
@@ -38,8 +38,8 @@
 }
 
 @mixin variant($color, $background-color, $border-color) {
-    color: $color;
-    background-color: $background-color;
-    border-color: $border-color;
-  }
-  
+  color: $color;
+  background-color: $background-color;
+  border-color: $border-color;
+}
+
diff --git a/frontend/src/styles/sidebar.scss b/frontend/src/styles/sidebar.scss
index b8762fc8ed..6f5fdcafab 100644
--- a/frontend/src/styles/sidebar.scss
+++ b/frontend/src/styles/sidebar.scss
@@ -15,7 +15,7 @@
     transition: width 0.28s;
     // width: $sideBarWidth !important;
     background-color: $menuBg;
-     // width: 260px;
+    // width: 260px;
     height: $contentHeight;
     position: fixed;
     font-size: 0px;
diff --git a/frontend/src/styles/topbar.scss b/frontend/src/styles/topbar.scss
index fbe970c7bf..da842372c0 100644
--- a/frontend/src/styles/topbar.scss
+++ b/frontend/src/styles/topbar.scss
@@ -1,118 +1,116 @@
 .top-nav {
-    // margin-left: $sideBarWidth;
-    width: 100%;
-    // background-color: #304156;
-    // background-color: $--color-primary;
-    position: fixed;
-    top: 0;
-    left: 0;
-    z-index: 1001;
-    overflow: hidden;
-    border-bottom: 1px solid #DCDFE6;
+  // margin-left: $sideBarWidth;
+  width: 100%;
+  // background-color: #304156;
+  // background-color: $--color-primary;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1001;
+  overflow: hidden;
+  border-bottom: 1px solid #DCDFE6;
 
-    .log {
-      padding: 0 16px;
-      line-height: 56px;
-      height: 56px;
-      font-size: 24px;
-      font-weight: bold;
-      // color: rgb(191, 203, 217);
-      color: rgba(255,255,255,0.87);
-      float: left;
-      img{
-        width: auto;
-        max-height: 45px;
-      }
+  .log {
+    padding: 0 16px;
+    line-height: 56px;
+    height: 56px;
+    font-size: 24px;
+    font-weight: bold;
+    // color: rgb(191, 203, 217);
+    color: rgba(255,255,255,0.87);
+    float: left;
+    img{
+      width: auto;
+      max-height: 45px;
     }
-    .el-menu {
-      float: left;
-      border: none!important;
-      // background-color: #304156;
+  }
+  .el-menu {
+    float: left;
+    border: none!important;
+    // background-color: #304156;
     //   background-color: $--color-primary;
 
-      .nav-item {
-        display: inline-block;
-        .el-menu-item:not(.is-active) {
-          // color: rgb(191, 203, 217);
-          color: $menuText;
-          &:hover {
-            background-color: $menuHover !important;
-            // color: $subMenuActiveText !important;
-          }
-          &:focus {
-            background-color: $subMenuHover !important;
-            color: $subMenuActiveText !important;
-          }
-
+    .nav-item {
+      display: inline-block;
+      .el-menu-item:not(.is-active) {
+        // color: rgb(191, 203, 217);
+        color: $menuText;
+        &:hover {
+          background-color: $menuHover !important;
+          // color: $subMenuActiveText !important;
         }
-        .is-active {
-            background-color: $subMenuHover !important;
-            color: $subMenuActiveText !important;
+        &:focus {
+          background-color: $subMenuHover !important;
+          color: $subMenuActiveText !important;
+        }
+
+      }
+      .is-active {
+        background-color: $subMenuHover !important;
+        color: $subMenuActiveText !important;
+      }
+    }
+  }
+
+  .right-menu {
+    float: right;
+    height: 56px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+
+    &:focus {
+      outline: none;
+    }
+
+    .right-menu-item {
+      display: inline-block;
+      padding: 10px 8px;
+      height: 100%;
+      font-size: 18px;
+      // color: #5a5e66;
+      color: #606266;
+      vertical-align: text-bottom;
+
+      &.hover-effect {
+        cursor: pointer;
+        transition: background .3s;
+
+        &:hover {
+          background-color: rgba(0, 0, 0, .025)
         }
       }
     }
 
-    .right-menu {
-      float: right;
-      height: 56px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-
-      &:focus {
-        outline: none;
-      }
-
-      .right-menu-item {
-        display: inline-block;
-        padding: 10px 8px;
-        height: 100%;
-        font-size: 18px;
-        // color: #5a5e66;
-        color: #606266;
-        vertical-align: text-bottom;
-
-        &.hover-effect {
+    .avatar-container {
+      margin-right: 30px;
+      .avatar-wrapper {
+        margin-top: 5px;
+        position: relative;
+        .user-avatar {
           cursor: pointer;
-          transition: background .3s;
-
-          &:hover {
-            background-color: rgba(0, 0, 0, .025)
+          width: 40px;
+          height: 40px;
+          border-radius: 10px;
+        }
+        .de-user-avatar {
+          cursor: pointer;
+          height: 40px;
+          border-radius: 10px;
+          span {
+            color: #ffffff;
           }
         }
-      }
 
-      .avatar-container {
-        margin-right: 30px;
-
-        .avatar-wrapper {
-          margin-top: 5px;
-          position: relative;
-
-          .user-avatar {
-            cursor: pointer;
-            width: 40px;
-            height: 40px;
-            border-radius: 10px;
-          }
-          .de-user-avatar {
-            cursor: pointer;
-            height: 40px;
-            border-radius: 10px;
-            span {
-                color: #ffffff;
-            }
-          }
-
-          .el-icon-caret-bottom {
-            cursor: pointer;
-            position: absolute;
-            right: -20px;
-            top: 25px;
-            font-size: 12px;
-          }
+        .el-icon-caret-bottom {
+          cursor: pointer;
+          position: absolute;
+          right: -20px;
+          top: 25px;
+          font-size: 12px;
         }
       }
     }
   }
+}