<template>
	<div class="sanction-container">
		<!-- 页面标题区域 -->
		<div class="page-header">
			<!-- <h1 class="main-title">制裁分析</h1> -->
			<div class="bill-info">
				<div class="bill-details">
					<div class="main-title">FCC新规分析：限制中国实验室参与设备认证</div>
					<div class="bill-name-en">全面解析美国联邦通信委员会(FCC)2025年新规对中国检测认证行业的影响</div>
				</div>
				<div class="date-author">
					<div class="date">2025年7月</div>
					<div class="author">乔迪·阿灵顿（Jodey Arrington）</div>
				</div>
			</div>
		</div>

		<!-- 导航标签区域 -->
		<!-- <div class="nav-section">
			<div class="tabs">
				<div class="tab-item active">制裁概况</div>
				<div class="tab-item">深度挖掘</div>
				<div class="tab-item">影响分析</div>
			</div>
			<div class="action-buttons">
				<el-button>法案原文</el-button>
				<el-button type="primary">分析报告</el-button>
			</div>
		</div> -->

		<!-- 内容区域 -->
		<!-- <div class="content-section">
			<div class="content-placeholder">
				<el-icon><document /></el-icon>
				<p>这里是制裁概况的内容区域</p>
				<p>请选择上方标签查看不同分析内容</p>
			</div>
		</div> -->
	</div>
</template>

<script setup>
const activeTab = ref("制裁概况");

const setActiveTab = tabName => {
	activeTab.value = tabName;
};
</script>

<style scoped>
.sanction-container {
	width: 100%;
	/* max-width: 1200px; */
	background-color: #fff;
	/* border-radius: 8px; */
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	box-sizing: border-box;
	padding-left: 5%;
	padding-right: 5%;
}

.page-header {
	padding: 24px;
	padding-top: 0;
	/* border-bottom: 1px solid #ebeef5; */
}

.main-title {
	font-size: 20px;
	font-weight: 700;
	color: rgba(59, 65, 75, 1);
	/* color: var(--base-color); */
	margin-bottom: 8px;
}

.bill-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16px;
}

.bill-details {
	flex: 1;
}

.bill-name {
	font-size: 16px;
	color: #606266;
	margin-bottom: 4px;
}

.bill-name-en {
	font-size: 14px;
	color: #909399;
	font-style: italic;
}

.date-author {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.date {
	font-size: 14px;
	color: #606266;
	margin-bottom: 4px;
}

.author {
	font-size: 14px;
	color: #606266;
}

.nav-section {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 24px;
	background-color: #f8fafc;
	border-bottom: 1px solid #ebeef5;
}

.tabs {
	display: flex;
	gap: 0;
}

.tab-item {
	padding: 12px 24px;
	font-size: 14px;
	color: #606266;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	transition: all 0.3s;
}

.tab-item.active {
	color: #409eff;
	border-bottom-color: #409eff;
	background-color: rgba(64, 158, 255, 0.1);
}

.tab-item:hover {
	color: #409eff;
}

.action-buttons {
	display: flex;
	gap: 12px;
}

.content-section {
	padding: 24px;
	min-height: 400px;
}

.content-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 300px;
	color: #909399;
}

.content-placeholder .el-icon {
	font-size: 48px;
	margin-bottom: 16px;
	color: #dcdfe6;
}

.content-placeholder p {
	font-size: 16px;
	margin-top: 8px;
}

@media (max-width: 768px) {
	.bill-info {
		flex-direction: column;
		align-items: flex-start;
	}

	.date-author {
		align-items: flex-start;
		margin-top: 12px;
	}

	.nav-section {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.tabs {
		width: 100%;
		overflow-x: auto;
	}
}
</style>
