[toc] # 3.7底部操作條 ## 3.7.1 實現底部操作條布局 1. 實現評論布局 ``` <!-- 底部評論..等 --> <view class="position-fixed right-0 bottom-0 left-0 bg-danger flex align-center justify-between" style="height: 120rpx;"> <view class="px-2"> <view style="height:80rpx;border-radius: 100rpx;background-color: rgba(255,255,255,0.12);" class="flex justify-center px-3 align-center"> <text class="text-white font">說點什么...</text> </view> </view> </view> ``` 2. 實現右側金幣、禮物、分享、關閉等圖標布局 ``` <!-- 底部評論..等 --> <view class="position-fixed right-0 bottom-0 left-0 flex align-center justify-between" style="height: 120rpx;"> <!-- 左側 --> <view class="px-2"> <view style="height:80rpx;border-radius: 100rpx;background-color: rgba(255,255,255,0.12);" class="flex justify-center px-3 align-center"> <text class="text-white font">說點什么...</text> </view> </view> <!--右側--> <view class="flex align-center"> <view style="height:80rpx; width: 80rpx; background-color: rgba(255,255,255,0.12);" class="flex mr-1 justify-center rounded-circle align-center"> <text class="iconfont text-white" style="font-size: 40px; ">&#xe633;</text> </view> <view style="height:80rpx; width: 80rpx;" class="flex mr-1 justify-center rounded-circle align-center bg-warning"> <text class="iconfont">&#xe67c;</text> </view> <view style="height:80rpx; width: 80rpx; background-color: rgba(255,255,255,0.12);" class="flex mr-1 justify-center rounded-circle align-center"> <text class="iconfont text-white">&#xe7cd;</text> </view> <view style="height:80rpx; width: 80rpx; background-color: rgba(255,255,255,0.12);" class="flex mr-1 justify-center rounded-circle align-center"> <text class="iconfont text-white">&#xe607;</text> </view> </view> </view> ```