Merge branch 'login_optimize'

src/views/Login.vue

@@ -80,9 +80,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"
@@ -91,6 +91,19 @@
 					: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"
+                        > -->
+                            <img src="~@/assets/img/icons/email-login-type.png" @click="activeModel='emailModel';handleClick({name:'emailModel'})" />
+                        <!-- </div> -->
+                    </div>
+                </div>
 			</div>
 			<div class="login-box" v-else>
 				<ForgetPassModel 
@@ -532,7 +545,7 @@ export default {
 	height: 100%;
 	background: #fff;
 	position: relative;
-	overflow: hidden;
+	// overflow: hidden;
 	#login_wrapper {
 		width: 100%;
 		height: 100%;
@@ -566,7 +579,7 @@ export default {
 			box-sizing: border-box;
 			border-radius: 10px;
 			position: absolute;
-			top: 27%;
+			top: 18%;
 			right: 12%;
 			z-index: 100;
 			input::-webkit-input-placeholder {
@@ -582,6 +595,48 @@ export default {
 				font-size: 20px;
 				border-radius: 5px;
 			}
+            .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{
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    img{
+                        margin-top: 20px;
+                        height: 72px;
+                        width: 64px;
+                        cursor: pointer;
+                        // margin-bottom: 4px;
+                    }
+					// .login-type-item{
+					// 	display: flex;
+					// 	flex-direction: column;
+					// 	justify-content: center;
+					// 	align-items: center;
+					// 	margin-top: 20px;
+					// 	cursor: pointer;
+	
+					// 	span{
+					// 		font-size: 16px;
+					// 		color: #666666;
+					// 	}
+					// }
+				}
+			}
 			.el-input input {
 				width: 100%;
 				height: 40px;