Skip to content

B
beyond-clouds-front
Commit 6256e90a by yanju
Options

banner.vue and projectCard.vue

parent f320606b
Showing with 581 additions and 2 deletions
components/common/icon/src/icon.vue
<template> <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> </template>
<script> <script>
...@@ -10,7 +10,10 @@ ...@@ -10,7 +10,10 @@
name: String, name: String,
size: Number, size: Number,
color: String, color: String,
hoverColor:String, hoverColor:{
type:String,
},
vertical:String,
canClick:{ canClick:{
type:Boolean, type:Boolean,
default:true, default:true,
...@@ -28,13 +31,19 @@ ...@@ -28,13 +31,19 @@
methods:{ methods:{
changeStyle1(){ changeStyle1(){
if(this.hoverColor){
this.prevColor=this.nowColor; this.prevColor=this.nowColor;
this.nowColor=this.hoverColor; this.nowColor=this.hoverColor;
}
}, },
changeStyle2(){ changeStyle2(){
if(this.hoverColor){
this.hoverColor=this.nowColor; this.hoverColor=this.nowColor;
this.nowColor=this.prevColor; this.nowColor=this.prevColor;
} }
}
} }
}; };
</script> </script>
components/pc/banner.vue 0 → 100644
<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
<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
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<h1 class="title"> <h1 class="title">
beyond-clouds-front beyond-clouds-front
</h1> </h1>
<project-card></project-card>
<h2 class="subtitle" @click="showAlert"> <h2 class="subtitle" @click="showAlert">
beyond-clouds project beyond-clouds project
</h2> </h2>
...@@ -13,6 +14,9 @@ ...@@ -13,6 +14,9 @@
<script> <script>
import Banner from '../components/pc/banner';
import ProjectCard from '../components/pc/projectCard';
export default { export default {
data(){ data(){
...@@ -20,6 +24,10 @@ export default { ...@@ -20,6 +24,10 @@ export default {
hello:'fasdfasf' hello:'fasdfasf'
} }
}, },
components:{
Banner,ProjectCard
},
methods:{ methods:{
showAlert(){ showAlert(){
......
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