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
6256e90a
Commit
6256e90a
authored
Jan 14, 2020
by
yanju
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
banner.vue and projectCard.vue
parent
f320606b
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
584 additions
and
5 deletions
+584
-5
components/common/icon/src/icon.vue
+14
-5
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
View file @
6256e90a
<
template
>
<i
:class=
"'iconfont yun-icon--' + name"
:style=
"
{fontSize:size,color:nowColor,transition:'.5s ease',cursor:cursor,verticalAlign:
'middle'
}" @mouseenter="changeStyle1" @mouseout="changeStyle2">
</i>
<i
:class=
"'iconfont yun-icon--' + name"
:style=
"
{fontSize:size,color:nowColor,transition:'.5s ease',cursor:cursor,verticalAlign:
vertical
}" @mouseenter="changeStyle1" @mouseout="changeStyle2">
</i>
</
template
>
<
script
>
...
...
@@ -10,7 +10,10 @@
name
:
String
,
size
:
Number
,
color
:
String
,
hoverColor
:
String
,
hoverColor
:{
type
:
String
,
},
vertical
:
String
,
canClick
:{
type
:
Boolean
,
default
:
true
,
...
...
@@ -28,12 +31,18 @@
methods
:{
changeStyle1
(){
this
.
prevColor
=
this
.
nowColor
;
this
.
nowColor
=
this
.
hoverColor
;
if
(
this
.
hoverColor
){
this
.
prevColor
=
this
.
nowColor
;
this
.
nowColor
=
this
.
hoverColor
;
}
},
changeStyle2
(){
this
.
hoverColor
=
this
.
nowColor
;
if
(
this
.
hoverColor
){
this
.
hoverColor
=
this
.
nowColor
;
this
.
nowColor
=
this
.
prevColor
;
}
}
}
};
...
...
components/pc/banner.vue
0 → 100644
View file @
6256e90a
<
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 @
6256e90a
<
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 @
6256e90a
...
...
@@ -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