<!--ZM博弈概况-->
<template>
	<div class="content-wrapper">
		<div class="card-box">
			<div class="card-header">
				<div class="card-title">
					<img class="icon" src="../../assets/icons/title-icon1.png" />
					<img class="text" src="../../assets/icons/title-text1.svg" />
				</div>
				<div style="display: flex; margin-left: 50px; align-items: center">
					数据来源:
					<el-select
						class="select-item"
						size="default"
						style="margin-left: 15px; width: 240px; height: 32px"
						v-model="origin"
						@change="handleOriginChange()"
					>
						<el-option :value="value.id" :label="value.name" v-for="(value, index) in originList" :key="index" />
					</el-select>

					<el-select
						class="select-item"
						size="default"
						style="margin-left: 15px; width: 200px; height: 32px"
						v-model="year"
						@change="handleGetCompare()"
					>
						<el-option :value="value" :label="value" v-for="(value, index) in yearList" :key="index" />
					</el-select>
				</div>
			</div>
			<div style="display: flex; height: 650px; width: 100%; padding-top: 12px">
				<div style="width: 50%">
					<div class="content-chart-header">
						<button-list :list="buttonList" :active-id="activeButtonId" @click="setActiveButtonId"></button-list>
						<!-- <div style="display: flex; margin-left: 50px">
							数据来源:
							<el-select
								class="select-item"
								size="default"
								style="margin-left: 15px; width: 240px; height: 32px"
								v-model="origin"
								@change="handleGetCompare()"
							>
								<el-option
									:value="value.id"
									:label="value.name"
									v-for="(value, index) in originList"
									:key="index"
								/>
							</el-select>
						</div> -->
						<div style="display: flex">
							<div class="china-icon"></div>
							<div class="text" style="margin-right: 18px">中国</div>
							<div class="usa-icon"></div>
							<div class="text">美国</div>
						</div>
					</div>

					<div v-if="activeButtonId == 2" style="width: 100%; height: 520px; padding-top: 24px" id="char"></div>
					<!-- <Echarts v-if="activeButtonId == 2" :option="lineOption" height="520px" /> -->
					<div v-else>
						<div class="content-line-chart-header">
							<el-radio-group v-model="selectedIndicator" @change="handleIndicatorChange" size="default">
								<el-radio
									v-for="option in indicatorOptions"
									:key="option.value"
									:label="option.label"
									:value="option.value"
								/>
							</el-radio-group>
						</div>
						<Echarts :option="lineOption" height="520px" />
					</div>
				</div>
				<div style="width: 778px; height: 620px; overflow: auto">
					<el-table
						:data="tableData"
						style="width: 100%; margin-bottom: 20px"
						row-key="targetCode"
						border
						:tree-props="{ children: 'children' }"
						default-expand-all
						:header-cell-style="{ 'border-right': 'none' }"
						:cell-style="{ 'border-right': 'none' }"
						height="600"
					>
						<!-- 自定义展开图标 -->

						<el-table-column prop="targetName" label="指标名称" width="350"> </el-table-column>
						<el-table-column prop="usScore" label="美国">
							<template #default="scope">
								<div style="display: flex">
									<div class="progress-text" style="width: 90px">
										<div class="rank" v-show="scope.row.usScore != 0">{{ "No." + scope.row.usRank }}</div>
										<div class="score" v-show="scope.row.usScore != 0">{{ scope.row.usScore }}</div>
									</div>
									<div class="progress-wrapper left">
										<el-progress
											:percentage="scope.row.usScore"
											:stroke-width="20"
											class="left-progress"
											:class="{
												cLead: scope.row.usScore == 0,
												leftProgress: scope.row.usScore != 0
											}"
											:show-text="false"
										/>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="chinaScore" label="中国">
							<template #default="scope">
								<div style="display: flex">
									<div class="progress-wrapper right" :style="{ '--i': '40px', marginRight: '20px' }">
										<el-progress
											:percentage="scope.row.chinaScore"
											:stroke-width="20"
											class="right-progress"
											:class="{
												cLead: scope.row.chinaRank < scope.row.usRank && scope.row.chinaScore != 0
											}"
											:show-text="false"
										/>
									</div>
									<div class="progress-text" style="color: rgba(206, 79, 81, 1); width: 90px">
										<div
											class="rank"
											:class="{ cLeadRank: scope.row.chinaRank < scope.row.usRank }"
											v-show="scope.row.chinaScore != 0"
										>
											{{ "No." + scope.row.chinaRank }}
										</div>
										<div
											class="score"
											:class="{ cLeadScore: scope.row.chinaRank < scope.row.usRank }"
											v-show="scope.row.chinaScore != 0"
										>
											{{ scope.row.chinaScore }}
										</div>
									</div>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</div>
		</div>
		<div class="card-box" style="margin-top: 16px" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay(true)">
			<div class="card-title">
				<img class="icon" src="../../assets/icons/title-icon2.png" />
				<!-- <img class="text" src="../../assets/icons/title-text2.svg" /> -->
				<span class="text-new">中美科技博弈历程</span>
			</div>
			<div class="card-main">
				<!-- <Timeline :data="course" text-key="title" id-key="seq" /> -->
				<div class="line"></div>
				<div class="card-content-mask">
					<div class="card-content" :style="{ transform: `translateX(-${currentIndex * (240 + 16)}px)` }">
						<div class="card-item" v-for="(val, idx) in course" :key="idx">
							<div class="card-item-top">{{ val.eventStrategy }}</div>
							<div class="card-item-line"></div>
							<div
								class="card-item-main"
								:class="{ cnBackground: val.eventCountry === '中国', usBackground: val.eventCountry === '美国' }"
							>
								<div class="logo">
									<img :src="val.eventCountryImg" alt="" />
								</div>
								<div class="time">{{ val.eventDate }}</div>
								<div class="title">{{ val.eventName }}</div>
								<div class="desc">{{ val.eventDesc }}</div>
								<div class="info">{{ val.eventOrg + " · " + val.eventType }}</div>
								<div class="tag">
									<!-- <div
										class="tag-item"
										:class="{
											tag1: Number(area.id) < 3,
											tag2: Number(area.id) > 2 && Number(area.id) < 5,
											tag3: Number(area.id) > 4 && Number(area.id) < 7,
											tag4: Number(area.id) > 6 && Number(area.id) < 9,
											tag5: Number(area.id) > 8 && Number(area.id) < 11,
											tag6: Number(area.id) > 10
										}"
										v-for="(area, idxx) in val.domainList"
										:key="idxx"
									>
										{{ area.name }}
									</div> -->
									<AreaTag v-for="(area, idxx) in val.domainList" :key="idxx" :tagName="area.name"></AreaTag>
								</div>
							</div>
						</div>
					</div>
				</div>
				<img
					src="@/assets/icons/card-btn-left.png"
					alt=""
					class="left-btn"
					@click="prev"
					:class="{ disabled: currentIndex === 0 }"
				/>
				<img
					src="@/assets/icons/card-btn-right.png"
					alt=""
					class="right-btn"
					@click="next"
					:class="{ disabled: currentIndex >= course.length - 5 }"
				/>
			</div>
		</div>
		<div class="btn-box">
			<div
				v-for="(value, index) in btnList"
				:key="index"
				class="btn-item"
				@click="handleClickBottomBtn"
				:style="{
					background: value.background
				}"
			>
				<img :src="value.img" style="width: 22px; height: 19px; margin: 0 22px" />
				{{ value.text }}
				<img
					:src="`./icon/ZM/btn-icon-arrow.png`"
					style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px"
				/>

				<!-- <img src="./assets/images/btn-icon-arrow.png"
					style="margin-left: auto; margin-right: 22px; width: 13px; height: 12px" /> -->
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";
import { ArrowRight, CaretBottom } from "@element-plus/icons-vue";
import Timeline from "./Timeline.vue";
import tableShow from "./tableShow.vue";
import ButtonList from "@/components/buttonList/buttonList.vue";
import Echarts from "@/components/Chart/index.vue";
import mockData from "./mock.json";

import radarChart from "./radarChart3.js";
import { getCompare, getChartDict, getYear, getTechnologyGameAnalysis } from "@/api/zmOverview/risk/index.js";
import icon1 from "./icon/btn-icon-0.png";
import icon2 from "./icon/btn-icon-1.png";
import icon3 from "./icon/btn-icon-2.png";
import icon4 from "./icon/btn-icon-3.png";
import icon5 from "./icon/btn-icon-4.png";
import icon6 from "./icon/btn-icon-5.png";
import icon7 from "./icon/btn-icon-6.png";
import icon from "./icon/btn-icon-7.png";
import Img1 from "./assets/images/btn-icon-0.png";
import Img2 from "./assets/images/btn-icon-1.png";
import Img3 from "./assets/images/btn-icon-2.png";
import Img4 from "./assets/images/btn-icon-3.png";
import Img5 from "./assets/images/btn-icon-4.png";
import Img6 from "./assets/images/btn-icon-5.png";
import Img7 from "./assets/images/btn-icon-6.png";
import Img8 from "./assets/images/btn-icon-7.png";
import { ElMessage } from "element-plus";

const buttonList = ref([
	{
		id: 1,
		text: "趋势变化"
		// disabled: true
	},
	{
		id: 2,
		text: "指数对比"
	}
]);
const activeButtonId = ref(buttonList.value[1]?.id || 1);
const setActiveButtonId = id => {
	activeButtonId.value = id;
	if (id == 2) {
		handleGetCompare();
	}
};

const course = ref([
	{
		time: "2025-01-15",
		title: "《国家量子倡议再授权法案》发布",
		content:
			"计划将国家量子倡议延长至2034年，新增研发中心、测试平台，并首次将NASA的量子研究纳入，旨在加速技术应用与人才发展。",
		unit: "美国",
		tag: "科技发展战略",
		icon: icon1
	},
	{
		time: "2025-01-21",
		title: "将美国实体列入'不可靠实体清单'并采取商品进口限制",
		content: "根据《反外国制裁法》等，将17家美国实体列入清单，禁止其从事与中国有关的进出口与新增投资。",
		unit: "中国",
		tag: "反制措施",
		icon: icon2
	},
	{
		time: "2025-01-21",
		title: "《国家创新驱动发展战略纲要》发布",
		content: "纲领性文件，提出了建设世界科技强国的'三步走'战略目标，并系统部署了构建现代产业技术体系等八大战略任务。",
		unit: "中国",
		tag: "科技发展战略",
		icon: icon3
	},
	{
		time: "2025-01-21",
		title: "中国网信办约谈英伟达",
		content: "中国网信办约谈英伟达，要求就H20算力芯片漏洞后门安全风险问题进行说明。",
		unit: "中国",
		tag: "反制措施",
		icon: icon4
	},
	{
		time: "2025-05-09",
		title: "《2026财年中国防授权法案》发布",
		content:
			"年度国防预算法案，其中系统性地嵌入了大量对华竞争条款，首次将对外投资审查法律化，并在供应链、实体清单等方面加强限制。",
		unit: "美国",
		tag: "对华打压遏制",
		icon: icon5
	},
	{
		time: "2025-07-24",
		title: "白宫'人工智能(AI)行动计划'",
		content: "提出放宽监管、简化环境许可可以加快AI基础设施建设，并涉及促进AI出口、要求联邦采购的AI模型具备中立性等内容。",
		unit: "美国",
		tag: "科技发展战略",
		icon: icon6
	},
	{
		time: "2025-07-24",
		title: "2026财年《商务、司法、科学及相关支出法案》",
		content: "法案为商务部工业与安全局(BIS)大幅增加预算，以加强出口管制执法，特别强调审查对华为、中芯国际的出口许可证。",
		unit: "美国",
		tag: "对华打压遏制",
		icon: icon7
	}
]);

const originList = ref([]);
const origin = ref("");
//数据来源
const handleGetChartDict = async () => {
	try {
		const res = await getChartDict();
		console.log("数据来源", res);
		if (res.code === 200 && res.data) {
			originList.value = res.data;
			origin.value = res.data[0].id;
		}
	} catch (error) {
		console.error("获取数据来源error", error);
	}
};

const yearList = ref([]);
const year = ref("");
//年份
const handleGetYear = async () => {
	try {
		const res = await getYear(origin.value);
		console.log("年份", res);
		if (res.code === 200 && res.data) {
			yearList.value = res.data;
			year.value = res.data[0];
		}
	} catch (error) {
		console.error("获取年份error", error);
	}
};

// 数据来源改变时，年份列表也会改变
const handleOriginChange = async () => {
	await handleGetYear();
};

//中美科技实力对比
const handleGetCompare = async () => {
	try {
		const res = await getCompare(origin.value, year.value);
		console.log("中美科技实力对比", res);
		if (res.code === 200 && res.data) {
			tableData.value = res.data[0].children;
			// tableData.value = [res.data];
			const secondLevelData = res.data[0].children;
			const indicatorNames = secondLevelData.map(item => item.targetName);
			const chinaScores = secondLevelData.map(item => item.chinaScore);
			const usScores = secondLevelData.map(item => item.usScore);
			const dom = document.getElementById("char");
			const myChart = echarts.init(dom);
			const radarOption = {
				indicatorNames: indicatorNames,
				data: [chinaScores, usScores]
			};
			const option = radarChart(radarOption.indicatorNames, radarOption.data);
			myChart.setOption(option);
			console.log(radarOption);
		}
	} catch (error) {
		console.error("获取中美科技实力对比error", error);
	}
};

//中美博弈概览V2:领域打压遏制时间线
const handlegetTechnologyGameAnalysis = async () => {
	try {
		const res = await getTechnologyGameAnalysis();
		console.log("中美科技博弈分析", res);
		if (res.code === 200 && res.data) {
			course.value = res.data;
		}
	} catch (error) {
		console.error("获取中美科技博弈分析error", error);
	}
};
onMounted(async () => {
	await handleGetChartDict();
	await handleGetYear();
	await handleGetCompare();
	await handlegetTechnologyGameAnalysis();
	// const dom = document.getElementById("char");
	// const myChart = echarts.init(dom);

	// // 2. 传入容器，生成配置
	// const option = radarChart(
	// 	["创新资源", "知识创造", "企业创新", "创新绩效", "创新环境"],
	// 	[
	// 		[4200, 3000, 20000, 35000, 50000, 18000],
	// 		[1000, 42000, 32000, 35000, 50000, 18000]
	// 	]
	// );

	// myChart.setOption(option);

	// // setChart(option, "char7");
	startAutoPlay();
	processIndicatorOptions();
});

const chartColors = [
	"rgba(8, 151, 156, 1)",
	"#FF4D4F",
	"#FF9900",
	"#00CC99",
	"#73c0de",
	"#3ba272",
	"#fc8452",
	"#9a60b4",
	"#ea7ccc"
];

// const series = {
// 	name: key,
// 	type: "line",
// 	symbolSize: 15,
// 	// stack: "Total",
// 	itemStyle: {
// 		color: chartColors[Math.floor(Math.random() * chartColors.length)]
// 	},
// 	data: []
// };

const indicatorOptions = ref([]);
const selectedIndicator = ref("");

// 整理指标选项
const processIndicatorOptions = () => {
	const chinaData = mockData["中国"];
	if (!chinaData) return;

	indicatorOptions.value = Object.keys(chinaData).map(key => ({
		label: key,
		value: key
	}));

	if (indicatorOptions.value.length > 0) {
		selectedIndicator.value = indicatorOptions.value[0].value;
		handleIndicatorChange(selectedIndicator.value);
	}
};

// 处理指标变化
const handleIndicatorChange = indicator => {
	const chinaData = mockData["中国"]?.[indicator] || [];
	const usaData = mockData["美国"]?.[indicator] || [];

	const years = chinaData.map(item => item.year.toString());
	const chinaValues = chinaData.map(item => item.value);
	const usaValues = usaData.map(item => item.value);
	console.log("中国", chinaValues);
	console.log("美国", usaValues);
	// chinaValues和usaValues的最小值和最大值
	const min = Math.min(...chinaValues, ...usaValues);
	const max = Math.max(...chinaValues, ...usaValues);
	lineOption.value.yAxis.min = Math.floor(min - 1);
	lineOption.value.yAxis.max = Math.ceil(max + 1);
	lineOption.value.xAxis.data = years;
	lineOption.value.series = [
		{
			name: "中国",
			type: "line",
			symbolSize: 8,
			smooth: true,
			itemStyle: {
				color: "#CE4F51"
			},
			// areaStyle: {
			// 	color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			// 		{
			// 			offset: 0,
			// 			color: "rgb(206, 79, 81, .8)"
			// 		},
			// 		{
			// 			offset: 1,
			// 			color: "rgb(206, 79, 81, .3)"
			// 		}
			// 	])
			// },
			data: chinaValues
		},
		{
			name: "美国",
			type: "line",
			smooth: true,
			symbolSize: 8,
			itemStyle: {
				color: "#055FC2"
			},
			// areaStyle: {
			// 	color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
			// 		{
			// 			offset: 0,
			// 			color: "rgb(5, 95, 194,.8)"
			// 		},
			// 		{
			// 			offset: 1,
			// 			color: "rgb(5, 95, 194, .3)"
			// 		}
			// 	])
			// },
			data: usaValues
		}
	];
};

const lineOption = ref({
	title: {
		text: ""
	},
	tooltip: {
		trigger: "axis",
		confine: true,
		backgroundColor: "rgba(50, 50, 50, 0.7)",
		borderColor: "#333",
		borderWidth: 0,
		padding: [5, 10],
		textStyle: {
			color: "#fff",
			fontSize: 16
		}
	},
	legend: {
		show: false
	},
	grid: {
		top: "5%",
		left: "3%",
		right: "4%",
		bottom: "2%",
		containLabel: true
	},
	xAxis: {
		type: "category",
		boundaryGap: false,
		minInterval: 1,
		scale: true,
		axisLine: {
			lineStyle: {
				color: "#e0e0e0",
				width: 1
			}
		},
		axisTick: {
			show: false,
			lineStyle: {
				color: "#ccc"
			}
		},
		axisLabel: {
			color: "#666",
			fontSize: 13,
			fontWeight: 500,
			margin: 12
		},
		data: ["2021", "2022", "2023", "2024", "2025"]
	},
	yAxis: {
		type: "value",
		min: 77,
		name: "指数",
		nameLocation: "end",
		nameGap: 1,
		padding: [0, -50, 0, 0],
		nameTextStyle: {
			color: "#666",
			fontSize: 13,
			fontWeight: 600,
			padding: [0, 0, 10, 0]
		},
		axisLine: {
			show: true,
			lineStyle: {
				color: "#e0e0e0",
				width: 1
			}
		},
		axisTick: {
			show: false,
			lineStyle: {
				color: "#ccc"
			}
		},
		axisLabel: {
			color: "#666",
			fontSize: 14,
			fontWeight: 400,
			formatter: value => {
				return value.toFixed(0);
			}
		},
		splitLine: {
			lineStyle: {
				width: 1,
				type: "dashed",
				color: "rgba(12, 78, 125, .3)"
			}
		},
		splitNumber: 8
	},
	series: []
});

const tableData = ref([
	{
		id: 1,
		name: "综合创新指数",
		percent: [60, 40],
		children: []
	},
	{
		id: 2,
		name: "创新资源",
		percent: [50, 50],
		children: []
	},
	{
		id: 3,
		name: "研发人力",
		percent: [70, 30],
		children: [
			{
				id: 31,
				name: "每万名就业人员中R&D人员全时当量",
				percent: [65, 35],
				children: []
			},
			{
				id: 32,
				name: "研究人员占R&D人员比例",
				percent: [55, 45],
				children: []
			},
			{
				id: 33,
				name: "科学与工程类毕业生比例",
				percent: [70, 30],
				children: []
			}
		]
	},
	{
		id: 4,
		name: "研发经费",
		percent: [60, 40],
		children: [
			{
				id: 41,
				name: "R&D经费支出总额(购买力平价)",
				percent: [65, 35],
				children: []
			},
			{
				id: 42,
				name: "R&D经费支出占GDP比重",
				percent: [55, 45],
				children: []
			},
			{
				id: 43,
				name: "基础研究经费占R&D经费比重",
				percent: [45, 55],
				children: []
			}
		]
	},
	{
		id: 5,
		name: "科研条件",
		percent: [60, 40],
		children: [
			{
				id: 51,
				name: "国家级重大科技基础设施数量",
				percent: [50, 50],
				children: []
			}
		]
	}
]);

const btnList = ref([
	{
		text: "制裁征候挖掘",
		background: "linear-gradient(180.00deg, rgba(9, 88, 217, 1),rgba(9, 88, 217, 0.5) 100%)",
		img: Img1
	},
	{
		text: "制裁内容快速摘要",
		background: "linear-gradient(180.00deg, rgba(255, 97, 97, 1),rgba(255, 97, 97, 0.5) 100%)",
		img: Img2
	},
	{
		text: "重点领域博弈历程分析",
		background: "linear-gradient(180.00deg, rgba(255, 187, 51, 1),rgba(255, 187, 51, 0.5) 100%)",
		img: Img3
	},
	{
		text: "制裁手段关联分析",
		background: "linear-gradient(180.00deg, rgba(48, 193, 195, 1),rgba(48, 193, 195, 0.5) 100%)",
		img: Img4
	},
	{
		text: "政要人物画像",
		background: "linear-gradient(180.00deg, rgba(123, 52, 184, 1),rgba(123, 52, 184, 0.5) 100%)",
		img: Img5
	},
	{
		text: "人物关系挖掘",
		background: "linear-gradient(180.00deg, rgba(255, 187, 51, 1),rgba(255, 187, 51, 0.5) 100%)",
		img: Img6
	},
	{
		text: "人物立场分析",
		background: "linear-gradient(180.00deg, rgba(93, 186, 255, 1),rgba(93, 186, 255, 0.5) 100%)",
		img: Img7
	},
	{
		text: "制裁内容比对分析",
		background: "linear-gradient(180.00deg, rgba(93, 186, 255, 1),rgba(93, 186, 255, 0.5) 100%)",
		img: Img8
	}
]);

const currentIndex = ref(0);
let autoTimer = null;

const startAutoPlay = isContinue => {
	if (!isContinue) {
		currentIndex.value = 0;
	}
	stopAutoPlay();
	if (course.value.length > 5) {
		autoTimer = setInterval(() => {
			next();
		}, 3000);
	}
};

const stopAutoPlay = () => {
	if (autoTimer) {
		clearInterval(autoTimer);
		autoTimer = null;
	}
};

const next = () => {
	let arr = [...course.value];
	if (currentIndex.value < course.value.length - 5) {
		currentIndex.value++;
	} else {
		course.value = [...course.value, ...arr];
		currentIndex.value++;
		// currentIndex.value = 0;
	}
};

const prev = () => {
	if (currentIndex.value > 0) {
		currentIndex.value--;
	} else {
		currentIndex.value = Math.max(0, course.value.length - 5);
	}
};

const handleClickBottomBtn = () => {
	ElMessage.warning("当前功能正在开发中，敬请期待！");
};
</script>

<style lang="scss" scoped>
.content-wrapper {
	width: 1600px;
	height: 1450px;
	margin: 0 auto;

	.card-box {
		width: 1600px;
		height: 700px;
		box-sizing: border-box;
		border: 1px solid rgba(234, 236, 238, 1);
		border-radius: var(---10, 10px);
		/* 业务系统/模块阴影 */
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 1);
		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 20px;
			height: 54px;
		}
		.card-title {
			// width: 100%;
			height: 48px;
			display: flex;
			align-items: center;

			.icon {
				/* 合并 */
				width: 18.67px;
				height: 17.85px;
				margin: 14px 16px;
			}

			.text {
				/* Text */
				width: 177px;
				height: 31px;
				margin: 8px 0px;
			}
			.text-new {
				font-family: YouSheBiaoTiHei;
				font-size: 24px;
				font-weight: 400;
				line-height: 24px;
				color: rgb(5, 95, 194);
			}
		}

		.content-chart-header {
			display: flex;
			justify-content: space-between;
			margin: 0 50px;
			// line-height: 32px;
			align-items: center;
		}
		.content-line-chart-header {
			margin-top: 15px;
			margin-left: 48px;
		}

		.card-main {
			height: 650px;
			position: relative;

			.line {
				margin-top: 36px;
				width: 1600px;
				height: 4px;
				background: rgba(231, 243, 255, 1);
			}

			.card-content-mask {
				margin: -15px auto 0;
				width: 1520px;
				height: 594px;
				overflow: hidden;

				.card-content {
					margin: 0 auto 0;
					// width: 1520px;
					width: max-content;
					height: 594px;
					display: flex;
					gap: 16px;
					transition: transform 0.75s ease; // 平滑过渡动画

					.card-item {
						width: 240px;
						height: 594px;

						.card-item-top {
							margin: 0 auto;
							width: max-content;
							height: 32px;
							padding: 0px 12px;
							box-sizing: border-box;
							border: 1px solid rgba(174, 214, 255, 1);
							border-radius: 50px;
							background: rgba(231, 243, 255, 1);
							text-align: center;
							line-height: 30px;
							color: var(--color-main-active);
							font-family: Source Han Sans CN;
							font-style: Bold;
							font-size: 18px;
							font-weight: 700;
							letter-spacing: 0px;
						}

						.card-item-line {
							width: 2px;
							height: 30px;
							background: rgba(174, 214, 255, 1);
							margin-left: 119px;
						}

						.card-item-main {
							width: 240px;
							height: 532px;
							box-sizing: border-box;
							border: 1px solid rgba(174, 214, 255, 1);
							border-radius: 10px;
							background: rgba(246, 250, 255, 1);

							.logo {
								margin-top: 24px;
								margin-left: 24px;
								width: 48px;
								height: 48px;
								border-radius: 24px;
								overflow: hidden;

								img {
									width: 100px;
									height: 100%;
								}
							}

							.time {
								margin-top: 16px;
								margin-left: 24px;
								width: 192px;
								height: 24px;
								color: rgba(59, 65, 75, 1);
								font-family: Source Han Sans CN;
								font-style: Bold;
								font-size: 18px;
								font-weight: 700;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: justify;
							}

							.title {
								margin-top: 16px;
								margin-left: 24px;
								width: 192px;
								height: 48px;
								color: rgba(59, 65, 75, 1);
								font-family: Source Han Sans CN;
								font-style: Bold;
								font-size: 18px;
								font-weight: 700;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: justify;
								overflow: hidden;
							}

							.desc {
								margin-top: 16px;
								margin-left: 24px;
								width: 192px;
								height: 150px;
								color: rgba(95, 101, 108, 1);
								font-family: Source Han Sans CN;
								font-style: Regular;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: justify;
								overflow: hidden;
							}

							.info {
								margin-top: 16px;
								margin-left: 24px;
								width: 192px;
								height: 24px;
								color: rgba(95, 101, 108, 1);
								font-family: Source Han Sans CN;
								font-style: Regular;
								font-size: 16px;
								font-weight: 400;
								line-height: 30px;
								letter-spacing: 0px;
								text-align: justify;
								overflow: hidden;
							}

							.tag {
								height: 24px;
								display: flex;
								gap: 8px;
								flex-wrap: wrap;

								margin-top: 16px;
								margin-left: 24px;

								.tag-item {
									// width: 72px;
									height: 24px;
									padding: 0 8px;
									box-sizing: border-box;
									// border: 1px solid rgba(211, 173, 247, 1);
									border-radius: 4px;
									// background: rgba(249, 240, 255, 1);
									// color: rgba(114, 46, 209, 1);
									font-family: Microsoft YaHei;
									font-style: Regular;
									font-size: 14px;
									font-weight: 400;
									line-height: 22px;
									letter-spacing: 0px;
									text-align: center;
								}

								.tag1 {
									border: 1px solid rgba(217, 247, 190, 1);
									background: rgba(246, 255, 237, 1);
									color: rgba(82, 196, 26, 1);
								}

								.tag2 {
									border: 1px solid rgba(186, 224, 255, 1);
									background: rgba(230, 244, 255, 1);
									color: rgba(22, 119, 255, 1);
								}

								.tag3 {
									border: 1px solid rgba(135, 232, 222, 1);
									background: rgba(230, 255, 251, 1);
									color: rgba(19, 168, 168, 1);
								}

								.tag4 {
									border: 1px solid rgba(211, 173, 247, 1);
									background: rgba(249, 240, 255, 1);
									color: rgba(114, 46, 209, 1);
								}

								.tag5 {
									border: 1px solid rgba(255, 229, 143, 1);
									background: rgba(255, 251, 230, 1);
									color: rgba(250, 173, 20, 1);
								}

								.tag6 {
									border: 1px solid rgba(255, 163, 158, 1);
									background: rgba(255, 241, 240, 1);
									color: rgba(245, 34, 45, 1);
								}
							}
						}

						.cnBackground {
							background: rgba(254, 249, 248, 1) !important;
						}

						.usBackground {
							background: rgba(246, 250, 255, 1) !important;
						}
					}
				}
			}

			.left-btn {
				position: absolute;
				width: 24px;
				height: 48px;
				top: 297px;
				left: 0;
				cursor: pointer;
			}

			.right-btn {
				position: absolute;
				width: 24px;
				height: 48px;
				top: 297px;
				right: 0;
				cursor: pointer;
			}
		}
	}
}

.progress-text {
	/* No.1 92.5 */
	width: 90px;
	height: 22px;
	display: flex;
	gap: 8px;

	.rank {
		width: 42px;
		height: 22px;
		padding: 0 2px;
		border-radius: 4px;
		background: rgba(231, 243, 255, 1);
		color: var(--color-main-active);
		font-family: YouSheBiaoTiHei;
		font-style: Regular;
		font-size: 12px;
		font-weight: 400;
		line-height: 22px;
		letter-spacing: 0px;
		text-align: center;
	}

	.cLeadRank {
		background: rgba(206, 79, 81, 0.1);
		color: rgba(206, 79, 81, 1);
	}

	.score {
		width: 36px;
		height: 22px;
		color: var(--color-main-active);
		font-family: Source Han Sans CN;
		font-style: Bold;
		font-size: 14px;
		font-weight: 700;
		line-height: 22px;
		letter-spacing: 0px;
		text-align: left;
	}

	.cLeadScore {
		color: rgba(206, 79, 81, 1);
	}
}

/* ========== 公共外壳 ========== */
.progress-wrapper {
	position: relative;
	flex: 1;
	height: 10px;
}

/* 文字居中在彩色条内 */
.inner-text {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 12px;
	color: #fff;
	font-weight: bold;
	z-index: 2;
}

/* ========== 左侧：右侧斜切 + 左侧圆角 ========== */
/* 左侧文字 */
.left-text {
	font-size: 12px;
	color: #333;
	margin-right: 8px;
	white-space: nowrap;
}

.left-progress {
	transform: scaleX(-1);
}

.left-progress :deep(.el-progress-bar__outer) {
	border-radius: 0;
	clip-path: inset(0 0 0 0);
	background: rgba(231, 243, 255, 1);
	overflow: hidden;
	/* 读行内传进来的变量 */
	height: 10px !important;
	margin-left: var(--j) !important;
	margin-top: 6px;
}

.left-progress :deep(.el-progress-bar__inner) {
	border-radius: 0;
	/* 移除圆角 */
	clip-path: inset(0 0 0 0);
	/* 设置为矩形，inset() 函数的四个参数都是0表示不裁剪 */
	background: #055fc2;
	/* 读行内传进来的变量 */
	height: 10px !important;
	margin-left: var(--j) !important;
}

/* ========== 右侧：左侧斜切 + 右侧圆角 ========== */
.right-progress :deep(.el-progress-bar__outer) {
	border-radius: 0;
	clip-path: inset(0 0 0 0);
	// background: #ffccc7;
	background: rgba(231, 243, 255, 1);
	overflow: hidden;
	height: 10px !important;
	margin-top: 6px;
}

.right-progress :deep(.el-progress-bar__inner) {
	border-radius: 0;
	clip-path: inset(0 0 0 0);
	// background: #ce4f51;
	background: #055fc2;
	height: 10px !important;
}

.cLead :deep(.el-progress-bar__outer) {
	background: #ffccc7;
}

.cLead :deep(.el-progress-bar__inner) {
	background: #ce4f51;
}

:deep(.el-table .cell) {
	padding: 0;

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

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

.china-icon {
	/* 椭圆 79 */
	width: 12px;
	height: 12px;
	margin: 5px;
	border-radius: 50%;
	background: rgba(206, 79, 81, 1);
}

.usa-icon {
	width: 12px;
	height: 12px;
	margin: 5px;
	border-radius: 50%;
	background: rgba(5, 95, 194, 1);
}

.text {
	color: rgba(59, 65, 75, 1);

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

.btn-box {
	margin-top: 16px;
	width: 100%;
	height: auto;
	/* 高度自适应内容 */
	// display: flex;
	display: none;
	flex-direction: row;
	/* 行方向布局 */
	flex-wrap: wrap;
	/* 允许换行 */
	justify-content: flex-start;
	align-items: stretch;
	/* 使所有按钮高度一致 */
	gap: 16px 16px;
	/* 设置按钮之间的间距 */
	padding: 0;
	/* 移除内边距，防止内容溢出 */
}

.btn-item {
	width: 307px;
	height: 60px;
	border-radius: 10px;
	box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
	// justify-content: center;
	/* 使按钮内容居中 */
	align-items: center;
	/* 使按钮内容居中 */
	display: flex;
	/* 使用flex布局 */
	color: rgba(255, 255, 255, 1);
	justify-content: flex-start;
	font-family: Microsoft YaHei;
	font-style: Bold;
	font-size: 16px;
	font-weight: 700;
	line-height: 30px;
	letter-spacing: 0px;
	text-align: center;
	cursor: pointer;
}

/* 隐藏原生箭头 */
// :deep(.el-table__expand-icon>.el-icon) {
// 	display: none;
// }

// /* 或者用背景图/伪元素替换 */
// :deep(.el-table__expand-icon>.el-icon::before) {
// 	content: "▶";
// 	color: #409eff;
// }

// :deep(.el-table .el-table__expand-icon--expanded::before) {
// 	content: "▼";
// }
/* 隐藏原生图标 */
:deep(.el-table__expand-icon > .el-icon) {
	display: none;
}

/* 自定义未展开图标 */
:deep(.el-table__expand-icon) {
	background-image: url("./icon/arrowRight.png");
	background-repeat: no-repeat;
	// background-size: contain;
	margin-left: 16px;
	margin-top: 4px;
	cursor: pointer;
	transition: transform 0.1s;
}

/* 自定义展开图标 */
:deep(.el-table__expand-icon--expanded) {
	background-image: url("./icon/arrowRight.png");
	transform-origin: center;
	transform: rotate(90deg) !important;
}

/* 自定义表头背景颜色 */
:deep(.el-table th) {
	background-color: #f0f9eb;
}

/* 自定义表头文字颜色 */
:deep(.el-table th .cell) {
	color: rgba(59, 65, 75, 1);

	font-family: Source Han Sans CN;
	font-style: Bold;
	font-size: 18px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 0px;
	text-align: left;
	text-align: center;
}

/* 自定义表头边框 */
:deep(.el-table th) {
	border-bottom: 2px solid #ebeef5;
}

/* 自定义表头高度 */
:deep(.el-table th) {
	padding: 12px 0;
}

:deep(.el-table .el-table__cell) {
	padding-left: 1px;
	padding-right: 1px;
}
</style>
