|
|
|
|
@ -1,447 +1,465 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="center">
|
|
|
|
|
<div class="formcontainer">
|
|
|
|
|
<!-- <ul class="loginchange centerall">
|
|
|
|
|
<div class="center">
|
|
|
|
|
<div class="formcontainer">
|
|
|
|
|
<!-- <ul class="loginchange centerall">
|
|
|
|
|
<router-link to="/login"><li class="goback"><返回</li></router-link>
|
|
|
|
|
<li class="loginactive">找回密码</li>
|
|
|
|
|
</ul>-->
|
|
|
|
|
<div class="formbox">
|
|
|
|
|
<template>
|
|
|
|
|
<a-form id="components-form-demo-normal-login" hideRequiredMark :form="form1" class="login-form" @submit="phonehandleSubmit" layout="horizontal" :wrapperCol="{ span: 14 }" :labelCol="{ span: 4 }">
|
|
|
|
|
<a-form-item label="手机号" style="text-align: left;">
|
|
|
|
|
<a-input v-decorator="[
|
|
|
|
|
'tel',
|
|
|
|
|
{
|
|
|
|
|
rules: [
|
|
|
|
|
{ required: true, message: '请输入手机号' },
|
|
|
|
|
{
|
|
|
|
|
pattern: /^1[3456789]\d{9}$/,
|
|
|
|
|
message: '请输入正确手机号',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
validateTrigger: 'submit',
|
|
|
|
|
},
|
|
|
|
|
]" autocomplete="off" :maxLength="11" placeholder="请输入手机号">
|
|
|
|
|
<!-- <i slot="prefix" class="icon-shouji iconfont" style="font-size: 24px" /> -->
|
|
|
|
|
</a-input>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="验证码" style="text-align: left">
|
|
|
|
|
<div class="g_flex_row_start">
|
|
|
|
|
<div>
|
|
|
|
|
<a-input style="width:240px" v-decorator="[
|
|
|
|
|
'code',
|
|
|
|
|
{
|
|
|
|
|
rules: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入验证码',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
validateTrigger: 'submit',
|
|
|
|
|
},
|
|
|
|
|
]" type="text" placeholder="请输入短信验证码">
|
|
|
|
|
<!-- <i slot="prefix" class="icon-duanxinyanzheng iconfont" /> -->
|
|
|
|
|
<!-- <span class="getrulecode" slot="suffix">
|
|
|
|
|
<div class="formbox">
|
|
|
|
|
<template>
|
|
|
|
|
<a-form id="components-form-demo-normal-login" hideRequiredMark :form="form1" class="login-form" @submit="phonehandleSubmit" layout="horizontal" :wrapperCol="{ span: 14 }" :labelCol="{ span: 4 }">
|
|
|
|
|
<a-form-item label="手机号" style="text-align: left">
|
|
|
|
|
<a-input
|
|
|
|
|
v-decorator="[
|
|
|
|
|
'tel',
|
|
|
|
|
{
|
|
|
|
|
rules: [
|
|
|
|
|
{ required: true, message: '请输入手机号' },
|
|
|
|
|
{
|
|
|
|
|
pattern: /^1[3456789]\d{9}$/,
|
|
|
|
|
message: '请输入正确手机号',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
validateTrigger: 'submit',
|
|
|
|
|
},
|
|
|
|
|
]"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
:maxLength="11"
|
|
|
|
|
placeholder="请输入手机号"
|
|
|
|
|
>
|
|
|
|
|
<!-- <i slot="prefix" class="icon-shouji iconfont" style="font-size: 24px" /> -->
|
|
|
|
|
</a-input>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="验证码" style="text-align: left">
|
|
|
|
|
<div class="g_flex_row_start">
|
|
|
|
|
<div>
|
|
|
|
|
<a-input
|
|
|
|
|
style="width: 240px"
|
|
|
|
|
v-decorator="[
|
|
|
|
|
'code',
|
|
|
|
|
{
|
|
|
|
|
rules: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入验证码',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
validateTrigger: 'submit',
|
|
|
|
|
},
|
|
|
|
|
]"
|
|
|
|
|
type="text"
|
|
|
|
|
placeholder="请输入短信验证码"
|
|
|
|
|
>
|
|
|
|
|
<!-- <i slot="prefix" class="icon-duanxinyanzheng iconfont" /> -->
|
|
|
|
|
<!-- <span class="getrulecode" slot="suffix">
|
|
|
|
|
<span @click="getPhoneCode" data-mark="getcode" v-if="timedata.isfinish">获取验证码</span>
|
|
|
|
|
<timmer :timedata="timedata" v-if="!timedata.isfinish" />
|
|
|
|
|
</span> -->
|
|
|
|
|
</a-input>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="g_ml_12">
|
|
|
|
|
<!-- <a-button>
|
|
|
|
|
</a-input>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="g_ml_12">
|
|
|
|
|
<!-- <a-button>
|
|
|
|
|
<span @click="getPhoneCode" data-mark="getcode" v-if="timedata.isfinish">获取验证码</span>
|
|
|
|
|
<timmer :timedata="timedata" v-if="!timedata.isfinish" />
|
|
|
|
|
</a-button> -->
|
|
|
|
|
<div class="getrulecode sms-btn" style="line-height: 32px;">
|
|
|
|
|
<span @click="getPhoneCode" data-mark="getcode" v-if="timedata.isfinish">获取验证码</span>
|
|
|
|
|
<timmer :timedata="timedata" v-if="!timedata.isfinish" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="新密码" style="text-align: left">
|
|
|
|
|
<a-input @input="getpassword" v-decorator="[
|
|
|
|
|
'password',
|
|
|
|
|
{
|
|
|
|
|
rules: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入新密码',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
validateTrigger: 'submit',
|
|
|
|
|
},
|
|
|
|
|
]" type="password" placeholder="请输入密码">
|
|
|
|
|
<!-- <i slot="prefix" class="iconfont icon-mima" /> -->
|
|
|
|
|
</a-input>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="确认密码" style="text-align: left">
|
|
|
|
|
<a-input v-decorator="[
|
|
|
|
|
'newpassword',
|
|
|
|
|
{
|
|
|
|
|
rules: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请再次输入新密码',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
validator: replacepassword,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
validateTrigger: 'submit',
|
|
|
|
|
validateFirst: true,
|
|
|
|
|
},
|
|
|
|
|
]" type="password" placeholder="请再次输入密码">
|
|
|
|
|
<!-- <i slot="prefix" class="iconfont icon-mima" /> -->
|
|
|
|
|
</a-input>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label class="submit" style="height: 40px;position: relative;margin-bottom: 0;">
|
|
|
|
|
<div class="state-box">
|
|
|
|
|
<a-button type="primary" class="cancel login-form-button" @click="cancel">取消</a-button>
|
|
|
|
|
<a-button
|
|
|
|
|
style="border: 1px solid #1890ff;"
|
|
|
|
|
type="primary" html-type="submit" :loading="btnLoading" class="login-form-button">确定</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-form>
|
|
|
|
|
<!-- <div class="register">
|
|
|
|
|
<div class="getrulecode sms-btn" style="line-height: 32px">
|
|
|
|
|
<span @click="getPhoneCode" data-mark="getcode" v-if="timedata.isfinish">获取验证码</span>
|
|
|
|
|
<timmer :timedata="timedata" v-if="!timedata.isfinish" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="新密码" style="text-align: left">
|
|
|
|
|
<a-input
|
|
|
|
|
@input="getpassword"
|
|
|
|
|
v-decorator="[
|
|
|
|
|
'password',
|
|
|
|
|
{
|
|
|
|
|
rules: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请输入新密码',
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
validateTrigger: 'submit',
|
|
|
|
|
},
|
|
|
|
|
]"
|
|
|
|
|
type="password"
|
|
|
|
|
placeholder="请输入密码"
|
|
|
|
|
>
|
|
|
|
|
<!-- <i slot="prefix" class="iconfont icon-mima" /> -->
|
|
|
|
|
</a-input>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label="确认密码" style="text-align: left">
|
|
|
|
|
<a-input
|
|
|
|
|
v-decorator="[
|
|
|
|
|
'newpassword',
|
|
|
|
|
{
|
|
|
|
|
rules: [
|
|
|
|
|
{
|
|
|
|
|
required: true,
|
|
|
|
|
message: '请再次输入新密码',
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
validator: replacepassword,
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
validateTrigger: 'submit',
|
|
|
|
|
validateFirst: true,
|
|
|
|
|
},
|
|
|
|
|
]"
|
|
|
|
|
type="password"
|
|
|
|
|
placeholder="请再次输入密码"
|
|
|
|
|
>
|
|
|
|
|
<!-- <i slot="prefix" class="iconfont icon-mima" /> -->
|
|
|
|
|
</a-input>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
<a-form-item label class="submit" style="height: 40px; position: relative; margin-bottom: 0">
|
|
|
|
|
<div class="state-box">
|
|
|
|
|
<a-button type="primary" class="cancel login-form-button" @click="cancel">取消</a-button>
|
|
|
|
|
<a-button style="border: 1px solid #1890ff" type="primary" html-type="submit" :loading="btnLoading" class="login-form-button">确定</a-button>
|
|
|
|
|
</div>
|
|
|
|
|
</a-form-item>
|
|
|
|
|
</a-form>
|
|
|
|
|
<!-- <div class="register">
|
|
|
|
|
<router-link to="/register">还没有账号，立即注册</router-link>
|
|
|
|
|
</div>-->
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { getPhoneCodeApi, updatePswApi } from '../../api/login'
|
|
|
|
|
import timmer from './components/countback.vue'
|
|
|
|
|
import { getPhoneCodeApi, updatePswApi } from "../../api/login";
|
|
|
|
|
import timmer from "./components/countback.vue";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
inject: ['reload'],
|
|
|
|
|
// 组件名称
|
|
|
|
|
name: 'updatepsw',
|
|
|
|
|
// 局部注册的组件
|
|
|
|
|
components: {
|
|
|
|
|
timmer,
|
|
|
|
|
},
|
|
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
|
|
props: {
|
|
|
|
|
loginShow: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
// 组件状态值
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
loginway: 1,
|
|
|
|
|
ischecked: false,
|
|
|
|
|
setpassword: '', // 重置密码的密码字段
|
|
|
|
|
form1: this.$form.createForm(this),
|
|
|
|
|
timedata: {
|
|
|
|
|
isfinish: true,
|
|
|
|
|
deadline: 60,
|
|
|
|
|
timmer: null,
|
|
|
|
|
},
|
|
|
|
|
btnLoading: false,
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
// 计算属性
|
|
|
|
|
computed: {},
|
|
|
|
|
// 侦听器
|
|
|
|
|
watch: {},
|
|
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
|
|
/**
|
|
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
|
|
*/
|
|
|
|
|
created() {},
|
|
|
|
|
/**
|
|
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
|
|
*/
|
|
|
|
|
mounted() {},
|
|
|
|
|
// 组件方法
|
|
|
|
|
methods: {
|
|
|
|
|
cancel() {
|
|
|
|
|
this.$emit('update:loginShow', false)
|
|
|
|
|
},
|
|
|
|
|
phonehandleSubmit(e) {
|
|
|
|
|
e.preventDefault()
|
|
|
|
|
let params = new FormData()
|
|
|
|
|
this.form1.validateFields(async (err, values) => {
|
|
|
|
|
console.log(err)
|
|
|
|
|
console.log(values)
|
|
|
|
|
if (!err) {
|
|
|
|
|
this.btnLoading = true
|
|
|
|
|
params.code = values.code
|
|
|
|
|
params.newpassword = values.newpassword
|
|
|
|
|
params.password = values.password
|
|
|
|
|
params.tel = values.tel
|
|
|
|
|
console.log(params)
|
|
|
|
|
try {
|
|
|
|
|
const { data } = await updatePswApi(params)
|
|
|
|
|
console.log(data)
|
|
|
|
|
if (data.status == 200) {
|
|
|
|
|
this.$message.success('密码修改成功')
|
|
|
|
|
this.$emit('update:loginShow', false)
|
|
|
|
|
this.$router.push('/login')
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.warning(data.msg)
|
|
|
|
|
}
|
|
|
|
|
inject: ["reload","logout"],
|
|
|
|
|
// 组件名称
|
|
|
|
|
name: "updatepsw",
|
|
|
|
|
// 局部注册的组件
|
|
|
|
|
components: {
|
|
|
|
|
timmer,
|
|
|
|
|
},
|
|
|
|
|
// 组件参数 接收来自父组件的数据
|
|
|
|
|
props: {
|
|
|
|
|
loginShow: {
|
|
|
|
|
type: Boolean,
|
|
|
|
|
default: false,
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
// 组件状态值
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
loginway: 1,
|
|
|
|
|
ischecked: false,
|
|
|
|
|
setpassword: "", // 重置密码的密码字段
|
|
|
|
|
form1: this.$form.createForm(this),
|
|
|
|
|
timedata: {
|
|
|
|
|
isfinish: true,
|
|
|
|
|
deadline: 60,
|
|
|
|
|
timmer: null,
|
|
|
|
|
},
|
|
|
|
|
btnLoading: false,
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
// 计算属性
|
|
|
|
|
computed: {},
|
|
|
|
|
// 侦听器
|
|
|
|
|
watch: {},
|
|
|
|
|
// 生命周期钩子 注：没用到的钩子请自行删除
|
|
|
|
|
/**
|
|
|
|
|
* 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
|
|
|
|
|
*/
|
|
|
|
|
created() {},
|
|
|
|
|
/**
|
|
|
|
|
* el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
|
|
|
|
|
* 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
|
|
|
|
|
*/
|
|
|
|
|
mounted() {},
|
|
|
|
|
// 组件方法
|
|
|
|
|
methods: {
|
|
|
|
|
cancel() {
|
|
|
|
|
this.$emit("update:loginShow", false);
|
|
|
|
|
},
|
|
|
|
|
phonehandleSubmit(e) {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
let params = new FormData();
|
|
|
|
|
this.form1.validateFields(async (err, values) => {
|
|
|
|
|
console.log(err);
|
|
|
|
|
console.log(values);
|
|
|
|
|
if (!err) {
|
|
|
|
|
this.btnLoading = true;
|
|
|
|
|
params.code = values.code;
|
|
|
|
|
params.newpassword = values.newpassword;
|
|
|
|
|
params.password = values.password;
|
|
|
|
|
params.tel = values.tel;
|
|
|
|
|
console.log(params);
|
|
|
|
|
try {
|
|
|
|
|
const { data } = await updatePswApi(params);
|
|
|
|
|
console.log(data);
|
|
|
|
|
if (data.status == 200) {
|
|
|
|
|
this.$message.success("密码修改成功");
|
|
|
|
|
this.$emit("update:loginShow", false);
|
|
|
|
|
this.logout();
|
|
|
|
|
this.$router.push("/login");
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.warning(data.msg);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// localStorage.setItem("LOGIN_DATA", JSON.stringify(data.data));
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.btnLoading = false
|
|
|
|
|
// localStorage.setItem("LOGIN_DATA", JSON.stringify(data.data));
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.btnLoading = false;
|
|
|
|
|
|
|
|
|
|
// this.reload()
|
|
|
|
|
}, 2000)
|
|
|
|
|
} catch (err) {
|
|
|
|
|
this.btnLoading = false
|
|
|
|
|
console.log(err)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
async getPhoneCode() {
|
|
|
|
|
const that = this
|
|
|
|
|
// this.reload()
|
|
|
|
|
}, 2000);
|
|
|
|
|
} catch (err) {
|
|
|
|
|
this.btnLoading = false;
|
|
|
|
|
console.log(err);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
async getPhoneCode() {
|
|
|
|
|
const that = this;
|
|
|
|
|
|
|
|
|
|
this.form1.validateFields(['tel'], async (err, values) => {
|
|
|
|
|
console.log(values)
|
|
|
|
|
this.form1.validateFields(["tel"], async (err, values) => {
|
|
|
|
|
console.log(values);
|
|
|
|
|
|
|
|
|
|
if (!err) {
|
|
|
|
|
that.timedata.isfinish = false
|
|
|
|
|
if (!err) {
|
|
|
|
|
that.timedata.isfinish = false;
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const { data } = await getPhoneCodeApi({ tel: values.tel })
|
|
|
|
|
console.log(data)
|
|
|
|
|
if (data.status !== 200) {
|
|
|
|
|
this.$message.warning(data.msg)
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log(error)
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
console.log(err)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
checked() {
|
|
|
|
|
console.log(this.ischecked)
|
|
|
|
|
},
|
|
|
|
|
getpassword(e) {
|
|
|
|
|
this.setpassword = e.target.value
|
|
|
|
|
console.log(e)
|
|
|
|
|
},
|
|
|
|
|
// 检验密码不一致的回调
|
|
|
|
|
replacepassword(rule, value, callback) {
|
|
|
|
|
console.log(rule)
|
|
|
|
|
console.log(value)
|
|
|
|
|
if (this.setpassword !== value) {
|
|
|
|
|
callback('两次密码不一致')
|
|
|
|
|
}
|
|
|
|
|
callback()
|
|
|
|
|
try {
|
|
|
|
|
const { data } = await getPhoneCodeApi({ tel: values.tel });
|
|
|
|
|
console.log(data);
|
|
|
|
|
if (data.status !== 200) {
|
|
|
|
|
this.$message.warning(data.msg);
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.log(error);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
console.log(err);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
checked() {
|
|
|
|
|
console.log(this.ischecked);
|
|
|
|
|
},
|
|
|
|
|
getpassword(e) {
|
|
|
|
|
this.setpassword = e.target.value;
|
|
|
|
|
console.log(e);
|
|
|
|
|
},
|
|
|
|
|
// 检验密码不一致的回调
|
|
|
|
|
replacepassword(rule, value, callback) {
|
|
|
|
|
console.log(rule);
|
|
|
|
|
console.log(value);
|
|
|
|
|
if (this.setpassword !== value) {
|
|
|
|
|
callback("两次密码不一致");
|
|
|
|
|
}
|
|
|
|
|
callback();
|
|
|
|
|
|
|
|
|
|
// console.log(callback);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
// console.log(callback);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="less">
|
|
|
|
|
.submit {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
.center {
|
|
|
|
|
width: unset !important;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
// margin: 0 auto;
|
|
|
|
|
/deep/ .login-form {
|
|
|
|
|
background-color: #fff !important;
|
|
|
|
|
}
|
|
|
|
|
.centerall {
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
.loginchange {
|
|
|
|
|
display: flex;
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 230px;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
margin-top: 32px;
|
|
|
|
|
.loginactive {
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
border-bottom: 1px solid #4d575e;
|
|
|
|
|
}
|
|
|
|
|
a {
|
|
|
|
|
li {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
&:hover {
|
|
|
|
|
color: #ff6a00cc;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
li {
|
|
|
|
|
padding: 0 0 4px 0;
|
|
|
|
|
margin-bottom: 24px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
color: #cccccc;
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.formbox {
|
|
|
|
|
width: 444px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
.ant-form-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
// align-items: center;
|
|
|
|
|
}
|
|
|
|
|
/deep/ .ant-form-explain {
|
|
|
|
|
// margin-top: -2px;
|
|
|
|
|
// line-height: 20px;
|
|
|
|
|
min-height: 20px !important;
|
|
|
|
|
}
|
|
|
|
|
/deep/.ant-form-item-control {
|
|
|
|
|
width: 360px !important;
|
|
|
|
|
.ant-input-affix-wrapper {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
width: unset !important;
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
// margin: 0 auto;
|
|
|
|
|
/deep/ .login-form {
|
|
|
|
|
background-color: #fff !important;
|
|
|
|
|
}
|
|
|
|
|
.centerall {
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
}
|
|
|
|
|
.loginchange {
|
|
|
|
|
display: flex;
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 230px;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
margin-top: 32px;
|
|
|
|
|
.loginactive {
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
border-bottom: 1px solid #4d575e;
|
|
|
|
|
}
|
|
|
|
|
a {
|
|
|
|
|
li {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: 0;
|
|
|
|
|
top: 0;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-bottom: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
&:hover {
|
|
|
|
|
color: #ff6a00cc;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
li {
|
|
|
|
|
padding: 0 0 4px 0;
|
|
|
|
|
margin-bottom: 24px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
color: #cccccc;
|
|
|
|
|
line-height: 22px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.formbox {
|
|
|
|
|
width: 444px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
.ant-form-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
// align-items: center;
|
|
|
|
|
}
|
|
|
|
|
/deep/ .ant-form-explain {
|
|
|
|
|
// margin-top: -2px;
|
|
|
|
|
// line-height: 20px;
|
|
|
|
|
min-height: 20px !important;
|
|
|
|
|
}
|
|
|
|
|
/deep/.ant-form-item-control {
|
|
|
|
|
width: 360px !important;
|
|
|
|
|
.ant-input-affix-wrapper {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex: 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/deep/.ant-input-affix-wrapper {
|
|
|
|
|
i {
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
// margin: 0 8px 0 4px;
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
}
|
|
|
|
|
.ant-input {
|
|
|
|
|
height: 32px;
|
|
|
|
|
// background-color: #f6f6f6;
|
|
|
|
|
// width: 430px;
|
|
|
|
|
text-indent: 15px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
// border: none;
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
border: 1px solid #dddddd;
|
|
|
|
|
&:hover {
|
|
|
|
|
border-color: #1890ff;
|
|
|
|
|
}
|
|
|
|
|
&:focus {
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
&::placeholder {
|
|
|
|
|
opacity: 0.4;
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-indent: 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.ant-input {
|
|
|
|
|
height: 32px;
|
|
|
|
|
// background-color: #f6f6f6;
|
|
|
|
|
// width: 430px;
|
|
|
|
|
text-indent: 15px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
// border: none;
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
border: 1px solid #dddddd;
|
|
|
|
|
&:hover {
|
|
|
|
|
border-color: #1890ff;
|
|
|
|
|
}
|
|
|
|
|
&:focus {
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
&::placeholder {
|
|
|
|
|
opacity: 0.4;
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-indent: 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
/deep/.ant-input-affix-wrapper {
|
|
|
|
|
i {
|
|
|
|
|
font-size: 26px;
|
|
|
|
|
// margin: 0 8px 0 4px;
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
}
|
|
|
|
|
.ant-input {
|
|
|
|
|
height: 32px;
|
|
|
|
|
// background-color: #f6f6f6;
|
|
|
|
|
// width: 430px;
|
|
|
|
|
text-indent: 15px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
// border: none;
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
border: 1px solid #dddddd;
|
|
|
|
|
&:hover {
|
|
|
|
|
border-color: #1890ff;
|
|
|
|
|
}
|
|
|
|
|
&:focus {
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
&::placeholder {
|
|
|
|
|
opacity: 0.4;
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-indent: 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.ant-input {
|
|
|
|
|
height: 32px;
|
|
|
|
|
// background-color: #f6f6f6;
|
|
|
|
|
// width: 430px;
|
|
|
|
|
text-indent: 15px;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
// border: none;
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
border: 1px solid #dddddd;
|
|
|
|
|
&:hover {
|
|
|
|
|
border-color: #1890ff;
|
|
|
|
|
}
|
|
|
|
|
&:focus {
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
&::placeholder {
|
|
|
|
|
opacity: 0.4;
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
text-indent: 15px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.register {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
span {
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
i {
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
a {
|
|
|
|
|
color: #353649;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.register {
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
span {
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
i {
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
margin-right: 10px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
a {
|
|
|
|
|
color: #353649;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.getrulecode {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
width: 67px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border-left: 1px #cccccc solid;
|
|
|
|
|
line-height: 12px;
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
span[data-mark='getcode'] {
|
|
|
|
|
padding: 0 0 0 5px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.cancel.login-form-button {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
color: #1890ff;
|
|
|
|
|
border: 1px solid #1890ff;
|
|
|
|
|
margin-right: 16px;
|
|
|
|
|
}
|
|
|
|
|
.login-form-button {
|
|
|
|
|
width: 60px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
border-radius: 0px;
|
|
|
|
|
background-color: #1890ff;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
border: none;
|
|
|
|
|
color: white;
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
}
|
|
|
|
|
.login-form-button span {
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
}
|
|
|
|
|
.getrulecode {
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
width: 67px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
border-left: 1px #cccccc solid;
|
|
|
|
|
line-height: 12px;
|
|
|
|
|
color: #4d575e;
|
|
|
|
|
span[data-mark="getcode"] {
|
|
|
|
|
padding: 0 0 0 5px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.cancel.login-form-button {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
color: #1890ff;
|
|
|
|
|
border: 1px solid #1890ff;
|
|
|
|
|
margin-right: 16px;
|
|
|
|
|
}
|
|
|
|
|
.login-form-button {
|
|
|
|
|
width: 60px;
|
|
|
|
|
height: 32px;
|
|
|
|
|
margin-top: 16px;
|
|
|
|
|
border-radius: 0px;
|
|
|
|
|
background-color: #1890ff;
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
border: none;
|
|
|
|
|
color: white;
|
|
|
|
|
padding: 0 !important;
|
|
|
|
|
line-height: 32px;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
}
|
|
|
|
|
.login-form-button span {
|
|
|
|
|
letter-spacing: 1px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
.state-box{
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: -37px;
|
|
|
|
|
width: 430px;
|
|
|
|
|
top: -15px;
|
|
|
|
|
.state-box {
|
|
|
|
|
position: absolute;
|
|
|
|
|
left: -37px;
|
|
|
|
|
width: 430px;
|
|
|
|
|
top: -15px;
|
|
|
|
|
}
|
|
|
|
|
.sms-btn{
|
|
|
|
|
width: 102px !important;
|
|
|
|
|
height: 32px !important;
|
|
|
|
|
border: 1px solid #1890ff !important;
|
|
|
|
|
color: #1677ff !important;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
border-color: #1677ff;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
font-size: 14px !important;
|
|
|
|
|
// padding: 7px 12.5px;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
position: relative;
|
|
|
|
|
top: 4px;
|
|
|
|
|
.sms-btn {
|
|
|
|
|
width: 102px !important;
|
|
|
|
|
height: 32px !important;
|
|
|
|
|
border: 1px solid #1890ff !important;
|
|
|
|
|
color: #1677ff !important;
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
border-color: #1677ff;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
font-size: 14px !important;
|
|
|
|
|
// padding: 7px 12.5px;
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
position: relative;
|
|
|
|
|
top: 4px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
