You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
887 lines
26 KiB
887 lines
26 KiB
<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 style="cursor:pointer;" :class="tableIndex == 1 ? 'main-right-table-text1' : 'main-right-table-text3'"
|
|
@click="tableClick(1)">
|
|
密码登录</div>
|
|
<div style="cursor:pointer;" :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" style="cursor:pointer;">忘记密码</span>
|
|
<div style="margin-left: 8px;margin-right: 8px;width: 1px; height: 18px;background: #999;"></div>
|
|
<span @click="registerClick" style="cursor:pointer;">去注册</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;" placeholder="8至16位大小写字母和数字的组合"
|
|
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'" style="cursor:pointer;"
|
|
@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;cursor:pointer;">登录</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=='3'" 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=='1'" 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: '',
|
|
password: "",
|
|
userSid: "",
|
|
sourceSid: 'd936f1ba-03c3-11ec-bf08-48452053aa44', // oms 资源sid
|
|
},
|
|
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() {
|
|
|
|
var passwordreg = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9]).{8,16}$/
|
|
|
|
if (!passwordreg.test(this.registerInfo.password)) {
|
|
this.$message({
|
|
message: '密码格式错误，必须为8至16位大小写字母和数字的组合',
|
|
type: 'warning'
|
|
})
|
|
return
|
|
}
|
|
|
|
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('staffSid', response.data.staffSid)
|
|
window.sessionStorage.setItem('userSid', response.data.sid)
|
|
window.sessionStorage.setItem('name', response.data.name)
|
|
window.sessionStorage.setItem('userName', response.data.userName)
|
|
window.sessionStorage.setItem('mobile', response.data.mobile)
|
|
window.sessionStorage.setItem('orgName', response.data.orgName)
|
|
window.sessionStorage.setItem('orgSid', response.data.orgSid)
|
|
window.sessionStorage.setItem('defaultDeptName', response.data.defaultDeptName)
|
|
window.sessionStorage.setItem('defaultDeptSid', response.data.defaultDeptSid)
|
|
window.sessionStorage.setItem('defaultRoleName', response.data.defaultRoleName)
|
|
window.sessionStorage.setItem('defaultRoleSid', response.data.defaultRoleSid)
|
|
window.sessionStorage.setItem('orgSidPath', response.data.orgSidPath)
|
|
window.sessionStorage.setItem('defaultOrgPath', response.data.defaultOrgPath)
|
|
window.sessionStorage.setItem('defaultOrgPathName', response.data.defaultOrgPathName)
|
|
window.sessionStorage.setItem('pNameAndDepartmentNameAndPostName', response.data
|
|
.pNameAndDepartmentNameAndPostName)
|
|
} else {
|
|
loading.close()
|
|
}
|
|
|
|
}).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,
|
|
sourceSid: 'd936f1ba-03c3-11ec-bf08-48452053aa44', // oms 资源sid
|
|
}
|
|
|
|
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('staffSid', response.data.staffSid)
|
|
window.sessionStorage.setItem('userSid', response.data.sid)
|
|
window.sessionStorage.setItem('name', response.data.name)
|
|
window.sessionStorage.setItem('userName', response.data.userName)
|
|
window.sessionStorage.setItem('mobile', response.data.mobile)
|
|
window.sessionStorage.setItem('orgName', response.data.orgName)
|
|
window.sessionStorage.setItem('orgSid', response.data.orgSid)
|
|
window.sessionStorage.setItem('defaultDeptName', response.data.defaultDeptName)
|
|
window.sessionStorage.setItem('defaultDeptSid', response.data.defaultDeptSid)
|
|
window.sessionStorage.setItem('defaultRoleName', response.data.defaultRoleName)
|
|
window.sessionStorage.setItem('defaultRoleSid', response.data.defaultRoleSid)
|
|
window.sessionStorage.setItem('orgSidPath', response.data.orgSidPath)
|
|
window.sessionStorage.setItem('defaultOrgPath', response.data.defaultOrgPath)
|
|
window.sessionStorage.setItem('defaultOrgPathName', response.data.defaultOrgPathName)
|
|
window.sessionStorage.setItem('pNameAndDepartmentNameAndPostName', response.data
|
|
.pNameAndDepartmentNameAndPostName)
|
|
} else {
|
|
loading.close()
|
|
}
|
|
|
|
}).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>
|
|
|