hlt_app/pages/index/index.vue

<template>
	<view class="home-page-box">
		<view class="bg-box">
			<image style="width: 100%; height: 100%;" src="/static/images/index/bg.png" mode="scaleToFill"></image>
		</view>
		<view class="status-bar-box"></view>
		<view class="navigation-bar-box"></view>
		<view class="home-page-box-content">
			<!-- 单位 -->
			<view class="conpany-box">
				<view class="conpany-title">
					黑龙滩管理处
				</view>
				<view class="split-line"></view>
			</view>
			<!-- 标题 -->
			<header-title></header-title>
			<!-- 水库水情功能区 -->
			<reservoir-func></reservoir-func>
			<!-- 巡查管护功能区 -->
			<inspection-func></inspection-func>
			<view class="empty-box"></view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';
	import moment from 'moment';
	import headerTitle from './components/headerTitle.vue';
	import reservoirFunc from './components/reservoirFunc.vue';
	import inspectionFunc from './components/inspectionFunc.vue';

	onMounted(() => {})
</script>

<style lang="scss" scoped>
	.home-page-box {
		
		// background: url('@/static/images/index/bg.png') no-repeat;
		// background-size: 100% 100%;
		padding: 0 20rpx;

		.bg-box {
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: -1;
		}

		.status-bar-box {
			height: var(--status-bar-height);
		}
		.navigation-bar-box{
			height: 88rpx;
		}

		&-content {
			height: calc(100vh - var(--window-bottom) - 88rpx - var(--status-bar-height));
			overflow: auto;
			
			.conpany-box {

				.conpany-title {
					font-family: Source Han Sans;
					font-size: 50rpx;
					font-weight: bold;
					font-feature-settings: "kern" on;
					color: $uni-text-color;
					line-height: 72rpx;
				}

				.split-line {
					margin-top: 16rpx;
					width: 140rpx;
					height: 8rpx;
					background: #2E7DF3;
				}
			}

			.empty-box {
				height: 40rpx;
			}
		}
	}
</style>