<template>
	<view class="content">
		<uni-nav-bar :border="false" backgroundColor="#566CFF" color="#FFFFFF" :fixed="true">
			<view class="navigation-title">
				<image src="/static/images/logo.png" mode="aspectFit" class="logo-icon"></image>
				徐汇园林智慧系统
			</view>
		</uni-nav-bar>

		<view class="welcome">
			<view class="welcome-english">Welcome!</view>
			<view class="welcome-china">欢迎来到徐汇园林智慧系统</view>
		</view>

		<view class="menu-list">
			<view class="menu-item" v-for="(item,index) in menuList" :key="index">
				<view class="icon-name">
					<view class="icon">
						<image :src="`/static/images/${item.icon}.png`" class="image-icon" mode="aspectFit"></image>
					</view>
					<view class="name">{{item.name}}</view>
				</view>
				
				<image class="menu-item-bg" :src="`/static/images/${item.bg}.png`" mode="aspectFill"></image>
				
			</view>
		</view>

	</view>
</template>

<script setup>
	//菜单
	const menuList = [{
			name: "应急抢险",
			icon:'yj-icon',
			bg:'yj-bg'
		},
		{
			name: "绿化养护",
			icon:'lh-icon',
			bg:'lh-bg'
		},
		{
			name: "公园养护",
			icon:'park-icon',
			bg:'park-bg'
		},
		{
			name: "自有产管理",
			icon:'zy-icon',
			bg:'zy-bg'
		},
	]
</script>

<style>
	page {
		background: #F5F8FD;
	}
</style>

<style lang="scss" scoped>
	.navigation-title {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		font-weight: bold;
		gap: 18rpx;
		font-family: 'Alimama ShuHeiTi-Bold';

		.logo-icon {
			width: 73rpx;
			height: 90rpx;
		}
	}

	.welcome {
		height: 295rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 17rpx;
		background-image: url(/static/images/welcome-bg.png);
		background-size: 100% 100%;

		.welcome-english {
			font-size: 64rpx;
			color: #FFFFFF;
			font-weight: bold;
			font-family: 'Alimama ShuHeiTi-Bold';
		}

		.welcome-china {
			font-size: 32rpx;
			color: #FFFFFF;
			font-weight: 400;
		}
	}

	.menu-list {
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		padding-bottom: 24rpx;
		.menu-item {
			position: relative;
			height: 260rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(121, 156, 221, 0.25);
			border-radius: 16rpx ;
			display: flex;
			align-items: center;
			padding-left: 88rpx;
			
		}
		.icon-name{
			display: flex;
			align-items: center;
			gap: 36rpx;
			.icon{
				height: 110rpx;width: 110rpx;
				background: linear-gradient(180deg, #a7c8fe 0%, #287aff 100%);
				box-shadow: 0px 4px 10px 0px #a5c6fa;
				          border-radius: 10px;
						  display: flex;
						  align-items: center;
						  justify-content: center;
				.image-icon{
					height: 100rpx;width: 100rpx;
				}		  
			}
			.name{
				
				font-size: 36rpx;
				color: #0F2944;
				font-weight: 500;
				  font-family: 'MiSans-Medium';
			}
		}
		.menu-item-bg{
			position: absolute;
			right: 0;
			top: 0;
			width: 130rpx;
			height: 177rpx;

		}
	}
</style>