SiteServer/sscms 首页产品版块排版及代码(二)

首页产品版块排版及代码(二)"/>

SiteServer/sscms 首页产品版块排版及代码(二)

    <!-- products -->
<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><!-- /products -->

<script>
var mySwiperproductsBox = new Swiper('#productsBox', {slidesPerView: 3,spaceBetween: 20,slidesPerColumn: 2,slidesPerColumnFill : 'row',breakpoints: { 320: {  //当屏幕宽度大于等于320slidesPerView: 1,spaceBetween: 0},768: {  //当屏幕宽度大于等于768 slidesPerView: 1,spaceBetween: 0},1280: {  //当屏幕宽度大于等于1280slidesPerView: 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;/* border:1px solid #e0e0e0; */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;
}
/* /首页产品版块结束 */