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> ```