<template>
  <div class="home-wrapper">
    <div class="home-main">
      <div class="home-main-header">
        <div class="home-main-header-top">
          <span>国家科技安全 </span>> <span>中美博弈概览 </span>>
          <span>科技政令</span>
        </div>
        <div class="home-main-header-center">
          <el-input
            v-model="input"
            style="width: 838px; height: 100%"
            placeholder="搜索科技政令"
          />
          <div class="search">
            <div class="search-icon">
              <img src="./assets/images/search-icon.png" alt="" />
            </div>
            <div class="search-text">搜索</div>
          </div>
        </div>
        <div class="home-main-header-footer">
          <div class="home-main-header-footer-item">
            <div class="item-top">3.8T</div>
            <div class="item-footer">数据量</div>
          </div>
          <div class="home-main-header-footer-item">
            <div class="item-top">28</div>
            <div class="item-footer">科技动向</div>
          </div>
          <div class="home-main-header-footer-item">
            <div class="item-top">326</div>
            <div class="item-footer">总统政令</div>
          </div>
          <div class="home-main-header-footer-item">
            <div class="item-top">341</div>
            <div class="item-footer">通过法案</div>
          </div>
          <div class="home-main-header-footer-item">
            <div class="item-top">285</div>
            <div class="item-footer">分析报告</div>
          </div>
        </div>
      </div>
      <div class="home-main-center">
        <div class="center-top">
          <div class="box1">
            <div class="box1-left">
              <div class="icon">
                <img src="./assets/images/box1-left.png" alt="" />
              </div>
            </div>
            <div class="box1-right">
              <div class="icon">
                <img src="./assets/images/box1-right.png" alt="" />
              </div>
            </div>
            <div class="box1-header">
              <div class="box1-header-left">
                <div class="icon">
                  <img src="./assets/images/box1-header-icon.png" alt="" />
                </div>
                <div class="title">{{ "最新科技政令" }}</div>
              </div>
              <div class="box1-header-right" @click="handleClickToDetail()">
                {{ "查看详情 >" }}
              </div>
            </div>
            <div class="box1-main">
              <div class="box1-main-left">
                <img src="./assets/images/img1.png" alt="" />
              </div>
              <div class="box1-main-right">
                <div class="box1-main-right-title">
                  {{ "关于进一步延长TikTok执法宽限期的行政令" }}
                </div>
                <div class="box1-main-right-info">
                  <div
                    class="tag"
                    :class="{
                      tag1: tag.status == 1,
                      tag2: tag.status == 2,
                      tag3: tag.status == 3,
                      tag4: tag.status == 4,
                    }"
                    v-for="(tag, index) in tagList"
                    :key="index"
                  >
                    {{ tag.name }}
                  </div>
                </div>
                <div class="box1-main-right-center">
                  {{
                    `9月16日，美国白宫官方网站发布总统政令，再次推迟（第四次）对TikTok禁令的执法，新的宽限期截止日为2025年12月16日​。在宽限期内及对于宽限期前的行为，司法部不得强制执行​《保护美国人免受外国对手控制应用程序法》或因此处罚相关实体​（如TikTok及其分发平台）。司法部还需向提供商发出无违规和无责任的信函，并强调执行该法的权力专属联邦司法部长，意在阻止各州或私人提起诉讼。
`
                  }}
                </div>
                <div class="box1-main-right-footer">
                  <div class="footer-left">{{ "2025年9月16日" }}</div>
                  <div class="footer-right">
                    <div class="footer-right-item1">
                      {{ "美国白宫官方网站" }}
                    </div>
                    <div class="footer-right-item2">
                      <img src="./assets/images/open-icon.png" alt="" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="box2">
            <div class="box2-header">
              <div class="icon">
                <img src="./assets/images/box2-header-icon.png" alt="" />
              </div>
              <div class="title">
                <div class="text">{{ "风险信号" }}</div>
                <div class="num">{{ warningList.length }}</div>
              </div>
              <div class="more">{{ "更多 +" }}</div>
            </div>
            <div class="box2-main">
              <div
                class="box2-main-item"
                v-for="(item, index) in warningList"
                :key="index"
              >
                <div
                  class="item-left"
                  :class="{
                    itemLeftStatus1: item.status === '一般风险',
                    itemLeftStatus2: item.status === '重大风险',
                  }"
                >
                  {{ item.status }}
                </div>
                <div class="item-right">
                  <div class="text">
                    {{ item.title }}
                  </div>
                  <div class="time">{{ item.time }}</div>
                </div>
              </div>
            </div>
            <div class="box2-footer">
              <div class="icon">
                <img src="./assets/images/box2-footer-icon.png" alt="" />
              </div>
              <div class="text">{{ "风险处理" }}</div>
            </div>
          </div>
        </div>
        <div class="center-center1">
          <div
            class="center1-item"
            :class="{ center1ItemActive: center1ActiveIndex === 0 }"
            @click="handleClickCenter1Item(0)"
          >
            <div class="left">
              <img src="./assets/images/p1.png" alt="" />
            </div>
            <div class="right">
              <div
                class="name"
                :class="{ nameActive: center1ActiveIndex === 0 }"
              >
                {{ "唐纳德·特朗普任期" }}
              </div>
              <div
                class="time"
                :class="{ timeActive: center1ActiveIndex === 0 }"
              >
                {{ "2025.1.20-至今" }}
              </div>
            </div>
          </div>
          <div
            class="center1-item"
            :class="{ center1ItemActive: center1ActiveIndex === 1 }"
            @click="handleClickCenter1Item(1)"
          >
            <div class="left">
              <img src="./assets/images/p2.png" alt="" />
            </div>
            <div class="right">
              <div
                class="name"
                :class="{ nameActive: center1ActiveIndex === 1 }"
              >
                {{ "乔·拜登任期" }}
              </div>
              <div
                class="time"
                :class="{ timeActive: center1ActiveIndex === 1 }"
              >
                {{ "2021.1.20-2025.1.20" }}
              </div>
            </div>
          </div>
          <div
            class="center1-item"
            :class="{ center1ItemActive: center1ActiveIndex === 2 }"
            @click="handleClickCenter1Item(2)"
          >
            <div class="left">
              <img src="./assets/images/p1.png" alt="" />
            </div>
            <div class="right">
              <div
                class="name"
                :class="{ nameActive: center1ActiveIndex === 2 }"
              >
                {{ "唐纳德·特朗普任期" }}
              </div>
              <div
                class="time"
                :class="{ timeActive: center1ActiveIndex === 2 }"
              >
                {{ "2017.1.20-2021.1.20" }}
              </div>
            </div>
          </div>
          <div
            class="center1-item"
            :class="{ center1ItemActive: center1ActiveIndex === 3 }"
            @click="handleClickCenter1Item(3)"
          >
            <div class="left">
              <img src="./assets/images/p3.png" alt="" />
            </div>
            <div class="right">
              <div
                class="name"
                :class="{ nameActive: center1ActiveIndex === 3 }"
              >
                {{ "贝拉克·奥巴马任期" }}
              </div>
              <div
                class="time"
                :class="{ timeActive: center1ActiveIndex === 3 }"
              >
                {{ "2013.1.20-2017.1.20" }}
              </div>
            </div>
          </div>
        </div>
        <div class="center-center2">
          <div class="center2-header">
            <div class="center2-header-left">
              <div class="left">
                <div class="icon">
                  <img src="./assets/images/p1.png" alt="" />
                </div>
              </div>
              <div class="right">
                <div class="right-item1">{{ "唐纳德·特朗普" }}</div>
                <div class="right-item2">
                  <div class="icon">
                    <img src="./assets/images/icon1.png" alt="" />
                  </div>
                  <div class="text">{{ "共和党" }}</div>
                </div>
                <div class="right-item3">{{ "美国第45任总统" }}</div>
                <div class="right-item4">{{ "2025.1.20-至今" }}</div>
              </div>
            </div>
            <div class="center2-header-right">
              <div class="top">
                <div class="top-box">
                  <div class="item1">{{ "本月发布" }}</div>
                  <div class="item2">
                    <div class="item2-1">{{ "1项" }}</div>
                    <div class="item2-2">{{ "/" }}</div>
                    <div class="item2-3">{{ "4项" }}</div>
                  </div>
                </div>
                <div class="top-box">
                  <div class="item1">{{ "今年发布" }}</div>
                  <div class="item2">
                    <div class="item2-1">{{ "7项" }}</div>
                    <div class="item2-2">{{ "/" }}</div>
                    <div class="item2-3">{{ "29项" }}</div>
                  </div>
                </div>
                <div class="top-box">
                  <div class="item1">{{ "任期内发布" }}</div>
                  <div class="item2">
                    <div class="item2-1">{{ "20项" }}</div>
                    <div class="item2-2">{{ "/" }}</div>
                    <div class="item2-3">{{ "96项" }}</div>
                  </div>
                </div>
              </div>
              <div class="bottom">
                <div class="icon">
                  <img src="./assets/images/tips-icon.png" alt="" />
                </div>
                <div class="text">{{ "涉华政令数量/政令总数" }}</div>
              </div>
            </div>
          </div>
          <div class="center2-mid" id="chartCalendar"></div>
          <div class="center2-footer">
            <div class="center2-footer-left">
              <div class="header">
                <div class="icon">
                  <img src="./assets/images/center2-header-icon2.png" alt="" />
                </div>
                <div class="text">{{ "主要内阁成员" }}</div>
              </div>
              <div class="main">
                <div
                  class="item"
                  v-for="(item, index) in personList"
                  :key="index"
                >
                  <div class="item-left">
                    <img :src="item.avator" alt="" />
                  </div>
                  <div class="item-right">
                    <div class="item-right-box1">{{ item.name }}</div>
                    <div class="item-right-box2">{{ item.posi }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="center2-footer-right">
              <div class="header">
                <div class="icon">
                  <img src="./assets/images/center2-header-icon1.png" alt="" />
                </div>
                <div class="tab-box">
                  <div
                    class="tab"
                    :class="{ tabActive: tabActiveIndex === index }"
                    v-for="(item, index) in list"
                    :key="index"
                  >
                    {{ item.title }}
                  </div>
                </div>
                <div class="right">
                  <div class="btn">
                    <img src="./assets/images/left-btn.png" alt="" />
                  </div>
                  <div class="btn">
                    <img src="./assets/images/right-btn.png" alt="" />
                  </div>
                </div>
              </div>
              <div class="main">
                <div
                  class="main-item"
                  v-for="(val, idx) in list[tabActiveIndex].data"
                  :key="idx"
                >
                  <div class="id">{{ idx + 1 }}</div>
                  <div class="info">
                    <div class="info-header">
                      <div class="title">{{ val.title }}</div>
                      <div class="tag">{{ val.tag }}</div>
                    </div>
                    <div class="info-content">
                      {{ val.content }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="center-footer">
          <div class="box3">
            <div class="box3-header">
              <div class="box3-header-left">
                <div class="box3-header-icon">
                  <img src="./assets/images/box3-header-icon.png" alt="" />
                </div>
                <div class="box3-header-title">{{ "政令发布频度" }}</div>
              </div>
              <div class="box3-header-right">
                <img src="./assets/images/header-more.png" alt="" />
              </div>
            </div>
            <div class="box3-main" id="chart1"></div>
          </div>
          <div class="box4">
            <div class="box4-header">
              <div class="header-icon">
                <img src="./assets/images/box4-header-icon.png" alt="" />
              </div>
              <div class="header-title">{{ "政令涉及领域" }}</div>
              <div class="header-right">
                <img src="./assets/images/header-more.png" alt="" />
              </div>
            </div>
            <div class="box4-main" id="chart2"></div>
          </div>
        </div>
        <div class="center-footer1">
          <div class="box5">
            <div class="box5-header">
              <div class="header-icon">
                <img src="./assets/images/box5-header-icon.png" alt="" />
              </div>
              <div class="header-title">{{ "关键政令及举措" }}</div>
            </div>
            <div class="box5-main">
              <div
                class="box5-item"
                v-for="(item, index) in keyDecreeList"
                :key="index"
              >
                <div class="icon">
                  <img src="./assets/images/warning.png" alt="" />
                </div>
                <div class="info">
                  <div class="info-header">
                    <div class="title">{{ item.title }}</div>
                    <div class="time">{{ item.time }}</div>
                  </div>
                  <div class="info-content">{{ item.content }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="box6">
            <div class="box6-header">
              <div class="header-icon">
                <img src="./assets/images/box5-header-icon.png" alt="" />
              </div>
              <div class="header-title">{{ "政令重点条款" }}</div>
            </div>
            <div class="box6-main">
              <WordCloudMap :data="wordCloudData" :shape="circle" />
            </div>
          </div>
        </div>
      </div>
      <div class="home-main-footer">
        <div class="home-main-footer-header">
          <div class="btn-box">
            <div
              class="btn"
              :class="{ btnActive: activeCate === cate }"
              v-for="(cate, index) in categoryList"
              :key="index"
              @click="handleClickCate(cate)"
            >
              {{ cate }}
            </div>
          </div>
          <div class="select-box">
            <el-select
              v-model="releaseTime"
              placeholder="选择发布时间"
              style="width: 120px"
            >
              <el-option
                v-for="item in releaseTimeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <!-- <el-select
              v-model="releaseTime"
              placeholder="选择发布时间"
              style="width: 120px"
            >
              <el-option
                v-for="item in releaseTimeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select> -->
          </div>
        </div>
        <div class="home-main-footer-main">
          <div
            class="main-item"
            v-for="(decree, index) in curDecreeList"
            :key="index"
          >
            <div class="main-item-left">
              <div
                class="left-box"
                :class="{
                  type1: decree.status === 1,
                  type2: decree.status === 2,
                  type3: decree.status === 3,
                }"
              >
                {{ decree.type }}
              </div>
            </div>
            <div class="main-item-center">
              <div class="main-item-center-box1">{{ decree.title }}</div>
              <div class="main-item-center-box2">{{ decree.time }}</div>
            </div>
            <div class="main-item-right">
              <div class="main-item-right-text">{{ "查看官网政令原文" }}</div>
              <div class="main-item-right-icon">
                <img src="./assets/images/open-icon.png" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import router from "@/router";
import WordCloudMap from "./WordCloudMap.vue";

import getMultiLineChart from "./utils/multiLineChart";
import getBarChart from "./utils/barChart";
import getPieChart from "./utils/piechart";
import getCalendarHeatChart from "./utils/cleandarHeat";

import p1 from "./assets/images/iconp1.png";
import p2 from "./assets/images/iconp2.png";
import p3 from "./assets/images/iconp3.png";
import p4 from "./assets/images/iconp4.png";
import p5 from "./assets/images/iconp5.png";
import p6 from "./assets/images/iconp6.png";
import p7 from "./assets/images/iconp7.png";
import p8 from "./assets/images/iconp8.png";
import p9 from "./assets/images/iconp9.png";
import p10 from "./assets/images/iconp10.png";

const center1ActiveIndex = ref(0);

const handleClickCenter1Item = (index) => {
  center1ActiveIndex.value = index;
};

const personList = ref([
  {
    name: "詹姆斯·JD·万斯",
    posi: "副总统",
    avator: p1,
  },
  {
    name: "马尔科·卢比奥",
    posi: "国务卿",
    avator: p2,
  },
  {
    name: "斯科特·贝森特",
    posi: "财政部长",
    avator: p3,
  },
  {
    name: "皮特·赫格塞斯",
    posi: "国防部长",
    avator: p4,
  },
  {
    name: "帕姆·邦迪",
    posi: "司法部长",
    avator: p5,
  },
  {
    name: "霍华德·卢特尼克",
    posi: "商务部长",
    avator: p6,
  },
  {
    name: "苏西·威尔斯",
    posi: "白宫办公厅主任",
    avator: p7,
  },
  {
    name: "克里斯蒂·诺姆",
    posi: "国土安全部长",
    avator: p8,
  },
  {
    name: "道格·伯古姆",
    posi: "内政部长",
    avator: p9,
  },
  {
    name: "克里斯·赖特",
    posi: "能源部长",
    avator: p10,
  },
]);

const tabActiveIndex = ref(0);

const list = [
  {
    title: "内政情况",
    data: [
      {
        title: "司法与法律政策",
        tag: "司法改革",
        content: `继续任命保守派法官至联邦各级范元、可能利用司法部调查政治对手，破坏司法部独立性传统。`,
      },
      {
        title: "移民政策",
        tag: "边境安全",
        content: `重启并扩大美墨边境墙建设，启动大规模非法移民驱逐行动。恢复并加强"留在墨西哥"政策，限制庇护申请。`,
      },
      {
        title: "能源政策",
        tag: "能源独立",
        content: `推行"钻探、钻探、钻探"政策，全力扩大化石燃料（石油、天然气、煤炭）的生产，撤销清洁能源补贴和环保法规。`,
      },
      {
        title: "关税政策",
        tag: "能征关税",
        content: `全面加征关税，推行“对等关税”，将关税收入作为弥补减税造成的财政收入缺口的手段之一。`,
      },
      {
        title: "外交政策",
        tag: "能华强硬",
        content: `采取单边主义和交易性做法，对国际多边体系构成挑战，要求盟友承担更多成本，对华政策更趋强硬。`,
      },
    ],
  },
  {
    title: "外交情况",
    data: [
      {
        title: "司法与法律政策1",
        tag: "司法改革",
        content: `继续任命保守派法官至联邦各级范元、可能利用司法部调查政治对手，破坏司法部独立性传统。`,
      },
      {
        title: "移民政策",
        tag: "边境安全",
        content: `重启并扩大美墨边境墙建设，启动大规模非法移民驱逐行动。恢复并加强"留在墨西哥"政策，限制庇护申请。`,
      },
      {
        title: "能源政策",
        tag: "能源独立",
        content: `推行"钻探、钻探、钻探"政策，全力扩大化石燃料（石油、天然气、煤炭）的生产，撤销清洁能源补贴和环保法规。`,
      },
      {
        title: "关税政策",
        tag: "能征关税",
        content: `全面加征关税，推行“对等关税”，将关税收入作为弥补减税造成的财政收入缺口的手段之一。`,
      },
      {
        title: "外交政策",
        tag: "能华强硬",
        content: `采取单边主义和交易性做法，对国际多边体系构成挑战，要求盟友承担更多成本，对华政策更趋强硬。`,
      },
    ],
  },
  {
    title: "经济情况",
    data: [
      {
        title: "司法与法律政策2",
        tag: "司法改革",
        content: `继续任命保守派法官至联邦各级范元、可能利用司法部调查政治对手，破坏司法部独立性传统。`,
      },
      {
        title: "移民政策",
        tag: "边境安全",
        content: `重启并扩大美墨边境墙建设，启动大规模非法移民驱逐行动。恢复并加强"留在墨西哥"政策，限制庇护申请。`,
      },
      {
        title: "能源政策",
        tag: "能源独立",
        content: `推行"钻探、钻探、钻探"政策，全力扩大化石燃料（石油、天然气、煤炭）的生产，撤销清洁能源补贴和环保法规。`,
      },
      {
        title: "关税政策",
        tag: "能征关税",
        content: `全面加征关税，推行“对等关税”，将关税收入作为弥补减税造成的财政收入缺口的手段之一。`,
      },
      {
        title: "外交政策",
        tag: "能华强硬",
        content: `采取单边主义和交易性做法，对国际多边体系构成挑战，要求盟友承担更多成本，对华政策更趋强硬。`,
      },
    ],
  },
];

const tagList = ref([
  {
    name: "互联网",
    status: 2,
  },
  {
    name: "人工智能",
    status: 4,
  },
]);

const wordCloudData = [
  { name: "与马斯克公开冲突", value: 100 },
  { name: "传统能源", value: 5 },
  { name: "共和党财政鹰派", value: 77 },
  { name: "未实现赤字控制目标", value: 35 },
  { name: "得克萨斯州", value: 88 },
  { name: "选举压力", value: 57 },
  { name: "主张财政紧缩", value: 72 },
  { name: "财政保守", value: 18 },
  { name: "共和党", value: 34 },
  { name: "扩大军费", value: 16 },
  { name: "参议院多数党", value: 72 },
  { name: "地方利益捍卫者", value: 58 },
  { name: "众议院预算委员会", value: 24 },
  { name: "债务与赤字警告", value: 33 },
  { name: "抗议医疗补助条款", value: 47 },
  { name: "深红州", value: 32 },
  { name: "温和派选区", value: 62 },
  { name: "高压游说", value: 51 },
];

const handleClickToDetail = () => {
  router.push("/decreeLayout");
};

const warningList = ref([
  {
    title: "关于对中华人民共和国合成阿片类药物供应链...",
    time: "一天前",
    status: "特别重大",
  },
  {
    title: "关于调整汽车及汽车零部件进口的公告",
    time: "一天前",
    status: "特别重大",
  },
  {
    title: "关于调整钢铁进口的公告",
    time: "一天前",
    status: "重大风险",
  },
  {
    title: "关于使用互惠关税规范进口以纠正导致大规模...",
    time: "一天前",
    status: "重大风险",
  },
  {
    title: "关于修订对中华人民共和国低价值进口商品适...",
    time: "一天前",
    status: "一般风险",
  },
]);

const timelineList = ref([
  {
    title: "成为公法 No: 119-21。",
    time: "2025-07-04",
    status: 1,
  },
  {
    title: "总统签署",
    time: "2025-07-04",
    status: 0,
  },
  {
    title: "提交总统",
    time: "2025-07-03",
    status: 0,
  },
  {
    title: "重新审议动议搁置案无异议通过。",
    time: "2025-07-03  14:31",
    status: 0,
  },
  {
    title: "关于‘众议院同意参议院修正案’...",
    time: "2025-07-02  14:31",
    status: 0,
  },
]);

const areaList = ref([
  {
    name: "跨境电商",
    status: 2,
  },
  {
    name: "新能源产业",
    status: 4,
  },
  {
    name: "半导体产业",
    status: 1,
  },
  {
    name: "关税",
    status: 3,
  },
  {
    name: "光伏产业",
    status: 2,
  },
]);

const curDecreeList = ref([
  {
    type: "总统政令",
    status: 1,
    title: "关于进一步延长TikTok执法宽限期的行政令",
    time: "2025年9月16日",
  },
  {
    type: "总统政令",
    status: 1,
    title: "为国家安全部署先进核反应堆技术",
    time: "2025年9月16日",
  },
  {
    type: "总统政令",
    status: 1,
    title: "修改对等关税税率以反映与中华人民共和国会谈情况的行政令",
    time: "2025年9月15日",
  },
  {
    type: "总统政令",
    status: 1,
    title: "调整互惠关税范围,并制定实施贸易和安全协议的程序",
    time: "2025年9月15日",
  },
  {
    type: "总统政令",
    status: 1,
    title: "持续努力加强国家网络安全,并修订第13694号行政命令和第14144号行政命令",
    time: "2025年9月14日",
  },
  {
    type: "总统备忘录",
    status: 3,
    title: "通过第232条款行动确保加工关键矿物及衍生产品的国家安全与经济韧性",
    time: "2025年9月14日",
  },
  {
    type: "提名与任命",
    status: 2,
    title: "终止对不可靠、非受控能源的市场扭曲补贴",
    time: "2025年9月11日",
  },
  {
    type: "总统政令",
    status: 1,
    title: "对所有国家暂停免关税待遇",
    time: "2025年9月6日",
  }
]);

const releaseTime = ref("近一年发布");

const releaseTimeList = ref([
  {
    label: "近半年发布",
    value: "近半年发布",
  },
  {
    label: "近一年发布",
    value: "近一年发布",
  },
  {
    label: "近两年发布",
    value: "近两年发布",
  },
  {
    label: "近三年发布",
    value: "近三年发布",
  },
  {
    label: "近五年发布",
    value: "近五年发布",
  },
]);

const categoryList = ref([
  "全部分类",
  "总统政令",
  "提名与任命",
  "总统备忘录",
  "声明",
]);

const activeCate = ref("全部分类");
const activeHylyId = ref("");

// // 获取领域分类
// const handleGetHylyList = async () => {
//   try {
//     const res = await getHylyList();
//     console.log("行业领域列表");
//     categoryList.value = res.data;
//     const obj = {
//       id: 0,
//       hylyid: "",
//       hylymc: "全部分类",
//     };
//     categoryList.value = [obj, ...categoryList.value];
//   } catch (error) {}
// };

const handleClickCate = (cate) => {
  activeCate.value = cate;
};

const activeNavIndex = ref(0);

const handleClickNav = (index, item) => {
  activeNavIndex.value = index;
  router.push(item.path);
};

// 绘制echarts图表
const setChart = (option, chartId) => {
  let chartDom = document.getElementById(chartId);
  chartDom.removeAttribute("_echarts_instance_");
  let chart = echarts.init(chartDom);
  chart.setOption(option);
  return chart;
};

const chart1Data = ref({
  dataX: ["2019", "2020", "2021", "2022", "2023", "2024", "2025"],
  dataY: [219, 228, 129, 159, 152, 157, 78],
});

const chart2Data = ref([
  {
    name: "集成电路",
    value: 50,
  },
  {
    name: "人工智能",
    value: 46,
  },
  {
    name: "通信网络",
    value: 40,
  },
  {
    name: "量子科技",
    value: 32,
  },
  {
    name: "能源",
    value: 31,
  },
  {
    name: "生物科技",
    value: 30,
  },
  {
    name: "航空航天",
    value: 24,
  },
]);

const colorList = [
  "#69B1FF",
  "#FFC069",
  "#87E8DE",
  "#85A5FF",
  "#FF7875",
  "#B37FEB",
  "#4096FF",
];

// 根据法案类型获取法案列表
// const handleGetBillsByType = async () => {
//   const params = {
//     type: activeHylyId.value,
//   };
//   try {
//     const res = await getBillsByType(params);
//     console.log("根据法案类型获取法案列表", res);
//     curDecreeList.value = res.data.map((item) => {
//       return {
//         billId: item.billId,
//         billName: item.billName,
//         introductionDate: item.introductionDate,
//         img: bill1,
//       };
//     });
//   } catch (error) {}
// };

const keyDecreeList = ref([
  {
    title: "关于“对等关税”的行政令",
    time: "2025年4月",
    content: `对所有贸易伙伴设立10%的“最低基准关税”，并对中国商品加征高达34%​​ 的额外关税，使针对中国的总关税水平大幅提升。`,
  },
  {
    title: "《美国优先投资政策》备忘录",
    time: "2025年2月",
    content: `将中国列为“外国对手”，系统性收紧中美在半导体、人工智能、量子技术等前沿科技领域的双向投资，构建对华科技封锁体系。`,
  },
  {
    title: "针对TikTok的行政令",
    time: "2025年2月",
    content: `以所谓“信息安全”为由，要求字节跳动剥离TikTok在美业务，并禁止通过微信、支付宝等中国应用程序进行交易。`,
  },
  {
    title: "签署《外国投资风险审查现代化法》",
    time: "2025年2月",
    content: `极大加强了美国外国投资委员会（CFIUS）的权限，重点关注来自中国的投资。`,
  },
]);

const calendarData = ref([
  ["2025-01-01", 20],
  ["2025-01-05", 120],
  ["2025-01-09", 220],
  ["2025-01-15", 320],
  ["2025-01-20", 120],
  ["2025-01-24", 420],
  ["2025-02-05", 80],
  ["2025-02-08", 280],
  ["2025-02-18", 480],
  ["2025-02-11", 420],
  ["2025-02-21", 320],
  ["2025-03-05", 160],
  ["2025-03-09", 260],
  ["2025-03-19", 460],
  ["2025-03-26", 430],
  ["2025-04-01", 70],
  ["2025-04-05", 170],
  ["2025-04-11", 270],
  ["2025-04-18", 370],
  ["2025-05-05", 210],
  ["2025-05-09", 210],
  ["2025-05-15", 410],
  ["2025-05-22", 480],
  ["2025-06-06", 45],
  ["2025-06-09", 415],
  ["2025-06-16", 245],
  ["2025-06-19", 332],
  ["2025-07-04", 127],
  ["2025-07-09", 327],
  ["2025-07-24", 427],
  ["2025-08-08", 150],
  ["2025-08-11", 250],
  ["2025-08-15", 350],
  ["2025-08-22", 460],
  ["2025-09-10", 480],
  ["2025-09-18", 312],
  ["2025-10-15", 60],
  ["2025-10-19", 80],
  ["2025-10-21", 190],
]);

onMounted(async () => {
  let chart1 = getBarChart(chart1Data.value.dataX, chart1Data.value.dataY);
  setChart(chart1, "chart1");

  let chart2 = getPieChart(chart2Data.value, colorList);
  setChart(chart2, "chart2");

  let chartCalendar = getCalendarHeatChart(calendarData.value);
  setChart(chartCalendar, "chartCalendar");
});
</script>

<style lang="scss" scoped>
:deep(.el-input__wrapper) {
  box-shadow: none;
}
.home-wrapper {
  .home-main {
    // width: 1400px;
    width: 100%;
    margin: 0 auto;
    background: url("./assets/images/background.png");
    background-size: 100% 100%;
    .home-main-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      .home-main-header-top {
        width: 100%;
        height: 64px;
        color: rgba(95, 101, 108, 1);
        font-family: Microsoft YaHei;
        font-size: 16px;
        font-weight: 400;
        line-height: 64px;
        background: url("./assets/images/header-bg.png");
        font-family: Microsoft YaHei;
        font-size: 20px;
        font-weight: 700;
        color: #fff;
        box-sizing: border-box;
        padding-left: 160px;
      }
      .home-main-header-center {
        margin-top: 13px;
        width: 960px;
        height: 48px;
        border-radius: 4px;
        box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
        background: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        padding: 1px;
        position: relative;
        .search {
          position: absolute;
          right: 1px;
          top: 1px;
          width: 120px;
          height: 42px;
          border-radius: 4px;
          background: rgba(22, 119, 255, 1);
          display: flex;
          justify-content: center;
          align-items: center;
          .search-icon {
            width: 18px;
            height: 18px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .search-text {
            margin-left: 8px;
            height: 22px;
            color: #fff;
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 400;
            line-height: 22px;
          }
        }
      }
      .home-main-header-footer {
        margin-top: 38px;
        width: 960px;
        height: 64px;
        box-sizing: border-box;
        padding: 0 108px;
        display: flex;
        justify-content: space-between;
        .home-main-header-footer-item {
          padding: 0 10px;
          text-align: center;
          .item-top {
            height: 22px;
            color: rgba(20, 89, 187, 1);
            font-family: Microsoft YaHei;
            font-size: 36px;
            font-weight: 700;
            line-height: 22px;
          }
          .item-footer {
            margin-top: 10px;
            height: 30px;
            color: rgba(95, 101, 108, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 400;
            line-height: 30px;
          }
        }
      }
    }
    .home-main-center {
      margin-top: 34px;
      .center-top {
        height: 450px;
        display: flex;
        justify-content: center;
        gap: 20px;
        .box1 {
          width: 1064px;
          height: 450px;
          box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
          background: #fff;
          box-sizing: border-box;
          position: relative;
          .box1-left {
            position: absolute;
            left: 0;
            top: 200px;
            width: 24px;
            height: 48px;
            background: #e7f1ff;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            .icon {
              width: 11px;
              height: 18px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .box1-right {
            position: absolute;
            right: 0;
            top: 200px;
            width: 24px;
            height: 48px;
            background: #e7f1ff;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            .icon {
              width: 11px;
              height: 18px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .box1-header {
            height: 53px;
            border-bottom: 1px solid rgba(240, 242, 244, 1);
            display: flex;
            justify-content: space-between;
            .box1-header-left {
              display: flex;
              margin-left: 19px;
              .icon {
                width: 18px;
                height: 18px;
                margin-top: 19px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .title {
                width: 152px;
                height: 53px;
                margin-left: 18px;
                color: #fff;
                background: rgba(10, 87, 166, 1);
                font-family: Microsoft YaHei;
                font-size: 20px;
                font-weight: 700;
                line-height: 53px;
                text-align: center;
              }
            }
            .box1-header-right {
              margin-top: 19px;
              height: 16px;
              color: rgba(20, 89, 187, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 400;
              line-height: 16px;
              cursor: pointer;
              margin-right: 39px;
            }
          }
          .box1-main {
            display: flex;
            height: 354px;
            margin-top: 22px;
            padding-left: 31px;
            padding-right: 41px;
            box-sizing: border-box;
            .box1-main-left {
              width: 458px;
              height: 353px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .box1-main-right {
              margin-left: 28px;
              flex: 1;
              .box1-main-right-title {
                height: 26px;
                color: rgba(10, 87, 166, 1);
                font-family: Microsoft YaHei;
                font-size: 20px;
                font-weight: 700;
                line-height: 26px;
              }
              .box1-main-right-info {
                margin-top: 14px;
                display: flex;
                height: 24px;
                .tag {
                  height: 24px;
                  line-height: 24px;
                  padding: 1px 8px;
                  box-sizing: border-box;
                  border-radius: 4px;
                  margin-right: 5px;
                }
                .tag1 {
                }
                .tag2 {
                  border: 1px solid rgba(186, 224, 255, 1);
                  background: rgba(230, 244, 255, 1);
                  color: rgba(22, 119, 255, 1);
                }
                .tag4 {
                  border: 1px solid rgba(255, 163, 158, 1);
                  color: rgba(245, 34, 45, 1);
                  background: rgba(255, 241, 240, 1);
                }
              }
              .box1-main-right-center {
                margin-top: 10px;
                height: 200px;
                color: rgba(59, 65, 75, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 400;
                line-height: 30px;
              }
              .box1-main-right-footer {
                margin-top: 50px;
                height: 24px;
                display: flex;
                justify-content: space-between;
                .footer-left {
                  height: 24px;
                  line-height: 24px;
                  color: rgba(95, 101, 108, 1);
                  font-family: Microsoft YaHei;
                  font-size: 16px;
                  font-weight: 400;
                  line-height: 24px;
                }
                .footer-right {
                  display: flex;
                  .footer-right-item1 {
                    height: 24px;
                    color: rgba(10, 87, 166, 1);
                    font-family: Microsoft YaHei;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 24px;
                  }
                  .footer-right-item2 {
                    width: 16px;
                    height: 16px;
                    margin-top: 4px;
                    margin-left: 11px;
                    img {
                      width: 100%;
                      height: 100%;
                    }
                  }
                }
              }
            }
          }
        }
        .box2 {
          width: 521px;
          height: 450px;
          box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
          background: rgba(255, 255, 255, 1);
          position: relative;
          .box2-header {
            height: 54px;
            display: flex;
            border-bottom: 1px solid rgba(240, 242, 244, 1);
            .icon {
              width: 24px;
              height: 22px;
              margin-left: 33px;
              margin-top: 18px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .title {
              display: flex;
              width: 148px;
              background: rgba(206, 79, 81, 1);
              margin-left: 25px;
              .text {
                margin-left: 15px;
                margin-top: 16px;
                height: 22px;
                color: #fff;
                font-family: Microsoft YaHei;
                font-size: 20px;
                font-weight: 700;
                line-height: 22px;
              }
              .num {
                width: 24px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                color: rgba(255, 255, 255, 1);
                font-family: Microsoft YaHei;
                font-size: 12px;
                margin-left: 15px;
                margin-top: 18px;
                border-radius: 100px;
                background: rgba(255, 255, 255, 0.3);
              }
            }
            .more {
              margin-top: 19px;
              margin-left: 200px;
              color: rgba(20, 89, 187, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 400;
              line-height: 16px;
              cursor: pointer;
            }
          }
          .box2-main {
            box-sizing: border-box;
            padding-right: 20px;
            height: 282px;
            overflow-y: auto;
            .box2-main-item {
              margin-left: 23px;
              height: 47px;
              width: 464px;
              display: flex;
              .itemLeftStatus1 {
                color: rgba(82, 196, 26, 1) !important;
                background: rgba(246, 255, 237, 1) !important;
              }
              .itemLeftStatus2 {
                color: rgba(250, 140, 22, 1) !important;
                background: rgba(255, 247, 230, 1) !important;
              }
              .item-left {
                margin-top: 4px;
                margin-left: 2px;
                width: 40px;
                height: 40px;
                border-radius: 20px;
                background: rgba(255, 241, 240);
                color: rgba(245, 34, 45, 1);
                font-family: Microsoft YaHei;
                font-size: 12px;
                font-weight: 400;
                line-height: 14px;
                box-sizing: border-box;
                padding: 6px 4px;
                text-align: center;
              }
              .item-right {
                margin-left: 13px;
                width: 408px;
                height: 47px;
                border-bottom: 1px solid rgba(240, 242, 244, 1);
                display: flex;
                .text {
                  width: 348px;
                  color: rgba(59, 65, 75, 1);
                  font-family: Microsoft YaHei;
                  font-size: 16px;
                  font-weight: 400;
                  line-height: 47px;
                }
                .time {
                  margin-left: 10px;
                  line-height: 47px;
                  color: rgba(132, 136, 142, 1);
                  font-family: Microsoft YaHei;
                  font-size: 14px;
                  font-weight: 400;
                }
              }
            }
          }
          .box2-footer {
            position: absolute;
            left: 40px;
            bottom: 20px;
            width: 430px;
            height: 42px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            border-radius: 6px;
            background: rgba(22, 119, 255, 1);
            cursor: pointer;
            .icon {
              width: 16px;
              height: 16px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .text {
              margin-left: 8px;
              color: rgba(255, 255, 255, 1);
              font-family: Microsoft YaHei;
              font-size: 14px;
              font-weight: 400;
              line-height: 22px;
            }
          }
        }
      }
      .center-center1 {
        margin: 0 auto;
        margin-top: 24px;
        height: 100px;
        width: 1600px;
        border-radius: 50px;
        box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
        background: rgba(255, 255, 255, 1);
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 4px 5px;
        .center1-item {
          width: 351px;
          height: 92px;
          border-radius: 48px;
          display: flex;
          cursor: pointer;
          &:hover {
            background: rgba(231, 243, 255, 1);
          }
          .left {
            margin-top: 15px;
            margin-left: 39px;
            width: 60px;
            height: 60px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .right {
            margin-left: 8px;
            .name {
              height: 31px;
              margin-top: 16px;

              color: rgba(59, 65, 75, 1);
              font-family: Microsoft YaHei;
              font-size: 24px;
              font-weight: 700;
              line-height: 31px;
            }
            .nameActive {
              color: rgba(10, 87, 166, 1);
            }
            .time {
              margin-top: 1px;
              height: 30px;
              color: rgba(95, 101, 108, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 400;
              line-height: 30px;
            }
            .timeActive {
              color: rgba(10, 87, 166, 1);
            }
          }
        }
        .center1ItemActive {
          background: rgba(231, 243, 255, 1);
        }
      }
      .center-center2 {
        margin: 0 auto;
        margin-top: 24px;
        width: 1600px;
        height: 960px;
        border-radius: 4px;
        box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
        background: rgba(255, 255, 255, 1);
        .center2-header {
          display: flex;
          justify-content: space-between;
          .center2-header-left {
            margin-left: 62px;
            display: flex;
            .left {
              width: 140px;
              height: 175px;
              border-radius: 0px 0px 70px 70px;
              background: rgba(231, 243, 255, 1);
              overflow: hidden;

              .icon {
                width: 128px;
                height: 128px;
                border-radius: 75px;
                margin-top: 41px;
                margin-left: 6px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
            .right {
              margin-left: 29px;
              .right-item1 {
                margin-top: 41px;
                height: 31px;
                color: rgba(10, 87, 166, 1);
                font-family: Microsoft YaHei;
                font-size: 24px;
                font-weight: 700;
                line-height: 32px;
              }
              .right-item2 {
                display: flex;
                margin-top: 7px;
                .icon {
                  width: 24px;
                  height: 24px;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
                .text {
                  margin-left: 8px;
                  height: 24px;
                  color: rgba(95, 101, 108, 1);
                  font-family: Microsoft YaHei;
                  font-size: 18px;
                  font-weight: 400;
                  line-height: 24px;
                }
              }
              .right-item3 {
                margin-top: 10px;
                height: 24px;
                color: rgba(95, 101, 108, 1);
                font-family: Microsoft YaHei;
                font-size: 18px;
                font-weight: 400;
                line-height: 24px;
              }
              .right-item4 {
                margin-top: 8px;
                height: 24px;
                color: rgba(95, 101, 108, 1);
                font-family: Microsoft YaHei;
                font-size: 18px;
                font-weight: 400;
                line-height: 24px;
              }
            }
          }
          .center2-header-right {
            margin-right: 59px;
            margin-top: 47px;
            .top {
              display: flex;
              .top-box {
                width: 180px;
                height: 72px;
                margin-left: 50px;
                .item1 {
                  height: 26px;
                  color: rgba(59, 65, 75, 1);
                  font-family: Microsoft YaHei;
                  font-size: 20px;
                  font-weight: 700;
                  line-height: 26px;
                  text-align: right;
                }
                .item2 {
                  margin-top: 4px;
                  font-family: Microsoft YaHei;
                  font-weight: 700;
                  display: flex;
                  justify-content: flex-end;
                  .item2-3 {
                    height: 42px;
                    color: rgba(10, 87, 166, 1);
                    font-size: 32px;
                    line-height: 42px;
                  }
                  .item2-2 {
                    height: 24px;
                    margin-top: 9px;
                    margin-left: 5px;
                    margin-right: 5px;
                    color: rgba(95, 101, 108, 1);
                    font-family: Microsoft YaHei;
                    font-size: 18px;
                    font-weight: 700;
                    line-height: 24px;
                  }
                  .item2-1 {
                    height: 42px;
                    color: rgba(206, 79, 81, 1);
                    font-size: 32px;
                    line-height: 42px;
                  }
                }
              }
            }
            .bottom {
              height: 22px;
              margin-top: 29px;
              display: flex;
              justify-content: flex-end;
              .icon {
                margin-top: 4px;
                width: 14px;
                height: 14px;
                margin-right: 8px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .text {
                height: 22px;
                color: rgba(132, 136, 142, 1);
                font-family: Microsoft YaHei;
                font-size: 14px;
                font-weight: 400;
                line-height: 24px;
              }
            }
          }
        }
        .center2-mid {
          width: 1479px;
          height: 189px;
          box-sizing: border-box;
          border: 1px solid rgba(234, 236, 238, 1);
          border-radius: 4px;
          margin: 40px auto 0;
        }
        .center2-footer {
          display: flex;
          .center2-footer-left {
            width: 732px;
            margin-left: 58px;
            margin-top: 21px;
            .header {
              display: flex;
              height: 48px;
              border-bottom: 1px solid rgba(234, 236, 238, 1);
              .icon {
                margin-top: 15px;
                margin-left: 20px;
                width: 20px;
                height: 20px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .text {
                margin-left: 20px;
                color: rgba(10, 87, 166, 1);
                font-family: Microsoft YaHei;
                font-size: 20px;
                font-weight: 700;
                line-height: 48px;
              }
            }
            .main {
              width: 732px;
              height: 470px;
              overflow-y: auto;
              overflow-x: hidden;
              display: flex;
              flex-wrap: wrap;
              box-sizing: border-box;
              padding-top: 9px;
              .item {
                width: 50%;
                height: 80px;
                display: flex;
                margin-top: 8px;
                .item-left {
                  width: 60px;
                  height: 60px;
                  margin-top: 10px;
                  margin-left: 16px;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
                .item-right {
                  margin-left: 13px;
                  .item-right-box1 {
                    margin-top: 15px;
                    height: 24px;
                    color: rgba(59, 65, 75, 1);
                    font-family: Microsoft YaHei;
                    font-size: 18px;
                    font-weight: 700;
                    line-height: 24px;
                  }
                  .item-right-box2 {
                    margin-top: 1px;
                    height: 24px;
                    color: rgba(95, 101, 108, 1);
                    font-family: Microsoft YaHei;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 24px;
                  }
                }
              }
            }
          }
          .center2-footer-right {
            margin-left: 21px;
            margin-top: 16px;
            width: 730px;
            .header {
              height: 54px;
              border-bottom: 1px solid rgba(234, 236, 238, 1);
              display: flex;
              .icon {
                width: 24px;
                height: 24px;
                margin-left: 16px;
                margin-top: 16px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .tab-box {
                margin-left: 20px;
                width: 500px;
                display: flex;
                .tab {
                  height: 54px;
                  margin-right: 24px;
                  color: rgba(95, 101, 108, 1);
                  font-family: Microsoft YaHei;
                  font-size: 20px;
                  font-weight: 400;
                  line-height: 54px;
                  padding: 0 2px;
                  box-sizing: border-box;
                }
                .tabActive {
                  font-weight: 700;
                  color: var(--color-main-active);
                  border-bottom: 3px solid var(--color-main-active);
                }
              }
              .right {
                width: 80px;
                margin-left: 90px;
                display: flex;
                justify-content: space-between;
                .btn {
                  width: 28px;
                  height: 28px;
                  margin-top: 13px;
                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
            .main {
              height: 475px;
              margin-top: 5px;
              overflow-y: hidden;
              .main-item {
                display: flex;
                margin-top: 20px;
                .id {
                  margin-top: 3px;
                  margin-left: 2px;
                  width: 36px;
                  height: 36px;
                  border-radius: 18px;
                  background: #e7f3ff;
                  line-height: 36px;
                  text-align: center;
                  color: var(--color-main-active);
                }
                .info {
                  margin-left: 13px;
                  width: 672px;
                  .info-header {
                    display: flex;
                    justify-content: space-between;
                    height: 24px;
                    .title {
                      height: 24px;
                      margin-top: 1px;
                      color: rgba(59, 65, 75, 1);
                      font-family: Microsoft YaHei;
                      font-size: 18px;
                      font-weight: 700;
                      line-height: 24px;
                    }
                    .tag {
                      height: 24px;
                      line-height: 24px;
                      border-radius: 4px;
                      padding: 0 8px;
                      background: var(--tag-btn2-bg-color);
                      color: var(--tag-btn2-text-color);
                      font-family: Microsoft YaHei;
                      font-size: 14px;
                      font-weight: 400;
                    }
                  }
                  .info-content {
                    margin-top: 3px;
                    color: rgba(95, 101, 108, 1);
                    font-family: Microsoft YaHei;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 30px;
                  }
                }
              }
            }
          }
        }
      }
      .center-footer {
        margin-top: 21px;
        height: 452px;
        display: flex;
        justify-content: center;
        .box3 {
          width: 792px;
          height: 452px;
          box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
          background: rgba(255, 255, 255, 1);
          border-radius: 4px;
          .box3-header {
            height: 48px;
            border-bottom: 1px solid rgba(240, 242, 244, 1);
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            .box3-header-left {
              display: flex;
              .box3-header-icon {
                margin-top: 14px;
                margin-left: 4px;
                width: 17px;
                height: 17px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .box3-header-title {
                margin-top: 11px;
                margin-left: 19px;
                height: 26px;
                color: rgba(10, 87, 166, 1);
                font-family: Microsoft YaHei;
                font-size: 20px;
                font-weight: 700;
                line-height: 26px;
              }
            }
            .box3-header-right {
              width: 49px;
              height: 24px;
              margin-top: 12px;
              margin-right: 7px;
              cursor: pointer;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .box3-main {
            height: 397px;
          }
        }
        .box4 {
          margin-left: 16px;
          width: 792px;
          height: 452px;
          box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
          background: rgba(255, 255, 255, 1);
          border-radius: 4px;
          .box4-header {
            margin: 0 auto;
            height: 53px;
            border-bottom: 1px solid rgba(240, 242, 244, 1);
            display: flex;
            .header-icon {
              margin-top: 16px;
              margin-left: 22px;
              width: 20px;
              height: 20px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .header-title {
              margin-top: 12px;
              margin-left: 18px;
              height: 26px;
              color: rgba(20, 89, 187, 1);
              font-family: Microsoft YaHei;
              font-size: 20px;
              font-weight: 700;
              line-height: 26px;
            }
            .header-right {
              margin-left: 550px;
              width: 49px;
              height: 24px;
              margin-top: 12px;
              cursor: pointer;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
          .box4-main {
            margin-top: 8px;
            height: 390px;
          }
        }
      }
      .center-footer1 {
        margin-top: 21px;
        height: 450px;
        display: flex;
        justify-content: center;
        .box5 {
          width: 792px;
          height: 450px;
          border-radius: 4px;
          box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
          background: rgba(255, 255, 255, 1);
          .box5-header {
            width: 792px;
            height: 48px;
            display: flex;
            border-bottom: 1px solid rgba(240, 242, 244, 1);
            .header-icon {
              width: 22px;
              height: 20px;
              margin-left: 25px;
              margin-top: 15px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .header-title {
              height: 26px;
              margin-top: 11px;
              margin-left: 13px;
              color: rgba(10, 87, 166, 1);
              font-family: Microsoft YaHei;
              font-size: 20px;
              font-weight: 700;
              line-height: 26px;
            }
          }
          .box5-main {
            height: 400px;
            box-sizing: border-box;
            .box5-item {
              width: 730px;
              margin-top: 16px;
              margin-left: 25px;
              display: flex;
              .icon {
                margin-top: 6px;
                width: 24px;
                height: 22px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .info {
                margin-left: 13px;
                width: 100%;
                .info-header {
                  display: flex;
                  margin-top: 4px;
                  justify-content: space-between;
                  .title {
                    height: 24px;
                    color: rgba(59, 65, 75, 1);
                    font-family: Microsoft YaHei;
                    font-size: 18px;
                    font-weight: 700;
                    line-height: 24px;
                  }
                  .time {
                    height: 24px;
                    color: rgba(95, 101, 108, 1);
                    font-family: Microsoft YaHei;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 24px;
                  }
                }
                .info-content {
                  margin-top: 6px;
                  color: rgba(95, 101, 108, 1);
                  font-family: Microsoft YaHei;
                  font-size: 16px;
                  font-weight: 400;
                  line-height: 24px;
                }
              }
            }
          }
        }
        .box6 {
          margin-left: 16px;
          width: 792px;
          height: 450px;
          border-radius: 4px;
          box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
          background: rgba(255, 255, 255, 1);
          .box6-header {
            width: 792px;
            height: 48px;
            display: flex;
            border-bottom: 1px solid rgba(240, 242, 244, 1);
            .header-icon {
              width: 22px;
              height: 20px;
              margin-left: 25px;
              margin-top: 15px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .header-title {
              height: 26px;
              margin-top: 11px;
              margin-left: 13px;
              color: rgba(10, 87, 166, 1);
              font-family: Microsoft YaHei;
              font-size: 20px;
              font-weight: 700;
              line-height: 26px;
            }
          }
          .box6-main {
            height: 401px;
          }
        }
      }
    }
    .home-main-footer {
      // width: 100%;
      height: 911px;
      background: rgba(248, 249, 250, 1);
      .home-main-footer-header {
        width: 1600px;
        height: 42px;
        margin: 36px auto;
        // background: orange;
        display: flex;
        justify-content: space-between;
        .btn-box {
          margin-top: 10px;
          width: 1000px;
          display: flex;
          .btn {
            height: 42px;
            color: rgba(95, 101, 108, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 400;
            line-height: 42px;
            padding: 0 24px;
            border-radius: 21px;
            background: rgba(20, 89, 187, 0);
            margin-right: 20px;
            cursor: pointer;
            &:hover {
              background: rgba(20, 89, 187, 0.1);
            }
          }
          .btnActive {
            padding: 0 24px;
            border-radius: 21px;
            background: rgba(20, 89, 187, 1);
            color: #fff;
            &:hover {
              color: #fff;
              background: rgba(20, 89, 187, 1);
            }
          }
        }
        .select-box {
          margin-top: 10px;
          height: 42px;
          box-sizing: border-box;
          padding: 5px 0;
        }
      }
      .home-main-footer-main {
        width: 1600px;
        height: 685px;
        box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
        background: rgba(255, 255, 255, 1);
        margin: 0 auto;
        box-sizing: border-box;
        padding: 10px 20px 0 20px;
        overflow-y: auto;
        .main-item {
          display: flex;
          height: 84px;
          border-bottom: 1px solid rgba(234, 236, 238, 1);
          .main-item-left {
            width: 105px;
            .left-box {
              margin-top: 17px;
              height: 24px;
              width: 95px;
              text-align: center;
              // color: rgba(22, 119, 255, 1);
              font-family: Microsoft YaHei;
              font-size: 14px;
              font-weight: 400;
              line-height: 24px;
              box-sizing: border-box;
              border-radius: 4px;
              // border: 1px solid rgba(186, 224, 255, 1);
              // background: rgba(230, 244, 255, 1);
            }
            .type1 {
              color: rgba(22, 119, 255, 1);
              border: 1px solid rgba(186, 224, 255, 1);
              background: rgba(230, 244, 255, 1);
            }
            .type2 {
              color: rgba(19, 168, 168, 1);
              border: 1px solid rgba(135, 232, 222, 1);
              background: rgba(230, 255, 251, 1);
            }
            .type3 {
              color: rgba(250, 140, 22, 1);
              border: 1px solid rgba(255, 213, 145, 1);
              background: rgba(255, 247, 230, 1);
            }
          }
          .main-item-center {
            width: 1300px;
            .main-item-center-box1 {
              margin-top: 15px;
              height: 24px;
              color: rgba(59, 65, 75, 1);
              font-family: Microsoft YaHei;
              font-size: 18px;
              font-weight: 700;
              line-height: 24px;
            }
            .main-item-center-box2 {
              margin-top: 4px;
              height: 24px;
              color: rgba(95, 101, 108, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 400;
              line-height: 24px;
            }
          }
          .main-item-right {
            display: flex;
            .main-item-right-text {
              margin-top: 18px;
              width: 128px;
              height: 24px;
              color: rgba(10, 87, 166, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 400;
              line-height: 24px;
            }
            .main-item-right-icon {
              margin-top: 22px;
              margin-left: 9px;
              width: 16px;
              height: 16px;
              img {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }
    }
  }
}
</style>