|
|
@@ -1,9 +1,13 @@
|
|
|
-<template>
|
|
|
+<template>
|
|
|
<div class="login-container">
|
|
|
<div class="new-login">
|
|
|
<div class="new-login-l">
|
|
|
- <img src="@/assets/images/logo.png" alt="">
|
|
|
+ <div class="imgs">
|
|
|
+ <img :src="$t('auth.logo')" alt="" :lang="$i18n.locale">
|
|
|
+ <div class="img-text" :lang="$i18n.locale">TMR TOTAL MIXED RATIONS MANAGEMENT SYSTEM</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="new-login-r">
|
|
|
<div class="title">{{$t('auth.signIn')}}</div>
|
|
|
<el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
|
|
|
@@ -11,27 +15,27 @@
|
|
|
<span class="svg-container">
|
|
|
<svg-icon icon-class="user" />
|
|
|
</span>
|
|
|
- <el-input ref="username" v-model="loginForm.username" :placeholder="$t('user_name')" name="username" type="text" tabindex="1" auto-complete="on" />
|
|
|
+ <el-input ref="username" v-model="loginForm.username" :placeholder="$t('auth.username')" name="username" type="text" tabindex="1" auto-complete="on" />
|
|
|
</el-form-item>
|
|
|
|
|
|
<el-form-item prop="password" class="password">
|
|
|
<span class="svg-container">
|
|
|
<svg-icon icon-class="password" />
|
|
|
</span>
|
|
|
- <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" :placeholder="$t('password')" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
|
|
|
+ <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" :placeholder="$t('auth.password')" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
|
|
|
<span class="show-pwd" @click="showPwd">
|
|
|
<svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
|
|
|
</span>
|
|
|
</el-form-item>
|
|
|
- <el-form-item prop="password" class="rememberPassword">
|
|
|
+ <el-form-item class="rememberPassword">
|
|
|
<input id="remember-password-checkbox" v-model="rememberPassword" type="checkbox" value="remember-me" @click="doRememberPassword($event)">
|
|
|
<span for="remember-password-checkbox">
|
|
|
- {{$t('remember_password')}}
|
|
|
+ {{$t('auth.rePassword')}}
|
|
|
</span>
|
|
|
</input>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
- <el-button type="text" :loading="loading" class="btn" @click.native.prevent="handleLogin">登录</el-button>
|
|
|
+ <el-button type="text" :loading="loading" class="btn" @click.native.prevent="handleLogin">{{$t('auth.userBtn')}}</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style="position: absolute;bottom: 0;left: 0;right:0;color: #000;background: #fee; opacity: .7; font-size: 14px;">
|
|
|
@@ -42,96 +46,114 @@
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-import { validUsername } from '@/utils/validate'
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { validUsername } from '@/utils/validate'
|
|
|
import Cookies from 'js-cookie'
|
|
|
import { getToken } from '@/utils/auth'
|
|
|
-import axios from 'axios';
|
|
|
-const md5 = require("md5")
|
|
|
-export default {
|
|
|
- name: 'Login',
|
|
|
- data() {
|
|
|
- const validateUsername = (rule, value, callback) => {
|
|
|
- if (!validUsername(value)) {
|
|
|
- callback(new Error('请输入正确的用户名'))
|
|
|
- } else {
|
|
|
- callback()
|
|
|
- }
|
|
|
- }
|
|
|
- const validatePassword = (rule, value, callback) => {
|
|
|
- if (value.length < 6) {
|
|
|
- callback(new Error('密码不能少于6个字符'))
|
|
|
- } else {
|
|
|
- callback()
|
|
|
- }
|
|
|
- }
|
|
|
- return {
|
|
|
- loginForm: {
|
|
|
- username: '',
|
|
|
- password: ''
|
|
|
- },
|
|
|
- loginRules: {
|
|
|
- username: [
|
|
|
- { required: true, trigger: 'blur', validator: validateUsername }
|
|
|
- ],
|
|
|
- password: [
|
|
|
- { required: true, trigger: 'blur', validator: validatePassword }
|
|
|
- ]
|
|
|
- },
|
|
|
- loading: false,
|
|
|
- passwordType: 'password',
|
|
|
+import axios from 'axios'
|
|
|
+const md5 = require('md5')
|
|
|
+export default {
|
|
|
+ name: 'Login',
|
|
|
+ data() {
|
|
|
+ const validateUsername = (rule, value, callback) => {
|
|
|
+ if (!validUsername(value)) {
|
|
|
+ callback(new Error(this.$t('auth.userTname')))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ const validatePassword = (rule, value, callback) => {
|
|
|
+ if (!value.length) {
|
|
|
+ callback(new Error(this.$t('auth.userTpassword')))
|
|
|
+ } else if (value.length < 6) {
|
|
|
+ callback(new Error(this.$t('auth.passwordTest')))
|
|
|
+ } else {
|
|
|
+ callback()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ loginForm: {
|
|
|
+ username: '',
|
|
|
+ password: ''
|
|
|
+ },
|
|
|
+ loginRules: {
|
|
|
+ username: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ trigger: 'blur',
|
|
|
+ message: this.$t('auth.usernamePlaceholder')
|
|
|
+ // validator: validateUsername
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ // message: this.$t('auth.passwordPlaceholder'),
|
|
|
+ trigger: 'blur',
|
|
|
+ validator: validatePassword
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ passwordType: 'password',
|
|
|
redirect: undefined,
|
|
|
- rememberPassword: ''
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- $route: {
|
|
|
- handler: function(route) {
|
|
|
- this.redirect = route.query && route.query.redirect
|
|
|
- },
|
|
|
- immediate: true
|
|
|
- }
|
|
|
- },
|
|
|
- created() {
|
|
|
- var that = this
|
|
|
- document.onkeydown = function(e) {
|
|
|
- e = window.event || e
|
|
|
- // eslint-disable-next-line eqeqeq
|
|
|
- if (that.$route.path == '/login' && (e.code == 'Enter' || e.code == 'Num Enter')) { // 验证在登录界面和按得键是回车键enter
|
|
|
- that.handleLogin('ruleForm2') // 登录函数 （handleSubmit2('ruleForm2')-登录按钮的点击事件）
|
|
|
- }
|
|
|
- }
|
|
|
+ rememberPassword: ''
|
|
|
+ }
|
|
|
},
|
|
|
- mounted: function() {
|
|
|
+ watch: {
|
|
|
+ $route: {
|
|
|
+ handler: function (route) {
|
|
|
+ this.redirect = route.query && route.query.redirect
|
|
|
+ },
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ var that = this
|
|
|
+ document.onkeydown = function (e) {
|
|
|
+ e = window.event || e
|
|
|
+ // eslint-disable-next-line eqeqeq
|
|
|
+ if (
|
|
|
+ that.$route.path == '/login' &&
|
|
|
+ (e.code == 'Enter' || e.code == 'Num Enter')
|
|
|
+ ) {
|
|
|
+ // 验证在登录界面和按得键是回车键enter
|
|
|
+ that.handleLogin('ruleForm2') // 登录函数 （handleSubmit2('ruleForm2')-登录按钮的点击事件）
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted: function () {
|
|
|
// 读取cookie中的账号信息，如果有accountInfo的话，则说明该用户之前勾选了记住密码的功能，则需要自动填上账号密码
|
|
|
this.loadAccountInfo()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- showPwd() {
|
|
|
- if (this.passwordType === 'password') {
|
|
|
- this.passwordType = ''
|
|
|
- } else {
|
|
|
- this.passwordType = 'password'
|
|
|
- }
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.password.focus()
|
|
|
- })
|
|
|
- },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ showPwd() {
|
|
|
+ if (this.passwordType === 'password') {
|
|
|
+ this.passwordType = ''
|
|
|
+ } else {
|
|
|
+ this.passwordType = 'password'
|
|
|
+ }
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.password.focus()
|
|
|
+ })
|
|
|
+ },
|
|
|
handleLogin() {
|
|
|
var obj = {
|
|
|
username: this.loginForm.username,
|
|
|
password: md5(this.loginForm.password)
|
|
|
}
|
|
|
var rememberStatus = this.rememberPassword
|
|
|
- var accountInfo = this.loginForm.username + '&' + this.loginForm.password
|
|
|
- this.$refs.loginForm.validate(valid => {
|
|
|
- if (valid) {
|
|
|
+ var accountInfo = this.loginForm.username + '&' + this.loginForm.password
|
|
|
+ this.$refs.loginForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
this.loading = true
|
|
|
- this.$store.dispatch('user/login', obj).then(() => {
|
|
|
- // this.$store.dispatch('user/login', this.loginForm).then(() => {
|
|
|
+ this.$store
|
|
|
+ .dispatch('user/login', obj)
|
|
|
+ .then(() => {
|
|
|
+ // this.$store.dispatch('user/login', this.loginForm).then(() => {
|
|
|
if (rememberStatus) {
|
|
|
console.log('勾选了记住密码，现在开始写入cookie')
|
|
|
Cookies.set('accountInfo', accountInfo, 1440 * 3)
|
|
|
@@ -143,24 +165,24 @@ export default {
|
|
|
// 若为本地环境 则手写cookie
|
|
|
if (window.location.href.indexOf('localhost') != -1) {
|
|
|
Cookies.set('token', getToken(), 1440)
|
|
|
- }
|
|
|
- this.$router.push({ path: this.redirect || '/' })
|
|
|
- this.loading = false
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- this.loading = false
|
|
|
- })
|
|
|
- } else {
|
|
|
- console.log('error submit!!')
|
|
|
- return false
|
|
|
- }
|
|
|
- })
|
|
|
+ }
|
|
|
+ this.$router.push({ path: this.redirect || '/' })
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ console.log('error submit!!')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
},
|
|
|
doRememberPassword() {
|
|
|
const rememberStatus = this.rememberPassword
|
|
|
this.rememberPassword = !rememberStatus
|
|
|
},
|
|
|
- loadAccountInfo: function() {
|
|
|
+ loadAccountInfo: function () {
|
|
|
const _this = this
|
|
|
// zhaopeng&A15hOsu8YeGnCsjb
|
|
|
const accountInfo = Cookies.get('accountInfo')
|
|
|
@@ -182,50 +204,50 @@ export default {
|
|
|
_this.loginForm.password = passWord
|
|
|
_this.rememberPassword = true
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss">
|
|
|
-/* 修复input 背景不协调 和光标变色 */
|
|
|
-/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
|
|
-
|
|
|
-// $bg: #283443;
|
|
|
-// $light_gray: #fff;
|
|
|
-// $cursor: #fff;
|
|
|
-// 更改
|
|
|
-// $bg: #ccc;
|
|
|
-// $light_gray: #ccc;
|
|
|
-// $cursor: #000;
|
|
|
-// @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
|
|
-// .login-container .el-input input {
|
|
|
-// color: $cursor;
|
|
|
-// }
|
|
|
-// }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+/* 修复input 背景不协调 和光标变色 */
|
|
|
+/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
|
|
|
+
|
|
|
+// $bg: #283443;
|
|
|
+// $light_gray: #fff;
|
|
|
+// $cursor: #fff;
|
|
|
+// 更改
|
|
|
+// $bg: #ccc;
|
|
|
+// $light_gray: #ccc;
|
|
|
+// $cursor: #000;
|
|
|
+// @supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
|
|
+// .login-container .el-input input {
|
|
|
+// color: $cursor;
|
|
|
+// }
|
|
|
+// }
|
|
|
// .login-container {
|
|
|
-// min-height: 232px;
|
|
|
-// .el-input {
|
|
|
-// display: inline-block;
|
|
|
-// height: 38px;
|
|
|
-// width: 80%;
|
|
|
-
|
|
|
-// input {
|
|
|
-// background: #fff;
|
|
|
-// border: 0px;
|
|
|
-// -webkit-appearance: none;
|
|
|
-// border-radius: 0px;
|
|
|
-// padding: 5px 5px 5px 15px;
|
|
|
-// color: #000;
|
|
|
-// height: 16.7%;
|
|
|
-// caret-color: $cursor;
|
|
|
-
|
|
|
-// &:-webkit-autofill {
|
|
|
-// box-shadow: 0 0 0px 1000px $bg inset !important;
|
|
|
-// -webkit-text-fill-color: $cursor !important;
|
|
|
-// }
|
|
|
-// }
|
|
|
-// }
|
|
|
+// min-height: 232px;
|
|
|
+// .el-input {
|
|
|
+// display: inline-block;
|
|
|
+// height: 38px;
|
|
|
+// width: 80%;
|
|
|
+
|
|
|
+// input {
|
|
|
+// background: #fff;
|
|
|
+// border: 0px;
|
|
|
+// -webkit-appearance: none;
|
|
|
+// border-radius: 0px;
|
|
|
+// padding: 5px 5px 5px 15px;
|
|
|
+// color: #000;
|
|
|
+// height: 16.7%;
|
|
|
+// caret-color: $cursor;
|
|
|
+
|
|
|
+// &:-webkit-autofill {
|
|
|
+// box-shadow: 0 0 0px 1000px $bg inset !important;
|
|
|
+// -webkit-text-fill-color: $cursor !important;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
// .el-form-item {
|
|
|
// border: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
// background: #fff;
|
|
|
@@ -257,99 +279,99 @@ export default {
|
|
|
// overflow: hidden;
|
|
|
// }
|
|
|
// .btn span{width:72%;background:#01996a;border: #01996a;border-radius: 5px;line-height: 40px; text-align: center;color:#fff; margin: 0 auto;display: block;}
|
|
|
-
|
|
|
+
|
|
|
// }
|
|
|
-
|
|
|
-</style>
|
|
|
+</style>
|
|
|
|
|
|
/* <style>
|
|
|
-
|
|
|
-.login-container .el-input input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
|
|
|
- -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
|
|
|
- box-shadow: 0 0 0px 1000px #fff inset !important;
|
|
|
- -webkit-text-fill-color: #000 !important;
|
|
|
+.login-container .el-input input:-webkit-autofill,
|
|
|
+textarea:-webkit-autofill,
|
|
|
+select:-webkit-autofill {
|
|
|
+ -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
|
|
|
+ box-shadow: 0 0 0px 1000px #fff inset !important;
|
|
|
+ -webkit-text-fill-color: #000 !important;
|
|
|
}
|
|
|
+</style> */
|
|
|
+// <style lang="scss" scoped>
|
|
|
+// $bg: #2d3a4b;
|
|
|
+// $dark_gray: #999;
|
|
|
+// $light_gray: #000;
|
|
|
|
|
|
-</style> */
|
|
|
-// <style lang="scss" scoped>
|
|
|
-// $bg: #2d3a4b;
|
|
|
-// $dark_gray: #999;
|
|
|
-// $light_gray: #000;
|
|
|
-
|
|
|
-// .login-container {
|
|
|
-// min-height: 100%;
|
|
|
+// .login-container {
|
|
|
+// min-height: 100%;
|
|
|
// width: 100%;
|
|
|
-// height: 100%;
|
|
|
-// position: relative;
|
|
|
-// background: url("../../assets/images/nlogin-bg.png") no-repeat;
|
|
|
-// background-size:100%;
|
|
|
-// overflow: hidden;
|
|
|
-// .login {
|
|
|
-// border-radius: 5%;
|
|
|
-// padding: 30px;
|
|
|
-// background: rgba(0,0,0,0.4);
|
|
|
-// width: 380px;
|
|
|
-// height: 340px;
|
|
|
-// position: relative;
|
|
|
+// height: 100%;
|
|
|
+// position: relative;
|
|
|
+// background: url("../../assets/images/nlogin-bg.png") no-repeat;
|
|
|
+// background-size:100%;
|
|
|
+// overflow: hidden;
|
|
|
+// .login {
|
|
|
+// border-radius: 5%;
|
|
|
+// padding: 30px;
|
|
|
+// background: rgba(0,0,0,0.4);
|
|
|
+// width: 380px;
|
|
|
+// height: 340px;
|
|
|
+// position: relative;
|
|
|
// top: 50%;
|
|
|
// left: 50%;
|
|
|
// margin-left: -190px;
|
|
|
// margin-top: -270px;
|
|
|
-// box-shadow:0px 0px 10px #fff;
|
|
|
+// box-shadow:0px 0px 10px #fff;
|
|
|
// .login-form {
|
|
|
-// margin-top: 60px;
|
|
|
-// position: relative;
|
|
|
-// width: 520px;
|
|
|
-// max-width: 100%;
|
|
|
-// overflow: hidden;
|
|
|
-// }
|
|
|
-
|
|
|
-// .tips {
|
|
|
-// font-size: 14px;
|
|
|
-// color: #fff;
|
|
|
-// margin-bottom: 10px;
|
|
|
-
|
|
|
-// span {
|
|
|
-// &:first-of-type {
|
|
|
-// margin-right: 16px;
|
|
|
-// }
|
|
|
-// }
|
|
|
-// }
|
|
|
-
|
|
|
-// .svg-container {
|
|
|
-// padding: 6px 5px 6px 15px;
|
|
|
-// color: $dark_gray;
|
|
|
-// vertical-align: middle;
|
|
|
-// width: 30px;
|
|
|
-// display: inline-block;
|
|
|
-// }
|
|
|
-
|
|
|
-// .title {
|
|
|
-// font-size: 26px;
|
|
|
-// color: $light_gray;
|
|
|
-// margin: 0px auto 0 auto;
|
|
|
-// text-align: center;
|
|
|
-// font-weight: bold;
|
|
|
-// }
|
|
|
-// b {
|
|
|
-// text-align: center;
|
|
|
-// font: 14px/2 "";
|
|
|
-// }
|
|
|
-
|
|
|
-// .show-pwd {
|
|
|
-// position: absolute;
|
|
|
-// right: 10px;
|
|
|
-// top: 7px;
|
|
|
-// font-size: 16px;
|
|
|
-// color: $dark_gray;
|
|
|
-// cursor: pointer;
|
|
|
-// user-select: none;
|
|
|
-// }
|
|
|
+// margin-top: 60px;
|
|
|
+// position: relative;
|
|
|
+// width: 520px;
|
|
|
+// max-width: 100%;
|
|
|
+// overflow: hidden;
|
|
|
+// }
|
|
|
+
|
|
|
+// .tips {
|
|
|
+// font-size: 14px;
|
|
|
+// color: #fff;
|
|
|
+// margin-bottom: 10px;
|
|
|
+
|
|
|
+// span {
|
|
|
+// &:first-of-type {
|
|
|
+// margin-right: 16px;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+
|
|
|
+// .svg-container {
|
|
|
+// padding: 6px 5px 6px 15px;
|
|
|
+// color: $dark_gray;
|
|
|
+// vertical-align: middle;
|
|
|
+// width: 30px;
|
|
|
+// display: inline-block;
|
|
|
+// }
|
|
|
+
|
|
|
+// .title {
|
|
|
+// font-size: 26px;
|
|
|
+// color: $light_gray;
|
|
|
+// margin: 0px auto 0 auto;
|
|
|
+// text-align: center;
|
|
|
+// font-weight: bold;
|
|
|
+// }
|
|
|
+// b {
|
|
|
+// text-align: center;
|
|
|
+// font: 14px/2 "";
|
|
|
+// }
|
|
|
+
|
|
|
+// .show-pwd {
|
|
|
+// position: absolute;
|
|
|
+// right: 10px;
|
|
|
+// top: 7px;
|
|
|
+// font-size: 16px;
|
|
|
+// color: $dark_gray;
|
|
|
+// cursor: pointer;
|
|
|
+// user-select: none;
|
|
|
+// }
|
|
|
|
|
|
// .kpt{text-align: center;color: #fff;display: inline-block;width: 100%;font:12px/18px '';}
|
|
|
-// }
|
|
|
-// }
|
|
|
-// </style>
|
|
|
+// }
|
|
|
+// }
|
|
|
+//
|
|
|
+</style>
|
|
|
// <style lang="scss" scoped>
|
|
|
// .login-container {
|
|
|
// width: 100vw;
|
|
|
@@ -403,50 +425,150 @@ export default {
|
|
|
// }
|
|
|
// }
|
|
|
// }
|
|
|
-// </style>
|
|
|
+//
|
|
|
+</style>
|
|
|
<style lang="scss" scoped>
|
|
|
-$bg: #2d3a4b;
|
|
|
-$dark_gray: #999;
|
|
|
+$bg: #2d3a4b;
|
|
|
+$dark_gray: #999;
|
|
|
$light_gray: #000;
|
|
|
-$bg: #ccc;
|
|
|
-$light_gray: #ccc;
|
|
|
+$bg: #ccc;
|
|
|
+$light_gray: #ccc;
|
|
|
$cursor: #000;
|
|
|
-.login-container{
|
|
|
- position: relative;height: 100%;width: 100%;background: url("../../assets/images/nlogin-bg1.jpg") no-repeat;background-size: cover;
|
|
|
- .new-login{
|
|
|
- width: 50%;height: 42%;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;
|
|
|
- .new-login-l{
|
|
|
- float:left;height:100%;width:50%;background: url("../../assets/images/nlogin-bg2.png") no-repeat;position: relative;background-size: cover;
|
|
|
- img{position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;width: 50%;height:23%;}
|
|
|
+.login-container {
|
|
|
+ position: relative;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background: url('../../assets/images/nlogin-bg1.jpg') no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ .new-login {
|
|
|
+ width: 50%;
|
|
|
+ height: 42%;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ top: 0;
|
|
|
+ margin: auto;
|
|
|
+ .new-login-l {
|
|
|
+ float: left;
|
|
|
+ height: 100%;
|
|
|
+ width: 50%;
|
|
|
+ background: url('../../assets/images/nlogin-bg2.png') no-repeat;
|
|
|
+ position: relative;
|
|
|
+ background-size: cover;
|
|
|
+ text-align: center;
|
|
|
+ .imgs {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ top: 0;
|
|
|
+ margin: auto;
|
|
|
+ height: 26%;
|
|
|
+ width: 100%;
|
|
|
}
|
|
|
- .new-login-r{
|
|
|
- background: #fff;float:left;height:100%;width:50%;position: relative;
|
|
|
- .title{margin-top: 10%;font-size: 20px;font-weight: 600;color: #019969;text-align: center;}
|
|
|
- .login-form{
|
|
|
- position: relative;width: 520px;overflow: hidden;height: 48%;width: 100%;
|
|
|
- .svg-container{padding: 6px 5px 6px 15px; color: $dark_gray; vertical-align: middle; width: 30px; display: inline-block;}
|
|
|
- .el-input {
|
|
|
- display: inline-block; width: 80%;
|
|
|
- }
|
|
|
+ img {
|
|
|
+ width: 50%;
|
|
|
+ // height: 23%;
|
|
|
+ &:lang(en) {
|
|
|
+ width: 70%;
|
|
|
}
|
|
|
- .el-form-item {
|
|
|
- border: none; background: #fff; border-radius: 5px; color: #999;width: 73%; margin: 10px auto;height: 30%;
|
|
|
- /deep/.el-form-item__content {
|
|
|
- line-height: 16%; border-bottom: 1px solid #e7e7e7;
|
|
|
- }
|
|
|
- .el-form-item__content .el-input{
|
|
|
- /deep/.el-input__inner{border: none !important;}
|
|
|
+ }
|
|
|
+ .img-text {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #019969;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 8px;
|
|
|
+ display: none;
|
|
|
+ &:lang(en) {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .new-login-r {
|
|
|
+ background: #fff;
|
|
|
+ float: left;
|
|
|
+ height: 100%;
|
|
|
+ width: 50%;
|
|
|
+ position: relative;
|
|
|
+ .title {
|
|
|
+ margin-top: 10%;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #019969;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .login-form {
|
|
|
+ position: relative;
|
|
|
+ width: 520px;
|
|
|
+ overflow: hidden;
|
|
|
+ height: 48%;
|
|
|
+ width: 100%;
|
|
|
+ .svg-container {
|
|
|
+ padding: 6px 5px 6px 15px;
|
|
|
+ color: $dark_gray;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 30px;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .el-input {
|
|
|
+ display: inline-block;
|
|
|
+ width: 80%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-form-item {
|
|
|
+ border: none;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ color: #999;
|
|
|
+ width: 73%;
|
|
|
+ margin: 10px auto;
|
|
|
+ height: 30%;
|
|
|
+ /deep/.el-form-item__content {
|
|
|
+ line-height: 16%;
|
|
|
+ border-bottom: 1px solid #e7e7e7;
|
|
|
+ }
|
|
|
+ .el-form-item__content .el-input {
|
|
|
+ /deep/.el-input__inner {
|
|
|
+ border: none !important;
|
|
|
}
|
|
|
}
|
|
|
- .rememberPassword{
|
|
|
- /deep/.el-form-item__content { line-height:16%; border: none;padding-bottom: 10px; span{padding-left: 5px;} }
|
|
|
+ }
|
|
|
+ .rememberPassword {
|
|
|
+ /deep/.el-form-item__content {
|
|
|
+ line-height: 16%;
|
|
|
+ border: none;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ span {
|
|
|
+ padding-left: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
- .password{margin-top: 10px;margin-bottom: 20px;}
|
|
|
- .btn{
|
|
|
- position: absolute; overflow: hidden; width: 75%;left: 0;right: 0;bottom: 10%;margin: 0 auto;
|
|
|
- /deep/span{background:#01996a;border: #01996a;border-radius: 5px;line-height: 40px; text-align: center;color:#fff; display: block;}
|
|
|
+ }
|
|
|
+ .password {
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ position: absolute;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 75%;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 10%;
|
|
|
+ margin: 0 auto;
|
|
|
+ /deep/span {
|
|
|
+ background: #01996a;
|
|
|
+ border: #01996a;
|
|
|
+ border-radius: 5px;
|
|
|
+ line-height: 40px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ display: block;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|
Shan9312
