标签:absolute mamicode att ima 组件 VID border ati ack
<!--html-->
<view class="videoBox"> <view class="videoBox-text"> <image src="https://xcx.hy720.com/wtt/videobtn.png"></image> <text>美食视频</text> <view>更多 ></view> </view> <scroll-view class="image-group" scroll-x="true"> <view class="dingwei"> <image src="https://xcx.hyw.cc/mp/attachment/images/7/2019/08/pCFfAPqi5ii9H9EFe8fEHFHIFEia2c.jpg" class="aa" mode=‘aspectFill‘></image> <!--mode=‘aspectFill‘ 控制图片适应框的宽度,不完全显示,只截取图片最中间显示--> <view class="volume"> <image src="https://xcx.hy720.com/wtt/wzbtn.png" class="tubiao"></image> <text>6.8k</text> </view> <text class="dingwei-title">最走心的同学</text> </view> <view class="dingwei"> <image src="https://xcx.hyw.cc/mp/attachment/images/7/2019/08/pCFfAPqi5ii9H9EFe8fEHFHIFEia2c.jpg" class="aa" mode=‘aspectFill‘></image> <!--mode=‘aspectFill‘ 控制图片适应框的宽度,不完全显示,只截取图片最中间显示--> <view class="volume"> <image src="https://xcx.hy720.com/wtt/wzbtn.png" class="tubiao"></image> <text>6.8k</text> </view> <text class="dingwei-title">最走心的同学</text> </view> <view class="dingwei"> <image src="https://xcx.hyw.cc/mp/attachment/images/7/2019/08/pCFfAPqi5ii9H9EFe8fEHFHIFEia2c.jpg" class="aa" mode=‘aspectFill‘></image> <!--mode=‘aspectFill‘ 控制图片适应框的宽度,不完全显示,只截取图片最中间显示--> <view class="volume"> <image src="https://xcx.hy720.com/wtt/wzbtn.png" class="tubiao"></image> <text>6.8k</text> </view> <text class="dingwei-title">最走心的同学</text> </view> </scroll-view> </view>
<!--css-->
page{background-color: #efefef;}
.image-group {
display: flex;
white-space: nowrap;
margin-top: 30rpx;
border-radius: 15rpx;
}
.dingwei {
width: 240rpx;
height: 320rpx;
position: relative;
display: inline-block;
margin-right: 20rpx;
}
.aa{
width: 100%; /*图片的宽高必须有否则mode=‘aspectFill‘将不会显示图片*/
height: 100%;
margin-right: 20rpx;
border-radius: 10rpx;
}
.volume{display: flex;flex-wrap: wrap;width: 100rpx;height: 35rpx;border-radius: 20rpx; background-color: rgba(3, 3, 3, 0.4);color: #fff;font-size: 24rpx;position: absolute;z-index: 9999; left: 135rpx; top: 10rpx;}
.volume .tubiao{width: 20rpx;height: 20rpx; margin-left: 10rpx;margin-top: 8rpx;margin-right: 3rpx;}
.volume text{width: 30rpx;height: 35rpx;line-height: 35rpx;}
.dingwei-title{width: 100%;top:270rpx;left: 10rpx; display: block;position: absolute;z-index: 9999;color: #fff;font-size: 24rpx;}
.videoBox{width: 94%;background-color: #fff;margin: 15rpx auto;border-radius: 20rpx;padding: 20rpx;}
.videoBox-text{display: flex;flex-wrap: wrap;padding-top: 10rpx; padding-left: 10rpx;}
.videoBox-text image{width: 50rpx;height: 50rpx;}
.videoBox-text text{width: 550rpx;height: 50rpx;line-height: 50rpx;padding-left: 10rpx;}
.videoBox-text view{width: 90rpx; height: 35rpx;line-height: 35rpx; background-color: #ffdc1c;border-radius: 20rpx;font-size: 20rpx;text-align: center;margin-top: 5rpx;}
标签:absolute mamicode att ima 组件 VID border ati ack
原文地址:https://www.cnblogs.com/chabuer/p/11562289.html