1

src/components/page/Login.vue

@@ -18,19 +18,18 @@
 				<div class="login-btn">
 					<el-button type="primary" @click="submitForm()">{{ $t('system.login') }}</el-button>
 				</div>
-                <el-row style="text-align: center">
+				<el-row style="text-align: left">
-                    <el-col :span="12"
+					<el-col :span="24">
-                        ><el-link :underline="false" type="primary" @click="doRetrieve()">{{ $t('system.repassword') }}</el-link></el-col
+						<el-link :underline="false" type="primary" @click="doRetrieve()">{{ $t('system.repassword') }}</el-link>
-                    >
+					</el-col>
-                    <el-col :span="12"
+					<el-col :span="24">
-                        ><el-link :underline="false" type="primary" @click="doRegister()">{{ $t('system.register') }}</el-link></el-col
+						<el-link :underline="false" type="primary" @click="doRegister()">{{ $t('system.register') }}</el-link>
-                    >
+					</el-col>
-                </el-row>
+					<el-col :span="24" style="margin-top: 5px;">
-                <el-row style="text-align: center">
+						<el-link :underline="false" type="primary" @click="doRetrieve()">
-                    <el-col :span="20"
+							<img class="orcid" src="../../assets/img/orcid.png" style="float: left;margin: -1px 5px 0 0;"/>Login with your 
-                        ><el-link :underline="false" type="primary" @click="doRetrieve()"
+						</el-link>
-                            ><img class="orcid" src="../../assets/img/orcid.png" />login with your </el-link
+					</el-col>
-                    ></el-col>
 				</el-row>
 			</el-form>
 		</div>
@@ -38,8 +37,8 @@
 </template>
 
 <script>
-export default {
+	export default {
-    data: function () {
+		data: function() {
 			return {
 				aa: localStorage.getItem('ms_journal'),
 				param: {
@@ -47,8 +46,16 @@ export default {
 					password: ''
 				},
 				rules: {
-                username: [{ required: true, message: 'enter one user name', trigger: 'blur' }],
+					username: [{
-                password: [{ required: true, message: 'Please input a password', trigger: 'blur' }]
+						required: true,
+						message: 'enter one user name',
+						trigger: 'blur'
+					}],
+					password: [{
+						required: true,
+						message: 'Please input a password',
+						trigger: 'blur'
+					}]
 				}
 			};
 		},
@@ -89,33 +96,39 @@ export default {
 			},
 			doRegister() {
 				//注册页面
-            this.$router.push({ path: '/register' });
+				this.$router.push({
+					path: '/register'
+				});
 			},
 			doRetrieve() {
 				//找回密码
-            this.$router.push({ path: '/retrieve' });
+				this.$router.push({
+					path: '/retrieve'
+				});
 			}
 		}
-};
+	};
 </script>
 
 <style scoped>
-.login-wrap {
+	.login-wrap {
 		position: relative;
 		width: 100%;
 		height: 100%;
 		background-image: url(../../assets/img/login-bg.jpg);
 		background-size: 100%;
-}
+	}
-.ms-title {
+
+	.ms-title {
 		width: 100%;
 		line-height: 50px;
 		text-align: center;
 		font-size: 20px;
 		color: #fff;
 		border-bottom: 1px solid #ddd;
-}
+	}
-.ms-login {
+
+	.ms-login {
 		position: absolute;
 		left: 50%;
 		top: 50%;
@@ -124,26 +137,31 @@ export default {
 		border-radius: 5px;
 		background: rgba(255, 255, 255, 0.3);
 		overflow: hidden;
-}
+	}
-.ms-content {
+
+	.ms-content {
 		padding: 30px 30px;
-}
+	}
-.login-btn {
+
+	.login-btn {
 		text-align: center;
-}
+	}
-.login-btn button {
+
+	.login-btn button {
 		width: 100%;
 		height: 36px;
 		margin-bottom: 10px;
-}
+	}
-.login-tips {
+
+	.login-tips {
 		font-size: 12px;
 		line-height: 30px;
 		color: #fff;
-}
+	}
-.orcid {
+
+	.orcid {
 		display: block;
 		width: 20px;
 		height: 20px;
-}
+	}
 </style>