<!--科技要闻-->
<template>
	<div class="content-wrapper">
		<div class="main-content">
			<div class="cards-mask">
				<div class="cards-container" :style="{ transform: `translateX(-${currentIndex * (307 + 16)}px)` }">
					<div v-for="(card, index) in cardList" :key="index" class="government-card">
						<div class="card-bg" :style="{ backgroundImage: `url(${card.icon || defaultIcon})` }"></div>
						<div class="card-header">
							<span class="card-title">{{ card.title }}</span>
							<img :src="card.icon || defaultIcon" class="card-icon" alt="" />
						</div>
						<div class="card-body">
							<div v-for="(stat, sIndex) in card.stats" :key="sIndex" class="stat-item">
								<span class="stat-label">{{ stat.label }}</span>
								<span class="stat-value">{{ stat.value }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<img :src="leftBtn" alt="" class="left-btn" @click="prev" :class="{ disabled: currentIndex === 0 }" />
			<img
				:src="rightBtn"
				alt=""
				class="right-btn"
				@click="next"
				:class="{ disabled: currentIndex >= cardList.length - 5 }"
			/>
		</div>
		<div class="main-charts">
			<div class="charts-title">
				<div class="title-left">
					<img :src="icon1" alt="" />
					<span>美对华制裁措施数量趋势</span>
				</div>
				<div class="title-right">
					<el-select v-model="fieldValue" placeholder="全部领域" class="custom-select">
						<el-option label="全部领域" value="" />
					</el-select>
					<el-select v-model="deptValue" placeholder="全部部门" class="custom-select">
						<el-option label="全部部门" value="" />
					</el-select>
					<el-select v-model="methodValue" placeholder="全部制裁手段" class="custom-select">
						<el-option label="全部制裁手段" value="" />
					</el-select>
				</div>
			</div>
			<div class="charts-content">
				<div ref="chartRef" class="chart-container"></div>
			</div>
		</div>
		<div class="main-text">
			<div class="text-item">
				<div class="text-item-title">
					<img :src="icon2" alt="" />
					<span>美政府部门打压遏制最新动态</span>
				</div>
				<div class="text-item-content">
					<div v-for="(item, index) in dynamicList" :key="index" class="dynamic-item">
						<img :src="defaultImg" alt="" class="item-icon" />
						<div class="item-right">
							<div class="dynamic-item-header">
								<span class="item-title">{{ item.title }}</span>
								<span class="item-date">{{ item.date }} · {{ item.type }}</span>
							</div>
							<el-tooltip
								effect="dark"
								:content="item.content"
								popper-class="common-prompt-popper"
								placement="top"
								:show-after="500"
							>
								<div class="dynamic-item-body">
									{{ item.content }}
								</div>
							</el-tooltip>
							<div class="dynamic-item-tags">
								<span v-for="(tag, tIndex) in item.tags" :key="tIndex" class="tag" :class="getTagClass(tag)">
									{{ tag }}
								</span>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="text-item">
				<div class="text-item-title">
					<img :src="icon3" alt="" />
					<span>美政府部门联合制裁排行</span>
				</div>
				<div class="text-item-contentOther">
					<div v-for="(rank, index) in rankingList" :key="index" class="ranking-card">
						<div class="ranking-header">
							<div class="header-left">
								<div class="dept-icons">
									<img
										v-for="(dept, dIndex) in rank.depts"
										:key="dIndex"
										:src="defaultImg"
										alt=""
										class="dept-icon"
									/>
								</div>
								<span class="dept-names">{{ rank.depts.join(" / ") }}</span>
							</div>
							<div class="header-right">
								<span class="joint-count">{{ rank.count }}次联合制裁</span>
							</div>
						</div>
						<div class="ranking-body">
							<div v-for="(item, iIndex) in rank.items" :key="iIndex" class="ranking-item">
								<div class="item-left">
									<span class="item-type" :class="item.type === '法案' ? 'type-bill' : 'type-order'">{{
										item.type
									}}</span>
									<el-tooltip
										effect="dark"
										:content="item.title"
										popper-class="common-prompt-popper"
										placement="top"
										:show-after="500"
									>
										<span class="item-title">{{ item.title }}</span>
									</el-tooltip>
								</div>
								<span class="item-date">{{ item.date }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="main-bottom">
			<div class="bottom-item">
				<div class="bottom-item-title">
					<img :src="icon4" alt="" />
					<span>美政府部门对我打压遏制时间线</span>
				</div>
				<div class="bottom-item-select">
					<div class="select-btn" :class="{ active: measureType === 'history' }" @click="measureType = 'history'">
						历史举措
					</div>
					<div class="select-btn" :class="{ active: measureType === 'future' }" @click="measureType = 'future'">
						未来举措
					</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>
			<div class="bottom-content">
				<div class="timeline-container">
					<div class="timeline-item">
						<div ref="mainChartRef" :style="{ width: '100%', height: totalHeight + 'px' }"></div>
					</div>
					<div class="timelineBar">
						<div ref="sliderChartRef" style="width: 100%; height: 100%"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import defaultIcon from "../../assets/defaultIcon.png";
import leftBtn from "../../assets/left-btn.png";
import rightBtn from "../../assets/right-btn.png";
import icon1 from "../../assets/icon1.png";
import icon2 from "../../assets/icon2.png";
import icon3 from "../../assets/icon3.png";
import icon4 from "../../assets/icon4.png";
import defaultImg from "../../../../assets/images/default-icon2.png";

const cardList = ref([
	{
		title: "联邦参议院",
		stats: [
			{ label: "法案(提出)", value: "132项" },
			{ label: "法案(通过)", value: "9项" }
		]
	},
	{
		title: "联邦众议院",
		stats: [
			{ label: "法案(提出)", value: "215项" },
			{ label: "法案(通过)", value: "15项" }
		]
	},
	{
		title: "商务部",
		stats: [
			{ label: "232调查", value: "11次" },
			{ label: "政令", value: "29项" }
		]
	},
	{
		title: "财政部",
		stats: [
			{ label: "232调查", value: "9次" },
			{ label: "涉军企业清单", value: "3次" },
			{ label: "政令", value: "15项" }
		]
	},
	{
		title: "贸易代表办公室",
		stats: [
			{ label: "301调查", value: "4次" },
			{ label: "政令", value: "21项" }
		]
	},
	{
		title: "司法部",
		stats: [
			{ label: "起诉案例", value: "18宗" },
			{ label: "法律制裁", value: "5项" }
		]
	},
	{
		title: "国土安全部",
		stats: [
			{ label: "实体清单", value: "42家" },
			{ label: "限制进口", value: "12项" }
		]
	},
	{
		title: "联邦调查局",
		stats: [
			{ label: "技术调查", value: "33次" },
			{ label: "安全审查", value: "27项" }
		]
	}
]);

const currentIndex = ref(0);
const fieldValue = ref("");
const deptValue = ref("");
const methodValue = ref("");

const measureType = ref("history");
const selectedField = ref("all");
const fieldOptions = ref([{ label: "全部领域", value: "all" }]);

const dynamicList = ref([
	{
		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 ...",
		tags: ["集成电路"]
	}
]);

const getTagClass = tag => {
	// 1. 定义已知标签的固定颜色映射
	const tagColorMap = {
		航空航天: "tag-blue",
		生物科技: "tag-blue",
		集成电路: "tag-blue",
		能源: "tag-green",
		新材料: "tag-green",
		人工智能: "tag-red"
	};

	// 2. 如果是已知标签，直接返回对应颜色
	if (tagColorMap[tag]) return tagColorMap[tag];

	// 3. 如果是未知标签，使用简单的字符串哈希算法分配一个稳定的颜色
	const colors = ["tag-blue", "tag-green", "tag-red"];
	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 rankingList = ref([
	{
		depts: ["商务部", "财政部", "国务院"],
		count: 4,
		items: [
			{ type: "法案", title: "大而美法案", date: "2025年12月21日" },
			{ type: "政令", title: "调整互惠关税范围及建立贸易与安全协议执行程序", date: "2025年12月12日" },
			{ type: "政令", title: "综合对外投资国家安全法案", date: "2025年12月7日" },
			{ type: "政令", title: "推动美国人工智能技术栈的出口", date: "2025年12月4日" }
		]
	},
	{
		depts: ["国务院", "食品药品监督管理局", "商务部"],
		count: 2,
		items: [
			{ type: "法案", title: "生物安全法案", date: "2025年12月14日" },
			{ type: "政令", title: "调整关税：针对中华人民共和国合成阿片类药物供应链", date: "2025年11月24日" }
		]
	},
	{
		depts: ["商务部", "联邦通信委员会"],
		count: 2,
		items: [
			{ type: "政令", title: "保护抖音的同时保护国家安全", date: "2025年11月9日" },
			{ type: "政令", title: "赢得 6G 竞赛", date: "2025年10月27日" }
		]
	},
	{
		depts: ["贸易代表办公室", "商务部"],
		count: 2,
		items: [{ type: "政令", title: "第301条关于中国针对海事、物流和造船业以争取主导地位的行动", date: "2025年10月24日" }]
	}
]);

const chartRef = ref(null);
let myChart = null;

const mainChartRef = ref(null);
const sliderChartRef = ref(null);
const totalHeight = ref(600);
let mainChart = null;
let sliderChart = null;

const parseDate = (str) => {
	const match = str.match(/(\d+)年(\d+)月(\d+)日/);
	if (match) return new Date(Number(match[1]), Number(match[2]) - 1, Number(match[3])).getTime();
	return new Date().getTime();
};

const timelineAllData = computed(() => {
	let all = [];
	rankingList.value.forEach(rank => {
		all = all.concat(rank.items);
	});
	dynamicList.value.forEach(item => {
		all.push({ title: item.title, date: item.date, type: item.type });
	});
	return all.sort((a, b) => parseDate(b.date) - parseDate(a.date));
});

const updateTimeline = (startTime, endTime) => {
	const filtered = timelineAllData.value.filter(item => {
		const t = parseDate(item.date);
		return t >= startTime && t <= endTime;
	});

	const itemHeight = 80;
	totalHeight.value = Math.max(filtered.length * itemHeight, 552);

	setTimeout(() => {
		if (!mainChart) return;
		mainChart.resize();
		const option = {
			grid: {
				left: 150,
				right: 50,
				top: 20,
				bottom: 20
			},
			tooltip: {
				show: true,
				formatter: (params) => {
					const item = filtered[params.dataIndex];
					return `${item.date}<br/>${item.title}`;
				}
			},
			singleAxis: {
				type: 'category',
				orient: 'vertical',
				data: filtered.map((_, i) => i),
				top: 20,
				bottom: 20,
				left: 120,
				width: '80%',
				axisLabel: {
					interval: 0,
					formatter: (value, index) => {
						if (!filtered[index]) return '';
						return filtered[index].date;
					},
					align: 'right',
					margin: 20,
					textStyle: {
						color: '#666',
						fontSize: 14
					}
				},
				axisLine: {
					lineStyle: {
						color: '#ccc',
						width: 2
					}
				},
				axisPointer: {
					animation: true,
					label: {
						show: true
					}
				},
				splitLine: { show: false }
			},
			series: [
				{
					type: 'scatter',
					coordinateSystem: 'singleAxis',
					data: filtered.map((_, i) => [i, 0]),
					symbolSize: 14,
					itemStyle: {
						color: '#2f79c4',
						borderColor: '#fff',
						borderWidth: 2
					},
					label: {
						show: true,
						formatter: (params) => {
							const item = filtered[params.dataIndex];
							return item.title;
						},
						position: 'right',
						offset: [20, 0],
						color: '#333',
						fontSize: 16,
						fontWeight: 'bold',
						width: 400,
						overflow: 'truncate'
					}
				}
			]
		};
		mainChart.setOption(option);
	}, 50);
};

const initTimeline = () => {
	if (!mainChartRef.value) return;
	mainChart = echarts.init(mainChartRef.value);
	updateTimeline(0, Date.now() + 365 * 24 * 3600 * 1000 * 10);
};

const initSlider = () => {
	if (!sliderChartRef.value) return;
	sliderChart = echarts.init(sliderChartRef.value);

	const dates = timelineAllData.value.map(item => parseDate(item.date));
	const minDate = Math.min(...dates);
	const maxDate = Math.max(...dates);
	const rangeMin = minDate - 30 * 24 * 3600 * 1000;
	const rangeMax = maxDate + 30 * 24 * 3600 * 1000;

	const option = {
		grid: {
			top: 0,
			bottom: 0,
			left: 20,
			right: 20
		},
		xAxis: {
			type: 'time',
			min: rangeMin,
			max: rangeMax,
			axisLabel: { show: false },
			axisTick: { show: false },
			axisLine: { show: false },
			splitLine: { show: false }
		},
		yAxis: { show: false },
		dataZoom: [
			{
				type: 'slider',
				xAxisIndex: 0,
				filterMode: 'weakFilter',
				height: 30,
				bottom: 10,
				handleSize: '100%',
				showDetail: true,
				start: 0,
				end: 100
			}
		],
		series: [
			{
				type: 'scatter',
				data: dates.map(d => [d, 0]),
				symbolSize: 5,
				itemStyle: { color: '#ccc' }
			}
		]
	};

	sliderChart.setOption(option);

	sliderChart.on('dataZoom', function () {
		const opt = sliderChart.getOption();
		const startValue = opt.dataZoom[0].startValue;
		const endValue = opt.dataZoom[0].endValue;
		
		let startT, endT;
		if (startValue != null && endValue != null) {
			startT = startValue;
			endT = endValue;
		} else {
			const range = rangeMax - rangeMin;
			const startP = opt.dataZoom[0].start;
			const endP = opt.dataZoom[0].end;
			startT = rangeMin + range * startP / 100;
			endT = rangeMin + range * endP / 100;
		}
		updateTimeline(startT, endT);
	});
};

const initChart = () => {
	if (!chartRef.value) return;
	myChart = echarts.init(chartRef.value);
	const option = {
		tooltip: {
			trigger: "axis",
			backgroundColor: "rgba(255, 255, 255, 0.9)",
			borderColor: "#2f79c4",
			textStyle: {
				color: "#666"
			},
			formatter: function (params) {
				return `<div style="padding: 3px 6px;">
					<div style="font-weight: bold; margin-bottom: 4px;">${params[0].name}</div>
					<div>数量：<span style="color: #2f79c4; font-weight: bold;">${params[0].value}</span></div>
				</div>`;
			}
		},
		grid: {
			top: "5%",
			left: "1%",
			right: "2%",
			bottom: "5%",
			containLabel: true
		},
		xAxis: {
			type: "category",
			boundaryGap: false,
			data: [
				"2024-12",
				"2025-1",
				"2025-2",
				"2025-3",
				"2025-4",
				"2025-5",
				"2025-6",
				"2025-7",
				"2025-8",
				"2025-9",
				"2025-10",
				"2025-11"
			],
			axisLine: {
				lineStyle: {
					color: "#f0f0f0"
				}
			},
			axisLabel: {
				color: "#999",
				fontSize: 12
			},
			axisTick: {
				show: false
			}
		},
		yAxis: {
			type: "value",
			min: 0,
			max: 100,
			interval: 20,
			axisLine: {
				show: false
			},
			axisLabel: {
				color: "#999",
				fontSize: 12
			},
			splitLine: {
				lineStyle: {
					type: "dashed",
					color: "#f0f0f0"
				}
			}
		},
		series: [
			{
				data: [45, 52, 62, 62, 62, 65, 52, 75, 75, 75, 82, 92],
				type: "line",
				symbol: "circle",
				symbolSize: 8,
				itemStyle: {
					color: "#fff",
					borderColor: "#2f79c4",
					borderWidth: 2
				},
				lineStyle: {
					color: "#2f79c4",
					width: 2
				},
				areaStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
						{
							offset: 0,
							color: "rgba(47, 121, 196, 0.2)"
						},
						{
							offset: 1,
							color: "rgba(47, 121, 196, 0)"
						}
					])
				}
			}
		]
	};
	myChart.setOption(option);
};

onMounted(() => {
	initChart();
	initTimeline();
	initSlider();
	window.addEventListener("resize", () => {
		myChart && myChart.resize();
		mainChart && mainChart.resize();
		sliderChart && sliderChart.resize();
	});
});

const next = () => {
	if (currentIndex.value < cardList.value.length - 5) {
		currentIndex.value++;
	}
};

const prev = () => {
	if (currentIndex.value > 0) {
		currentIndex.value--;
	}
};
</script>

<style lang="scss" scoped>
.content-wrapper {
	width: 1666px;
	height: 2132px;
	.main-content {
		width: 100%;
		position: relative;
		margin-bottom: 16px;
		.cards-mask {
			width: 100%;
			overflow: hidden; // 仅在这里隐藏超出部分，不影响外层的按钮
		}

		.cards-container {
			display: flex;
			gap: 16px;
			transition: transform 0.5s ease; // 平滑过渡动画
			width: max-content; // 确保容器宽度由内容撑开
		}

		.government-card {
			width: 307px;
			height: 178px;
			padding: 16px 26px;
			box-sizing: border-box;
			border-radius: 10px;
			position: relative;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			border: 1px solid rgba(255, 255, 255, 0.1);
			box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
			cursor: pointer;
			.card-bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-size: 358px 358px;
				background-repeat: no-repeat;
				background-position: center;
				filter: blur(20px);
				z-index: 0;
				opacity: 0.8;
				background-color: rgba(5, 33, 77, 0.7); // 调整为更明显的深蓝色
				&::after {
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					background: linear-gradient(90deg, rgba(5, 33, 77, 1) 0%, rgba(5, 33, 77, 0) 50%, rgba(5, 33, 77, 1) 100%);
				}
			}

			.card-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 9px;
				position: relative;
				z-index: 1;

				.card-title {
					font-family: "YouSheBiaoTiHei";
					font-size: 24px;
					font-weight: 400;
					line-height: 31px;
					color: rgba(255, 255, 255, 1);
					text-shadow: 0 0 30px rgba(255, 255, 255, 1);
				}

				.card-icon {
					width: 36px; // 假设大小
					height: 36px;
				}
			}

			.card-body {
				position: relative;
				z-index: 1;
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;

				.stat-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 30px;

					.stat-label,
					.stat-value {
						font-family: "Microsoft YaHei";
						font-size: 16px;
						font-weight: 400;
						line-height: 30px;
						color: rgba(255, 255, 255, 0.8);
					}
				}
			}
		}

		.left-btn {
			width: 24px;
			height: 48px;
			position: absolute;
			top: 50%;
			left: -33px;
			transform: translateY(-50%);
			cursor: pointer;
			z-index: 10;
			transition: opacity 0.3s;
			&.disabled {
				opacity: 0.3;
				cursor: not-allowed;
			}
		}
		.right-btn {
			width: 24px;
			height: 48px;
			position: absolute;
			top: 50%;
			right: -33px;
			transform: translateY(-50%);
			cursor: pointer;
			z-index: 10;
			transition: opacity 0.3s;
			&.disabled {
				opacity: 0.3;
				cursor: not-allowed;
			}
		}
	}
	.main-charts {
		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;
		margin-bottom: 22px;
		.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%;
			}
		}
	}
	.main-text {
		width: 1601px;
		height: 700px;
		display: flex;
		justify-content: space-between;
		margin-bottom: 16px;
		.text-item {
			width: 792px;
			height: 700px;
			border-radius: 10px;
			background-color: rgba(255, 255, 255, 0.65);
			box-shadow: 0 0 20px rgba(25, 69, 130, 0.1);
			.text-item-title {
				width: 100%;
				height: 48px;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding-left: 17px;
				box-sizing: border-box;
				background: linear-gradient(180deg, rgba(231, 243, 255, 1) 0%, rgba(231, 243, 255, 0) 100%);
				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);
				}
			}
			.text-item-content {
				width: 100%;
				height: 652px;
				padding: 6px 27px 22px 27px;
				box-sizing: border-box;
				overflow-y: auto;
				.dynamic-item {
					display: flex;
					padding: 16px 0;
					border-bottom: 1px solid rgba(0, 0, 0, 0.05);
					&:last-child {
						border-bottom: none;
					}
					.item-icon {
						width: 24px;
						height: 24px;
						margin-right: 12px;
						margin-top: 3px;
					}
					.item-right {
						flex: 1;
						.dynamic-item-header {
							display: flex;
							justify-content: space-between;
							align-items: flex-start;
							.item-title {
								font-family: "Microsoft YaHei";
								font-size: 16px;
								font-weight: 700;
								line-height: 30px;
								color: rgb(59, 65, 75);
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								max-width: 500px;
							}
							.item-date {
								font-family: "Microsoft YaHei";
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								color: rgb(95, 101, 108);
							}
						}
						.dynamic-item-body {
							font-family: "Microsoft YaHei";
							font-size: 16px;
							font-weight: 400;
							line-height: 30px;
							color: rgb(95, 101, 108);
							margin-top: 0; // 紧贴标题行
							width: 100%;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							cursor: pointer;
						}
						.dynamic-item-tags {
							display: flex;
							gap: 8px;
							margin-top: 5px;
							.tag {
								padding: 2px 8px;
								border-radius: 4px;
								font-family: "Microsoft YaHei";
								font-size: 14px;
								font-weight: 400;
								line-height: 20px;
								&.tag-blue {
									color: #2f79c4;
									background: rgba(47, 121, 196, 0.1);
									border: 1px solid rgba(47, 121, 196, 0.3);
								}
								&.tag-green {
									color: #52c41a;
									background: rgba(82, 196, 26, 0.1);
									border: 1px solid rgba(82, 196, 26, 0.3);
								}
								&.tag-red {
									color: #fa541c;
									background: rgba(250, 84, 28, 0.1);
									border: 1px solid rgba(250, 84, 28, 0.3);
								}
							}
						}
					}
				}
			}
			.text-item-contentOther {
				width: 100%;
				height: 652px;
				padding: 10px 30px 22px 27px;
				box-sizing: border-box;
				overflow-y: auto;
				.ranking-card {
					width: 100%;
					border-radius: 10px;
					border: 1px solid rgb(234, 236, 238);
					padding: 12px 24px;
					margin-bottom: 12px;
					box-sizing: border-box;
					&:last-child {
						margin-bottom: 0;
					}
					.ranking-header {
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 12px;
						.header-left {
							display: flex;
							align-items: center;
							.dept-icons {
								display: flex;
								margin-right: 12px;
								.dept-icon {
									width: 24px;
									height: 24px;
									margin-right: -8px; // 图标叠加效果
									&:last-child {
										margin-right: 0;
									}
								}
							}
							.dept-names {
								font-family: "Microsoft YaHei";
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
								color: rgb(59, 65, 75);
							}
						}
						.header-right {
							.joint-count {
								font-family: "Microsoft YaHei";
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
								color: rgb(59, 65, 75);
							}
						}
					}
					.ranking-body {
						display: flex;
						flex-direction: column;
						gap: 8px;
						.ranking-item {
							display: flex;
							justify-content: space-between;
							align-items: center;
							.item-left {
								display: flex;
								align-items: center;
								flex: 1;
								overflow: hidden;
								.item-type {
									padding: 2px 8px;
									border-radius: 4px;
									font-family: "Microsoft YaHei";
									font-size: 14px;
									font-weight: 400;
									line-height: 20px;
									margin-right: 13px;
									&.type-bill {
										color: #2f79c4;
										background: rgba(47, 121, 196, 0.1);
										// border: 1px solid rgba(47, 121, 196, 0.3);
									}
									&.type-order {
										color: #2f79c4;
										background: rgba(47, 121, 196, 0.1);
										// border: 1px solid rgba(47, 121, 196, 0.3);
									}
								}
								.item-title {
									font-family: "Microsoft YaHei";
									font-size: 16px;
									font-weight: 400;
									line-height: 30px;
									color: rgb(59, 65, 75);
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									cursor: pointer;
								}
							}
							.item-date {
								font-family: "Microsoft YaHei";
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								color: rgb(95, 101, 108);
								margin-left: 16px;
							}
						}
					}
				}
			}
		}
	}
	.main-bottom {
		width: 100%;
		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);
				}
			}
			.bottom-item-select {
				display: flex;
				height: 48px;
				align-items: end;
				gap: 8px;
				.select-btn {
					padding: 4px 16px;
					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;
					// transition: all 0.3s;
					&.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: transparent;
							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);
								}
							}
						}
					}
				}
			}
		}
		.bottom-content {
			width: 100%;
			height: calc(100% - 48px);
			padding: 14px 23px 19px 23px;
			box-sizing: border-box;
			.timeline-container {
				width: 100%;
				height: 100%;
				border-radius: 4px;
				padding: 8px 8px 8px 8px;
				background-color: rgb(247, 248, 249);
				border: 1px solid rgb(234, 236, 238);
				.timeline-item {
					width: 100%;
					height: 552px;
					overflow-y: auto;
					&::-webkit-scrollbar {
						display: none;
					}
				}
				.timelineBar {
					width: 100%;
					height: 51px;
					background-color: rgba(255, 255, 255, 1);
				}
			}
		}
	}
}
</style>

<style lang="scss">
.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;
	.el-popper__arrow::before {
		background-color: rgb(59, 65, 75) !important;
		border-color: rgb(59, 65, 75) !important;
	}
}
</style>
