op_detail.html 1.8 KB
{extend name="layout/default"}
{block name="title"}专家观点--详情{/block}
{block name="content"}
<style>
    .swiper-container {
        margin: 0 0.4rem;
        height: 0.9rem;
        width: 100%;
        box-sizing: border-box;
    }

    .swiper-button-next,
    .swiper-button-prev {
        width: 0.24rem;
        height: 0.24rem;
        background-size: 0.24rem 0.24rem;
        top: 0.88rem;
    }

    .swiper-button-next {
        right: 0.1rem;
        background-image: url('/static/image/you_img.png');
    }

    .swiper-button-prev {
        left: 0.1rem;
        background-image: url('/static/image/zuo_img.png');
    }
</style>
<div class="main">
    <!-- 内容 -->
    <div class="list_DBox">
        <h1 class="list_DTit">{$news.name}</h1>
        <p class="list_DTime">{$news.experts_name}</p>
        <!-- 富文本 -->
        <div class="list_Dtext">
            {$news.content}
        </div>
        <!-- 轮播 -->
        {if($news['images']!="")}
        <div class="world_Dbox">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    {foreach(:explode(",",$news['images']) as $image)}
                    <div class="swiper-slide">
                        <div class="world_DImg"><img src="{$image}" alt=""></div>
                    </div>
                    {/foreach}
                </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        {/if}

    </div>
</div>
<script>
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        slidesPerView:4,
        paginationClickable: true,
        spaceBetween: 4,
    });

</script>
{/block}