<template>
	<div class="detail-wrap">
		<div class="select-box">
			<el-select v-model="value" placeholder="2025" style="width: 160px">
				<el-option
					v-for="item in timeList"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				/>
			</el-select>
			<el-select v-model="value" placeholder="全部合作主体" style="width: 160px">
				<el-option
					v-for="item in zhutiList"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				/>
			</el-select>
			<el-select v-model="value" placeholder="全部合作类型" style="width: 160px">
				<el-option
					v-for="item in typeList"
					:key="item.value"
					:label="item.label"
					:value="item.value"
				/>
			</el-select>
		</div>
		<div class="cardList">
			<div class="card" v-for="item in cooperationList">
				<img :src="item.pic" alt="" class="cardpic"/>
				<div class="cardtext">
					<div class="cardtitle">{{ item.title }}</div>
					<div class="cardzhuti">{{ item.zhuti }}</div>
					<div class="cardbottom">
						<div class="cardtype"
						:class="{cardtype1: item.type==='论文合作',
							cardtype2: item.type==='专利合作'
						}"
						>{{ item.type }}</div>
						<div class="cardtime">{{ item.time }}</div>
					</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>
</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";
import pic8 from "./assets/images/pic8.png";
import pic9 from "./assets/images/pic9.png";


const timeList = ref([
	{
		label: "2025",
		value: "2025"
	},
	{
		label: "2024",
		value: "2024"
	},
	{
		label: "2023",
		value: "2023"
	},
	{
		label: "2022",
		value: "2022"
	},
	{
		label: "2021",
		value: "2021"
	}
]);

const zhutiList = ref([
	{
		label: "全部合作主体",
		value: "全部合作主体"
	},
	{
		label: "清华大学",
		value: "清华大学"
	},
	{
		label: "复旦大学",
		value: "复旦大学"
	}
]);

const typeList = ref([
	{
		label: "全部合作类型",
		value: "全部合作类型"
	},
	{
		label: "论文合作",
		value: "论文合作"
	},
	{
		label: "项目合作",
		value: "项目合作"
	},
	{
		label: "专利合作",
		value: "专利合作"
	}
]);

const cooperationList = ref([
	{
		pic:pic1,
		title:`"气候变化、碳中和与能源智联"(CNEST)研讨会`,
		zhuti:"合作主体：清华大学",
		type:"项目合作",
		time:" 2025年11月19日"
	},
	{
		pic:pic2,
		title:`第三届"复旦-哈佛中美青年领袖对话"`,
		zhuti:"合作主体：复旦大学",
		type:"论文合作",
		time:" 2025年11月19日"
	},
	{
		pic:pic3,
		title:`阿诺德植物园中国访问之旅`,
		zhuti:"合作主体：北京国家植物园",
		type:"专利合作",
		time:" 2025年11月19日"
	},
	{
		pic:pic4,
		title:`哈佛大学与国家应对气候变化战略研究和国际合作中心气候政策合作`,
		zhuti:"合作主体：国家应对气候变化战略研究和国际合作中心",
		type:"论文合作",
		time:" 2025年11月19日"
	},
	{
		pic:pic5,
		title:`北航 — 哈佛 Wood 实验室联合研制䲟鱼仿生吸盘机器人`,
		zhuti:"合作主体：北京航空航天大学",
		type:"专利合作",
		time:" 2025年11月19日"
	},
	{
		pic:pic6,
		title:`山西古建院 — 哈佛中国艺术实验室合作`,
		zhuti:"合作主体：山西省古建筑与彩塑壁画保护研究院",
		type:"专利合作",
		time:" 2025年11月19日"
	},
	{
		pic:pic7,
		title:`川大西部中国研究中心 — 哈佛费正清中国研究中心合作研究中心`,
		zhuti:"合作主体：四川大学",
		type:"项目合作",
		time:" 2025年11月19日"
	},
	{
		pic:pic8,
		title:`哈佛中国健康伙伴计划（HCHP）多机构合作`,
		zhuti:"合作主体：复旦大学、四川大学",
		type:"论文合作",
		time:" 2025年11月19日"
	},
	{
		pic:pic9,
		title:`哈佛中国项目与清华共建大石窝大气监测站`,
		zhuti:"合作主体：清华大学",
		type:"项目合作",
		time:" 2025年11月19日"
	}

]);



</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;
			}
		}
	}


}

.select-box{
	display: flex;
	justify-content: right;
	gap: 8px;
}

.cardList{
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	width: 1600px;
	.card{
		width: 522px;
		height: 180px;
		border-radius: 4px;
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 1);
		display: flex;
		gap: 16px;
		
		.cardpic{
			margin-top: 16px;
			width: 117px;
			height: 148px;
			margin-left: 16px;
		}
		.cardtext{
			display: flex;
			margin-top: 16px;
			flex-direction: column;
			margin-right: 16px;
			gap: 12px;
			height: 148px;
			
			.cardtitle{
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 18px;
				font-weight: 700;
				line-height: 24px;
				letter-spacing: 0px;
				text-align: left;
			}
			.cardzhuti{
				color: rgba(59, 65, 75, 1);
				font-family: Microsoft YaHei;
				font-size: 14px;
				font-weight: 400;
				line-height: 22px;
				letter-spacing: 0px;
				text-align: left;
			}
			.cardbottom{
				display: flex;
				justify-content: space-between;
				height: auto;
				margin-top: auto;
				.cardtype{
					/* 数据展示/Tag标签/亮色/蓝 */
					
					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;

				}
				.cardtype1{
					
					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;

				}
				.cardtype2{
					
					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;

				}
				.cardtime{
					color: rgba(170, 173, 177, 1);
					font-family: Microsoft YaHei;
					font-size: 14px;
					font-weight: 400;
					line-height: 22px;
					letter-spacing: 0px;
					text-align: left;
				}
			}
		}
	}
}

.footer {
	width: 1600px;
	height: 72px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.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>