templates/news/index.html
<div class="sidebar-wrapper">
<div class="title-group">
<span class="title">在线课堂</span>
<a class="more" href="#">更多</a>
</div>
<div class="advertise-group">
<img src="https://static-image.xfz.cn/1554346383_8.png" alt="">
</div>
</div>
src/css/index.scss
.main{
.wrapper{
.sidebar-wrapper {
float: right;
width: 356px;
height: 500px;
background: #fff;
.title-group{
padding: 20px;
overflow: hidden;
.title{
float: left;
font-size: 18px;
color: #212121;
}
.more{
float: right;
font-size: 14px;
color: #5c87d9;
}
}
.advertise-group{
img{
width: 100%;
}
}
}
}
}
效果
templates/news/index.html
<div class="platform-group">
<div class="title-group">
<span class="title">关注小饭桌</span>
</div>
<div class="focus-group">
<ul class="left-group">
<li class="zhihu" ><a href="#" target="_blank" >小饭桌创业课堂</a></li>
<li class="weibo" ><a href="#" target="_blank" >小饭桌创业课堂</a></li>
<li class="toutiao" ><a href="#" target="_blank" >小饭桌</a></li>
</ul>
<div class="right-group">
<p class="desc">扫描关注小饭桌微信公众号</p>
</div>
</div>
</div>
src/css/index.scss
.focus-group{
padding: 0 20px;
overflow: hidden;
.left-group{
width: 180px;
float: left;
li{
width: 100%;
height: 50px;
line-height: 50px;
background: url("https://www.xfz.cn/static/build/images/side-icon.png") no-repeat;
background-size: 26%;
margin-bottom: 20px;
overflow: hidden;
a{
float: left;
margin-left: 64px;
color: #878787;
font-size: 14px;
}
}
.zhihu{
background-position: 0 0;
}
.weibo{
background-position: 0 -63px;
}
.toutiao{
background-position: 0 -122px;
}
}
.right-group{
float: right;
width: 100px;
background: url("https://www.xfz.cn/static/build/images/xfz-school-wechat-share.png");
background-size: 100%;
background-repeat: no-repeat;
.desc{
margin-top: 100px;
color: #878787;
font-size: 12px;
}
}
}
效果
templates/news/index.html
<div class="hot-news-group">
<div class="title-group">
<span class="title">热门推荐</span>
</div>
<ul class="hot-list-group">
<li>
<div class="left-group">
<p class="title" ><a href="#">印度人摩托车上的帝国</a></p>
<p class="more">
<span class="category">深度报道</span>
<span class="pub-time">1小时前</span>
</p>
</div>
<div class="right-group">
<a href="#">
<img src="https://static-image.xfz.cn/1561031505_57.jpg-website.news.list" alt="">
</a>
</div>
</li>
<li>
<div class="left-group">
<p class="title" ><a href="#">早报:爱奇艺会员规模破1亿</a></p>
<p class="more">
<span class="category">爱奇艺</span>
<span class="pub-time">2小时前</span>
</p>
</div>
<div class="right-group">
<a href="#">
<img src="https://static-image.xfz.cn/1561246883_290.jpg-website.news.list" alt="">
</a>
</div>
</li>
</ul>
</div>
src/css/index.scss
.hot-news-group{
.hot-list-group{
li{
padding: 0 20px 20px;
overflow: hidden;
border-bottom: 1px solid #eee;
.left-group{
float: left;
width: 204px;
height: 72px;
position: relative;
.title{
font-size: 16px;
a{
color: #212121;
&:hover{
color: #5c87d9;
}
}
}
.more{
position: absolute;
left: 0;
right: 0;
bottom: 0;
font-size: 12px;
.category{
color: #5c87d9;
float: left;
}
.pub-time{
float: right;
color: #878787;
}
}
}
.right-group{
float: right;
width: 102px;
height: 72px;
img{
width: 100%;
height: 100%;
}
}
}
}
}
效果