admin-govern/src/views/user/login.vue

<template>
    <div>
        <div @contextmenu.stop='' id='bubble' class='bubble'>
            <canvas id='bubble-canvas' class='bubble-canvas'></canvas>
        </div>
        <div class='login'>
            <div class='login-box'>
                <div class='head'>
                    <img src='@/assets/login-header.png' alt='' />
                </div>
                <div class='form'>
                    <img class='profile-avatar' src='@/assets/avatar.png' alt='' />
                    <div class='content'>
                        <el-form @keyup.enter='onSubmit()' ref='formRef' size='large' :model='form'>
                            <el-form-item prop='username'>
                                <el-input
                                    ref='usernameRef'
                                    type='text'
                                    clearable
                                    v-model='form.username'
                                    placeholder='请输入账号'
                                >
                                    <template #prefix>
                                        <Icon name='fa fa-user' class='form-item-icon' size='16'
                                              color='var(--el-input-icon-color)' />
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item prop='password'>
                                <el-input
                                    ref='passwordRef'
                                    v-model='form.password'
                                    type='password'
                                    placeholder='请输入密码'
                                    show-password
                                >
                                    <template #prefix>
                                        <Icon name='fa fa-unlock-alt' class='form-item-icon' size='16'
                                              color='var(--el-input-icon-color)' />
                                    </template>
                                </el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button
                                    :loading='state.submitLoading'
                                    class='submit-button'
                                    round
                                    type='primary'
                                    size='large'
                                    @click='onSubmit()'
                                >
                                    登录
                                </el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { onMounted, onBeforeUnmount, reactive, ref, nextTick } from 'vue'
import * as pageBubble from '@/utils/pageBubble'
import type { FormInstance, InputInstance } from 'element-plus'

let timer: number

const formRef = ref<FormInstance>()
const usernameRef = ref<InputInstance>()
const passwordRef = ref<InputInstance>()
const state = reactive({
    showCaptcha: false,
    submitLoading: false
})
const form = reactive({
    username: '',
    password: '',
})


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

onMounted(() => {
    timer = window.setTimeout(() => {
        pageBubble.init()
    }, 1000)

})

onBeforeUnmount(() => {
    clearTimeout(timer)
    pageBubble.removeListeners()
})

const onSubmit = (captchaInfo = '') => {
    state.submitLoading = true
    setTimeout(() => {
        state.submitLoading = false
    }, 3000)
}
</script>

<style scoped lang='scss'>
.switch-language {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1;
}

.bubble {
    overflow: hidden;
    background: url(@/assets/bg.jpg) repeat;
}

.form-item-icon {
    height: auto;
}

.login {
    position: absolute;
    top: 0;
    display: flex;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;

    .login-box {
        overflow: hidden;
        width: 430px;
        padding: 0;
        background: var(--ba-bg-color-overlay);
        margin-bottom: 80px;
    }

    .head {
        background: #ccccff;

        img {
            display: block;
            width: 430px;
            margin: 0 auto;
            user-select: none;
        }
    }

    .form {
        position: relative;

        .profile-avatar {
            display: block;
            position: absolute;
            height: 100px;
            width: 100px;
            border-radius: 50%;
            border: 4px solid var(--ba-bg-color-overlay);
            top: -50px;
            right: calc(50% - 50px);
            z-index: 2;
            user-select: none;
        }

        .content {
            padding: 100px 40px 40px 40px;
        }

        .submit-button {
            width: 100%;
            letter-spacing: 2px;
            font-weight: 300;
            margin-top: 15px;
            --el-button-bg-color: var(--el-color-primary);
        }
    }
}

@media screen and (max-width: 720px) {
    .login {
        display: flex;
        align-items: center;
        justify-content: center;

        .login-box {
            width: 340px;
            margin-top: 0;
        }
    }
}

.chang-lang :deep(.el-dropdown-menu__item) {
    justify-content: center;
}

.content :deep(.el-input__prefix) {
    display: flex;
    align-items: center;
}

@media screen and (max-height: 800px) {
    .login .login-box {
        margin-bottom: 0;
    }
}
</style>