update

src/pages/login/Register.vue

@@ -0,0 +1,94 @@
+<script setup>
+import {ref, reactive} from 'vue';
+import VerificationCode from "../../components/VerificationCode/index.vue";
+
+const from = reactive({
+    phone: null,
+    verificationCode: null,
+});
+</script>
+
+<template>
+    <div class="p-[50px] rounded-[12px] bg-white w-[460px] box-border card">
+        <div class="text-[24px] text-center text2">账号注册</div>
+        <div class="mt-[30px] flex flex-col gap-[20px]">
+            <a-form layout="vertical">
+                <a-form-item label="微信号">
+                    <a-input placeholder="请输入微信号"></a-input>
+                </a-form-item>
+                <a-form-item label="手机号">
+                    <a-input v-model:model-value="from.phone" placeholder="请输入手机号"></a-input>
+                </a-form-item>
+                <a-form-item label="验证码">
+                    <VerificationCode
+                        :phone="from.phone"
+                        v-model:verification-code="from.verificationCode">
+                    </VerificationCode>
+                </a-form-item>
+                <a-form-item label="登陆密码">
+                    <a-input placeholder="请输入登陆密码"></a-input>
+                </a-form-item>
+                <a-form-item label="邀请码（选填）">
+                    <a-input placeholder="请输入邀请码"></a-input>
+                </a-form-item>
+            </a-form>
+        </div>
+        <div class="flex flex-col mt-[30px] gap-[32px]">
+            <a-button type="primary">确认注册</a-button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.card {
+    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
+    :deep(.arco-form-item-label-col) {
+        line-height: 20px;
+    }
+}
+
+.text2 {
+    color: rgb(29, 33, 41);
+    font-size: 24px;
+    font-weight: 400;
+    line-height: 32px;
+    letter-spacing: 0;
+    text-align: center;
+}
+
+.text1 {
+    /* 14/CN-Regular */
+    color: rgb(78, 89, 105);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: 0;
+    text-align: left;
+    cursor: pointer;
+    transition: 500ms;
+
+    &::after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 2px;
+        background-color: rgb(22, 93, 255);
+        margin-top: 12px;
+        opacity: 0;
+        transition: 500ms;
+    }
+}
+
+.text1-cur {
+    color: rgb(22, 93, 255);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: 0;
+    text-align: left;
+
+    &::after {
+        opacity: 1;
+    }
+}
+</style>