dreamland/template/graceUI商城套装新版本/graceMallForUniapp/graceUI/components/graceNvuePage.vue

<template>
	<view class="gui-sbody" :style="{flex:flexVal}">
		<!-- 头部导航 -->
		<view v-if="customHeader">
			<view class="gui-page-header" :style="{'z-index':headerIndex, backgroundColor:headerBG, borderBottomWidth:borderWidth, borderBottomColor:borderColor}">
				<!-- 沉浸式状态栏 -->
				<view class="gui-page-status-bar" :style="{height:statusBarHeight+'px', backgroundColor:statusBarBG}"></view>
				<!-- 头部核心 -->
				<view class="gui-page-header-nav" :style="{height:headerHeight+'px'}">
					<view class="gui-header-main gui-flex-auto">
						<slot name="gHeader"></slot>
					</view>
					<view :style="{width:BoundingWidth, height:'10px'}"></view>
				</view>
			</view>
			<!-- 占位 view -->
			<view :style="{width:'750rpx', height:(statusBarHeight + headerHeight) + 'px'}"></view>
		</view>
		<!-- 页面主体 -->
		<view class="gui-page-body" :style="{flex:flexVal}"><slot name="gBody"></slot></view>
		<!-- 页面底部 -->
		<view class="gui-page-footer" :style="{'z-index':footerIndex, backgroundColor:footerBg}">
			<slot name="gFooter"></slot>
		</view>
		<!-- 右下角悬浮按钮 -->
		<view class="gui-page-rb-area" :style="{right:rbRight+'rpx', bottom:rbBottom+'rpx', width:rbWidth+'rpx'}"><slot name="gRTArea"></slot></view>
	</view>
</template>
<script>
export default{
	props:{
		customHeader : { type : Boolean, default : true },
		headerHeight : { type : Number, default : 44 },
		headerIndex  : { type : Number, default : 999 },
		headerBG     : { type : String, default : '#FFFFFF'},
		statusBarBG  : { type : String, default : '#FFFFFF'},
		footerIndex  : { type : Number, default : 999},
		rbWidth      : { type : Number, default : 100},
		rbBottom     : { type : Number, default : 100 },
		rbRight      : { type : Number, default : 20 },
		footerBg     : { type : String, default : '' },
		flexVal      : { type : String, default : ''},
		borderWidth  : { type : String,  default : '0' },
		borderColor  : { type : String,  default : '#D1D1D1' }
	},
	data() {
		return {
			statusBarHeight : 0,
			iphoneXButtomHeight:0,
			BoundingWidth : '0px'
		}
	},
	created:function(){
		try {
		    var res = uni.getSystemInfoSync();
		} catch (e){
		    return null;
		}
		if(!this.customHeader){return ;}
		this.statusBarHeight = res.statusBarHeight;
	}
}
</script>
<style scoped>
.gui-sbody{width:750rpx;}
.gui-page-header{width:750rpx; position:fixed; left:0; top:0; z-index:99; border-style:solid;}
.gui-page-status-bar{width:750rpx; height:0;}
.gui-page-header-nav{width:750rpx; flex-direction:row; flex-wrap:nowrap;}
.gui-header-main{width:750rpx;}
.gui-page-body{width:750rpx;}
.gui-page-footer{width:750rpx; position:fixed; left:0; bottom:0; z-index:99;}
.gui-page-rb-area{width:100rpx; position:fixed; right:20rpx; bottom:100rpx; z-index:100;}
</style>