<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-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">
                <div class="right-box rightBoxActive">
                  {{ "月度" }}
                </div>
                <div class="right-box">
                  {{ "年度" }}
                </div>
              </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>
            <div class="box4-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";


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: "关于进一步延长TikTok执法宽限期的行政令",
    time: "2025年9月16日",
  },
  {
    type: "总统政令",
    status: 1,
    title: "关于进一步延长TikTok执法宽限期的行政令",
    time: "2025年9月16日",
  },
  {
    type: "总统政令",
    status: 1,
    title: "关于进一步延长TikTok执法宽限期的行政令",
    time: "2025年9月16日",
  },
  {
    type: "总统政令",
    status: 1,
    title: "关于进一步延长TikTok执法宽限期的行政令",
    time: "2025年9月16日",
  },
  {
    type: "总统政令",
    status: 3,
    title: "关于进一步延长TikTok执法宽限期的行政令",
    time: "2025年9月16日",
  },
  {
    type: "总统政令",
    status: 1,
    title: "关于进一步延长TikTok执法宽限期的行政令",
    time: "2025年9月16日",
  },
  {
    type: "总统政令",
    status: 2,
    title: "关于进一步延长TikTok执法宽限期的行政令",
    time: "2025年9月16日",
  },
  {
    type: "总统政令",
    status: 1,
    title: "关于进一步延长TikTok执法宽限期的行政令",
    time: "2025年9月16日",
  },
  {
    type: "总统政令",
    status: 3,
    title: "关于进一步延长TikTok执法宽限期的行政令",
    time: "2025年9月16日",
  },
  {
    type: "总统政令",
    status: 3,
    title: "关于进一步延长TikTok执法宽限期的行政令",
    time: "2025年9月16日",
  },
  {
    type: "总统政令",
    status: 1,
    title: "关于进一步延长TikTok执法宽限期的行政令",
    time: "2025年9月16日",
  },
]);

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) => {
  console.log(cate);

  activeCate.value = cate.hylymc;
  activeHylyId.value = cate.hylyid;
  handleGetBillsByType();
};


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({
  title: [
    "2024-09",
    "2024-10",
    "2024-11",
    "2024-12",
    "2025-01",
    "2025-02",
    "2025-03",
    "2025-04",
    "2025-05",
    "2025-06",
    "2025-07",
    "2025-08",
  ],
  data: [
    {
      name: "提出法案",
      value: [145, 52, 84, 99, 71, 96, 128, 144, 140, 168, 188, 172],
    },
  ],
});


// 根据法案类型获取法案列表
// 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) {}
// };

onMounted(async () => {

  let chart1 = getMultiLineChart(
    chart1Data.value.title,
    chart1Data.value.data[0].value
  );
  setChart(chart1, "chart1");
});
</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;
      // position: sticky;
      // left: 0;
      // top: 0;
      // z-index: 9999;
      .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;
          padding-left: 31px;
          padding-right: 41px;
          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;
              .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;
            }
          }
          .box1-main {
            display: flex;
            height: 354px;
            margin-top: 22px;
            .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;
          padding-right: 20px;
          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;
            .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;
            }
          }
          .box2-main {
            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-top: 1px solid rgba(240, 242, 244, 1);
                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-footer {
        margin-top: 21px;
        height: 450px;
        display: flex;
        justify-content: center;
        .box3 {
          width: 1064px;
          height: 450px;
          box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
          background: rgba(255, 255, 255, 1);
          .box3-header {
            height: 53px;
            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: 15px;
                width: 13px;
                height: 13px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .box3-header-title {
                margin-top: 16px;
                margin-left: 22px;
                height: 22px;
                color: rgba(20, 89, 187, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 700;
                line-height: 22px;
              }
            }
            .box3-header-right {
              display: flex;
              justify-content: flex-end;
              width: 178px;
              height: 22px;
              margin-top: 11px;
              .right-box {
                width: 48px;
                height: 28px;
                text-align: center;
                line-height: 28px;
                box-sizing: border-box;
                border: 1px solid rgba(230, 231, 232, 1);
                border-radius: 4px;
                background: rgba(255, 255, 255, 1);
                margin-left: 8px;
                cursor: pointer;
              }
              .rightBoxActive {
                color: rgba(10, 87, 166, 1);
                border: 1px solid rgba(10, 87, 166, 1);
                border-radius: 4px;
                background: rgba(246, 250, 255, 1);
              }
            }
          }
          .box3-main {
            height: 397px;
          }
        }
        .box4 {
          margin-left: 20px;
          width: 521px;
          height: 450px;
          box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
          background: rgba(255, 255, 255, 1);
          .box4-header {
            width: 452px;
            margin: 0 auto;
            height: 53px;
            border-bottom: 1px solid rgba(240, 242, 244, 1);
            display: flex;
            .header-icon {
              margin-top: 18px;
              width: 18px;
              height: 18px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .header-title {
              margin-top: 16px;
              margin-left: 26px;
              height: 22px;
              color: rgba(20, 89, 187, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 700;
              line-height: 22px;
            }
          }
          .box4-main {
            width: 452px;
            margin-top: 8px;
            height: 360px;
          }
        }
      }
    }
    .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 {
          width: 1000px;
          display: flex;
          .btn {
            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: 687px;
        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: 20px;
        overflow-y: auto;
        .main-item {
          display: flex;
          height: 84px;
          border-top: 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>