863 lines
24 KiB
Vue
863 lines
24 KiB
Vue
<template>
|
||
<div class="login">
|
||
<div class="logoTitle" style="margin-left: 50px;margin-top: 50px;">
|
||
<img src="../../assets/loginImg/yxt-logo.png" style="width: 250px;height:50px; margin-right: 10px;" />
|
||
</div>
|
||
|
||
<div class="main">
|
||
|
||
<img src="../../assets/loginImg/login_left.png" style="width:50%;height:100%; " />
|
||
|
||
<div class="main-right" v-show="register==0">
|
||
|
||
<span class="main-right-title">欢迎登录商享通OMS</span>
|
||
|
||
|
||
<div class="main-right-table">
|
||
|
||
<div :class="tableIndex == 1 ? 'main-right-table-text1' : 'main-right-table-text3'" @click="tableClick(1)">
|
||
密码登录</div>
|
||
<div :class="tableIndex == 2 ? 'main-right-table-text2' : 'main-right-table-text4'" @click="tableClick(2)">
|
||
验证码登录</div>
|
||
|
||
</div>
|
||
|
||
<div class="main-right-table-password" v-show="tableIndex==1">
|
||
|
||
<el-input class="input" placeholder="请输入手机号/邮箱" clearable v-model="loginForm.userName" />
|
||
<el-input class="input" placeholder="请输入密码" type="password" show-password v-model="loginForm.password" />
|
||
|
||
</div>
|
||
|
||
<div class="main-right-table-code" v-show="tableIndex==2">
|
||
<el-input class="input" placeholder="请输入手机号/邮箱" clearable v-model="loginForm.userName" />
|
||
<div style="display: flex;flex-direction: row;align-items: center;width: 100%;">
|
||
<el-input class="input" style="flex: 1; margin-right: 10px;" maxlength="6" placeholder="请输入验证码"
|
||
v-model="loginForm.verifyCode" />
|
||
<span :class="sendCodeType ? 'sendCode1' : 'sendCode2'" @click="sendCode">{{sendCodeText}}</span>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<el-button type="primary" size="small" style="width: 65%;margin-top: 30px; font-size: 25px;line-height: 40px;"
|
||
@click="login">登录</el-button>
|
||
|
||
<div class="main-right-bom">
|
||
|
||
<el-checkbox class="main-right-bom-left" v-model="checkbox">7天内免登录</el-checkbox>
|
||
|
||
<div class="main-right-bom-right">
|
||
|
||
<span @click="forgetClick">忘记密码</span>
|
||
<div style="margin-left: 8px;margin-right: 8px;width: 1px; height: 18px;background: #999;"></div>
|
||
<span @click="registerClick">去注册</span>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
<div class="main-right" v-show="register==1">
|
||
|
||
<div v-show="registerStep==1" class="registerStep1">
|
||
<span class="main-right-title2">欢迎注册商享通OMS</span>
|
||
|
||
|
||
<span style="width: 100%; margin-top: 15px;">手机号码</span>
|
||
|
||
<el-input class="input" style="flex: 1; margin-right: 10px;margin-top: 5px;" maxlength="11"
|
||
placeholder="请输入手机号码" v-model="registerInfo.mobile" />
|
||
|
||
<span style="width: 100%;margin-top: 15px;">密码</span>
|
||
|
||
<el-input class="input" style="flex: 1; margin-right: 10px;margin-top: 5px;" maxlength="6" placeholder="请输入密码"
|
||
v-model="registerInfo.password" show-password />
|
||
|
||
<span style="width: 100%;margin-top: 15px;">验证码</span>
|
||
<div
|
||
style="display: flex;flex-direction: row;align-items: center;width: 100%; margin-top: 5px;margin-left: -10px;">
|
||
<el-input class="input" style="flex: 1; margin-right: 10px;" maxlength="6" placeholder="请输入验证码"
|
||
v-model="registerInfo.code" />
|
||
<span :class="sendCodeType2 ? 'sendCode1' : 'sendCode2'" @click="sendCode2">{{sendCodeText2}}</span>
|
||
</div>
|
||
|
||
<div style="display: flex;flex-direction: row;align-items: center;width: 100%; margin-top: 5px;"
|
||
@click="goLogin">
|
||
<span>已有账号？</span>
|
||
<span style="color: #5084D2;">登录</span>
|
||
</div>
|
||
|
||
|
||
<el-button type="primary" size="small"
|
||
style="width: 100%;margin-top: 30px; font-size: 25px;line-height: 40px;"
|
||
@click="registerStep1()">注册</el-button>
|
||
|
||
<div style="display: flex;flex-direction: row;align-items: center;width: 100%; margin-top: 10px;">
|
||
<el-checkbox style="margin-right: 5px;" v-model="check"></el-checkbox>
|
||
<span style="font-size: 12px;">我已阅读并同意</span>
|
||
<span style="font-size: 12px;">《宇信通服务协议》</span>
|
||
<span style="font-size: 12px;">与</span>
|
||
<span style="font-size: 12px;">《隐私协议》</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-show="registerStep==2" class="registerStep2">
|
||
|
||
<span class="main-right-title">请选择公司进入OMS</span>
|
||
|
||
<div style="height: 300px;width: 100%; margin-top: 15px;overflow: auto;
|
||
display: flex;flex-direction: column;">
|
||
|
||
<div v-for="(item,index) in companyList" :key="index" @click="itemClick(item)"
|
||
style="display: flex;flex-direction: column;width: 100%;">
|
||
<div style="display: flex;flex-direction: row;align-items: center;
|
||
background: #EDF1F7; border-radius: 8px;width: 100%;margin-bottom: 20px;
|
||
height: 50px;">
|
||
<img src="../../assets/images/company_icon.png" style="width: 25px; height: 25px;
|
||
margin-left: 10px;margin-right: 10px;" />
|
||
<span style="flex: 1;margin-right: 10px;">{{item.orgName}}</span>
|
||
<img v-show="item.type=='1'" src="../../assets/images/overdue.png" style=" height: 100%;" />
|
||
<img v-show="item.type=='2'" src="../../assets/images/experience.png" style=" height: 100%;" />
|
||
<img v-show="item.type=='3'" src="../../assets/images/formal.png" style=" height: 100%;" />
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<el-button type="primary" size="small"
|
||
style="width: 100%;margin-top: 30px; font-size: 25px;line-height: 40px;"
|
||
@click="registerStep2()">新建企业信息</el-button>
|
||
|
||
</div>
|
||
|
||
<div v-show="registerStep==3" class="registerStep3">
|
||
|
||
<span class="main-right-title2">欢迎注册商享通OMS</span>
|
||
|
||
<span style="width: 100%; font-size: 16px;color: #000; margin-top: 40px;">请填写您的企业信息</span>
|
||
|
||
<div style="display: flex;flex-direction: row;align-items: center; margin-top: 15px;width: 100%; ">
|
||
<span>企业名称：</span>
|
||
<el-input class="input" style="flex: 1; " placeholder="请输入公司名称" v-model="registerInfo.companyName" />
|
||
</div>
|
||
|
||
<div style="display: flex;flex-direction: row;align-items: center;margin-top: 15px;width: 100%; ">
|
||
<span>联系人员：</span>
|
||
<el-input class="input" style="flex: 1;" placeholder="请输入联系人" v-model="registerInfo.contacts" />
|
||
</div>
|
||
|
||
<div style="display: flex;flex-direction: row;align-items: center;margin-top: 15px;width: 100%; ">
|
||
<span>所在区域：</span>
|
||
<!-- <el-input class="input" style="flex: 1; margin-right: 10px;" placeholder="请输入公司名称"
|
||
v-model="registerInfo.company" /> -->
|
||
|
||
<el-cascader v-model="selectedOptions" :options="options" filterable clearable class="input"
|
||
style="flex: 1;" @change="handleChange" />
|
||
|
||
</div>
|
||
<el-button type="primary" size="small"
|
||
style="width: 100%;margin-top: 30px; font-size: 25px;line-height: 40px;"
|
||
@click="registerStep3()">创建并进入</el-button>
|
||
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
doLogin,
|
||
registerSendMessageCode,
|
||
bindOrganization,
|
||
selOrganization,
|
||
getUserById,
|
||
registUser
|
||
} from '@/api/user.js'
|
||
// 导入省市区数据组件
|
||
import {
|
||
regionData,
|
||
codeToText,
|
||
TextToCode
|
||
} from 'element-china-area-data'
|
||
import {
|
||
setCookie,
|
||
getCookie,
|
||
removeCookie,
|
||
} from '@/utils/functions.js.js'
|
||
export default {
|
||
data() {
|
||
return {
|
||
checkbox: false,
|
||
register: 0,
|
||
registerStep: 1,
|
||
tableIndex: 1,
|
||
|
||
sendCodeText: "发送验证码",
|
||
sendCodeType: false,
|
||
totalTime: 10, //一般是60
|
||
timer: '', //定时器
|
||
|
||
sendCodeText2: "发送验证码",
|
||
sendCodeType2: false,
|
||
totalTime2: 10, //一般是60
|
||
timer2: '', //定时器
|
||
|
||
check: false,
|
||
registerInfo: {
|
||
mobile: '',
|
||
userSid: ""
|
||
},
|
||
loginForm: {
|
||
userName: '',
|
||
password: '',
|
||
verifyCode: "",
|
||
type: "1"
|
||
},
|
||
loading: false,
|
||
loginCode: false,
|
||
showMsg: false,
|
||
forgetPwd: false,
|
||
nopassword: {
|
||
userPhone: '',
|
||
userName: '',
|
||
},
|
||
// 将省市区数据赋给级联选择器
|
||
options: regionData,
|
||
// 存放用户选择后省市区的信息
|
||
selectedOptions: [],
|
||
companyList: [
|
||
// {
|
||
// sid: "1",
|
||
// name: "撒打算打算1阿斯顿撒大撒打算打算大萨达",
|
||
// type: "1"
|
||
// }, {
|
||
// sid: "2",
|
||
// name: "撒打算打算2",
|
||
// type: "2"
|
||
// }, {
|
||
// sid: "3",
|
||
// name: "撒打算打算3",
|
||
// type: "3"
|
||
// }, {
|
||
// sid: "4",
|
||
// name: "撒打算打算4",
|
||
// type: "1"
|
||
// }, {
|
||
// sid: "5",
|
||
// name: "撒打算打算5",
|
||
// type: "1"
|
||
// }, {
|
||
// sid: "6",
|
||
// name: "撒打算打算6",
|
||
// type: "1"
|
||
// }, {
|
||
// sid: "7",
|
||
// name: "撒打算打算7",
|
||
// type: "1"
|
||
// }, {
|
||
// sid: "1",
|
||
// name: "撒打算打算1",
|
||
// type: "1"
|
||
// }, {
|
||
// sid: "1",
|
||
// name: "撒打算打算1",
|
||
// type: "1"
|
||
// }, {
|
||
// sid: "1",
|
||
// name: "撒打算打算1",
|
||
// type: "1"
|
||
// },
|
||
]
|
||
}
|
||
},
|
||
created() {
|
||
|
||
if (getCookie("pas") && getCookie("name")) { //判断页面是否有对应Cookie
|
||
this.loginForm.userName = getCookie("name"); //有则写入
|
||
this.loginForm.password = getCookie("pas");
|
||
|
||
console.log(" created", this.loginForm)
|
||
|
||
this.checkbox = true
|
||
|
||
|
||
|
||
} else {
|
||
this.loginForm.userName = ""; //无则写空
|
||
this.loginForm.password = "";
|
||
}
|
||
|
||
},
|
||
|
||
methods: {
|
||
// 省市区级联选择器选择后更新用户前端
|
||
handleChange(value) {
|
||
console.log(" handleChange", value)
|
||
|
||
var province = ''
|
||
var city = ''
|
||
var country = ''
|
||
for (let i = 0; i < this.selectedOptions.length; i++) {
|
||
if (i === 0) {
|
||
var province = codeToText[this.selectedOptions[i]]
|
||
}
|
||
if (i === 1) {
|
||
var city = codeToText[this.selectedOptions[i]]
|
||
}
|
||
if (i === 2) {
|
||
var country = codeToText[this.selectedOptions[i]]
|
||
}
|
||
}
|
||
|
||
console.log(" handleChange", province + "/" + city + "/" + country)
|
||
|
||
this.registerInfo.region = province + "/" + city + "/" + country
|
||
|
||
},
|
||
tableClick(index) {
|
||
this.tableIndex = index
|
||
|
||
this.loginForm.type = index + ""
|
||
|
||
},
|
||
|
||
// 验证码倒计时
|
||
sendCode() {
|
||
if (this.sendCodeType) return
|
||
// this.getCode() // 获取验证码的接口
|
||
this.sendCodeType = true
|
||
this.sendCodeText = this.totalTime + 's'
|
||
this.timer = setInterval(() => {
|
||
this.totalTime--
|
||
this.sendCodeText = this.totalTime + 's'
|
||
if (this.totalTime < 0) {
|
||
clearInterval(this.timer)
|
||
this.sendCodeText = '发送验证码'
|
||
this.totalTime = 10
|
||
this.sendCodeType = false
|
||
}
|
||
}, 1000)
|
||
},
|
||
// 验证码倒计时
|
||
sendCode2() {
|
||
|
||
if (this.registerInfo.mobile == '') {
|
||
this.$message({
|
||
message: '请输入手机号码',
|
||
type: 'warning'
|
||
})
|
||
return
|
||
}
|
||
var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/
|
||
|
||
console.log(" reg", reg.test(this.registerInfo.mobile))
|
||
|
||
if (!reg.test(this.registerInfo.mobile)) {
|
||
this.$message({
|
||
message: '手机号码格式错误',
|
||
type: 'warning'
|
||
})
|
||
return
|
||
}
|
||
|
||
if (this.sendCodeType2) return
|
||
// this.getCode() // 获取验证码的接口
|
||
this.sendCodeType2 = true
|
||
this.sendCodeText2 = this.totalTime2 + 's'
|
||
this.timer2 = setInterval(() => {
|
||
this.totalTime2--
|
||
this.sendCodeText2 = this.totalTime2 + 's'
|
||
if (this.totalTime2 < 0) {
|
||
clearInterval(this.timer2)
|
||
this.sendCodeText2 = '发送验证码'
|
||
this.totalTime2 = 10
|
||
this.sendCodeType2 = false
|
||
}
|
||
}, 1000)
|
||
|
||
registerSendMessageCode(this.registerInfo.mobile).then((response) => {}).catch(() => {})
|
||
|
||
},
|
||
|
||
login() {
|
||
|
||
if (this.checkbox) { //判断多选框是否选中
|
||
setCookie("name", this.loginForm.userName, 7); //如选中则添加Cookie，添加内容为用户输入的密码和用户名
|
||
setCookie("pas", this.loginForm.password, 7);
|
||
} else {
|
||
removeCookie("name"); //如没选中，则删除掉对应的Cookie
|
||
removeCookie("pas");
|
||
}
|
||
|
||
// this.register = 1
|
||
// this.registerStep = 2
|
||
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: 'Loading',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
})
|
||
doLogin(this.loginForm).then((response) => {
|
||
if (response.code == 200) {
|
||
|
||
loading.close()
|
||
this.register = 1
|
||
|
||
this.companyList = response.data.sysOrganizationVos
|
||
this.registerInfo.userSid = response.data.sid
|
||
|
||
if (this.companyList.length == 0) {
|
||
// 1. 新用户 无关联企业
|
||
this.registerStep = 3
|
||
} else {
|
||
// 2. 注册过 选择企业登录
|
||
this.registerStep = 2
|
||
}
|
||
} else {
|
||
loading.close()
|
||
}
|
||
|
||
}).catch(() => {
|
||
loading.close()
|
||
})
|
||
|
||
},
|
||
forgetClick() {
|
||
|
||
},
|
||
registerClick() {
|
||
this.register = 1
|
||
this.registerStep = 1
|
||
},
|
||
goLogin() {
|
||
this.register = 0
|
||
this.registerStep = 0
|
||
},
|
||
registerStep1() {
|
||
|
||
if (!this.check) {
|
||
this.$message({
|
||
message: '请阅读并同意《宇信通服务协议》与《隐私协议》',
|
||
type: 'warning'
|
||
})
|
||
return
|
||
}
|
||
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: 'Loading',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
})
|
||
|
||
registUser(this.registerInfo).then((response) => {
|
||
if (response.code == 200) {
|
||
loading.close()
|
||
|
||
this.companyList = response.data.sysOrganizationVos
|
||
this.registerInfo.userSid = response.data.sid
|
||
|
||
if (this.companyList.length == 0) {
|
||
// 1. 新用户 无关联企业
|
||
this.registerStep = 3
|
||
} else {
|
||
// 2. 注册过 选择企业登录
|
||
this.registerStep = 2
|
||
}
|
||
|
||
} else {
|
||
loading.close()
|
||
}
|
||
|
||
}).catch(() => {
|
||
loading.close()
|
||
})
|
||
|
||
},
|
||
registerStep2() {
|
||
|
||
this.registerStep = 3
|
||
|
||
},
|
||
registerStep3() {
|
||
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: 'Loading',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
})
|
||
bindOrganization(this.registerInfo).then((response) => {
|
||
|
||
if (response.code == 200) {
|
||
|
||
this.$router.push({
|
||
path: '/index'
|
||
})
|
||
|
||
loading.close()
|
||
|
||
|
||
window.sessionStorage.setItem('token', response.data.token)
|
||
window.sessionStorage.setItem('userSid', response.data.sid)
|
||
window.sessionStorage.setItem('staffSid', response.data.staffSid)
|
||
window.sessionStorage.setItem('userName', response.data.userName)
|
||
window.sessionStorage.setItem('orgName', response.data.orgName)
|
||
window.sessionStorage.setItem('mobile', response.data.mobile)
|
||
window.sessionStorage.setItem('orgSid', response.data.orgSid)
|
||
window.sessionStorage.setItem('departmentName', response.data.departmentName)
|
||
window.sessionStorage.setItem('departmentSid', response.data.departmentSid)
|
||
window.sessionStorage.setItem('defaultOrgPath', response.data.orgSid)
|
||
window.sessionStorage.setItem('orgNamePath', response.data.orgNamePath)
|
||
window.sessionStorage.setItem('orgSidPath', response.data.orgSidPath)
|
||
window.sessionStorage.setItem('pNameAndDepartmentNameAndPostName', response.data
|
||
.pNameAndDepartmentNameAndPostName)
|
||
}
|
||
|
||
}).catch(() => {
|
||
loading.close()
|
||
})
|
||
|
||
},
|
||
itemClick(item) {
|
||
console.log(" itemClick", item)
|
||
|
||
const loading = this.$loading({
|
||
lock: true,
|
||
text: 'Loading',
|
||
spinner: 'el-icon-loading',
|
||
background: 'rgba(0, 0, 0, 0.7)'
|
||
})
|
||
|
||
var params = {
|
||
userSid: this.registerInfo.userSid,
|
||
orgSid: item.orgSid
|
||
}
|
||
|
||
selOrganization(params).then((response) => {
|
||
|
||
if (response.code == 200) {
|
||
|
||
this.$router.push({
|
||
path: '/index'
|
||
})
|
||
|
||
loading.close()
|
||
|
||
window.sessionStorage.setItem('token', response.data.token)
|
||
window.sessionStorage.setItem('userSid', response.data.sid)
|
||
window.sessionStorage.setItem('staffSid', response.data.staffSid)
|
||
window.sessionStorage.setItem('userName', response.data.userName)
|
||
window.sessionStorage.setItem('orgName', response.data.orgName)
|
||
window.sessionStorage.setItem('mobile', response.data.mobile)
|
||
window.sessionStorage.setItem('orgSid', response.data.orgSid)
|
||
window.sessionStorage.setItem('departmentName', response.data.departmentName)
|
||
window.sessionStorage.setItem('departmentSid', response.data.departmentSid)
|
||
window.sessionStorage.setItem('defaultOrgPath', response.data.orgSid)
|
||
window.sessionStorage.setItem('orgNamePath', response.data.orgNamePath)
|
||
window.sessionStorage.setItem('orgSidPath', response.data.orgSidPath)
|
||
window.sessionStorage.setItem('pNameAndDepartmentNameAndPostName', response.data
|
||
.pNameAndDepartmentNameAndPostName)
|
||
}
|
||
|
||
}).catch(() => {
|
||
loading.close()
|
||
})
|
||
|
||
},
|
||
|
||
getUserInfo(id) {
|
||
getUserById(id).then((response) => {
|
||
if (response.code == 200) {
|
||
console.log(" response", response)
|
||
let user = response.data
|
||
// 结果存入缓存
|
||
window.sessionStorage.setItem('staffSid', user.staffSid)
|
||
window.sessionStorage.setItem('sid', user.sid)
|
||
window.sessionStorage.setItem('userName', user.userName)
|
||
}
|
||
|
||
}).catch(() => {})
|
||
|
||
},
|
||
codeShow() {
|
||
if (this.loginForm.password == '' || this.loginForm.userName == '') {
|
||
this.loginCode = false
|
||
this.showMsg = true
|
||
return
|
||
}
|
||
this.$refs.imgCodeRole.getCodeImage()
|
||
},
|
||
reGetPwd() {
|
||
user.reGetPwd(this.nopassword).then((res) => {})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss">
|
||
// .el-input__inner {
|
||
// border: none;
|
||
// color: #000;
|
||
// font-size: 16px;
|
||
// }
|
||
|
||
input:-webkit-autofill {
|
||
-webkit-box-shadow: 0 0 0px 1000px white inset;
|
||
-webkit-text-fill-color: #000;
|
||
}
|
||
|
||
|
||
.login {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-size: 100% 100%;
|
||
background-image: url(../../assets/home/bj.png);
|
||
background-position: center;
|
||
overflow: hidden;
|
||
|
||
.logoTitle {
|
||
margin: 30px;
|
||
|
||
}
|
||
|
||
.main {
|
||
width: 60%;
|
||
height: 500px;
|
||
background: #ffffff;
|
||
box-shadow: 0px 13px 12px 0px rgba(0, 0, 0, 0.15);
|
||
opacity: 0.8;
|
||
border-radius: 5px;
|
||
position: absolute;
|
||
right: 20%;
|
||
top: 25%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
|
||
.main-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 50%;
|
||
height: 100%;
|
||
|
||
.main-right-title {
|
||
margin-top: 40px;
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.main-right-title2 {
|
||
margin-top: 40px;
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #467CCF;
|
||
}
|
||
|
||
.main-right-table {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
margin-top: 30px;
|
||
width: 70%;
|
||
|
||
.main-right-table-text1 {
|
||
flex: 1;
|
||
font-size: 22px;
|
||
text-align: center;
|
||
color: #3E77CD;
|
||
}
|
||
|
||
.main-right-table-text1:after {
|
||
content: '';
|
||
display: block;
|
||
width: 60px;
|
||
border-bottom: 2px solid #3E77CD;
|
||
margin: 0 auto;
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
|
||
.main-right-table-text3 {
|
||
flex: 1;
|
||
font-size: 22px;
|
||
text-align: center;
|
||
color: #333;
|
||
border-bottom: none;
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.main-right-table-text2 {
|
||
flex: 1;
|
||
font-size: 22px;
|
||
text-align: center;
|
||
color: #3E77CD;
|
||
}
|
||
|
||
.main-right-table-text2:after {
|
||
content: '';
|
||
display: block;
|
||
width: 80px;
|
||
border-bottom: 2px solid #3E77CD;
|
||
margin: 0 auto;
|
||
padding-bottom: 8px;
|
||
}
|
||
|
||
.main-right-table-text4 {
|
||
flex: 1;
|
||
font-size: 22px;
|
||
text-align: center;
|
||
color: #333;
|
||
border-bottom: none;
|
||
padding-bottom: 8px;
|
||
}
|
||
}
|
||
|
||
.main-right-table-password {
|
||
display: flex;
|
||
width: 65%;
|
||
margin-top: 10px;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.input {
|
||
margin-top: 10px;
|
||
width: 100%;
|
||
height: 50px;
|
||
}
|
||
}
|
||
|
||
.main-right-table-code {
|
||
|
||
display: flex;
|
||
width: 65%;
|
||
margin-top: 10px;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.input {
|
||
margin-top: 10px;
|
||
width: 100%;
|
||
height: 50px;
|
||
}
|
||
|
||
.sendCode1 {
|
||
font-size: 16px;
|
||
color: #c9c9c9;
|
||
}
|
||
|
||
.sendCode2 {
|
||
font-size: 16px;
|
||
color: #3E77CD;
|
||
}
|
||
|
||
}
|
||
|
||
.main-right-bom {
|
||
padding-left: 10px;
|
||
padding-right: 10px;
|
||
display: flex;
|
||
width: 65%;
|
||
margin-top: 10px;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
.main-right-bom-left {
|
||
color: #000;
|
||
align-items: center;
|
||
}
|
||
|
||
.main-right-bom-right {
|
||
display: flex;
|
||
flex-direction: row;
|
||
align-items: center;
|
||
|
||
span {
|
||
color: #666;
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
.registerStep1 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 65%;
|
||
|
||
.input {
|
||
width: 100%;
|
||
height: 50px;
|
||
}
|
||
|
||
.main-right-title2 {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
color: #467CCF;
|
||
}
|
||
|
||
.sendCode1 {
|
||
font-size: 16px;
|
||
color: #c9c9c9;
|
||
}
|
||
|
||
.sendCode2 {
|
||
font-size: 16px;
|
||
color: #3E77CD;
|
||
}
|
||
|
||
}
|
||
|
||
.registerStep2 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 70%;
|
||
|
||
.input {
|
||
width: 100%;
|
||
height: 50px;
|
||
}
|
||
|
||
.main-right-title {
|
||
font-size: 24px;
|
||
font-weight: 600;
|
||
}
|
||
|
||
}
|
||
|
||
.registerStep3 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: 70%;
|
||
|
||
.input {
|
||
width: 100%;
|
||
height: 50px;
|
||
}
|
||
}
|
||
|
||
}
|
||
|
||
|
||
|
||
}
|
||
}
|
||
</style>
|