1

1

src/styles/sidebar.scss

@@ -10,7 +10,7 @@
   .sidebar-container {
     transition: width 0.28s;
     width: $sideBarWidth !important;
-    background-color: $menuBg;
+    // background-color: $menuBg;
     height: 100%;
     position: fixed;
     font-size: 0px;
@@ -69,26 +69,26 @@
     }
 
     // menu hover
-    .submenu-title-noDropdown,
-    .el-submenu__title {
-      &:hover {
-        background-color: $menuHover !important;
-      }
-    }
-
-    .is-active>.el-submenu__title {
-      color: $subMenuActiveText !important;
-    }
-
-    & .nest-menu .el-submenu>.el-submenu__title,
-    & .el-submenu .el-menu-item {
-      min-width: $sideBarWidth !important;
-      background-color: $subMenuBg !important;
-
-      &:hover {
-        background-color: $subMenuHover !important;
-      }
-    }
+    // .submenu-title-noDropdown,
+    // .el-submenu__title {
+    //   &:hover {
+    //     background-color: $menuHover !important;
+    //   }
+    // }
+
+    // .is-active>.el-submenu__title {
+    //   color: $subMenuActiveText !important;
+    // }
+
+    // & .nest-menu .el-submenu>.el-submenu__title,
+    // & .el-submenu .el-menu-item {
+    //   min-width: $sideBarWidth !important;
+    //   background-color: $subMenuBg !important;
+
+    //   &:hover {
+    //     background-color: $subMenuHover !important;
+    //   }
+    // }
   }
 
   .hideSidebar {
@@ -185,13 +185,13 @@
     }
   }
 
-  .nest-menu .el-submenu>.el-submenu__title,
-  .el-menu-item {
-    &:hover {
-      // you can use $subMenuHover
-      background-color: $menuHover !important;
-    }
-  }
+  // .nest-menu .el-submenu>.el-submenu__title,
+  // .el-menu-item {
+  //   &:hover {
+  //     // you can use $subMenuHover
+  //     background-color: $menuHover !important;
+  //   }
+  // }
 
   // the scroll bar appears when the subMenu is too long
   >.el-menu--popup {

src/styles/variables.scss

@@ -1,26 +1,26 @@
 // sidebar
-$menuText:#80BBB7;
-$menuActiveText:#fff;
-$subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
+// $menuText:#80BBB7;
+// $menuActiveText:#fff;
+// $subMenuActiveText:#f4f4f5; //https://github.com/ElemeFE/element/issues/12951
 
-$menuBg:#13817A;
-$menuHover:#13817A;
+// $menuBg:#13817A;
+// $menuHover:#13817A;
 
-$subMenuBg:#0E605B;
-$subMenuHover:#0E605B;
+// $subMenuBg:#0E605B;
+// $subMenuHover:#0E605B;
 
 $sideBarWidth: 165px;
 /* 改变主题色变量 */
-$--color-primary: rgb(19, 129, 122);
+// $--color-primary: rgb(19, 129, 122);
 // the :export directive is the magic sauce for webpack
 // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
-:export {
-  menuText: $menuText;
-  menuActiveText: $menuActiveText;
-  subMenuActiveText: $subMenuActiveText;
-  menuBg: $menuBg;
-  menuHover: $menuHover;
-  subMenuBg: $subMenuBg;
-  subMenuHover: $subMenuHover;
-  sideBarWidth: $sideBarWidth;
-}
+// :export {
+//   menuText: $menuText;
+//   menuActiveText: $menuActiveText;
+//   subMenuActiveText: $subMenuActiveText;
+//   menuBg: $menuBg;
+//   menuHover: $menuHover;
+//   subMenuBg: $subMenuBg;
+//   subMenuHover: $subMenuHover;
+//   sideBarWidth: $sideBarWidth;
+// }

src/views/login/index.vue

@@ -160,9 +160,16 @@ export default {
 };
 </script>
 
-<style lang="scss" rel="stylesheet/scss">
+<style lang="scss" rel="stylesheet/scss" scoped>
+/deep/.el-input__inner{
+   background-color:transparent!important;
+   border:1px solid transparent!important
+}
+.login-container .el-input input:-webkit-autofill{
+  background-color:transparent!important;
+}
 .login-input {
-  background-color: #fff;
+  background-color:transparent!important;
 }
 /* 修复input 背景不协调 和光标变色 */
 /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
@@ -259,7 +266,7 @@ $cursor: #000;
     width: 85%;
 
     input {
-      background: transparent;
+      background: transparent!important;
       border: 0px;
       -webkit-appearance: none;
       border-radius: 0px;
@@ -304,8 +311,8 @@ $light_gray: #eee;
     padding: 0px 35px;
     margin: 12% auto 0;
     overflow: hidden;
-    background-color: #fff;
-    opacity: 0.85;
+    background-color: rgba(255, 255, 255, 0.85);
+    // opacity: 0.85;
     box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.66);
     border-radius: 20px;
   }