[Style 0000] 添加深蓝色主题，开发深蓝主题的登录和loading样式

index.html

@@ -39,6 +39,17 @@
         html[data-theme='dark'] .app-loading .app-loading-title {
           color: rgba(255, 255, 255, 0.85);
         }
+        html[data-theme='deepblue'] .app-loading {
+          background-color: none;
+          background-image: url('./src/assets/images/themify/deepblue/loading-bg.png');
+        }
+        html[data-theme='deepblue'] .app-loading .app-loading-title {
+          padding: 10px 100px;
+          background-size: 100% auto;
+          background-position: center;
+          background-image: url('./src/assets/images/themify/deepblue/login/input-down.png');
+          background-repeat: no-repeat;
+        }
         body{
           background-color: var(--vent-base-color)
         }

src/design/theme.less

@@ -1,6 +1,7 @@
 @import './themify/dark.less';
 @import './themify/light.less';
 @import './themify/vent1.less';
+@import './themify/deepblue.less';
 
 @ventSpace: zxm;
 
@@ -84,3 +85,4 @@ html[data-theme='light'] {
 @theme-dark: ~"html[data-theme='dark2']";
 @theme-light: ~"html[data-theme='light']";
 @theme-vent1: ~"html[data-theme='vent1']";
+@theme-deepblue: ~"html[data-theme='deepblue']";

src/design/themify/deepblue.less

@@ -0,0 +1,3 @@
+html[data-theme='deepblue'] {
+    --themify-text-primary: #ddd;
+}

src/enums/appEnum.ts

@@ -23,6 +23,7 @@ export enum ThemeEnum {
   DARK = 'dark2',
   LIGHT = 'light',
   VENT1 = 'vent1',
+  DEEPBLUE = 'deepblue',
 }
 
 export enum SettingButtonPositionEnum {

src/layouts/default/header/components/user-dropdown/ThemeSelect.vue

@@ -41,6 +41,10 @@
       value: ThemeEnum.VENT1,
       label: '默认',
     },
+    {
+      value: ThemeEnum.DEEPBLUE,
+      label: '深蓝',
+    },
   ];
 
   const { getDarkMode, setDarkMode } = useRootSetting();

src/views/sys/login/Login.vue

@@ -85,13 +85,26 @@
     }
   }
 
-  @{theme-dark} {
+  @{theme-deepblue} {
     .login-container {
       background: #021632;
       &::before {
         background-image: none;
       }
     }
+
+    .top-header {
+      .top-bg {
+        background-image: url('/@/assets/images/themify/deepblue/login/top.png');
+      }
+      .login-icon {
+        background-image: url('/@/assets/images/themify/deepblue/login/icon.png');
+      }
+    }
+
+    .bottom {
+      background-image: url('/@/assets/images/themify/deepblue/login/down.png');
+    }
   }
 
   .login-container {

src/views/sys/login/LoginForm.vue

@@ -136,7 +136,29 @@
   });
 </script>
 <style lang="less" scoped>
+  @import '/@/design/theme.less';
   @ventSpace: zxm;
+
+  @{theme-deepblue} {
+    .login-box {
+      .input-box {
+        background: url('/@/assets/images/themify/deepblue/login/input-normal.png') !important;
+        &:focus {
+          background: url('/@/assets/images/themify/deepblue/login/input-down.png') !important;
+        }
+      }
+
+      .btn-box {
+        .btn {
+          background: url('/@/assets/images/themify/deepblue/login/btn-bg.png');
+          &:active {
+            background: url('/@/assets/images/themify/deepblue/login/btn-bg-hover.png');
+          }
+        }
+      }
+    }
+  }
+
   .login-box {
     position: relative;
     margin-top: 10px;