css: graphic effects (left and right text)

effect

Code

<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 {
  /* opacity: 0; */
  width: 32rpx;
	height: 26rpx;
  margin-top: 5rpx;
}
.right-eyes {
  position: absolute;
  bottom: 0;
}
.eyes-num {
  /* opacity: 0; */
  margin-left: 10rpx;
}
.eyes-time {
  position: absolute;
  width: 230rpx;
  left: 75px;
}