先上效果图：
这个不是真的video组件，这是图片上定位了一个css元素而已，上wxss代码：
<view class="item-img">
<image wx:if="{{item.coverUrl}}" src="{{img_full_path + item.coverUrl}}" style="width:100%;height:100%;"></image>
<view class="circle">
<view class="circle_inner_play">
</view>
</view>
<view class="duration">{{util.secondToTimeStr(item.duration)}}</view>
</view>
父级view样式：
.item .item-img{
height: 388rpx;
position: relative;
}
现在定位一个圆圈居中显示
.circle {
border-radius: 50px;
height: 50px;
position: absolute;
width: 50px;
z-index: 9998;
color: #fff;
background: #000;
opacity: 0.6;
left: 50%;
margin-left: -50rpx;
text-align: center;
margin-top: -230rpx;
}
现在再画一个小三角：
.circle_inner_play {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 50%;
left: 50%;
margin: -10px 0 0 -7px;
}
请发表评论