great_distribution/pages/index/index.vue

<template>
	<view class="index-content" :style="{'--status-bar-': statusBarHeight}">
		<view class="index-content-info">
			<!-- 头部主要内容 开始 -->
			<view class="index-content-header">	
				<customNavbar 
				title="首页" 
				bgColor="rgba(0,0,0,0)"
				:is-left="false"
				:customNavbarInfo='{}'></customNavbar>
				<u-search :showAction="true" bgColor="#fff" actionText="搜索"></u-search>
			</view>
			<!-- 头部主要内容 结束 -->
			
			<!-- 列表主要内容 开始 -->
			
			<view class="index-content-list">
				
			</view>
			<!-- 列表主要内容 结束 -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '这是首页',
				statusBarHeight: 0, // 状态栏安全距离
			}
		},
		onLoad() {

		},
		onShow() {
			this.statusBarHeight = getApp().globalData.statusBarHeight
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.index-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		
		--header-h: 170rpx;
		// background-color: 
		.index-content-info {
			width: 100%;
			box-sizing: border-box;
		}
	}
	/** 头部主要内容 开始 */
	.index-content-header {
		width: 100%;
		height: var(--header-h);
		box-sizing: border-box;
		background-color: var(--gd-bgm-color);
		::v-deep .u-search {
			padding: 0 30rpx !important;
		}
		::v-deep .u-search__action {
			color: #fff !important;
		}
	}
	/** 头部主要内容 结束  **/
	
	
	/** 列表主要内容 开始 */
	.index-content-list {
		width: 100%;
		height: calc( 100% - var(--header-h) - var(--status-bar-h) );
	}
	/** 列表主要内容 结束  **/
</style>