water_maintenance/src/view/LogIn.vue

<template>
    <div class="login-wrapper">
        <div id="login-backgroud" class="login-backgroud"></div>
        <div class="login-container">
            <div class="login-header">
                <span class="title-1">排水管网运维养护</span>
                <span class="title-2">虚拟仿真教学平台</span>
            </div>
            <div class="login-form">
                <el-form ref="formRef" :model="form" :rules="rules" :validate-on-rule-change="false" @keyup.enter="onSubmit(formRef)">
                    <el-form-item prop="username">
                        <el-input ref="usernameRef" v-model="form.username" class="username" clearable placeholder="账号" type="text">
                            <template #prefix>
                                <el-icon class="form-item-icon" size="1.5rem" color="#fff"><User /></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input ref="passwordRef" v-model="form.password" clearable placeholder="请输入密码" show-password type="password">
                            <template #prefix>
                                <el-icon class="form-item-icon" size="1.5rem" color="#fff"><Unlock /></el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                </el-form>
                <div class="submits">
                    <div class="subButton" @click="onSubmit(formRef)">点击登录</div>
                </div>
                <div class="better-browser">
                    推荐使用：
                    <div class="browser">谷歌浏览器</div>
                    <div class="browser b2">火狐浏览器</div>
                </div>
            </div>
            <div class="login-footer">
                <div class="copyright"></div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from 'vue';
import { ElForm, ElInput, ElNotification } from 'element-plus';
import { loginApi, getCurrentUser } from '@/api/userApi';
import { useUserInfo } from '@/stores/userInfo';
import router from '../router/index';

const userInfo = useUserInfo();
const formRef = ref<InstanceType<typeof ElForm>>();
const usernameRef = ref<InstanceType<typeof ElInput>>();
const passwordRef = ref<InstanceType<typeof ElInput>>();

const form = reactive({
    username: '',
    password: '',
});

const rules = reactive({
    username: [
        {
            required: true,
            message: '用户名不能为空',
            trigger: 'blur',
        },
        {
            validator: (rule: any, val: string, callback: Function) => {
                if (!val) {
                    return callback();
                }
                if (!/^[a-zA-Z0-9_]{2,15}$/.test(val)) {
                    return callback(new Error('请输入正确的账户'));
                }
                return callback();
            },
            trigger: 'blur',
        },
    ],
    password: [
        {
            required: true,
            message: '密码不能为空',
            trigger: 'blur',
        },
        {
            validator: (rule: any, val: string, callback: Function) => {
                if (!val) {
                    return callback();
                }
                if (!regularPassword(val)) {
                    return callback(new Error('请输入正确的密码'));
                }
                return callback();
            },
            trigger: 'blur',
        },
    ],
});

const focusInput = () => {
    if (form.username === '') {
        usernameRef.value!.focus();
    } else if (form.password === '') {
        passwordRef.value!.focus();
    }
};

const onSubmit = (formEl: InstanceType<typeof ElForm> | undefined) => {
    if (!formEl) return;
    formEl.validate((valid) => {
        if (valid) {
            loginApi(form).then((res) => {
                if (res.data.data.token) {
                    userInfo.setToken(res.data.data.token, 'auth');
                    const userType = res.data.data.userType;
                    getCurrentUser().then((res) => {
                        userInfo.dataFill(Object.assign({ userType: userType }, res.data.data));
                        if (userType == 0) router.push({ path: '/train' });
                        else if (userType == 1) router.push({ path: '/TaskMng' });
                        else {
                            ElNotification({
                                message: '无效用户',
                                type: 'info',
                            });
                        }
                    });
                }
            });
        } else {
            return false;
        }
    });
};
const regularPassword = (val: string) => {
    if (/^[a-zA-Z0-9_@]{6,32}$/.test(val)) return true;
    return false;
};

onMounted(() => {
    nextTick(() => focusInput());
});
</script>
<style lang="scss" scoped>
.login-wrapper {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    background-color: #1a212b;

    .login-backgroud {
        position: absolute;
        inset: 0;
        background-image: url(../assets/login/backgroud.jpg);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center center;
    }
    .login-container {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .login-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 12rem;
        .title-1 {
            font-size: 4.2rem;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 500;
            color: #ffffff;
            line-height: 7.4rem;
            text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
        }
        .title-2 {
            font-size: 3.4rem;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            color: #f1eaea;
            line-height: 6rem;
            text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.4);
        }
    }
    .login-form {
        margin: 3rem 6rem;
        .submits {
            display: flex;
            justify-content: space-between;
            .subButton {
                width: 100%;
                color: #fff;
                background-color: #498bda;
                font-size: 1.6rem;
                line-height: 4rem;
                border-radius: 0.2rem;
                cursor: pointer;
                box-sizing: border-box;
                text-align: center;
            }
            .subButton.tech {
                background-color: #d1b74c;
            }
        }
        .better-browser {
            --browser-height: 2rem;
            margin-top: 10rem;
            display: flex;
            line-height: var(--browser-height);
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.7);
            .browser {
                margin-left: 0.5rem;
                display: flex;
                align-items: center;
            }
            .browser::before {
                content: '';
                margin-right: 0.3rem;
                width: var(--browser-height);
                height: var(--browser-height);
                background-image: url(../assets/login/browser1.png);
                background-size: 100% 100%;
            }
            .browser.b2::before {
                background-image: url(../assets/login/browser2.png);
            }
        }
    }
    .form-item-icon {
        height: auto;
    }
    .login-footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 3rem;
        display: flex;
        justify-content: center;
        .copyright {
            width: 11rem;
            background-image: url(../assets/login/copyright.png);
            background-size: 100% auto;
            background-repeat: no-repeat;
        }
    }
}

:deep(.el-form-item) {
    margin-bottom: 2rem;
}
:deep(.el-input) {
    --el-input-border-color: #4b92b9;
}
:deep(.el-input__wrapper) {
    // background-color: #1a2854;
    border: 2px solid #4BA3B9;
    background: #1A4854;
}
:deep(.el-input__inner) {
    --el-input-inner-height: 4.2rem;
    --el-input-text-color: #fff;
    font-size: 1.2rem;

    &:-webkit-autofill {
        transition: background-color 50000s ease-in-out 0s;
        -webkit-text-fill-color: #fff;
    }
}
</style>