<section class="products">
<div class="productTitle" data-aos="fade-down">
<h3>产品展示</h3>
<p><span>匠心制造品质,信誉的象征!</span></p>
</div>
<div class="productWrap wrap">
<div class="proMenu" data-aos="fade-right">
<h4>产品中心</h4>
<ul>
<stl:channels channelIndex="产品展示">
<li><stl:a>{Channel.Title}</stl:a></li>
</stl:channels>
</ul>
</div>
<div id="productsBox" class="swiper-container">
<ul class="swiper-wrapper">
<stl:contents channelIndex="产品展示" totalNum="6" scope="all" order="AddDate">
<li class="swiper-slide tempImage_{content.itemIndex-1}" data-aos="fade-down" data-aos-delay="{content.itemIndex}00">
<div class="wrap">
<div class="pic">
<img src="{content.ImageUrl}" alt="{content.Title}">
</div>
<div class="proText">
<stl:a>{content.Title}</stl:a>
</div>
</div>
</li>
</stl:contents>
</ul>
</div>
</div>
</section>
<script>
var mySwiperproductsBox = new Swiper('#productsBox', {
slidesPerView: 3,
spaceBetween: 20,
slidesPerColumn: 2,
slidesPerColumnFill : 'row',
breakpoints: {
320: {
slidesPerView: 1,
spaceBetween: 0
},
768: {
slidesPerView: 1,
spaceBetween: 0
},
1280: {
slidesPerView: 3,
slidesPerColumn: 2,
spaceBetween: 10,
}
}
});
</script>
.products{
background:url(../upload/probg.jpg) no-repeat center top,#ffffff;
padding:0px 0px 60px;
}
.products .productTitle{
text-align: center;
padding-bottom: 60px;
}
.products .productTitle h3{
color: #f8bd01;
font-size: 40px;
padding-top:74px;
}
.products .productTitle p span{
position: relative;
color: #fff;
display: inline-block;
vertical-align: middle;
position: relative;
font-size: 20px;
padding: 0 20px;
}
.products .productTitle span:before,.products .productTitle span:after {
position: absolute;
top: 50%;
content: '';
width: 40px;
height: 2px;
background-color: #f8bd01;
margin-top: -1px;
}
.products .productTitle span:before {
right: 100%;
}
.products .productTitle span:after {
left: 100%;
}
.productWrap .proMenu{
width:22%;
}
.productWrap .proMenu h4 {
margin: 0;
line-height: 80px;
text-align: center;
font-size: 24px;
background-color: #f8bd01;
}
.productWrap .proMenu ul li{
background: #efefef;
position: relative;
border-bottom: 1px solid #fff;
line-height: 65px;
}
.productWrap .proMenu ul li a{
display: block;
background: url(../upload/cp_ico01.png) no-repeat 25px center;
padding-left: 55px;
}
#productsBox{
width:70%;
}
#productsBox li {
height:auto;
}
#productsBox li .wrap{
width:100%;
}
#productsBox li .proText{
width:100%;
}
#productsBox li .proText h3{
font-size: 28px;
color:#fff;
padding-top: 60px;
font-weight: normal;
}
#productsBox li .proText p{
font-size: 14px;
padding:40px 0px 40px;
color:#666;
line-height: 1.75;
}
#productsBox li .proText a{
font-size: 16px;
background-color: #e0e0e0;
color:#333;
width:100%;
height: 46px;
line-height: 46px;
padding:10px 0px;
display: inline-block;
text-align: center;
position:relative;
z-index: 1;
overflow:hidden;
}
#productsBox li .proText a:before{
content:"";
position:absolute;
top:0;
left:0;
width:135%;
height:100%;
background:#f8bd01;
z-index: -99;
transform-origin:0 0;
-ms-transfomr-origin:0 0;
-webkit-transfomr-origin:0 0;
transform:translateX(-100%) skewX(-45deg);
-ms-transform:translateX(-100%) skewX(-45deg);
-webkit-transform:translateX(-100%) skewX(-45deg);
transition: transform .2s;
}
#productsBox li .proText a:hover:before{
transform:translateX(0) skewX(-45deg);
}
#productsBox li .proText a:hover{
color:#333;
}
#productsBox li .pic{
width:100%;
height:210px;
background: #fff;
padding:10px;
box-sizing: border-box;
line-height: 0 !important;
overflow: hidden;
}