5.3 创建直播页 - 布局(二) · UNI-APP实战直播App

## 一、实现输入直播间标题布局 ``` <view class="position-absolute rounded p-2 flex align-center" style="left: 90rpx; right : 100rpx; height: 160rpx; background-color: rgba(0,0,0,0.2);"> <view class="position-relative rounded" style="width: 120rpx; height: 120rpx;"> <image src="/static/gift/3.png" style="width: 120rpx; height: 120rpx;"></image> <text class="text-white position-absolute font" style="left:0; right:0; bottom:0;">更换封面</text> </view> <view class="flex-1 ml-2"> <input class="mb-2" type="text" value="" placeholder="请输入直播间标题"/> <text class="text-white font">#请选择分类</text> </view> </view> ``` ## 二、实现工具布局 ``` <view class="position-absolute right-0 flex flex-column" style="width: 100rpx;"> <view style="height: 120rpx; width: 100rpx;" class="flex flex-column align-center justify-center"> <text class="iconfont text-white mb-1"></text> <text class="text-white font">翻转</text> </view> <view style="height: 120rpx; width: 100rpx;" class="flex flex-column align-center justify-center"> <text class="iconfont text-white mb-1"></text> <text class="text-white font">画质</text> </view> <view style="height: 120rpx; width: 100rpx;" class="flex flex-column align-center justify-center"> <text class="iconfont text-white mb-1"></text> <text class="text-white font">美颜</text> </view> <view style="height: 120rpx; width: 100rpx;" class="flex flex-column align-center justify-center"> <text class="iconfont text-white mb-1"></text> <text class="text-white font">美白</text> </view> </view> ```