supervision-vue/src/views/Login.vue

<template>
    <div class="wrapper">
        <header class="text-center">
            <img src="/imgs/login_header.png" alt="">
        </header>
        <div class="box flex v-center">
            <div class="left text-center">
                <img src="/imgs/pic.png" alt="" />
            </div>
            <div class="right mb-40">
                <el-form
                    ref="formRef"
                    :model="formData"
                    size="large"
                    :rules="rules"
                >
                    <h1>用户登录</h1>
                    <el-form-item prop="account">
                        <el-input
                            v-model.trim="formData.account"
                            placeholder="请输入身份证/警号"
                            size="large"
                            @input="errMsg = ''"
                            style="--el-input-height: 50px"
                        >
                            <template #prefix>
                                <icon name="el-icon-UserFilled" :size="33" color="#c0c5e2" />
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                            ref="passwordRef"
                            v-model="formData.password"
                            show-password
                            placeholder="请输入密码"
                            @keyup.enter="handleLogin"
                            @input="errMsg = ''"
                            style="--el-input-height: 50px"
                        >
                        <template #prefix>
                                <icon name="local-icon-lock-fill" :size="36" />
                            </template>
                        </el-input>
                    </el-form-item>
                    <div class="err-msg">{{ errMsg }}</div>
                    <div class="mt-10 mb-20">
                        <el-button
                            type="primary"
                            size="large"
                            :loading="isLock"
                            @click="handleLogin"
                            style="
                                width: 100%;
                                --el-button-size: 54px;
                                --el-font-size-base: 18px;
                            "
                        >登录</el-button>
                    </div>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script setup>
import useUserStore from '@/stores/modules/user'

const formData = reactive({})
const formRef = ref(null)
const rules = {
    account: [
        {
            required: true,
            message: "请输入身份证/警号",
            trigger: ["blur", "change"],
        },
    ],
    password: [
        {
            required: true,
            message: "请输入密码",
            trigger: ["blur", "change"],
        },
    ],
};
const isLock = ref(false)

const userStore = useUserStore()
const router = useRouter()
const errMsg = ref('')
function handleLogin() {
    formRef.value.validate((flag) => {
        if (flag) {
            isLock.value = true
            userStore.login(formData).then(() => {
                router.push('/home')
            }).catch((err) => {
                isLock.value = false
                errMsg.value = err.message
            })
        }
    })
}
</script>
<style lang="scss" scoped>
.wrapper {
    height: 100vh;
    background-image: url("/imgs/bg.png");
    background-size: cover;
    background-color: #003aea;
    header {
        padding-top: 3.2vh;
        margin-bottom: 8vh;
        height: 91px;
        img {
            height: 91px;
        }
    }
    .box {
        --login-box-width: 576px;
        width: 80%;
        margin: auto;
        .left {
            width: calc(100% - var(--login-box-width));
            height: calc(100vh - 200px);
            img {
                width: 33vw;
            }
        }

        .right {
            background-color: #fff;
            border: 18px solid #4169ea;
            width: var(--login-box-width);
            padding: 40px;
            box-sizing: border-box;
            h1 {
                color: var(--primary-color);
                font-size: 32px;
                margin-top: 0;
                margin-bottom: 32px;
            }
        }
    }
}
.err-msg {
    height: 20px;
    color: var(--danger-color);
}
</style>