<!--全领域-->

<template>
	<div class="content-wrapper">
		<div class="btn-wrapper">
			<div class="btn-box">
				<div v-for="(value, index) in buttonsData" class="btn-item" :style="{ background: value.background }">
					<div
						:style="{
							backgroundImage: 'url(' + `/public/icon/ZM/btn-icon2-${index}.png` + ')'
						}"
						class="btn-left-text"
					>
						{{ value.text }}
					</div>
					<div class="btn-right">
						{{ value.count + "次" }}
					</div>
				</div>
			</div>
			<img :src="leftBtn" alt="" class="left-btn" />
			<img :src="rightBtn" alt="" class="right-btn" />
		</div>
		<div class="main-charts">
			<div class="charts-title">
				<div class="title-left">
					<img src="./icon/icon-1.png" alt="" />
					<span>美对华领域打压遏制数量趋势</span>
				</div>
				<div class="title-right">
					<el-select v-model="select1" placeholder="按月统计" class="custom-select">
						<el-option label="按月统计" value="" />
					</el-select>
				</div>
			</div>
			<div class="charts-content">
				<div id="chartRef" class="chart-container"></div>
			</div>
		</div>
		<div class="bottom-content">
			<div class="news-section main-charts">
				<div class="charts-title news-title">
					<div class="title-left">
						<img src="./icon/icon-2.png" alt="" style="width: 22px; height: 18px" />
						<span>美对华领域打压遏制最新动态</span>
					</div>
				</div>
				<div class="news-content">
					<div v-for="value in newsList" class="news-item">
						<div class="news-item-title">
							<div class="tag-container">
								<div v-for="tag in value.tags" :key="tag" :class="getTagClass(tag)">
									{{ tag }}
								</div>
							</div>

							<div class="date">
								{{ value.date + " · " + value.type }}
							</div>
						</div>
						<div class="content-title">
							{{ value.title }}
						</div>
						<el-tooltip
							effect="dark"
							:content="value.content"
							popper-class="common-prompt-popper"
							placement="top"
							:show-after="500"
						>
							<div class="content-text">
								{{ value.content }}
							</div>
						</el-tooltip>
					</div>
				</div>
			</div>
			<div class="empty-section">
				<div class="bottom-item">
					<div class="bottom-item-title">
						<img :src="icon3" alt="" />
						<span>美对华领域打压遏制排行</span>
					</div>
				</div>
				<div class="select-box">
					<div class="rank-btns">
						<div class="rank-btn" :class="{ active: rankType === 'institution' }" @click="rankType = 'institution'">
							对我打压机构
						</div>
						<div class="rank-btn" :class="{ active: rankType === 'enterprise' }" @click="rankType = 'enterprise'">
							受打压企业
						</div>
						<div class="rank-btn" :class="{ active: rankType === 'school' }" @click="rankType = 'school'">
							受打压院校
						</div>
					</div>
					<el-select v-model="selectedField" placeholder="全部领域" class="field-select">
						<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
				<div class="main-box">
					<div v-for="(item, index) in rankList" :key="index" class="rank-item">
						<div class="rank-num" :class="'rank-' + (index + 1)">{{ index + 1 }}</div>
						<img :src="defaultImg" alt="" class="rank-icon" />
						<div class="rank-name">{{ item.name }}</div>
						<div class="rank-progress-container">
							<div class="rank-progress-bar" :style="{ width: getProgressWidth(item.count) }"></div>
						</div>
						<div class="rank-count">{{ item.count }}次</div>
					</div>
				</div>
			</div>
		</div>
		<div class="line-time">
			<div class="bottom-item">
				<div class="bottom-item-title">
					<img :src="icon4" alt="" />
					<span>美对我领域打压遏制时间线</span>
				</div>
				<el-select v-model="selectedFieldTimeline" placeholder="全部领域" class="field-select">
					<el-option v-for="item in fieldOptions" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</div>
			<div class="line-main">
				<div class="nav-btn left"><img :src="leftBtn" alt="" /></div>
				<div class="svg-container">
					<svg :viewBox="`0 0 ${svgWidth} ${svgHeight}`" width="100%" height="100%">
						<defs>
							<marker
								id="arrow"
								markerWidth="10"
								markerHeight="10"
								refX="8"
								refY="3"
								orient="auto"
								markerUnits="strokeWidth"
							>
								<path d="M0,0 L0,6 L9,3 z" fill="#e8f2ff" />
							</marker>
						</defs>

						<path :d="snakePath" fill="none" stroke="#e8f2ff" stroke-width="2" />

						<g v-for="(label, index) in axisDates" :key="'date-' + index">
							<foreignObject :x="label.x" :y="label.y" width="80" height="60" style="overflow: visible">
								<div class="axis-date-label">
									<div class="year">{{ label.year }}</div>
									<div class="month">{{ label.month }}</div>
								</div>
							</foreignObject>
						</g>

						<g v-for="(node, index) in timelineNodes" :key="index">
							<line :x1="node.x" :y1="node.y" :x2="node.x" :y2="node.y + 150" stroke="#1677ff" stroke-width="1" />

							<circle :cx="node.x" :cy="node.y" r="4" fill="#fff" stroke="#1677ff" stroke-width="3" />

							<foreignObject
								:x="node.contentX"
								:y="node.contentY"
								:width="node.contentWidth"
								:height="node.contentHeight"
								style="overflow: visible"
							>
								<div class="timeline-content-item">
									<div class="item-tags">
										<span v-for="tag in node.tags" :key="tag" :class="getTagClass(tag)">{{ tag }}</span>
									</div>
									<div class="item-title">{{ node.title }}</div>
									<el-tooltip
										effect="dark"
										:content="node.content"
										popper-class="common-prompt-popper"
										placement="top"
										:show-after="500"
									>
										<div class="item-desc">{{ node.content }}</div>
									</el-tooltip>
									<div class="item-footer">{{ node.info }}</div>
								</div>
							</foreignObject>
						</g>
					</svg>
				</div>
				<div class="nav-btn right"><img :src="rightBtn" alt="" /></div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import setChart from "@/utils/setChart";
import getMultiLineChart from "./multiLineChart";
import leftBtn from "../../assets/left-btn.png";
import rightBtn from "../../assets/right-btn.png";
import icon3 from "./icon/icon-3.png";
import icon4 from "./icon/icon-4.png";
import defaultImg from "../../../../assets/images/default-icon2.png";

const select1 = ref("");
const rankType = ref("institution");
const selectedField = ref("");
const selectedFieldTimeline = ref("");
const timelineScrollX = ref(0);
const timelineContainerWidth = 1601;

const timelineList = ref([
	{
		date: "2025年 5月",
		tags: ["人工智能", "航空航天"],
		title: "《国家量子倡议再授权法案》发布",
		content: "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...",
		info: "11月15日 · 参议院 · 科技法案"
	},
	{
		date: "2025年 6月",
		tags: ["人工智能"],
		title: "《国家量子倡议再授权法案》发布",
		content: "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...",
		info: "11月15日 · 参议院 · 科技法案"
	},
	{
		date: "2025年 7月",
		tags: ["集成电路"],
		title: "《国家量子倡议再授权法案》发布",
		content: "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...",
		info: "11月15日 · 参议院 · 科技法案"
	},
	{
		date: "2025年 8月",
		tags: ["新材料", "量子科技"],
		title: "《国家量子倡议再授权法案》发布",
		content: "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...",
		info: "11月15日 · 参议院 · 科技法案"
	},
	{
		date: "2025年 9月",
		tags: ["人工智能", "航空航天"],
		title: "《国家量子倡议再授权法案》发布",
		content: "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...",
		info: "11月15日 · 参议院 · 科技法案"
	},
	{
		date: "2025年 10月",
		tags: ["新材料", "能源"],
		title: "《国家量子倡议再授权法案》发布",
		content: "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...",
		info: "11月15日 · 参议院 · 科技法案"
	},
	{
		date: "2025年 11月",
		tags: ["人工智能", "航空航天"],
		title: "《国家量子倡议再授权法案》发布",
		content: "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...",
		info: "11月15日 · 参议院 · 科技法案"
	},
	{
		date: "2025年 12月",
		tags: ["新材料", "能源"],
		title: "《国家量子倡议再授权法案》发布",
		content: "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...",
		info: "11月15日 · 参议院 · 科技法案"
	},
	{
		date: "2025年 12月",
		tags: ["集成电路"],
		title: "《国家量子倡议再授权法案》发布",
		content: "计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA...",
		info: "11月15日 · 参议院 · 科技法案"
	}
]);

const maxPerRow = 3;
const nodeGapX = 450;
const rowHeight = 215;
const startX = 190;
const startY = 45;

const axisDates = computed(() => {
	const dates = [];
	if (timelineList.value.length > 0) {
		dates.push({
			year: timelineList.value[0].date.split(" ")[0],
			month: timelineList.value[0].date.split(" ")[1],
			x: startX - 140,
			y: startY - 25
		});

		const lastNode = timelineNodes.value[timelineNodes.value.length - 1];
		const isEvenRow = lastNode.row % 2 === 0;
		const endX = isEvenRow ? lastNode.x + 400 : lastNode.x - 140;
		dates.push({
			year: timelineList.value[timelineList.value.length - 1].date.split(" ")[0],
			month: timelineList.value[timelineList.value.length - 1].date.split(" ")[1],
			x: endX,
			y: lastNode.y - 25
		});
	}
	return dates;
});

const timelineNodes = computed(() => {
	return timelineList.value.map((item, index) => {
		const row = Math.floor(index / maxPerRow);
		const col = index % maxPerRow;

		let x;
		if (row % 2 === 0) {
			x = startX + col * nodeGapX;
		} else {
			x = startX + (maxPerRow - 1 - col) * nodeGapX;
		}

		const y = startY + row * rowHeight;

		const contentX = x + 20;
		const contentY = y + 10;

		return {
			...item,
			x,
			y,
			row,
			col,
			contentX,
			contentY,
			contentWidth: 320,
			contentHeight: 140
		};
	});
});

const getColorName = tag => {
	const tagColorMap = {
		航空航天: "blue",
		生物科技: "blue",
		集成电路: "blue",
		能源: "green",
		新材料: "green",
		人工智能: "red"
	};

	if (tagColorMap[tag]) return tagColorMap[tag];

	const colors = ["blue", "green", "red", "orange", "purple", "cyan"];
	let hash = 0;
	for (let i = 0; i < tag.length; i++) {
		hash = tag.charCodeAt(i) + ((hash << 5) - hash);
	}
	return colors[Math.abs(hash) % colors.length];
};

const getTagClass = tag => {
	return "tag-item " + `tag-${getColorName(tag)}`;
};

const snakePath = computed(() => {
	if (timelineNodes.value.length === 0) return "";
	let path = `M ${startX - 100} ${startY}`;
	path += ` L ${timelineNodes.value[0].x} ${timelineNodes.value[0].y}`;

	for (let i = 0; i < timelineNodes.value.length - 1; i++) {
		const curr = timelineNodes.value[i];
		const next = timelineNodes.value[i + 1];

		if (curr.row !== next.row) {
			const radius = rowHeight / 2;

			if (curr.row % 2 === 0) {
				const turnX = curr.x + 400;

				path += ` L ${turnX} ${curr.y}`;
				path += ` A ${radius} ${radius} 0 0 1 ${turnX} ${next.y}`;
				path += ` L ${next.x} ${next.y}`;
			} else {
				const turnX = curr.x - 100;

				path += ` L ${turnX} ${curr.y}`;
				path += ` A ${radius} ${radius} 0 0 0 ${turnX} ${next.y}`;
				path += ` L ${next.x} ${next.y}`;
			}
		} else {
			path += ` L ${next.x} ${next.y}`;
		}
	}

	const last = timelineNodes.value[timelineNodes.value.length - 1];
	if (last.row % 2 === 0) {
		path += ` L ${last.x + 400} ${last.y}`;
	} else {
		path += ` L ${last.x - 100} ${last.y}`;
	}

	return path;
});

const svgWidth = computed(() => {
	return timelineContainerWidth;
});

const svgHeight = computed(() => {
	const rows = Math.ceil(timelineList.value.length / maxPerRow);
	return startY + rows * rowHeight;
});

const scrollLeft = () => {
	if (timelineScrollX.value < 0) {
		timelineScrollX.value += nodeGapX;
	}
};

const scrollRight = () => {
	const maxScroll = -(timelineNodes.value.length * nodeGapX - timelineContainerWidth + startX + 100);
	if (timelineScrollX.value > maxScroll) {
		timelineScrollX.value -= nodeGapX;
	}
};
const fieldOptions = ref([
	{ label: "全部领域", value: "" },
	{ label: "集成电路", value: "集成电路" },
	{ label: "人工智能", value: "人工智能" },
	{ label: "量子科技", value: "量子科技" }
]);
const buttonsData = [
	{
		text: "集成电路",
		count: 101,
		background: "linear-gradient(180.00deg, rgba(255, 102, 102, 1),rgba(255, 102, 102, 0.5) 100%)"
	},
	{
		text: "人工智能",
		count: 132,
		background: "linear-gradient(180.00deg, rgba(51, 153, 255, 1),rgba(51, 153, 255, 0.5) 100%)"
	},
	{
		text: "新一代信息技术",
		count: 105,
		background: "linear-gradient(180.00deg, rgba(255, 187, 51, 1),rgba(255, 187, 51, 0.5) 100%)"
	},
	{
		text: "量子科技",
		count: 97,
		background: "linear-gradient(180.00deg, rgba(117, 73, 255, 1),rgba(117, 73, 255, 0.5) 100%)"
	},
	{
		text: "先进制造",
		count: 84,
		background: "linear-gradient(180.00deg, rgba(102, 102, 102, 1),rgba(102, 102, 102, 0.5) 100%)"
	},
	{
		text: "航空航天",
		count: 77,
		background: "linear-gradient(180.00deg, rgba(51, 102, 255, 1),rgba(51, 102, 255, 0.5) 100%)"
	},
	{
		text: "生物科技",
		count: 62,
		background: "linear-gradient(180.00deg, rgba(102, 204, 204, 1),rgba(102, 204, 204, 0.5) 100%)"
	},
	{
		text: "新能源",
		count: 60,
		background: "linear-gradient(180.00deg, rgba(102, 187, 51, 1),rgba(102, 187, 51, 0.5) 100%)"
	},
	{
		text: "新材料",
		count: 43,
		background: "linear-gradient(180.00deg, rgba(255, 102, 51, 1),rgba(255, 102, 51, 0.5) 100%)"
	},
	{
		text: "海洋",
		count: 25,
		background: "linear-gradient(180.00deg, rgba(153, 204, 255, 1),rgba(153, 204, 255, 0.5) 100%)"
	}
];
const box5Data = ref({
	title: [
		"2024-12",
		"2025-1",
		"2025-2",
		"2025-3",
		"2025-4",
		"2025-5",
		"2025-6",
		"2025-7",
		"2025-8",
		"2025-9",
		"2025-10",
		"2025-11"
	],
	data: [
		{
			name: "集成电路",
			color: "#0052D9",
			value: [87, 78, 74, 67, 60, 59, 63, 66, 63, 58, 56, 62]
		},
		{
			name: "生物科技",
			color: "#00A79D",
			value: [13, 13, 8, 13, 20, 37, 34, 25, 22, 20, 27, 18]
		},
		{
			name: "量子科技",
			color: "#7B61FF",
			value: [18, 16, 12, 16, 16, 26, 30, 29, 25, 25, 33, 25]
		},
		{
			name: "新一代信息技术",
			color: "#FF9F1C",
			value: [10, 22, 22, 34, 48, 51, 46, 55, 55, 60, 68, 70]
		},
		{
			name: "人工智能",
			color: "#E34D59",
			value: [25, 34, 39, 45, 53, 54, 50, 47, 50, 54, 56, 51]
		},
		{
			name: "通信网络",
			color: "#0052D9",
			value: [22, 26, 31, 31, 38, 33, 26, 38, 36, 40, 45, 47]
		},
		{
			name: "新能源",
			color: "#2BA471",
			value: [53, 44, 43, 41, 34, 29, 57, 44, 61, 67, 61, 61]
		},
		{
			name: "先进制造",
			color: "#363B42",
			value: [70, 75, 78, 75, 75, 80, 73, 51, 71, 77, 80, 89]
		},
		{
			name: "航空航天",
			color: "#3762F0",
			value: [18, 16, 12, 16, 16, 26, 30, 29, 25, 25, 33, 25]
		},
		{
			name: "海洋",
			color: "#76D1FF",
			value: [13, 13, 8, 13, 20, 37, 34, 25, 22, 20, 27, 18]
		},
		{
			name: "新材料",
			color: "#FFD900",
			value: [10, 22, 22, 34, 48, 51, 46, 55, 55, 60, 68, 70]
		},
		{
			name: "深海",
			color: "#002060",
			value: [22, 26, 31, 31, 38, 33, 26, 38, 36, 40, 45, 47]
		},
		{
			name: "极地",
			color: "#A6A6A6",
			value: [53, 44, 43, 41, 34, 29, 57, 44, 61, 67, 61, 61]
		},
		{
			name: "核",
			color: "#FFB3B3",
			value: [25, 34, 39, 45, 53, 54, 50, 47, 50, 54, 56, 51]
		}
	]
});

const newsList = ref([
	{
		tags: ["航空航天", "能源"],
		title: "联邦参议院：通过2026年国防授权法案",
		date: "2025年12月18日",
		type: "法案",
		content: "2026年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普签署成为法律，法案..."
	},
	{
		tags: ["新材料", "生物科技"],
		title: "美国FDA：针对两家中国第三方检测机构的数据完整性问题采取行动",
		date: "2025年12月18日",
		type: "法案",
		content: "FDA因数据造假或无效问题，向两家中国第三方检测公司（天津中联科技检测有限公司和苏...）"
	},
	{
		tags: ["人工智能", "集成电路"],
		title: "美国FCC：出台电信设备市场准入认证新规",
		date: "2025年12月18日",
		type: "法案",
		content: "将国家安全部门审查全面嵌入设备授权程序，对实验室资质、测试标准以及供应链设置严格限制。"
	},
	{
		tags: ["人工智能", "集成电路"],
		title: "商务部工业与安全局：对实体清单的修订",
		date: "2025年12月18日",
		type: "法案",
		content: "美国商务部工业与安全局公布对中国半导体出口管制措施新规则，将140家中国半导体公司列入..."
	},
	{
		tags: ["集成电路"],
		title: "国际贸易委员会：外国制造的半导体器件及其下游产品和组件",
		date: "2025年12月18日",
		type: "法案",
		content: "美国国际贸易委员会（ITC）投票决定对特定半导体器件及其下游计算产品和组件（Certain ...）"
	}
]);

const tagColors = [
	{
		text: "航空航天",
		textColor: "#1677FF", // 蓝色文字
		bgColor: "#E6F7FF" // 浅蓝色背景
	},
	{
		text: "能源",
		textColor: "#1677FF",
		bgColor: "#E6F7FF"
	},
	{
		text: "新材料",
		textColor: "#5993EE",
		bgColor: "#E6F7FF"
	},
	{
		text: "生物科技",
		textColor: "#5993EE",
		bgColor: "#E6F7FF"
	},
	{
		text: "人工智能",
		textColor: "#D9001B",
		bgColor: "#FFECEC"
	},
	{
		text: "集成电路",
		textColor: "#1677FF",
		bgColor: "#E6F7FF"
	}
];

const getTagColor = tagName => {
	const foundTag = tagColors.find(tag => tag.text === tagName);
	return foundTag ? { textColor: foundTag.textColor, bgColor: foundTag.bgColor } : { textColor: "#000", bgColor: "#fff" };
};

const rankList = ref([
	{ name: "美国商务部", count: 45 },
	{ name: "美国财政部", count: 38 },
	{ name: "美国白宫", count: 36 },
	{ name: "美国国务院", count: 34 },
	{ name: "美国战争部", count: 33 },
	{ name: "联邦参议院", count: 31 },
	{ name: "美国美国国土安全部", count: 28 },
	{ name: "美国贸易代表办公室", count: 20 },
	{ name: "联邦通信委员会", count: 16 },
	{ name: "美国食品药品监督管理局", count: 12 }
]);

const maxCount = Math.max(...rankList.value.map(item => item.count));
const getProgressWidth = count => {
	return (count / maxCount) * 100 + "%";
};

onMounted(() => {
	let Chart = getMultiLineChart(box5Data.value);
	setChart(Chart, "chartRef");
});
</script>

<style lang="scss" scoped>
.content-wrapper {
	width: 1666px;
	height: 2132px;
}

.btn-wrapper {
	position: relative;
	width: 1601px;
}

.btn-box {
	margin-top: 16px;
	width: 100%;
	height: 176px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: stretch;
	gap: 16px;
	padding: 0;
}

.left-btn {
	width: 24px;
	height: 48px;
	position: absolute;
	top: 50%;
	left: -33px;
	transform: translateY(-50%);
	cursor: pointer;
	z-index: 10;
}

.right-btn {
	width: 24px;
	height: 48px;
	position: absolute;
	top: 50%;
	right: -33px;
	transform: translateY(-50%);
	cursor: pointer;
	z-index: 10;
}

.btn-item {
	/* 全领域-总统计 */
	width: 307px;
	height: 80px;
	border-radius: 10px;
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 16px;
	.btn-left-text {
		width: fit-content;
		min-width: 60px;
		height: 60px;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		font-family: YouSheBiaoTiHei;
		font-size: 24px;
		font-weight: 400;
		line-height: 60px;
		letter-spacing: 0px;
		text-align: left;
		color: rgba(255, 255, 255, 1);
		//不换行
		white-space: nowrap;
		display: flex;
		align-items: center;
		font-style: italic;
	}
	.btn-right {
		font-family: YouSheBiaoTiHei;
		font-size: 24px;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		font-style: italic;
	}
}

.btn-left {
	position: relative;
	display: flex;
	align-items: center;
}

.btn-left-icon {
	margin-right: 8px; // 图标和文本之间的间距
}

.main-charts {
	margin-top: 16px;
	width: 1601px;
	height: 500px;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.65);
	box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
	display: flex;
	flex-direction: column;

	.charts-title {
		width: 100%;
		height: 48px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 17px;
		padding-right: 35px;
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);

		.title-left {
			display: flex;
			align-items: center;

			img {
				width: 18px;
				height: 18px;
				margin-right: 14px;
			}

			span {
				font-family: YouSheBiaoTiHei;
				font-size: 24px;
				font-weight: 400;
				line-height: 24px;
				color: rgb(5, 95, 194);
			}
		}

		.title-right {
			display: flex;
			height: 48px;
			align-items: end;
			gap: 12px;
			padding-right: 17px;

			.custom-select {
				width: 160px;

				:deep(.el-input) {
					height: 32px;

					.el-input__wrapper {
						background-color: #fff;
						box-shadow: 0 0 0 1px #dcdfe6 inset;
						border-radius: 4px;
						padding: 0 12px;
						height: 32px;

						&:hover {
							box-shadow: 0 0 0 1px #c0c4cc inset;
						}

						&.is-focus {
							box-shadow: 0 0 0 1px #409eff inset;
						}
					}

					.el-input__inner {
						font-family: "Microsoft YaHei";
						font-size: 16px;
						font-weight: 400;
						color: rgb(95, 101, 108);
						height: 32px;
						line-height: 24px;

						&::placeholder {
							color: rgb(95, 101, 108);
						}
					}
				}
			}
		}
	}

	.charts-content {
		flex: 1;
		width: 100%;
		padding: 20px 40px 20px 40px;
		box-sizing: border-box;

		.chart-container {
			width: 100%;
			height: 100%;
		}
	}
}

.bottom-content {
	display: flex;
	gap: 17px;

	.news-section {
		width: 792px;
		height: 700px;

		.news-title {
			padding: 8px;
		}

		.tag-container {
			display: flex;
			align-items: center;
			gap: 8px;
			.tag-item {
				padding: 2px 8px;
				border-radius: 4px;
				font-size: 14px;
				font-weight: 400;
				font-family: "Microsoft YaHei";
				border: 1px solid transparent; 
				&.tag-blue {
					color: rgba(9, 88, 217, 1);
					background: rgba(230, 244, 255, 1);
					border-color: rgba(186, 224, 255, 1);
				}
				&.tag-green {
					color: rgba(56, 158, 13, 1);
					background: rgba(246, 255, 237, 1);
					border-color: rgba(217, 247, 190, 1);
				}
				&.tag-red {
					color: rgba(245, 34, 45, 1);
					background: rgba(255, 241, 240, 1);
					border-color: rgba(255, 163, 158, 1);
				}
				&.tag-orange {
					color: rgba(250, 140, 22, 1);
					background: rgba(255, 247, 230, 1);
					border-color: rgba(255, 213, 145, 1);
				}
				&.tag-purple {
					color: rgba(114, 46, 209, 1);
					background: rgba(249, 240, 255, 1);
					border-color: rgba(211, 173, 247, 1);
				}
				&.tag-cyan {
					color: rgba(19, 194, 194, 1);
					background: rgba(230, 255, 251, 1);
					border-color: rgba(135, 232, 222, 1);
				}
			}
		}
	}

	.empty-section {
		width: 792px;
		height: 700px;
		margin-top: 16px;
		border-radius: 10px;
		background-color: rgba(255, 255, 255, 0.65);
		box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);

		.bottom-item {
			width: 100%;
			height: 48px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-left: 17px;
			padding-right: 35px;
			box-sizing: border-box;
			background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);
			.bottom-item-title {
				display: flex;
				align-items: center;
				img {
					width: 18px;
					height: 18px;
					margin-right: 14px;
				}
				span {
					font-family: YouSheBiaoTiHei;
					font-size: 24px;
					font-weight: 400;
					line-height: 24px;
					color: rgb(5, 95, 194);
				}
			}
		}
		.select-box {
			width: 691px;
			height: 32px;
			margin: 17px auto 36px auto;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.rank-btns {
				display: flex;
				gap: 8px;

				.rank-btn {
					padding: 4px 12px;
					border-radius: 4px;
					border: 1px solid rgb(230, 231, 232);
					font-family: "Microsoft YaHei";
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					color: rgb(95, 101, 108);
					cursor: pointer;
					background-color: #fff;

					&.active {
						color: rgb(5, 95, 194);
						border-color: rgb(5, 95, 194);
						background-color: rgba(231, 243, 255, 1);
					}
				}
			}

			.field-select {
				width: 160px;
				:deep(.el-input) {
					.el-input__wrapper {
						height: 32px;
						padding: 0 12px;
						box-sizing: border-box;
						background-color: #fff;
						border-radius: 4px;
						.el-input__inner {
							height: 32px;
							line-height: 32px;
							font-family: "Microsoft YaHei";
							font-size: 16px;
							font-weight: 400;
							color: rgb(95, 101, 108);
							&::placeholder {
								color: rgb(95, 101, 108);
							}
						}
					}
				}
			}
		}
		.main-box {
			width: 100%;
			height: 567px;
			padding: 24px 51px 51px 27px;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			gap: 21px;
			overflow-y: auto;
			.rank-item {
				display: flex;
				align-items: center;
				height: 30px;

				.rank-num {
					width: 24px;
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 700;
					margin-right: 12px;
					text-align: center;
					color: #3b414b;

					&.rank-1 {
						color: #d94b4b;
					}
					&.rank-2 {
						color: #e3935d;
					}
					&.rank-3 {
						color: #ebd348;
					}
				}

				.rank-icon {
					width: 30px;
					height: 30px;
					margin-right: 12px;
				}

				.rank-name {
					width: 180px;
					font-family: "Microsoft YaHei";
					font-size: 16px;
					font-weight: 700;
					color: rgb(59, 65, 75);
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.rank-progress-container {
					flex: 1;
					height: 12px;
					margin: 0 20px;
					background: transparent;
					display: flex;
					align-items: center;

					.rank-progress-bar {
						height: 100%;
						border-radius: 6px;
						background: linear-gradient(90deg, rgba(55, 98, 240, 0) 0%, rgba(55, 98, 240, 0.8) 100%);
					}
				}

				&:nth-child(1) .rank-progress-bar {
					background: linear-gradient(90deg, rgba(217, 75, 75, 0) 0%, rgba(217, 75, 75, 0.8) 100%);
				}
				&:nth-child(2) .rank-progress-bar {
					background: linear-gradient(90deg, rgba(227, 147, 93, 0) 0%, rgba(227, 147, 93, 0.8) 100%);
				}
				&:nth-child(3) .rank-progress-bar {
					background: linear-gradient(90deg, rgba(235, 211, 72, 0) 0%, rgba(235, 211, 72, 0.8) 100%);
				}

				.rank-count {
					width: 60px;
					font-family: "Microsoft YaHei";
					font-size: 16px;
					font-weight: 700;
					color: rgb(59, 65, 75);
					text-align: right;
				}
			}
		}
	}
}
.news-content {
	overflow-y: auto;
	overflow-x: hidden;
}
.news-item {
	/* 全政府-动态 (四全-最新动态) */
	width: 737px;
	height: 124px;
	margin: 0 28px;
	/* 自动布局 */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: flex-start;
	padding: 16px 24px 16px 24px;

	box-sizing: border-box;
	border-bottom: 1px solid rgba(234, 236, 238, 1);
	background: rgba(255, 255, 255, 0.65);

	.news-item-title {
		display: flex;
		justify-content: space-between;
		width: 689px;

		.tag {
			display: none;
		}

		.date {
			color: rgba(95, 101, 108, 1);

			font-family: Microsoft YaHei;
			font-style: Regular;
			font-size: 16px;
			font-weight: 400;
			line-height: 30px;
			letter-spacing: 0px;
			text-align: right;
		}
	}

	.content-title {
		/* 容器 1576 */
		width: 689px;
		height: 30px;
		/* 自动布局 */
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		gap: 12;

		color: rgba(59, 65, 75, 1);

		font-family: Microsoft YaHei;
		font-style: Bold;
		font-size: 16px;
		font-weight: 700;
		line-height: 30px;
		letter-spacing: 0px;
		text-align: left;
	}

	.content-text {
		width: 689px;
		height: 30px;
		font-family: Microsoft YaHei;
		font-style: Regular;
		font-size: 16px;
		font-weight: 400;
		line-height: 30px;
		letter-spacing: 0px;
		text-align: left;
		color: rgba(59, 65, 75, 1);
		margin-top: 8px;
		/* 单行省略 */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
		cursor: pointer;
	}
}

.line-time {
	margin-top: 16px;
	width: 1601px;
	height: 700px;
	border-radius: 10px;
	background-color: rgba(255, 255, 255, 0.65);
	box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);

	.bottom-item {
		width: 100%;
		height: 48px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 17px;
		padding-right: 35px;
		box-sizing: border-box;
		background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);
		.bottom-item-title {
			display: flex;
			align-items: center;
			img {
				width: 18px;
				height: 18px;
				margin-right: 14px;
			}
			span {
				font-family: YouSheBiaoTiHei;
				font-size: 24px;
				font-weight: 400;
				line-height: 24px;
				color: rgb(5, 95, 194);
			}
		}

		.field-select {
			width: 160px;
			:deep(.el-input) {
				.el-input__wrapper {
					height: 32px;
					padding: 0 12px;
					box-sizing: border-box;
					background-color: #fff;
					border-radius: 4px;
					.el-input__inner {
						height: 32px;
						line-height: 32px;
						font-family: "Microsoft YaHei";
						font-size: 16px;
						font-weight: 400;
						color: rgb(95, 101, 108);
						&::placeholder {
							color: rgb(95, 101, 108);
						}
					}
				}
			}
		}
	}
	.line-main {
		width: 100%;
		height: 652px;
		position: relative;

		.nav-btn {
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			cursor: pointer;
			z-index: 10;
			img {
				width: 24px;
				height: 48px;
			}
			&.left {
				left: 0;
			}
			&.right {
				right: 0;
			}
		}

		.svg-container {
			width: 100%;
			height: 100%;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.axis-date-label {
			background: rgba(231, 243, 255, 1);
			padding: 4px 2px;
			border-radius: 8px;
			text-align: center;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: auto;
			min-width: 60px;

			.year,
			.month {
				font-family: "Microsoft YaHei";
				font-size: 18px;
				font-weight: 700;
				line-height: 24px;
				color: rgb(5, 95, 194);
				margin-bottom: 0;
			}
		}

		.timeline-content-item {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			gap: 8px;

			.item-tags {
				display: flex;
				gap: 8px;
				.tag-item {
					padding: 2px 8px;
					border-radius: 4px;
					font-size: 14px;
					font-weight: 400;
					font-family: "Microsoft YaHei";
					border: 1px solid transparent; // Ensure border width is set for all
					&.tag-blue {
						color: rgba(9, 88, 217, 1);
						background: rgba(230, 244, 255, 1);
						border-color: rgba(186, 224, 255, 1);
					}
					&.tag-green {
						color: rgba(56, 158, 13, 1);
						background: rgba(246, 255, 237, 1);
						border-color: rgba(217, 247, 190, 1);
					}
					&.tag-red {
						color: rgba(245, 34, 45, 1);
						background: rgba(255, 241, 240, 1);
						border-color: rgba(255, 163, 158, 1);
					}
					&.tag-orange {
						color: rgba(250, 140, 22, 1);
						background: rgba(255, 247, 230, 1);
						border-color: rgba(255, 213, 145, 1);
					}
					&.tag-purple {
						color: rgba(114, 46, 209, 1);
						background: rgba(249, 240, 255, 1);
						border-color: rgba(211, 173, 247, 1);
					}
					&.tag-cyan {
						color: rgba(19, 194, 194, 1);
						background: rgba(230, 255, 251, 1);
						border-color: rgba(135, 232, 222, 1);
					}
				}
			}

			.item-title {
				font-size: 18px;
				font-weight: 700;
				color: rgb(59, 65, 75);
				font-family: "Microsoft YaHei";
				line-height: 24px;
			}

			.item-desc {
				font-size: 16px;
				font-weight: 400;
				color: rgb(95, 101, 108);
				line-height: 24px;
				font-family: "Microsoft YaHei";
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				cursor: pointer;
			}

			.item-footer {
				font-size: 16px;
				font-weight: 400;
				color: rgb(95, 101, 108);
				line-height: 24px;
				font-family: "Microsoft YaHei";
				margin-top: 4px;
			}
		}
	}
}
</style>

<style>
.common-prompt-popper.el-popper {
	padding: 8px 16px !important;
	border-radius: 10px !important;
	background-color: rgb(59, 65, 75) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	font-family: "Microsoft YaHei" !important;
	line-height: 30px !important;
	color: #fff !important;
	border: none !important;
}

.common-prompt-popper.el-popper .el-popper__arrow::before {
	background-color: rgb(59, 65, 75) !important;
	border-color: rgb(59, 65, 75) !important;
}
</style>

