<!--科技要闻-->
<template>
	<div class="content-wrapper">
		<!-- 轮播栏目 -->
		<div class="carousel-list">
			<img src="./assets/leftbtn.png" alt class="left-btn" @click="changeIndex(-1)" />
			<div class="content">
				<div class="carousel-item" v-for="item in carouselList">
					<div class="item-top">
						<div class="top-img">
							<img :src="ele.img" :class="{img1: index !== 0}" alt v-for="(ele, index) in item.imgList" />
						</div>
						<div class="top-num">{{ item.num }}次</div>
					</div>
					<div class="item-title">{{ item.name }}</div>

					<div class="type">
						<div class="type-item" :class="getClassName(ele)" v-for="ele in item.area">{{ ele }}</div>
					</div>
				</div>
			</div>
			<img src="./assets/rightbtn.png" alt class="right-btn" @click="changeIndex(1)" />
		</div>

		<!-- 排华联盟分布 -->
		<div class="anti-china">
			<div class="anti-title">
				<div class="title-left">
					<img src="./assets/union.png" alt />
					<div class="left-title">排华联盟分布情况</div>
				</div>
				<div class="title-right">
					<div class="right-num" :class="{click: currentAntiType === 'num'}">排华联盟数量</div>
					<div class="right-num" :class="{click: currentAntiType === 'active'}">排华联盟动态</div>
				</div>
			</div>

			<div class="anti-content">
				<div class="content-left">
					<div class="item" v-for="item in antiChinaNum">
						<div class="item-left">
							<img :src="item.img" alt />
							<span>{{ item.name }}</span>
						</div>
						<div class="item-right">{{ item.value }}个</div>
					</div>
				</div>

				<div class="content-right" id="echartsMap"></div>
			</div>
		</div>

		<!-- 排华联盟最新动态和预警 -->
		<div class="anti-news">
			<div class="news">
				<div class="news-title">
					<img src="./assets/news.png" alt />
					<span>排华联盟最新动态</span>
				</div>
				<div class="news-content">
					<div class="item" v-for="item in newsList">
						<div class="item-title">
							<img :src="item.img" alt />
							<span>{{ item.title }}</span>
						</div>
						<div class="item-content">{{ item.content }}</div>
						<div class="item-bottom">
							<div class="bottom-left">
								<div class="left-item" :class="getClassName(ele)" v-for="ele in item.area">
									<span>{{ ele }}</span>
								</div>
							</div>
							<div class="bottom-right">{{ item.time }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="warning">
				<div class="warning-title">
					<img src="./assets/warning.png" alt />
					<span>新增排华联盟预警</span>
				</div>
				<div class="warning-content">
					<div class="content-item" v-for="item in warningList">
						<div class="item-title">
							<div class="title-left">
								<div class="img-list">
									<img
										:src="ele.img"
										:class="{img1: index !== 0}"
										alt
										v-for="(ele, index) in item.countries"
									/>
								</div>
								<div class="left-content">{{ getContent(item.countries) }}</div>
							</div>
							<div class="title-right">{{ item.num }}次合作</div>
						</div>
						<div class="item-content">
							<div class="content-list" v-for="ele in item.area">
								<div class="list-left" :class="getClassName(ele.type)">
									<span>{{ ele.type }}</span>
								</div>
								<div class="list-content">{{ ele.content }}</div>
								<div class="list-time">{{ ele.time }}</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- bottom -->
		<div class="anti-area">
			<div class="area-left">
				<div class="left-title">
					<img src="./assets/union.png" alt />
					<span>排华联盟领域分布</span>
				</div>
				<div class="left-content" ref="leftChartRef"></div>
			</div>
			<div class="area-right">
				<div class="right-title">
					<img src="./assets/circle1.png" alt />
					<span>排华联盟国家紧密度</span>
				</div>
				<div class="right-content" ref="rightChartRef"></div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, ref, computed } from "vue";
import * as echarts from "echarts";

const carouselList = ref([
  {
    name: '芯片四方联盟',
    num: 21,
    area: ['人工智能'],
    imgList: [
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
    ]
  },
  {
    name: '芯片四方联盟',
    num: 21,
    area: ['人工智能'],
    imgList: [
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
    ]
  },
  {
    name: '芯片四方联盟',
    num: 21,
    area: ['人工智能'],
    imgList: [
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
    ]
  },
  {
    name: '芯片四方联盟',
    num: 21,
    area: ['人工智能'],
    imgList: [
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
    ]
  },
  {
    name: '芯片四方联盟',
    num: 21,
    area: ['人工智能', '集成电路'],
    imgList: [
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
      },
    ]
  },
  // {
  //   name: '芯片四方联盟',
  //   num: 21,
  //   area: ['人工智能'],
  //   imgList: [
  //     {
  //       img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
  //     },
  //     {
  //       img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
  //     },
  //     {
  //       img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
  //     },
  //     {
  //       img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
  //     },
  //     {
  //       img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
  //     },
  //     {
  //       img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png'
  //     },
  //   ]
  // },
])

const getClassName = (type) => {
  let className = ''
  switch (type) {
    case '人工智能':
      className = 'ai'
      break
    case '新材料':
      className = 'material'
      break
    case '量子科技':
      className = 'technology'
      break
    case '生物科技':
      className = 'organism'
      break
    case '航空航天':
      className = 'aerospace'
      break
    case '能源':
      className = 'energy'
      break
    case '集成电路':
      className = 'integrated'
      break
    default:
      className = 'other'
  }

  return className
}

const currentAntiType = ref('num')

const antiChinaNum = ref([
  {
    name: '美国',
    value: 24,
    img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
  },
  {
    name: '欧盟',
    value: 18,
    img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
  },
  {
    name: '日本',
    value: 13,
    img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
  },
  {
    name: '韩国',
    value: 13,
    img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
  },
  {
    name: '英国',
    value: 9,
    img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
  },
  {
    name: '加拿大',
    value: 6,
    img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
  },
  {
    name: '澳大利亚',
    value: 5,
    img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
  },
  {
    name: '菲律宾',
    value: 3,
    img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
  },
  {
    name: '新西兰',
    value: 3,
    img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
  },
  {
    name: '印度',
    value: 2,
    img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/us.png'
  }
])

const chartDom = ref()
const myChart = ref()
function createChart() {
  const option = {
    geo: {
      map: 'world',
      roam: true,
      label: {
        show: false,
        color: '#555'
      },
      itemStyle: {
        areaColor: '#f5f5f5', // 所有区域的默认底色
        borderColor: '#ccc'    // 边界线颜色
      }
    },
    tooltip: {},
    visualMap: [],
    series: [
      {
        type: 'scatter',
        coordinateSystem: 'geo',
        geoIndex: 0,
        encode: {
          tooltip: 2,
          label: 2
        },
        data: [],
        itemStyle: {
          color: 'rgb(130, 175, 224)',
          borderWidth: 1,
          borderColor: '#3c7865'
        }
      },
      {
        type: 'map',
        geoIndex: 0,
        map: '',
        data: []
      }
    ]
  };
  myChart.value.setOption(option);
}
function fetchGeoJSON() {
  chartDom.value = document.getElementById('echartsMap')
  myChart.value = echarts.init(chartDom.value)
  myChart.value.showLoading();
  fetch('/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/world.json').then((res) => res.json()).then((result) => {
    echarts.registerMap('world', result);
    createChart();
    myChart.value.hideLoading();
  })
}


const newsList = ref([
  {
    img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
    title: '芯片四方联盟: 发布新版管制清单',
    content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...',
    area: ['新材料', '集成电路'],
    time: '2025年12月18日'
  },
  {
    img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
    title: '芯片四方联盟: 发布新版管制清单',
    content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...',
    area: ['新材料', '集成电路'],
    time: '2025年12月18日'
  },
  {
    img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
    title: '芯片四方联盟: 发布新版管制清单',
    content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...',
    area: ['新材料', '集成电路'],
    time: '2025年12月18日'
  },
  {
    img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
    title: '芯片四方联盟: 发布新版管制清单',
    content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...',
    area: ['新材料', '集成电路'],
    time: '2025年12月18日'
  },
  {
    img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
    title: '芯片四方联盟: 发布新版管制清单',
    content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...',
    area: ['新材料', '集成电路'],
    time: '2025年12月18日'
  },
  {
    img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
    title: '芯片四方联盟: 发布新版管制清单',
    content: '2026财年国防授权法案（NDAA）已于2025年12月18日由美国总统特朗普...',
    area: ['新材料', '集成电路'],
    time: '2025年12月18日'
  }
])

const warningList = ref([
  {
    countries: [
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
        name: '美国'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
        name: '美国'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
        name: '美国'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
        name: '美国'
      }
    ],
    area: [
      {
        type: '人工智能',
        content: '推出“数字基础设施增长计划框架”（DiGi Framework）',
        time: '2024年11月21日'
      },
      {
        type: '人工智能',
        content: '推出“数字基础设施增长计划框架”（DiGi Framework）',
        time: '2024年11月21日'
      },
      {
        type: '人工智能',
        content: '推出“数字基础设施增长计划框架”（DiGi Framework）',
        time: '2024年11月21日'
      }
    ],
    num: 3
  },
  {
    countries: [
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
        name: '美国'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
        name: '美国'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
        name: '美国'
      },
      {
        img: '/src/views/ZMOverView/components/fourSuppress/components/allUnion/assets/usa.png',
        name: '美国'
      }
    ],
    area: [
      {
        type: '人工智能',
        content: '推出“数字基础设施增长计划框架”（DiGi Framework）',
        time: '2024年11月21日'
      }
    ],
    num: 1
  }
])

const getContent = (countries) => {
  let result = '' // 美国 / 日本 / 韩国 / 印度
  for (let i = 0; i < countries.length; i++) {
    result += countries[i].name
    if (i !== countries.length - 1) {
      result += ' / '
    }
  }
  return result
}

const leftChartRef = ref(null);
let leftChart;
const rightChartRef = ref(null);
let rightChart;

const initLeftDonut = async () => {
  if (!leftChartRef.value) return;
  if (leftChart) leftChart.dispose();
  leftChart = echarts.init(leftChartRef.value);
  // let data = []

  // try {
  //   const params = {
  //     year: value1.value
  //   }
  //   const res = await getAreaDistribution(params);
  //   if (res && res.code === 200) {
  //     console.log('----getAreaDistribution', res.data)
  //     for (let i = 0; i < res.data.length; i++) {
  //       let item = {
  //         name: '',
  //         value: 0
  //       }

  //       item.name = res.data[i].AREANAME
  //       item.value = res.data[i].AREACOUNT
  //       item.itemStyle = {
  //         color: getColor(colors, item.name)
  //       }
  //       data.push(item)
  //     }
  //   }
  // } catch (error) {
  //   console.error("获取限制领域分布情况接口失败:", error);
  // }
  // // console.log('----data', data)
  const data = [
    { name: "集成电路", value: 50 },
    { name: "人工智能", value: 46 },
    { name: "通信网络", value: 40 },
    { name: "能源", value: 32 },
    { name: "先进制造", value: 31 },
    { name: "生物科技", value: 31 },
    { name: "航空航天", value: 30 },
    { name: "新材料", value: 24 }
  ];

  const option = {
    tooltip: { trigger: "item", formatter: ({ name, value, percent }) => `${name}<br/>${value}项 ${percent}%` },
    series: [{
      type: "pie",
      radius: [96, 120],
      center: ["50%", "50%"],
      avoidLabelOverlap: true,
      itemStyle: { borderWidth: 0 },
      label: {
        show: true,
        position: "outside",
        alignTo: 'edge',
        formatter: ({ name, value, percent }) => `{name|${name}}  {value|${value}项}  {percent|${percent}%}`,
        minMargin: 5,
        edgeDistance: 10,
        lineHeight: 15,
        rich: {
          name: { fontSize: 16, fontFamily: "Microsoft YaHei", fontWeight: 700, lineHeight: 24, color: "rgb(59, 65, 75)" },
          value: { fontSize: 14, fontFamily: "Microsoft YaHei", fontWeight: 400, lineHeight: 22, color: "rgb(95, 101, 108)" },
          percent: { fontSize: 14, fontFamily: "Microsoft YaHei", fontWeight: 400, lineHeight: 22, color: "rgb(95, 101, 108)" }
        }
      },
      labelLine: {
        show: true,
        length: 30,
        length2: 0,
        maxSurfaceAngle: 80
      },
      labelLayout: function (params) {
        const isLeft = params.labelRect.x < leftChart.getWidth() / 2;
        const points = params.labelLinePoints;
        // 导航线终点在标签下方
        const lineY = params.labelRect.y + params.labelRect.height;
        points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width;
        points[2][1] = lineY;
        points[1][1] = lineY;
        return {
          labelLinePoints: points
        };
      },
      data: data.map((d, i) => ({
        ...d,
        labelLine: { lineStyle: { color: getColor(colors, d.name), width: 1 } }
      }))
    }]
  };
  leftChart.setOption(option);
};

const initRightDonut = async () => {
  if (!rightChartRef.value) return;
  if (rightChart) rightChart.dispose();
  rightChart = echarts.init(rightChartRef.value);
  // let data = []

  // try {
  //   const params = {
  //     year: value1.value
  //   }
  //   const res = await getAreaDistribution(params);
  //   if (res && res.code === 200) {
  //     console.log('----getAreaDistribution', res.data)
  //     for (let i = 0; i < res.data.length; i++) {
  //       let item = {
  //         name: '',
  //         value: 0
  //       }

  //       item.name = res.data[i].AREANAME
  //       item.value = res.data[i].AREACOUNT
  //       item.itemStyle = {
  //         color: getColor(colors, item.name)
  //       }
  //       data.push(item)
  //     }
  //   }
  // } catch (error) {
  //   console.error("获取限制领域分布情况接口失败:", error);
  // }
  // // console.log('----data', data)
  const data = [
    {
      name: 'Node 1',
      x: 300,
      y: 300
    },
    {
      name: 'Node 2',
      x: 800,
      y: 300
    },
    {
      name: 'Node 3',
      x: 550,
      y: 100
    },
    {
      name: 'Node 4',
      x: 550,
      y: 500
    }
  ]
  const links = [
    {
      source: 0,
      target: 1,
      symbolSize: [5, 20],
      label: {
        show: false
      },
      lineStyle: {
        width: 5,
        curveness: 0.2
      }
    },
    {
      source: 'Node 2',
      target: 'Node 1',
      label: {
        show: false
      },
      lineStyle: {
        curveness: 0.2
      }
    },
    {
      source: 'Node 1',
      target: 'Node 3'
    },
    {
      source: 'Node 2',
      target: 'Node 3'
    },
    {
      source: 'Node 2',
      target: 'Node 4'
    },
    {
      source: 'Node 1',
      target: 'Node 4'
    }
  ]

  let option = {
    title: {
      // text: 'Basic Graph'
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [
      {
        type: 'graph',
        layout: 'none',
        symbolSize: 50,
        roam: true,
        label: {
          show: true
        },
        edgeSymbol: ['circle', ''],
        edgeSymbolSize: [4, 10],
        edgeLabel: {
          fontSize: 20
        },
        data: data,
        // links: [],
        links: links,
        lineStyle: {
          opacity: 0.9,
          width: 2,
          curveness: 0
        }
      }
    ]
  };
  rightChart.setOption(option);
};

const getColor = (colors, name) => {
  const index = colors.findIndex((i) => i.name === name)
  if (index !== -1) {
    return colors[index].value
  } else {
    return "rgba(105, 177, 255, 1)"
  }
}

const colors = [
  {
    name: '集成电路',
    value: "rgba(105, 177, 255, 1)",
  },
  {
    name: '新一代通信网络',
    value: "rgba(135, 232, 222, 1)",
  },
  {
    name: '人工智能',
    value: "rgba(255, 192, 105, 1)",
  },
  {
    name: '能源',
    value: "rgba(89, 126, 247, 1)",
  },
  {
    name: '先进制造',
    value: "rgba(214, 228, 255, 1)",
  },
  {
    name: '生物科技',
    value: "rgba(255, 120, 117, 1)",
  },
  {
    name: '航空航天',
    value: "rgba(179, 127, 235, 1)",
  },
  {
    name: '新材料',
    value: "rgba(255, 163, 158, 1)",
  }
];

onMounted(() => {
  fetchGeoJSON();
  initLeftDonut()
  initRightDonut()
})

</script>

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

	// 领域样式
	// 人工智能
	.ai {
		border: 1px solid rgba(255, 163, 158, 1);
		background: rgba(255, 241, 240, 1);
    color: rgba(245, 34, 45, 1);
	}
	// 新材料
	.material {
		border: 1px solid rgba(135, 232, 222, 1);
		background: rgba(230, 255, 251, 1);
    color: rgba(19, 168, 168, 1);
	}
	// 量子科技
	.technology {
		border: 1px solid rgba(211, 173, 247, 1);
		background: rgba(249, 240, 255, 1);
    color: rgba(114, 46, 209, 1);
	}
	// 生物科技
	.organism {
		border: 1px solid rgba(145, 202, 255, 1);
		background: rgba(230, 244, 255, 1);
    color: rgba(22, 119, 255, 1);
	}
	// 航空航天
	.aerospace {
		border: 1px solid rgba(173, 198, 255, 1);
		background: rgba(240, 245, 255, 1);
    color: rgba(22, 119, 255, 1);
	}
	// 能源
	.energy {
		border: 1px solid rgba(217, 247, 190, 1);
		background: rgba(246, 255, 237, 1);
    color: rgba(56, 158, 13, 1);
	}
	// 集成电路
	.integrated {
		border: 1px solid rgba(186, 224, 255, 1);
		background: rgba(230, 244, 255, 1);
    color: rgba(9, 88, 217, 1);
	}
	// 其他
	.other {
		border: 1px solid rgba(186, 224, 255, 1);
		background: rgba(230, 244, 255, 1);
    color: rgba(9, 88, 217, 1);
	}

	.carousel-list {
		width: 1666px;
		height: 178px;
		margin-top: 16px;
		display: flex;
		align-items: center;
		.content {
			width: calc(100% - 48px - 16px);
			display: flex;
			align-items: center;
			justify-content: space-around;

			.carousel-item {
				width: 307px;
				height: 178px;
				// margin-right: 16px;
				box-sizing: border-box;
				background: rgba(255, 255, 255, 0.65);
				border-radius: 10px;
				border: 1px solid rgba(255, 255, 255, 1);

				.item-top {
					width: 100%;
					height: 48px;
					padding: 15px 22px 9px 25px;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.top-img {
						display: flex;
						align-items: center;

						img {
							width: 24px;
							height: 24px;
						}
						.img1 {
							margin-left: -8px;
						}
					}

					.top-num {
						font-family: YouSheBiaoTiHei;
						font-style: Regular;
						font-size: 30px;
						font-weight: 400;
						line-height: 39px;
						letter-spacing: 0px;
						text-align: right;
						color: rgba(5, 95, 194, 1);
					}
				}

				.item-title {
					margin-left: 25px;
					font-family: YouSheBiaoTiHei;
					font-style: Regular;
					font-size: 24px;
					font-weight: 400;
					line-height: 31px;
					letter-spacing: 0px;
					text-align: left;
					color: rgba(59, 65, 75, 1);
				}

				.type {
					margin-left: 22px;
					margin-top: 51px;

					.type-item {
						display: inline-block;
						border-radius: 4px;
						padding: 2px 8px;
						font-size: 14px;
						font-weight: 400;
						font-family: "Microsoft YaHei";
						margin-left: 8px;
					}
				}
			}
		}
		.left-btn {
			width: 24px;
			height: 48px;
			margin-right: 8px;
		}
		.right-btn {
			width: 24px;
			height: 48px;
			margin-left: 8px;
		}
	}

	.anti-china {
		margin-top: 16px;
		margin-left: 33px;
		width: 1601px;
		height: 700px;
		background: rgba(255, 255, 255, 1);

		.anti-title {
			width: 100%;
			height: 48px;
			padding-left: 19px;
			padding-right: 43px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.title-left {
				display: flex;
				align-items: center;
				img {
					width: 17px;
					height: 17px;
					margin-right: 8px;
				}

				.left-title {
					font-family: YouSheBiaoTiHei;
					font-size: 24px;
					font-weight: 400;
					line-height: 31px;
					letter-spacing: 0px;
					text-align: left;
					color: rgba(5, 95, 194, 1);
				}
			}

			.title-right {
				display: flex;
				align-items: center;
				justify-content: center;

				.right-num {
					/* 切换按钮 */
					width: 120px;
					height: 32px;
					/* 自动布局 */
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					margin-right: 8px;
					border-radius: 4px;
					border: 1px solid rgba(230, 231, 232, 1);
					color: rgb(95, 101, 108);
					background: rgba(255, 255, 255, 1);
				}

				.click {
					border: 1px solid rgba(5, 95, 194, 1);
					color: rgb(5, 95, 194);
					background: rgba(231, 243, 255, 1);
				}
			}
		}

		.anti-content {
			width: 100%;
			height: calc(100% - 48px);
			display: flex;

			.content-left {
				width: 197px;
				margin-left: 38px;
				margin-top: 55px;
				margin-bottom: 55px;
				overflow-y: auto;
				display: flex;
				flex-direction: column;

				.item {
					/* 容器 493 */
					width: 100%;
					height: 38px;
					/* 自动布局 */
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					padding: 4px 12px 4px 12px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 50px;
					/* 业务系统/模态背景模糊 */
					backdrop-filter: blur(30px);
					background: rgba(255, 255, 255, 0.65);
					margin-bottom: 16px;

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

						img {
							width: 16px;
							height: 16px;
							margin-right: 8px;
						}
						span {
							color: rgba(5, 95, 194, 1);
							font-family: Microsoft YaHei;
							font-style: Bold;
							font-size: 16px;
							font-weight: 700;
							line-height: 30px;
							letter-spacing: 0px;
							text-align: left;
						}
					}

					.item-right {
						color: rgba(5, 95, 194, 1);
						font-family: Microsoft YaHei;
						font-style: Bold;
						font-size: 16px;
						font-weight: 700;
						line-height: 30px;
						letter-spacing: 0px;
						text-align: left;
					}
				}
			}

			.content-right {
				width: calc(100% - 197px - 38px - 16px - 45px);
				height: calc(100% - 20px - 20px);
				// background: red;
				margin-left: 16px;
				margin-right: 45px;
				margin-bottom: 20px;
				margin-top: 20px;
			}
		}
	}

	.anti-news {
		margin-top: 16px;
		margin-left: 33px;
		width: 1601px;
		height: 700px;
		background: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		justify-content: space-between;

		.news {
			box-sizing: border-box;
			border: 1px solid rgba(255, 255, 255, 1);
			border-radius: 10px;
			/* 业务系统/模块阴影 */
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background: rgba(255, 255, 255, 0.65);
			width: 793px;
			height: 700px;

			.news-title {
				width: 100%;
				height: 48px;
				display: flex;
				align-items: center;
				// justify-content: center;

				img {
					width: 22px;
					height: 18px;
					margin-right: 15px;
					margin-left: 16px;
				}

				span {
					color: rgba(5, 95, 194, 1);
					font-family: YouSheBiaoTiHei;
					font-style: Regular;
					font-size: 24px;
					font-weight: 400;
					line-height: 31px;
					letter-spacing: 0px;
					text-align: left;
				}
			}

			.news-content {
				width: 100%;
				height: calc(100% - 48px);
				padding: 4px 28px 25px 27px;
				overflow-y: auto;

				.item {
					width: 100%;
					height: 126px;
					padding: 16px 0px;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					box-sizing: border-box;
					border-bottom: 1px solid rgba(234, 236, 238, 1);
					background: rgba(255, 255, 255, 0.65);

					.item-title {
						width: 100%;
						height: 30px;
						display: flex;
						align-items: center;

						img {
							width: 20px;
							height: 20px;
							margin-right: 5px;
						}

						span {
							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;
						}
					}

					.item-content {
						margin-left: 28px;
						width: calc(100% - 28px);
						height: 30px;
						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: justify;
						white-space: nowrap; /* 防止文本换行 */
						overflow: hidden; /* 隐藏溢出的内容 */
						text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本 */
					}

					.item-bottom {
						margin-left: 28px;
						width: calc(100% - 28px);
						height: 30px;
						display: flex;
						align-items: center;
						justify-content: space-between;

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

							.left-item {
								/* 数据展示/Tag标签/亮色/蓝 */
								// width: 72px;
								height: 24px;
								/* 自动布局 */
								display: flex;
								flex-direction: row;
								justify-content: center;
								align-items: center;
								padding: 1px 8px 1px 8px;
								box-sizing: border-box;
								border-radius: 4px;
								margin-right: 8px;

								span {
									font-family: Microsoft YaHei;
									font-style: Regular;
									font-size: 14px;
									font-weight: 400;
									line-height: 20px;
									letter-spacing: 0px;
									text-align: left;
								}
							}
						}

						.bottom-right {
							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: left;
						}
					}
				}
			}
		}

		.warning {
			box-sizing: border-box;
			border: 1px solid rgba(255, 255, 255, 1);
			border-radius: 10px;
			/* 业务系统/模块阴影 */
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background: rgba(255, 255, 255, 0.65);
			width: 793px;
			height: 700px;

			.warning-title {
				width: 100%;
				height: 48px;
				display: flex;
				align-items: center;
				// justify-content: center;

				img {
					width: 22px;
					height: 18px;
					margin-right: 15px;
					margin-left: 16px;
				}

				span {
					color: rgba(5, 95, 194, 1);
					font-family: YouSheBiaoTiHei;
					font-style: Regular;
					font-size: 24px;
					font-weight: 400;
					line-height: 31px;
					letter-spacing: 0px;
					text-align: left;
				}
			}

			.warning-content {
				width: 100%;
				height: calc(100% - 48px);
				padding: 4px 28px 25px 27px;
				overflow-y: auto;

				.content-item {
					width: 100%;
					height: auto;
					padding: 12px 24px;
					box-sizing: border-box;
					border: 1px solid rgba(234, 236, 238, 1);
					border-radius: 10px;
					margin-bottom: 12px;

					.item-title {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;

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

							.img-list {
								display: flex;
								align-items: center;
								margin-right: 12px;

								img {
									width: 24px;
									height: 24px;
								}

								.img1 {
									margin-left: -8px;
								}
							}

							.left-content {
								color: rgba(59, 65, 75, 1);
								font-family: Microsoft YaHei;
								font-style: Bold;
								font-size: 18px;
								font-weight: 700;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: justify;
							}
						}

						.title-right {
							color: rgba(59, 65, 75, 1);
							font-family: Microsoft YaHei;
							font-style: Bold;
							font-size: 16px;
							font-weight: 700;
							line-height: 24px;
							letter-spacing: 1px;
							text-align: right;
						}
					}

					.item-content {
						width: 100%;
						margin-top: 14px;

						.content-list {
							display: flex;
							width: 100%;
							height: 38px;
							align-items: center;
							justify-content: space-around;

							.list-left {
								/* 数据展示/Tag标签/亮色/绿 */
								// width: 72px;
								height: 24px;
								/* 自动布局 */
								display: flex;
								flex-direction: row;
								justify-content: center;
								align-items: center;
								padding: 1px 8px 1px 8px;
								box-sizing: border-box;
								border-radius: 4px;

								span {
									font-family: Microsoft YaHei;
									font-style: Regular;
									font-size: 14px;
									font-weight: 400;
									line-height: 20px;
									letter-spacing: 0px;
									text-align: left;
								}
							}

							.list-content {
								width: 475px;
								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;
								// margin-left: 13px;
								// margin-right: 13px;
							}

							.list-time {
								color: rgba(95, 101, 108, 1);
								font-family: Microsoft YaHei;
								font-style: Regular;
								font-size: 16px;
								font-weight: 400;
								line-height: 24px;
								letter-spacing: 0px;
								text-align: left;
							}
						}
					}
				}
			}
		}
	}

	.anti-area {
		margin-top: 16px;
		margin-left: 33px;
		width: 1601px;
		height: 500px;
		// background: rgba(255, 255, 255, 1);
		display: flex;
		align-items: center;
		justify-content: space-between;

		.area-left {
			width: 792px;
			height: 500px;
			box-sizing: border-box;
			border: 1px solid rgba(255, 255, 255, 1);
			border-radius: var(---10, 10px);
			/* 业务系统/模块阴影 */
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background: rgba(255, 255, 255, 0.65);

			.left-title {
				width: 100%;
				height: 48px;
				display: flex;
				align-items: center;
				// justify-content: center;

				img {
					width: 22px;
					height: 18px;
					margin-right: 15px;
					margin-left: 16px;
				}

				span {
					color: rgba(5, 95, 194, 1);
					font-family: YouSheBiaoTiHei;
					font-style: Regular;
					font-size: 24px;
					font-weight: 400;
					line-height: 31px;
					letter-spacing: 0px;
					text-align: left;
				}
			}

			.left-content {
				width: 100%;
				height: calc(100% - 48px);
				padding: 33px 48px 59px 50px;
			}
		}

		.area-right {
			width: 792px;
			height: 500px;
			box-sizing: border-box;
			border: 1px solid rgba(255, 255, 255, 1);
			border-radius: var(---10, 10px);
			/* 业务系统/模块阴影 */
			box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
			background: rgba(255, 255, 255, 0.65);

			.right-title {
				width: 100%;
				height: 48px;
				display: flex;
				align-items: center;
				// justify-content: center;

				img {
					width: 17px;
					height: 18px;
					margin-right: 15px;
					margin-left: 16px;
				}

				span {
					color: rgba(5, 95, 194, 1);
					font-family: YouSheBiaoTiHei;
					font-style: Regular;
					font-size: 24px;
					font-weight: 400;
					line-height: 31px;
					letter-spacing: 0px;
					text-align: left;
				}
			}

			.right-content {
				width: 100%;
				height: calc(100% - 48px);
				padding: 33px 48px 59px 50px;
			}
		}
	}
}
</style>
