420 lines
11 KiB
Vue
420 lines
11 KiB
Vue
<template>
|
||
<div class="login">
|
||
<NavTop :type="0" style="flex-shrink:0"></NavTop>
|
||
<div class="box">
|
||
<div class="left">
|
||
<div class="title">
|
||
您好，欢迎来到 <span class="orgname">Beelink</span>
|
||
</div>
|
||
<div class="nosign">
|
||
还没有账号？ <span class="tosign"> 成为一名Beelink老师 </span>
|
||
</div>
|
||
<div class="tab">
|
||
<LoginTab @sel="Selectnum"></LoginTab>
|
||
</div>
|
||
|
||
<div v-if="tabselected == 1">
|
||
<a-form :layout="formLayout">
|
||
<a-form-item label="手机号" class="form-item">
|
||
<a-input-group compact>
|
||
<a-select default-value="Zhejiang" class="getcode">
|
||
<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 v-model:value="phone" 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">立即登录</div>
|
||
<div>Beelink公司版权所有 2019—2022</div>
|
||
</a-form>
|
||
</div>
|
||
|
||
<div v-if="tabselected == 2">
|
||
<a-form :layout="formLayout">
|
||
<a-form-item label="帐号" class="form-item">
|
||
<a-input-group compact>
|
||
<a-input
|
||
style="width: 80%"
|
||
placeholder="请输入您的邮箱或者手机号"
|
||
/>
|
||
</a-input-group>
|
||
</a-form-item>
|
||
<a-form-item label="密码" class="form-item">
|
||
<a-input-group compact>
|
||
<a-input
|
||
style="width: 70%"
|
||
placeholder="请输入您的密码"
|
||
type="password"
|
||
class="shuru"
|
||
/>
|
||
<div class="forget">忘记密码?</div>
|
||
</a-input-group>
|
||
</a-form-item>
|
||
<div class="submit">立即登录</div>
|
||
</a-form>
|
||
</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="top">亿万人的信赖和见证</div>
|
||
<div class="topdesc">Beelink 开启您的美好学习生活</div>
|
||
|
||
<div class="lessons">
|
||
<div class="lessonitem">
|
||
<div class="pic"></div>
|
||
<div class="lessonname">
|
||
西班牙语A1级教学
|
||
<span class="score">7.5分</span>
|
||
</div>
|
||
</div>
|
||
<div class="lessonitem">
|
||
<div class="pic"></div>
|
||
<div class="lessonname">
|
||
西班牙语A1级教学
|
||
<span class="score">7.5分</span>
|
||
</div>
|
||
</div>
|
||
<div class="lessonitem">
|
||
<div class="pic"></div>
|
||
<div class="lessonname">
|
||
西班牙语A1级教学
|
||
<span class="score">7.5分</span>
|
||
</div>
|
||
</div>
|
||
<div class="lessonitem">
|
||
<div class="pic"></div>
|
||
<div class="lessonname">
|
||
西班牙语A1级教学
|
||
<span class="score">7.5分</span>
|
||
</div>
|
||
</div>
|
||
<div class="lessonitem">
|
||
<div class="pic"></div>
|
||
<div class="lessonname">
|
||
西班牙语A1级教学
|
||
<span class="score">7.5分</span>
|
||
</div>
|
||
</div>
|
||
<div class="lessonitem">
|
||
<div class="pic"></div>
|
||
<div class="lessonname">
|
||
西班牙语A1级教学
|
||
<span class="score">7.5分</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="icons">
|
||
<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 class="bottom">
|
||
<div class="content">
|
||
<div class="title">关于 Beelink</div>
|
||
<div class="rowline"></div>
|
||
<div class="texts">
|
||
Beelink平台拥有数千名优秀老师，丰富的教育经验和有趣的课堂环境，一对一辅导
|
||
平台的教务管理、线上课堂、线下课堂、助学互动，课程回放等多项教学功能，让
|
||
您利用碎片时间，轻轻松松学会各种语言。
|
||
</div>
|
||
<div class="relation">
|
||
<div class="more">了解更多</div>
|
||
<img src="@/static/images/tel.png" alt="" class="icon">
|
||
<div>136-0111-1111</div>
|
||
|
||
<img src="@/static/images/email.png" alt="" class="icon email">
|
||
<div>136-0111-1111</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { defineComponent, ref } from "vue";
|
||
import LoginTab from "@/components/login/LoginTab.vue";
|
||
import NavTop from "@/components/NavTop.vue"
|
||
import { sendsms } from '@/api';
|
||
|
||
export default defineComponent({
|
||
name: "Login",
|
||
components: {
|
||
LoginTab,
|
||
NavTop
|
||
},
|
||
setup() {
|
||
const formLayout = {
|
||
labelCol: 4,
|
||
wrapperCol: 14,
|
||
};
|
||
const tabselected = ref(1); //tab切换的标志
|
||
const time = ref(60);//倒计时
|
||
const phone = ref(""); // 手机号
|
||
/**
|
||
* @param val 子组件传过来的值
|
||
*/
|
||
const Selectnum: (val: number) => void = (val: number) => {
|
||
console.log("收到子组件事件", val);
|
||
|
||
tabselected.value = val;
|
||
};
|
||
|
||
/**
|
||
* @param
|
||
* 点击获取验证码 触发倒计时
|
||
*/
|
||
const getcode: () => void = () => {
|
||
console.log(phone.value);
|
||
sendsms("86" + phone.value, 0).then((res)=>{
|
||
console.log(res)
|
||
})
|
||
const timestep = setInterval(() => {
|
||
console.log(11112);
|
||
time.value = time.value - 1;
|
||
if (time.value > 0) {
|
||
console.log();
|
||
} else {
|
||
time.value = 60;
|
||
clearInterval(timestep);
|
||
}
|
||
}, 1000);
|
||
};
|
||
return {
|
||
formLayout,
|
||
tabselected,
|
||
Selectnum,
|
||
getcode,
|
||
time,
|
||
phone
|
||
};
|
||
},
|
||
});
|
||
</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: 100%;
|
||
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;
|
||
.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;
|
||
.shuru {
|
||
margin-right: 30px;
|
||
}
|
||
}
|
||
.line {
|
||
width: 1px;
|
||
height: 14px;
|
||
background: #e5e5e5;
|
||
margin-top: 10px;
|
||
position: relative;
|
||
z-index: 999;
|
||
}
|
||
.getcode {
|
||
font-size: 15px;
|
||
color: #08ae98;
|
||
width: 150px;
|
||
line-height: 30px;
|
||
cursor: pointer;
|
||
}
|
||
.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;
|
||
margin-bottom: 178px;
|
||
}
|
||
.forget {
|
||
color: #08ae98;
|
||
font-size: 12px;
|
||
margin-top: 8px;
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.right {
|
||
width: 690px;
|
||
.top {
|
||
font-size: 26px;
|
||
color: #08ae98;
|
||
font-weight: bold;
|
||
}
|
||
.topdesc {
|
||
color: #343434;
|
||
font-size: 12px;
|
||
margin-top: 14px;
|
||
margin-bottom: 23px;
|
||
}
|
||
.lessons {
|
||
// width: 655px;
|
||
height: 342px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 140px;
|
||
.lessonitem {
|
||
width: 200px;
|
||
height: 157px;
|
||
background: #ffffff;
|
||
box-shadow: 1px 5px 7px 0px rgba(158, 158, 158, 0.11);
|
||
border-radius: 18px;
|
||
margin-right: 23px;
|
||
margin-bottom: 29px;
|
||
.pic {
|
||
width: 200px;
|
||
height: 112px;
|
||
background: #98a6b8;
|
||
border-radius: 18px 18px 0px 0px;
|
||
}
|
||
.lessonname {
|
||
color: #121212;
|
||
font-size: 12px;
|
||
line-height: 45px;
|
||
text-indent: 17px;
|
||
.score {
|
||
color: #f55456;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.icons {
|
||
margin-right: 41px;
|
||
.icon {
|
||
width: 28px;
|
||
height: 28px;
|
||
margin-right: 18px;
|
||
float: right;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.bottom {
|
||
height: 317px;
|
||
margin-top: 44px;
|
||
background: #08ae98;
|
||
color: white;
|
||
font-size: 10px;
|
||
.content {
|
||
width: 415px;
|
||
// text-align: center;
|
||
padding-top: 59px;
|
||
margin-left: 144px;
|
||
.title {
|
||
font-size: 18px;
|
||
font-weight: 800;
|
||
}
|
||
.rowline {
|
||
width: 46px;
|
||
height: 2px;
|
||
background: #68df7e;
|
||
margin-top: 18px;
|
||
margin-bottom: 34px;
|
||
}
|
||
.texts{
|
||
text-align: left;
|
||
margin: 0 auto;
|
||
}
|
||
.relation{
|
||
height:29px;
|
||
display: flex;
|
||
line-height: 29px;
|
||
margin-top: 52px;
|
||
color: white;
|
||
.more{
|
||
width: 86px;
|
||
height: 29px;
|
||
background: #68DF7E;
|
||
color:white;
|
||
text-align: center;
|
||
line-height: 29px;
|
||
border-radius: 15px;
|
||
}
|
||
.icon{
|
||
width: 9px;
|
||
height: 12px;
|
||
margin: auto 0;
|
||
margin-right:6px;
|
||
margin-left: 29px;
|
||
}
|
||
.email{
|
||
width: 15px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |