update

src/pages/login/Forgot.vue

@@ -0,0 +1,89 @@
+<script setup>
+import {ref, reactive} from 'vue';
+import VerificationCode from "../../components/VerificationCode/index.vue";
+
+const from = reactive({
+    phone: null,
+    verificationCode: null,
+    password: null,
+});
+</script>
+
+<template>
+    <div class="p-[50px] rounded-[12px] bg-white w-[460px] min-h-[540px] box-border card">
+        <div class="text-[24px] text-center text2">忘记密码</div>
+        <div class="mt-[48px] flex flex-col gap-[20px]">
+            <a-form layout="vertical">
+                <a-form-item>
+                    <a-input v-model:model-value="from.phone" placeholder="手机号"></a-input>
+                </a-form-item>
+                <a-form-item>
+                    <VerificationCode
+                        :phone="from.phone"
+                        v-model:verification-code="from.verificationCode">
+                    </VerificationCode>
+                </a-form-item>
+                <a-form-item>
+                    <a-input v-model:model-value="from.password" 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: left;
+}
+
+.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>

src/pages/login/Login.vue

@@ -0,0 +1,102 @@
+<script setup>
+import {ref, reactive} from 'vue';
+import {toPath} from "../../utils/index.js";
+import VerificationCode from '../../components/VerificationCode/index.vue';
+
+const MODE = {
+    PHONE: 'PHONE',
+    PASSWORD: 'PASSWORD'
+}
+
+const from = reactive({
+    phone: null,
+    verificationCode: null,
+    password: null,
+});
+
+const mode = ref(MODE.PHONE);
+</script>
+
+<template>
+    <div class="p-[50px] rounded-[12px] bg-white w-[460px] min-h-[540px] box-border card">
+        <div class="text-[24px] text-center text2">欢迎登录系统</div>
+        <div class="mt-[57px] flex gap-[32px]">
+            <div @click="mode = MODE.PHONE" :class="['text1', mode===MODE.PHONE?'text1-cur':null]">手机号登陆</div>
+            <div @click="mode = MODE.PASSWORD" :class="['text1', mode===MODE.PASSWORD?'text1-cur':null]">账号密码登陆
+            </div>
+        </div>
+        <div class="mt-[38px] flex flex-col gap-[20px]">
+            <a-input v-model:model-value="from.phone" placeholder="手机号"></a-input>
+            <VerificationCode
+                v-if="mode === MODE.PHONE"
+                :phone="from.phone"
+                v-model:verification-code="from.verificationCode">
+            </VerificationCode>
+            <a-input v-else :model-value="from.password" placeholder="密码">
+                <template #append>
+                    <a-link @click="toPath('/loginSYS/forgot')" :hoverable="false">忘记密码?</a-link>
+                </template>
+            </a-input>
+        </div>
+        <div class="flex flex-col mt-[50px] gap-[32px]">
+            <a-button type="primary">登陆</a-button>
+            <a-button
+                @click="toPath('/loginSYS/register')"
+                type="text">
+                去注册
+                <icon-arrow-right class="ml-[5px]"/>
+            </a-button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.card {
+    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
+}
+
+.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>

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>

src/pages/login/index.vue

@@ -3,9 +3,11 @@
 </script>
 
 <template>
-    <div class="text-[red]">登录</div>
+    <div class="w-full h-screen relative flex justify-center items-center">
+        <img class="w-full h-full absolute left-0 top-0 -z-10 object-cover" src="../../assets/images/背景.png" alt="" />
 
-    <a-button type="primary">登录</a-button>
+        <router-view></router-view>
+    </div>
 </template>
 
 <style scoped>