Commit 6f3ea27f by 高浩杰

finish login and reset

parent 4de0ccc3
This source diff could not be displayed because it is too large. You can view the blob instead.
<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">
<img src="../../assets/svg/null.svg" alt="">
</div>
......@@ -10,7 +10,7 @@
export default {
name: "emptyCard",
props: {
lineHeight: String
height: String
}
}
</script>
......
<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>
<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>
<template>
</template>
<script>
export default {
name: "register"
}
</script>
<style scoped>
</style>
<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