refactor theme

src/App.vue

@@ -26,9 +26,9 @@ export default {
   display: none;
 }
 .backg {
-  background-image: linear-gradient(to top, rgba(255,255,255,0), rgba(255, 255, 255, 0)), url("./assets/knowledge/backgrand_picture.png");
+  background-image: linear-gradient(to top, rgba(255,255,255, 0), rgba(255, 255, 255, 0)), url("./assets/knowledge/backgrand_picture.png");
   background-repeat: no-repeat;
   background-size: 100% 100%;
-  margin-top: -30px;
+  margin-top: -170px;
 }
 </style>

src/assets/styles/element-variables.scss

@@ -4,7 +4,7 @@
 **/
 
 /* theme color */
-$--color-primary: #1890ff;
+$--color-primary: #409EFF;
 $--color-success: #13ce66;
 $--color-warning: #ffba00;
 $--color-danger: #ff4949;
@@ -19,6 +19,11 @@ $--border-color-lighter: #e6ebf5;
 
 $--table-border: 1px solid #dfe6ec;
 
+
+$--color-white: #232B4C;
+
+$--background-color-base: #232B4C;
+
 /* icon font path, required */
 $--font-path: '~element-ui/lib/theme-chalk/fonts';
 

src/assets/styles/ruoyi.scss

@@ -75,7 +75,7 @@
 	.el-table__header-wrapper, .el-table__fixed-header-wrapper {
 		th {
 			word-break: break-word;
-			background-color: #f8f8f9;
+			// background-color: #f8f8f9;
 			color: #515a6e;
 			height: 40px;
 			font-size: 13px;
@@ -271,3 +271,7 @@
 	position: relative;
 	float: right;
 }
+
+.el-input__inner {
+	background-color: #232B4C;
+}

src/assets/styles/sidebar.scss

@@ -93,16 +93,16 @@
       min-width: $base-sidebar-width !important;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        // background-color: rgba(0, 0, 0, 0.06) !important;
       }
     }
 
     & .theme-dark .nest-menu .el-submenu>.el-submenu__title,
     & .theme-dark .el-submenu .el-menu-item {
-      background-color: $base-sub-menu-background !important;
+      // background-color: $base-sub-menu-background !important;
 
       &:hover {
-        background-color: $base-sub-menu-hover !important;
+        // background-color: $base-sub-menu-hover !important;
       }
     }
   }

src/components/Pagination/index.vue

@@ -105,7 +105,7 @@ export default {
 
 <style scoped>
 .pagination-container {
-  background: #fff;
+  /* background: #fff; */
   padding: 32px 16px;
 }
 .pagination-container.hidden {

src/components/TopNav/index.vue

@@ -3,11 +3,12 @@
     :default-active="activeMenu"
     mode="horizontal"
     @select="handleSelect"
+    active-text-color="#409EFF"
   >
     <template v-for="(item, index) in topMenus">
       <!-- <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="index < visibleNumber"
         ><svg-icon :icon-class="item.meta.icon" /> -->
-        <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index"
+        <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" 
         ><svg-icon :icon-class="item.meta.icon" />
         {{ item.meta.title }}</el-menu-item
       >

src/layout/components/Navbar.vue

@@ -2,8 +2,10 @@
   <div class="navbar">
     <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
 
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
-    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
+    <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/> -->
+    <!-- <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/> -->
+    <!-- 固定topNav -->
+    <top-nav id="topmenu-container" class="topmenu-container" />
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
@@ -107,7 +109,8 @@ export default {
   height: 50px;
   overflow: hidden;
   position: relative;
-  background: #fff;
+  // background: #fff;'
+  background-color: transparent;
   box-shadow: 0 1px 4px rgba(0,21,41,.08);
 
   .hamburger-container {
@@ -130,6 +133,7 @@ export default {
   .topmenu-container {
     position: absolute;
     left: 50px;
+    background-color: transparent;
   }
 
   .errLog-container {

src/layout/components/TagsView/index.vue

@@ -241,8 +241,9 @@ export default {
 .tags-view-container {
   height: 34px;
   width: 100%;
-  background: #fff;
-  border-bottom: 1px solid #d8dce5;
+  // background: #fff;
+  background-color: transparent;
+  // border-bottom: 1px solid #d8dce5;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
   .tags-view-wrapper {
     .tags-view-item {
@@ -251,9 +252,9 @@ export default {
       cursor: pointer;
       height: 26px;
       line-height: 26px;
-      border: 1px solid #d8dce5;
+      // border: 1px solid #d8dce5;
       color: #495060;
-      background: #fff;
+      background-color: #232B4C;
       padding: 0 8px;
       font-size: 12px;
       margin-left: 5px;

src/views/login.vue

@@ -161,7 +161,7 @@ export default {
   justify-content: center;
   align-items: center;
   height: 100%;
-  background-image: url("../assets/images/login-background.jpg");
+  background-image: url("../assets/knowledge/backgrand_picture.png");
   background-size: cover;
 }
 .title {
@@ -172,7 +172,7 @@ export default {
 
 .login-form {
   border-radius: 6px;
-  background: #ffffff;
+  background: rgba(255,255,255, 0.2);
   width: 400px;
   padding: 25px 25px 5px 25px;
   .el-input {