Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
B
beyond-clouds-front
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Administrator
beyond-clouds-front
Commits
2711fd9a
Commit
2711fd9a
authored
Jan 19, 2020
by
高浩杰
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
finish about
parent
aa3ca6f4
Hide whitespace changes
Inline
Side-by-side
Showing
13 changed files
with
205 additions
and
38 deletions
+205
-38
components/pc/cardContainer.vue
+1
-1
components/pc/loginCard.vue
+23
-7
components/pc/nav/navCard.vue
+30
-16
components/pc/nav/navWrap.vue
+10
-9
components/pc/pageFooter.vue
+1
-0
pages/index.vue
+1
-0
pages/users/index.vue
+8
-0
pages/users/login.vue
+1
-0
pages/users/register.vue
+32
-4
pages/users/reset.vue
+2
-1
pages/web.vue
+54
-0
pages/web/about.vue
+29
-0
pages/web/contact.vue
+13
-0
No files found.
components/pc/cardContainer.vue
View file @
2711fd9a
...
...
@@ -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
View file @
2711fd9a
...
...
@@ -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
{
...
...
@@ -86,7 +89,8 @@ export default {
password
:
''
,
// 储存密码
verification
:
''
,
// 储存验证码
countdown
:
60
,
// 倒计时时长
errorMessage
:
''
// 错误提示信息
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
View file @
2711fd9a
...
...
@@ -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
label
List"
:key=
"`$
{item}${key}`"
to="/
">
{{
item
}}
v-for=
"(item, key) in
child
List"
: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
View file @
2711fd9a
<
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
View file @
2711fd9a
...
...
@@ -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
View file @
2711fd9a
...
...
@@ -21,6 +21,7 @@
<h2
class=
"subtitle"
@
click=
"showAlert"
>
beyond-clouds project
</h2>
<nav-wrap></nav-wrap>
</div>
</div>
</
template
>
...
...
pages/users/index.vue
View file @
2711fd9a
<
template
></
template
>
<
script
>
export
default
{
created
()
{
this
.
$router
.
replace
(
'/users/login'
);
}
}
</
script
>
pages/users/login.vue
View file @
2711fd9a
...
...
@@ -11,6 +11,7 @@
class=
"login-card-container"
title1=
"密码登录"
title2=
"短信登录"
commitment=
"1"
button=
"登录"
@
login=
"handleLogin"
></login-card>
...
...
pages/users/register.vue
View file @
2711fd9a
<
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
View file @
2711fd9a
...
...
@@ -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
View file @
2711fd9a
<
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
View file @
2711fd9a
<
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
View file @
2711fd9a
<
template
>
<h1>
2334567890
</h1>
</
template
>
<
script
>
export
default
{
name
:
"contact"
}
</
script
>
<
style
scoped
>
</
style
>
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment