<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">142</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">38%</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">
              <img src="./assets/images/box1-left.png" alt="" />
            </div>
            <div class="box1-right">
              <img src="./assets/images/box1-right.png" alt="" />
            </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-header">
                <div class="header-left">
                  {{
                    "美国ITC发布对外国制造的半导体器件及其下游产品和组件的337部分终裁"
                  }}
                </div>
                <div class="header-right">
                  <div class="tag1">{{ "337" }}</div>
                  <div class="tag2">{{ "半导体" }}</div>
                </div>
              </div>
              <div class="info-box">
                <div class="info-header">
                  <div class="icon"></div>
                  <div class="time">{{ "2025-08-15" }}</div>
                  <div class="title">{{ "部分终裁" }}</div>
                </div>
                <div class="info-content">
                  {{
                    "对本案行政法官于2025年7月31日作出的初裁（No.36）不予复审，即基于申请方撤回，终止本案对美国注册专利号9,093,473第4项申诉的调查。"
                  }}
                </div>
              </div>
              <div class="list-box">
                <div class="list-item">
                  <div class="icon"></div>
                  <div class="list-left">{{ "调查案号：" }}</div>
                  <div class="list-right">{{ "337-TA-1443" }}</div>
                </div>
                <div class="list-item">
                  <div class="icon"></div>
                  <div class="list-left">{{ "涉及产品：" }}</div>
                  <div class="list-right">
                    {{
                      "对美出口、在美进口及销售的特定外国制造的半导体器件及其下游产品和组件（Certain Foreign-Fabricated ..."
                    }}
                  </div>
                </div>
                <div class="list-item">
                  <div class="icon"></div>
                  <div class="list-left">{{ "原告：" }}</div>
                  <div class="list-right">
                    {{
                      "爱尔兰Longitude Licensing Ltd.、爱尔兰Marlin Semiconductor Limited"
                    }}
                  </div>
                </div>
                <div class="list-item">
                  <div class="icon"></div>
                  <div class="list-left">{{ "被告：" }}</div>
                  <div class="list-right">
                    {{
                      "中国台湾地区Taiwan Semiconductor Manufacturing Company Limited of Taiwan、美国Apple Inc. of ...."
                    }}
                  </div>
                </div>
                <div class="list-item">
                  <div class="icon"></div>
                  <div class="list-left">{{ "涉案专利" }}</div>
                  <div class="list-right">
                    {{ "美国注册专利号7745847、9093473、9147747、9184292" }}
                  </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-center">
          <div class="center-center-box1">
            <div class="header">
              <div class="header-left">{{ "301调查" }}</div>
              <div class="header-right">{{ "52项" }}</div>
            </div>
            <div class="content-box">
              <div class="item">{{ "可能措施: 加征关税、限制进口" }}</div>
              <div class="item">
                {{ '依据《1974年贸易法》第301条针对"不合理或不公正贸易做法"' }}
              </div>
            </div>
          </div>
          <div class="center-center-box2">
            <div class="header">
              <div class="header-left">{{ "232调查" }}</div>
              <div class="header-right">{{ "3项" }}</div>
            </div>
            <div class="content-box">
              <div class="item">{{ "可能措施: 加征关税、限制进口" }}</div>
              <div class="item">
                {{
                  "依据《1962年贸易扩展法》第232条评估进口产品对国家安全影响"
                }}
              </div>
            </div>
          </div>
          <div class="center-center-box3">
            <div class="header">
              <div class="header-left">{{ "337调查" }}</div>
              <div class="header-right">{{ "87项" }}</div>
            </div>
            <div class="content-box">
              <div class="item">{{ "可能措施: 排除令、禁止令" }}</div>
              <div class="item">
                {{ "依据《1930年关税法》第337条针对知识产权侵权行为" }}
              </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 class="box4-header-right">
                <el-select
                  v-model="curAreaYear"
                  placeholder="选择发布时间"
                  style="width: 100px"
                >
                  <el-option
                    v-for="item in areaYearList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
            <div class="box4-main" id="chart2"></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="left">
            <div class="left-box1">
              <div class="left-box1-header">
                <div class="icon"></div>
                <div class="title">{{ "发布时间" }}</div>
              </div>
              <div class="left-box1-main">
                <div
                  class="time-label"
                  v-for="(item, index) in surveyYearList"
                  :key="index"
                >
                  <el-checkbox
                    v-model="item.selected"
                    :label="item.name"
                    size="large"
                  />
                </div>
              </div>
            </div>
            <div class="left-box2">
              <div class="left-box2-header">
                <div class="icon"></div>
                <div class="title">{{ "涉及领域" }}</div>
              </div>
              <div class="left-box2-main">
                <div
                  class="area-label"
                  v-for="(item, index) in surveyAreaList"
                  :key="index"
                >
                  <el-checkbox
                    v-model="item.selected"
                    :label="item.name"
                    size="large"
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="right-header">
              <div class="header-item1">{{ "调查名称" }}</div>
              <div class="header-item2">{{ "调查案号" }}</div>
              <div class="header-item3">{{ "涉及领域" }}</div>
              <div class="header-item4">{{ "案件状态" }}</div>
              <div class="header-item5">{{ "发布日期" }}</div>
            </div>
            <div class="right-main">
              <div class="item" v-for="(val, idx) in surveyInfoList" :key="idx">
                <div class="item-box1">
                  <div
                    class="name"
                    :class="{
                      name1: val.name === '301',
                      name2: val.name === '337',
                      name3: val.name === '232',
                    }"
                  >
                    {{ val.name }}
                  </div>
                  <div class="title">{{ val.title }}</div>
                </div>
                <div class="item-box2">{{ val.num }}</div>
                <div class="item-box3">{{ val.area }}</div>
                <div class="item-box4">{{ val.status }}</div>
                <div class="item-box5">{{ val.releaseDate }}</div>
              </div>
            </div>
            <div class="right-footer">
              <div class="footer-left">
                {{ "共105项调查" }}
              </div>
              <div class="footer-right">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="105"
                />
              </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 getMultiLineChart from "./utils/multiLineChart";
import getPieChart from "./utils/piechart";

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

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

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

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

const categoryList = ref(["全部调查", "301调查", "232调查", "337调查"]);

const activeCate = ref("全部调查");
const activeHylyId = ref("");

const handleClickCate = (cate) => {
  console.log(cate);

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

// 绘制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: [
    "2014",
    "2015",
    "2016",
    "2017",
    "2018",
    "2019",
    "2020",
    "2021",
    "2022",
    "2023",
    "2024",
    "2025",
  ],
  data: [
    {
      name: "337调查",
      value: [73, 32, 42, 48, 38, 49, 63, 75, 70, 86, 95, 87],
    },
    {
      name: "301调查",
      value: [8, 3, 2, 8, 9, 10, 12, 18, 16, 18, 20, 22],
    },
    {
      name: "232调查",
      value: [1, 2, 1, 1, 1, 1, 1, 2, 1, 1, 2, 3],
    },
  ],
});

// 涉及领域
const curAreaYearList = ref([
  {
    name: "半导体",
    value: 50,
  },
  {
    name: "电子设备",
    value: 46,
  },
  {
    name: "显示技术",
    value: 40,
  },
  {
    name: "新能源",
    value: 32,
  },
  {
    name: "通信设备",
    value: 31,
  },
  {
    name: "汽车",
    value: 30,
  },
  {
    name: "其他",
    value: 24,
  },
]);

const chart2ColorList = ref([
  "#4096FF",
  "#FFA39E",
  "#ADC6FF",
  "#FFC069",
  "#B5F5EC",
  "#B37FEB",
  "#D6E4FF",
]);

const areaYearList = ref([
  {
    label: "2025",
    value: "2025",
  },
  {
    label: "2024",
    value: "2024",
  },
  {
    label: "2023",
    value: "2023",
  },
  {
    label: "2022",
    value: "2022",
  },
  {
    label: "2021",
    value: "2021",
  },
  {
    label: "2020",
    value: "2020",
  },
]);

const curAreaYear = ref("2025");

const surveyYearList = ref([
  {
    name: "全部时间",
    selected: false,
  },
  {
    name: "2025年",
    selected: false,
  },
  {
    name: "2024年",
    selected: false,
  },
  {
    name: "2023年",
    selected: false,
  },
  {
    name: "2022年",
    selected: false,
  },
  {
    name: "2021年",
    selected: false,
  },
]);
const surveyAreaList = ref([
  {
    name: "人工智能",
    selected: false,
  },
  {
    name: "半导体/芯片",
    selected: false,
  },
  {
    name: "电子设备",
    selected: false,
  },
  {
    name: "显示技术",
    selected: false,
  },
  {
    name: "新能源",
    selected: false,
  },
  {
    name: "通信设备",
    selected: false,
  },
]);

const surveyInfoList = ref([
  {
    name: "301",
    title: "某些车辆远程信息处理、车队管理以及基于视频的安全系统、设备和组件",
    num: "337-TA-1393",
    area: "半导体",
    status: "正在调查",
    releaseDate: "2025年9月1日",
  },
  {
    name: "337",
    title: "某些蒸发器设备,其中使用的墨盒及其组件(II)",
    num: "337-TA-1392",
    area: "制造业",
    status: "正在调查",
    releaseDate: "2025年8月15日",
  },
  {
    name: "301",
    title: "某些Topcon太阳能电池,模块,面板,组件及其组件和包含相同产品",
    num: "337-TA-1422和337-TA-1425(合并)",
    area: "半导体",
    status: "正在调查",
    releaseDate: "2025年8月10日",
  },
  {
    name: "337",
    title: "某些光伏干线总线电缆组件及其组件",
    num: "337-TA-1438",
    area: "光伏",
    status: "正在调查",
    releaseDate: "2025年7月29日",
  },
  {
    name: "337",
    title: "某些外国制造的半导体器件、包含相同产品及其组件的组件",
    num: "337-TA-1443",
    area: "半导体",
    status: "正在调查",
    releaseDate: "2025年7月18日",
  },
  {
    name: "301",
    title: "某些车辆远程信息处理、车队管理以及基于视频的安全系统、设备及其组件",
    num: "337-TA-1441",
    area: "半导体",
    status: "终止调查",
    releaseDate: "2025年7月1日",
  },
  {
    name: "337",
    title: "某些包含相同功能的无线前端模块和设备",
    num: "337-TA-1435",
    area: "半导体",
    status: "正在调查",
    releaseDate: "2025年6月14日",
  },
  {
    name: "337",
    title:
      "用于液晶显示器的某些玻璃基板,含有相同产品的产品以及制造相同方法的玻璃基板",
    num: "337-TA-1433",
    area: "显示技术",
    status: "正在调查",
    releaseDate: "2025年6月5日",
  },
  {
    name: "337",
    title: "某些Topcon太阳能电池,模块,面板,组件及其组件和包含相同产品",
    num: "337-TA-1422和337-TA-1425(合并)",
    area: "光伏",
    status: "终止调查",
    releaseDate: "2025年8月10日",
  },
  {
    name: "232",
    title: "某些蒸发器设备,其中使用的墨盒及其组件(II)",
    num: "337-TA-1392",
    area: "制造业",
    status: "终止调查",
    releaseDate: "2025年8月15日",
  },
]);

onMounted(async () => {
  let chart1 = getMultiLineChart(
    chart1Data.value.title,
    chart1Data.value.data[0].value,
    chart1Data.value.data[1].value,
    chart1Data.value.data[2].value
  );
  setChart(chart1, "chart1");

  let chart2 = getPieChart(curAreaYearList.value, chart2ColorList.value);
  setChart(chart2, "chart2");
});
</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 {
        box-sizing: border-box;
        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;
        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: 220px;
            width: 24px;
            height: 48px;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .box1-right {
            position: absolute;
            right: 0;
            top: 220px;
            width: 24px;
            height: 48px;
            cursor: pointer;
              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 {
            width: 1064px;
            height: 354px;
            margin-top: 22px;
            .box1-main-header {
              width: 990px;
              height: 54px;
              display: flex;
              justify-content: space-between;
              .header-left {
                padding-left: 22px;
                color: rgba(10, 87, 166, 1);
                font-family: Microsoft YaHei;
                font-size: 20px;
                font-weight: 700;
                line-height: 26px;
              }
              .header-right {
                display: flex;
                width: 200px;
                justify-content: flex-end;
                .tag1 {
                  height: 24px;
                  line-height: 24px;
                  padding: 0 8px;
                  box-sizing: border-box;
                  color: rgba(10, 87, 166, 1);
                  border: 1px solid rgba(145, 202, 255, 1);
                  border-radius: 4px;
                  background: rgba(230, 244, 255, 1);
                }
                .tag2 {
                  margin-left: 8px;
                  height: 24px;
                  line-height: 24px;
                  padding: 0 8px;
                  box-sizing: border-box;
                  color: rgba(19, 168, 168, 1);
                  border: 1px solid rgba(135, 232, 222, 1);
                  border-radius: 4px;
                  background: rgba(230, 255, 251, 1);
                }
              }
            }
            .info-box {
              margin-left: 6px;
              width: 989px;
              height: 108px;
              box-sizing: border-box;
              border: 1px solid rgba(231, 243, 255, 1);
              border-radius: 4px;
              background: rgba(246, 250, 255, 1);
              .info-header {
                height: 38px;
                display: flex;
                .icon {
                  width: 4px;
                  height: 4px;
                  border-radius: 2px;
                  background: rgba(59, 65, 75, 1);
                  margin-left: 24px;
                  margin-top: 20px;
                }
                .time {
                  width: 98px;
                  height: 24px;
                  margin-top: 10px;
                  margin-left: 12px;
                  color: rgba(59, 65, 75, 1);
                  font-family: Microsoft YaHei;
                  font-size: 16px;
                  font-weight: 700;
                  line-height: 24px;
                }
                .title {
                  margin-left: 11px;
                  margin-top: 10px;
                  height: 24px;
                  color: rgba(59, 65, 75, 1);
                  font-family: Microsoft YaHei;
                  font-size: 16px;
                  font-weight: 700;
                  line-height: 24px;
                }
              }
              .info-content {
                width: 909px;
                height: 60px;
                color: rgba(59, 65, 75, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 400;
                line-height: 30px;
                margin-left: 41px;
                margin-top: 4px;
              }
            }
            .list-box {
              margin-top: 18px;
              margin-left: 28px;
              width: 940px;
              height: 185px;
              .list-item {
                height: 37px;
                display: flex;
                .icon {
                  width: 4px;
                  height: 4px;
                  border-radius: 2px;
                  background: rgba(59, 65, 75, 1);
                  margin-top: 16px;
                }
                .list-left {
                  margin-left: 18px;
                  line-height: 37px;
                  width: 100px;
                  color: rgba(59, 65, 75, 1);
                  font-family: Microsoft YaHei;
                  font-size: 16px;
                  font-weight: 700;
                }
                .list-right {
                  line-height: 37px;
                  margin-left: 17px;
                  color: rgba(59, 65, 75, 1);
                  font-family: Microsoft YaHei;
                  font-size: 16px;
                  font-weight: 400;
                }
              }
            }
          }
        }
        .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;
              cursor: pointer;
            }
          }
          .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-center {
        width: 1600px;
        margin: 24px auto;
        height: 142px;
        margin-top: 24px;
        display: flex;
        justify-content: space-between;
        .center-center-box1 {
          width: 520px;
          height: 142px;
          background: #fff;
          border-radius: 4px;
          box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
          position: relative;
          &::before {
            content: "";
            position: absolute;
            z-index: 99;
            left: 0;
            top: 15px;
            width: 4px;
            height: 111px;
            background: rgba(250, 140, 22, 1);
          }
          .header {
            height: 56px;
            display: flex;
            justify-content: space-between;
            .header-left {
              margin-left: 30px;
              margin-top: 26px;
              color: rgba(59, 65, 75, 1);
              font-family: Microsoft YaHei;
              font-size: 20px;
              font-weight: 700;
              line-height: 26px;
            }
            .header-right {
              margin-top: 28px;
              margin-right: 35px;
              height: 24px;
              color: rgba(250, 140, 22, 1);
              font-family: Microsoft YaHei;
              font-size: 30px;
              font-weight: 700;
              line-height: 24px;
            }
          }
          .content-box {
            margin-left: 30px;
            .item {
              height: 24px;
              color: rgba(95, 101, 108, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 400;
              line-height: 24px;
              margin-top: 8px;
            }
          }
        }
        .center-center-box2 {
          width: 520px;
          height: 142px;
          background: #fff;
          border-radius: 4px;
          box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
          position: relative;
          &::before {
            content: "";
            position: absolute;
            z-index: 99;
            left: 0;
            top: 15px;
            width: 4px;
            height: 111px;
            background: rgba(114, 46, 209, 1);
          }
          .header {
            height: 56px;
            display: flex;
            justify-content: space-between;
            .header-left {
              margin-left: 30px;
              margin-top: 26px;
              color: rgba(59, 65, 75, 1);
              font-family: Microsoft YaHei;
              font-size: 20px;
              font-weight: 700;
              line-height: 26px;
            }
            .header-right {
              margin-top: 28px;
              margin-right: 35px;
              height: 24px;
              color: rgba(114, 46, 209, 1);
              font-family: Microsoft YaHei;
              font-size: 30px;
              font-weight: 700;
              line-height: 24px;
            }
          }
          .content-box {
            margin-left: 30px;
            .item {
              height: 24px;
              color: rgba(95, 101, 108, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 400;
              line-height: 24px;
              margin-top: 8px;
            }
          }
        }
        .center-center-box3 {
          width: 520px;
          height: 142px;
          background: #fff;
          border-radius: 4px;
          box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
          position: relative;
          &::before {
            content: "";
            position: absolute;
            z-index: 99;
            left: 0;
            top: 15px;
            width: 4px;
            height: 111px;
            background: rgba(10, 87, 166, 1);
          }
          .header {
            height: 56px;
            display: flex;
            justify-content: space-between;
            .header-left {
              margin-left: 30px;
              margin-top: 26px;
              color: rgba(59, 65, 75, 1);
              font-family: Microsoft YaHei;
              font-size: 20px;
              font-weight: 700;
              line-height: 26px;
            }
            .header-right {
              margin-top: 28px;
              margin-right: 35px;
              height: 24px;
              color: rgba(10, 87, 166, 1);
              font-family: Microsoft YaHei;
              font-size: 30px;
              font-weight: 700;
              line-height: 24px;
            }
          }
          .content-box {
            margin-left: 30px;
            .item {
              height: 24px;
              color: rgba(95, 101, 108, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 400;
              line-height: 24px;
              margin-top: 8px;
            }
          }
        }
      }
      .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 {
                height: 28px;
                padding: 0 8px;
                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: 521px;
            height: 53px;
            box-sizing: border-box;
            padding: 0 20px;
            border-bottom: 1px solid rgba(240, 242, 244, 1);
            display: flex;
            position: relative;
            .header-icon {
              margin-top: 18px;
              width: 18px;
              height: 18px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .header-title {
              margin-top: 16px;
              margin-left: 15px;
              height: 22px;
              color: rgba(20, 89, 187, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 700;
              line-height: 22px;
            }
            .box4-header-right {
              position: absolute;
              right: 20px;
              top: 10px;
            }
          }
          .box4-main {
            width: 452px;
            height: 360px;
            margin: 8px auto;
          }
        }
      }
    }
    .home-main-footer {
      // width: 100%;
      height: 1059px;
      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 {
          height: 42px;
          box-sizing: border-box;
          padding: 5px 0;
        }
      }
      .home-main-footer-main {
        width: 1600px;
        margin-bottom: 20px;
        height: 985px;
        // 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;
        display: flex;
        .left {
          width: 300px;
          height: 560px;
          border-radius: 4px;
          box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
          background: rgba(255, 255, 255, 1);
          .left-box1 {
            margin-top: 17px;
            height: 260px;
            .left-box1-header {
              display: flex;
              .icon {
                width: 8px;
                height: 16px;
                margin-top: 4px;
                border-radius: 2px 2px 0 0;
                background: rgba(10, 87, 166, 1);
              }
              .title {
                height: 2px;
                margin-left: 17px;
                color: rgba(10, 87, 166, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 700;
                line-height: 24px;
              }
            }
            .left-box1-main {
              margin-top: 10px;
              .time-label {
                height: 35px;
                margin-left: 25px;
              }
            }
          }
          .left-box2 {
            margin-top: 17px;
            height: 260px;
            .left-box2-header {
              display: flex;
              .icon {
                width: 8px;
                height: 16px;
                margin-top: 4px;
                border-radius: 2px 2px 0 0;
                background: rgba(10, 87, 166, 1);
              }
              .title {
                height: 2px;
                margin-left: 17px;
                color: rgba(10, 87, 166, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 700;
                line-height: 24px;
              }
            }
            .left-box2-main {
              margin-top: 10px;
              .area-label {
                height: 35px;
                margin-left: 25px;
              }
            }
          }
        }
        .right {
          margin-left: 16px;
          width: 1284px;
          height: 899px;
          border-radius: 4px;
          box-shadow: 0px 0px 15px 0px rgba(60, 87, 126, 0.2);
          background: rgba(255, 255, 255, 1);
          .right-header {
            height: 54px;
            background: rgba(59, 65, 75, 1);
            display: flex;
            .header-item1 {
              width: 500px;
              color: rgba(255, 255, 255, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 700;
              line-height: 54px;
              padding-left: 80px;
              box-sizing: border-box;
            }
            .header-item2 {
              width: 196px;
              color: rgba(255, 255, 255, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 700;
              line-height: 54px;
              padding-left: 20px;
              box-sizing: border-box;
            }
            .header-item3 {
              width: 196px;
              color: rgba(255, 255, 255, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 700;
              line-height: 54px;
              padding-left: 20px;
              box-sizing: border-box;
            }
            .header-item4 {
              width: 196px;
              color: rgba(255, 255, 255, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 700;
              line-height: 54px;
              padding-left: 20px;
              box-sizing: border-box;
            }
            .header-item5 {
              width: 196px;
              color: rgba(255, 255, 255, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 700;
              line-height: 54px;
              padding-left: 20px;
              box-sizing: border-box;
            }
          }
          .right-main {
            height: 780px;
            // background: orange;
            .item {
              display: flex;
              padding: 16px 0;
              // height: 56px;
              &:nth-child(2n) {
                background: rgba(247, 248, 249, 1);
              }
              .item-box1 {
                width: 500px;
                display: flex;
                .name {
                  height: 22px;
                  padding: 0 8px;
                  box-sizing: border-box;
                  border-radius: 4px;
                  margin-left: 32px;
                  margin-top: 10px;
                  // display: flex;
                  // align-items: center;
                }
                .name1 {
                  color: rgba(250, 140, 22, 1);
                  border: 1px solid rgba(255, 213, 145, 1);
                  background: rgba(255, 247, 230, 1);
                }
                .name2 {
                  color: rgba(10, 87, 166, 1);
                  border: 1px solid rgba(145, 202, 255, 1);
                  background: rgba(230, 244, 255, 1);
                }
                .name3 {
                  color: rgba(114, 46, 209, 1);
                  border: 1px solid rgba(211, 173, 247, 1);
                  background: rgba(249, 240, 255, 1);
                }
                .title {
                  margin-left: 12px;
                  color: rgba(59, 65, 75, 1);
                  font-family: Microsoft YaHei;
                  font-size: 16px;
                  font-weight: 700;
                  line-height: 24px;
                  display: flex;
                  align-items: center;
                }
              }
              .item-box2 {
                width: 196px;
                padding-left: 20px;
                box-sizing: border-box;
                color: rgba(59, 65, 75, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 400;
                line-height: 24px;
                display: flex;
                align-items: center;
              }
              .item-box3 {
                width: 196px;
                padding-left: 20px;
                box-sizing: border-box;
                color: rgba(59, 65, 75, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 400;
                line-height: 24px;
                display: flex;
                align-items: center;
              }
              .item-box4 {
                width: 196px;
                padding-left: 20px;
                box-sizing: border-box;
                color: rgba(59, 65, 75, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 400;
                line-height: 24px;
                display: flex;
                align-items: center;
              }
              .item-box5 {
                width: 196px;
                padding-left: 20px;
                box-sizing: border-box;
                color: rgba(59, 65, 75, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 400;
                line-height: 24px;
                display: flex;
                align-items: center;
              }
            }
          }
          .right-footer {
            display: flex;
            // height: 60px;
            // background: orange;
            justify-content: space-between;
            .footer-left {
              color: rgba(59, 65, 75, 1);
              font-family: Microsoft YaHei;
              font-size: 14px;
              font-weight: 400;
              line-height: 18px;
              margin-left: 24px;
              margin-top: 6px;
            }
            .footer-right {
              margin-right: 24px;
            }
          }
        }
      }
    }
  }
}
</style>