[toc] # 3.2 基礎布局開發二 ## 3.2.1 實現個人信息與觀看詳細信息布局 ``` <!-- 頭部 --> <view style="position: fixed; left: 0; right: 0;" :style="{top : `${statusBarHeight}px`}"> <!-- 個人信息|觀看詳細信息 --> <view class="bg-danger" style="height:80rpx;"></view> </view> ``` ## 3.2.2 實現金幣布局 ``` <!-- 頭部 --> <view style="position: fixed; left: 0; right: 0;" :style="{top : `${statusBarHeight}px`}"> <!-- 個人信息|觀看詳細信息 --> <view class="bg-danger" style="height:80rpx;"></view> <!--金幣--> <view class="bg-primary" style="height: 80rpx;"></view> </view> ``` ## 3.2.3 實現禮物布局 ``` <!-- 頭部 --> <view style="position: fixed; left: 0; right: 0;" :style="{top : `${statusBarHeight}px`}"> <!-- 個人信息|觀看詳細信息 --> <view class="bg-danger" style="height:80rpx;"></view> <!--金幣--> <view class="bg-primary" style="height: 80rpx;"></view> <!-- 禮物 --> <view style="height:500rpx;"> <view class="bg-success" style="width: 520rpx; height: 500rpx;"></view> </view> </view> ``` ## 3.2.4 實現彈幕布局 ``` <template> <view class="page"> <!-- 直播內容 --> <video class="flex-1" src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" autoplay :controls="false"></video> <!-- 頭部 --> <view style="position: fixed; left: 0; right: 0;" :style="{top : `${statusBarHeight}px`}"> <!-- 個人信息|觀看詳細信息 --> <view class="bg-danger" style="height:80rpx;"></view> <!--金幣--> <view class="bg-primary" style="height: 80rpx;"></view> <!-- 禮物 --> <view style="height:500rpx;"> <view class="bg-success" style="width: 520rpx; height: 500rpx;"></view> </view> </view> <!-- 彈幕 --> <view class="bg-warning" style="position: fixed; bottom:120rpx; left: 0; right:0; width: 520rpx; height: 300rpx;"></view> <!-- 底部評論..等 --> <view class="position-fixed right-0 bottom-0 left-0 bg-danger" style="height: 120rpx;"></view> </view> </template> ``` ## 3.2.5 布局效果展示