注册

src/views/AAAFont/register/RegisterForm.vue

+<template>
+<!--  <div v-if="getShow">-->
+    <Form class="p-4 enter-x" :model="formData" :rules="getFormRules" ref="formRef">
+      <FormItem name="account" class="enter-x">
+        <Input
+          class="fix-auto-fill"
+          size="large"
+          v-model:value="formData.account"
+          placeholder="请输入用户名"
+          :placeholder="t('sys.login.userName')"
+        />
+      </FormItem>
+      <FormItem name="mobile" class="enter-x">
+        <Input
+          size="large"
+          v-model:value="formData.mobile"
+          :placeholder="t('sys.login.mobile')"
+          class="fix-auto-fill"
+        />
+      </FormItem>
+      <FormItem name="sms" class="enter-x">
+        <CountdownInput
+          size="large"
+          class="fix-auto-fill"
+          v-model:value="formData.sms"
+          :placeholder="t('sys.login.smsCode')"
+        />
+      </FormItem>
+      <FormItem name="password" class="enter-x">
+        <InputPassword
+          size="large"
+          v-model:value="formData.password"
+          placeholder="请输入密码"
+          :placeholder="t('sys.login.password')"
+        />
+      </FormItem>
+      <FormItem name="confirmPassword" class="enter-x">
+        <InputPassword
+          size="large"
+          visibilityToggle
+          v-model:value="formData.confirmPassword"
+          placeholder="请输入重复密码"
+          :placeholder="t('sys.login.confirmPassword')"
+        />
+      </FormItem>
+
+      <FormItem class="enter-x" name="policy">
+        <!-- No logic, you need to deal with it yourself -->
+        <Checkbox v-model:checked="formData.policy" size="small">
+          {{ t('sys.login.policy') }}
+        </Checkbox>
+      </FormItem>
+
+      <Button
+        type="primary"
+        class="enter-x"
+        size="large"
+        block
+        @click="handleRegister"
+        :loading="loading"
+      >
+        {{ t('sys.login.registerButton') }}
+      </Button>
+<!--      <Button size="large" block class="mt-4 enter-x" @click="handleBackLogin">-->
+<!--        {{ t('sys.login.backSignIn') }}-->
+<!--      </Button>-->
+    </Form>
+<!--  </div>-->
+</template>
+<script lang="ts" setup>
+  import { reactive, ref, unref, computed } from 'vue';
+  import { Form, Input, Button, Checkbox } from 'ant-design-vue';
+  import { StrengthMeter } from '@/components/StrengthMeter';
+  import { CountdownInput } from '@/components/CountDown';
+  import { useI18n } from '@/hooks/web/useI18n';
+  import { useLoginState, useFormRules, useFormValid, LoginStateEnum } from '../Login/useLogin';
+
+  const FormItem = Form.Item;
+  const InputPassword = Input.Password;
+  const { t } = useI18n();
+  const { handleBackLogin, getLoginState } = useLoginState();
+
+  const formRef = ref();
+  const loading = ref(false);
+
+  const formData = reactive({
+    account: '',
+    password: '',
+    confirmPassword: '',
+    mobile: '',
+    sms: '',
+    policy: false,
+  });
+
+  const { getFormRules } = useFormRules(formData);
+  const { validForm } = useFormValid(formRef);
+
+  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);
+
+  async function handleRegister() {
+    const data = await validForm();
+    if (!data) return;
+    console.log(data);
+  }
+</script>

src/views/AAAFont/register/index.vue

 <template>
-  <div id="login">
+  <div id="register">
     <el-container>
       <el-header class="header">
         <div @click="handleTitle" class="official-title"> 数据要素交易服务平台 </div>
         <div class="分割线"></div>
         <div class="title-right">注册</div>
       </el-header>
-      <div class="login-box">
-        <div class="login-win">
-          <div class="login-title">
-            <span class="login-title-text">用户登录</span>
+      <div class="register-box">
+        <div class="register-win">
+          <div class="win-box">
+            <div class="register-title">
+              <span class="register-title-text">欢迎注册</span>
+            </div>
+            <RegisterForm/>
           </div>
-          <LoginForm/>
         </div>
       </div>
     </el-container>
@@ -20,11 +22,11 @@
 
 <script>
 import Icon from '@/components/Icon/Icon.vue';
-import LoginForm from '.././Login/LoginForm.vue';
+import RegisterForm from "./RegisterForm.vue";
 
 export default {
   name: 'register',
-  components: { LoginForm, Icon },
+  components: {RegisterForm, Icon },
   data() {
     return {};
   },
@@ -42,7 +44,7 @@ export default {
 body {
   margin: 0;
 }
-#login {
+#register {
   min-width: 1366px;
   width: auto;
   position: relative;
@@ -92,34 +94,40 @@ body {
   background-color: #dce7fb;
 }
 
-.login-box {
+.register-box {
   width: 100%;
   aspect-ratio: 1920 / 863; /* 或者其他的宽高比 */
   position: relative;
 
-  .login-win {
-    width: 427px;
-    height: 479px;
+  .register-win {
+    width: 75%;
+    height: 75%;
     background: #fdfdfd;
-    outline: 10px solid rgba(255, 255, 255, 0.25);
     border-radius: 8px;
     position: absolute;
-    left: 60%;
+    left: 50%;
     top: 50%;
-    transform: translateY(-50%);
+    transform: translate(-50%, -50%);
 
-    .login-title {
-      margin: 50px 0 30px 16px;
 
+    .win-box{
+      width: 30%;
+      margin: 0 auto;
 
-      .login-title-text{
-        width: 128px;
-        height: 48px;
-        color: #3f3f3f;
-        font-size: 32px;
-        font-weight: 700;
+      .register-title {
+        margin: 50px 0 30px 16px;
+
+
+        .register-title-text{
+          width: 128px;
+          height: 48px;
+          color: #3f3f3f;
+          font-size: 32px;
+          font-weight: 700;
+        }
       }
     }
+
   }
 }
 </style>