<template>
	<div class="wrap">
		<el-row>
			<CardCustom
				@more-click="moreClick"
				title="风险信号"
				:style="{ width: '986px', height: '540px' }"
				title-background-color="rgba(206, 79, 81, 1)"
			>
				<template #icon>
					<div class="icon icon1"></div>
				</template>
				<template #right>
					<div class="panel1Header">
						<div class="item" v-for="(item, index) in levelMapList.slice(1, levelMapList.length)" :key="index">
							<div class="itemIcon" :style="{ backgroundColor: item.color[0], borderColor: item.color[1] }"></div>
							<div class="itemName">
								{{ item.name }}
							</div>
						</div>
					</div>
				</template>
				<div class="panel1Body">
					<Echarts :option="mapOption" height="100%" @chart-ready="echarsReady"></Echarts>
					<div class="countryWrap">
						<div class="item" v-for="(item, index) in mapData" :key="index">
							<img :src="item.flag" alt="" class="itemIcon" />
							<div class="itemName">{{ item.name }}</div>
							<div class="itemNumber">{{ item.children.length }}个</div>
						</div>
					</div>
				</div>
			</CardCustom>
			<CardCustom
				@more-click="moreClick"
				title="安全速递"
				:style="{ width: '600px', height: '540px', marginLeft: '14px' }"
				title-background-color="rgba(206, 79, 81, 1)"
			>
				<template #icon>
					<div class="icon icon1"></div>
				</template>
				<div class="panel2">
					<div class="item" v-for="(item, index) in securityExpressList" :key="index">
						<span class="itemLevel" :class="levelMap[item.level].class">
							{{ levelMap[item.level].text }}
						</span>
						<div class="itemText">{{ item.title }}</div>
						<span class="itemTime">{{ item.time }}</span>
						<span class="itemFlag" :style="{ backgroundImage: 'url(' + item.flag + ')' }"></span>
					</div>
				</div>
			</CardCustom>
		</el-row>
		<el-card class="gap">
			<el-row>
				<PieProgress v-for="item in List" :data="item" />
			</el-row>
		</el-card>
		<el-row class="gap">
			<CardCustom
				@more-click="moreClick"
				title="科技动态"
				:style="{ width: '792px', height: '360px' }"
				title-background-color="var(--color-main-active)"
				line-color="var(--color-main-active)"
			>
				<template #icon>
					<div class="icon icon2"></div>
				</template>
				<div class="itemTrends" v-for="(item, index) in trendsList" :key="index">
					<span class="itemTrendsIcon"> </span>
					<div class="itemTrendsText">{{ item.title }}</div>
					<span class="itemTrendsTime">{{ item.time }}</span>
				</div>
			</CardCustom>
			<CardCustom
				@more-click="moreClick"
				title="科技政策"
				:style="{ width: '792px', height: '360px', marginLeft: '16px' }"
				title-background-color="var(--color-main-active)"
				line-color="var(--color-main-active)"
			>
				<template #icon>
					<div class="icon icon3"></div>
				</template>
				<div class="itemTrends" v-for="(item, index) in policyList" :key="index">
					<span class="itemTrendsIcon"> </span>
					<div class="itemTrendsText">{{ item.title }}</div>
					<span class="itemTrendsTime">{{ item.time }}</span>
				</div>
			</CardCustom>
		</el-row>
		<div class="gap">
			<el-row class="cardContainer">
				<div class="itemCard">
					<span class="itemCardIcon itemCardIcon1"></span>
					<div class="itemCardTitle">业务协同</div>
				</div>
				<div class="itemCard">
					<span class="itemCardIcon itemCardIcon2"></span>
					<div class="itemCardTitle">专题研判</div>
				</div>
				<div class="itemCard">
					<span class="itemCardIcon itemCardIcon3"></span>
					<div class="itemCardTitle">数据直报</div>
				</div>
				<div class="itemCard">
					<span class="itemCardIcon itemCardIcon4"></span>
					<div class="itemCardTitle">专家库</div>
				</div>
			</el-row>
		</div>
		<el-row class="gap">
			<CardCustom
				@more-click="moreClick"
				title="最新报告"
				:style="{ width: '1600px', height: '360px' }"
				title-background-color="var(--color-main-active)"
				line-color="var(--color-main-active)"
			>
				<template #icon>
					<div class="icon icon4"></div>
				</template>
				<template #right>
					<div class="moreWrap">
						<el-button text @click="moreClick" :style="{ marginLeft: '515px' }">
							<span class="moreText">更多</span>
							<el-icon :size="14"> <Plus /> </el-icon>
						</el-button>
						<el-button text @click="moreClick">
							<span class="moreText">换一批</span>
							<span class="shuaxinIcon"></span>
						</el-button>
					</div>
				</template>
				<el-row>
					<div :style="{ width: '750px' }">
						<div class="itemTrends" v-for="(item, index) in policyList" :key="index">
							<span class="itemTrendsIcon"> </span>
							<div class="itemTrendsText">{{ item.title }}</div>
							<span class="itemTrendsTime">{{ item.time }}</span>
						</div>
					</div>
					<div class="CardCustomRight">
						<div class="itemCard1" v-for="item in 3">
							<div class="itemCard1Img">
								<div class="itemCard1Footer">国内外技术创新合作模式探索与实践</div>
							</div>
						</div>
					</div>
				</el-row>
			</CardCustom>
		</el-row>
		<el-row class="gap spaceBetween">
			<el-card v-for="(item, index) in catdList" class="itemCard2" :key="index">
				<div class="itemCard2Line" :style="{ backgroundColor: item.bgColor }"></div>
				<div class="itemCard2Container">
					<div class="itemCard2BigTextWrap" :style="{ color: item.bgColor }">
						{{ item.title }}
					</div>
					<div class="itemCard2TextWrap" v-for="(itemText, inde) in item.list" :key="index">
						<div class="temCard2Title">{{ itemText.title }}</div>
						<div class="temCard2Text">{{ itemText.text }}</div>
					</div>
				</div>
			</el-card>
		</el-row>
	</div>
</template>

<script setup>
import CardCustom from "../components/CardCustom.vue";
import PieProgress from "../components/PieProgress.vue";
import Echarts from "@/components/Chart/index.vue";
import { getMapOption } from "../utils/charts";
import flag1 from "../assets/img/flag1.png";
import flag2 from "../assets/img/flag2.png";
import flag3 from "../assets/img/flag3.png";
import mapFlag1 from "../assets/img/mapFlag1.png";
import mapFlag2 from "../assets/img/mapFlag2.png";
import mapFlag3 from "../assets/img/mapFlag3.png";
import mapFlag4 from "../assets/img/mapFlag4.png";
import mapFlag5 from "../assets/img/mapFlag5.png";
import mapFlag6 from "../assets/img/mapFlag6.png";
import { ref } from "vue";

const levelMap = {
	L1: { text: "特别重大", class: "level1" },
	L2: { text: "重大风险", class: "level2" },
	L3: { text: "一般风险", class: "level3" }
};
const echarsReady = mycharts => {
	mycharts.on("click", function (params) {
		// 1. 判断点击的是否是geo组件
		if (params.componentType === "geo") {
			console.log("点击了地图区域:", params.name); // 可获取地区名称[citation:1]

			// 2. 获取鼠标点击的像素坐标
			// 注意：高版本ECharts中，event可能挂载在不同位置，建议用 params.event 获取[citation:5]
			const pixelPoint = [params.event.offsetX, params.event.offsetY];

			// 3. 关键：将像素坐标转换为地理坐标 (经度, 纬度)
			// 第一个参数 'geo' 指定坐标系，第二个参数是像素坐标数组[citation:9]
			const geoCoords = mycharts.convertFromPixel("geo", pixelPoint);

			console.log("对应的经纬度坐标:", geoCoords); // 输出格式如 [116.40, 39.90]
		}
	});
};

let mapData = [
	{
		name: "加拿大",
		flag: mapFlag1,
		children: [
			{
				value: 12,
				level: 1,
				name: "加拿大1",
				text: "",
				position: [-114.92625574436123, 60.97139707757613]
			},
			{
				value: 12,
				level: 1,
				name: "加拿大2",
				text: "",
				position: [-122.66033268519817, 64.94019971826877]
			},
			{
				value: 12,
				level: 1,
				name: "加拿大3",
				text: "",
				position: [-95.38753505172055, 65.24549222909128]
			}
		]
	},
	{
		name: "英国",
		flag: mapFlag2,
		children: [
			{
				value: 12,
				level: 1,
				name: "英国1",
				text: "",
				position: [-1.5492917852477053, 52.764489718498275]
			},
			{
				value: 12,
				level: 1,
				name: "英国2",
				text: "",
				position: [-2.698117404891553, 54.74388521180356]
			},
			{
				value: 12,
				level: 1,
				name: "英国3",
				text: "",
				position: [-0.6799102352469557, 53.90555300287426]
			},
			{
				value: 12,
				level: 1,
				name: "英国4",
				text: "",
				position: [0.46891538439689207, 52.83435073590905]
			},
			{
				value: 12,
				level: 1,
				name: "英国5",
				text: "",
				position: [-3.722745660249581, 53.13708181135574]
			},
			{
				value: 12,
				level: 1,
				name: "英国6",
				text: "",
				position: [-4.095337753107044, 51.99601852697975]
			}
		]
	},
	{
		name: "欧盟",
		flag: mapFlag3,
		children: [
			{
				value: 12,
				level: 1,
				name: "欧盟1",
				text: "",
				position: [11.724105556570102, 48.58464196103773]
			},
			{
				value: 12,
				level: 1,
				name: "欧盟2",
				text: "",
				position: [-0.7100210266255225, 44.00223755214452]
			},
			{
				value: 12,
				level: 1,
				name: "欧盟3",
				text: "",
				position: [-0.7100210266255225, 45.12774038941654]
			},
			{
				value: 12,
				level: 1,
				name: "欧盟4",
				text: "",
				position: [-0.8172117730323798, 47.459139123765716]
			},
			{
				value: 12,
				level: 5,
				name: "欧盟5",
				text: "",
				position: [0.14750494462934682, 49.147393379673744]
			},
			{
				value: 12,
				level: 5,
				name: "欧盟6",
				text: "",
				position: [2.3985106191733827, 50.3532892767509]
			},
			{
				value: 12,
				level: 5,
				name: "欧盟7",
				text: "",
				position: [4.542325547310561, 49.870930917920035]
			},
			{
				value: 12,
				level: 5,
				name: "欧盟8",
				text: "",
				position: [6.793331221854594, 48.906214200258304]
			},
			{
				value: 12,
				level: 1,
				name: "欧盟9",
				text: "",
				position: [9.901862867653499, 45.36891956883197]
			},
			{
				value: 13,
				level: 3,
				name: "欧盟10",
				text: "",
				position: [8.937146149991769, 46.97678076493485]
			},
			{
				value: 13,
				level: 3,
				name: "欧盟11",
				text: "",
				position: [10.545007346094657, 49.468965618894316]
			},
			{
				value: 13,
				level: 3,
				name: "欧盟12",
				text: "",
				position: [14.296683470334713, 49.468965618894316]
			},
			{
				value: 13,
				level: 3,
				name: "欧盟13",
				text: "",
				position: [12.79601302063869, 47.217959944350284]
			},
			{
				value: 13,
				level: 3,
				name: "欧盟14",
				text: "",
				position: [10.437816599687793, 48.58464196103773]
			},
			{
				value: 13,
				level: 3,
				name: "欧盟15",
				text: "",
				position: [10.652198092501514, 51.719971293438356]
			},
			{
				value: 13,
				level: 3,
				name: "欧盟16",
				text: "",
				position: [15.047018695182722, 49.79053785811488]
			},
			{
				value: 13,
				level: 3,
				name: "欧盟17",
				text: "",
				position: [10.759388838908372, 53.40822554934638]
			},
			{
				value: 13,
				level: 3,
				name: "欧盟18",
				text: "",
				position: [14.832637202369007, 48.42385584142743]
			}
		]
	},
	{
		name: "韩国",
		flag: mapFlag4,
		children: [
			{
				value: 40,
				level: 1,
				name: "韩国1",
				text: "",
				position: [127.6671802588885, 35.6152933447435]
			},
			{
				value: 40,
				level: 1,
				name: "韩国2",
				text: "",
				position: [127.6671802588885, 37.49854900651488]
			},
			{
				value: 40,
				level: 1,
				name: "韩国3",
				text: "",
				position: [128.92268403340273, 37.14543856993275]
			},
			{
				value: 40,
				level: 3,
				name: "韩国4",
				text: "",
				position: [128.92268403340273, 36.43921769676848]
			},
			{
				value: 40,
				level: 1,
				name: "韩国5",
				text: "",
				position: [128.13799417433134, 35.49758986588279]
			},
			{
				value: 40,
				level: 3,
				name: "韩国6",
				text: "",
				position: [127.10764322693156, 35.25464166802588]
			}
		]
	},
	{
		name: "日本",
		flag: mapFlag5,
		children: [
			{
				value: 40,
				level: 1,
				name: "日本1",
				text: "",
				position: [142.8374359085882, 43.947802361746696]
			},
			{
				value: 40,
				level: 1,
				name: "日本2",
				text: "",
				position: [141.18555679600132, 42.96971604508341]
			},
			{
				value: 40,
				level: 2,
				name: "日本3",
				text: "",
				position: [141.09861579007568, 41.14395492064528]
			},
			{
				value: 40,
				level: 2,
				name: "日本4",
				text: "",
				position: [141.09861579007568, 39.709428322872455]
			},
			{
				value: 40,
				level: 1,
				name: "日本5",
				text: "",
				position: [140.05532371896817, 38.7965477606534]
			},
			{
				value: 40,
				level: 5,
				name: "日本6",
				text: "",
				position: [139.96838271304256, 37.36202116288057]
			},
			{
				value: 40,
				level: 1,
				name: "日本7",
				text: "",
				position: [138.0556805826788, 36.44914060066151]
			},
			{
				value: 40,
				level: 5,
				name: "日本8",
				text: "",
				position: [136.49074247601754, 35.01461400288869]
			}
		]
	},
	{
		name: "美国",
		flag: mapFlag6,
		children: [
			{
				value: 40,
				level: 1,
				name: "美国1",
				text: "",
				position: [-120.95330892639737, 46.048538366525065]
			},
			{
				value: 40,
				level: 5,
				name: "美国2",
				text: "",
				position: [-117.06095626240344, 45.00594390295526]
			},
			{
				value: 40,
				level: 1,
				name: "美国3",
				text: "",
				position: [-119.56318297497097, 42.08667940495981]
			},
			{
				value: 40,
				level: 1,
				name: "美国4",
				text: "",
				position: [-119.56318297497097, 39.375933799678315]
			},
			{
				value: 40,
				level: 3,
				name: "美国5",
				text: "",
				position: [-118.72910740411513, 37.49926376525268]
			},
			{
				value: 40,
				level: 3,
				name: "美国6",
				text: "",
				position: [-115.67083031097702, 35.414074838113066]
			},
			{
				value: 40,
				level: 3,
				name: "美国7",
				text: "",
				position: [-109.55427612470085, 35.20555594539911]
			},
			{
				value: 40,
				level: 3,
				name: "美国8",
				text: "",
				position: [-104.2717975092805, 34.162961481829306]
			},
			{
				value: 40,
				level: 3,
				name: "美国9",
				text: "",
				position: [-101.21352041614242, 32.49481034011762]
			},
			{
				value: 40,
				level: 3,
				name: "美国10",
				text: "",
				position: [-98.71129370357488, 29.99258362755009]
			},
			{
				value: 40,
				level: 3,
				name: "美国11",
				text: "",
				position: [-96.48709218129264, 31.24369698383387]
			},
			{
				value: 40,
				level: 5,
				name: "美国12",
				text: "",
				position: [-92.31671432701341, 32.91184812554555]
			},
			{
				value: 40,
				level: 3,
				name: "美国13",
				text: "",
				position: [-95.93104180072207, 38.124820443394576]
			},
			{
				value: 40,
				level: 5,
				name: "美国14",
				text: "",
				position: [-100.93549522585714, 37.70778265796665]
			},
			{
				value: 40,
				level: 3,
				name: "美国15",
				text: "",
				position: [-105.38389827042164, 45.00594390295528]
			},
			{
				value: 40,
				level: 1,
				name: "美国16",
				text: "",
				position: [-92.87276470758401, 43.963349439385496]
			},
			{
				value: 40,
				level: 3,
				name: "美国17",
				text: "",
				position: [-89.53646242416063, 41.04408494139004]
			},
			{
				value: 40,
				level: 1,
				name: "美国18",
				text: "",
				position: [-81.75175709617281, 37.49926376525271]
			},
			{
				value: 40,
				level: 1,
				name: "美国19",
				text: "",
				position: [-83.4199082378845, 35.622593730827056]
			},
			{
				value: 40,
				level: 1,
				name: "美国20",
				text: "",
				position: [-88.70238685330483, 33.32888591097349]
			},
			{
				value: 40,
				level: 2,
				name: "美国21",
				text: "",
				position: [-75.63520290989662, 42.29519829767381]
			},
			{
				value: 40,
				level: 2,
				name: "美国22",
				text: "",
				position: [-74.80112733904078, 43.546311653957574]
			},
			{
				value: 40,
				level: 2,
				name: "美国23",
				text: "",
				position: [-72.85495100704381, 44.17186833209945]
			},
			{
				value: 40,
				level: 2,
				name: "美国24",
				text: "",
				position: [-69.79667391390572, 45.214462795669256]
			}
		]
	}
];
const levelMapList = [
	{},
	{
		name: "特别重大风险",
		color: ["rgba(255, 77, 79, 1)", "rgba(255, 163, 158, 1)"]
	},
	{
		name: "重大风险",
		color: ["rgba(255, 169, 64, 1)", "rgba(255, 213, 145, 1)"]
	},
	{
		name: "较大风险",
		color: ["rgba(250, 219, 20, 1)", "rgba(255, 251, 143, 1)"]
	},
	{
		name: "一般风险",
		color: ["rgba(64, 150, 255, 1)", "rgba(145, 202, 255, 1)"]
	},
	{
		name: "几乎无风险",
		color: ["rgba(54, 207, 201, 1)", "rgba(135, 232, 222, 1)"]
	}
];
const mapOption = getMapOption(mapData, levelMapList);

const securityExpressList = ref([
	{
		title: "美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实美国新增出口管制，52家中国科技实",
		level: "L1",
		time: "一天前",
		flag: flag1
	},
	{
		title: "美国加强对华AI芯片出口限制，考虑制...",
		level: "L1",
		time: "一天前",
		flag: flag1
	},
	{
		title: "日本出台《半导体材料出口管制令》...",
		level: "L1",
		time: "一天前",
		flag: flag2
	},
	{
		title: "日本对GAAFET技术、EUV光刻设备等...",
		level: "L1",
		time: "一天前",
		flag: flag2
	},
	{
		title: "欧盟签署协议限制高端AI芯片对华出口",
		level: "L2",
		time: "一天前",
		flag: flag3
	},
	{
		title: "欧盟第18轮制裁中首次将3家中资企业...",
		level: "L2",
		time: "一天前",
		flag: flag3
	},
	{
		title: "美国发布《保障信息和通信技术与服务...",
		level: "L2",
		time: "一天前",
		flag: flag1
	},
	{
		title: "日本将42家中国实体列入出口管制“...",
		level: "L3",
		time: "一天前",
		flag: flag2
	},
	{
		title: "美国政府放慢向英伟达和超威等芯片...",
		level: "L3",
		time: "一天前",
		flag: flag1
	},
	{
		title: "七国集团成员国就人工智能发表了以...",
		level: "L3",
		time: "一天前",
		flag: flag3
	}
]);

const trendsList = ref([
	{
		title: "韩研制用于存内计算的小型低功耗神经形态模块",
		time: "08-16"
	},
	{
		title: "中国科学院大学等在有机太阳能电池领域取得重要突破",
		time: "08-16"
	},
	{
		title: "德国于利希研究中心成功制造并实验验证全球首个二维半金属材料",
		time: "08-16"
	},
	{
		title: "浙江大学开发“女娲”AI模型，精准预测基因组调控序列",
		time: "08-16"
	},
	{
		title: "我国基于碳量子点材料制备出高效低成本有机太阳能电池",
		time: "08-16"
	},
	{
		title: "谷歌Gemini 2.5系列模型更新，实现高速推理与极致性价比",
		time: "08-16"
	},
	{
		title: "上海理工大学联合杜克大学在AI赋能仿生视觉技术领域实现突破",
		time: "08-16"
	}
]);
const policyList = ref([
	{
		title: "美国发布《2025财年国防授权法案》，拨款替换华为、中兴设备；禁止国防...",
		time: "08-16"
	},
	{
		title: "美国发布对华投资限制新规，限制美资在半导体、AI、量子技术等领域的对...",
		time: "08-16"
	},
	{
		title: "欧盟发布《网络弹性法案》（CRA），要求数字产品全生命周期安全合规，...",
		time: "08-16"
	},
	{
		title: "欧盟发布对外投资审查建议，要求成员国审查在半导体、AI、量子技术等领...",
		time: "08-16"
	},
	{
		title: "日本出台《半导体出口管制修正》加强对十余种半导体相关物项的出口管制...",
		time: "08-16"
	},
	{
		title: "日本拟出台“许可制”，限制外国留学生（特别提及中国）学习半导体、机...",
		time: "08-16"
	},
	{
		title: "日本通过并实施《经济安全保障推进法案》相关措施",
		time: "08-16"
	}
]);
const List = ref([
	{
		title: "当月/总数",
		titleSub: "较上月+4",
		progress: 90,
		slope: "add",
		total: 8,
		current: 7
	},
	{
		title: "人工智能",
		titleSub: "较上月+4",
		progress: 50,
		slope: "add",
		total: 26,
		current: 3
	},
	{
		title: "生物技术",
		titleSub: "较上月+4",
		progress: 60,
		slope: "add",
		total: 13,
		current: 3
	},
	{
		title: "航空航天",
		titleSub: "较上月+4",
		progress: 40,
		slope: "add",
		total: 15,
		current: 3
	},
	{
		title: "新一代信息技术",
		titleSub: "较上月+4",
		progress: 50,
		slope: "add",
		total: 12,
		current: 3
	},
	{
		title: "量子科技",
		titleSub: "较上月+4",
		progress: 20,
		slope: "add",
		total: 8,
		current: 3
	},
	{
		title: "新能源",
		titleSub: "较上月+4",
		progress: 90,
		slope: "add",
		total: 18,
		current: 3
	},
	{
		title: "集成电路",
		titleSub: "较上月+4",
		progress: 20,
		slope: "add",
		total: 16,
		current: 3
	},
	{
		title: "海洋",
		titleSub: "较上月+4",
		progress: 50,
		slope: "add",
		total: 8,
		current: 3
	},
	{
		title: "先进制造",
		titleSub: "较上月+4",
		progress: 50,
		slope: "add",
		total: 15,
		current: 3
	},
	{
		title: "新材料",
		titleSub: "较上月+4",
		progress: 50,
		slope: "add",
		total: 8,
		current: 3
	}
]);
const catdList = ref([
	{
		title: "数据资源管理",
		bgColor: "rgba(206, 79, 81, 1)",
		list: [
			{
				title: "数据资源目录",
				text: "平台各类数据资源汇总导航"
			},
			{
				title: "数据统计分析",
				text: "查看资源发布量、各部门资源注册情况"
			},
			{
				title: "信息空间",
				text: "对数据资源的全生命周期进行管理"
			}
		]
	},
	{
		title: "信息发布与管理",
		bgColor: "rgba(19, 168, 168, 1)",
		list: [
			{
				title: "信息编辑",
				text: "信息的内容导入、格式编辑"
			},
			{
				title: "信息审核",
				text: "发布前内容自动审核、词库屏蔽"
			},
			{
				title: "信息发布",
				text: "提供点到点以及点到面的消息发送"
			}
		]
	},
	{
		title: "应用支撑平台",
		bgColor: "rgba(250, 140, 22, 1)",
		list: [
			{
				title: "应用功能目录",
				text: "快速访问和使用系统功能"
			},
			{
				title: "应用工具目录",
				text: "各项应用工具的使用方法和应用场景"
			},
			{
				title: "应用功能与工具管理",
				text: "实现功能及工具快捷访问配置入口"
			}
		]
	},
	{
		title: "后台服务管理",
		bgColor: "var(--color-main-active)",
		list: [
			{
				title: "界面配置管理",
				text: "支持界面布局、样式定制化修改"
			},
			{
				title: "数据接口管理",
				text: "实现数据接口的访问调用、权限控制等"
			},
			{
				title: "系统配置管理",
				text: "支持各分系统配置的定制与调整"
			}
		]
	}
]);
function moreClick(n) {
	alert(n);
}
</script>

<style lang="scss" scoped>
.wrap {
	width: 1600px;
	margin: 30px auto;
}
.gap {
	margin-top: 24px;
}
.icon {
	width: 24px;
	height: 22px;
	background-size: contain;
	background-repeat: no-repeat;
}
.icon1 {
	background-image: url("../assets/img/icon1.png");
}
.icon2 {
	background-image: url("../assets/img/icon2.png");
}
.icon3 {
	background-image: url("../assets/img/icon3.png");
}
.icon4 {
	background-image: url("../assets/img/icon4.png");
}
.panel1Header {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-right: 27px;
	.item {
		display: flex;
		align-items: center;
		gap: 12px;
		.itemIcon {
			width: 12px;
			height: 12px;
			border-radius: 6px;
			border-width: 2px;
			border-style: solid;
		}
		.itemName {
			color: rgba(59, 65, 75, 1);
			font-size: 16px;
			font-weight: 400;
			line-height: 24px;
		}
	}
}
.panel1Body {
	position: relative;
	height: 100%;
	.countryWrap {
		position: absolute;
		bottom: 8px;
		left: 0;
		right: 0;
		width: 782px;
		margin: 0 auto;
		display: flex;
		gap: 10px;
		overflow-x: auto;
		.item {
			display: flex;
			align-items: center;
			height: 42px;
			border: 1px solid rgba(231, 243, 255, 1);
			border-radius: 21px;
			background: rgba(255, 255, 255, 0.8);
			color: rgba(5, 95, 194, 1);
			font-size: 16px;
			font-weight: 700;
			line-height: 24px;
			padding-left: 12px;
			padding-right: 12px;
			flex-shrink: 0;
			.itemIcon {
				width: 24px;
				height: 24px;
				margin-right: 10px;
			}
			.itemName {
			}
			.itemNumber {
			}
		}
	}
}
.panel2 {
	height: 100%;
	display: flex;
	flex-direction: column;
	.item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 7px;
		.itemLevel {
			width: 40px;
			height: 40px;
			border-radius: 20px;
			font-family: Microsoft YaHei;
			font-size: 12px;
			font-weight: 400;
			line-height: 14px;
			padding: 6px 4px;
			text-align: center;
			margin-right: 5px;
		}
		.itemTime {
			color: rgba(132, 136, 142, 1);
		}
		.itemFlag {
			width: 20px;
			height: 20px;
			background-size: cover;
			background-repeat: no-repeat;
			margin-left: 10px;
		}
	}
}

.itemTrends {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 20px;
}
.itemTrendsIcon {
	width: 4px;
	height: 4px;
	background-color: rgba(206, 79, 81, 1);
	border-radius: 50%;
	margin-right: 14px;
	margin-left: 20px;
}
.itemTrendsText {
	flex: 1;
}
.itemTrendsTime {
	margin-right: 6px;
}
.level1 {
	background: rgb(255, 241, 240);
	color: rgb(245, 34, 45);
}
.level2 {
	color: rgb(250, 140, 22);
	background: rgb(255, 247, 230);
}
.level3 {
	color: rgb(82, 196, 26);
	background: rgb(246, 255, 237);
}
.itemText {
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cardContainer {
	justify-content: space-between;
}
.itemCardWrap {
	width: 400px;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.itemCard {
	width: 388px;
	height: 80px;
	border-radius: 4px;
	background-image: url("../assets/img/cardBg.png");
	background-size: cover;
	display: flex;
	justify-content: center;
	align-items: center;
	.itemCardIcon {
		width: 30px;
		height: 30px;
		background-size: contain;
		margin-right: 7px;
	}
	.itemCardIcon1 {
		background-image: url("../assets/img/cardIcon1.png");
	}
	.itemCardIcon2 {
		background-image: url("../assets/img/cardIcon2.png");
	}
	.itemCardIcon3 {
		background-image: url("../assets/img/cardIcon3.png");
	}
	.itemCardIcon4 {
		background-image: url("../assets/img/cardIcon4.png");
	}
	.itemCardTitle {
		font-size: 24px;
		font-weight: 700;
		color: #ffffff;
	}
}
.moreWrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 16px;
	height: 100%;
	padding-left: 10px;
	padding-right: 10px;
	flex: 1;
	.moreText {
		margin-right: 3px;
	}
	.shuaxinIcon {
		width: 16px;
		height: 16px;
		background-image: url("../assets/img/shuaxin.png");
		background-size: contain;
	}
}
.CardCustomRight {
	flex: 1;
	padding-left: 50px;
	padding-right: 50px;
	margin-left: 30px;
	display: flex;
	justify-content: space-between;
}
.itemCard1 {
	.itemCard1Img {
		position: relative;
		width: 204px;
		height: 266px;
		background-image: url("../assets/img/book.png");
		background-size: contain;
		.itemCard1Footer {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 204px;
			height: 64px;
			padding: 10px;
			background-color: #000;
			color: #fff;
		}
	}
}
.spaceBetween {
	justify-content: space-between;
}
.itemCard2 {
	width: 388px;
	height: 360px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	:deep(.el-card__body) {
		padding-top: 0;
	}
	.itemCard2Line {
		/* 矩形 214 */
		width: 320px;
		height: 4px;
		background-color: rgba(206, 79, 81, 1);
		position: absolute;
		top: 0;
		left: 34px;
	}
	.itemCard2Container {
		width: 320px;
		height: 360px;
		.itemCard2BigTextWrap {
			color: rgba(206, 79, 81, 1);
			font-size: 24px;
			font-weight: 700;
			height: 83px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			border-bottom: 1px solid #ddd;
		}
		.itemCard2TextWrap {
			height: 83px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			border-bottom: 1px solid #ddd;
		}
		.temCard2Title {
			color: rgba(59, 65, 75, 1);
			font-size: 20px;
			font-weight: 700;
		}
		.temCard2Text {
			color: rgba(95, 101, 108, 1);
			font-size: 16px;
			font-weight: 400;
		}
	}
}
</style>
