产品展示图文信息列表3/12

```html

<div class="banner news">
    <div class="title">
        <p> {$topCates.cate_name}</p>
        <p class="en">{volist name="sonCateRes" id="vo"}
            <span {if condition="$vo['id'] eq $cid"}class="current"{/if}><a href="{$vo.cate_attr|makeurl=###,$vo.id}">{$vo.cate_name}</a><i></i></span>
            {/volist}</p>

</div>
</div>

<div class="main-case">
    <div class="layui-container">
        <div class="layui-row">
            {volist name="artRes" id="vo"}
            <div class="layui-inline content">
                <div class="layui-inline case-img"><img {if condition="$vo['pic'] eq ''"}src='{$temp_css}/images/lunbo.png' {else/}src='{$vo.pic}'{/if} alt="{$vo.title}" ></div>
                <p class="lable">{$vo.title}</p>
                <p>{$vo.content|delhtml=###|cut_str="40"}</p>
            </div>
            {/volist}
        </div>
        <div id="casePage">{$artRes->render()}</div>
    </div>
</div>
```
css样式
```css
/** 案例 */
.banner.case{background: url(../images/nav_img2.jpg) no-repeat center top; background-size: cover;}
.main-case{padding: 30px 0 75px;}
.main-case .content{width: 31%; text-align: center; padding-top: 120px; padding-bottom: 20px; border-bottom: 2px solid #c9c9c9;}
.main-case .content:nth-child(even){margin-right: 3%;margin-left: 3%;}
.main-case .content.even{margin-left: 2%;}
.main-case .content .case-img{border: 1px solid #e2e2e2; overflow: hidden;}
.main-case .content .case-img img{width: 100%; transition: 2s;}
.main-case .content .case-img img:hover{transform: scale(1.2,1.2); transition: 2s;}
.main-case .content p.lable{padding-top: 13px; font-size: 30px; line-height: 76px;}
.main-case .content p{font-size: 18px; line-height: 32px; color: #505050;}
.main-case #casePage .layui-laypage{display: block; text-align: center; margin-top: 100px;}
.main-case #casePage .layui-laypage a,.main-case #casePage .layui-laypage span{font-size: 18px; line-height: 40px; height: 40px; margin-right: 20px; border-radius: 3px; color: #e3e3e3;}
@media (max-width: 991px) {
  /*图片*/
  .main-case .content{width: 45%}

}
@media (max-width: 580px) {
  .main-case .content{width: 95%}
}
```

速建时代TPCMS管理系统

产品展示 图文信息列表3/12

产品展示图文信息列表3/12