update

components.d.ts

@@ -11,5 +11,6 @@ declare module 'vue' {
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    VerificationCode: typeof import('./src/components/VerificationCode/index.vue')['default']
   }
 }

src/App.vue

@@ -1,7 +1,9 @@
 <script setup></script>
 
 <template>
+    <a-config-provider size="large">
         <router-view></router-view>
+    </a-config-provider>
 </template>
 
 <style scoped></style>

src/components/HelloWorld.vue

@@ -1,43 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-defineProps({
-  msg: String,
-})
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Learn more about IDE Support for Vue in the
-    <a
-      href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
-      target="_blank"
-      >Vue Docs Scaling up Guide</a
-    >.
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/components/VerificationCode/index.vue

@@ -0,0 +1,53 @@
+<script setup>
+import {ref, defineProps, defineModel} from 'vue';
+import {Notification} from "@arco-design/web-vue";
+
+const verificationCode = defineModel('verificationCode', {type: String});
+const {phone} = defineProps({
+    phone: {
+        type: String,
+        default: null,
+    }
+});
+
+const time = ref(null);
+let timer = null;
+
+const verifyPhone = () => {
+    if (/^1[3-9]\d{9}$/.test(phone)) {
+        if (timer === null) {
+            time.value = 10;
+            timer = setInterval(() => {
+                if (time.value <= 0) {
+                    time.value = null;
+                    clearInterval(timer);
+                    timer = null;
+                } else {
+                    time.value--;
+                }
+            }, 1000);
+        }
+        return true;
+    } else {
+        Notification.error({
+            title: '手机号错误',
+            content: '请检查后重新输入'
+        });
+        return false;
+    }
+}
+</script>
+
+<template>
+    <a-input :model-value="verificationCode" placeholder="验证码">
+        <template #append>
+            <a-link @click="verifyPhone" :disabled="Boolean(time)" :hoverable="false">
+                {{ time ? `${time}s后重新获取` : '发送验证码' }}
+            </a-link>
+        </template>
+    </a-input>
+</template>
+
+<style scoped>
+
+</style>

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>

src/router/index.js

@@ -9,8 +9,9 @@ const router = createRouter({
 
 router.beforeEach((to, from, next) => {
     const {isLogin} = useUserStore();
-    if (to.name !== 'login' && !isLogin) {
-        next({name: 'login'});
+
+    if (!isLogin && !to.path.includes('loginSYS')) {
+        next({ path: '/loginSYS' });
     } else {
         next();
     }

src/router/routes.js

@@ -9,9 +9,27 @@ const routes = [
         component: () => import('../pages/layout/index.vue'),
     },
     {
-        path: '/login',
-        name: 'login',
+        path: '/loginSYS',
+        name: 'loginSYS',
+        redirect: '/loginSYS/login',
         component: () => import('../pages/login/index.vue'),
+        children: [
+            {
+                path: 'login',
+                name: 'login',
+                component: () => import('../pages/login/Login.vue')
+            },
+            {
+                path: 'register',
+                name: 'register',
+                component: () => import('../pages/login/Register.vue')
+            },
+            {
+                path: 'forgot',
+                name: 'forgot',
+                component: () => import('../pages/login/Forgot.vue')
+            }
+        ]
     },
 ]
 

src/scss/global.scss

@@ -1,4 +1,5 @@
 * {
     margin: 0;
     padding: 0;
+    font-family: "PingFang SC", serif;
 }

src/utils/index.js

@@ -0,0 +1,5 @@
+import router from "../router/index.js";
+
+export const toPath = (path) => {
+    router.push(path).then();
+}