|
|
@@ -1,66 +1,136 @@
|
|
|
<template>
|
|
|
- <div class="login">
|
|
|
- <main class="login-container">
|
|
|
+ <div class="register">
|
|
|
+ <div class="header">
|
|
|
+ <div class="logo">
|
|
|
+ <el-image class="logo-image" :src="$store.state.app.config.logo_image_url" />
|
|
|
+ </div>
|
|
|
+ <div class="selectLoginOrRegistration" @click="goLogin">
|
|
|
+ <span>登录</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <main class="register-container">
|
|
|
<div class="title">注册</div>
|
|
|
- <el-form ref="loginForm" :model="form" :rules="rules" label-position="right">
|
|
|
- <el-form-item prop="server_address" label="服务器地址">
|
|
|
- <el-input v-model="form.server_address" placeholder="请输入服务器地址" />
|
|
|
- </el-form-item>
|
|
|
+ <el-form ref="registerForm" :model="form" :rules="rules" label-width="100px" inline>
|
|
|
<el-form-item prop="user_name" label="用户名">
|
|
|
<el-input v-model="form.user_name" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item prop="password" label="密码">
|
|
|
- <el-input v-model="form.password" type="password" show-password />
|
|
|
+ <el-form-item prop="real_name" label="真实姓名">
|
|
|
+ <el-input v-model="form.real_name" />
|
|
|
</el-form-item>
|
|
|
- <el-form-item prop="user_type" label="用户类型">
|
|
|
- <el-radio-group v-model="form.user_type">
|
|
|
- <el-radio label="USER">机构用户</el-radio>
|
|
|
- <el-radio label="ORG_MANAGER">机构管理员</el-radio>
|
|
|
- <el-radio label="ADMIN">系统管理员</el-radio>
|
|
|
- </el-radio-group>
|
|
|
+ <el-form-item prop="phone_or_email" label="邮箱">
|
|
|
+ <el-input v-model="form.phone_or_email" @change="ChangeEmail" />
|
|
|
</el-form-item>
|
|
|
-
|
|
|
- <el-form-item prop="verification_code_image_text" class="verification-code" label="验证码">
|
|
|
- <el-input v-model="form.verification_code_image_text" @keyup.enter.native="signIn" />
|
|
|
- <el-image
|
|
|
- v-if="image_content_base64.length > 0"
|
|
|
- :src="`data:image/jpg;base64,${image_content_base64}`"
|
|
|
- @click="updateVerificationCode"
|
|
|
+ <el-form-item prop="verification_code" label="邮箱验证码">
|
|
|
+ <el-input style="width: 202px" v-model="form.verification_code" maxlength="6" />
|
|
|
+ <button v-if="VerificationCodeShow" class="waitTime" disabled>
|
|
|
+ {{ time + 's' }}
|
|
|
+ </button>
|
|
|
+ <button type="button" v-else @click.prevent="getVerificationCode" :class="['getVerification']">获取</button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="org_id" label="机构">
|
|
|
+ <el-select v-model="form.org_id" filterable>
|
|
|
+ <el-option v-for="item in institutionList" :key="item.id" :value="item.id" :label="item.name"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="password" label="密码">
|
|
|
+ <el-input
|
|
|
+ v-model="form.password"
|
|
|
+ :type="parsswordType"
|
|
|
+ @change="changeParssword"
|
|
|
+ @input="trimInput('password')"
|
|
|
+ maxlength="12"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-show="parsswordType == 'password'"
|
|
|
+ @click="lookParssowrd(1)"
|
|
|
+ :class="['rightimg']"
|
|
|
+ src="@/assets/password1.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-show="parsswordType == 'text'"
|
|
|
+ @click="lookParssowrd(1)"
|
|
|
+ :class="['rightimg']"
|
|
|
+ src="@/assets/password2.png"
|
|
|
+ alt=""
|
|
|
/>
|
|
|
+ <p :class="passwordError ? 'textRed' : 'psswordHint'">请输入8-12位大写字母、小写字母和数字组合。</p>
|
|
|
</el-form-item>
|
|
|
- <el-form-item>
|
|
|
- <el-button class="submit" type="primary" @click="signIn">登录</el-button>
|
|
|
+ <el-form-item prop="confirmPwd" label="重复密码">
|
|
|
+ <el-input
|
|
|
+ v-model="form.confirmPwd"
|
|
|
+ :type="twoPasswordType"
|
|
|
+ @change="Changetowpassword"
|
|
|
+ @input="trimInput('confirmPwd')"
|
|
|
+ maxlength="12"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-show="twoPasswordType == 'password'"
|
|
|
+ @click="lookParssowrd(2)"
|
|
|
+ :class="['rightimg']"
|
|
|
+ src="@/assets/password1.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-show="twoPasswordType == 'text'"
|
|
|
+ @click="lookParssowrd(2)"
|
|
|
+ :class="['rightimg']"
|
|
|
+ src="@/assets/password2.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <p :class="passwordErrorTwo ? 'textRed' : 'psswordHint'">请再次输入密码。这两项必须相同。</p>
|
|
|
</el-form-item>
|
|
|
+ <hr />
|
|
|
+
|
|
|
<el-form-item>
|
|
|
<div class="protocol">
|
|
|
<span>
|
|
|
- <el-checkbox v-model="isAgree" /> 我已阅读并同意<span style="color: #4d78ff">《用户协议》</span>
|
|
|
+ <el-checkbox v-model="isAgree" /> 我已阅读并同意<span
|
|
|
+ style="color: #4d78ff; cursor: pointer"
|
|
|
+ @click="viewUserAgreement"
|
|
|
+ >《用户协议》</span
|
|
|
+ >
|
|
|
</span>
|
|
|
- <span style="color: #4d78ff">忘记密码？| <a>注册</a></span>
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button :loading="isLogin" class="submit" type="primary" @click="submitForm('registerForm')"
|
|
|
+ >注册</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
</el-form>
|
|
|
</main>
|
|
|
+ <el-dialog
|
|
|
+ :visible.sync="showUseragreement"
|
|
|
+ width="80%"
|
|
|
+ append-to-body
|
|
|
+ :show-close="false"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ class="login-userAgree"
|
|
|
+ >
|
|
|
+ <userAgreement class="userAgree-login" :changeAgreement="changeAgreement" />
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import md5 from 'md5';
|
|
|
-import { GetVerificationCodeImage, GetLogo } from '@/api/app';
|
|
|
-import { setConfig } from '@/utils/auth';
|
|
|
-
|
|
|
+import { orgIndexList, sendVerificationCode, registerUser } from '@/api/user';
|
|
|
+import UserAgreement from '../login/userAgreement.vue';
|
|
|
export default {
|
|
|
name: 'RegisterPage',
|
|
|
+ components: { UserAgreement },
|
|
|
data() {
|
|
|
return {
|
|
|
- isAgree: true, // 是否同意用户协议
|
|
|
form: {
|
|
|
- user_type: 'USER',
|
|
|
user_name: '',
|
|
|
+ real_name: '',
|
|
|
+ org_id: '',
|
|
|
+ image_id: '',
|
|
|
password: '',
|
|
|
- is_password_md5: 'true',
|
|
|
- verification_code_image_id: '',
|
|
|
- verification_code_image_text: '',
|
|
|
+ verification_type: 'EMAIL',
|
|
|
+ phone_or_email: '',
|
|
|
+ verification_code: '',
|
|
|
+ confirmPwd: '',
|
|
|
},
|
|
|
rules: {
|
|
|
user_name: [
|
|
|
@@ -70,6 +140,20 @@ export default {
|
|
|
trigger: 'blur',
|
|
|
},
|
|
|
],
|
|
|
+ real_name: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入真实姓名',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ org_id: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请选择机构',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
password: [
|
|
|
{
|
|
|
required: true,
|
|
|
@@ -77,141 +161,422 @@ export default {
|
|
|
trigger: 'blur',
|
|
|
},
|
|
|
],
|
|
|
- verification_code_image_text: [{ required: true, trigger: 'blur', message: '验证码不能为空' }],
|
|
|
+ verification_code: [{ required: true, trigger: 'blur', message: '验证码不能为空' }],
|
|
|
+ phone_or_email: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入邮箱',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ confirmPwd: [
|
|
|
+ {
|
|
|
+ required: true,
|
|
|
+ message: '请输入重复密码',
|
|
|
+ trigger: 'blur',
|
|
|
+ },
|
|
|
+ ],
|
|
|
},
|
|
|
- image_content_base64: '',
|
|
|
+ VerificationCodeShow: false,
|
|
|
+ time: 60,
|
|
|
+ showUseragreement: false,
|
|
|
+ isAgree: true,
|
|
|
+ institutionList: [],
|
|
|
+ parsswordType: 'password',
|
|
|
+ twoPasswordType: 'password',
|
|
|
+ EmailError: null, //邮箱是否正确
|
|
|
+ passwordError: false,
|
|
|
+ passwordErrorTwo: false,
|
|
|
+ isLogin: false,
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
- this.updateVerificationCode();
|
|
|
- this.getLogo();
|
|
|
+ this.getinstitutionList();
|
|
|
},
|
|
|
methods: {
|
|
|
- updateVerificationCode() {
|
|
|
- GetVerificationCodeImage().then(({ image_id, image_content_base64: image }) => {
|
|
|
- this.form.verification_code_image_id = image_id;
|
|
|
- this.image_content_base64 = image;
|
|
|
- });
|
|
|
+ // 去除空格
|
|
|
+ trimInput(key) {
|
|
|
+ this.form[key] = this.form[key].trim();
|
|
|
},
|
|
|
-
|
|
|
- getLogo() {
|
|
|
- GetLogo().then((res) => {
|
|
|
- setConfig(res);
|
|
|
+ goLogin() {
|
|
|
+ this.$router.go(-1);
|
|
|
+ },
|
|
|
+ // 提交
|
|
|
+ submitForm(formName) {
|
|
|
+ let flag = false;
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ } else {
|
|
|
+ flag = true;
|
|
|
+ return false;
|
|
|
+ }
|
|
|
});
|
|
|
+ // 是否勾选了同意协议
|
|
|
+ if (!this.isAgree) {
|
|
|
+ // "阅读并同意用户协议"
|
|
|
+ this.$message.warning('阅读并同意用户协议');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.form.confirmPwd != this.form.password) {
|
|
|
+ //Key544
|
|
|
+ this.$message.warning('两次密码不一致');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (this.passwordError) {
|
|
|
+ this.$message.warning('密码格式不正确');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (flag) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.isLogin = true;
|
|
|
+ registerUser(this.form)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.$message.success('success');
|
|
|
+ this.isLogin = false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.isLogin = false;
|
|
|
+ });
|
|
|
},
|
|
|
-
|
|
|
- signIn() {
|
|
|
- this.$refs.loginForm.validate((valid) => {
|
|
|
- if (!valid) return false;
|
|
|
-
|
|
|
- let _form = { ...this.form, password: md5(this.form.password).toUpperCase() };
|
|
|
- this.$store
|
|
|
- .dispatch('user/login', _form)
|
|
|
- .then(() => {
|
|
|
- this.$router.push({ path: '/' });
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- this.updateVerificationCode();
|
|
|
- });
|
|
|
+ // 查看密码
|
|
|
+ lookParssowrd(number) {
|
|
|
+ if (number == 1) {
|
|
|
+ if (this.parsswordType == 'text') {
|
|
|
+ this.parsswordType = 'password';
|
|
|
+ } else {
|
|
|
+ this.parsswordType = 'text';
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.twoPasswordType == 'text') {
|
|
|
+ this.twoPasswordType = 'password';
|
|
|
+ } else {
|
|
|
+ this.twoPasswordType = 'text';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 验证密码
|
|
|
+ changeParssword() {
|
|
|
+ if (this.form.password) {
|
|
|
+ //let reg = /^(?=.*[0-9].*)(?=.*[A-Z].*)(?=.*[a-z].*).{8,12}$/;
|
|
|
+ let reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{8,12}$/;
|
|
|
+ let result = reg.test(this.form.password);
|
|
|
+ if (result) {
|
|
|
+ this.passwordError = false;
|
|
|
+ } else {
|
|
|
+ this.passwordError = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 验证第二次密码是否一样
|
|
|
+ Changetowpassword() {
|
|
|
+ if (this.form.confirmPwd) {
|
|
|
+ if (this.form.confirmPwd !== this.form.password) {
|
|
|
+ this.passwordErrorTwo = true;
|
|
|
+ return;
|
|
|
+ } else {
|
|
|
+ this.passwordErrorTwo = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 验证邮箱
|
|
|
+ ChangeEmail() {
|
|
|
+ let reg = /^[a-zA-Z0-9_\.-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/; //验证邮箱的正则
|
|
|
+ this.EmailError = reg.test(this.form.phone_or_email);
|
|
|
+ if (!this.EmailError) {
|
|
|
+ this.EmailError = false;
|
|
|
+ // 邮箱格式不正确
|
|
|
+ this.$message.error('邮箱格式不正确');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取验证码
|
|
|
+ getVerificationCode() {
|
|
|
+ if (!this.EmailError) {
|
|
|
+ this.EmailError = false;
|
|
|
+ this.$message.error('邮箱格式不正确');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let this_ = this;
|
|
|
+ let timer;
|
|
|
+ if (this_.form.phone_or_email) {
|
|
|
+ let data = {
|
|
|
+ verification_type: 'EMAIL',
|
|
|
+ phone_or_email: this_.form.phone_or_email,
|
|
|
+ };
|
|
|
+ sendVerificationCode(data).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.$message.success('验证码发送成功');
|
|
|
+ this_.VerificationCodeShow = true;
|
|
|
+ timer = setInterval(() => {
|
|
|
+ this_.time--;
|
|
|
+ if (this_.time == 0) {
|
|
|
+ this_.VerificationCodeShow = false;
|
|
|
+ clearInterval(timer);
|
|
|
+ timer = null;
|
|
|
+ this_.time = 60;
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ // 请先输入邮箱或手机号码"
|
|
|
+ this_.$message.warning('请先输入邮箱');
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取机构列表
|
|
|
+ getinstitutionList() {
|
|
|
+ let data = {
|
|
|
+ page_capacity: 10000,
|
|
|
+ cur_page: 1,
|
|
|
+ };
|
|
|
+ orgIndexList(data).then((res) => {
|
|
|
+ if (res.status === 1) {
|
|
|
+ this.institutionList = res.org_list;
|
|
|
+ }
|
|
|
});
|
|
|
},
|
|
|
+ viewUserAgreement() {
|
|
|
+ this.showUseragreement = true;
|
|
|
+ },
|
|
|
+ changeAgreement(flag) {
|
|
|
+ this.isAgree = flag;
|
|
|
+ this.showUseragreement = false;
|
|
|
+ },
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.login {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+.header {
|
|
|
+ position: sticky;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ display: flex;
|
|
|
+ column-gap: 24px;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: $header-h;
|
|
|
+ padding: 0 24px;
|
|
|
overflow: hidden;
|
|
|
- background: #2148c0 url('~@/assets/login/login-bg.png') no-repeat center center / cover;
|
|
|
+ background-color: #fff;
|
|
|
+ border-bottom: 1px solid #ebebeb;
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ flex: 1;
|
|
|
+ height: 48px;
|
|
|
+ margin-right: 36px;
|
|
|
+
|
|
|
+ &-image {
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .selectLoginOrRegistration {
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ // justify-content: space-evenly;
|
|
|
+ align-items: center;
|
|
|
+ height: 32px;
|
|
|
+ color: black;
|
|
|
+ cursor: pointer;
|
|
|
+ border: 1px solid black;
|
|
|
+ border-radius: 4px;
|
|
|
|
|
|
+ span {
|
|
|
+ min-width: 64px;
|
|
|
+ padding: 0 8px;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.register {
|
|
|
&-container {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- margin-top: -350px;
|
|
|
- margin-left: -200px;
|
|
|
+ height: calc(100vh - 144px);
|
|
|
+ padding: 40px;
|
|
|
+ margin: 40px 60px;
|
|
|
+ overflow: auto;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
|
|
|
.title {
|
|
|
- margin-bottom: 28px;
|
|
|
+ margin-bottom: 50px;
|
|
|
font-size: 24px;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
+ color: #f90;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- :deep .el-form {
|
|
|
- max-width: 400px;
|
|
|
- padding: 24px 32px;
|
|
|
- margin: 0 auto;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 16px;
|
|
|
-
|
|
|
- &-item {
|
|
|
- &__label {
|
|
|
- margin-bottom: 4px;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- color: #000;
|
|
|
-
|
|
|
- &::before {
|
|
|
- display: none;
|
|
|
- }
|
|
|
- }
|
|
|
+ hr {
|
|
|
+ width: 474px;
|
|
|
+ height: 1px;
|
|
|
+ margin: 0;
|
|
|
+ background: #d9d9d9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-input,
|
|
|
+ .el-select {
|
|
|
+ width: 334px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-form-item {
|
|
|
+ display: flex;
|
|
|
+ width: 1140px;
|
|
|
+
|
|
|
+ .lable {
|
|
|
+ display: flex;
|
|
|
+ width: 120px !important;
|
|
|
+ text-align: left;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ vertical-align: middle;
|
|
|
}
|
|
|
|
|
|
- .el-input {
|
|
|
- &__inner {
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- background-color: #fff;
|
|
|
- }
|
|
|
+ span {
|
|
|
+ margin: 0 10px;
|
|
|
+ line-height: 24px;
|
|
|
}
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .verification-code {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ .ruleForm .el-form-item::after {
|
|
|
+ left: -8px;
|
|
|
+ }
|
|
|
|
|
|
- label {
|
|
|
- text-align: left;
|
|
|
- }
|
|
|
+ .getVerification {
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 116px;
|
|
|
+ height: 32px;
|
|
|
+ padding: 0;
|
|
|
+ margin-left: 16px;
|
|
|
+ line-height: 32px;
|
|
|
+ color: white;
|
|
|
+ cursor: pointer;
|
|
|
+ background: #f90;
|
|
|
+ border: 1px solid #f90;
|
|
|
+ border-radius: 4px;
|
|
|
|
|
|
- .el-input {
|
|
|
- width: calc(100% - 112px);
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
+ &.marginRight {
|
|
|
+ margin-right: 16px;
|
|
|
+ margin-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .el-image {
|
|
|
- height: 38px;
|
|
|
- vertical-align: bottom;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
+ .waitTime {
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 116px;
|
|
|
+ height: 32px;
|
|
|
+ margin-left: 16px;
|
|
|
+ color: black;
|
|
|
+ cursor: pointer;
|
|
|
+ background: #f0f0f0;
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
|
|
|
- .submit {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+ .rightimg {
|
|
|
+ position: absolute;
|
|
|
+ top: 6px;
|
|
|
+ right: 10px;
|
|
|
+ width: 20px;
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
- .protocol {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- font-size: 12px;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
+ &.posLeft {
|
|
|
+ right: auto;
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .psswordHint {
|
|
|
+ width: 334px;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ margin-top: 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: #000;
|
|
|
+ opacity: 0.3;
|
|
|
+ }
|
|
|
+
|
|
|
+ .textRed {
|
|
|
+ width: 334px;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ margin-top: 5px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 20px;
|
|
|
+ color: red;
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit {
|
|
|
+ width: 337px;
|
|
|
+ height: 40px;
|
|
|
+ margin-left: 55px;
|
|
|
+ color: white;
|
|
|
+ cursor: pointer;
|
|
|
+ background: #f90;
|
|
|
+ border: none;
|
|
|
+ border-radius: 4px;
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .agreementAndRemeberMeAndForgetparssword {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ width: 474px;
|
|
|
|
|
|
- .el-form-item--small.el-form-item:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
+ > div {
|
|
|
+ position: relative;
|
|
|
+ width: 334px;
|
|
|
+ margin: 20px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .agreement {
|
|
|
+ span {
|
|
|
+ color: #f90;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .not-tips {
|
|
|
- margin-top: 20px;
|
|
|
- font-size: 12px;
|
|
|
- color: #fff;
|
|
|
- text-align: center;
|
|
|
+ .remeberMeAndForgetparssword {
|
|
|
+ p {
|
|
|
+ margin: 0;
|
|
|
+ color: #f90;
|
|
|
+ text-align: right;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .Noafter::after {
|
|
|
+ content: '';
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@keyframes rotated {
|
|
|
+ 0% {
|
|
|
+ transform: rotateZ(0deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ 100% {
|
|
|
+ transform: rotateZ(360deg);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.el-form-item__content {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.error-notice {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -27px;
|
|
|
+ left: 0;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ccc;
|
|
|
}
|
|
|
</style>
|
natasha
