| | |
| | | <template> |
| | | <el-row class="login-panel"> |
| | | <el-col :sm="24" :md="12" class="login-img"> |
| | | 多体系<br/>建设信息化系统 |
| | | <el-col :sm="24" :md="10" class="login-img"> |
| | | |
| | | </el-col> |
| | | <el-col :sm="24" :md="12" class="login-box"> |
| | | <el-col :sm="24" :md="14" class="login-box"> |
| | | <div class="login-title">多体系<br/>建设信息化系统</div> |
| | | <div class="login-card"> |
| | | <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form"> |
| | | <h3 class="title">登录系统</h3> |
| | | <h3 class="title">欢迎登录</h3> |
| | | <el-form-item prop="username"> |
| | | <el-input |
| | | v-model="loginForm.username" |
| | |
| | | identity: loginForm.value.role |
| | | } |
| | | userStore.login(param).then(() => { |
| | | if (redirect.value) { |
| | | if (redirect.value && redirect.value !== '/index') { |
| | | const query = route.query; |
| | | const otherQueryParams = Object.keys(query).reduce((acc, cur) => { |
| | | if (cur !== "redirect") { |
| | |
| | | } |
| | | return acc; |
| | | }, {}); |
| | | router.push({ path: redirect.value || "/", query: otherQueryParams }); |
| | | router.push({ path: redirect.value, query: otherQueryParams }); |
| | | } else { |
| | | router.push({ path: "/menuPage" }); |
| | | } |
| | |
| | | .login-panel{ |
| | | width: 100%; |
| | | height: 100%; |
| | | background: url("@/assets/images/bg4.png") no-repeat center; |
| | | background: url("@/assets/images/bg5.jpg") no-repeat center; |
| | | background-size: cover; |
| | | justify-content: center; |
| | | align-items: center; |
| | |
| | | } |
| | | .login-box{ |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: center; |
| | | align-items: center; |
| | | transform: translateY(-40px); |
| | | |
| | | .login-title{ |
| | | font-family: 'AliMa'; |
| | | color: #2563eb; |
| | | font-size: clamp(3rem, 1.286rem + 2.68vw, 4.5rem); |
| | | line-height: 1.2; |
| | | text-shadow: 0 5px 10px rgba(37,99,235,.3); |
| | | margin-bottom: 30px; |
| | | } |
| | | .login-card{ |
| | | width: 500px; |
| | | padding: 30px; |
| | | border-radius: 16px; |
| | | background-color: rgba(255,255,255,.2); |
| | | background-color: rgba(255,255,255,.8); |
| | | backdrop-filter: blur(5px); |
| | | -webkit-backdrop-filter: blur(5px); |
| | | border: 1px solid rgba(255,255,255,.4); |
| | |
| | | .title{ |
| | | margin: 0 0 30px; |
| | | text-align: center; |
| | | color: #fff |
| | | color: #333 |
| | | } |
| | | |
| | | .el-form-item{ |