feat: 页面调整组件属性升级

src/views/login.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { message } from 'ant-design-vue/lib';
+import { message } from 'ant-design-vue/es';
 import { reactive, onMounted, computed } from 'vue';
 import useUserStore from '@/store/modules/user';
 import useAppStore from '@/store/modules/app';
@@ -209,7 +209,7 @@ function fnChangeLocale(e: any) {
           </a-input-password>
         </a-form-item>
 
-        <a-row :gutter="8" v-if="state.captcha.enabled">
+        <a-row v-if="state.captcha.enabled">
           <a-col :span="16">
             <a-form-item
               name="code"
@@ -247,7 +247,6 @@ function fnChangeLocale(e: any) {
         </a-row>
 
         <a-row
-          :gutter="8"
           justify="space-between"
           align="middle"
           style="margin-bottom: 16px"
@@ -275,7 +274,6 @@ function fnChangeLocale(e: any) {
         </a-button>
 
         <a-row
-          :gutter="8"
           justify="space-between"
           align="middle"
           style="margin-top: 18px"
@@ -315,7 +313,7 @@ function fnChangeLocale(e: any) {
 
   // background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
 
-  background-image: url(@/assets/background.jpg);
+  background-image: url(@/assets/background_light.jpg);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center center;
@@ -363,6 +361,11 @@ function fnChangeLocale(e: any) {
   }
 }
 
+[data-theme='dark'] .container {
+  background-image: url(@/assets/background_dark.jpg);
+  background-color: #141414;
+}
+
 .header {
   position: fixed;
   left: 0;
@@ -394,7 +397,7 @@ function fnChangeLocale(e: any) {
   }
   .title {
     position: relative;
-    top: 6px;
+    top: 12px;
     color: rgba(0, 0, 0, 0.85);
     font-weight: 600;
     font-size: 24px;
@@ -402,6 +405,13 @@ function fnChangeLocale(e: any) {
   }
 }
 
+[data-theme='dark'] .header {
+  background-color: rgb(0 0 0 / 85%);
+  .title {
+    color: rgba(255, 255, 255, 0.85);
+  }
+}
+
 .login-card {
   width: 368px;
   min-width: 260px;
@@ -420,6 +430,10 @@ function fnChangeLocale(e: any) {
     color: #8c8c8c;
     font-size: 16px;
   }
+
+  [data-theme='dark'] & .desc {
+    color: #999;
+  }
 }
 
 @media (max-width: 992px) {
@@ -431,11 +445,12 @@ function fnChangeLocale(e: any) {
 .footer {
   position: absolute;
   bottom: 0;
-  height: 36px;
-  padding: 8px 16px 0;
+  height: 32px;
+  padding: 0px 16px;
   text-align: left;
-  background-color: rgb(255 255 255 / 85%);
+  background-color: rgba(255, 255, 255, 0.85);
   width: 100%;
+  line-height: 32px;
 
   &-copyright {
     font-size: 14px;
@@ -443,4 +458,11 @@ function fnChangeLocale(e: any) {
     font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
   }
 }
+
+[data-theme='dark'] .footer {
+  background-color: rgb(0 0 0 / 85%);
+  &-copyright {
+    color: rgba(255, 255, 255, 0.75);
+  }
+}
 </style>