登录页优化，消息提示优化

zyplayer-doc-ui/console-ui/src/views/user/Login.vue

@@ -1,6 +1,6 @@
 <template>
-	<div>
-		<div style="padding-top: 50px;">
+	<div :class="'login-background linear-gradient-'+bgImgRandom">
+		<div class="login-box">
 			<el-form :model="loginParam" :rules="loginRules" ref="loginParam" label-position="left" label-width="0px" class="demo-ruleForm login-container">
 				<h3 class="title">文档管理-系统登录</h3>
 				<el-form-item prop="username">
@@ -10,18 +10,11 @@
 					<el-input type="password" v-model="loginParam.password" auto-complete="off" placeholder="密码" @keyup.enter.native="loginSubmit"></el-input>
 				</el-form-item>
 				<el-form-item style="width:100%;">
-					<el-button type="primary" style="width:100%;" @click.native.prevent="loginSubmit" :loading="logining">登录</el-button>
-					<!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
+					<el-button type="primary" style="width:100%;" @click.native.prevent="loginSubmit" :loading="loginLoading">登录</el-button>
 				</el-form-item>
 			</el-form>
 		</div>
-		<!--随机背景图-->
-		<img v-if="bgImgRandom == 1" src="../../assets/img/bg1.jpeg" class="login-background-img">
-		<img v-else-if="bgImgRandom == 2" src="../../assets/img/bg2.jpeg" class="login-background-img">
-		<img v-else-if="bgImgRandom == 3" src="../../assets/img/bg3.jpeg" class="login-background-img">
-		<img v-else-if="bgImgRandom == 4" src="../../assets/img/bg4.jpeg" class="login-background-img">
-		<img v-else-if="bgImgRandom == 5" src="../../assets/img/bg5.jpeg" class="login-background-img">
-		<img v-else src="../../assets/img/bg5.jpeg" class="login-background-img">
+		<div class="power-by">Powered By <a target="_blank" href="https://gitee.com/zyplayer/zyplayer-doc">zyplayer-doc</a></div>
 	</div>
 </template>
 
@@ -30,7 +23,7 @@
 	export default {
 		data() {
 			return {
-				logining: false,
+				loginLoading: false,
 				redirect: '',
 				loginParam: {
 					username: '',
@@ -44,8 +37,7 @@
 						{required: true, message: '请输入密码', trigger: 'blur'},
 					]
 				},
-				checked: true,
-				bgImgRandom: Math.ceil(Math.random() * 4) + 1,
+				bgImgRandom: Math.ceil(Math.random() * 5),
 			};
 		},
 		mounted: function () {
@@ -55,12 +47,17 @@
 			loginSubmit() {
 				this.$refs.loginParam.validate((valid) => {
 					if (!valid) return;
+					this.loginLoading = true;
 					consoleApi.userLogin(this.loginParam).then(() => {
+						this.loginLoading = false;
 						if (!!this.redirect) {
 							location.href = decodeURIComponent(this.redirect);
 						} else {
 							this.$router.back();
 						}
+					}).catch(e => {
+						console.log("登录失败", e);
+						this.loginLoading = false;
 					});
 				});
 			}
@@ -81,19 +78,19 @@
 		border: 1px solid #eaeaea;
 		box-shadow: 0 0 25px #cac6c6;
 	}
+	.title {margin: 0px auto 40px auto;text-align: center;color: #505458;}
+	.remember {margin: 0px 0px 35px 0px;}
 
-	.title {
-		margin: 0px auto 40px auto;
-		text-align: center;
-		color: #505458;
-	}
+	.login-background{height: 100%;}
+	.linear-gradient-0{background: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);}
+	.linear-gradient-1{background: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);}
+	.linear-gradient-2{background: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);}
+	.linear-gradient-3{background: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);}
+	.linear-gradient-4{background: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);}
+	.linear-gradient-5{background: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);}
 
-	.remember {
-		margin: 0px 0px 35px 0px;
-	}
-
-	.login-background-img{
-		width: 100%; height: 100%; position: absolute;z-index: -1;top:0;left:0;
-	}
+	.login-box{padding-top: 50px;}
+	.power-by{position: absolute; bottom: 0; text-align: center; color: #888; padding: 10px 0;width: 100%;}
+	.power-by a{color: #888;padding: 10px 0; width: 100%;}
 </style>