<template>
	<div class="wrap">
		<div class="header">
			<div class="header-top">
				<div class="header-top-left">
					<img src="" alt="" />
				</div>
				<div class="header-top-center">
					<div class="center-top">
						<div class="name">{{ "兰德公司" }}</div>
						<div class="e-name">{{ "RAND Corporation" }}</div>
					</div>
					<div class="center-center">
						{{ "全球顶尖政策研究机构，专注于国家安全、科技政策、医疗卫生、能源政策、公共安全等领域的研究。 " }}
					</div>
					<div class="center-footer">
						<div class="tag">{{ "国家安全" }}</div>
						<div class="tag">{{ "科技政策" }}</div>
					</div>
				</div>
				<!-- <div class="header-top-right">{{ '查看智库官网' }}</div> -->
			</div>
			<div class="header-footer">
				<div class="tab" :class="{ tabActive: tabActiveName === '智库动态' }" @click="switchTab('智库动态')">
					<div class="icon">
						<img v-show="tabActiveName === '智库动态'" src="./images/tab-icon-active.png" alt="" />
						<img v-show="tabActiveName !== '智库动态'" src="./images/tab-icon.png" alt="" />
					</div>
					<div class="text" :class="{ textActive: tabActiveName === '智库动态' }">{{ "智库动态" }}</div>
				</div>
				<div class="tab" :class="{ tabActive: tabActiveName === '政策追踪' }" @click="switchTab('政策追踪')">
					<div class="icon">
						<img v-show="tabActiveName === '政策追踪'" src="./images/tab-icon2-active.png" alt="" />
						<img v-show="tabActiveName !== '政策追踪'" src="./images/tab-icon2.png" alt="" />
					</div>
					<div class="text" :class="{ textActive: tabActiveName === '政策追踪' }">{{ "政策追踪" }}</div>
				</div>
				<div class="tab" :class="{ tabActive: tabActiveName === '智库百科' }" @click="switchTab('智库百科')">
					<div class="icon">
						<img v-show="tabActiveName === '智库百科'" src="./images/tab-icon3-active.png" alt="" />
						<img v-show="tabActiveName !== '智库百科'" src="./images/tab-icon3.png" alt="" />
					</div>
					<div class="text" :class="{ textActive: tabActiveName === '智库百科' }">{{ "智库百科" }}</div>
				</div>
			</div>
		</div>
		<div class="main">
			<ThinkInfo v-if="tabActiveName === '智库百科'"></ThinkInfo>
			<PolicyTracking v-if="tabActiveName === '政策追踪'"></PolicyTracking>
			<ThinkDaynamics v-if="tabActiveName === '智库动态'"></ThinkDaynamics>
		</div>
	</div>
</template>

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

import ThinkDaynamics from "./thinkDynamics/index.vue"
import PolicyTracking from "./PolicyTracking/index.vue";
import ThinkInfo from "./thinkInfo/index.vue";


const tabActiveName = ref("智库动态");
const switchTab = name => {
	tabActiveName.value = name;
};

</script>

<style lang="scss" scoped>
.wrap {
	width: 1920px;
	height: 984px;
	.header {
		width: 1920px;
		height: 188px;
		box-sizing: border-box;
		padding: 0 160px;
		border-bottom: 1px solid rgba(234, 236, 238, 1);
		border-top: 1px solid rgba(234, 236, 238, 1);
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 1);
		position: relative;
		.header-top {
			margin-top: 24px;
			display: flex;
			.header-top-left {
				width: 88px;
				height: 88px;
				background: purple;
			}
			.header-top-center {
				margin-left: 22px;
				.center-top {
					display: flex;
					.name {
						height: 26px;
						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;
					}
					.e-name {
						margin-left: 11px;
						height: 26px;
						color: rgba(132, 136, 142, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 26px;
						letter-spacing: 0px;
						text-align: left;
					}
				}
				.center-center {
					margin-top: 4px;
					width: 769px;
					height: 24px;
					color: rgba(132, 136, 142, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					letter-spacing: 0px;
				}
				.center-footer {
					margin-top: 9px;
					display: flex;
					gap: 8px;
					.tag {
						height: 26px;
						line-height: 26px;
						text-align: center;
						padding: 0 8px;
						box-sizing: border-box;
						border: 1px solid rgba(231, 243, 255, 1);
						border-radius: 4px;
						background: rgba(246, 250, 255, 1);
						color: rgba(5, 95, 194, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
					}
				}
			}
		}
		.header-footer {
			width: 340px;
			height: 48px;
			position: absolute;
			bottom: 0;
			left: 160px;
			display: flex;
			gap: 24px;
			.tab {
				width: 92px;
				height: 48px;
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 4px;
				cursor: pointer;
				border-bottom: 2px solid transparent;
				.icon {
					width: 16px;
					height: 16px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.text {
					height: 24px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 18px;
					font-weight: 400;
					line-height: 24px;
				}
				.textActive {
					color: rgba(5, 95, 194, 1);
					font-weight: 700;
				}
			}
			.tabActive {
				border-bottom: 2px solid rgba(5, 95, 194, 1);
			}
		}
	}
	.main {
		margin: 0 auto;
		width: 1600px;
		.main-header {
			height: 64px;
			display: flex;
			justify-content: space-between;
			.search-box {
				margin-top: 16px;
				display: flex;
				width: 300px;
				height: 32px;
				box-sizing: border-box;
				border: 1px solid rgba(230, 231, 232, 1);
				border-radius: 4px;
				background: rgba(255, 255, 255, 1);
				.icon {
					width: 16px;
					height: 16px;
					margin: 8px 7px;
					cursor: pointer;
					img {
						width: 100%;
						height: 100%;
					}
				}
			}
			.select-box {
				margin-top: 16px;
				margin-right: 5px;
			}
		}
		.main-content {
			display: flex;
			gap: 16px;
			.left {
				width: 300px;
				height: 806px;
				box-sizing: border-box;
				border: 1px solid rgba(234, 236, 238, 1);
				border-radius: 10px;
				box-shadow: 0px 0px 20px 0px rgba(94, 95, 95, 0.1);
				background: rgba(255, 255, 255, 1);
				position: relative;
				.select-box {
					margin-top: 21px;
					.select-box-header {
						display: flex;
						gap: 17px;
						.icon {
							margin-top: 4px;
							width: 8px;
							height: 16px;
							background: var(--color-main-active);
							border-radius: 0 4px 4px 0;
						}
						.title {
							height: 24px;
							color: var(--color-main-active);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 1px;
							text-align: left;
						}
					}
					.select-main {
						margin-left: 25px;
					}
					.select-main1 {
						width: 100px;
					}
				}
			}
			.right {
				width: 1284px;
				height: 1377px;
				.card-box {
					width: 1284px;
					height: 1248px;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					.footer-card {
						width: 418px;
						height: 300px;
						border-radius: 10px;
						box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
						background: rgba(255, 255, 255, 1);
						.footer-card-top {
							width: 384px;
							height: 206px;
							margin: 0 auto;
							margin-top: 15px;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.footer-card-title {
							margin: 0 auto;
							margin-top: 13px;
							width: 376px;
							height: 24px;
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-size: 18px;
							font-weight: 700;
							line-height: 24px;
						}
						.footer-card-footer {
							margin: 0 auto;
							margin-top: 5px;
							width: 376px;
							height: 22px;
							display: flex;
							justify-content: space-between;
							color: rgba(95, 101, 108, 1);
							font-family: Microsoft YaHei;
							font-size: 14px;
							font-weight: 400;
							line-height: 22px;
						}
					}
				}
				.right-footer {
					margin-top: 43px;
					display: flex;
					justify-content: space-between;
					.info {
						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;
					}
				}
			}
		}
	}
}

:deep(.el-input__wrapper) {
	box-shadow: none;
	border-radius: 10px;
}
:deep(.el-input__wrapper:hover) {
	box-shadow: none !important;
}

:deep(.el-input__wrapper.is-focus) {
	box-shadow: none !important;
}
</style>