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: {  //当屏幕宽度大于等于320
                    slidesPerView: 1,
                    spaceBetween: 0
                    },
                    768: {  //当屏幕宽度大于等于768 
                    slidesPerView: 1,
                    spaceBetween: 0
                    },
                    1280: {  //当屏幕宽度大于等于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;
    /* 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;
}
/* /首页产品版块结束 */