hlt_app/pages/index/index.vue

<template>
	<view class="home-page-box">
		<view class="navigation-box"></view>
		<!-- 单位 -->
		<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>
</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 {
		min-height: calc(100vh - var(--window-bottom));
		background: url('@/static/images/index/bg.png') no-repeat;
		background-size: 100% 100%;
		padding: 0 20rpx;
		
		.navigation-box{
			height: var(--status-bar-height);
			min-height: 88rpx;
			margin-bottom: 44rpx;
		}
		
		.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>