Skip to content

B
beyond-clouds-front
Commit 6f3ea27f by 高浩杰
Options

finish login and reset

parent 4de0ccc3
Showing with 450 additions and 137 deletions
assets/svg/whiteLogo.svg 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
components/pc/emptyCard.vue
<template> <template>
<div class="empty-card__warp" :style="{height: lineHeight, lineHeight: lineHeight}"> <div class="empty-card__warp" :style="{height: height, lineHeight: height}">
<div class="empty-card"> <div class="empty-card">
<img src="../../assets/svg/null.svg" alt=""> <img src="../../assets/svg/null.svg" alt="">
</div> </div>
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
export default { export default {
name: "emptyCard", name: "emptyCard",
props: { props: {
lineHeight: String height: String
} }
} }
</script> </script>
......
components/pc/loginCard.vue 0 → 100644
<template>
<div class="login-card__wrap">
<div class="login-card">
<div class="login-card__header" v-if="!(title1 !== undefined && title2 !== undefined)">
<span style="color:#2F2F2F;">忘记密码</span>
</div>
<div class="login-card__header" v-if="title1 !== undefined && title2 !== undefined">
<span :class="{headerTitle: isPassword}" @click="handleLoginPassword">密码登录</span>
<span> · </span>
<span :class="{headerTitle: !isPassword}" @click="handleLoginCode">短信登录</span>
</div>
<div class="login-card__main">
<input type="text" placeholder="请输入手机号或邮箱" maxlength="20" v-model="account" :class="{active: isError}" v-if="isPassword">
<input type="text" placeholder="请输入手机号" maxlength="20" v-model="account" :class="{active: isError}" v-if="!isPassword">
<p class="error-prompt" v-if="isError">{{errorMessage}}</p>
<p style="height: 21px" v-if="!isError"></p>
<div class="input-box__wrap" v-if="isPassword">
<div class="input-box">
<input type="password" placeholder="请输入密码" maxlength="18" v-model="password" v-if="!isShow" :class="{active: isPasswordError}">
<input type="text" placeholder="请输入密码" maxlength="18" v-model="password" v-if="isShow" :class="{active: isPasswordError}">
<div class="icon-box" @click="handleShow">
<yun-icon name="visible" size="13px" v-if="isShow" ></yun-icon>
<yun-icon name="invisible" size="13px" v-if="!isShow"></yun-icon>
</div>
</div>
<p style="height: 21px" v-if="!isPasswordError"></p>
<p class="error-prompt" v-if="isPasswordError">您输入的密码有误</p>
</div>
<div class="input-box__wrap" v-if="!isPassword">
<div class="input-box" v-if="!isPassword">
<input type="password" placeholder="请输入验证码" v-model="verification ">
<span class="input-box__right" v-if="!isCountdown" @click="handleCountdown">发送验证码</span>
<span class="input-box__right" v-if="isCountdown">{{countdown}}秒后重试</span>
</div>
<p style="height: 21px" v-if="!isValidEntityCode"></p>
<p class="error-prompt" v-if="isValidEntityCode">您输入的验证码有误</p>
</div>
<button @click="handelLogin">{{button}}</button>
<div class="main-footer">
<div class="input-box">
<input id="automatic" type="checkbox">
<label for="automatic"></label >
<p>下次自动登录</p>
</div>
<div>
<span @click="handleReset">忘记密码</span>
<span> · </span>
<span>注册</span>
</div>
</div>
</div>
<div class="login-card__footer">
<div class="img-box">
<embed src="../../assets/svg/qq.svg" type="image/svg+xml"/>
</div>
<div class="img-box" style="margin: 0 24px;">
<embed src="../../assets/svg/wechat.svg" type="image/svg+xml"/>
</div>
<div class="img-box">
<embed src="../../assets/svg/dingding.svg" type="image/svg+xml"/>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "loginCard",
props: {
title1: String,
title2: String,
button: String
},
data(){
return{
isPassword: true, // 用于判断短信 还是 密码登录 默认 密码登录
isShow: false, // 密码是否显示
isCountdown: false, // 倒计时是否显示
isError: false, // 判断手机号 或 邮箱 格式是否正确
isPasswordError: false, // 判断密码是否正确
isValidEntityCode: false, // 判断验证码是否正确
account: '', // 储存手机号或邮箱
phone: '', // 储存手机号
password: '', // 储存密码
verification: '', // 储存验证码
countdown: 60, // 倒计时时长
errorMessage: '' // 错误提示信息
}
},
created() {
if (this.title1 === undefined && this.title2 === undefined) {
this.isPassword = false;
}
},
methods: {
// 控制密码显示
handleShow(){
this.isShow = !this.isShow;
},
// 控制倒计时函数
handleCountdown(){
this.isCountdown = !this.isCountdown;
this.countdown = 5;
let interval = setInterval(() =>{
this.countdown --;
}, 1000);
setTimeout(() => {
clearInterval(interval);
this.isCountdown = false;
}, 5000);
},
// 选择登录方式
handleLoginPassword(){
if (!this.isPassword) {
this.isPassword = true;
}
},
handleLoginCode(){
if (this.isPassword) {
this.isPassword = false;
}
},
// 登录
handelLogin(){
if (this.account.includes('@')) {
let reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(this.account);
this.isError = !reg;
this.errorMessage = '请输入正确的邮箱';
return;
}
this.$emit('login',this.isPassword, this.account, this.password ,this.phone, this.verification)
},
// 跳转忘记密码
handleReset(){
this.$router.push('/users/reset');
}
},
watch:{
'account': function (value) {
// 检查手机号和邮箱
if (this.account.includes('@')) {
// 检查邮箱格式
// console.log('检查邮箱格式');
// let reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/.test(value);
// this.isError = !reg;
} else {
this.isError = this.account.length >= 11 && !(/^1[34578]\d{9}$/.test(value));
this.errorMessage = '请输入正确的手机号';
}
}
}
}
</script>
<style lang="scss" scoped>
.login-card__wrap{
width: 514*$length;
height: 500*$length;
text-align: center;
background-color: #fff;
@include border-radius(10*$length);
.login-card{
width: 334*$length;
margin: 0 auto;
.login-card__header{
display: inline-block;
margin-top: 45*$length;
margin-bottom: 43*$length;
@include fontStyle(20,28,500,#999,center);
@extend %cursorPointer;
.headerTitle{
@extend %animate-transition;
color: #2F2F2F;
}
}
.login-card__main{
> input{
width: 100%;
height: 48*$length;
box-sizing: border-box;
border: 1*$length solid transparent;
@include border-radius(4*$length);
padding-left: 16*$length;
font-size: 14*$length;
color: #999;
background-color: #F4F8FA;
}
.active{
border: 1*$length solid #FF7474;
}
.error-prompt{
padding-top: 4*$length;
@include fontStyle(12,17,500,#FF7474,left);
}
> .input-box__wrap{
> .input-box{
margin: 9*$length auto 0;
width: 100%;
height: 48*$length;
line-height: 48*$length;
background-color: #F4F8FA;
box-sizing: border-box;
border: 1*$length solid transparent;
@include border-radius(4*$length);
@extend %flex-row-spb;
> input{
width: 100%;
max-width: 228*$length;
padding-left: 16*$length;
font-size: 14*$length;
color: #999;
background-color: #F4F8FA;
}
.icon-box{
margin-right: 16*$length;
}
> .input-box__right{
margin-right: 16*$length;
@include fontStyle(14,20,500,#75D098,left);
@extend %cursorPointer;
}
}
}
> button{
width: 100%;
height: 56*$length;
margin-top: 9*$length;
font-size: 16*$length;
background-color: #CCEEFA;
color: #fff;
border: none;
cursor: pointer;
@include border-radius(4*$length);
@extend %animate-transition;
&:hover{
background-color: #00AAE6;
}
}
.main-footer{
margin: 16*$length auto;
width: 100%;
@extend %flex-row-spb;
@include fontStyle(12,17,500,#999,left);
> div{
@extend %cursorPointer;
}
> .input-box{
/*label标签的大小、位置、背景颜色更改，在css选择时，“+”代表相邻元素，即当前元素的下一元素*/
#automatic +label{
display: block;
width: 12*$length;
height: 12*$length;
margin-top: 1*$length;
cursor: pointer;
background-color: #fff;
@include border-radius(2*$length);
border: 1*$length solid #999;
box-sizing: border-box;
}
#automatic:checked +label::before{
display: block;
width: 12*$length;
height: 12*$length;
line-height: 12*$length;
content: "\2713";
text-align: center;
font-size: 12*$length;
background-color: #75D098;
color: #fff;
@include border-radius(2*$length);
}
#automatic:checked + label{
border: none;
}
input[type=checkbox]{
visibility: hidden;
}
@extend %flex-row-spb;
> p{
padding-left: 8*$length;
}
}
}
}
.login-card__footer{
width: 100%;
margin: 0 auto;
padding-top: 26*$length;
@extend %flex-row-center;
.img-box{
width: 40*$length;
height: 40*$length;
line-height: 40*$length;
background-color: #F4F8FA;
@include border-radius(50%);
@extend %cursorPointer;
> embed{
display: inline-block;
vertical-align: middle;
padding-bottom: 5*$length;
@extend %cursorPointer;
}
}
}
}
}
</style>
pages/index.vue deleted 100644 → 0
<template>
<div class="container">
<div>
<banner></banner>
<h1 class="title">
</h1>
<comment-card></comment-card>
<project-card></project-card>
<answer-card></answer-card>
<my-answer></my-answer>
<topic-list-card></topic-list-card>
<fan-card></fan-card>
<card-container
title="最新回答"
label="换一换"
more="加载更多"
width="938px"
height="786px"
></card-container>
<card-container
title="热门项目"
label="更新"
more="更多项目"
width="302px"
height="446px"
></card-container>
<nav-wrap></nav-wrap>
<alerts-card></alerts-card>
<topic-card></topic-card>
<error-card></error-card>
<empty-card lineHeight="690px"></empty-card>
<h2 class="subtitle" @click="showAlert">
beyond-clouds project
</h2>
</div>
</div>
</template>
<script>
import Banner from '../components/pc/banner';
import ProjectCard from '../components/pc/projectCard';
import Pagination from '../components/pc/pagination';
import Avatar from '../components/common/avatar/avatar';
import CommentCard from '../components/pc/commentCard';
import AnswerCard from '../components/pc/answerCard';
import MyAnswer from '../components/pc/myAnswer';
import TopicListCard from '../components/pc/topicListCard';
import FanCard from '../components/pc/fanCard';
import CardContainer from '../components/pc/cardContainer';
import NavWrap from '../components/pc/nav/navWrap';
import AlertsCard from '../components/pc/altersMessage/alertsCard';
import TopicCard from '../components/pc/topicCard';
import ErrorCard from '../components/pc/errorCard';
import EmptyCard from "../components/pc/emptyCard";
export default {
data(){
return{
hello:'fasdfasf'
}
},
components:{
Banner,ProjectCard,Pagination,Avatar,CommentCard,FanCard,AnswerCard,MyAnswer,TopicListCard,
CardContainer,NavWrap,AlertsCard,TopicCard,ErrorCard,EmptyCard
},
methods:{
showAlert(){
// $alert 使用方法
this.$alert('确认清空消息列表？', '', {
confirmButtonText: '确定',
// callback: action => {
// this.$message({
// type: 'info',
// message: `action: ${ action }`,
// confirmButtonPosition: 'left',
// });
// }
});
}
},
mounted(){
// message 使用方法
// this.$message({
// message:'hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello',
// type:'info'
// })
}
}
</script>
<style scoped>
.container {
margin: 0 auto;
min-height: 300vh;
display: flex;
/*background-color: #fff;*/
justify-content: center;
align-items: center;
text-align: center;
}
.title {
font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
display: block;
font-weight: 300;
font-size: 100px;
color: #35495e;
letter-spacing: 1px;
}
.subtitle {
font-weight: 300;
font-size: 42px;
color: #526488;
word-spacing: 5px;
padding-bottom: 15px;
}
.links {
padding-top: 15px;
}
</style>
pages/users/login.vue 0 → 100644
<template>
<div class="login-container">
<div class="login-center">
<div class="login-header">
<embed src="../../assets/svg/whiteLogo.svg" width="111" height="26"
type="image/svg+xml"
pluginspage="http://www.adobe.com/svg/viewer/install/" />
<div class="header-register" @click="handleRegister">注册</div>
</div>
<login-card
class="login-card-container"
title1="密码登录"
title2="短信登录"
button="登录"
@login="handleLogin"
></login-card>
<div class="login-footer">Copyright © 2019 云里云外开源社区 All Rights Reserved · 京ICP备 1234567891号-11</div>
</div>
</div>
</template>
<script>
import LoginCard from '../../components/pc/loginCard';
export default {
name: "index",
layout: 'blank',
components: {
LoginCard
},
methods:{
handleLogin(way, account, password, phone, verification) {
console.log(way);
console.log(account);
console.log(password);
console.log(phone);
console.log(verification);
},
// 跳转注册页面
handleRegister(){
this.$router.push('/users/register');
}
}
}
</script>
<style lang="scss" scoped>
.login-container{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-image: url("../../assets/img/background.png");
background-repeat: no-repeat;
background-size: cover;
.login-center{
width: $pageWidth;
height: 100%;
margin: 0 auto;
@extend %flex-column-spb;
.login-header{
width: 100%;
margin-top: 20*$length;
@extend %flex-row-spb;
@include fontStyle(14,20,500,#fff,left);
.header-register{
@extend %cursorPointer;
}
}
.login-footer{
margin-bottom: 30*$length;
@include fontStyle(12,17,500,#fff,center);
cursor: default;
}
}
}
</style>
pages/users/register.vue 0 → 100644
<template>
</template>
<script>
export default {
name: "register"
}
</script>
<style scoped>
</style>
pages/users/reset.vue 0 → 100644
<template>
<div class="login-container">
<page-header></page-header>
<login-card
class="login-card-container"
button="重置账号"
@login="handleReset"
></login-card>
</div>
</template>
<script>
import PageHeader from '../../components/pc/pageHeader';
import LoginCard from '../../components/pc/loginCard';
export default {
name: "index",
layout: 'blank',
components: {
LoginCard, PageHeader
},
methods:{
handleReset(way, account, password, phone, verification) {
console.log(way);
console.log(account);
console.log(password);
console.log(phone);
console.log(verification);
}
}
}
</script>
<style lang="scss" scoped>
.login-container{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #F0F6F8;
.login-card-container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment