速建时代TPCMS管理系统

图文列表 

  1. <!-- banner部分 -->
  2. <div class="banner news">
  3.     <div class="title">
  4.         <p> {$topCates.cate_name}</p>
  5.         <p class="en">{volist name="sonCateRes" id="vo"}
  6.         <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>
  7.         {/volist}</p>
  9.     </div>
  10. </div>
  11. <!-- main -->
  12. <div class="main-news">
  13.     <div class="layui-container">
  14.         <div class="layui-row layui-col-space20">
  15.             {volist name="artRes" id="vo"}
  16.             <div class="layui-col-lg6 content">
  17.                 <div>
  18.                     <div class="news-img"><a href="{:url('Article/index',array('aid'=>$vo['id']))}"><img {if condition="$vo['pic'] eq ''"}src='{$temp_css}/images/lunbo.png' {else/}src='{$vo.pic}'{/if} alt="{$vo.title}" ></a></div><div class="news-panel">
  19.                     <strong><a href="{:url('Article/index',array('aid'=>$vo['id']))}"> {$vo.title}</a></strong>
  20.                     <p class="detail"><span>{$vo.content|delhtml=###|cut_str="100"}</span><a href="{:url('Article/index',array('aid'=>$vo['id']))}">[详细]</a></p>
  21.                     <p class="read-push">阅读 <span>{$vo.click}</span>    发布时间：<span>{$vo.time|date="Y/m/d",###}</span></p>
  22.                 </div>
  23.                 </div>
  24.             </div>
  25.             {/volist}
  26.         </div>
  27.         <div id="newsPage">{$artRes->render()}</div>
  28.     </div>
  29. </div>

CSS样式

  1. .banner{height: 320px; margin-top: 80px;}
  2. .banner.news{background: url(../images/nav_img3.jpg) no-repeat center top; background-size: cover;}
  3. .banner .title{padding-top: 170px;}
  4. .banner .title.active{padding-top: 120px; transition: 1.5s;}
  5. .banner.news .en .current a{color:#ee6512}
  6. .banner .title p{color: #606060; font-size: 36px; text-align: center; line-height: 50px; letter-spacing: 5px;}
  7. .banner .title p.en{font-size: 20px; letter-spacing: 3px;}
  8. .main-news{padding: 70px 0 80px 0;}
  9. .main-news .content > div{padding-bottom: 40px; border-bottom: 1px dashed #eaeaea; position: relative;}
  10. .main-news .content .news-img{display: inline-block; width: 30%; vertical-align: top;}
  11. .main-news .content .news-img img{max-width: 90%;}
  12. .main-news .content .news-panel{display: inline-block; width: 70%; vertical-align: top; padding-left: 5px; box-sizing: border-box;}
  13. .main-news .content .news-panel strong a{display: block; color: #555; font-size: 18px; line-height: 26px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap;}
  14. .main-news .content .news-panel p.detail{color: #777; line-height: 24px;}
  15. .main-news .content .news-panel p.read-push{color: #AAA; padding-top: 5px;}
  16. .main-news #newsPage .layui-laypage{display: block; text-align: center; margin-top: 70px;}
  17. .main-news #newsPage .layui-laypage a,.main-news #newsPage .layui-laypage span{font-size: 18px; line-height: 40px; height: 40px; margin-right: 20px; border-radius: 3px; color: #e3e3e3;}