fix:修改登录注册页面样式

public/i18n/lang-en.json

@@ -38,6 +38,7 @@
     "emailTips": "Please enter your email",
     "loginBtn": "Login",
     "registerBtn": "Register",
+    "hasAccount": "Already have an account?",
     "noAccount": "Don't have an account?",
     "usernameLength": "Username must be between 3 and 20 characters long",
     "passwordLength": "Password must be between 6 and 20 characters long",

public/i18n/lang-zh.json

@@ -39,6 +39,7 @@
     "loginBtn": "登录",
     "registerBtn": "注册",
     "noAccount": "没有账号？",
+    "hasAccount": "已有账号？",
     "usernameLength": "用户名长度必须在3-20个字符之间",
     "passwordLength": "密码长度必须在6-20个字符之间",
     "emailFormat": "邮箱格式不正确",

src/modules/login/FormItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="form-title">
+  <div class="form-title" :style="{ top: form_type ? '50px' : '70px' }">
     {{ form_type ? $t('login.registerModel') : $t('login.loginModel') }}
   </div>
   <a-form
@@ -32,7 +32,7 @@
         </template>
       </a-input-password>
     </a-form-item>
-    <a-form-item>
+    <a-form-item style="margin-top: 30px">
       <a-button v-if="!form_type" class="submit-btn" type="primary" html-type="submit" :loading="loading"
         >{{ $t('login.loginBtn') }}
       </a-button>
@@ -42,7 +42,12 @@
     </a-form-item>
   </a-form>
   <div v-if="!form_type" class="tips-register">
-    {{ $t('login.noAccount') }} <a class="reg-link" href="#" @click="changeFormType">{{ $t('login.registerBtn') }}</a>
+    {{ $t('login.noAccount') }}
+    <a class="reg-link" href="#" @click="changeFormType($event, 1)">{{ $t('login.registerBtn') }}</a>
+  </div>
+  <div v-if="form_type" class="tips-login">
+    {{ $t('login.hasAccount') }}
+    <a class="reg-link" href="#" @click="changeFormType($event, 0)">{{ $t('login.loginBtn') }}</a>
   </div>
 </template>
 
@@ -125,17 +130,19 @@ const toRegister = () => {
 const toAsycData = async (userFlag) => {
   await asycData(userFlag);
 };
-const changeFormType = (e) => {
+const changeFormType = (e, type) => {
+  console.log(e, type);
   e.preventDefault();
   ref_form.value.resetFields();
-  form_type.value = 1;
+  form_type.value = type;
 };
 </script>
 <style scoped>
 .form-title {
+  position: absolute;
   line-height: 42px;
   font-size: 30px;
-  font-weight: 500;
+  font-weight: 600;
   color: var(--color-neutral-10);
 }
 
@@ -156,7 +163,14 @@ const changeFormType = (e) => {
 .tips-register {
   position: absolute;
   right: 20px;
-  bottom: 100px;
+  bottom: 70px;
+  font-size: 20px;
+  color: var(--color-neutral-4);
+}
+.tips-login {
+  position: absolute;
+  right: 20px;
+  bottom: 30px;
   font-size: 20px;
   color: var(--color-neutral-4);
 }
@@ -164,6 +178,9 @@ const changeFormType = (e) => {
 .reg-link {
   color: rgb(var(--arcoblue-6));
 }
+.arco-form {
+  margin-top: 90px;
+}
 
 .arco-form-item-label-col {
   padding: 0px;

src/views/Login.vue

@@ -57,7 +57,7 @@ import FormItem from '../modules/login/FormItem.vue';
 }
 .intro-title {
   font-size: 38px;
-  font-weight: 500;
+  font-weight: 600;
 }
 .login-form {
   position: relative;