3.4 接收禮物組件(一) - 布局 · UNI-APP實戰直播App

[toc] # 3.4 接收禮物組件(一) - 布局 ## 3.4.1 實現金幣的的布局 ```  <view class="px-2 my-2" style="height: 80rpx;"> <view style="width: 325rpx; background-color: rgba(0,0,0,0.4);" class="flex align-center rounded-circle"> <view class="p"> <text class="text-warning">金幣</text> </view> <view class="flex-1 flex flex-column justify-center"> <text class="text-white font">100</text> </view> </view> </view> ``` ## 3.4.2 實現禮物的布局 ```  <view style="height:500rpx;"> <scroll-view scroll-y="true" style="width: 520rpx; height: 500rpx;"> <view class="flex align-center px-3"> <view style="width: 325rpx; background-image: linear-gradient(to right,#BCABB1, #65AAF0);" class="flex align-center rounded-circle"> <view class="p"> <image src="../../static/tabbar/min.png" style="width: 70rpx; height: 70rpx;" class="rounded-circle"></image> </view> <view class="flex-1 flex flex-column justify-center"> <text class="text-white font">昵稱</text> <text class="text-white font-sm">送蛋糕</text> </view> <view class="p"> <image src="../../static/gift/1.png" style="width: 70rpx; height: 70rpx;" class="rounded-circle"></image> </view> </view> <text class="text-warning font-lg ml-1">X 100</text> </view> </scroll-view> </view> ```