<script setup>
import { ref } from 'vue';

const list = ref([
	{ title: "病人管理", img: "/static/patient.png" },
	{ title: "组员管理", img: "/static/ss.png" },
	{ title: "病人康复", img: "/static/health_record.png" },
	{ title: "总健详情", img: "/static/health_assessment.png" },
	{ title: "档案管理", img: "/static/health_plan_overview.png" },
	{ title: "数据统计", img: "/static/tongji.png" },
])

function change(){
	a.value = "lsp"
}
</script>


<template>
	<!-- 头部 -->
	<view class="home">
		<view class="header shadow">
			<view class="img">
				<image src="/static/hospital.png"></image>
			</view>
			<view class="info">
				<view>南方医科大学珠江医院</view>
				<view>李玉华</view>
			</view>
		</view>
		<!-- 功能菜单 -->
		<view class="menu">
			<view v-for="item in 9" :key="title" class="item shadow">
				<view>
					<image :src="list[item - 1]?.img"></image>
					<view>{{ list[item - 1]?.title }}</view>
				</view>
			</view>
		</view>
		<!-- 软件使用反馈 -->
		<button class="feedback_btn">软件使用反馈</button>
		<!-- 退出登录 -->
		<button class="logout_btn" type="warn">退出登录</button>
	</view>

</template>
<style lang="scss" scoped>
	.home{
		height: 95vh;
		padding: 30rpx;
    	background: linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%);
		.shadow {
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
    		border: 1rpx solid #e8f2ff;
			background-color: #fff;
			border-radius: 12rpx;
		}
		.header {
			display: flex;
			gap: 25rpx;
    		padding: 30rpx;
			.img {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				background: linear-gradient(135deg, #e8f2ff 0%, #f0f8ff 100%);
				border: 2rpx solid #e1ecf4;
				
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}
			.info {
				:first-child {
					font-size: 32rpx;
					font-weight: bold;
					color: #1a365d;
					margin-bottom: 8rpx;
					letter-spacing: 0.5rpx;
				}
				:last-child {
					font-size: 26rpx;
            		color: #64748b;
				}
			}
		}
		.menu {
			display: flex;
			gap: 27rpx;
			flex-wrap: wrap;
			margin-top: 35rpx;
			.item {
				width: 30%;
				text-align: center;
				aspect-ratio: 1;
				transition: all 0.2s ease;
				display: flex;
				align-items: center;
				justify-content: center;
				&:active {
					transform: translateY(2rpx);
					box-shadow: 0 1rpx 4rpx rgba(0, 0, 0, 0.06);
				}
				image {
					width: 60rpx;
					height: 60rpx;
				}
				view {
					font-size: 25rpx;
					color: #334155;
            		text-align: center;
				}
			}
		}
		.feedback_btn {
			margin: 35rpx 0;
			font-size: 30rpx;
			height: 95rpx;
			line-height: 95rpx;
			background-color: #fff;
		}
		.logout_btn {
			font-size: 30rpx;
			height: 95rpx;
			line-height: 95rpx;
		}
	}
</style>