392 lines
10 KiB
Vue
392 lines
10 KiB
Vue
<template>
|
||
<div class="login">
|
||
<NavTop :type="0" style="flex-shrink:0"></NavTop>
|
||
<div class="box">
|
||
<div :class="stepnow != 2 ? 'left' : 'left left1'">
|
||
<div class="title">
|
||
您好，欢迎来到 <span class="orgname">Beelink</span>
|
||
</div>
|
||
|
||
<div v-if="stepnow == 1">
|
||
<div class="nosign">
|
||
已有账号？
|
||
<span class="tosign"> 去登录 </span>
|
||
</div>
|
||
|
||
<a-form :layout="formLayout">
|
||
<a-form-item label="手机号" class="form-item">
|
||
<a-input-group compact>
|
||
<a-select
|
||
default-value="Zhejiang"
|
||
class="getcode"
|
||
style="width: 50%"
|
||
>
|
||
<a-select-option value="Zhejiang">
|
||
中国+0086
|
||
</a-select-option>
|
||
<a-select-option value="Jiangsu"> Jiangsu </a-select-option>
|
||
</a-select>
|
||
<div class="line"></div>
|
||
<a-input style="width: 50%" placeholder="请输入您的手机号" />
|
||
</a-input-group>
|
||
</a-form-item>
|
||
<a-form-item label="验证码" class="form-item">
|
||
<a-input-group compact>
|
||
<div class="getcode" @click="getcode">
|
||
点击获取验证码{{ time == 60 ? "" : "(" + time + ")" }}
|
||
</div>
|
||
<div class="line"></div>
|
||
<a-input style="width: 50%" placeholder="请输入您的验证码" />
|
||
</a-input-group>
|
||
</a-form-item>
|
||
<div class="submit" @click="next(2)">下一步</div>
|
||
<div class="agreement" @click="agree">
|
||
<div class="ifagree">
|
||
<img
|
||
src="@/static/images/agree.png"
|
||
alt=""
|
||
class="agree"
|
||
v-if="ifagree"
|
||
/>
|
||
</div>
|
||
勾选表示同意 《用户注册协议和隐私政策》
|
||
</div>
|
||
</a-form>
|
||
</div>
|
||
|
||
<div v-if="stepnow == 2">
|
||
<div class="nosign">
|
||
已有账号？
|
||
<span class="tosign"> 去登录 </span>
|
||
</div>
|
||
<a-form :layout="formLayout">
|
||
<div class="signform">
|
||
<a-form-item label="设置密码" class="form-item">
|
||
<a-input class="shuru" placeholder="请输入您的密码" type="password"/>
|
||
</a-form-item>
|
||
<a-form-item label="设置密码" class="form-item">
|
||
<a-input class="shuru" placeholder="请再次输入您的密码" type="password"/>
|
||
</a-form-item>
|
||
<a-form-item label="姓名" class="form-item">
|
||
<a-input class="shuru" placeholder="请输入您的姓名" />
|
||
</a-form-item>
|
||
<a-form-item label="邮箱" class="form-item">
|
||
<a-input class="shuru" placeholder="请输入您的邮箱" />
|
||
</a-form-item>
|
||
<a-form-item label="母语" class="form-item">
|
||
<a-input class="shuru" placeholder="请输入您的母语" />
|
||
</a-form-item>
|
||
<a-form-item label="授课语言" class="form-item">
|
||
<a-select class="getcode" placeholder="请选择您的授课语言">
|
||
<a-select-option value="Zhejiang">
|
||
中国+0086
|
||
</a-select-option>
|
||
<a-select-option value="Jiangsu"> Jiangsu </a-select-option>
|
||
</a-select>
|
||
</a-form-item>
|
||
</div>
|
||
|
||
<div class="submit" @click="next(3)">立刻注册</div>
|
||
<div class="orginfo">Beelink公司版权所有 2019—2022</div>
|
||
</a-form>
|
||
</div>
|
||
|
||
<div v-if="stepnow == 3">
|
||
<div class="nosign">您已完成注册</div>
|
||
<img src="@/static/images/success.png" alt="" class="success">
|
||
<div class="ale">恭喜您注册成功，点击跳转到我的档案页面</div>
|
||
</div>
|
||
</div>
|
||
<div :class="stepnow != 2 ? 'right' : 'right right1'">
|
||
<div class="steps">
|
||
<div class="step">
|
||
<div :class="stepnow == 1 ? 'circle step1' : 'circle'">01</div>
|
||
<div :class="stepnow == 1 ? 'stepnow' : ''">验证手机号</div>
|
||
</div>
|
||
<div class="stepline"></div>
|
||
<div class="step">
|
||
<div :class="stepnow == 2 ? 'circle step1' : 'circle'">02</div>
|
||
<div :class="stepnow == 2 ? 'stepnow' : ''">填写帐号信息</div>
|
||
<div class="back" @click="next(1)" v-if="stepnow==2">
|
||
返回上一步
|
||
</div>
|
||
</div>
|
||
<div class="stepline"></div>
|
||
<div class="step">
|
||
<div :class="stepnow == 3 ? 'circle step1' : 'circle'">03</div>
|
||
<div :class="stepnow == 3 ? 'stepnow' : ''">帐号注册完成</div>
|
||
</div>
|
||
</div>
|
||
<div class="icons" v-if="stepnow == 2">
|
||
<img src="@/static/images/weixin.png" alt="" class="icon" />
|
||
<img src="@/static/images/weibo.png" alt="" class="icon" />
|
||
<img src="@/static/images/facebook.png" alt="" class="icon" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { defineComponent, ref } from "vue";
|
||
import NavTop from "@/components/NavTop.vue"
|
||
|
||
export default defineComponent({
|
||
name: "Sign",
|
||
components: {NavTop},
|
||
setup() {
|
||
const formLayout = {
|
||
labelCol: 4,
|
||
wrapperCol: 14,
|
||
};
|
||
const time = ref(60); //倒计时初始化
|
||
|
||
/**
|
||
* @param
|
||
* 点击获取验证码 触发60S倒计时
|
||
*/
|
||
const getcode: () => void = () => {
|
||
console.log(11111);
|
||
const timestep = setInterval(() => {
|
||
console.log(11112);
|
||
time.value = time.value - 1;
|
||
if (time.value > 0) {
|
||
console.log();
|
||
} else {
|
||
time.value = 60;
|
||
clearInterval(timestep);
|
||
}
|
||
}, 1000);
|
||
};
|
||
const ifagree = ref(true); //是否同意用户协议
|
||
|
||
/**
|
||
*@param
|
||
* 用户协议前面radio 的点击效果
|
||
*/
|
||
const agree: () => void = () => {
|
||
ifagree.value = ifagree.value == true ? false : true;
|
||
console.log(ifagree.value, 600);
|
||
};
|
||
|
||
const stepnow = ref(1); // 步骤条初始
|
||
|
||
/**
|
||
*@param e 跳到哪一步
|
||
* 步骤条跳到某一步
|
||
*/
|
||
const next: (e: number) => void = (e: number) => {
|
||
stepnow.value = e;
|
||
};
|
||
return {
|
||
formLayout,
|
||
getcode,
|
||
time,
|
||
agree,
|
||
ifagree,
|
||
stepnow,
|
||
next,
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.login ::v-deep(.ant-select-selection) {
|
||
border: none;
|
||
}
|
||
.login ::v-deep(.ant-input) {
|
||
border: none;
|
||
}
|
||
.ant-input:focus {
|
||
border: none;
|
||
border-bottom: 1px solid white !important;
|
||
box-shadow: none;
|
||
}
|
||
.login ::v-deep(.ant-form-item-label) {
|
||
line-height: 14px;
|
||
}
|
||
.login ::v-deep(.ant-form-item) ::v-deep(label) {
|
||
color: #0dbba4;
|
||
font-size: 11px;
|
||
left: 1px;
|
||
}
|
||
.login {
|
||
min-width: 100vw;
|
||
height: 100vh;
|
||
background: url("../../static/images/loginbg.png");
|
||
background-size: 100% 130%;
|
||
background-repeat: no-repeat;
|
||
.box {
|
||
padding-top: 145px;
|
||
|
||
display: flex;
|
||
justify-content: space-around;
|
||
.left1 {
|
||
width: 710px !important;
|
||
}
|
||
.left {
|
||
width: 314px;
|
||
.title {
|
||
font-size: 17px;
|
||
font-weight: bold;
|
||
}
|
||
.orgname {
|
||
font-size: 29px;
|
||
color: #0dbba4;
|
||
cursor: pointer;
|
||
}
|
||
.nosign {
|
||
font-size: 12px;
|
||
color: #666666;
|
||
margin-top: 17px;
|
||
margin-bottom: 35px;
|
||
}
|
||
.tosign {
|
||
color: #0dbba4;
|
||
cursor: pointer;
|
||
}
|
||
.tab {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.form-item {
|
||
border-bottom: 1px solid #e5e5e5;
|
||
font-size: 15px;
|
||
margin-right: 40px;
|
||
}
|
||
.line {
|
||
width: 1px;
|
||
height: 14px;
|
||
background: #e5e5e5;
|
||
margin-top: 10px;
|
||
position: relative;
|
||
z-index: 999;
|
||
}
|
||
.getcode {
|
||
font-size: 15px;
|
||
color: #08ae98;
|
||
width: 313px;
|
||
line-height: 30px;
|
||
cursor: pointer;
|
||
}
|
||
.orginfo {
|
||
margin-top: 178px;
|
||
}
|
||
.submit {
|
||
width: 143px;
|
||
height: 35px;
|
||
background: linear-gradient(
|
||
90deg,
|
||
#00dac2,
|
||
#42de9e,
|
||
#88e062,
|
||
#d0eb3e,
|
||
#fffa18
|
||
);
|
||
border-radius: 18px;
|
||
font-size: 15px;
|
||
color: white;
|
||
font-weight: 800;
|
||
text-align: center;
|
||
line-height: 35px;
|
||
margin-top: 45px;
|
||
}
|
||
.agreement {
|
||
font-size: 12px;
|
||
display: flex;
|
||
margin-top: 23px;
|
||
cursor: default;
|
||
.ifagree {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 3px;
|
||
border: 1px solid #0ebca4;
|
||
margin: auto 0;
|
||
margin-right: 7px;
|
||
.agree {
|
||
width: 8px;
|
||
height: 6px;
|
||
position: relative;
|
||
top: -4px;
|
||
left: 2.5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.right1 {
|
||
width: 230px !important;
|
||
}
|
||
.right {
|
||
width: 690px;
|
||
.steps {
|
||
padding-top: 112px;
|
||
.stepline {
|
||
width: 1px;
|
||
height: 50px;
|
||
border: 1px dashed #eeeeee;
|
||
position: relative;
|
||
left: 13px;
|
||
}
|
||
.step {
|
||
display: flex;
|
||
color: #999999;
|
||
font-size: 11px;
|
||
line-height: 28px;
|
||
font-weight: bold;
|
||
.back {
|
||
color: #0dbba4;
|
||
margin-left: 23px;
|
||
}
|
||
.circle {
|
||
width: 29px;
|
||
height: 29px;
|
||
border-radius: 15px;
|
||
background: #eeeeee;
|
||
font-size: 12px;
|
||
color: #999999;
|
||
text-align: center;
|
||
line-height: 29px;
|
||
font-weight: 800;
|
||
margin-right: 17px;
|
||
}
|
||
}
|
||
.step1 {
|
||
background: #08ae98 !important;
|
||
color: white !important;
|
||
}
|
||
.stepnow {
|
||
color: #111111;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.signform {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
.shuru {
|
||
width: 313px;
|
||
}
|
||
}
|
||
.icons {
|
||
margin-right: 41px;
|
||
margin-top: 227px;
|
||
.icon {
|
||
width: 28px;
|
||
height: 28px;
|
||
margin-right: 18px;
|
||
float: right;
|
||
}
|
||
}
|
||
.success{
|
||
width: 250px;
|
||
height: 233px;
|
||
}
|
||
.ale{
|
||
color:#08AE98;
|
||
font-size: 14px;
|
||
font-weight: 800;
|
||
margin-top: 34px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
</style> |