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

<template>
    <div @keyup.enter="onSubmit(formRef)">
        <div @contextmenu.stop="" id="bubble" class="bubble">
            <canvas id="bubble-canvas" class="bubble-canvas"></canvas>
        </div>
        <div class="login-image"></div>
        <div class="login-container-form">
            <div class="title-container">
                <div class="title">
                    <span style="font-size: 28px">电能质量数据监测云平台</span>
                </div>
            </div>
            <el-form :rules="rules" ref="formRef" size="large" class="login-form" :model="form">
                <el-form-item prop="username">
                    <el-input ref="usernameRef" v-model="form.username" type="text" clearable style="width: 368px"
                        placeholder="用户名" autocomplete="off">
                        <template #prefix>
                            <span class="iconfont icon-yonghu" style="color: #003078"></span>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input ref="passwordRef" v-model="form.password" type="password" placeholder="密码" show-password
                        style="width: 368px" autocomplete="off">
                        <template #prefix>
                            <span class="iconfont icon-mima" style="color: #003078"></span>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button :loading="state.submitLoading" class="submit-btn" round style="width: 368px" type="info"
                        @click="onSubmit(formRef)">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="copy-right">
            <span>版权所有 @ 南京灿能电力自动化股份有限公司</span>
            <br />
            <img style="width: 20px; height: 20px; position: absolute" src="@/assets/login/jhui.png" />

            <span>　　苏公网安备 32011502011902号</span>
        </div>
        <PopupUpdatePwd ref="popupUpdatePwdRef"></PopupUpdatePwd>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, reactive, ref, nextTick } from 'vue'
import * as pageBubble from '@/utils/pageBubble'
import { ElMessage } from 'element-plus'
import { gongkey, login } from '@/api/user-boot/user'
import { useAdminInfo } from '@/stores/adminInfo'
import type { FormInstance, InputInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
import { ADMIN_INFO } from '@/stores/constant/cacheKey'
import { Local } from '@/utils/storage'
import PopupUpdatePwd from './popupUpdatePwd.vue'
import { encrypt } from '@/assets/commjs/sm2.js';

const router = useRouter()
let timer: number

const popupUpdatePwdRef = ref()
const formRef = ref<FormInstance>()
const usernameRef = ref<InputInstance>()
const passwordRef = ref<InputInstance>()
const userInfo = useAdminInfo()
Local.remove(ADMIN_INFO)
userInfo.removeToken()

interface RuleForm {
    username: string
    password: string
}

const state = reactive({
    showCaptcha: false,
    submitLoading: false
})
const form = reactive({
    username: '',
    password: ''
})

const rules = reactive<FormRules<RuleForm>>({
    username: [{ required: true, trigger: 'blur', message: '请输入用户名' }],
    password: [{ required: true, trigger: 'blur', message: '请输入密码' }]
})

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

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

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

const onSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            state.submitLoading = true
            login({
                username: form.username,
                password: form.password,
                grant_type: 'captcha',
                imageCode: '',
                verifyCode: 0
            })
                .then(res => {
                    userInfo.dataFill(res.data)
                    state.submitLoading = false
                    router.push({
                        path: '/'
                    })
                })
                .catch(err => {
                    if (err.code === 'A0101' && err.message === '登录认证,密码失效，请重置') {
                        popupUpdatePwdRef.value.open(form.username)
                    }
                })
            setTimeout(() => {
                state.submitLoading = false
            }, 500)
        }
    })
}
</script>

<style scoped lang="scss">
.bubble {
    position: relative;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    background-color: #003078 !important;
    background-position: center 110px;
    background-repeat: repeat;
    background-size: 100%;
    background-image: url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg);
}

.login-image {
    position: absolute;
    top: 50%;
    left: 20%;
    min-width: 45%;
    min-height: 80%;

    background: url('../../assets/login/login2.png') no-repeat center center;
    background-size: contain;
    transform: translate(-15%, -50%);
    // box-shadow: 0 0 0 #011b2bab;
}

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

.login-container-form {
    position: absolute;
    top: 50%;
    left: 85%;
    width: 500px;
    height: auto;
    border-radius: 30px;
    transform: translate(-85%, -50%);
    box-shadow: 3px 3px 2px 2px #011b2bab;

    .title-container {
        position: relative;
        width: 398px;
        max-width: 100%;
        padding: 20px 0 0;
        margin: 0 auto;

        .title {
            margin-bottom: 20px;
            font-size: 33px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.85);
            text-align: center;

            & :v-deep .svg-icon {
                // color: $;
            }

            .logo {
                width: 46px;
                height: 46px;
                margin-right: 10px;
                vertical-align: middle;
            }
        }
    }
}

.login-form {
    position: relative;
    width: 368px;
    max-width: 100%;
    //padding: 20px 0 0;
    margin: 0 auto;
    margin-bottom: 20px;
    overflow: hidden;

    &.el-input {
        input {
            height: 40px;
            padding-right: 40px;
            padding-left: 40px;
            line-height: 40px;
            border-radius: 5px;
        }

        .el-input__prefix,
        .el-input__suffix {
            width: 40px;
            line-height: 40px;

            .svg-icon {
                font-size: 16px;
                vertical-align: -0.25em;
            }
        }

        .el-input__prefix {
            left: 0;
        }

        .el-input__suffix {
            right: 0;
        }
    }
}

.copy-right {
    position: absolute;
    bottom: 10px;
    width: 100%;
    font-size: 14px;
    color: rgb(233, 229, 229);
    text-align: center;
}

:v-deep.el-form-item--large {
    margin-bottom: 15px;
}

.submit-btn {
    width: 100%;
    margin-top: 0px;
    margin-bottom: 20px;
    background: #4d6ea1;
    border-radius: 0;
}

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

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

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