|
|
@@ -1,17 +1,25 @@
|
|
|
<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-width="80px">
|
|
|
- <el-form-item label="账号" prop="username">
|
|
|
- <el-input v-model="loginForm.username" placeholder="请输入账号" prefix-icon="el-icon-user"></el-input>
|
|
|
+ <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 label="密码" prop="password">
|
|
|
- <el-input v-model="loginForm.password" placeholder="请输入密码" prefix-icon="el-icon-lock"
|
|
|
- show-password></el-input>
|
|
|
+ <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">登录</el-button>
|
|
|
+ <el-button type="primary" @click="handleLogin" class="login-btn" :loading="loginLoading">
|
|
|
+ 登录
|
|
|
+ </el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
@@ -33,20 +41,23 @@ export default {
|
|
|
password: [
|
|
|
{ required: true, message: '请输入密码', trigger: 'blur' }
|
|
|
]
|
|
|
- }
|
|
|
+ },
|
|
|
+ usernameFocus: false,
|
|
|
+ passwordFocus: false,
|
|
|
+ loginLoading: false
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
handleLogin() {
|
|
|
this.$refs.loginForm.validate((valid) => {
|
|
|
if (valid) {
|
|
|
- // 这里可以添加登录逻辑
|
|
|
- sessionStorage.setItem("getInfoName", this.loginForm.username);
|
|
|
- // 登录成功后跳转到SignOn页面
|
|
|
- this.$router.push('/SignOn');
|
|
|
- } else {
|
|
|
- this.$message.error('请填写完整的登录信息');
|
|
|
- return false;
|
|
|
+ this.loginLoading = true;
|
|
|
+ // 模拟登录请求
|
|
|
+ setTimeout(() => {
|
|
|
+ sessionStorage.setItem("getInfoName", this.loginForm.username);
|
|
|
+ this.$router.push('/SignOn');
|
|
|
+ this.loginLoading = false;
|
|
|
+ }, 500);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
@@ -60,24 +71,136 @@ export default {
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
height: 100vh;
|
|
|
- background-color: #f5f7fa;
|
|
|
+ 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: 400px;
|
|
|
+ width: 100%;
|
|
|
+ max-width: 400px;
|
|
|
padding: 40px;
|
|
|
- background-color: #ffffff;
|
|
|
- border-radius: 8px;
|
|
|
- box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
+ 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: 30px;
|
|
|
- color: #303133;
|
|
|
+ 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>
|
