[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 布局效果展示