效果
代码
<view class="before-item">
<view class="item-left">
<image class="item-left"
src="图片url" />
</view>
<view class="item-right">
<view class="right-title">第一篇文章</view>
<view class="right-desc">
这里是第一篇文章的文章摘要
</view>
<view class="right-eyes">
<image class="icon-eyes"
src="https://assets.dxycdn.com/gitrepo/gsk-tooth/images/index/[email protected]" />
<view class="eyes-num">1</view>
<view class="eyes-time">2019-10-25 10:35:23</view>
</view>
</view>
</view>
.before-item {
display: flex;
margin-bottom: 32rpx;
}
.item-left,.logo-lession {
width: 280rpx;
height: 194rpx;
}
.item-right {
width: 100%;
height: 194rpx;
position: relative;
font-size: 24rpx;
color: #7d8790;
margin-left: 20rpx;
}
.right-title {
font-size: 30rpx;
color: #333333;
max-height: 100rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.right-eyes {
display: flex;
}
.icon-eyes {
width: 32rpx;
height: 26rpx;
margin-top: 5rpx;
}
.right-eyes {
position: absolute;
bottom: 0;
}
.eyes-num {
margin-left: 10rpx;
}
.eyes-time {
position: absolute;
width: 230rpx;
left: 75px;
}