zc100/template/mobile-bak2_1/components/banner/style_3.htm

<?php
    $name = "banner-s-3";
?>
<link rel="stylesheet" href="/template/pc/components/banner/style_3.css"   media="all">

<!--引入swiper-->
<link rel="stylesheet" href="https://oss.zc10000.com/static/js/swiper/swiper-bundle.min.css">

<!--定义div盒子-->
<div class="<?php echo $name; ?>-content">
    <div class="box">
        <!--定义内容布局--->
        <div class="row">
            <!--定义内部栅格 上下中左右 使用浮动-->
            <div class="top">
                <!--定义内容标签 p span a li img--->
                <span></span>
                {eyou:type typeid='38' empty='暂时没有数据'}
                <a href="{:get_tid_url_2($field['typeurl'])}" >热门职称推荐</a>
                <font class="more"><a href="{:get_tid_url_2($field['typeurl'])}" style="font-family: 'HarmonyOS Sans SC' !important;">职称专业对照表</a>&nbsp;<img src="https://oss.zc10000.com/static/images/037.svg" /></font>
                {/eyou:type}
            </div>
            <div class="bottom">
                <!--定义内容标签 p span a li img--->
                <div class="swiper mySwiper-<?php echo $name; ?>">
                    <div class="swiper-wrapper">


                        <?php
                        //area_id=$areaid
                        $where1 = "area_id>0 and parent_id=38 and topid=38 and is_del=0 and status=1 and is_hot=1";
                        ?>
                        {eyou:sql sql="SELECT id FROM __PREFIX__arctype where $where1 order by add_time asc limit 0,15" cachetime='3600' id='res'}
                        {eyou:foreach name='$res' item='cat'}
                        {eyou:type typeid='$cat' empty='暂时没有数据' id='field2'}
                        <div class="swiper-slide" style="position:relative;">
                            <img src="https://oss.zc10000.com/static/images/bg_1.png" width="227" height="234"/>
                            <a href="{:get_tid_url_2($field2['typeurl'],0,0,0,'产品',$field2['topid'],$field2['area_id'])}">{$field2.typename}</a>
                            <span style="display:block;position: absolute;top:35%;width:100%;text-align:center;font-size: 20px;font-weight: bold;">
                                        {$field2.typename}                                    </span>
                        </div>
                        {/eyou:type}
                        {/eyou:foreach}
                        {/eyou:sql}

                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
               <!--     <div class="swiper-pagination"></div>-->
                </div>



            </div>
        </div>
    </div>
</div>

<!--引入swiper-->
<script src="https://oss.zc10000.com/static/js/swiper/swiper-bundle.min.js"> </script>
<script>
    var swiper = new Swiper(".mySwiper-<?php echo $name; ?>", {
        slidesPerView: 4,
        spaceBetween: 30,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        loop: true,
        loopFillGroupWithBlank: true,
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
</script>