<template>
	<div class="detail-wrap">
		<div class="top box">
			<div class="box-header">
				<div class="header-left"></div>
				<div class="title">重点实验室</div>
				<div class="header-right">
					<div class="icon">
						<img src="@/assets/icons/box-header-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
			</div>
			<div class="labList">
				<div class="labCard" v-for="item in labList">
					<img :src="item.pic" alt="" class="labPic"/>
					<div class="labTitle">{{ item.title }}</div>
					<div class="labDes">{{ item.des }}</div>
					<div class="labTags">
						<div class="tag1" v-for="value in item.tags"
						:class="{tag2: value === '化学',tag3: value === '医学',tag4: value === '天体物理'}">{{ value }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="down box">
			<div class="box-header">
				<div class="header-left"></div>
				<div class="title">政策文件</div>
				<div class="header-right">
					<div class="icon">
						<img src="@/assets/icons/box-header-icon2.png" alt="" />
					</div>
					<div class="icon">
						<img src="@/assets/icons/box-header-icon3.png" alt="" />
					</div>
				</div>
			</div>
			<div class="policyList">
				<div class="policyBox" v-for="item in policyList">
					<img :src="pic7" alt="" />
					<div class="polContent">
						<div class="polTitle">{{ item.title }}</div>
						<div class="polDes">{{ item.des }}</div>
					</div>
				</div>
			</div>
			<div class="footer">
				<div class="info">
					{{ `共105篇合作动态` }}
				</div>
				<div class="page-box">
					<el-pagination background layout="prev, pager, next" :total="153" />
				</div>
			</div>
		</div>
		
		
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";

import pic1 from "./assets/images/pic1.png";
import pic2 from "./assets/images/pic2.png";
import pic3 from "./assets/images/pic3.png";
import pic4 from "./assets/images/pic4.png";
import pic5 from "./assets/images/pic5.png";
import pic6 from "./assets/images/pic6.png";
import pic7 from "./assets/images/pic7.png";

const labList = ref([
	{
		pic:pic1,
		title:`怀斯生物启发工程研究所`,
		des:"成立于2009年，由汉斯约尔格·怀斯（Hansjörg Wyss）捐赠建立，聚焦仿生学与跨学科工程，推动医疗、机器人、材料等领域的突破。",
		tags:["生物科技"]
	},
	{
		pic:pic2,
		title:`罗兰研究所`,
		des:"原为独立研究机构，2002年并入哈佛，支持高风险、高回报的基础科学研究，尤其鼓励青年科学家。",
		tags:["物理学","化学"]
	},
	{
		pic:pic3,
		title:`哈佛量子计划`,
		des:"跨学院合作平台，整合物理、工程、计算机科学等资源，推动量子科学与技术发展。",
		tags:["物理"]
	},
	{
		pic:pic4,
		title:`博德研究所`,
		des:"全球顶尖基因组学与生物医学研究中心，推动精准医学与疾病机制研究。",
		tags:["医学"]
	},
	{
		pic:pic5,
		title:`哈佛干细胞研究所`,
		des:"成立于2004年，联合哈佛医学院、牙医学院、文理学院等，推动干细胞基础研究与临床转化。",
		tags:["医学"]
	},
	{
		pic:pic6,
		title:`哈佛大学天体物理中心`,
		des:"由哈佛大学与史密森尼学会于1973年联合成立，是全球规模最大、最活跃的天体物理研究机构之一。",
		tags:["天体物理"]
	}

]);

const policyList = ref([
	{
		title:"《哈佛大学权利与责任声明》",
		des:"阐明学生在言论自由、学术自由、正当程序、尊重他人等方面的权利与义务。"
	},
	{
		title:"《哈佛大学学术诚信政策》",
		des:"定义抄袭、作弊、伪造等学术不端行为，并规定处理流程。"
	},
	{
		title:"《哈佛大学反歧视与反骚扰政策》",
		des:"禁止基于种族、性别、性取向、宗教、残疾等的歧视与骚扰，明确举报与调查机制。"
	},
	{
		title:"《研究合规与人类受试者保护政策》",
		des:"规范涉及人类受试者的研究（如医学、心理学、社会学实验），确保符合联邦法规（如Common Rule）。"
	},
	{
		title:"《哈佛法学院学术政策手册》",
		des:"详述J.D./LL.M./S.J.D.学位要求、课程规则、成绩制度、书面作业要求、出勤规定、荣誉毕业标准等。"
	},
	{
		title:"《哈佛文理研究生院学生手册》",
		des:"涵盖博士生资格考试、论文提交、助教职责、奖学金续期、学术进展评估等。"
	}
]);




</script>

<style lang="scss" scoped>
.detail-wrap {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-bottom: 30px;
	.box {
		border: 1px solid rgba(234, 236, 238, 1);
		border-radius: 10px;
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 1);
	}
	.box-header {
		height: 56px;
		display: flex;
		position: relative;
		.header-left {
			margin-top: 18px;
			width: 8px;
			height: 20px;
			border-radius: 0 4px 4px 0;
			background: rgba(10, 87, 166, 1);
		}
		.title {
			margin-left: 14px;
			margin-top: 14px;
			color: rgba(5, 95, 194, 1);
			font-family: Microsoft YaHei;
			font-size: 20px;
			font-weight: 700;
			line-height: 26px;
			letter-spacing: 0px;
			text-align: left;
		}
		.header-btn-box {
			position: absolute;
			top: 14px;
			right: 52px;
			display: flex;
			.btn {
				margin-left: 8px;
				height: 28px;
				padding: 0 8px;
				box-sizing: border-box;
				border: 1px solid rgba(230, 231, 232, 1);
				border-radius: 4px;
				background: rgba(255, 255, 255, 1);
				text-align: center;
				line-height: 28px;
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				cursor: pointer;
			}
			.btnActive {
				border: 1px solid rgba(10, 87, 166, 1);
				background: rgba(246, 250, 255, 1);
				color: rgba(10, 87, 166, 1);
			}
		}
		.header-info {
			height: 22px;
			position: absolute;
			right: 84px;
			top: 17px;
			display: flex;
			justify-content: flex-end;
			.icon {
				margin-top: 3px;
				width: 14px;
				height: 14px;
				margin-right: 8px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.text {
				height: 22px;
				color: rgba(95, 101, 108, 1);
				font-family: Microsoft YaHei;
				font-size: 14px;
				font-weight: 400;
				line-height: 22px;
			}
		}
		.header-right {
			position: absolute;
			top: 14px;
			right: 12px;
			display: flex;
			justify-content: flex-end;
			gap: 8px;
			.icon {
				width: 28px;
				height: 28px;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.checkboxRight{
				color: rgba(132, 136, 142, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 24px;
				letter-spacing: 0px;
				text-align: justify;
			}
			.btnRightActive{
				width: 80px;
				height: 28px;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				border: 1px solid rgba(5, 95, 194, 1);
				border-radius: 4px;
				background: rgba(231, 243, 255, 1);
				color: rgba(5, 95, 194, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 30px;
				letter-spacing: 0px;
				text-align: center;
			}
			.btnRight{
				width: 80px;
				height: 28px;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				border: 1px solid rgba(230, 231, 232, 1);
				border-radius: 4px;
				background: rgba(255, 255, 255, 1);
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 400;
				line-height: 30px;
				letter-spacing: 0px;
				text-align: center;
			}
		}
	}
}

.top{
	width: 1600px;
	height: 552px;
	.labList{
		display: flex;
		gap: 16px;
		margin-left: 24px;
		flex-wrap: wrap;
		.labCard{
			width: 376px;
			height: 228px;
			display: flex;
			flex-direction: column;
			padding: 20px;
			box-sizing: border-box;
			border: 1px solid rgba(234, 236, 238, 1);
			border-radius: 10px;
			background: rgba(255, 255, 255, 0.65);
			.labPic{
				width: 32px;
				height: 32px;
			}
			.labTitle{
				margin-top: 12px;
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 700;
				line-height: 24px;
				letter-spacing: 1px;
				text-align: left;
			}
			.labDes{
				margin-top: 4px;
				color: rgba(95, 101, 108, 1);
				font-family: Microsoft YaHei;
				font-size: 14px;
				font-weight: 400;
				line-height: 22px;
				letter-spacing: 0px;
				text-align: justify;
			}
			.labTags{
				display: flex;
				gap: 8px;
				height: auto;
				margin-top: auto;
				.tag1{
					height: 22px;				
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					padding: 1px 8px 1px 8px;
					box-sizing: border-box;
					border: 1px solid rgba(186, 224, 255, 1);
					border-radius: 4px;
					background: rgba(230, 244, 255, 1);
					color: rgba(22, 119, 255, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}
				.tag2{
					height: 22px;				
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					padding: 1px 8px 1px 8px;
					box-sizing: border-box;
					border: 1px solid rgba(255, 163, 158, 1);
					border-radius: 4px;
					background: rgba(255, 241, 240, 1);
					color: rgba(245, 34, 45, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}
				.tag3{
					height: 22px;				
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					padding: 1px 8px 1px 8px;
					box-sizing: border-box;
					border: 1px solid rgba(255, 241, 184, 1);
					border-radius: 4px;
					background: rgba(255, 251, 230, 1);
					color: rgba(250, 173, 20, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}
				.tag4{
					height: 22px;				
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					padding: 1px 8px 1px 8px;
					box-sizing: border-box;
					border: 1px solid rgba(217, 247, 190, 1);
					border-radius: 4px;
					background: rgba(246, 255, 237, 1);
					color: rgba(82, 196, 26, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 20px;
				}
			}
		}
	}

}

.down{
	width: 1600px;
	height: 362px;
	.policyList{
		width: 1600px;
		display: flex;
		gap: 16px;
		margin-left: 24px;
		flex-wrap: wrap;
		.policyBox{
			width: 506px;
			height: 109px;
			box-sizing: border-box;
			border: 1px solid rgba(234, 236, 238, 1);
			border-radius: 10px;
			background: rgba(255, 255, 255, 0.65);
			display: flex;
			gap: 16px;
			padding: 16px;
			.polPic{
				width: 57px;
				height: 77px;
				box-sizing: border-box;
				border: 1px solid rgba(234, 236, 238, 1);
				background: url("./assets/images/pic7.png");
			}
			.polContent{
				display: flex;
				gap: 4px;
				flex-direction: column;
				
				.polTitle{
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 16px;
				font-weight: 700;
				line-height: 24px;
				letter-spacing: 1px;
				text-align: left;
			}
			.polDes{
				color: rgba(95, 101, 108, 1);
				font-family: Microsoft YaHei;
				font-size: 14px;
				font-weight: 400;
				line-height: 22px;
				letter-spacing: 0px;
				text-align: justify;
			}
			}
			
		}
	}
	.footer {
		
		height: 72px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-left: 24px;
		margin-right: 26px;
		.info{
			width: 109px;
			height: 19px;
			color: rgba(132, 136, 142, 1);
			font-family: Microsoft YaHei;
			font-size: 14px;
			font-weight: 400;
			line-height: 18px;
			letter-spacing: 0px;
			text-align: left;
		}
	}
}








</style>