xl-root/src/pages/login/Login.vue

<script setup>
import {ref, reactive} from 'vue';
import {toPath} from "../../utils/index.js";
import VerificationCode from '../../components/VerificationCode/index.vue';
import {useUserStore} from "../../pinia/UserStore/index.js";

const {login} = useUserStore();

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 @click="login(false)" type="primary">登陆商户端</a-button>
            <a-button @click="login(true)" 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>