<template>
	<div class="detail-wrap">
		<div class="left box">
			<div class="box-header">
				<div class="header-left"></div>
				<div class="title">最新动态</div>
				<div class="header-right">
					<el-checkbox checked="true" label="只看涉华动态" />
					<div class="btnRightActive">机构动态</div>
					<div class="btnRight">主官动态</div>
					<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="left-main">
				<div class="left-main-item" v-for="(item, index) in curList" :key="index">
					<div class="line" ></div>
					<div class="time">
						<div class="timetext">{{ item.time }}</div> 
						<div class="timetext">{{ item.date }}</div> 
					</div>
					<div class="icon">
						<img src="./assets/images/small-harvard.png" alt="" />
					</div>
					<div class="info">
						<div class="header">
							<div class="title">{{ item.title }}</div>
						</div>
						<div class="content">{{ item.content }}</div>
						<div class="tag-box">
							<div class="tag" v-for="(val, idx) in item.tagList" :key="idx">{{ val }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="left-footer">
				<div class="info">
					{{ `共有153项动态` }}
				</div>
				<div class="page-box">
					<el-pagination background layout="prev, pager, next" :total="153" />
				</div>
			</div>
		</div>
		<div class="rightcontent">
			<div class="right 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="right-main">
					<div class="img-box">
						<img :src="basicInfo.image" alt="" />
					</div>
					<div class="info-box">
						<div class="info-item">
							<div class="info-item-left">{{ "成立时间：" }}</div>
							<div class="info-item-right">{{ basicInfo.shijian }}</div>
						</div>
						<div class="info-item">
							<div class="info-item-left">{{ "总部地址：" }}</div>
							<div class="info-item-right">{{ basicInfo.dizhi }}</div>
						</div>
						<div class="info-item">
							<div class="info-item-left">{{ "组织性质：" }}</div>
							<div class="info-item-right">{{ basicInfo.xingzhi }}</div>
						</div>
						<div class="info-item">
							<div class="info-item-left">{{ "在校人数：" }}</div>
							<div class="info-item-right">{{ basicInfo.stuNum }}</div>
						</div>
						<div class="info-item">
							<div class="info-item-left">{{ "教职工数：" }}</div>
							<div class="info-item-right">{{ basicInfo.teaNum }}</div>
						</div>
						<div class="info-item">
							<div class="info-item-left">{{ "QS排名：" }}</div>
							<div class="info-item-right">{{ basicInfo.rate }}</div>
						</div>
						
						<div class="info-item">
							<div class="info-item-left">{{ "QS排名：" }}</div>
							<div class="taglist">
								<div class="tagdirec" v-for="item in basicInfo.tag">{{ item }}</div>
							</div>
						</div>
					</div>
					<div class="user-box">
						<div class="user-header">
							{{ "重点人物：" }}
						</div>
						<div class="user-content">
							<div class="user-item" v-for="(item, index) in basicInfo.keyUser" :key="index">
								<div class="user-item-left">
									<img :src="item.img" alt="" />
								</div>
								<div class="user-item-right">
									<div class="name">{{ item.name }}</div>
									<div class="position">{{ item.position }}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="right-Num">
				<div class="numbox" v-for="item in awardsList">
					<div class="iconrec"></div>
					<div class="awards">{{ item.name }}</div>
					<div class="awardsNum">{{ item.num }}</div>
				</div>
			</div>
			<div class="right-history">
				<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="historytimeline">
					<div class="timeline"></div>
					<div class="historyList">
						<div class="historyPoint" v-for="item in historyList">
							<div class="historytime">{{ item.time }}</div>
							<img src="./assets/images/timepoint.png" alt="" style="z-index: 2;" />
							<div class="historyitem">{{ item.event }}</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

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

import Img from "./assets/images/img.png";
import User1 from "./assets/images/user1.png";
import User2 from "./assets/images/user2.png";
import User3 from "./assets/images/user3.png";
import User4 from "./assets/images/user4.png";

const basicInfo = ref({
	image: Img,
	shijian: "1636年",
	dizhi: "剑桥市，马萨诸塞州，美国",
	xingzhi:"私立研究型大学",
	stuNum:"约22,000人",
	teaNum:"约2,400人",
	rate:"#1",
	tag:["癌症精准医疗","气候变化解决方案","人工智能伦理","可持续发展能源"],
	keyUser: [
		{
			name: "艾伦·M·加伯",
			img: User1,
			position: "第30任校长"
		},
		{
			name: "迈克尔·桑德尔",
			img: User2,
			position: "政府学教授"
		},
		{
			name: "拉凯什·库拉纳",
			img: User3,
			position: "哈佛学院院长"
		},
		{
			name: "乔治·丘奇",
			img: User4,
			position: "哈佛医学院遗传学教授"
		}
	]
});

const curList = ref([
	{
		title: "哈佛大学再遭电话钓鱼攻击致数据泄露",
		time: "2025",
		date: "10月10日",
		content:
			"一名未授权人员通过社会工程手段入侵校友数据库，泄露联系方式、捐赠记录等信息。这是该校2025年内第二次重大数据泄露。",
		tagList: ["数据泄露"]
	},
	{
		title: "哈佛医学院发生爆炸，警方认定系蓄意制造",
		time: "2025 ",
		date: "10月4日",
		content:
			"202年11月1日凌晨2:48，哈佛医学院一栋教学楼四层发生爆炸，无人伤亡。波士顿警方公布两名戴面罩嫌疑人监控画面，FBI介入调查。",
		tagList: ["恐怖袭击"]
	},
	{
		title: "常春藤盟校联合加强网络安全联盟",
		time: "2025 ",
		date: "9月29日",
		content:
			"哈佛与普林斯顿、耶鲁、哥伦比亚等校宣布成立“常春藤网络安全协作体”，应对日益频繁的高校网络攻击。哈佛与普林斯顿、耶鲁、哥伦比亚等校宣布成立“常春藤网络安全协作体”。",
		tagList: ["生物科技"]
	},
	{
		title: "哈佛校长克劳丁·盖伊因学术诚信争议辞职",
		time: "2025 ",
		date: "9月21日",
		content:
			"首位非裔女校长克劳丁·盖伊（Claudine Gay）因多篇论文涉嫌抄袭及国会听证会上言论引发舆论风暴，上任不足一年即辞职。",
		tagList: ["先进制造"]
	},
	{
		title: "艾伦·M·加伯接任临时校长",
		time: "2025 ",
		date: "9月15日",
		content:
			"原教务长艾伦·加伯（Alan M. Garber）出任哈佛第30任校长（临时），承诺恢复学术诚信与校园团结。原教务长艾伦·加伯（Alan M. Garber）出任哈佛第30任校长（临时），承诺恢复学术诚信与校园团结。",
		tagList: ["集成电路"]
	},
	{
		title: "联邦法官叫停特朗普政府“禁招国际学生”令",
		time: "2025 ",
		date: "9月11日",
		content:
			"2025年5月29日，马萨诸塞州联邦法院法官艾莉森·伯勒斯发布临时限制令，阻止国土安全部取消哈佛招收国际学生资质。法院认为政府行为缺乏程序正当性，可能对学校造成“不可逆损害”，允许哈佛继续接收持有效签证学生。",
		tagList: ["集成电路"]
	},
	{
		title: "特朗普政府要求哈佛30天内提交“改革证据”",
		time: "2025 ",
		date: "9月10日",
		content:
			"2025年5月底，美国司法部致函哈佛，给予30天期限说明为何不应撤销其国际招生资质。此前政府指责哈佛“营造反犹环境”并拒绝提供学生名单。此举被视为强硬立场软化后的策略调整。",
		tagList: ["人工智能"]
	},
	{
		title: "哈佛2025届毕业典礼成政治声援现场",
		time: "2025 ",
		date: "9月1日",
		content:
			"在阴云密布的天空下，约3万师生家长齐聚哈佛第374届毕业典礼。众多毕业生佩戴白花声援国际学生，校长艾伦·加伯致辞强调“哈佛属于世界”，全场起立鼓掌逾一分钟，场面感人。",
		tagList: ["集成电路"]
	},
	{
		title: "哈佛教授警告：国际博士生面临系统性驱逐风险",
		time: "2025 ",
		date: "8月25日",
		content: "多位哈佛教授联名发声，指当前政策使90%以上国际博士生陷入签证不确定性，恐导致人才外流。",
		tagList: ["能源", "先进制造"]
	},
	{
		title: "巴以冲突激化哈佛校园对立",
		time: "2025 ",
		date: "8月19日",
		content:
			"2023年10月，亲巴勒斯坦与亲以色列学生团体在校园多次激烈对峙，部分活动演变为肢体冲突。校方因初期回应迟缓遭多方批评，后成立特别工作组调解矛盾。",
		tagList: ["先进制造"]
	},
	{
		title: "联邦法院裁定哈佛招生不构成种族歧视",
		time: "2025 ",
		date: "8月19日",
		content:
			"2022年8月，马萨诸塞州地方法院驳回“学生公平录取组织”诉讼，认为哈佛在本科招生中审慎考虑种族因素以促进多样性，符合现行法律框架。",
		tagList: ["先进制造"]
	},
	{
		title: "哈佛捐赠基金规模达509亿美元，全球第一",
		time: "2025 ",
		date: "8月19日",
		content:
			"2023财年报告显示，尽管市场波动，哈佛管理公司（HMC）仍维持全球最大高校捐赠基金地位，为教学、科研与助学提供坚实财务支撑。",
		tagList: ["先进制造"]
	}
]);

const awardsList = ref([
	{
		name:"诺贝尔奖",
		num:161
	},
	{
		name:"图灵奖",
		num:18
	},
	{
		name:"菲尔兹奖",
		num:14
	},
	{
		name:"美国院士",
		num:273
	}
]);

const historyList = ref([
	{
		time:"2023年",
		event:"克劳丁·盖伊成为首位非裔女校长"
	},
	{
		time:"1999年",
		event:"拉德克利夫学院转型为“拉德克利夫高等研究院”"
	},
	{
		time:"1977年",
		event:"哈佛与拉德克利夫学院正式合并招生"
	},
	{
		time:"1950年",
		event:"逐步废除招生中的宗教、种族限制，学生群体多元化"
	},
	{
		time:"1908年",
		event:"哈佛商学院成立，首创MBA案例教学法"
	},
	{
		time:"1869年",
		event:"查尔斯·W·艾略特任校长40年，推行选修制、重建法学院、改革医学院、新建商学院等"
	}
]);
</script>

<style lang="scss" scoped>
.detail-wrap {
	display: flex;
	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;
			}
		}
	}
	.left {
		width: 1064px;
		height: 2083px;
		.left-main {
			border-top: 1px solid rgba(234, 236, 238, 1);
			height: 1905px;
			.left-main-item {
				display: flex;
				margin-top: 20px;
				gap: 18px;
				margin-left: 31px;
				height: 130px;
				position: relative;
				.line {
					background: #e6e7e8;
					width: 2px;
					height: 132px;
					position: absolute;
					top: 24px;
					left: 106px;
				}
				.time {
					display: flex;
					flex-direction: column;
					.timetext{
						width: 79px;
						color: rgba(5, 95, 194, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 700;
						line-height: 24px;
						letter-spacing: 1px;
						text-align: right;
					}
				}
				.icon {
					width: 24px;
					height: 24px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.info {
					width: 862px;
					.header {
						height: 26px;
						display: flex;
						justify-content: space-between;
						.title {
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 20px;
							font-weight: 700;
							line-height: 26px;
						}
					}
					.content {
						margin-top: 8px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
					}
					.tag-box {
						margin-top: 12px;
						display: flex;
						gap: 8px;
						.tag {
							height: 28px;
							padding: 0 8px;
							line-height: 28px;
							border-radius: 4px;
							background: rgba(231, 243, 255, 1);
							color: rgba(5, 95, 194, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
						}
					}
				}
			}
		}
		.left-footer {
			height: 75px;
			border-top: 1px solid rgba(234, 236, 238, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20px;
		}
	}
	.rightcontent{
		display: flex;
		flex-direction: column;
		width: 520px;
		gap: 16px;
		.right {
			width: 520px;
			height: 874px;
			.right-main {
				width: 469px;
				margin: 3px auto;
				.img-box {
					width: 469px;
					height: 240px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.info-box {
					margin-top: 26px;
					padding-bottom: 50px;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					.info-item {
						display: flex;
						margin-top: 12px;
						.info-item-left {
							width: 88px;
							height: 24px;
							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;
						}
						.info-item-right {
							width: 356px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: left;
						}
						.taglist{
							width: 358px;
							display: flex;
							gap: 8px;
							flex-wrap: wrap;
							.tagdirec{
								height: 24px;
								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;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}
				}
				.user-box {
					padding-top: 19px;
					.user-header {
						height: 24px;
						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;
					}
					.user-content {
						margin-top: 19px;
						display: flex;
						flex-wrap: wrap;
						gap: 16px 73px;
						justify-content: start;
						.user-item {
							height: 49px;
							display: flex;
							gap: 8px;
							.user-item-left {
								width: 48px;
								height: 48px;
								img {
									width: 100%;
									height: 100%;
								}
							}
							.user-item-right {
								.name {
									height: 24px;
									color: rgba(59, 65, 75, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 700;
									line-height: 24px;
									letter-spacing: 0px;
									text-align: left;
								}
								.position {
									height: 24px;
									color: rgba(95, 101, 108, 1);
									font-family: Microsoft YaHei;
									font-size: 16px;
									font-weight: 400;
									line-height: 24px;
									letter-spacing: 0px;
									text-align: left;
								}
							}
						}
					}
				}
			}
		}
		.right-Num{
			display: flex;
			flex-wrap: wrap;
			width: 520px;
			gap: 8px;
			
			.numbox{
				display: flex;
				width: 256px;
				height: 80px;
				box-sizing: border-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);
				align-items: center;
				.iconrec{
					width: 4px;
					height: 49px;
					background: rgba(5, 95, 194, 1);
				}
				.awards{
					margin-left: 24px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 20px;
					font-weight: 700;
					line-height: 26px;
					letter-spacing: 0px;
					text-align: left;
				}
				.awardsNum{
					margin-left: 72px; 
					color: rgba(5, 95, 194, 1);
					font-family: Microsoft YaHei;
					font-size: 30px;
					font-weight: 700;
					line-height: 24px;
					letter-spacing: 0px;
					text-align: right;
				}
			}
		}
		.right-history{
			width: 520px;
			height: 1009px;
			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);
			.historytimeline{
				display: flex;
				margin-left: 37px;
				margin-top: 29px;
				.timeline{
					position: absolute;
					width: 8px;
					height: 910px;
					background: url("./assets/images/arrow.png") repeat;
					
				}
				.historyList{
					
					margin-left: -2px;
					display: flex;
					flex-direction: column;
					margin-top: 42px;
					gap: 56px;
					
					.historyPoint{
						width: 458px;
						height: 89px;
						gap: 6px;
						.historytime{
							margin-left: 24px;
							color: rgba(5, 95, 194, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 1px;
							text-align: left;
						}
						.historyitem{
							margin-left: 24px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
							letter-spacing: 0px;
							text-align: justify;
						}
					}
				}
			}
		}
	}
}




::v-deep .el-checkbox__label{
        color: rgba(132, 136, 142, 1);
		font-family: Microsoft YaHei;
		font-size: 16px;
		font-weight: 400;
		line-height: 24px;
        padding-left: 3px;
		padding-right: 10px;
      }

</style>