<template>
  <div class="home-wrapper">
    <div class="home-header">
      <span>国家科技安全 </span>> <span>中美博弈概览 </span>>
      <span>科技法案 </span>
    </div>
    <div class="home-main">
      <div class="home-main-header">
        <div class="home-main-header-center">
          <el-input
            v-model="input"
            style="width: 800px; 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">14433</div>
            <div class="item-footer">科技动向</div>
          </div>
          <div class="home-main-header-footer-item">
            <div class="item-top">1986</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" @click="handleSwithCurBill('left')">
              <div class="icon">
                <img src="./assets/images/box1-left.png" alt="" />
              </div>
            </div>
            <div class="box1-right" @click="handleSwithCurBill('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">
                <div class="box1-main-left-title">
                  <!-- "H.R.1(119th)-大而美法案" -->
                  {{ curBill.billName }}
                </div>
                <div class="box1-main-left-info">
                  <div
                    class="info-box"
                    :class="{
                      info1: item.status === 1,
                      info2: item.status === 2,
                      info3: item.status === 3,
                      info4: item.status === 4,
                    }"
                    v-for="(item, index) in curBill.hylyList"
                    :key="index"
                  >
                    {{ item }}
                  </div>
                </div>
                <div class="box1-main-left-info1">
                  <div class="info1-box">
                    <div class="icon"></div>
                    <div class="info1-box-left">{{ "提案人：" }}</div>
                    <div class="info1-box-right">{{ curBill.tarName }}</div>
                  </div>
                  <div class="info1-box">
                    <div class="icon"></div>
                    <div class="info1-box-left">{{ "提出时间：" }}</div>
                    <div class="info1-box-right">
                      {{ curBill.introductionDate }}
                    </div>
                  </div>
                </div>
                <div class="box1-main-left-info2">
                  <div
                    class="time-line"
                    :style="{ height: 38 * 3 + 'px' }"
                  ></div>
                  <div
                    class="info2-item"
                    v-for="(item, index) in curBill.dyqkList"
                    :key="index"
                  >
                    <div class="item-icon">
                      <img src="./assets/images/info2-icon.png" alt="" />
                    </div>
                    <div
                      class="item-time"
                      :class="{ itemTimeActive: item.status === 1 }"
                    >
                      {{ item.dysj }}
                    </div>
                    <div
                      class="item-title"
                      :class="{ itemTitleActive: item.status === 1 }"
                    >
                      {{ item.dyms }}
                    </div>
                  </div>
                  <!-- <div class="info2-item">
                    <div class="item-icon">
                      <img src="./assets/images/info2-icon.png" alt="" />
                    </div>
                    <div class="item-time">{{ "2025-07-04" }}</div>
                    <div class="item-title">{{ "成为公法 No: 119-21。" }}</div>
                  </div>
                  <div class="info2-item">
                    <div class="item-icon">
                      <img src="./assets/images/info2-icon.png" alt="" />
                    </div>
                    <div class="item-time">{{ "2025-07-04" }}</div>
                    <div class="item-title">{{ "成为公法 No: 119-21。" }}</div>
                  </div>
                  <div class="info2-item">
                    <div class="item-icon">
                      <img src="./assets/images/info2-icon.png" alt="" />
                    </div>
                    <div class="item-time">{{ "2025-07-04" }}</div>
                    <div class="item-title">{{ "成为公法 No: 119-21。" }}</div>
                  </div>
                  <div class="info2-item">
                    <div class="item-icon">
                      <img src="./assets/images/info2-icon.png" alt="" />
                    </div>
                    <div class="item-time">{{ "2025-07-04" }}</div>
                    <div class="item-title">{{ "成为公法 No: 119-21。" }}</div>
                  </div> -->
                </div>
              </div>
              <div class="box1-main-right">
                <img src="./assets/images/box1-main-right-img.png" alt="" />
                <div class="inner-box">
                  <div class="inner-box-header">
                    <div class="inner-box-title">
                      {{ "大而美法案涉险通过参议院表决，众议院将继续..." }}
                    </div>
                    <div class="inner-box-time">{{ "1小时前" }}</div>
                  </div>
                  <div class="inner-box-content">
                    {{
                      "三名美国共和党众议员(2025年7月21日)致函几家美国科技巨头公司的负责人，询问他们是否已经采取了充分的安全保障措施以有效解..."
                    }}
                  </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">
                  <div class="icon1"></div>
                  <div class="text">{{ "提出法案" }}</div>
                </div>
                <div class="right-box">
                  <div class="icon2"></div>
                  <div class="text">{{ "通过法案" }}</div>
                </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">
              <div
                class="box4-main-item"
                v-for="(item, index) in billTrendList"
                :key="index"
              >
                <div
                  class="left"
                  :class="{
                    leftStatus2: index === 1,
                    leftStatus3: index === 2,
                  }"
                >
                  {{ index < 3 ? index + 1 : "" }}
                </div>
                <div class="center">{{ item.title }}</div>
                <div class="right">{{ item.no }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="home-main-footer">
        <div class="home-main-footer-header">
          <div class="btn-wrapper">
            <div class="btn-box">
              <div
                class="btn"
                :class="{ btnActive: activeCate === cate.hylymc }"
                v-for="(cate, index) in categoryList"
                :key="index"
                @click="handleClickCate(cate)"
              >
                {{ cate.hylymc }}
              </div>
            </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="(bill, index) in curBillList"
            :key="index"
          >
            <div class="main-item-box1">
              <img :src="bill.img" alt="" />
            </div>
            <div class="main-item-box2">
              {{ bill.billName }}
            </div>
            <div class="main-item-box3">{{ bill.introductionDate }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

import { getHotBills, getBillsByType, getHylyList } from "@/api/home";

import headerIcon1 from "./assets/icons/header-icon1.png";
import headerIcon2 from "./assets/icons/header-icon2.png";
import headerIcon3 from "./assets/icons/header-icon3.png";
import headerIcon4 from "./assets/icons/header-icon4.png";
import headerIcon5 from "./assets/icons/header-icon5.png";

import getMultiLineChart from "./utils/multiLineChart";

import bill1 from "./assets/images/bill1.png";
import bill2 from "./assets/images/bill2.png";
import bill3 from "./assets/images/bill3.png";
import bill4 from "./assets/images/bill4.png";
import bill5 from "./assets/images/bill5.png";
import bill6 from "./assets/images/bill6.png";
import bill7 from "./assets/images/bill7.png";
import bill8 from "./assets/images/bill8.png";
import bill9 from "./assets/images/bill9.png";
import bill10 from "./assets/images/bill10.png";
import bill11 from "./assets/images/bill11.png";
import bill12 from "./assets/images/bill12.png";

const billList = ref([]);
const curBillListIndex = ref(0);

const handleSwithCurBill = (name) => {
  if (name === "left") {
    if (curBillListIndex.value === 0) {
      curBillListIndex.value = billList.value.length - 1;
    } else {
      curBillListIndex.value--;
    }
  } else {
    if (curBillListIndex.value === billList.value.length - 1) {
      curBillListIndex.value = 0;
    } else {
      curBillListIndex.value++;
    }
  }
  curBill.value = billList.value[curBillListIndex.value];
};

// 当前法案
const curBill = ref({
  billName: "",
  billId: 0,
  dyqkList: [],
  hylyList: [],
  tarName: "",
  introductionDate: "",
});

const handleClickToDetail = () => {
  window.sessionStorage.setItem("billId", curBill.value.billId);
  router.push("/billLayout");
};

const billTrendList = ref([
  {
    title: "限制与中国合作",
    no: "H.R.2670",
  },
  {
    title: "限制中国获取技术",
    no: "H.R.2471",
  },
  {
    title: "禁止在中国建设半导体产能",
    no: "H.R.5895",
  },
  {
    title: "限制中国产燃油进口",
    no: "S.870",
  },
  {
    title: "禁止政府部门采购受控半导体或服务",
    no: "H.R.6395",
  },
  {
    title: "禁止向部分中国实体提供资金",
    no: "H.R.3935",
  },
  {
    title: "限制采购中国生产电池",
    no: "H.R.7776",
  },
  {
    title: "重视新兴中国技术公司威胁",
    no: "H.R.3935",
  },
  {
    title: "禁止卫星出口至中国",
    no: "S.870",
  },
  {
    title: "禁购华为设备",
    no: "H.R.5895",
  },
]);

const warningList = ref([
  {
    title: "美国大而美法案落地，总统签署通过",
    time: "一天前",
    status: "特别重大",
  },
  {
    title: "美大而美法案7月1日以51:50的票数通过...",
    time: "一天前",
    status: "特别重大",
  },
  {
    title: "首次提出“限制外国敏感实体获取补贴”",
    time: "一天前",
    status: "重大风险",
  },
  {
    title: "将中国企业海外子公司、合资公司纳入受...",
    time: "一天前",
    status: "重大风险",
  },
  {
    title: "H.R.8333《生物安全法案》将华大基因等...",
    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 curBillList = ref([
  {
    billName: "大而美法案",
    introductionDate: "2025年7月4日",
    img: bill1,
  },
  {
    billName: "GENIUS稳定币法案",
    introductionDate: "2025年7月5日",
    img: bill2,
  },
  {
    billName: "美越贸易协议",
    introductionDate: "2025年7月6日",
    img: bill3,
  },
  {
    billName: "美越贸易协议",
    introductionDate: "2025年7月7日",
    img: bill4,
  },
  {
    billName: "汽车零部件25%关税实施规则",
    introductionDate: "2025年7月10日",
    img: bill5,
  },
  {
    billName: "汽车零部件25%关税实施规则",
    introductionDate: "2025年7月12日",
    img: bill6,
  },
  {
    billName: "小额豁免包裹政策调整",
    introductionDate: "2025年7月14日",
    img: bill7,
  },
  {
    billName: "NIH预算否决案",
    introductionDate: "2025年7月15日",
    img: bill8,
  },
  {
    billName: "得州国会选区重划法案",
    introductionDate: "2025年7月17日",
    img: bill9,
  },
  {
    billName: "美越贸易协议",
    introductionDate: "2025年7月24日",
    img: bill10,
  },
  {
    billName: "美越贸易协议",
    introductionDate: "2025年8月4日",
    img: bill11,
  },
  {
    billName: "美越贸易协议",
    introductionDate: "2025年8月8日",
    img: bill12,
  },
]);

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 navList = ref([
  {
    icon: headerIcon1,
    activeIcno: headerIcon1,
    name: "首页",
    path: "/home",
  },
  {
    icon: headerIcon2,
    activeIcno: headerIcon2,
    name: "国家",
    path: "/country",
  },
  {
    icon: headerIcon3,
    activeIcno: headerIcon3,
    name: "领域",
    path: "/area",
  },
  {
    icon: headerIcon4,
    activeIcno: headerIcon4,
    name: "要素",
    path: "/home",
  },
  {
    icon: headerIcon5,
    activeIcno: headerIcon5,
    name: "事件",
    path: "/home",
  },
]);

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],
    },
    {
      name: "通过法案",
      value: [6, 3, 4, 6, 11, 5, 2, 14, 16, 27, 28, 44],
    },
  ],
});

// 获取热门法案
const handleGetHotBills = async () => {
  try {
    const res = await getHotBills();
    console.log("热门法案", res);
    billList.value = res.data;
  } catch (error) {
    console.error(error);
  }
};

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

onMounted(async () => {
  handleGetHylyList();
  await handleGetHotBills();
  curBill.value = billList.value[0];
  handleGetBillsByType();
  let chart1 = getMultiLineChart(
    chart1Data.value.title,
    chart1Data.value.data[0].value,
    chart1Data.value.data[1].value
  );
  setChart(chart1, "chart1");
});
</script>

<style lang="scss" scoped>
:deep(.el-input__wrapper) {
  box-shadow: none;
}
.home-wrapper {
  .home-header {
    height: 64px;
    color: #fff;
    font-family: Microsoft YaHei;
    font-size: 20px;
    font-weight: 700;
    line-height: 26px;
    line-height: 64px;
    background: url("./assets/images/header-bg.png");
    box-sizing: border-box;
    padding-left: 160px;
  }
  .home-main {
    width: 1400px;
    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-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;
        gap: 20px;
        .box1 {
          width: 920px;
          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: 48px;
            border-bottom: 1px solid rgba(240, 242, 244, 1);
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 40px 0 30px;
            .box1-header-left {
              display: flex;
              .icon {
                width: 18px;
                height: 18px;
                margin-top: 19px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .title {
                width: 112px;
                height: 48px;
                background: var(--color-main-active);
                margin-left: 18px;
                color: #fff;
                font-family: Microsoft YaHei;
                font-size: 20px;
                font-weight: 700;
                line-height: 48px;
                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;
            box-sizing: border-box;
            padding-left: 31px;
            .box1-main-left {
              margin-left: 37px;
              // flex: 1;
              width: 410px;
              .box1-main-left-title {
                height: 22px;
                color: rgba(20, 89, 187, 1);
                font-family: Microsoft YaHei;
                font-size: 20px;
                font-weight: 700;
                line-height: 22px;
              }
              .box1-main-left-info {
                margin-top: 17px;
                display: flex;
                .info-box {
                  height: 30px;
                  width: 80px;
                  text-align: center;
                  overflow: hidden;
                  padding: 0 8px;
                  box-sizing: border-box;
                  border: 1px solid rgba(186, 224, 255, 1);
                  border-radius: 4px;
                  background: rgba(230, 244, 255, 1);
                  color: rgba(22, 119, 255, 1);
                  font-family: Microsoft YaHei;
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 30px;
                  margin-right: 8px;
                }
                .info1 {
                  border: 1px solid rgba(135, 232, 222, 1);
                  background: rgba(230, 255, 251, 1);
                  color: rgba(19, 168, 168, 1);
                }
                .info2 {
                  border: 1px solid rgba(186, 224, 255, 1);
                  background: rgba(230, 244, 255, 1);
                  color: rgba(22, 119, 255, 1);
                }
                .info3 {
                  border: 1px solid rgba(255, 229, 143, 1);
                  background: rgba(255, 251, 230, 1);
                  color: rgba(250, 173, 20, 1);
                }
                .info4 {
                  border: 1px solid rgba(255, 163, 158, 1);
                  background: rgba(255, 241, 240, 1);
                  color: rgba(245, 34, 45, 1);
                }
              }
              .box1-main-left-info1 {
                margin-top: 25px;
                margin-left: 4px;
                .info1-box {
                  display: flex;
                  .icon {
                    margin-top: 15px;
                    width: 4px;
                    height: 4px;
                    border-radius: 2px;
                    background: rgba(132, 136, 142, 1);
                  }
                  .info1-box-left {
                    margin-left: 18px;
                    width: 100px;
                    height: 30px;
                    color: rgba(95, 101, 108, 1);
                    font-family: Microsoft YaHei;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 30px;
                  }
                  .info1-box-right {
                    margin-left: 64px;
                    height: 30px;
                    color: rgba(95, 101, 108, 1);
                    font-family: Microsoft YaHei;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 30px;
                  }
                }
              }
              .box1-main-left-info2 {
                margin-top: 21px;
                height: 200px;
                width: 400px;
                position: relative;
                .time-line {
                  position: absolute;
                  z-index: 0;
                  top: 15px;
                  left: 4px;
                  width: 2px;
                  background: #e6e7e8;
                }
                .info2-item {
                  margin-left: 1px;
                  margin-bottom: 8px;
                  height: 30px;
                  display: flex;
                  // background: orange;
                  .item-icon {
                    margin-top: 2px;
                    width: 10px;
                    height: 10px;
                    position: relative;
                    z-index: 1;
                    img {
                      width: 10px;
                      height: 10px;
                    }
                  }
                  .itemTimeActive {
                    color: rgba(20, 89, 187, 1) !important;
                  }
                  .itemTitleActive {
                    font-weight: 700 !important;
                    color: rgba(20, 89, 187, 1) !important;
                  }
                  .item-time {
                    margin-left: 15px;
                    width: 147px;
                    height: 30px;
                    color: rgba(95, 101, 108, 1);
                    font-family: Microsoft YaHei;
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 30px;
                  }
                  .item-title {
                    margin-left: 10px;
                    width: 295px;
                    height: 30px;
                    color: rgba(132, 136, 142, 1);
                    font-family: Microsoft YaHei;
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 30px;
                  }
                }
              }
            }
            .box1-main-right {
              margin-top: 50px;
              height: 270px;
              width: 350px;
              border-radius: 4px;
              overflow: hidden;
              position: relative;
              img {
                width: 100%;
                height: 100%;
              }
              .inner-box {
                width: 330px;
                height: 93px;
                background: rgba(10, 18, 30, 0.75);
                position: absolute;
                left: 0;
                bottom: 0;
                box-sizing: border-box;
                padding: 9px 10px 12px 10px;
                .inner-box-header {
                  height: 30px;
                  display: flex;
                  .inner-box-title {
                    width: 270px;
                    color: rgba(255, 255, 255, 1);
                    font-family: Microsoft YaHei;
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 30px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                  .inner-box-time {
                    width: 60px;
                    height: 30px;
                    color: rgba(255, 255, 255, 0.65);
                    font-family: Microsoft YaHei;
                    font-size: 14px;
                    font-weight: 400;
                    line-height: 30px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                }
                .inner-box-content {
                  width: 330px;
                  height: 40px;
                  overflow: hidden;
                  color: rgba(255, 255, 255, 0.8);
                  font-family: Microsoft YaHei;
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 20px;
                }
              }
            }
          }
        }
        .box2 {
          flex: 1;
          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: 48px;
            display: flex;
            box-sizing: border-box;
            padding-right: 20px;
            border-bottom: 1px solid rgba(234, 236, 238, 1);
            .icon {
              width: 24px;
              height: 22px;
              margin-left: 18px;
              margin-top: 18px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .title {
              margin-left: 18px;
              width: 148px;
              height: 48px;
              background: rgba(206, 79, 81, 1);
              display: flex;
              .text {
                margin-left: 16px;
                height: 22px;
                color: #fff;
                font-family: Microsoft YaHei;
                font-size: 20px;
                font-weight: 700;
                line-height: 48px;
              }
              .num {
                width: 24px;
                height: 20px;
                text-align: center;
                color: rgba(255, 255, 255, 1);
                font-family: Microsoft YaHei;
                font-size: 12px;
                margin-left: 10px;
                margin-top: 15px;
                // border: 1px solid rgba(255, 255, 255, 1);
                border-radius: 100px;
                background: rgba(255, 255, 255, 0.3);
              }
            }
            .more {
              margin-top: 19px;
              margin-left: 224px;
              color: rgba(20, 89, 187, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 400;
              line-height: 16px;
            }
          }
          .box2-main {
            height: 330px;
            overflow-y: auto;
            box-sizing: border-box;
            padding-right: 20px;
            .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-footer {
        margin-top: 21px;
        height: 450px;
        display: flex;
        .box3 {
          width: 900px;
          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: 16px;
                width: 19px;
                height: 19px;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
              .box3-header-title {
                margin-top: 16px;
                margin-left: 19px;
                height: 22px;
                color: rgba(20, 89, 187, 1);
                font-family: Microsoft YaHei;
                font-size: 20px;
                font-weight: 700;
                line-height: 22px;
              }
            }
            .box3-header-right {
              display: flex;
              justify-content: flex-end;
              width: 178px;
              height: 22px;
              .right-box {
                display: flex;
                margin-top: 16px;
                width: 89px;
                height: 22px;
                justify-content: flex-end;
                .icon1 {
                  margin-top: 5px;
                  width: 12px;
                  height: 12px;
                  border-radius: 6px;
                  background: rgba(20, 89, 187, 1);
                }
                .icon2 {
                  margin-top: 5px;
                  width: 12px;
                  height: 12px;
                  border-radius: 6px;
                  background: rgba(250, 140, 22, 1);
                }
                .text {
                  margin-left: 5px;
                  color: rgba(95, 101, 108, 1);
                  font-family: Microsoft YaHei;
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 22px;
                }
              }
            }
          }
          .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;
            border-bottom: 1px solid rgba(240, 242, 244, 1);
            display: flex;
            box-sizing: border-box;
            padding-left: 22px;
            .header-icon {
              margin-top: 15px;
              width: 20px;
              height: 20px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .header-title {
              margin-top: 16px;
              margin-left: 18px;
              height: 22px;
              color: var(--color-main-active);
              font-family: Microsoft YaHei;
              font-size: 20px;
              font-weight: 700;
              line-height: 22px;
            }
          }
          .box4-main {
            width: 452px;
            margin: 0 auto;
            margin-top: 8px;
            height: 360px;
            overflow-y: auto;
            .box4-main-item {
              margin-top: 6px;
              height: 30px;
              display: flex;
              .leftStatus3 {
                color: rgba(255, 197, 61, 1) !important;
              }
              .leftStatus2 {
                color: rgba(255, 169, 64, 1) !important;
              }
              .left {
                width: 44px;
                text-align: left;
                font-family: Microsoft YaHei;
                font-size: 18px;
                font-weight: 700;
                line-height: 30px;
                color: rgba(206, 79, 81, 1);
              }
              .center {
                width: 300px;
                color: rgba(95, 101, 108, 1);
                font-family: Microsoft YaHei;
                font-size: 16px;
                font-weight: 400;
                line-height: 30px;
              }
              .right {
                width: 108px;
                color: rgba(132, 136, 142, 1);
                font-family: Microsoft YaHei;
                font-size: 14px;
                font-weight: 400;
                line-height: 30px;
                text-align: right;
              }
            }
          }
        }
      }
    }
    .home-main-footer {
      // width: 100%;
      height: 911px;
      background: rgba(248, 249, 250, 1);
      margin-bottom: 20px;
      .home-main-footer-header {
        margin-top: 37px;
        margin-bottom: 36px;
        // width: 1600px;
        height: 62px;
        // background: orange;
        display: flex;
        justify-content: space-between;
        .btn-wrapper {
          width: 1300px;
          overflow-x: auto;
          .btn-box {
            display: flex;
            // justify-content: space-between;
            max-width: 2000px;
            .btn {
              max-width: 100px;
              min-width: 80px;
              height: 42px;
              margin: 0 5px;
              overflow: hidden;
              color: rgba(95, 101, 108, 1);
              font-family: Microsoft YaHei;
              font-size: 16px;
              font-weight: 400;
              line-height: 42px;
              text-align: center;
              border-radius: 21px;
              background: rgba(20, 89, 187, 0);
              padding: 0 16px;
              cursor: pointer;
              &:hover {
                background: rgba(20, 89, 187, 0.1);
              }
            }
            .btnActive {
              border-radius: 21px;
              background: rgba(20, 89, 187, 1);
              color: #fff;
              font-weight: 700;
              &: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: 100%;
        // background: orange;
        display: flex;
        flex-wrap: wrap;
        padding: 5px 10px;
        // justify-content: space-between;
        // justify-content: center;
        overflow-y: auto;
        height: 820px;
        .main-item {
          width: 240px;
          height: 320px;
          box-shadow: 0px 0px 15px 0px rgba(22, 119, 255, 0.1);
          background: #fff;
          margin-bottom: 24px;
          margin-right: 25px;
          .main-item-box1 {
            margin-top: 20px;
            margin-left: 45px;
            width: 150px;
            height: 200px;
            box-sizing: border-box;
            border: 1px solid rgba(240, 242, 244, 1);

            img {
              width: 100%;
              height: 100%;
            }
          }
          .main-item-box2 {
            margin-top: 26px;
            text-align: center;
            height: 30px;
            color: rgba(59, 65, 75, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 700;
            line-height: 30px;
          }
          .main-item-box3 {
            text-align: center;
            height: 30px;
            color: rgba(132, 136, 142, 1);
            font-family: Microsoft YaHei;
            font-size: 16px;
            font-weight: 400;
            line-height: 30px;
          }
        }
      }
    }
  }
}
</style>