标签:category margin cat 公司 out poi 申请 esc font
templates/news/index.html
<div class="list-outer-group"> <ul class="list-tab"> <li class="active" ><a href="#">最新资讯</a></li> <li><a href="#">热点</a></li> <li><a href="#">深度报道</a></li> <li><a href="#">干活分享</a></li> <li><a href="#">投资人说</a></li> </ul> </div>
src/css/index.scss
.main{ .wrapper{ .news-wrapper{ .list-outer-group{ background: #fff; .list-tab{ width: 100%; height: 66px; overflow: hidden; border: 1px solid #eee; border-left: none; border-right: none; li{ float: left; padding: 0 10px; margin-top: 20px; a{ color:#878787; font-size: 16px; } &:first-of-type{ border-left: 5px solid #5c87d9; } &.active{ a{ color: #212121; } } } } } } } }
templates/news/index.html
<ul class="list-inner-group"> <li> <div class="thumbnial-group"> <a href=""> <img src="https://static-image.xfz.cn/1561031505_57.jpg-website.news.list" alt=""> </a> </div> <div class="news-group"> <p class="title"><a href="#">印度人摩托车上的帝国</a></p> <p class="desc">近些年印度市场涌现出一批摩托车创业公司,摩托车 是否能够解决印度人最后一公里的出行难题?印度的创业者又是否 能在摩托车上建立起自己的商业帝国。 </p> <p class="more"> <span class="category">深度报告</span> <span class="pub-time">一小时前</span> <span class="author">zhang_derek</span> </p> </div> </li> <li> <div class="thumbnial-group"> <a href=""> <img src="https://static-image.xfz.cn/1561246883_290.jpg-website.news.list" alt=""> </a> </div> <div class="news-group"> <p class="title"><a href="#">早报:爱奇艺会员规模破1亿</a></p> <p class="desc">中国氢能第一股亿华通拟申请上科创板 3年估值翻10倍</p> <p class="more"> <span class="category">爱奇艺</span> <span class="pub-time">两小时前</span> <span class="author">zhang_derek</span> </p> </div> </li> </ul>
src/css/index.scss
.list-inner-group { li { padding: 20px; border-bottom: 1px solid #eee; overflow: hidden; .thumbnial-group { float: left; height: 162px; width: 226px; img { width: 100%; height: 100%; } } .news-group { float: right; width: 504px; height: 162px; position: relative; .title{ font-size: 22px; a{ color: #212121; &:hover{ color: #5c87d9; } } } .desc{ color: #878787; font-size: 14px; margin-top: 10px; } .more{ position: absolute; left: 0; right: 0; bottom: 0; font-size: 14px; color: #878787; .category{ color: #5c87d9; } .pub-time{ float: right; margin-left: 20px; } .author{ float: right; } } } }
templates/news/index.html
<div class="load-more-group"> <button class="load-more" >查看更多</button> </div>
src/css/index.scss
.load-more-group{ padding: 20px 0; text-align: center; .load-more{ width: 402px; height: 40px; background: #d2dcea; border: none; outline: none; cursor: pointer; } }
效果
标签:category margin cat 公司 out poi 申请 esc font
原文地址:https://www.cnblogs.com/derek1184405959/p/11069571.html