delivery-depot-uniapp/pages/home/home.vue

<template>
	<view class="home-content">
		<image class="bg-image" src="../../static/home/home-bj.png" mode="widthFix"></image>
		<image class="logo-image" src="../../static/home/logo.png" mode="widthFix"></image>
		<view class="uni-flex uni-column menu-wrap">
			<view @click="goDetailPage('/pages/daixjgk/daixjgk')" class="flex-item flex-item-V">
				<image src="../../static/home/daixjsk.png" alt="待选交收库" mode="widthFix"></image>
			</view>
			<view class="flex-item flex-item-V">
				<image src="../../static/home/beixjsk.png" alt="备选交收库" mode="widthFix"></image>
			</view>
			<view class="flex-item flex-item-V">
				<image src="../../static/home/jiaoskxdqk.png" alt="交收库选定情况" mode="widthFix"></image>
			</view>
			<view class="flex-item flex-item-V">
				<image src="../../static/home/jiaosklqjc.png" alt="交收库粮情监测" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	const goDetailPage = (url) => {
		uni.navigateTo({
			url: url
		})
	}
</script>

<style lang="scss" scoped>
	.home-content {
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
		overflow: hidden;
	}

	.bg-image {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		object-fit: cover;
	}

	.logo-image {
		position: absolute;
		width: 50%;
		top: 140rpx;
		left: 40rpx;
	}

	.menu-wrap {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		margin: 0 40rpx;
		padding-top: 280rpx;
		box-sizing: border-box;
		z-index: 1;
	}

	.flex-item {
		flex-grow: 1;
		image {
			width: 100%;
			height: auto;
		}
	}
</style>