From 7a5a82daef28a016b3c9cfd903cdcb4bb066a8e4 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: Thu, 23 Jan 2025 14:09:44 +0800
Subject: [PATCH] 修改
---
src/views/login.vue | 334 ++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 232 insertions(+), 102 deletions(-)
diff --git a/src/views/login.vue b/src/views/login.vue
index 95cff50..5a467a1 100644
--- a/src/views/login.vue
+++ b/src/views/login.vue
@@ -1,64 +1,81 @@
<template>
- <div class="login">
- <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
- <h3 class="title">若依后台管理系统</h3>
- <el-form-item prop="username">
- <el-input
- v-model="loginForm.username"
- type="text"
- auto-complete="off"
- placeholder="账号"
- >
- <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
- </el-input>
- </el-form-item>
- <el-form-item prop="password">
- <el-input
- v-model="loginForm.password"
- type="password"
- auto-complete="off"
- placeholder="密码"
- @keyup.enter.native="handleLogin"
- >
- <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
- </el-input>
- </el-form-item>
- <el-form-item prop="code" v-if="captchaEnabled">
- <el-input
- v-model="loginForm.code"
- auto-complete="off"
- placeholder="验证码"
- style="width: 63%"
- @keyup.enter.native="handleLogin"
- >
- <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
- </el-input>
- <div class="login-code">
- <img :src="codeUrl" @click="getCode" class="login-code-img"/>
- </div>
- </el-form-item>
- <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
- <el-form-item style="width:100%;">
- <el-button
- :loading="loading"
- size="medium"
- type="primary"
- style="width:100%;"
- @click.native.prevent="handleLogin"
- >
- <span v-if="!loading">登 录</span>
- <span v-else>登 录 中...</span>
- </el-button>
- <div style="float: right;" v-if="register">
- <router-link class="link-type" :to="'/register'">立即注册</router-link>
- </div>
- </el-form-item>
- </el-form>
+ <el-row class="login">
+ <el-col :sm="24" :md="12" class="login-name">
+ <div class="bigName">
+ <span>新疆维吾尔自治区</span>
+ <br/>安全生产知识和管理能力考核平台
+ </div>
+ <div class="smallName">
+ 数据存档 / 远程监巡考 / 特种作业缴费 / 网络培训监管
+ </div>
+ </el-col>
+ <el-col :sm="24" :md="12" class="login-box">
+ <div class="login-card">
+ <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
+ <h3 class="title">登录系统</h3>
+ <el-form-item prop="username">
+ <el-input
+ v-model="loginForm.username"
+ type="text"
+ auto-complete="off"
+ placeholder="账号"
+ >
+ <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+ </el-input>
+ </el-form-item>
+ <el-form-item prop="password">
+ <el-input
+ v-model="loginForm.password"
+ type="password"
+ auto-complete="off"
+ placeholder="密码"
+ show-password
+ @keyup.enter.native="handleLogin"
+ >
+ <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+ </el-input>
+ </el-form-item>
+ <el-form-item prop="code" v-if="captchaEnabled">
+ <el-input
+ v-model="loginForm.code"
+ auto-complete="off"
+ placeholder="验证码"
+ style="width: 63%"
+ @keyup.enter.native="handleLogin"
+ >
+ <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+ </el-input>
+ <div class="login-code">
+ <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+ </div>
+ </el-form-item>
+ <el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;color: #ccc">记住密码</el-checkbox>
+ <div style="display: flex;justify-content: space-between;align-items: center">
+ <div style="width: 100%">
+ <el-button
+ class="btn-cont"
+ :loading="loading"
+ size="medium"
+ type="primary"
+ @click.native.prevent="handleLogin"
+ >
+ <span v-if="!loading">登 录</span>
+ <span v-else>登 录 中...</span>
+ </el-button>
+ </div>
+ </div>
+ <div style="float: right;" v-if="register">
+ <router-link class="link-type" :to="'/register'">立即注册</router-link>
+ </div>
+
+ </el-form>
+ </div>
+ </el-col>
<!-- 底部 -->
- <div class="el-login-footer">
- <span>Copyright © 2018-2023 ruoyi.vip All Rights Reserved.</span>
- </div>
- </div>
+<!-- <div class="el-login-footer">-->
+<!-- <span>技术支持：中国科学院</span>-->
+<!-- </div>-->
+ </el-row>
</template>
<script>
@@ -72,8 +89,8 @@
return {
codeUrl: "",
loginForm: {
- username: "admin",
- password: "admin123",
+ username: "",
+ password: "",
rememberMe: false,
code: "",
uuid: ""
@@ -98,7 +115,9 @@
watch: {
$route: {
handler: function(route) {
+ console.log(route,'route')
this.redirect = route.query && route.query.redirect;
+ // this.redirect = '/notCoalMine/nPeopleManage'
},
immediate: true
}
@@ -118,8 +137,8 @@
});
},
getCookie() {
- const username = Cookies.get("username");
- const password = Cookies.get("password");
+ const username = Cookies.get("username")
+ const password = Cookies.get("password")
const rememberMe = Cookies.get('rememberMe')
this.loginForm = {
username: username === undefined ? this.loginForm.username : username,
@@ -156,37 +175,129 @@
</script>
<style rel="stylesheet/scss" lang="scss">
-.login {
+
+@font-face {
+ font-family: "AliMa";
+ src: url("../assets/styles/AlimamaShuHeiTi-Bold.ttf");
+ font-style: normal;
+ font-weight: normal;
+}
+.login{
+ width: 100%;
+ height: 100%;
+ background: url("../assets/images/login-background.jpg") no-repeat center;
+ background-size: cover;
+ justify-content: center;
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ position: relative;
+ box-sizing: border-box;
+}
+
+@keyframes floatDown {
+ 100% {
+ transform: translateY(-80px);
+ opacity: 100%;
+ -webkit-opacity: 100%
+ }
+}
+
+.login-name{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ opacity: 0;
+ -webkit-opacity: 0;
+ animation: floatDown ease 0.6s forwards;
+ text-align: center;
+ line-height: 1.5;
+ transform: translateY(-120px);
+ .bigName{
+ font-family: 'AliMa';
+ color: #fff;
+ font-size: clamp(2.25rem, 0.401rem + 2.17vw, 3rem);
+ text-shadow: -10px 10px 20px rgba(0,0,0,.4);
+ span{
+ font-size: clamp(3rem, 0.534rem + 2.89vw, 4rem);
+ }
+ }
+ .smallName{
+ margin-top: 20px;
+ font-size: clamp(1.125rem, 0.2rem + 1.08vw, 1.5rem);
+ color: #fff;
+ }
+}
+
+@keyframes floatUp {
+ 100% {
+ transform: translateY(-40px);
+ opacity: 100%;
+ -webkit-opacity: 100%
+ }
+}
+
+.login-box{
display: flex;
justify-content: center;
align-items: center;
- height: 100%;
- background-image: url("../assets/images/login-background.jpg");
- background-size: cover;
-}
-.title {
- margin: 0px auto 30px auto;
- text-align: center;
- color: #707070;
-}
-.login-form {
- border-radius: 6px;
- background: #ffffff;
- width: 400px;
- padding: 25px 25px 5px 25px;
- .el-input {
- height: 38px;
- input {
- height: 38px;
+ .login-card{
+ width: 500px;
+ padding: 30px;
+ border-radius: 16px;
+ background-color: rgba(40,40,40,.4);
+ backdrop-filter: blur(6px);
+ -webkit-backdrop-filter: blur(6px);
+ border: 1px solid rgba(255,255,255,.6);
+ max-width: 100%;
+ box-sizing: border-box;
+ box-shadow: 0 10px 20px rgba(0,0,0,.05);
+ opacity: 0;
+ -webkit-opacity: 0;
+ animation: floatUp ease 0.6s forwards;
+ }
+ .login-form {
+ width: 100%;
+ box-sizing: border-box;
+
+ .title{
+ margin: 0 0 30px;
+ text-align: center;
+ color: #fff;
+ font-size: 1.4rem;
+ letter-spacing: 8px;
+ }
+
+ .el-form-item{
+ margin-bottom: 30px;
+ }
+
+ .el-input {
+ height: 48px;
+ input {
+ height: 48px;
+ }
+ .el-input__prefix{
+ display: flex;
+ left: 15px;
+ align-items: center;
+ }
+ }
+
+ .el-input__inner{
+ padding-left: 45px;
+ }
+
+ .input-icon {
+ height: 42px;
+ width: 16px;
+ margin-left: 0;
}
}
- .input-icon {
- height: 39px;
- width: 14px;
- margin-left: 2px;
- }
}
+
.login-tip {
font-size: 13px;
text-align: center;
@@ -194,26 +305,45 @@
}
.login-code {
width: 33%;
- height: 38px;
+ height: 48px;
float: right;
- img {
+ .login-code-img {
+ display: inline-block;
+ width: 100%;
+ padding-left: 12px;
cursor: pointer;
vertical-align: middle;
}
}
-.el-login-footer {
- height: 40px;
- line-height: 40px;
- position: fixed;
- bottom: 0;
- width: 100%;
- text-align: center;
- color: #fff;
- font-family: Arial;
- font-size: 12px;
- letter-spacing: 1px;
+
+.el-form-item--default{
+ margin-bottom: 15px;
}
-.login-code-img {
- height: 38px;
+
+::v-deep(.el-form-item__content){
+ display: flex;
+ justify-content: space-between;
+}
+
+.login-btn {
+ width: 100%;
+ font-size: 1.2em;
+ padding: 0.6em 0.8em;
+ border-radius: 0.5em;
+ border: none;
+ background-color: #2563EB;
+ color: #fff;
+ cursor: pointer;
+ box-shadow: 2px 2px 3px #000000b4;
+}
+
+.btn-cont {
+ width: 100%;
+ height: 48px;
+ padding: 3px;
+ background: #03a9f4;
+ border-radius: 0.6em;
+ box-sizing: border-box;
+ font-size: 18px;
}
</style>
--
Gitblit v1.9.2