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
40f4fc6d
Commit
40f4fc6d
authored
Jan 14, 2020
by
高浩杰
Browse files
Options
Browse Files
Download
Plain Diff
footer
parents
8863fc1c
1eac77f4
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
616 additions
and
0 deletions
+616
-0
components/common/icon/src/icon.vue
+46
-0
components/pc/banner.vue
+340
-0
components/pc/projectCard.vue
+222
-0
pages/index.vue
+8
-0
No files found.
components/common/icon/src/icon.vue
0 → 100644
View file @
40f4fc6d
<
template
>
<i
:class=
"'iconfont yun-icon--' + name"
:style=
"
{fontSize:size,color:nowColor,transition:'.5s ease',cursor:cursor,verticalAlign:'middle'}" @mouseenter="changeStyle1" @mouseout="changeStyle2">
</i>
</
template
>
<
script
>
export
default
{
name
:
'yunIcon'
,
props
:
{
name
:
String
,
size
:
Number
,
color
:
String
,
hoverColor
:
String
,
canClick
:{
type
:
Boolean
,
default
:
true
,
},
},
data
(){
return
{
prevColor
:
''
,
nowColor
:
this
.
color
,
cursor
:
this
.
canClick
?
'pointer'
:
'auto'
}
},
methods
:{
changeStyle1
(){
if
(
this
.
hoverColor
){
this
.
prevColor
=
this
.
nowColor
;
this
.
nowColor
=
this
.
hoverColor
;
}
},
changeStyle2
(){
if
(
this
.
hoverColor
){
this
.
hoverColor
=
this
.
nowColor
;
this
.
nowColor
=
this
.
prevColor
;
}
}
}
};
</
script
>
components/pc/banner.vue
0 → 100644
View file @
40f4fc6d
<
template
>
<div
class=
"banner-card__wrap"
>
<div
class=
"banner-card"
v-if=
"bannerType===1"
>
<img
class=
"banner-card__img"
:src=
"imgArr[currentImg]"
:style=
"
{opacity:imgOpacity}" alt="" >
<div
class=
"banner-card__left-arrow"
@
click=
"clickToGetPrePic"
>
<p>
<yun-icon
name=
"left_arrow"
color=
"#fff"
></yun-icon>
</p>
</div>
<div
class=
"banner-card__right-arrow"
@
click=
"clickToGetNextPic"
>
<yun-icon
name=
"left_arrow"
color=
"#fff"
></yun-icon>
</div>
<div
class=
"banner-card__progress"
>
<p
v-for=
" (val,index) in imgArr"
@
click=
"clickToPointPic(index)"
:class=
"index===currentImg?'banner-card__progress-dot':''"
></p>
</div>
</div>
<div
class=
"banner-card2"
v-if=
"bannerType===2"
>
<div
class=
"banner-card2__bigImg"
>
<img
:src=
"imgArr[currentImg]"
alt=
""
>
</div>
<div
class=
"banner-card2__longBox"
:style=
"showAllImg?
{whiteSpace:'normal'}:{}">
<div
:class=
"index===currentImg?'banner-card2__littleImg--active':'banner-card2__littleImg'"
:style=
"(index+1)%9===0?
{marginRight:0}:{}" v-for=" (val,index) in card2ImgArr" @click="clickToPointPic(index)" >
<img
:src=
"card2ImgArr[index]"
alt=
""
>
<p
v-if=
"!showAllImg&&(index+1)%9===0"
@
click=
"clickToShowAllImg"
class=
"hideImgNum"
>
+
{{
hideImgNum
}}
</p>
</div>
</div>
</div>
</div>
</
template
>
<
script
>
export
default
{
name
:
'banner'
,
data
(){
return
{
imgSrc
:
''
,
imgArr
:[
'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'
,
'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/22e2d91201a2478683044f116d1d8186-file'
,
'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/161fecb3d8b441c5b340319c62508513-file'
,
'https://s2.ax1x.com/2020/01/13/lHpvY4.png'
,
'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'
,
'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/22e2d91201a2478683044f116d1d8186-file'
,
'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/161fecb3d8b441c5b340319c62508513-file'
,
'https://s2.ax1x.com/2020/01/13/lHpvY4.png'
,
'http://i1.sinaimg.cn/ent/d/2008-06-04/U105P28T3D2048907F326DT20080604225106.jpg'
,
'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/22e2d91201a2478683044f116d1d8186-file'
,
'https://yundingweb.oss-cn-beijing.aliyuncs.com/yunding/20190828/161fecb3d8b441c5b340319c62508513-file'
,
'https://s2.ax1x.com/2020/01/13/lHpvY4.png'
,
],
playTime
:
3000
,
currentImg
:
0
,
imgOpacity
:
1
,
opacityTime
:
500
,
bannerTimer
:
null
,
bannerType
:
1
,
autoPlay
:
true
,
card2ImgArr
:[],
hideImgNum
:
0
,
showAllImg
:
false
,
}
},
mounted
(){
this
.
initBanner
();
this
.
stateChangeCard2ImgArr
();
},
methods
:{
//初始化轮播图
initBanner
(){
clearInterval
(
this
.
bannerTimer
)
if
(
this
.
autoPlay
){
this
.
bannerTimer
=
setInterval
(()
=>
{
let
{
imgArr
,
currentImg
}
=
this
;
let
length
=
imgArr
.
length
;
if
(
currentImg
<
length
-
1
){
this
.
currentImg
=
currentImg
+
1
;
}
else
{
this
.
currentImg
=
0
;
}
},
this
.
playTime
)
}
},
//点击到下一张轮播图
clickToGetNextPic
(){
let
{
currentImg
}
=
this
;
let
length
=
this
.
imgArr
.
length
;
if
(
currentImg
<
length
-
1
){
this
.
currentImg
=
currentImg
+
1
;
}
else
{
this
.
currentImg
=
0
;
}
this
.
initBanner
();
},
//点击到上一张轮播图
clickToGetPrePic
(){
let
{
currentImg
}
=
this
;
let
length
=
this
.
imgArr
.
length
;
if
(
currentImg
>
0
){
this
.
currentImg
=
currentImg
-
1
;
}
else
{
this
.
currentImg
=
length
-
1
;
}
this
.
initBanner
();
},
//点击到指定轮播图
clickToPointPic
(
index
){
this
.
currentImg
=
index
;
this
.
initBanner
()
},
//将图片读到card2ImgArr中
stateChangeCard2ImgArr
(){
let
imgArr
=
this
.
imgArr
;
if
(
imgArr
.
length
>
9
){
this
.
card2ImgArr
=
imgArr
.
slice
(
0
,
9
);
this
.
hideImgNum
=
imgArr
.
length
-
9
;
}
},
//展示card2中所有图片
clickToShowAllImg
(){
this
.
showAllImg
=
true
;
this
.
card2ImgArr
=
this
.
imgArr
}
}
}
</
script
>
<
style
lang=
"scss"
scoped
>
.banner-card__wrap
{
.banner-card{
position
:
relative
;
height
:
376
*$
length
;
width
:
938
*$
length
;
background-color
:
#9989
;
border-radius
:
4
*$
length
;
text-align
:
center
;
overflow
:
hidden
;
@extend
%flex-column-center;
&:hover{
.banner-card__left-arrow{
transform
:
rotateY
(
0
);
}
.banner-card__right-arrow
{
transform
:
rotateY
(
0
);
}
}
.banner-card__img
{
display
:
block
;
height
:
100%
;
width
:
auto
;
}
.banner-card__left-arrow
{
position
:
absolute
;
top
:
50%
;
left
:
0
;
margin-top
:
-38
*$
length
;
height
:
76
*$
length
;
width
:
36
*$
length
;
background-color
:
rgba
(
0
,
0
,
0
,
.1
)
;
border-radius
:
0
10
*$
length
10
*$
length
0
;
@extend
%flex-column-center;
>
p{
width
:
100%
;
height
:
100%
;
@extend
%flex-column-center;
transform
:
rotate
(
180deg
);
}
transform-origin
:
left
;
transform
:
rotateY
(
-90deg
);
@extend
%
animate-transition
;
@extend
%
cursorPointer
;
}
.banner-card__right-arrow
{
position
:
absolute
;
top
:
50%
;
right
:
0
;
margin-top
:
-38
*$
length
;
height
:
76
*$
length
;
width
:
36
*$
length
;
background-color
:
rgba
(
0
,
0
,
0
,
.1
)
;
border-radius
:
10
*$
length
0
0
10
*$
length
;
@extend
%flex-column-center;
@extend
%animate-transition;
@extend
%cursorPointer;
transform-origin
:
right
;
transform
:
rotateY
(
90deg
)
}
.banner-card__progress
{
position
:
absolute
;
bottom
:
16
*$
length
;
width
:
100%
;
margin
:
0
auto
;
@extend
%flex-row-center;
p{
width
:
16
*$
length
;
height
:
4
*$
length
;
margin
:
0
5
*$
length
;
border-radius
:
2
*$
length
2
*$
length
0
0
;
background-color
:
rgba
(
255
,
255
,
255
,
.4
);
@extend
%animate-transition;
@extend
%cursorPointer;
&:hover{
background-color
:
rgba
(
255
,
255
,
255
,
1
);
}
}
.banner-card__progress-dot
{
background-color
:
rgba
(
255
,
255
,
255
,
1
);
}
}
}
.banner-card2
{
width
:
768
*$
length
;
background-color
:
transparent
;
.banner-card2__bigImg{
width
:
768
*$
length
;
height
:
482
*$
length
;
background-color
:
#BDBCD1
;
@extend
%flex-column-center;
border-radius
:
4
*$
length
;
box-sizing
:
border-box
;
&
img{
max-height
:
calc
(
100%
-
5px
);
max-width
:
calc
(
100%
-
5px
);
}
}
.banner-card2__longBox
{
@extend
%inlineBlockV;
overflow-x
:
hidden
;
/*white-space: nowrap;*/
text-align
:
left
;
box-sizing
:
border-box
;
.banner-card2__littleImg{
margin-top
:
16
*$
length
;
width
:
80
*$
length
;
height
:
80
*$
length
;
border
:
1px
solid
transparent
;
box-sizing
:
border-box
;
//
background-color
:
#BDBCD1
;
opacity
:
.6
;
position
:
relative
;
border-radius
:
4
*$
length
;
margin-right
:
6
*$
length
;
display
:
inline-block
;
@extend
%inlineBlockV;
text-align
:
center
;
&:hover{
opacity
:
1
;
}
.hideImgNum
{
box-sizing
:
border-box
;
position
:
absolute
;
top
:
0
;
right
:
0
;
width
:
100%
;
background-color
:
rgba
(
34
,
34
,
34
,
.3
);
@include
fontStyle(16,70,500,#fff,center);
height
:
100%
;
}
&
img
{
vertical-align
:
middle
;
max-height
:
calc
(
100%
-
5px
);
max-width
:
calc
(
100%
-
5px
);
}
}
.banner-card2__littleImg--active
{
border
:
1px
solid
#00AAE6
;
box-sizing
:
border-box
;
position
:
relative
;
margin-top
:
16
*$
length
;
width
:
80
*$
length
;
height
:
80
*$
length
;
border-radius
:
4
*$
length
;
margin-right
:
6
*$
length
;
display
:
inline-block
;
opacity
:
1
;
@extend
%inlineBlockV;
text-align
:
center
;
.hideImgNum{
position
:
absolute
;
top
:
0
;
right
:
0
;
width
:
100%
;
background-color
:
rgba
(
34
,
34
,
34
,
.3
);
@include
fontStyle(16,70,500,#fff,center);
height
:
100%
;
}
&
img
{
vertical-align
:
middle
;
max-height
:
calc
(
100%
-
5px
);
max-width
:
calc
(
100%
-
5px
);
}
}
}
}
}
</
style
>
components/pc/projectCard.vue
0 → 100644
View file @
40f4fc6d
<
template
>
<div
class=
"project-card__wrap"
>
<div
class=
"project-card"
>
<div
class=
"project-card__left"
>
<div
class=
"project-card__header"
>
<p
class=
"title"
>
开源社区
</p>
<div
class=
"icon-box"
>
<p
class=
"icon"
>
<yun-icon
name=
"hot"
size=
"12px"
color=
"#fff"
></yun-icon>
</p>
<p
class=
"icon"
>
<yun-icon
name=
"like2"
size=
"12px"
color=
"#fff"
></yun-icon>
</p>
</div>
<div
class=
"label-box"
v-if=
"cardType===1"
>
<p>
前端
</p>
<p>
js
</p>
<p>
java
</p>
<p>
python
</p>
</div>
</div>
<p
class=
"project-card__body"
>
引言 如今我们所处的时代,是
<span>
# 移动互联网时代 #
</span>
,也可以说是视无铁也知什别立目百效得革金,提出频时代。从快播到抖音,从“三生三世...
引言 如今我们所处的时代,是
<span>
# 移动互联网时代 #
</span>
,也可以说是视无铁也知什别立目百效得革金,提出频时代。从快播到抖音,从“三生三世...
引言 如今我们所处的时代,是
<span>
# 移动互联网时代 #
</span>
,也可以说是视无铁也知什别立目百效得革金,提出频时代。从快播到抖音,从“三生三世...
</p>
<div
class=
"project-card__footer"
v-if=
"cardType!==3"
>
<p
class=
"info-left"
>
jetris
<span>
·
</span>
4小时前
</p>
<div
class=
"info-right"
>
<div
class=
"icon-box"
>
<yun-icon
name=
"star"
size=
"12px"
vertical=
"top"
color=
"#ccc"
></yun-icon>
<span>
4
</span>
</div>
<div
class=
"icon-box"
>
<yun-icon
name=
"like1"
size=
"12px"
vertical=
"top"
color=
"#ccc"
></yun-icon>
<span>
4
</span>
</div>
<div
class=
"icon-box"
>
<yun-icon
name=
"view"
size=
"12px"
vertical=
"top"
color=
"#ccc"
></yun-icon>
<span>
4
</span>
</div>
</div>
<div
class=
"label-box"
v-if=
"cardType===2"
>
<p>
前端
</p>
<p>
js
</p>
<p>
java
</p>
<p>
python
</p>
</div>
</div>
</div>
<div
class=
"project-card__right"
>
<img
:src=
"src"
alt=
""
>
</div>
</div>
</div>
</
template
>
<
script
>
export
default
{
name
:
'projectCard'
,
data
(){
return
{
src
:
'https://s2.ax1x.com/2020/01/13/lHpvY4.png'
,
cardType
:
3
,
//(props)1、项目 2、博客 3、资讯
info
:{}
//(props)
}
}
}
</
script
>
<
style
lang=
"scss"
>
.project-card__wrap
{
.project-card{
@extend
%cursorPointer;
box-sizing
:
border-box
;
padding
:
0
20
*$
length
24
*$
length
;
width
:
938
*$
length
;
border-bottom
:
1px
dashed
#EFEFEF
;
@extend
%flex-row-spb;
align-items
:
flex-start
;
.project-card__left{
.project-card__header{
@extend
%flex-row-spb;
justify-content
:
flex-start
;
>
.title{
@extend
%animate-transition;
@include
fontStyle(18,24,500,#222,left);
}
>
.icon-box
{
margin-left
:
15
*$
length
;
@extend
%flex-row-spb;
justify-content
:
flex-start
;
>
.icon{
margin-right
:
10
*$
length
;
width
:
20
*$
length
;
height
:
20
*$
length
;
border-radius
:
2
*$
length
;
@extend
%flex-column-center;
background-color
:
#FF7474
;
}
}
>
.label-box
{
margin-left
:
5
*$
length
;
@extend
%flex-row-spb;
justify-content
:
flex-start
;
>
p{
margin-right
:
10
*$
length
;
padding
:
2
*$
length
8
*$
length
;
background-color
:
#F4F8FA
;
@include
fontStyle(12,16,500,#999,center);
@extend
%animate-transition;
@extend
%cursorPointer;
&:hover{
background-color
:
rgba
(
0
,
170
,
230
,
.2
);
color
:
rgba
(
0
,
170
,
230
,
1
);
}
}
}
}
.project-card__body
{
margin-top
:
15
*$
length
;
@include
fontStyle(14,19,500,#666,left);
height
:
auto
;
>
span{
color
:
#00AAE6
;
}
}
.project-card__footer
{
margin-top
:
14
*$
length
;
@extend
%flex-row-spb;
justify-content
:
flex-start
;
.info-left{
@include
fontStyle(12,16,500,#999,left);
>
span{
margin
:
0
3
*$
length
;
}
}
.info-right
{
margin-left
:
38
*$
length
;
@extend
%flex-row-spb;
justify-content
:
flex-start
;
.icon-box{
@extend
%inlineBlockV;
margin-right
:
17
*$
length
;
>
span{
@include
fontStyle(14,19,500,#ccc,left);
margin-left
:
5
*$
length
;
vertical-align
:
top
;
}
}
}
>
.label-box
{
margin-left
:
5
*$
length
;
@extend
%flex-row-spb;
justify-content
:
flex-start
;
>
p{
margin-right
:
10
*$
length
;
padding
:
2
*$
length
8
*$
length
;
background-color
:
#F4F8FA
;
@include
fontStyle(12,16,500,#999,center);
@extend
%animate-transition;
@extend
%cursorPointer;
&:hover{
background-color
:
rgba
(
0
,
170
,
230
,
.2
);
color
:
rgba
(
0
,
170
,
230
,
1
);
}
}
}
}
}
.project-card__right
{
margin-left
:
12
*$
length
;
img{
max-width
:
280
*$
length
;
height
:
auto
;
@extend
%animate-transition;
}
}
&
:hover
{
.project-card__header
{
.title
{
color
:
#00AAE6
;
}
}
}
}
}
</
style
>
pages/index.vue
View file @
40f4fc6d
...
...
@@ -4,6 +4,7 @@
<h1
class=
"title"
>
beyond-clouds-front
</h1>
<project-card></project-card>
<h2
class=
"subtitle"
@
click=
"showAlert"
>
beyond-clouds project
</h2>
...
...
@@ -13,6 +14,9 @@
<
script
>
import
Banner
from
'../components/pc/banner'
;
import
ProjectCard
from
'../components/pc/projectCard'
;
export
default
{
data
(){
...
...
@@ -20,6 +24,10 @@ export default {
hello
:
'fasdfasf'
}
},
components
:{
Banner
,
ProjectCard
},
methods
:{
showAlert
(){
...
...
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