常用资源整理
公共区
头部区
banner区
底部区
公司简介
图片列表
图文列表
文章列表
视频播放
下载列表
问答列表
招贤纳士
联系我们
图文列表

1

<!--新闻图文列表--->
    <div class="page_news flex_start">
    {module catid=$catid order=displayorder,updatetime page=1}
     <li><a href="{$t.url}">
         <div class="pic picShow">
             <img src="{dr_thumb($t['thumb'], 600, 377, 0, 'crop')}" />
                <div class="time">
                 <dl>{dr_date($t['_updatetime'], 'd')}</dl>
                    <dt>{dr_date($t['_updatetime'], 'Y-m')}</dt>
                </div>
            </div>
            <div class="txt">
             <h3 class="ellipsis1">{$t.title}</h3>
                <div class="desc ellipsis2">{$t.description}</div>
                <p>More +</p>
            </div>
        </a></li>
    {/module} 
    </div>
/*======================内页新闻图文列表======================*/

.page_news li{width:32%;margin-right:2%;background:#fff;padding:.25rem .25rem;box-sizing:border-box;margin-bottom:30px;transition:all .6s;}
.page_news li:nth-child(3n){margin-right:0;}
.page_news li .pic{overflow:hidden;position:relative;}
.page_news li .pic img{width:100%;display:block;}
.page_news li .pic .time{position:absolute;top:0;right:0;background:#666;padding: 15px 20px;z-index: 9;text-align:center; transition:all .6s;}
.page_news li .pic .time dl{font-size:.28rem;color:#fff;margin-bottom:10px;}
.page_news li .pic .time dt{color:#fff;}
.page_news li .txt{margin-top:25px;}
.page_news li .txt h3{font-size:18px;transition:all .6s;}
.page_news li .txt .desc{margin:20px 0;line-height:2;color:#888;}
.page_news li .txt p{width:100px;font-size:18px;transition:all .6s;padding-bottom:15px;}
.page_news li:hover{border-radius:40px 0;}
.page_news li:hover .time{background:var(--main_color);}
.page_news li:hover .txt h3,.page_news li:hover .txt p{color:var(--main_color);}

@media screen and (max-width:768px) {
.page_news li{width:100%;margin-right:0;border-radius:5px;margin-bottom:15px;}
.page_news li .pic .time dl{font-size:22px;}
.page_news li .txt .desc{margin:15px 0;line-height:1.6;font-size:13px;}
.page_news li .txt p{font-size:16px;}
.page_news li:hover{border-radius:15px 0;}
}