Skip to content

B
beyond-clouds-front
Commit 2711fd9a by 高浩杰
Options

finish about

parent aa3ca6f4
Showing with 204 additions and 37 deletions
components/pc/cardContainer.vue
......@@ -8,7 +8,7 @@
<div class="header-right">{{label}}</div>
</div>
<slot></slot>
<div class="card-container__footer">
<div class="card-container__footer" v-if="more">
<span>{{more}}</span>
</div>
</div>
......
components/pc/loginCard.vue
......@@ -5,9 +5,9 @@
<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 :class="{headerTitle: isPassword}" @click="handleLoginPassword">{{title1}}</span>
<span> · </span>
<span :class="{headerTitle: !isPassword}" @click="handleLoginCode">短信登录</span>
<span :class="{headerTitle: !isPassword}" @click="handleLoginCode">{{title2}}</span>
</div>
<div class="login-card__main">
<input type="text" placeholder="请输入手机号或邮箱" maxlength="20" v-model="account" :class="{active: isError}" v-if="isPassword">
......@@ -40,12 +40,14 @@
<div class="input-box">
<input id="automatic" type="checkbox">
<label for="automatic"></label >
<p>下次自动登录</p>
<p v-if="commitment === '1'">下次自动登录</p>
<p v-if="commitment === '2'">我已阅读并同意<span>用户协议</span>和<span>隐私政策</span></p>
</div>
<div>
<span @click="handleReset">忘记密码</span>
<span> · </span>
<span>注册</span>
<span v-if="button !== '注册'" @click="handleRegister">注册</span>
<span v-if="button === '注册'" @click="handleLogin">登录</span>
</div>
</div>
</div>
......@@ -71,7 +73,8 @@ export default {
props: {
title1: String,
title2: String,
button: String
button: String,
commitment: String // 承诺协议
},
data(){
return{
......@@ -87,6 +90,7 @@ export default {
verification: '', // 储存验证码
countdown: 60, // 倒计时时长
errorMessage: '' // 错误提示信息
}
},
created() {
......@@ -135,6 +139,14 @@ export default {
// 跳转忘记密码
handleReset(){
this.$router.push('/users/reset');
},
// 跳转登录
handleLogin(){
this.$router.push('/users/login');
},
// 跳转注册
handleRegister(){
this.$router.push('/users/register');
}
},
watch:{
......@@ -247,6 +259,7 @@ export default {
@extend %cursorPointer;
}
> .input-box{
text-align: left;
/*label标签的大小、位置、背景颜色更改，在css选择时，“+”代表相邻元素，即当前元素的下一元素*/
#automatic +label{
display: block;
......@@ -275,11 +288,14 @@ export default {
border: none;
}
input[type=checkbox]{
visibility: hidden;
display: none;
}
@extend %flex-row-spb;
> p{
padding-left: 8*$length;
> span{
color: #666;
}
}
}
}
......
components/pc/nav/navCard.vue
......@@ -4,24 +4,22 @@
<div class="nav-card__container">
<div
class="nav-card__label"
:style="{backgroundColor:bgColor}"
:style="{backgroundColor: isBlue ? '#00AAE6' : '#fff'}"
></div>
<p :style="{color:fontColor}">
<nuxt-link tag="p" :to="navAddress" :style="{color:fontColor}">
<slot></slot>
</p>
<transition name="fade">
<div class="nav-card__menu" v-if="isShow===true" @mouseleave="handleMouseLeave">
</nuxt-link>
<div class="nav-card__menu" v-if="isShow===true && childList !== undefined" @mouseleave="handleMouseLeave">
<div class="arrow"></div>
<div class="label-list-box">
<nuxt-link
class="label-list"
v-for="(item, key) in labelList"
:key="`${item}${key}`" to="/">
{{item}}
v-for="(item, key) in childList"
:key="`${item}${key}`" :to="item.address">
{{item.label}}
</nuxt-link>
</div>
</div>
</transition>
</div>
</div>
</div>
......@@ -31,26 +29,36 @@
export default {
name: "navCard",
props: {
labelList: Array
childList: Array,
navAddress: String
},
data(){
return{
fontColor: '#666',
bgColor: '#fff',
isShow: false,
labelList: ['文件管理','多媒体','文本编辑','应用软件','IM及时聊天']
isBlue: false
}
},
methods:{
handleMouseLeave(){
this.isShow=false;
this.fontColor = '#666';
this.bgColor = '#fff';
},
handleMouseOver(){
this.isShow=true;
this.fontColor = '#00AAE6';
this.bgColor = '#00AAE6';
}
},
watch:{
$route(to,from){
this.isBlue = this.$route.path.indexOf(this.navAddress) !== -1;
}
},
created() {
console.log(this.$route.path);
if (this.$route.path.indexOf(this.navAddress) !== -1){
this.isBlue = true;
}
}
}
......@@ -62,6 +70,9 @@ export default {
padding-bottom: 18*$length;
.nav-card__container{
position: relative;
@include fontStyle(14,18,500,#666,left);
@extend %cursorPointer;
@extend %animate-transition;
@extend %flex-row-spb;
justify-content: flex-start;
.nav-card__label{
......@@ -72,9 +83,11 @@ export default {
}
> p{
width: 100%;
@include fontStyle(14,18,500,#666,center);
@extend %cursorPointer;
@extend %animate-transition;
padding-left: 14*$length;
.nav-card__label2{
margin-left: 14*$length;
background-color: #fff;
}
}
.nav-card__menu{
position: absolute;
......@@ -83,6 +96,7 @@ export default {
top: 25*$length;
background-color: #fff;
@include box-shadow(0 6*$length 20*$length rgba(0,0,0,.1));
@include border-radius(4*$length);
.label-list-box{
box-sizing: border-box;
width: 308*$length;
......
components/pc/nav/navWrap.vue
<template>
<div class="nav-wrap">
<div class="nav-wrap" :style="{ width: width, height: height}">
<nav-card
v-for="(item,index) in list"
:key="item"
:labelList="labelList"
>{{item}}</nav-card>
:key="item.address"
:navAddress="item.address"
:childList="item.childList"
>{{item.label}}</nav-card>
</div>
</template>
......@@ -16,13 +17,13 @@ export default {
NavCard
},
props: {
list: Array,
width: String,
height: String
},
data(){
return{
color: '',
labelList: ['asd','仍在你','前端'],
list: ['java','javascript','web']
color: ''
}
}
}
......@@ -30,10 +31,10 @@ export default {
<style lang="scss" scoped>
.nav-wrap{
display: inline-block;
background-color: #fff;
padding-top: 21*$length;
padding-bottom: 74*$length;
width: 106*$length;
@include border-radius(4*$length);
}
</style>
components/pc/pageFooter.vue
......@@ -57,6 +57,7 @@ export default {
.bc-layout-container-footer {
width: 100%;
background-color: #fff;
z-index: 7000;
.footer-center {
width: $pageWidth;
margin: 0 auto;
......
pages/index.vue
......@@ -21,6 +21,7 @@
<h2 class="subtitle" @click="showAlert">
beyond-clouds project
</h2>
<nav-wrap></nav-wrap>
</div>
</div>
</template>
......
pages/users/index.vue
<template></template>
<script>
export default {
created() {
this.$router.replace('/users/login');
}
}
</script>
pages/users/login.vue
......@@ -11,6 +11,7 @@
class="login-card-container"
title1="密码登录"
title2="短信登录"
commitment="1"
button="登录"
@login="handleLogin"
></login-card>
......
pages/users/register.vue
<template>
<div class="register-container">
<login-card
class="register-card-container"
title1="手机号注册"
title2="邮箱号注册"
commitment="2"
button="注册"
@login="handleRegister"
></login-card>
</div>
</template>
<script>
import LoginCard from '../../components/pc/loginCard';
export default {
name: "register"
name: "register",
components: {
LoginCard
},
methods:{
handleRegister(way, account, password, phone, verification) {
console.log(way);
console.log(account);
console.log(password);
console.log(phone);
console.log(verification);
}
}
}
</script>
<style scoped>
<style lang="scss" scoped>
.register-container{
margin: 136*$length 0;
.register-card-container{
margin: 0 auto;
}
}
</style>
pages/users/reset.vue
......@@ -4,6 +4,7 @@
<login-card
class="login-card-container"
button="重置账号"
commitment="2"
@login="handleReset"
></login-card>
</div>
......@@ -37,7 +38,7 @@ export default {
bottom: 0;
left: 0;
right: 0;
background-color: #F0F6F8;
background-image: $bgImage;
.login-card-container{
position: absolute;
top: 50%;
......
pages/web.vue 0 → 100644
<template>
<div class="web-container">
<div class="web-center">
<div class="web-center__nav">
<nav-wrap
:list="list"
width="302px"
height="252px"
></nav-wrap>
</div>
<div class="web-center__content">
<nuxt-child></nuxt-child>
</div>
</div>
</div>
</template>
<script>
import NavWrap from "../components/pc/nav/navWrap";
export default {
name: "web",
components: {
NavWrap
},
data(){
return{
list: [
{
label:'关于我们',
address:'/web/about'
},
{
label:'联系我们',
address:'/web/contact'
}
]
}
}
}
</script>
<style lang="scss" scoped>
/deep/ .nuxt-link-exact-active{
color: #00AAE6 !important;
}
.web-container{
.web-center{
width: $pageWidth;
margin: 16*$length auto 0;
@extend %flex-row-spb;
align-items: start;
}
}
</style>
pages/web/about.vue 0 → 100644
<template>
<card-container
title="关于我们"
width="938px"
height="400px"
style="margin-bottom: 356px"
>
<div class="about-container">
<p>云里云外开源社区</p>
<p style="text-indent:32px;">开源社区又称开放源代码社区。云里云外开源社区由云顶书院的程序员发起，致力于打造一个契合中国本土开发者的开源平台，为中国互联网行业的软件开源工作服务，促进互联网开发者的开源、共享、创新的精神，推动国产软件发展，为企业和高校提供大量精品项目和项目源代码，为新型互联网人才培育和互联网下新产业的发展打下坚实基础。</p>
<p style="text-indent:32px;">云里云外开源社区由开源社区和代码托管平台构成，开源社区致力于构建一个契合中国本土开发者的开发者交流社区，开发者们可以在社区里发布开源项目，检索开源项目，发布问答，回答问题等。代码托管平台致力于为开发者提供一个代码托管和团队高效协作的平台，开发者可以在此平台上创建项目和团队，开发者们可以在此平台上共同开发和维护开源项目。</p>
</div>
</card-container>
</template>
<script>
import CardContainer from "../../components/pc/cardContainer";
export default {
name: "about",
components: {CardContainer}
}
</script>
<style lang="scss" scoped>
.about-container{
padding: 24*$length;
@include fontStyle(16,30,500,#666,left);
}
</style>
pages/web/contact.vue 0 → 100644
<template>
<h1>2334567890</h1>
</template>
<script>
export default {
name: "contact"
}
</script>
<style scoped>
</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