longjiangAiEdu/src/views/login.vue

<template>
    <div class="login-container">
        <div class="login-form">
            <div class="login-logo">
                <i class="el-icon-lock"></i>
            </div>
            <h2 class="login-title">系统登录</h2>
            <el-form :model="loginForm" :rules="loginRules" ref="loginForm" label-position="top">
                <el-form-item prop="username">
                    <el-input v-model="loginForm.username" placeholder="请输入账号" prefix-icon="el-icon-user"
                        :class="{ 'is-focused': usernameFocus }" @focus="usernameFocus = true"
                        @blur="usernameFocus = false"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" placeholder="请输入密码" prefix-icon="el-icon-lock" show-password
                        :class="{ 'is-focused': passwordFocus }" @focus="passwordFocus = true"
                        @blur="passwordFocus = false"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleLogin" class="login-btn" :loading="loginLoading">
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import { dualFactorLogin } from '@/api/sigon'
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
    data() {
        return {
            loginForm: {
                username: '',
                password: ''
            },
            loginRules: {
                username: [
                    { required: true, message: '请输入账号', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ]
            },
            usernameFocus: false,
            passwordFocus: false,
            loginLoading: false
        }
    },
    methods: {
        handleLogin() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    this.loginLoading = true;
                    // 加密账号
                    this.loginForm.username = encrypt(this.loginForm.username)
                    // 加密密码
                    this.loginForm.password = encrypt(this.loginForm.password)
                    // 调用登录接口
                    dualFactorLogin(this.loginForm).then(res => {
                        if (res.code === 200) {
                            sessionStorage.setItem("getInfoName", this.loginForm.username);
                            this.$router.push('/SignOn');
                            this.loginLoading = false;
                        } else {
                            this.$message.error(res.message);
                            this.loginLoading = false;
                        }
                    }).catch(() => {
                        this.$message.error(res.message);
                        this.loginLoading = false;
                    });
                    // 模拟登录请求
                    // setTimeout(() => {
                    //     sessionStorage.setItem("getInfoName", this.loginForm.username);
                    //     this.$router.push('/SignOn');
                    //     this.loginLoading = false;
                    // }, 500);
                }
            });
        }
    }
}
</script>

<style scoped>
.login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: url("../assets/singleSignOn/bj.png");
    background-size: cover;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.login-form {
    width: 100%;
    max-width: 400px;
    padding: 40px;
    background-color: rgba(255, 255, 255, 0.98);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.login-logo i {
    font-size: 48px;
    color: #326eff;
    background: #326eff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-title {
    text-align: center;
    margin-bottom: 32px;
    color: #2d3748;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

.login-btn {
    width: 100%;
    height: 48px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 8px;
    background-color: #326eff;
    border: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(50, 110, 255, 0.3);
}

.login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(50, 110, 255, 0.4);
    background-color: #2558d1;
}

.login-btn:active {
    transform: translateY(0);
}

.login-btn:focus {
    box-shadow: 0 0 0 3px rgba(50, 110, 255, 0.2);
}

/* 输入框样式优化 */
.el-form-item {
    margin-bottom: 20px;
}

.el-input__inner {
    height: 48px;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
    font-size: 15px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: #fafbfc;
}

.el-input__inner:focus {
    border-color: #326eff;
    box-shadow: 0 0 0 3px rgba(50, 110, 255, 0.1);
    background-color: #ffffff;
}

.el-input__prefix {
    color: #a0aec0;
    font-size: 18px;
}

.el-input.is-focused .el-input__prefix {
    color: #326eff;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .login-form {
        margin: 0 20px;
        padding: 32px 24px;
    }

    .login-title {
        font-size: 20px;
        margin-bottom: 24px;
    }

    .login-logo i {
        font-size: 40px;
    }

    .el-input__inner {
        height: 44px;
        font-size: 14px;
    }

    .login-btn {
        height: 44px;
        font-size: 15px;
    }

    .el-form-item {
        margin-bottom: 16px;
    }
}

@media (max-width: 480px) {
    .login-form {
        margin: 0 16px;
        padding: 24px 20px;
    }
}
</style>