登录
This commit is contained in:
parent
92d255683c
commit
3938d40a8a
@ -1,20 +1,28 @@
|
||||
<template>
|
||||
<div class="logintab">
|
||||
<div class="tab">手机号登录</div>
|
||||
<div class="tab ">账号密码登录</div>
|
||||
<div :class="selected==1?'tab tab1':'tab'" @click="tabchange(1)">手机号登录</div>
|
||||
<div :class="selected==2?'tab tab1':'tab'" @click="tabchange(2)">账号密码登录</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import { defineComponent , ref} from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
name: "LoginTab",
|
||||
components: {},
|
||||
setup() {
|
||||
const selected: number =1
|
||||
|
||||
|
||||
setup(prop,context) {
|
||||
const selected=ref(1)
|
||||
function tabchange(e: number): void{
|
||||
selected.value=e
|
||||
context.emit("sel",e)
|
||||
|
||||
}
|
||||
return {
|
||||
selected
|
||||
selected,
|
||||
tabchange
|
||||
};
|
||||
},
|
||||
});
|
||||
@ -24,9 +32,9 @@ export default defineComponent({
|
||||
display: flex;
|
||||
.tab{
|
||||
width: 100px;
|
||||
height: 28px;
|
||||
height: 29px;
|
||||
border-radius: 14px;
|
||||
|
||||
cursor: pointer;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-size: 11px;
|
||||
|
||||
@ -3,11 +3,56 @@
|
||||
<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>
|
||||
<LoginTab></LoginTab>
|
||||
<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 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>
|
||||
</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>
|
||||
@ -16,25 +61,68 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from "vue";
|
||||
import LoginTab from '@/components/login/LoginTab.vue';
|
||||
import { defineComponent, ref } from "vue";
|
||||
import LoginTab from "@/components/login/LoginTab.vue";
|
||||
export default defineComponent({
|
||||
name: "Login",
|
||||
components: {
|
||||
LoginTab
|
||||
LoginTab,
|
||||
},
|
||||
setup() {
|
||||
const panes: Array<any>=[
|
||||
{ title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
|
||||
{ title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
|
||||
]
|
||||
const formLayout = {
|
||||
labelCol: 4,
|
||||
wrapperCol: 14,
|
||||
};
|
||||
const tabselected= ref(1)
|
||||
const time=ref(60)
|
||||
const Selectnum: (val: number) => void = (val: number) => {
|
||||
console.log("收到子组件事件", val)
|
||||
|
||||
tabselected.value=val
|
||||
}
|
||||
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)
|
||||
}
|
||||
return {
|
||||
panes
|
||||
formLayout,
|
||||
tabselected,
|
||||
Selectnum,
|
||||
getcode,
|
||||
time
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.login /deep/ .ant-select-selection {
|
||||
border: none;
|
||||
}
|
||||
.login /deep/ .ant-input {
|
||||
border: none;
|
||||
}
|
||||
.ant-input:focus {
|
||||
border: none;
|
||||
border-bottom: 1px solid white !important;
|
||||
box-shadow: none;
|
||||
}
|
||||
.login /deep/ .ant-form-item-label {
|
||||
line-height: 14px;
|
||||
}
|
||||
.login /deep/ .ant-form-item /deep/ label {
|
||||
color: #0dbba4;
|
||||
font-size: 11px;
|
||||
left:1px
|
||||
}
|
||||
.login {
|
||||
min-width: 100vw;
|
||||
height: 100vh;
|
||||
@ -46,22 +134,76 @@ export default defineComponent({
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
.left {
|
||||
width: 313px;
|
||||
width: 314px;
|
||||
.title {
|
||||
font-size: 17px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.orgname {
|
||||
font-size: 20px;
|
||||
font-size: 29px;
|
||||
color: #0dbba4;
|
||||
cursor: pointer;
|
||||
}
|
||||
.nosign{
|
||||
font-size:11px;
|
||||
.nosign {
|
||||
font-size: 12px;
|
||||
color: #666666;
|
||||
margin-top: 16px;
|
||||
margin-top: 17px;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
.tosign{
|
||||
color: #0DBBA4;
|
||||
.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;
|
||||
}
|
||||
.forget{
|
||||
color: #08AE98;
|
||||
font-size: 12px;
|
||||
margin-top:8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user