登录页面样式调整

src/style/login.css

@@ -1,7 +1,7 @@
 .wave {
   position: fixed;
   height: 100%;
-  width: 80%;
+  width: 100%;
   left: 0;
   bottom: 0;
   z-index: -1;
@@ -35,7 +35,10 @@
 }
 
 .login-form {
-  width: 360px;
+  width: 387px;
+  background: #fff;
+  padding: 40px;
+  border-radius: 6px;
 }
 
 .avatar {
@@ -45,10 +48,22 @@
 
 .login-form h2 {
   text-transform: uppercase;
+  text-align: left;
   margin: 15px 0;
-  color: #999;
+  color: #181818;
   font:
-    bold 200% Consolas,
+    bold 160% Consolas,
+    Monaco,
+    monospace;
+}
+
+.login-form h4 {
+  text-transform: uppercase;
+  text-align: left;
+  margin: 15px 0;
+  color: #ACACAC;
+  font:
+    bold 100% Consolas,
     Monaco,
     monospace;
 }
@@ -60,6 +75,8 @@
 
   .login-form {
     width: 290px;
+    padding: 0;
+    background: transparent;
   }
 
   .login-form h2 {

src/views/login/index.vue

@@ -13,7 +13,7 @@ import { ElMessage } from "element-plus";
 import { useLayout } from "@/layout/hooks/useLayout";
 import { useUserStoreHook } from "@/store/modules/user";
 import { addPathMatch, getTopMenu, initRouter } from "@/router/utils";
-import { avatar, bg, illustration } from "./utils/static";
+import { avatar, bg, logo, illustration } from "./utils/static";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 
@@ -230,7 +230,10 @@ onMounted(() => {
 
 <template>
   <div class="select-none">
-    <img :src="bg" class="wave" />
+    <img :src="bg" class="wave" alt="" />
+    <div class="flex-c absolute left-5 top-3">
+      <img :src="logo" alt="" />
+    </div>
     <div class="flex-c absolute right-5 top-3">
       <!-- 主题 -->
       <el-switch
@@ -242,14 +245,19 @@ onMounted(() => {
       />
     </div>
     <div class="login-container">
-      <div class="img">
+      <div class="img" />
+      <!--      <div class="img">
         <component :is="toRaw(illustration)" />
-      </div>
+      </div>-->
       <div class="login-box">
         <div class="login-form">
-          <avatar class="avatar" />
+          <!--          <avatar class="avatar" />-->
           <Motion>
-            <h2 class="outline-hidden">{{ title }}</h2>
+            <h2 class="outline-hidden">惠融｜{{ title }}</h2>
+          </Motion>
+
+          <Motion :delay="50">
+            <h4 class="outline-hidden">账号密码登录</h4>
           </Motion>
 
           <el-form
@@ -289,6 +297,7 @@ onMounted(() => {
                     <el-input
                       v-model="ruleForm.code"
                       clearable
+                      placeholder="安全验证"
                       :prefix-icon="
                         useRenderIcon(
                           MaterialSymbolsLightDomainVerificationRounded

src/views/login/utils/rule.ts

@@ -34,8 +34,8 @@ const checkLoginNameV = (rule, value, callback) => {
 
 /** 登录校验 */
 const loginRules = reactive<FormRules>({
-  loginName: [{ required: true, validator: checkLoginNameV, trigger: "blur" }],
-  loginPwd: [
+  username: [{ required: true, message: "账号不能为空", trigger: "blur" }],
+  password: [
     {
       required: true,
       validator: (rule, value, callback) => {

src/views/login/utils/static.ts

@@ -1,5 +1,6 @@
 import bg from "@/assets/login/bg.png";
+import logo from "@/assets/login/Logo.png";
 import avatar from "@/assets/login/avatar.svg?component";
 import illustration from "@/assets/login/illustration.svg?component";
 
-export { bg, avatar, illustration };
+export { bg, avatar, logo, illustration };