Merge branch 'need_loginSty'

src/views/Login.vue

@@ -73,11 +73,13 @@
 				</el-form-item>
 			</el-form> -->
 			<div class="login-box" id="login-container" v-if="activeModel!=='forgetPassModel'">
+				<div class="fixed-login-wrapper">
+
 				<h1 style="font-size: 38px;text-align: center;color: #333;margin-bottom: 30px;">
 					运营管理系统
 				</h1>
-				<el-tabs v-model="activeModel" @tab-click="handleClick">
-					<el-tab-pane label="账号登录" name="ordinaryModel">
+				<el-tabs v-model="activeModel">
+					<!-- <el-tab-pane label="账号登录" name="ordinaryModel">
 						<OrdinaryModel ref="ordinaryModel"
 							:loginCheck="loginCheck"
 							:accountCheck="accountCheck"
@@ -89,10 +91,22 @@
 						<MobileModel ref="mobileModel"
 							:areaCode="areaCode"
 						/>
-					</el-tab-pane>
-					<!-- <el-tab-pane label="邮箱登录" name="emailModel"> -->
-						<EmailModel ref="emailModel" v-show="activeModel=='emailModel'"/>
-					<!-- </el-tab-pane> -->
+					</el-tab-pane> -->
+
+					<OrdinaryModel ref="ordinaryModel"
+							:loginCheck="loginCheck"
+							:accountCheck="accountCheck"
+							@clearnHint="clearnHint"
+							@changeModel="changeModel('forgetPassModel')"
+							v-show="activeModel=='ordinaryModel'"
+					/>
+
+					<MobileModel ref="mobileModel"
+							:areaCode="areaCode"
+							v-show="activeModel=='mobileModel'"
+					/>
+
+					<EmailModel ref="emailModel" v-show="activeModel=='emailModel'"/>
 				</el-tabs>
 				<el-button
 					type="primary"
@@ -108,19 +122,39 @@
 							<div class="type-hint-line"></div>
 						</div>
 						<div class="another-type">
-							<div class="login-type-item"
+							<div class="login-type-box">
+								<div class="login-type-item" @click="activeModel='ordinaryModel';handleClick({name:'ordinaryModelMobile'})"
+								v-show="activeModel!=='ordinaryModel'">
+									<img src="~@/assets/img/icons/account-login-type.png">
+									<span>账号登录</span>
+								</div>
+								<div class="login-type-item" @click="activeModel='mobileModel';handleClick({name:'mobileModelMobile'})"
+								v-show="activeModel!=='mobileModel'">
+									<img src="~@/assets/img/icons/phone-login-type.png">
+									<span>手机号登录</span>
+								</div>
+								<div class="login-type-item" v-show="activeModel!=='emailModel'" 
+								@click="activeModel='emailModel';handleClick({name:'emailModelMobile'})">
+									<img src="~@/assets/img/icons/email-login-type.png">
+									<span>邮箱登录</span>
+								</div>
+							</div>
+							<!-- <div class="login-type-item"
 							@click="activeModel='emailModel';handleClick({name:'emailModel'})">
 								<img src="~@/assets/img/icons/email-login-type.png">
 								<span>邮箱登录</span>
-							</div>
+							</div> -->
 						</div>
 					</div>
+				</div>
 			</div>
 			<div class="login-box" v-else>
-				<ForgetPassModel 
-					ref="forgetPassModel"
-					:autoAccount="$refs.ordinaryModel?$refs.ordinaryModel.form.account:''"
-					@changeModel="changeModel('ordinaryModel')"/>
+				<div class="fixed-login-wrapper">
+					<ForgetPassModel 
+						ref="forgetPassModel"
+						:autoAccount="$refs.ordinaryModel?$refs.ordinaryModel.form.account:''"
+						@changeModel="changeModel('ordinaryModel')"/>
+				</div>	
 			</div>
 		</div>
 
@@ -660,111 +694,129 @@ export default {
 			width: 8%;
 		}
 
-		#login-container,.login-box{
-			width: 31%;
-			max-width: 570px;
-			box-sizing: border-box;
-			border-radius: 10px;
-			position: absolute;
-			top: 18%;
-			right: 14%;
-			z-index: 100;
-			font-size: 30px;
-			input::-webkit-input-placeholder {
-				color: #595959 !important;
-			}
-			.remember {
-				margin: 0px 0 20px;
-			}
-			.submit_btn {
-				width: 100%;
-				height: 50px;
-				background: #007eff;
-				font-size: 16px;
-				border-radius: 5px;
-				// margin-top: 30px;
-			}
-			.el-input input {
-				width: 100%;
-				height: 40px;
-				color: #333333;
-				font-size: 16px;
-			}
-			.el-input-group__append,
-			.el-input-group__prepend {
-				background-color: rgba(255, 255, 255, 0.8);
-				color: rgb(51, 51, 51);
-				border: none;
-			}
-			.el-input.el-input-group.el-input-group--prepend input {
-				background-color: rgba(255, 255, 255, 0.8);
-				color: rgb(51, 51, 51);
-				border: none;
-			}
-			.el-checkbox__label {
-				color: rgb(51, 51, 51);
-				font-size: 14px;
-			}
-			.el-checkbox__input.is-checked + .el-checkbox__label {
-				color: rgb(51, 51, 51);
-				font-size: 14px;
-			}
-			.el-form-item__content .el-input-group,
-			.el-form-item__label,
-			.el-tag .el-icon-close {
-				padding-bottom: 5px;
-				vertical-align: middle;
-				border-bottom: 1px solid #eaeaea;
-			}
-			.el-button--primary {
-				background: #007eff !important;
-				border: none;
-			}
-			.el-form-item__content {
-				padding-bottom: 5px;
-			}
-			.el-form-item {
-				margin-bottom: 30px;
-			}
+	}
+	#login-container,.login-box{
+		width: 31%;
+		
+		box-sizing: border-box;
+		border-radius: 10px;
+		position: absolute;
+		top: 18%;
+		right: 14%;
+		z-index: 100;
+		font-size: 30px;
+		.fixed-login-wrapper {
+			width: 460px;
+			margin: 0 auto;
+		}
+		input::-webkit-input-placeholder {
+			color: #595959 !important;
+		}
+		.remember {
+			margin: 0px 0 20px;
+		}
+		.submit_btn {
+			width: 100%;
+			height: 50px;
+			background: #007eff;
+			font-size: 16px;
+			border-radius: 5px;
+			// margin-top: 30px;
+		}
+		.el-input input {
+			width: 100%;
+			height: 40px;
+			color: #333333;
+			font-size: 16px;
+		}
+		.el-input-group__append,
+		.el-input-group__prepend {
+			background-color: rgba(255, 255, 255, 0.8);
+			color: rgb(51, 51, 51);
+			border: none;
+		}
+		.el-input.el-input-group.el-input-group--prepend input {
+			background-color: rgba(255, 255, 255, 0.8);
+			color: rgb(51, 51, 51);
+			border: none;
+		}
+		.el-checkbox__label {
+			color: rgb(51, 51, 51);
+			font-size: 14px;
+		}
+		.el-checkbox__input.is-checked + .el-checkbox__label {
+			color: rgb(51, 51, 51);
+			font-size: 14px;
+		}
+		.el-form-item__content .el-input-group,
+		.el-form-item__label,
+		.el-tag .el-icon-close {
+			padding-bottom: 5px;
+			vertical-align: middle;
+			border-bottom: 1px solid #eaeaea;
+		}
+		.el-button--primary {
+			background: #007eff !important;
+			border: none;
+		}
+		.el-form-item__content {
+			padding-bottom: 5px;
+		}
+		.el-form-item {
+			margin-bottom: 30px;
+		}
 
-			.another-login-type{
-				margin-top: 45px;
-				.another-type-hint{
+		.another-login-type{
+			margin-top: 45px;
+			.another-type-hint{
+				display: flex;
+				align-items: center;
+				.type-hint-line{
+					flex: 1;
+					height: 1px;
+					background-color: #C0C4CC;
+				}
+				.type-hint-text{
+					font-size: 18px;
+					color: #999999;
+					padding: 0 20px;
+				}
+			}
+			.another-type{
+				.login-type-box {
 					display: flex;
+					justify-content: center;
+					gap: 10%;
+				}
+				.login-type-item{
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
 					align-items: center;
-					.type-hint-line{
-						flex: 1;
-						height: 1px;
-						background-color: #C0C4CC;
-					}
-					.type-hint-text{
-						font-size: 18px;
-						color: #999999;
-						padding: 0 20px;
+					margin-top: 20px;
+					cursor: pointer;
+					img{
+						height: 40px;
+						width: 40px;
+						margin-bottom: 4px;
 					}
-				}
-				.another-type{
-					.login-type-item{
-						display: flex;
-						flex-direction: column;
-						justify-content: center;
-						align-items: center;
-						margin-top: 20px;
-						cursor: pointer;
-						img{
-							height: 40px;
-							width: 40px;
-							margin-bottom: 4px;
-						}
-						span{
-							font-size: 16px;
-							color: #666666;
-						}
+					span{
+						font-size: 16px;
+						color: #666666;
 					}
 				}
 			}
 		}
 	}
+	@media screen and (max-width:1201px) {
+		.login-bg { display: none; }
+		#login-container ,.login-box{
+				width: 70%;
+				top:15%;
+				left: 50%;
+				transform: translateX(-50%);
+			}
+	}
 	@media screen and (max-width:650px) {
 		#login_wrapper_mobile{
 			// display: block;

src/views/login_manage/ForgetPassModel.vue

@@ -320,6 +320,9 @@ export default {
                     }).then(res=>{
                         if(res.Ret!==200) return
                         this.$message.success('重置密码成功，请登陆')
+                        localStorage.setItem('timeKey',Date.now())
+                        localStorage.setItem("account", new http.Base64().encode(this.form.account));
+                        localStorage.setItem("checkPass", new http.Base64().encode(this.passForm.pass1));
                         this.resetPassCountDown()
                         this.resetPassTimer = setInterval(()=>{
                             this.resetPassCountDown()