处理冲突

This commit is contained in:
ghusermoon 2020-09-27 17:07:13 +08:00
commit 6259449b89
15 changed files with 837 additions and 13 deletions

View File

@ -18,3 +18,4 @@ export function getinfo(): Promise<AxiosPromise>{
export function seninfo(data: object): Promise<AxiosPromise>{
return post("b",data)
}

View File

@ -0,0 +1,48 @@
<template>
<div class="logintab">
<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 , ref} from "vue";
export default defineComponent({
name: "LoginTab",
components: {},
setup(prop,context) {
const selected=ref(1)
function tabchange(e: number): void{
selected.value=e
context.emit("sel",e)
}
return {
selected,
tabchange
};
},
});
</script>
<style lang="scss" scoped>
.logintab{
display: flex;
.tab{
width: 100px;
height: 29px;
border-radius: 14px;
cursor: pointer;
font-weight: bold;
text-align: center;
font-size: 11px;
line-height: 28px;
}
.tab1{
background: #08AE98;
color: white;
}
}
</style>

View File

@ -1,4 +1,6 @@
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'
import Login from "../views/login/Login.vue"
const routes: Array<RouteRecordRaw> = [
{
@ -29,12 +31,14 @@ const routes: Array<RouteRecordRaw> = [
component: () => import(/* webpackChunkName: "about" */ '../components/NavTop.vue')
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
path: '/login',
name: 'Login',
component:Login
},
{
path: '/sign',
name: 'Sign',
component: () => import('../views/login/Sign.vue')
},
]

View File

@ -1,5 +0,0 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

403
src/views/login/Login.vue Normal file
View File

@ -0,0 +1,403 @@
<template>
<div class="login">
<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 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公司版权所有 20192022</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/weixin.png" alt="" class="icon" />
<img src="../../../static/weibo.png" alt="" class="icon" />
<img src="../../../static/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/tel.png" alt="" class="icon">
<div>136-0111-1111</div>
<img src="../../../static/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";
export default defineComponent({
name: "Login",
components: {
LoginTab,
},
setup() {
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 {
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: 100%;
height: 100vh;
background: url("../../../static/loginbg.png");
background-size: 100% 130%;
background-repeat: no-repeat;
padding-top: 145px;
.box {
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;
background: gold;
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>

373
src/views/login/Sign.vue Normal file
View File

@ -0,0 +1,373 @@
<template>
<div class="login">
<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/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="请输入您的密码" />
</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-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公司版权所有 20192022</div>
</a-form>
</div>
<div v-if="stepnow == 3">
<div class="nosign">您已完成注册</div>
<img src="../../../static/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/weixin.png" alt="" class="icon" />
<img src="../../../static/weibo.png" alt="" class="icon" />
<img src="../../../static/facebook.png" alt="" class="icon" />
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "Sign",
components: {},
setup() {
const formLayout = {
labelCol: 4,
wrapperCol: 14,
};
const time = ref(60);
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);
const agree: () => void = () => {
ifagree.value = ifagree.value == true ? false : true;
console.log(ifagree.value, 600);
};
const stepnow = ref(1);
const next: (e: number) => void = (e: number) => {
stepnow.value = e;
};
return {
formLayout,
getcode,
time,
agree,
ifagree,
stepnow,
next,
};
},
});
</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;
background: url("../../../static/loginbg.png");
background-size: 100% 130%;
background-repeat: no-repeat;
padding-top: 145px;
.box {
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>

BIN
static/agree.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 274 B

BIN
static/email.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 533 B

BIN
static/facebook.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
static/loginbg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 168 KiB

BIN
static/success.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

BIN
static/tel.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 449 B

BIN
static/weibo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
static/weixin.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

@ -7893,8 +7893,8 @@ sass-graph@2.2.5:
sass-loader@^10.0.2:
version "10.0.2"
resolved "https://registry.npm.taobao.org/sass-loader/download/sass-loader-10.0.2.tgz?cache=0&sync_timestamp=1599136698634&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsass-loader%2Fdownload%2Fsass-loader-10.0.2.tgz#c7b73010848b264792dd45372eea0b87cba4401e"
integrity sha1-x7cwEISLJkeS3UU3LuoLh8ukQB4=
resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-10.0.2.tgz#c7b73010848b264792dd45372eea0b87cba4401e"
integrity sha512-wV6NDUVB8/iEYMalV/+139+vl2LaRFlZGEd5/xmdcdzQcgmis+npyco6NsDTVOlNA3y2NV9Gcz+vHyFMIT+ffg==
dependencies:
klona "^2.0.3"
loader-utils "^2.0.0"