189 lines
4.2 KiB
Vue
189 lines
4.2 KiB
Vue
<template>
|
|
<div class="home-news">
|
|
<div class="news-title">
|
|
<h3>小飞侠服务</h3>
|
|
<div class="circle"></div>
|
|
</div>
|
|
<div class="news-body">
|
|
<div class="news-item-cont"
|
|
v-for='obj in newsSoure' :key=obj.id>
|
|
<div class="ns-item">
|
|
<div class="out-border"></div>
|
|
<transition name='opa'>
|
|
<img :src="obj.imgSrc" v-if="isCmptShow" alt="小飞侠服务">
|
|
</transition>
|
|
<div class="item-body">
|
|
<h4>{{obj.title}}</h4>
|
|
<p>{{obj.article}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import newsBanner from './Banner'
|
|
export default {
|
|
data(){
|
|
return{
|
|
isCmptShow:false
|
|
}
|
|
},
|
|
props:{
|
|
newsSoure:Array
|
|
},
|
|
components:{
|
|
newsBanner
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../../style/mixin';
|
|
.home-news{
|
|
position: relative;
|
|
width: 100%;
|
|
margin-bottom: 10rem;
|
|
}
|
|
.news-title{
|
|
position: relative;
|
|
padding-bottom: 2rem;
|
|
background-color: #fff;
|
|
width: 97%;
|
|
margin: 0 auto;
|
|
z-index: 99;
|
|
h3{
|
|
$lateValue:-3rem;
|
|
overflow: hidden;
|
|
position: relative;
|
|
display: block;
|
|
font-size: 1rem;
|
|
letter-spacing: 0.1rem;
|
|
color: #666;
|
|
z-index: 66;
|
|
&:after,
|
|
&:before{
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
right: $lateValue;
|
|
top: 50%;
|
|
width: 50%;
|
|
height: 0.2rem;
|
|
background-color: #FFCCCC;
|
|
background-image: linear-gradient(to right, #97d9e1 0%, #fff 50%);
|
|
}
|
|
&:before{
|
|
left: $lateValue;
|
|
background-image: linear-gradient(to left, #97d9e1 0%, #fff 50%);
|
|
}
|
|
}
|
|
}
|
|
.circle{
|
|
$circle-w:6rem;
|
|
$circle-h:3rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
margin-top: -$circle-h +0.7rem;
|
|
margin-left: -$circle-h;
|
|
@include circle($circle-w,#fff);
|
|
&::after{
|
|
$moveValue:0.5rem;
|
|
content:'';
|
|
display: block;
|
|
position: absolute;
|
|
@include circle($circle-w +$moveValue,#97d9e1);
|
|
margin-left: -$moveValue /2;
|
|
margin-top: -$moveValue /2;
|
|
z-index: -1;
|
|
}
|
|
}
|
|
.news-body{
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
width: 95%;
|
|
margin: 0.05rem auto 0;
|
|
padding-bottom: 5rem;
|
|
@include box-shadow(0 0 0.3rem 0.3rem #ccc);
|
|
cursor: pointer;
|
|
}
|
|
.news-item-cont{
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.out-border{
|
|
position: absolute;
|
|
top: 1rem;
|
|
left: -2rem;
|
|
width: 50%;
|
|
height: 1rem;
|
|
background-color: #00f2fe;
|
|
@include rotate(-45deg);
|
|
@include box-shadow(0 0 3px 1px #4facfe);
|
|
z-index: 99;
|
|
}
|
|
.ns-item{
|
|
position: relative;
|
|
display: flex;
|
|
overflow: hidden;
|
|
margin-top: 4rem;
|
|
@include box-shadow(0.5rem 0.5rem 3px #666);
|
|
img{
|
|
display: block;
|
|
width: 15rem;
|
|
height: 20rem;
|
|
@include transition(.5s);
|
|
}
|
|
&:hover img{
|
|
@include set-opacity(0.5);
|
|
@include scale(1.1);
|
|
}
|
|
}
|
|
.item-body{
|
|
$title-h:1.2rem;
|
|
position: absolute;
|
|
bottom: 0;
|
|
background-color: #fff;
|
|
background-color: rgba(255,255,255,.6);
|
|
height: $title-h;
|
|
@include transition(.5s);
|
|
h4{
|
|
display: block;
|
|
line-height: $title-h;
|
|
margin-bottom: 0.5rem;
|
|
font-size: 1rem;
|
|
color: #333;
|
|
background-color: #c2e9fb;
|
|
@include set-opacity(0.7);
|
|
}
|
|
p{
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
line-height: 1.5rem;
|
|
font-size: 0.7rem;
|
|
text-indent: 1.4rem;
|
|
letter-spacing: 0.1rem;
|
|
text-align:justify;
|
|
text-justify:inter-ideograph;
|
|
color: #333;
|
|
&::selection{
|
|
background-color:#93C;
|
|
color:#FCF;
|
|
}
|
|
}
|
|
}
|
|
.ns-item:hover .item-body{
|
|
height:70%;
|
|
}
|
|
@media only screen and (max-width:768px){
|
|
.news-item-cont{
|
|
width: 40%;
|
|
}
|
|
}
|
|
</style>
|
|
|