|
|
@@ -1,79 +1,82 @@
|
|
|
<template>
|
|
|
- <div class="login-container">
|
|
|
- <div class="login-left">
|
|
|
- <div class="login-texts">
|
|
|
- <p>
|
|
|
- <span>全球汉语教学平台-学习中心</span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <el-form
|
|
|
- :model="loginForm"
|
|
|
- :rules="loginRules"
|
|
|
- auto-complete="on"
|
|
|
- class="login-form"
|
|
|
- label-position="left"
|
|
|
- ref="loginForm"
|
|
|
- size="mini"
|
|
|
- >
|
|
|
- <div class="title-container">
|
|
|
- <h3 class="title">登录</h3>
|
|
|
- </div>
|
|
|
+ <div class="login-container" v-if="configInfor">
|
|
|
+ <div class="login-left">
|
|
|
+ <div class="login-texts">
|
|
|
+ <p>
|
|
|
+ <span>{{ configInfor.title }}-教培中心</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <el-form
|
|
|
+ :model="loginForm"
|
|
|
+ :rules="loginRules"
|
|
|
+ auto-complete="on"
|
|
|
+ class="login-form"
|
|
|
+ label-position="left"
|
|
|
+ ref="loginForm"
|
|
|
+ size="mini"
|
|
|
+ >
|
|
|
+ <div class="title-container">
|
|
|
+ <h3 class="title">登录</h3>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="login-input" v-show="loginCheck == 'login'">
|
|
|
- <p class="input-title">用户名</p>
|
|
|
- <el-form-item prop="username">
|
|
|
- <el-input
|
|
|
- autocomplete="off"
|
|
|
- name="username"
|
|
|
- ref="username"
|
|
|
- tabindex="1"
|
|
|
- type="text"
|
|
|
- v-model="loginForm.username"
|
|
|
- />
|
|
|
- </el-form-item>
|
|
|
- <p class="input-title">密码</p>
|
|
|
- <el-form-item prop="password">
|
|
|
- <el-input
|
|
|
- :key="passwordType"
|
|
|
- :type="passwordType"
|
|
|
- @keyup.enter.native="handleLogin"
|
|
|
- autocomplete="off"
|
|
|
- name="password"
|
|
|
- ref="password"
|
|
|
- tabindex="2"
|
|
|
- v-model="loginForm.password"
|
|
|
- />
|
|
|
- <!-- <span @click="showPwd" class="show-pwd">
|
|
|
+ <div class="login-input" v-show="loginCheck == 'login'">
|
|
|
+ <p class="input-title">用户名</p>
|
|
|
+ <el-form-item prop="username">
|
|
|
+ <el-input
|
|
|
+ autocomplete="off"
|
|
|
+ name="username"
|
|
|
+ ref="username"
|
|
|
+ tabindex="1"
|
|
|
+ type="text"
|
|
|
+ v-model="loginForm.username"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <p class="input-title">密码</p>
|
|
|
+ <el-form-item prop="password">
|
|
|
+ <el-input
|
|
|
+ :key="passwordType"
|
|
|
+ :type="passwordType"
|
|
|
+ @keyup.enter.native="handleLogin"
|
|
|
+ autocomplete="off"
|
|
|
+ name="password"
|
|
|
+ ref="password"
|
|
|
+ tabindex="2"
|
|
|
+ v-model="loginForm.password"
|
|
|
+ />
|
|
|
+ <!-- <span @click="showPwd" class="show-pwd">
|
|
|
<svg-icon
|
|
|
:icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
|
|
|
/>
|
|
|
</span>-->
|
|
|
- </el-form-item>
|
|
|
- <p class="input-title">用户类型</p>
|
|
|
- <el-form-item class="el-form-item-type" prop="type">
|
|
|
- <el-radio label="TEACHER" v-model="loginForm.type">教师</el-radio>
|
|
|
- <el-radio label="STUDENT" v-model="loginForm.type">学员</el-radio>
|
|
|
- <el-radio label="ADMIN" v-model="loginForm.type">系统管理员</el-radio>
|
|
|
- <!-- <span @click="showPwd" class="show-pwd">
|
|
|
+ </el-form-item>
|
|
|
+ <p class="input-title">用户类型</p>
|
|
|
+ <el-form-item class="el-form-item-type" prop="type">
|
|
|
+ <el-radio label="TEACHER" v-model="loginForm.type">教师</el-radio>
|
|
|
+ <el-radio label="STUDENT" v-model="loginForm.type">学员</el-radio>
|
|
|
+ <el-radio label="ADMIN" v-model="loginForm.type"
|
|
|
+ >系统管理员</el-radio
|
|
|
+ >
|
|
|
+ <!-- <span @click="showPwd" class="show-pwd">
|
|
|
<svg-icon
|
|
|
:icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
|
|
|
/>
|
|
|
</span>-->
|
|
|
- </el-form-item>
|
|
|
- <el-button
|
|
|
- :loading="loading"
|
|
|
- @click.native.prevent="handleLogin"
|
|
|
- size="small"
|
|
|
- style="width: 100%; margin-bottom: 30px"
|
|
|
- type="primary"
|
|
|
- >登录</el-button>
|
|
|
- </div>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- <div class="login-right">
|
|
|
- <!-- <img alt src="@/assets/login/index.png"> -->
|
|
|
+ </el-form-item>
|
|
|
+ <el-button
|
|
|
+ :loading="loading"
|
|
|
+ @click.native.prevent="handleLogin"
|
|
|
+ size="small"
|
|
|
+ style="width: 100%; margin-bottom: 30px"
|
|
|
+ type="primary"
|
|
|
+ >登录</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="login-right">
|
|
|
+ <!-- <img alt src="@/assets/login/index.png"> -->
|
|
|
</div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -82,97 +85,105 @@ import { getContent } from "@/api/api";
|
|
|
import { getObjArr, saveObjArr } from "@/utils/role";
|
|
|
import Cookies from "js-cookie";
|
|
|
import { setToken } from "@/utils/auth";
|
|
|
+import { getConfigInfor } from "@/utils/index";
|
|
|
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) {
|
|
|
- callback(new Error("请输入密码"));
|
|
|
- } else {
|
|
|
- callback();
|
|
|
- }
|
|
|
- };
|
|
|
- return {
|
|
|
- options: [],
|
|
|
- select: "1",
|
|
|
- codeText: "获取验证码",
|
|
|
- codeSend: false,
|
|
|
- //登录
|
|
|
- loginForm: {
|
|
|
- username: getObjArr("userName") || "",
|
|
|
- password: "",
|
|
|
- type: "TEACHER",
|
|
|
- },
|
|
|
- //input 规则
|
|
|
- loginRules: {
|
|
|
- username: [
|
|
|
- { required: true, trigger: "blur", validator: validateUsername },
|
|
|
- ],
|
|
|
- password: [
|
|
|
- { required: true, trigger: "blur", validator: validatePassword },
|
|
|
- ],
|
|
|
- },
|
|
|
- loading: false,
|
|
|
- passwordType: "password",
|
|
|
- redirect: undefined,
|
|
|
- loginCheck: "login",
|
|
|
- };
|
|
|
+ name: "Login",
|
|
|
+ data() {
|
|
|
+ const validateUsername = (rule, value, callback) => {
|
|
|
+ if (!validUsername(value)) {
|
|
|
+ callback(new Error("请输入用户名"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ const validatePassword = (rule, value, callback) => {
|
|
|
+ if (!value) {
|
|
|
+ callback(new Error("请输入密码"));
|
|
|
+ } else {
|
|
|
+ callback();
|
|
|
+ }
|
|
|
+ };
|
|
|
+ return {
|
|
|
+ options: [],
|
|
|
+ select: "1",
|
|
|
+ codeText: "获取验证码",
|
|
|
+ codeSend: false,
|
|
|
+ //登录
|
|
|
+ loginForm: {
|
|
|
+ username: getObjArr("userName") || "",
|
|
|
+ password: "",
|
|
|
+ type: "TEACHER",
|
|
|
+ },
|
|
|
+ //input 规则
|
|
|
+ loginRules: {
|
|
|
+ username: [
|
|
|
+ { required: true, trigger: "blur", validator: validateUsername },
|
|
|
+ ],
|
|
|
+ password: [
|
|
|
+ { required: true, trigger: "blur", validator: validatePassword },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ loading: false,
|
|
|
+ passwordType: "password",
|
|
|
+ redirect: undefined,
|
|
|
+ loginCheck: "login",
|
|
|
+ configInfor: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ $route: {
|
|
|
+ handler: function (route) {
|
|
|
+ this.redirect = route.query && route.query.redirect;
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
},
|
|
|
- watch: {
|
|
|
- $route: {
|
|
|
- handler: function (route) {
|
|
|
- this.redirect = route.query && route.query.redirect;
|
|
|
- },
|
|
|
- immediate: true,
|
|
|
- },
|
|
|
+ },
|
|
|
+ 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 () {
|
|
|
- this.$refs.loginForm.validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- this.loading = true;
|
|
|
- let MethodName = "login_control-Login";
|
|
|
- let UserCode = "";
|
|
|
- let UserType = "";
|
|
|
- let SessionID = "";
|
|
|
- let data = {
|
|
|
- user_type: this.loginForm.type,
|
|
|
- user_name: this.loginForm.username,
|
|
|
- password: this.loginForm.password,
|
|
|
- };
|
|
|
- getContent(MethodName, UserCode, UserType, SessionID, data).then(
|
|
|
- (res) => {
|
|
|
- setToken(res);
|
|
|
- this.$router.push({ path: "/" });
|
|
|
- }
|
|
|
- ).catch(()=>{
|
|
|
- this.loading = false;
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.loading = false;
|
|
|
- return false;
|
|
|
- }
|
|
|
+ //登录
|
|
|
+ handleLogin() {
|
|
|
+ this.$refs.loginForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.loading = true;
|
|
|
+ let MethodName = "login_control-Login";
|
|
|
+ let UserCode = "";
|
|
|
+ let UserType = "";
|
|
|
+ let SessionID = "";
|
|
|
+ let data = {
|
|
|
+ user_type: this.loginForm.type,
|
|
|
+ user_name: this.loginForm.username,
|
|
|
+ password: this.loginForm.password,
|
|
|
+ };
|
|
|
+ getContent(MethodName, UserCode, UserType, SessionID, data)
|
|
|
+ .then((res) => {
|
|
|
+ setToken(res);
|
|
|
+ this.$router.push({ path: "/" });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false;
|
|
|
});
|
|
|
- },
|
|
|
+ } else {
|
|
|
+ this.loading = false;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async _getConfig() {
|
|
|
+ this.configInfor = await getConfigInfor();
|
|
|
},
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this._getConfig();
|
|
|
+ },
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
@@ -186,96 +197,96 @@ $cursor: #000;
|
|
|
$fc: rgb(24, 144, 255);
|
|
|
|
|
|
@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
|
|
|
- .login-container .el-input input {
|
|
|
- color: $cursor !important;
|
|
|
- }
|
|
|
- .el-form-item.is-success .el-input__inner {
|
|
|
- border-color: $fc !important;
|
|
|
- }
|
|
|
+ .login-container .el-input input {
|
|
|
+ color: $cursor !important;
|
|
|
+ }
|
|
|
+ .el-form-item.is-success .el-input__inner {
|
|
|
+ border-color: $fc !important;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
/* reset element-ui css */
|
|
|
.login-input {
|
|
|
- font-size: 0;
|
|
|
- .el-input {
|
|
|
- display: inline-block;
|
|
|
- height: 32px;
|
|
|
- width: 85%;
|
|
|
+ font-size: 0;
|
|
|
+ .el-input {
|
|
|
+ display: inline-block;
|
|
|
+ height: 32px;
|
|
|
+ width: 85%;
|
|
|
|
|
|
- input {
|
|
|
- background: transparent;
|
|
|
- border: 0px;
|
|
|
- -webkit-appearance: none;
|
|
|
- border-radius: 0px;
|
|
|
- padding: 5px 5px 5px 15px;
|
|
|
- color: rgb(117, 117, 117);
|
|
|
- height: 32px;
|
|
|
- caret-color: #000;
|
|
|
+ input {
|
|
|
+ background: transparent;
|
|
|
+ border: 0px;
|
|
|
+ -webkit-appearance: none;
|
|
|
+ border-radius: 0px;
|
|
|
+ padding: 5px 5px 5px 15px;
|
|
|
+ color: rgb(117, 117, 117);
|
|
|
+ height: 32px;
|
|
|
+ caret-color: #000;
|
|
|
|
|
|
- &:-webkit-autofill {
|
|
|
- box-shadow: 0 0 0px 1000px $light_gray inset !important;
|
|
|
- -webkit-text-fill-color: $cursor !important;
|
|
|
- }
|
|
|
- }
|
|
|
+ &:-webkit-autofill {
|
|
|
+ box-shadow: 0 0 0px 1000px $light_gray inset !important;
|
|
|
+ -webkit-text-fill-color: $cursor !important;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .el-form-item {
|
|
|
- border: 1px solid #ccc;
|
|
|
- // background: rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 5px;
|
|
|
- color: #454545;
|
|
|
- }
|
|
|
- .el-form-item-type {
|
|
|
- border-color: #fff;
|
|
|
- }
|
|
|
+ .el-form-item {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ // background: rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 5px;
|
|
|
+ color: #454545;
|
|
|
+ }
|
|
|
+ .el-form-item-type {
|
|
|
+ border-color: #fff;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.sign-input {
|
|
|
- .school.el-select {
|
|
|
- width: 100%;
|
|
|
- margin-bottom: 14px;
|
|
|
- }
|
|
|
- .el-input {
|
|
|
- height: 32px;
|
|
|
- .el-input__inner {
|
|
|
- height: 32px;
|
|
|
- line-height: 32px;
|
|
|
- }
|
|
|
+ .school.el-select {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
+ .el-input {
|
|
|
+ height: 32px;
|
|
|
+ .el-input__inner {
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
}
|
|
|
- .area-code {
|
|
|
- margin-bottom: 14px;
|
|
|
- .el-input-group__prepend {
|
|
|
- background: #fff;
|
|
|
- width: 80px;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .area-code {
|
|
|
+ margin-bottom: 14px;
|
|
|
+ .el-input-group__prepend {
|
|
|
+ background: #fff;
|
|
|
+ width: 80px;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.code {
|
|
|
- display: flex;
|
|
|
- justify-content: space-around;
|
|
|
- align-items: center;
|
|
|
- .code-number {
|
|
|
- flex-basis: 80%;
|
|
|
- margin-right: 10px;
|
|
|
- .el-input--mini .el-input__inner {
|
|
|
- height: 32px;
|
|
|
- line-height: 32px;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ .code-number {
|
|
|
+ flex-basis: 80%;
|
|
|
+ margin-right: 10px;
|
|
|
+ .el-input--mini .el-input__inner {
|
|
|
+ height: 32px;
|
|
|
+ line-height: 32px;
|
|
|
}
|
|
|
- .code-btn {
|
|
|
- margin-top: -2px;
|
|
|
- .el-button--mini {
|
|
|
- padding: 8px 15px;
|
|
|
- width: 120px;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .code-btn {
|
|
|
+ margin-top: -2px;
|
|
|
+ .el-button--mini {
|
|
|
+ padding: 8px 15px;
|
|
|
+ width: 120px;
|
|
|
}
|
|
|
- .sends {
|
|
|
- .el-button--mini {
|
|
|
- background: #ccc;
|
|
|
- border-color: #ccc;
|
|
|
- }
|
|
|
+ }
|
|
|
+ .sends {
|
|
|
+ .el-button--mini {
|
|
|
+ background: #ccc;
|
|
|
+ border-color: #ccc;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
@@ -286,136 +297,136 @@ $light_gray: #eee;
|
|
|
$fc: rgb(24, 144, 255);
|
|
|
|
|
|
.login-container {
|
|
|
- min-height: 100%;
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- background: url('../assets/login/bg-login.jpg') center no-repeat;
|
|
|
- background-size: cover;
|
|
|
- overflow: hidden;
|
|
|
+ min-height: 100%;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ background: url("../assets/login/bg-login.jpg") center no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .login-form {
|
|
|
position: relative;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .login-form {
|
|
|
- position: relative;
|
|
|
- width: 350px;
|
|
|
- background: #fff;
|
|
|
- border-radius: 5px;
|
|
|
- padding: 42px;
|
|
|
- box-sizing: border-box;
|
|
|
- max-width: 100%;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
+ width: 350px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 42px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ max-width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
|
|
|
- .tips {
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- margin-bottom: 10px;
|
|
|
+ .tips {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #fff;
|
|
|
+ margin-bottom: 10px;
|
|
|
|
|
|
- span {
|
|
|
- &:first-of-type {
|
|
|
- margin-right: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
+ span {
|
|
|
+ &:first-of-type {
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .svg-container {
|
|
|
- padding: 0px 5px 0px 15px;
|
|
|
- color: $dark_gray;
|
|
|
- vertical-align: middle;
|
|
|
- width: 30px;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
- .colors {
|
|
|
- color: blue;
|
|
|
- }
|
|
|
+ .svg-container {
|
|
|
+ padding: 0px 5px 0px 15px;
|
|
|
+ color: $dark_gray;
|
|
|
+ vertical-align: middle;
|
|
|
+ width: 30px;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .colors {
|
|
|
+ color: blue;
|
|
|
+ }
|
|
|
|
|
|
- .title-container {
|
|
|
- position: relative;
|
|
|
+ .title-container {
|
|
|
+ position: relative;
|
|
|
|
|
|
- .title {
|
|
|
- font-size: 24px;
|
|
|
- color: rgb(73, 73, 73);
|
|
|
- margin: 0px auto 30px auto;
|
|
|
- text-align: left;
|
|
|
- font-weight: normal;
|
|
|
- }
|
|
|
+ .title {
|
|
|
+ font-size: 24px;
|
|
|
+ color: rgb(73, 73, 73);
|
|
|
+ margin: 0px auto 30px auto;
|
|
|
+ text-align: left;
|
|
|
+ font-weight: normal;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .show-pwd {
|
|
|
- position: absolute;
|
|
|
- right: 10px;
|
|
|
- top: 3px;
|
|
|
- font-size: 16px;
|
|
|
- color: $dark_gray;
|
|
|
- cursor: pointer;
|
|
|
- user-select: none;
|
|
|
- }
|
|
|
+ .show-pwd {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ top: 3px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: $dark_gray;
|
|
|
+ cursor: pointer;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.input-title {
|
|
|
- font-size: 12px;
|
|
|
- font-weight: 500;
|
|
|
- color: rgba(19, 20, 21, 1);
|
|
|
- line-height: 20px;
|
|
|
- margin-bottom: 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(19, 20, 21, 1);
|
|
|
+ line-height: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
}
|
|
|
/*login tab切换*/
|
|
|
.login-table {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- height: 40px;
|
|
|
- margin-bottom: 20px;
|
|
|
- font-size: 16px;
|
|
|
- p {
|
|
|
- flex: 1;
|
|
|
- text-align: center;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
- padding: 0 20px;
|
|
|
- height: 46px;
|
|
|
- line-height: 46px;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- span.hover {
|
|
|
- color: $fc;
|
|
|
- border-bottom: 3px solid $fc;
|
|
|
- }
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ height: 40px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ p {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 20px;
|
|
|
+ height: 46px;
|
|
|
+ line-height: 46px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ span.hover {
|
|
|
+ color: $fc;
|
|
|
+ border-bottom: 3px solid $fc;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
/*text*/
|
|
|
.login-texts {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 500;
|
|
|
- color: #1c1c1c;
|
|
|
- line-height: 30px;
|
|
|
- margin-bottom: 20px;
|
|
|
- text-align: center;
|
|
|
- > p:nth-child(1) {
|
|
|
- line-height: 50px;
|
|
|
- > span:nth-child(1) {
|
|
|
- font-size: 32px;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #1c1c1c;
|
|
|
+ line-height: 30px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ text-align: center;
|
|
|
+ > p:nth-child(1) {
|
|
|
+ line-height: 50px;
|
|
|
+ > span:nth-child(1) {
|
|
|
+ font-size: 32px;
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
+ }
|
|
|
}
|
|
|
.login-left {
|
|
|
- // flex: 1;
|
|
|
- margin: 0 auto;
|
|
|
+ // flex: 1;
|
|
|
+ margin: 0 auto;
|
|
|
}
|
|
|
.login-right {
|
|
|
- // flex: 1;
|
|
|
- text-align: right;
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- justify-content: flex-end;
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- vertical-align: bottom;
|
|
|
- }
|
|
|
+ // flex: 1;
|
|
|
+ text-align: right;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: flex-end;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ vertical-align: bottom;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
秦鹏