chaoyu/view/index/index.html

{layout name="layout" /}

<div class="banner-box w-100">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide center-center" style="background-image: url(__IMG__/ban_1.jpg);">
                <div class="w-1500">
                    <div class="pull-left">
                        <p>致力于将无穷的光明和动力<br>传输到祖国的大江南北</p>
                        <i>Great Rivers North and South Committed to <br>Transmitting Infinite Light and Power to the Motherland</i>
                    </div>
                </div>
            </div>
            <div class="swiper-slide center-center" style="background-image: url(__IMG__/ban_1.jpg);">
                <div class="w-1500">
                    <div class="pull-left">
                        <p>致力于将无穷的光明和动力<br>传输到祖国的大江南北</p>
                        <i>Great Rivers North and South Committed to <br>Transmitting Infinite Light and Power to the Motherland</i>
                    </div>
                </div>
            </div>
        </div>
        <div class="swiper-page"><div class="w-1500"><div class="swiper-pagination"></div></div></div>
    </div>
</div>
<div class="all-center-box">
    <div class="home-box1 w-100">
        <div class="w-1500">
            <div class="all-title-box1 w-100"><span>产品中心</span><p>product center</p></div>
            <div class="center-block w-100">
                <ul>
                    <li class="active">
                        <div class="box-info" style="background-image: url(__IMG__/img_1.jpg);">
                            <div class="box1">
                                <span>高压成套设备</span>
                                <p>High-voltage<br>complete equipment</p>
                            </div>
                            <div class="box2">
                                <a href="">了解详情+</a>
                                <i>01</i>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="box-info" style="background-image: url(__IMG__/img_1.jpg);">
                            <div class="box1">
                                <span>高压成套设备</span>
                                <p>High-voltage<br>complete equipment</p>
                            </div>
                            <div class="box2">
                                <a href="">了解详情+</a>
                                <i>02</i>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="box-info" style="background-image: url(__IMG__/img_1.jpg);">
                            <div class="box1">
                                <span>高压成套设备</span>
                                <p>High-voltage<br>complete equipment</p>
                            </div>
                            <div class="box2">
                                <a href="">了解详情+</a>
                                <i>03</i>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="box-info" style="background-image: url(__IMG__/img_1.jpg);">
                            <div class="box1">
                                <span>高压成套设备</span>
                                <p>High-voltage<br>complete equipment</p>
                            </div>
                            <div class="box2">
                                <a href="">了解详情+</a>
                                <i>04</i>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="home-box2 w-100">
        <div class="w-1500">
            <div class="pull-left column-between">
                <div class="all-title-box1 w-100"><span>网络营销</span><p>MARKETING NETWORK</p></div>
                <a href="">了解详情+</a>
            </div>
        </div>
    </div>
    <div class="home-box3 w-100">
        <div class="w-1200">
            <div class="top-box w-100"><div class="between-bottom"><span>新闻动态</span><i>NEWS</i></div></div>
            <div class="lower-box w-100">
                <ul>
                    <p>企业新闻</p>
                    <li>
                        <a href="">
                            <span>超宇助推中国化工企业加速数字化转型</span>
                            <i>2020-10-10</i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>超宇助推中国化工企业加速数字化转型</span>
                            <i>2020-10-10</i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>超宇助推中国化工企业加速数字化转型</span>
                            <i>2020-10-10</i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>超宇助推中国化工企业加速数字化转型</span>
                            <i>2020-10-10</i>
                        </a>
                    </li>
                </ul>
                <ul>
                    <p>行业资讯</p>
                    <li>
                        <a href="">
                            <span>超宇助推中国化工企业加速数字化转型</span>
                            <i>2020-10-10</i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>超宇助推中国化工企业加速数字化转型</span>
                            <i>2020-10-10</i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>超宇助推中国化工企业加速数字化转型</span>
                            <i>2020-10-10</i>
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <span>超宇助推中国化工企业加速数字化转型</span>
                            <i>2020-10-10</i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="foot-box w-100 center-center">
    <div class="w-1200">
        <div class="top-box w-100 between-top">
            <div class="fl"><img src="__IMG__/logo2.png" ></div>
            <div class="fr">
                <a href="">首页</a>
                <a href="">走进超宇</a>
                <a href="">产品中心</a>
                <a href="">品质与服务</a>
                <a href="">营销网络</a>
                <a href="">新闻动态</a>
                <a href="">联系我们</a>
            </div>
        </div>
        <div class="lower-box w-100">
            <div class="column-between">
                <p>
                    四川超宇科技有限公司<br>
                    Sichuan Chaoyu<br>
                    Technology Co., Ltd.
                </p>
                <p><i>Copyright C2020蜀ICP备14003714号-1</i></p>
            </div>
            <div class="column-between">
                <p><span>电话/Tel: 028-8561 6928</span></p>
                <p><span>邮箱/E-mail: 1825981925@qq.com</span></p>
                <p>
                    地址/Add:成都市双流区蛟龙工业港南河路318号<br>
                    <i>No.318 Nanhe Road, Jiaolong Industrial Area <br>Shuangliu District, Chengdu ,Sichuan Province</i>
                </p>
            </div>
            <div class="ewm"><img src="__IMG__/ewm_1.jpg" ><p>微信二维码/Wechant</p></div>
        </div>
    </div>
</div>

<script>
    var swiper = new Swiper('.banner-box .swiper-container', {
        loop: true,
        speed: 1000,
        autoplay: {
            delay: 6000,
            disableOnInteraction: false,
        },
        navigation: {
            nextEl: '.banner-box .swiper-button-next',
            prevEl: '.banner-box .swiper-button-prev',
        },
        pagination :{
            el: '.banner-box .swiper-pagination',
            clickable :true,
        },
        on:{
            init: function(){

            },
            transitionEnd: function(){
                $('.banner-box .swiper-container .swiper-slide .w-1500').eq(this.activeIndex).addClass('active')
            },
            transitionStart: function(){
                $('.banner-box .swiper-container .swiper-slide .w-1500').removeClass('active')
            },
        }
    });
</script>
<script>
    layui.use(['layer', 'form', 'element'], function(){
      var layer = layui.layer,form = layui.form,element = layui.element;
    });
</script>