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-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
                        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
                        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
                        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>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onBeforeUnmount, reactive, ref, nextTick } from 'vue'
import * as pageBubble from '@/utils/pageBubble'
import { sm3Digest } from '@/assets/commjs/sm3.js'
import { sm2, encrypt } from '@/assets/commjs/sm2.js'
import { ElMessage } from 'element-plus'
import { gongkey, login } from '@/api/user'
import { useAdminInfo } from '@/stores/adminInfo'
import type { FormInstance, InputInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
let timer: number

const formRef = ref<FormInstance>()
const usernameRef = ref<InputInstance>()
const passwordRef = ref<InputInstance>()
const useInfo = useAdminInfo()
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
            gongkey({ loginName: encrypt(form.username) }).then(res => {
                window.localStorage.setItem('publicKey', res.data)
                let jiamipassword = sm2(sm3Digest(form.password) + '|' + form.password, res.data, 0)
                login({
                    username: encrypt(form.username),
                    password: jiamipassword,
                    grant_type: 'captcha',
                    imageCode: '',
                    verifyCode: 0
                }).then(res => {
                    if (res.code == 'A0000') {
                        // window.localStorage.setItem('token', '123')
                        useInfo.setToken(res.data.token_type + ' ' + res.data.access_token, 'auth')
                        state.submitLoading = false
                        router.push({
                            path: 'admin/dashboard'
                        })
                    } else {
                        ElMessage({
                            message: res.message,
                            type: 'warning'
                        })
                        state.submitLoading = false
                    }
                })
            })
        }
    })
}
</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>