<template>
  <div style="display: flex; flex-wrap: wrap">
    <!-- 今日布控情况 -->
    <div class="main">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <span>今日布控情况</span>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container">
        <div class="left">
          <span class="left-num">122</span>
          <div class="img-bkrs">
            <img src="../../../assets/bkrs.png" alt="" />
          </div>
          <span class="left-text">布控人数</span>
        </div>
        <div class="left">
          <span class="left-num">122</span>
          <div class="img-bkrs">
            <img src="../../../assets/bkrs.png" alt="" />
          </div>
          <span class="left-text">布控车牌数</span>
        </div>
      </div>
    </div>
    <!--布控人员信息  -->
    <div class="main" style="height: 636px">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <span>布控人员信息</span>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container1">
        <div class="item" v-for="item in 14" :key="item">
          <div class="item-top">
            <span>张琪</span>
            <span>【人员类型】</span>
          </div>
          <div class="item-idnumber">331004198502060356</div>
        </div>
      </div>
    </div>
    <!-- 布控车牌号信息 -->
    <div class="main" style="height: 636px">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <span>布控车牌号信息</span>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container2">
        <div class="item" v-for="item in 14" :key="item">
          <div class="item-top">
            <span>浙A12345</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 人员预警信息 -->
    <div class="main" style="width: 930px; height: 636px">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <span>人员预警信息</span>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container3">
        <div class="item" v-for="item in 8" :key="item">
          <div class="item-top">
            <div>浙A12345</div>
            <div>停车场P1 A口</div>
          </div>
          <div class="item-main">
            <img
              src="https://img1.baidu.com/it/u=777135039,665587772&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1720544400&t=388d1dcf489dac3d931018ce930274ed"
              alt=""
            />
            <div class="item-info">
              <span>张琪</span>
              <span>331004198502060356</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 车辆预警信息 -->
    <div class="main" style="width: 930px; height: 636px">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <span>车辆预警信息</span>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container4">
        <div class="item" v-for="item in 16" :key="item">
          <div class="item-top">
            <div>浙A12345</div>
          </div>
          <div class="item-main">
            <span>张琪</span>
            <span>331004198502060356</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 今日人员预警人员户籍分布情况 前九 -->
    <div class="main">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <i>今日人员预警人员户籍分布情况 前九</i>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container5">
        <div class="item" v-for="item in 9" :key="item">
          <div class="item-main">
            <div class="item-main-text">户籍名称1</div>
            <div class="item-main-num">14</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 今日人员七类重点预警情况 -->
    <div class="main">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <i>今日人员七类重点预警情况</i>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container6">
        <div class="item" v-for="item in 7" :key="item">
          <div class="item-main">
            <div class="item-main-text">
              <span>户籍</span>
              <span v-if="item == 1" class="item-tag">已启用</span>
              <span v-else class="item-tag item-tag-1">未启用</span>
            </div>
            <div class="item-main-num">14</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 今日人员行为数据用户户籍分布 前九 -->
    <div class="main">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <i>今日人员行为数据用户户籍分布 前九</i>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container7">
        <div class="item" v-for="item in 9" :key="item">
          <div class="item-main">
            <div class="item-main-text">
              <span>户籍</span>
            </div>
            <div class="item-main-num">14</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 今日人员进出港情况 -->
    <div class="main">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <i>今日人员进出港情况</i>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container">
        <div class="left">
          <span class="left-num">122</span>
          <div class="img-bkrs">
            <img src="../../../assets/bkrs.png" alt="" />
          </div>
          <span class="left-text">进港人数</span>
        </div>
        <div class="left">
          <span class="left-num">122</span>
          <div class="img-bkrs">
            <img src="../../../assets/bkrs.png" alt="" />
          </div>
          <span class="left-text">出港人数</span>
        </div>
      </div>
    </div>
    <!-- 今日航班情况 -->
    <div class="main" style="width: 930px">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <i>今日航班情况</i>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container8">
        <div class="left">
          <span class="left-num">122</span>
          <div class="img-jghbs">
            <img src="../../../assets/jghbs.png" alt="" />
          </div>
          <span class="left-text">进港航班数</span>
        </div>
        <div class="left">
          <span class="left-num">122</span>
          <div class="img-jghbs">
            <img src="../../../assets/jghbs.png" alt="" />
          </div>
          <span class="left-text">出港航班数</span>
        </div>
        <div class="left">
          <span class="left-num">122</span>
          <div class="img-jghbs">
            <img src="../../../assets/jghbs.png" alt="" />
          </div>
          <span class="left-text">国际/地区航班数</span>
        </div>
      </div>
    </div>
    <!-- 本月预警情况 -->
    <div class="main">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <i>本月预警情况</i>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container9">
        <div class="item-main">
          <div class="img-byyqk">
            <img src="../../../assets/byyjqk.png" alt="" />
          </div>
          <div class="item-main-text">
            <div class="item-main-text-1">本月预警总数</div>
            <div class="item-main-text-num">326</div>
          </div>
          <div class="item-main-text1">
            <i class="el-icon-caret-bottom"></i>
            月同比-1.7%
          </div>
        </div>
      </div>
    </div>
    <!-- 今日人员/车辆行为预警情况 -->
    <div class="main">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <i>今日人员/车辆行为预警情况</i>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container10">
        <div class="item-main">
          <div class="trapezoid">
            <div class="text">10</div>
          </div>
          <div
            class="trapezoid"
            style="width: 272px; border-top: 32px solid #43bec64d"
          >
            <div class="text">7</div>
          </div>
          <div
            class="trapezoid"
            style="width: 224px; border-top: 32px solid #3d65f04d"
          >
            <div class="text">7</div>
          </div>
          <div
            class="trapezoid"
            style="width: 177px; border-top: 32px solid #5e97cc4d"
          >
            <div class="text">79</div>
          </div>
        </div>
        <div class="item-lengent">
          <div class="item-lengent-text">
            <div class="item-lengent-text-icon"></div>
            <span>人员闸口预警数</span>
          </div>
          <div class="item-lengent-text">
            <div
              class="item-lengent-text-icon"
              style="background: #2be7e7"
            ></div>
            <span>人员摄像头抓拍预警数</span>
          </div>
          <div class="item-lengent-text">
            <div
              class="item-lengent-text-icon"
              style="background: #3d65f0"
            ></div>
            <span>人员进出港预警数</span>
          </div>
          <div class="item-lengent-text">
            <div
              class="item-lengent-text-icon"
              style="background: #6e8de1"
            ></div>
            <span>车辆卡口预警数</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 今日无人机、红绿灯、冰冻雨雪监控数量 -->
    <div class="main" style="height: 636px">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <span>今日无人机、红绿灯、冰冻雨雪监控数量</span>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container11">
        <!-- 无人机数量 -->
        <div class="item-box">
          <div class="item-top">
            <div class="img-wrj">
              <img src="../../../assets/wrj.png" alt="" />
            </div>
            <div class="item-top-text">
              <div class="item-top-text-name">无人机数量</div>
              <div class="item-top-text-num">46</div>
            </div>
          </div>
          <div class="item-data" style="padding: 10px 110px">
            <div class="item-data-box">
              <div class="item-data-box-num">31</div>
              <div class="item-data-box-text">正常</div>
            </div>
            <div class="item-data-box">
              <div class="item-data-box-num" style="color: #fe6a3b">15</div>
              <div class="item-data-box-text">黑飞</div>
            </div>
          </div>
        </div>
        <!-- 红绿灯数量 -->
        <div class="item-box">
          <div class="item-top">
            <div class="img-wrj">
              <img src="../../../assets/hld.png" alt="" />
            </div>
            <div class="item-top-text">
              <div class="item-top-text-name">红绿灯数量</div>
              <div class="item-top-text-num">46</div>
            </div>
          </div>
          <div class="item-data">
            <div class="item-data-box">
              <div class="item-data-box-num">31</div>
              <div class="item-data-box-text">正常</div>
            </div>
            <div class="item-data-box">
              <div class="item-data-box-num" style="color: #fe6a3b">15</div>
              <div class="item-data-box-text">故障</div>
            </div>
            <div class="item-data-box">
              <div class="item-data-box-num" style="color: #3d65f0">15</div>
              <div class="item-data-box-text">关闭</div>
            </div>
          </div>
        </div>
        <!-- 冰冻雨雪监控数量 -->
        <div class="item-box">
          <div class="item-top">
            <div class="img-wrj">
              <img src="../../../assets/bdyxjk.png" alt="" />
            </div>
            <div class="item-top-text">
              <div class="item-top-text-name">无人机数量</div>
              <div class="item-top-text-num">46</div>
            </div>
          </div>
          <div class="item-data">
            <div class="item-data-box">
              <div class="item-data-box-num">31</div>
              <div class="item-data-box-text">正常</div>
            </div>
            <div class="item-data-box">
              <div class="item-data-box-num" style="color: #fe6a3b">15</div>
              <div class="item-data-box-text">故障</div>
            </div>
            <div class="item-data-box">
              <div class="item-data-box-num" style="color: #3d65f0">15</div>
              <div class="item-data-box-text">关闭</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 今日始发地人员数据大到小 前五 -->
    <div class="main">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <i>今日始发地人员数据大到小 前五</i>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container12">
        <div class="item-main">
          <div class="item-main-box">
            <div class="item-main-box-left">始发地</div>
            <div class="item-main-box-line"></div>
            <span>5433</span>
          </div>
          <div class="item-main-box">
            <div
              class="item-main-box-left"
              style="width: 193px; background-color: #2b8ef3"
            >
              始发地
            </div>
            <div class="item-main-box-line" style="width: 75px"></div>
            <span>5433</span>
          </div>
          <div class="item-main-box">
            <div
              class="item-main-box-left"
              style="width: 135px; background-color: #3cd495"
            >
              始发地
            </div>
            <div class="item-main-box-line" style="width: 104px"></div>
            <span>5433</span>
          </div>
          <div class="item-main-box">
            <div
              class="item-main-box-left"
              style="width: 90px; background-color: #48e5e5"
            >
              始发地始发地
            </div>
            <div class="item-main-box-line" style="width: 126.5px"></div>
            <span>5433</span>
          </div>
          <div class="item-main-box">
            <div
              class="item-main-box-left"
              style="width: 57px; background-color: #55b7ee"
            >
              始发地
            </div>
            <div class="item-main-box-line" style="width: 143px"></div>
            <span>5433</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 无人机反制记录 -->
    <div class="main" style="height: 636px">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <i>无人机反制记录</i>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container13">
        <div class="item-main">
          <div class="item-main-top">
            <div style="width: 153px">地点</div>
            <div style="width: 98px">发现时间</div>
            <div style="width: 98px">反制时间</div>
            <div style="width: 77px">状态</div>
          </div>
          <div class="item-main-table" v-for="item in 10" :key="item">
            <div style="width: 153px">xxxxx地点11</div>
            <div style="width: 98px">2024-03-10 15:42:35</div>
            <div style="width: 98px">2024-03-10 15:42:35</div>
            <div style="width: 77px">
              <!-- <span class="item-main-table-status">成功</span> -->
              <span
                class="item-main-table-status"
                style="border: 1px solid #ff7b511a; color: #ff7268"
                >失败</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--今日进港航班  -->
    <div class="main" style="height: 636px">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <span>今日进港航班</span>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container14">
        <div class="item" v-for="item in 14" :key="item">
          <div class="item-box">
            <div class="item-top">
              <div>【CA5469】</div>
              <div>贵阳 - 澳门</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--今日出港航班  -->
    <div class="main" style="height: 636px">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <span>今日出港航班</span>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container14">
        <div class="item" v-for="item in 14" :key="item">
          <div class="item-box">
            <div class="item-top">
              <div>【CA5469】</div>
              <div>贵阳 - 澳门</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--今日国际/地区航班  -->
    <div class="main" style="height: 636px">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <span>今日国际/地区航班</span>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container14">
        <div class="item" v-for="item in 14" :key="item">
          <div class="item-box">
            <div class="item-top">
              <div>【CA5469】</div>
              <div>贵阳 - 澳门</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--今日省内其他机场航班情况  -->
    <div class="main" style="height: 954px">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <span>今日省内其他机场航班情况</span>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container15">
        <div class="item" v-for="item in 8" :key="item">
          <div class="item-title">月照机场</div>
          <div class="item-info">
            <div class="item-info-box">
              <div class="item-info-box-num">9</div>
              <div class="item-info-box-text">进港航班数</div>
            </div>
            <div class="item-info-box">
              <div class="item-info-box-num">9</div>
              <div class="item-info-box-text">进港航班数</div>
            </div>
            <div class="item-info-box">
              <div class="item-info-box-num">9</div>
              <div class="item-info-box-text">进港航班数</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 今日值班信息 -->
    <div class="main">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <span>今日值班信息</span>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container16">
        <div class="item-box">
          <div class="item-title">值班领导：</div>
          <div class="item-main-box">
            <div class="item-main" v-for="item in 2" :key="item">
              <span>吴依依 13736548965</span>
            </div>
          </div>
        </div>
        <div class="item-box" style="margin-top: 10px">
          <div class="item-title">值班民警：</div>
          <div class="item-main-box">
            <div class="item-main" v-for="item in 12" :key="item">
              <span>吴依依 13736548965</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 无人机反制驱离情况 -->
    <div class="main">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <i>无人机反制驱离情况</i>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container17">
        <div class="item-progress">
          <div class="item-progress-box">
            <el-progress
              type="circle"
              :percentage="percentage1"
              color="#4CD7F6"
              :stroke-width="9"
            ></el-progress>
            <span>今日驱离率</span>
          </div>
          <div class="item-progress-box">
            <el-progress
              type="circle"
              :percentage="percentage1"
              color="#4CD7F6"
              :stroke-width="9"
            ></el-progress>
            <span>历史驱离率</span>
          </div>
        </div>
        <div class="item-today">
          <div class="item-today-tit">今日情况</div>
          <div class="item-today-data">
            <div class="item-today-data-num">15</div>
            <div class="item-today-data-text">今日黑飞数</div>
            <div class="item-today-data-num">15</div>
            <div class="item-today-data-text">今日驱离数</div>
            <div class="item-today-data-num">15</div>
            <div class="item-today-data-text">今日未驱离数</div>
          </div>
        </div>
        <div class="item-today" style="color: #3d65f0">
          <div class="item-today-tit">历史情况</div>
          <div class="item-today-data">
            <div class="item-today-data-num">15</div>
            <div class="item-today-data-text">历史黑飞数</div>
            <div class="item-today-data-num">15</div>
            <div class="item-today-data-text">历史驱离数</div>
            <div class="item-today-data-num">15</div>
            <div class="item-today-data-text">历史未驱离数</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 今日目的地人员数据大到小 前五 -->
    <div class="main">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <i>今日目的地人员数据大到小 前五</i>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container18">
        <div
          class="item-box"
          v-for="(item, index) in monthWarningList"
          :key="index"
        >
          <div class="title">目的地1</div>
          <div class="item-icon">
            <strong v-for="(item1, index1) in 50" :key="index1">
              <i :class="index1 + 1 <= item.percent ? 'bright' : ''"></i>
            </strong>
            <span>{{ item.num }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 本月预警排名情况 -->
    <div class="main" style="height: 636px">
      <div class="top">
        <div class="top-tit">
          <img src="../../../assets/arrow.png" alt="" />
          <i>本月预警排名情况</i>
        </div>
        <div class="top-line">
          <img src="../../../assets/top-line.png" alt="" />
        </div>
      </div>
      <div class="container19">
        <div
          class="item-box"
          v-for="(item, index) in monthWarningList1"
          :key="index"
        >
          <div class="title">目的地1</div>
          <div class="item-icon">
            <div>
              <div
                class="bright-box"
                :style="{ width: item.percent + 'px' }"
              ></div>
            </div>
            <div class="item-num">{{ item.num }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- <IDome2 title="1123123123" /> -->
    <!-- <components :is="com" title="我是自定义组件" /> -->
  </div>
</template>

<script>
// import resize from "./mixins/resize";
import ICard from "./card";
import IDome2 from "./dome2";
export default {
  components: { ICard, IDome2 },
  // mixins: [resize],
  props: {
    type: {
      type: String,
      default: "",
    },
    legend: {
      type: Array,
      default() {
        return [];
      },
    },
    // title: {
    //   type: String,
    //   default: ''
    // },
    xAxisData: {
      type: Array,
      default() {
        return [];
      },
    },
    yAxisData: {
      type: Array,
      default() {
        return [];
      },
    },
    colorList: {
      type: Array,
      default() {
        return ["#88aefe", "#4983fb"];
      },
    },
  },
  data() {
    return {
      id: "barEcharts",
      chart: null,
      com: IDome2,
      percentage1: 86.7,
      monthWarningList: [
        { name: "", num: 5444, percent: 50 },
        { name: "", num: 5114, percent: 30 },
        { name: "", num: 4810, percent: 20 },
        { name: "", num: 4810, percent: 20 },
        { name: "", num: 3810, percent: 20 },
      ],
      monthWarningList1: [
        { name: "", num: 26, percent: 50 },
        { name: "", num: 24, percent: 30 },
        { name: "", num: 20, percent: 20 },
        { name: "", num: 18, percent: 20 },
        { name: "", num: 16, percent: 20 },
        { name: "", num: 14, percent: 50 },
        { name: "", num: 12, percent: 30 },
        { name: "", num: 10, percent: 20 },
        { name: "", num: 8, percent: 20 },
      ],
    };
  },
  created() {
    this.handleData();
    this.handleData1();
  },
  methods: {
    handleData() {
      const total = 5444;
      this.monthWarningList.forEach((item) => {
        item.percent = Math.trunc((item.num / total) * 50);
      });
    },
    handleData1() {
      const total = 26;
      this.monthWarningList1.forEach((item) => {
        item.percent = ((367 / total) * item.num).toFixed(2);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 455px;
  height: 308px;
  border-radius: 8px;
  background: rgba(26, 52, 125, 0.95);
  padding: 10px;
  margin: 20px;
}
.top {
  height: 45px;
  .top-tit {
    font-size: 18px;
    font-weight: 600;
    line-height: 23.4px;
    text-align: left;
    color: #ffffff;
    img {
      margin-right: 10px;
    }
  }
  .top-line {
    margin-top: -7px;
  }
}
.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  // width: 100%;
  padding: 30px;
  .left {
    // width: 169px;
    text-align: center;
    .left-num {
      font-size: 40px;
      font-weight: 700;
      line-height: 60px;
      color: #ffffff;
      letter-spacing: 0.12em;
      // box-shadow: 0px 6px 23px 0px #2655fd;
      // box-shadow: 0px 5px 23px 0px #2655fd80;
    }
    .img-bkrs {
      width: 169px;
      height: 103px;
      margin-top: -30px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .left-text {
      font-size: 20px;
      font-weight: 700;
      line-height: 50px;
      text-align: center;
      color: #e7fcff;
    }
  }
}
.container1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 15px;
  // box-sizing: border-box;
  .item {
    border: 2px solid #3d65f080;
    background: #28378a;
    border-radius: 6px;
    padding: 10px 20px;
    margin-bottom: 15px;
    text-align: center;
    color: #fff;
    .item-top {
      text-align: center;
      span {
        font-size: 17px;
        font-weight: 700;
        line-height: 25.5px;
        &:last-child {
          font-size: 14px;
          font-weight: 400;
          line-height: 21px;
        }
      }
    }
    .item-idnumber {
      font-size: 14px;
      font-weight: 500;
      color: #e3e8ff;
    }
  }
}
.container2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 15px 30px;
  // box-sizing: border-box;
  .item {
    border-radius: 8px;
    border: 2px solid #3d65f080;
    margin-bottom: 15px;
    padding: 8px;
    .item-top {
      border-radius: 8px;
      font-size: 18px;
      font-weight: 700;
      line-height: 27px;
      text-align: center;
      background-color: #223187;
      color: #fff;
      padding: 9px 33px;
    }
  }
}
.container3 {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 15px;
  // width: 100%;
  .item {
    width: calc((100% - 60px) / 4);
    height: 214px;
    background: url("../../../assets/ryyjxx-bg.png");
    background-size: cover; /* 背景图片尺寸自适应 */
    background-repeat: no-repeat; /* 不重复显示背景图片 */
    margin-right: 20px;
    margin-bottom: 17px;
    padding: 10px 20px;
    &:nth-child(4n) {
      margin-right: 0;
    }
    .item-top {
      height: 41px;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      text-align: left;
      color: #e3e8ff;
    }
    .item-main {
      position: relative;
      margin: 5px auto;
      width: 150px;
      height: 150px;
      border-radius: 6px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .item-info {
        position: absolute;
        width: 100%;
        left: 0;
        bottom: 0;
        border-radius: 6px;
        background-color: #ff453a80;
        text-align: center;
        span {
          font-size: 17px;
          font-weight: 500;
          line-height: 25.5px;
          color: #fff;
          &:last-child {
            font-size: 14px;
            line-height: 21px;
          }
        }
      }
    }
  }
}
.container4 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 15px;
  box-sizing: border-box;
  // width: 100%;
  .item {
    width: calc((100% - 60px) / 4);
    height: 104px;
    background: url("../../../assets/clyjxx-bg.png");
    background-size: cover; /* 背景图片尺寸自适应 */
    background-repeat: no-repeat; /* 不重复显示背景图片 */
    margin-right: 20px;
    margin-bottom: 17px;
    padding: 10px 20px;
    &:nth-child(4n) {
      margin-right: 0;
    }
    .item-top {
      height: 35px;
      color: #e3e8ff;
      font-size: 22px;
      font-weight: 500;
      line-height: 33px;
      text-align: center;
    }
    .item-main {
      margin-top: 5px;
      span {
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        text-align: left;
        color: #e3e8ff;
      }
    }
  }
}
.container5 {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 15px;
  box-sizing: border-box;
  // width: 100%;
  .item {
    width: calc((100% - 40px) / 3);
    margin-right: 20px;
    padding: 10px 20px;
    &:nth-child(3n) {
      margin-right: 0;
    }
    .item-main {
      // margin-top: 5px;
      .item-main-text {
        position: relative;
        font-size: 15px;
        font-weight: 500;
        line-height: 22.5px;
        text-align: left;
        color: #e3e8ff99;
        &:before {
          position: absolute;
          top: 5px;
          left: -15px;
          width: 10px;
          height: 10px;
          content: "";
          background-color: #ed9d63;
          border-radius: 23px;
        }
      }
      .item-main-num {
        font-size: 20px;
        font-weight: 700;
        line-height: 30px;
        text-align: left;
        color: #ebefff;
      }
    }
  }
}
.container6 {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 15px;
  box-sizing: border-box;
  // width: 100%;
  .item {
    width: calc((100% - 40px) / 3);
    margin-right: 20px;
    padding: 10px 20px;
    &:nth-child(3n) {
      margin-right: 0;
    }
    .item-main {
      // margin-top: 5px;
      .item-main-text {
        position: relative;
        &:before {
          position: absolute;
          top: 5px;
          left: -15px;
          width: 10px;
          height: 10px;
          content: "";
          background-color: #ed9d63;
          border-radius: 23px;
        }
        span {
          font-size: 15px;
          font-weight: 500;
          line-height: 22.5px;
          text-align: left;
          color: #e3e8ff99;
        }
        .item-tag {
          margin-left: 8px;
          padding: 2px 4px;
          border-radius: 4px;
          border: 1px solid #40ffdd33;
          font-size: 10px;
          font-weight: 400;
          line-height: 17px;
          color: #1ee7e7;
        }
        .item-tag-1 {
          border: 1px solid #ffb34033;
          color: #ed9d63;
        }
      }
      .item-main-num {
        font-size: 20px;
        font-weight: 700;
        line-height: 30px;
        text-align: left;
        color: #ebefff;
      }
    }
  }
}
.container7 {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 15px;
  box-sizing: border-box;
  // width: 100%;
  .item {
    width: calc((100% - 40px) / 3);
    margin-right: 20px;
    padding: 10px 20px;
    &:nth-child(3n) {
      margin-right: 0;
    }
    .item-main {
      // margin-top: 5px;
      .item-main-text {
        position: relative;
        font-size: 15px;
        font-weight: 500;
        line-height: 22.5px;
        text-align: left;
        color: #e3e8ff99;
        &:before {
          position: absolute;
          top: 5px;
          left: -15px;
          width: 10px;
          height: 10px;
          content: "";
          background-color: #3254dd;
          border-radius: 23px;
        }
      }
      .item-main-num {
        font-size: 20px;
        font-weight: 700;
        line-height: 30px;
        text-align: left;
        color: #ebefff;
      }
    }
  }
}
.container8 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30px 50px;
  .left {
    // width: 227px;
    text-align: center;
    .left-num {
      font-size: 40px;
      font-weight: 700;
      line-height: 60px;
      color: #ffffff;
      letter-spacing: 0.12em;
      // box-shadow: 0px 6px 23px 0px #2655fd;
      // box-shadow: 0px 5px 23px 0px #2655fd80;
    }
    .img-jghbs {
      width: 227px;
      height: 84px;
      // margin-top: -30px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .left-text {
      font-size: 20px;
      font-weight: 700;
      line-height: 40px;
      text-align: center;
      color: #e7fcff;
    }
  }
}
.container9 {
  .item-main {
    padding: 30px 50px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    .img-byyqk {
      width: 230px;
      height: 92px;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .item-main-text {
      text-align: center;
      margin-top: -20px;
      .item-main-text-1 {
        font-size: 18px;
        font-weight: 700;
        line-height: 27px;
        color: #e3e8ffcc;
      }
      .item-main-text-num {
        font-size: 28px;
        font-weight: 900;
        line-height: 42px;
        color: #ebefff;
      }
    }
    .item-main-text1 {
      margin-top: 20px;
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      color: #5bffeb;
    }
  }
}
.container10 {
  padding: 15px 40px 10px;
  .item-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    .trapezoid {
      position: relative; /* 相对定位 */
      width: 320px;
      height: 0;
      border-top: 32px solid #a23a2b4d;
      border-right: 15px solid transparent;
      border-left: 15px solid transparent;
      margin-bottom: 10px;
      // background: #A23A2B4D;
      // border: 1.5px solid #ff8c85;
    }
    .text {
      position: absolute;
      top: -15px;
      // top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 15px;
      font-weight: 700;
      // line-height: 30px;
      color: white;
    }
  }
  .item-lengent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 10px;
    &-text {
      width: 45%;
      display: flex;
      align-items: center;
      &-icon {
        width: 12px;
        height: 12px;
        background: #ff8c85;
        margin-right: 8px;
      }
      span {
        font-size: 13px;
        font-weight: 400;
        line-height: 24px;
        text-align: left;
        color: #ebefffcc;
      }
    }
  }
}
.container11 {
  padding: 20px;
  .item-box {
    margin-bottom: 23px;
    .item-top {
      display: flex;
      align-items: center;
      .img-wrj {
        width: 60px;
        height: 60px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .item-top-text {
        margin-left: 10px;
        &-name {
          font-size: 18px;
          font-weight: 500;
          line-height: 27px;
          text-align: left;
          color: #e3e8ffcc;
        }
        &-num {
          font-size: 26px;
          font-weight: 700;
          line-height: 39px;
          text-align: left;
          color: #fff;
        }
      }
    }
    .item-data {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 60px;
      margin-top: 8px;
      border-radius: 12px;
      border: 1px solid #3d85f080;
      background: #3d65f024;
      .item-data-box {
        &-num {
          font-size: 24px;
          font-weight: 700;
          line-height: 36px;
          text-align: center;
          color: #4cd7f6;
        }
        &-text {
          font-size: 15px;
          font-weight: 500;
          line-height: 22.5px;
          text-align: center;
          color: #e3e8ffcc;
        }
      }
    }
  }
}
.container12 {
  padding: 15px 50px 10px;
  .item-main {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .item-main-box {
      display: flex;
      align-items: center;
      margin-bottom: 18px;
      &-left {
        width: 230px;
        height: 26px;
        padding: 3px 0px;
        background-color: #3254dd;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        color: #fff;
      }
      &-line {
        width: 56.5px;
        border: 1px solid #e6f7ff80;
        margin: 0 8px;
      }
      span {
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        color: #e6f7ff;
      }
    }
  }
}
.container13 {
  padding: 5px;
  .item-main {
    .item-main-top {
      height: 32px;
      background-color: #1d2a87;
      border-bottom: 1px solid #5761ae4d;
      display: flex;
      div {
        text-align: center;
        line-height: 32px;
        font-size: 12px;
        font-weight: 500;
        color: #86c2ff;
      }
    }
    .item-main-table {
      padding: 12px 0;
      border-bottom: 1px solid #5761ae4d;
      display: flex;
      div {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 500;
        text-align: center;
        color: #e3e8ffcc;
      }
      .item-main-table-status {
        padding: 6px 10px;
        border-radius: 4px;
        border: 1px solid #409eff33;
        font-size: 11px;
        font-weight: 400;
        color: #409eff;
      }
    }
  }
}
.container14 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 5px 15px;
  .item {
    width: calc((100% - 20px) / 2);
    border: 1px solid transparent;
    border-radius: 8px;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #04196333, #04196333),
      linear-gradient(
        0deg,
        rgba(55, 100, 254, 0.5) 0%,
        rgba(126, 255, 255, 0.5) 100%
      );
    margin-bottom: 15px;
    text-align: center;
    color: #fff;
    overflow: hidden;
    .item-box {
      padding: 3px;
      background: rgba(26, 52, 125, 0.95);
      .item-top {
        background: #11206f80;
        border-radius: 6px;
        padding: 10px;
        font-size: 15px;
        font-weight: 500;
        line-height: 20px;
        text-align: center;
        color: #d6deff;
      }
    }
  }
}
.container15 {
  padding-top: 10px;
  .item {
    padding: 0 30px 32px;
    background-image: url("../../../assets/jrsnqtjchbqk.png");
    background-size: cover; /* 背景图片尺寸自适应 */
    background-repeat: no-repeat; /* 不重复显示背景图片 */
    .item-title {
      font-size: 15px;
      font-weight: 700;
      line-height: 22.5px;
      text-align: center;
      color: #fff;
    }
    .item-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 10px;
      .item-info-box {
        &-num {
          font-size: 18px;
          font-weight: 700;
          line-height: 27px;
          text-align: center;
          color: #65ffed;
        }
        &-text {
          font-size: 13px;
          font-weight: 400;
          line-height: 19.5px;
          text-align: center;
          color: #b6c1f7;
        }
      }
    }
  }
}
.container16 {
  padding: 0 10px 10px;
  .item-box {
    .item-title {
      font-size: 16px;
      font-weight: 700;
      line-height: 24px;
      text-align: left;
      color: #8efafa;
    }
    .item-main-box {
      padding: 0 10px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      .item-main {
        width: calc((100%-20px) / 2);
        font-size: 17px;
        font-weight: 400;
        line-height: 25.5px;
        color: #d8e0ff;
      }
    }
  }
}
.container17 {
  display: flex;
  padding: 10px 30px;
  .item-progress {
    width: 33%;
    text-align: center;
    .item-progress-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      &:first-child {
        margin-bottom: 15px;
      }
      ::v-deep .el-progress-circle {
        width: 80px !important;
        height: 80px !important;
      }
      ::v-deep .el-progress__text {
        font-size: 18px;
        font-weight: 700;
        line-height: 27px;
        color: #fff;
      }
      span {
        margin-top: 5px;
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
        text-align: center;
        color: #4cd7f6;
      }
    }
  }
  .item-today {
    width: 33%;
    text-align: center;
    color: #e86135;
    .item-today-tit {
      font-size: 17px;
      font-weight: 700;
      line-height: 25.5px;
    }
    .item-today-data {
      .item-today-data-num {
        margin-top: 10px;
        font-size: 20px;
        font-weight: 700;
        line-height: 30px;
      }
      .item-today-data-text {
        font-size: 13px;
        font-weight: 400;
        line-height: 19.5px;
        color: #e3e8ffcc;
      }
    }
  }
}
.container18 {
  padding: 0 20px;
  .item-box {
    margin-bottom: 3px;
    .title {
      font-size: 15px;
      font-weight: 500;
      line-height: 22.5px;
      text-align: left;
      color: #f1f3ff;
    }
    .item-icon {
      i {
        display: inline-block;
        width: 3px;
        height: 9px;
        border-radius: 5px;
        // background-color: #4c649e;
        margin-right: 3px;
        margin-top: 7px;
      }
      span {
        color: rgba(227, 232, 255, 0.5);
        font-size: 20px;
        margin-left: 28px;
      }
      .bright {
        background: linear-gradient(270deg, #1890ff 0%, #1ee7e7 100%);
      }
    }
  }
}
.container19 {
  padding: 0 15px;
  .item-box {
    margin-bottom: 15px;
    .title {
      font-size: 15px;
      font-weight: 500;
      line-height: 22.5px;
      text-align: left;
      color: #f1f3ff;
    }
    .item-icon {
      display: flex;
      align-items: center;
      margin-top: 3px;
      .bright-box {
        width: 367px;
        height: 9px;
        border-radius: 8px;
        background: linear-gradient(
          270deg,
          #45d5d5 0%,
          rgba(61, 111, 240, 0.35) 81.5%
        );
      }
      .item-num {
        color: rgba(227, 232, 255, 0.5);
        font-size: 20px;
        margin-left: 20px;
      }
    }
  }
}
</style>
