Merge branch 'login_optimize'

src/views/Login.vue

@@ -90,9 +90,9 @@
 							:areaCode="areaCode"
 						/>
 					</el-tab-pane>
-					<el-tab-pane label="邮箱登录" name="emailModel">
-						<EmailModel ref="emailModel"/>
-					</el-tab-pane>
+					<!-- <el-tab-pane label="邮箱登录" name="emailModel"> -->
+						<EmailModel ref="emailModel" v-show="activeModel=='emailModel'"/>
+					<!-- </el-tab-pane> -->
 				</el-tabs>
 				<el-button
 					type="primary"
@@ -101,6 +101,20 @@
 					:loading="logining"
 					class="submit_btn"
 					>登录</el-button>
+					<div class="another-login-type">
+						<div class="another-type-hint">
+							<div class="type-hint-line"></div>
+							<div class="type-hint-text">其他登录方式</div>
+							<div class="type-hint-line"></div>
+						</div>
+						<div class="another-type">
+							<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 class="login-box" v-else>
 				<ForgetPassModel 
@@ -652,7 +666,7 @@ export default {
 			box-sizing: border-box;
 			border-radius: 10px;
 			position: absolute;
-			top: 31%;
+			top: 18%;
 			right: 14%;
 			z-index: 100;
 			font-size: 30px;
@@ -668,7 +682,7 @@ export default {
 				background: #007eff;
 				font-size: 16px;
 				border-radius: 5px;
-				margin-top: 30px;
+				// margin-top: 30px;
 			}
 			.el-input input {
 				width: 100%;
@@ -712,6 +726,43 @@ export default {
 			.el-form-item {
 				margin-bottom: 30px;
 			}
+
+			.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-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;
+						}
+					}
+				}
+			}
 		}
 	}
 	@media screen and (max-width:650px) {