<template>
  <div class="contradiction-div">
    <!--    top-bigbox-->
    <div class="top-outbox">
      <div class="top-bigbox" :style="{ 'width': serverUserInfo.company_grade === '2' ? 'calc(60% - 20px)' : '100%' }">
        <div class="top-box" @click="toPage('/contradiction/contradictionList')">
          <img src="@/assets/contradictionImgs/workimg1.png" alt="" class="topimg">
          <div class="top-num">{{ totalNum }}</div>
          <div class="top-tit">矛盾总数</div>
        </div>
        <div class="top-box" @click="toPages('newNum')">
          <img src="@/assets/contradictionImgs/workimg2.png" alt="" class="topimg">
          <div class="top-num">{{ TitleMapdata.newNum }}</div>
          <div class="top-tit">今日登记</div>
        </div>
        <div class="top-box" @click="toPage('/contradiction/contradictionList?status=2')">
          <img src="@/assets/contradictionImgs/workimg3.png" alt="" class="topimg">
          <div class="top-num">{{ TitleMapdata.processingNum }}</div>
          <div class="top-tit">办理中</div>
        </div>
        <div :class="TitleMapdata.warningNum>0?'top-box-check':'top-box'" @click="toPage('/contradiction/ChaoQiList')">
          <img src="@/assets/contradictionImgs/workimg4.png" alt="" class="topimg">
          <div class="top-num" style="color: #C53535">{{ TitleMapdata.warningNum }}</div>
          <div class="top-tit">超期预警</div>
        </div>
        <div class="top-box" @click="toPage('/contradiction/contradictionList?status=1')">
          <img src="@/assets/contradictionImgs/workimg5.png" alt="" class="topimg">
          <div class="top-num">{{ TitleMapdata.completionNum }}</div>
          <div class="top-tit">已办结</div>
        </div>
        <div class="top-box" @click="toPage('/approval/myApproval')">
          <img src="@/assets/contradictionImgs/workimg6.png" alt="" class="topimg">
          <div class="top-num">{{ approveNum }}</div>
          <div class="top-tit">待审批</div>
        </div>
      </div>
      <div class="top-right-box">
        <div class="top-right-box-title">自动预警监测</div>
        <div style="display: flex;width: 100%">
          <div
            v-if="serverUserInfo.company_grade === '2'||serverUserInfo.company_grade === '3'||serverUserInfo.company_grade === '4'||serverUserInfo.company_grade === '5'||serverUserInfo.company_grade === '6'"
            :class="importentData.triggerNum>0?'top-box-check-ii can-click':'top-box can-click'"
            @click="toPage('/contradiction/riskWarning/keyGroupsList')">
            <img :src="importentData.triggerNum>0?imageUrls[0].img1:imageUrls[0].img" alt="" class="topimg">
            <div :class="importentData.triggerNum>0?'top-num-check':'top-num'">{{ importentData.triggerNum }}</div>
            <div class="top-tit">重点人员</div>
          </div>
          <div
            v-if="serverUserInfo.company_grade === '2'||serverUserInfo.company_grade === '3'||serverUserInfo.company_grade === '4'"
            :class="importentData.typeNum>0?'top-box-check-ii can-click':'top-box can-click'"
            @click="toPage('/contradiction/riskWarning/focusAreaList')">
            <img :src="importentData.typeNum>0?imageUrls[1].img1:imageUrls[1].img" alt="" class="topimg">
            <div :class="importentData.typeNum>0?'top-num-check':'top-num'">{{ importentData.typeNum }}</div>
            <div class="top-tit">重点领域</div>
          </div>
          <div
            v-if="serverUserInfo.company_grade === '2'||serverUserInfo.company_grade === '3'||serverUserInfo.company_grade === '4'"
            :class="importentData.cityNum>0?'top-box-check-ii can-click':'top-box can-click'"
            @click="toPage('/contradiction/riskWarning/focusRegionList')">
            <img :src="importentData.cityNum>0?imageUrls[2].img1:imageUrls[2].img" alt="" class="topimg">
            <div :class="importentData.cityNum>0?'top-num-check':'top-num'">{{ importentData.cityNum }}</div>
            <div class="top-tit">重点地区</div>
          </div>
          <!--          <div v-if="serverUserInfo.company_grade === '2'||serverUserInfo.company_grade === '3'||serverUserInfo.company_grade === '4'||serverUserInfo.company_grade === '5'||serverUserInfo.company_grade === '6'" :class="importentData.eventNum>0?'top-box-check-ii can-click':'top-box can-click'" @click="toPage('/contradiction/riskWarning/keyEventList')">-->
          <div
            v-if="serverUserInfo.company_grade === '2'||serverUserInfo.company_grade === '3'||serverUserInfo.company_grade === '4'||serverUserInfo.company_grade === '5'||serverUserInfo.company_grade === '6'"
            :class="importentData.eventNum>0?'top-box-check-ii can-click':'top-box can-click'"
            @click="toPage('/keyMatters')">
            <img :src="importentData.eventNum>0?imageUrls[3].img1:imageUrls[3].img" alt="" class="topimg">
            <div :class="importentData.eventNum>0?'top-num-check':'top-num'">{{ importentData.eventNum }}</div>
            <div class="top-tit">重点事件</div>
          </div>
        </div>
      </div>
    </div>
    <div class="statistics-bar"
         v-if="serverUserInfo.company_grade === '2'||serverUserInfo.company_grade === '3'||serverUserInfo.company_grade === '4'">
      <div class="statistics-bar-bottom">
        <div class="statistics-bar-bottom-title">综合研判预警</div>
      </div>
      <div class="statistics-bar-top">
        <div class="statistics-bar-top-i" @click="toPage('/firstLevelWarn')">
          <div class="i-top">{{ warnCounts.level1Count }}</div>
          <div class="i-center">一级预警</div>
        </div>
        <div class="statistics-bar-top-ii" @click="toPage('/secondLevelWarn')">
          <div class="i-top-ii">{{ warnCounts.level2Count }}</div>
          <div class="i-center">二级预警</div>
        </div>
        <div class="statistics-bar-top-iii" @click="toPage('/thirdLevelWarn')">
          <div class="i-top-iii">{{ warnCounts.level3Count }}</div>
          <div class="i-center">三级预警</div>
        </div>
      </div>
    </div>
    <!-- <div class="statistics-bar"
         v-if="serverUserInfo.company_grade === '2'||serverUserInfo.company_grade === '3'||serverUserInfo.company_grade === '4'">
      <div class="statistics-bar-bottom">
        <div class="statistics-bar-bottom-title">综合研判预警历史</div>
      </div>
      <div class="statistics-bar-top">
        <div class="statistics-bar-top-i" @click="toPage('/firstLevelWarnHistory')">
          <div class="i-top">{{ warnCounts.level1Count }}</div>
          <div class="i-center">一级预警历史</div>
        </div>
        <div class="statistics-bar-top-ii" @click="toPage('/secondLevelWarnHistory')">
          <div class="i-top-ii">{{ warnCounts.level2Count }}</div>
          <div class="i-center">二级预警历史</div>
        </div>
        <div class="statistics-bar-top-iii" @click="toPage('/thirdLevelWarnHistory')">
          <div class="i-top-iii">{{ warnCounts.level3Count }}</div>
          <div class="i-center">三级预警历史</div>
        </div>
      </div>
    </div> -->
    <!--    中下左右布局-->
    <div class="flex">
      <!--      右侧-->
      <div class="rightbox">
        <!--        大列表-->
        <div class="biglist">
          <div class="title-box">
            <img src="@/assets/contradictionImgs/我的待办.png" alt="" class="title-img">
            <div>待办案件</div>
            <div style="margin-right: 10px;margin-left: auto;" @click="more1">更多</div>
          </div>
          <Modal
            v-model="showmore1"
            title="待办案件"
            width="90"
          >
            <vxe-table
              border="none"
              ref="xTree"
              stripe
              highlight-hover-row
              :row-style="rowStyle"
              height="600"
              align="center"
              :data.sync="AgencyHandlingListAll">
              <vxe-table-column field="eventCategoryId" title="矛盾名称" type="html"></vxe-table-column>
              <vxe-table-column field="eventCode" title="事件编号"></vxe-table-column>
              <vxe-table-column field="reportingName" title="发起人"></vxe-table-column>
              <vxe-table-column field="occurrenceTime" title="登记时间"></vxe-table-column>
              <vxe-table-column min-width="50px" title="操作">
                <template v-slot="{ row }">
                  <vxe-button type="text" status="primary" icon="vxe-icon--edit-outline" @click="getInfo(row)">
                    处置信息
                  </vxe-button>
                </template>
              </vxe-table-column>
            </vxe-table>
            <Page class="page_style" :total="params.totalRecord" :current="params.pageNo" :page-size="params.pageSize"
                  @on-change="changePageNo" show-total show-sizer @on-page-size-change="size"/>
          </Modal>
          <vxe-table
            border="none"
            ref="xTree"
            stripe
            highlight-hover-row
            :row-style="rowStyle"
            height="300"
            align="center"
            :data.sync="AgencyHandlingList">
            <vxe-table-column field="eventCategoryId" title="矛盾名称" type="html"></vxe-table-column>
            <vxe-table-column field="eventCode" title="事件编号"></vxe-table-column>
            <vxe-table-column field="reportingName" title="发起人"></vxe-table-column>
            <vxe-table-column field="occurrenceTime" title="登记时间"></vxe-table-column>
            <vxe-table-column min-width="50px" title="操作">
              <template v-slot="{ row }">
                <vxe-button type="text" status="primary" icon="vxe-icon--edit-outline" @click="getInfo(row)">处置信息
                </vxe-button>
              </template>
            </vxe-table-column>
          </vxe-table>
        </div>
        <!--        小列表-->
        <div class="litlelist">
          <div class="title-box">
            <img src="@/assets/contradictionImgs/我的待办.png" alt="" class="title-img">
            <div>超期预警</div>
            <div style="margin-right: 10px;margin-left: auto;" @click="more2">更多</div>
          </div>
          <Modal
            v-model="showmore2"
            title="超期预警"
            width="90"
          >
            <vxe-table
              border="none"
              ref="xTree"
              stripe
              highlight-hover-row
              :row-style="rowStyle2"
              align="center"
              height="600"
              :cell-style="cellStyle"
              :data.sync="EarlyWarningListAll">
              <vxe-table-column field="eventCode" title="矛盾编号" type="html"></vxe-table-column>
              <vxe-table-column field="label" title="矛盾类型" style="color:#209EFF;"></vxe-table-column>
              <vxe-table-column field="reportingName" title="发起人"></vxe-table-column>
              <vxe-table-column field="createTime" title="登记时间"></vxe-table-column>
              <vxe-table-column min-width="50px" title="操作">
                <template v-slot="{ row }">
                  <vxe-button type="text" status="primary" icon="vxe-icon--edit-outline" @click="getInfo(row)">
                    处置信息
                  </vxe-button>
                </template>
              </vxe-table-column>
            </vxe-table>
          </Modal>
          <vxe-table
            border="none"
            ref="xTree"
            stripe
            highlight-hover-row
            :row-style="rowStyle2"
            align="center"
            height="200"
            :cell-style="cellStyle"
            :data.sync="EarlyWarningList">
            <vxe-table-column field="eventCode" title="矛盾编号" type="html"></vxe-table-column>
            <vxe-table-column field="label" title="矛盾类型" style="color:#209EFF;"></vxe-table-column>
            <vxe-table-column field="reportingName" title="发起人"></vxe-table-column>
            <vxe-table-column field="createTime" title="登记时间"></vxe-table-column>
            <vxe-table-column min-width="50px" title="操作">
              <template v-slot="{ row }">
                <vxe-button type="text" status="primary" icon="vxe-icon--edit-outline" @click="getInfo(row)">处置信息
                </vxe-button>
              </template>
            </vxe-table-column>
          </vxe-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  selectTitleMap,
  selectEarlyWarningList,
  selectAgencyHandlingList,
  getStatisticsTriggerNumber,
  getCountNumber,
  getJobDuty,
  getHomeWarningStatisticsCount,
  getWarningStatisticsCount, findEarlyWarningList, getFocusAreaPage, getFocusRegionPage
} from '../../api/contradiction'
import { getEventApproveList } from '@/api/approval'
import { parseTime } from '@/libs/util'
import { date2str } from '@/api/eventlist'

export default {
  name: 'contradictionmyWorkbench',
  data () {
    return {
      showmore1: false,
      showmore2: false,
      TitleMapdata: {},
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      EarlyWarningList: [], // 预警列表
      AgencyHandlingList: [], // 待处理列表
      EarlyWarningListAll: [], // 预警列表全
      AgencyHandlingListAll: [], // 待处理列表全
      importentData: {},
      totalNum: 0,
      imageUrls: [
        { img: require('@/assets/contradictionImgs/重点人员.png'), img1: require('@/assets/contradictionImgs/c1.png') },
        { img: require('@/assets/contradictionImgs/重点领域.png'), img1: require('@/assets/contradictionImgs/c2.png') },
        { img: require('@/assets/contradictionImgs/重点地区.png'), img1: require('@/assets/contradictionImgs/c3.png') },
        { img: require('@/assets/contradictionImgs/重点事项.png'), img1: require('@/assets/contradictionImgs/c4.png') }
      ],
      approveNum: 0,
      warnCounts: {
        level1Count: 0, // 一级预警数量
        level2Count: 0, // 二级预警数量
        level3Count: 0 // 三级预警数量
      }
    }
  },
  computed: {
    serverUserInfo () {
      return this.$store.state.user.severUserInfo
    }
  },
  mounted () {
    console.log(this.$store.state.user.severUserInfo)
    // eslint-disable-next-line standard/object-curly-even-spacing
    findEarlyWarningList({ status: '2' }).then(res => {
      if (res.data.errcode === 0) {
        this.TitleMapdata.warningNum = res.data.data.totalRecord
      }
    })
    this.init()
    this.getWarningCounts() // 获取各级预警数量
  },
  methods: {
    more1 () {
      this.showmore1 = true
    },
    more2 () {
      this.showmore2 = true
    },
    size (pageSize) {
      this.params.pageSize = pageSize
      this.getAgencyHandlingList()
    },
    changePageNo (pageNo) {
      this.params.pageNo = pageNo
      this.getAgencyHandlingList(this.params)
    },
    toPage (url) {
      this.$router.push({
        path: url
      })
      // this.$router.push(url)
    },
    cellStyle ({ column, columnIndex, row, rowIndex }) {
      if (columnIndex === 1) {
        return { 'color': '#209EFF' }
      }
    },
    getInfo (row) {
      this.showmore1 = false
      this.showmore2 = false
      this.$router.push({
        name: 'contradictionRegisterAdd',
        params: {
          what: 'edit',
          id: row.id,
          isShowInfo: true,
          level: this.serverUserInfo.company_grade > 6 ? 'street' : this.serverUserInfo.company_grade === '6' ? 'community' : 'community',
          type: 3
        }
      })
    },
    init () {
      getJobDuty().then(res1 => {
        if (res1.data.errcode === 0) {
          let params = {}
          if (res1.data.data === '1') {
            params.job_duty = '1'
          }
          getCountNumber(params).then(res => {
            if (res.data.errcode === 0) {
              this.totalNum = res.data.data.num
              return
            }
            this.$Message.error(res.data.errmsg)
          })
          return
        }
        this.$Message.error(res1.data.errmsg)
      })
      getStatisticsTriggerNumber().then(res => {
        if (res.data.errcode === 0) {
          this.importentData = res.data.data
          // countEventTrigger().then(res1 => {
          //   this.importentData.eventNum = res1.data.data.count
          // })
          getWarningStatisticsCount({ importantEventStatus: 1 }).then(res1 => {
            this.importentData.eventNum = res1.data.data.total
          })
          let ms = date2str(new Date())
          ms = ms.substring(0, ms.length - 3)
          let me = date2str(new Date())
          me = me.substring(0, me.length - 3)
          getFocusAreaPage({ data_type: '0', month_s: ms, month_e: me }).then(res1 => {
            this.importentData.typeNum = res1.data.data.totalRecord
          })
          let ms2 = date2str(new Date())
          ms2 = ms2.substring(0, ms2.length - 3)
          let me2 = date2str(new Date())
          me2 = me2.substring(0, me2.length - 3)
          getFocusRegionPage({ data_type: '0', month_s: ms2, month_e: me2 }).then(res1 => {
            this.importentData.cityNum = res1.data.data.totalRecord
          })
          return
        }
        this.$Message.error(res.errmsg)
      })
      selectTitleMap().then(res => {
        if (res.data.errcode === 0) {
          let apidata = res.data.data
          delete apidata.warningNum
          this.TitleMapdata = {
            ...apidata
          }
          return
        }
        this.$Message.error(res.errmsg)
      })
      selectEarlyWarningList().then(res => {
        if (res.data.errcode === 0) {
          let list = res.data.data
          if (list.length > 3) {
            list = list.slice(0, 3)
          }
          // list.forEach((item) => {
          //   item.label = '<div><span style="color: #209EFF">' + item.label + '</span></div>'
          // })
          // createTime
          list.sort((a, b) => new Date(b.createTime) - new Date(a.createTime))
          this.EarlyWarningListAll = res.data.data
          this.EarlyWarningListAll.sort((a, b) => new Date(b.createTime) - new Date(a.createTime))

          this.EarlyWarningList = list
          return
        }
        this.$Message.error(res.errmsg)
      })
      this.getAgencyHandlingList()
      // 获取待审批数量
      getEventApproveList({
        data_type: '2', // 我的审批
        approve_type: '' // 不限制申请类型
      }).then(res => {
        if (res.data.errcode === 0) {
          // 只统计 deal_result 为 0 的数据
          this.approveNum = (res.data.data || []).filter(item => item.deal_result === '0').length
        }
      })
    },
    getAgencyHandlingList () {
      selectAgencyHandlingList({ pageNo: this.params.pageNo, pageSize: this.params.pageSize }).then(res => {
        if (res.data.errcode === 0) {
          let list = res.data.data.results
          if (list.length > 5) {
            list = list.slice(0, 5)
          }
          list.forEach((item) => {
            item.label = '<div><span style="color: #209EFF">' + item.label + '</span></div>'
          })
          // occurrenceTime 倒序
          list.sort((a, b) => new Date(b.occurrenceTime) - new Date(a.occurrenceTime))
          this.AgencyHandlingListAll = res.data.data.results
          this.AgencyHandlingListAll.forEach((item) => {
            item.label = '<div><span style="color: #209EFF">' + item.label + '</span></div>'
          })
          this.AgencyHandlingListAll.sort((a, b) => new Date(b.occurrenceTime) - new Date(a.occurrenceTime))
          this.AgencyHandlingList = list
          this.params.totalRecord = res.data.data.totalRecord
          return
        }
        this.$Message.error(res.errmsg)
      })
    },
    rowStyle ({ row, rowIndex }) {
      if ([1, 3, 5].includes(rowIndex)) {
        return {
          backgroundColor: '#F2F8FF'
        }
      }
    },
    rowStyle2 ({ row, rowIndex }) {
      if ([1].includes(rowIndex)) {
        return {
          backgroundColor: '#F2F8FF'
        }
      }
    },
    // 获取各级预警数量
    getWarningCounts () {
      getHomeWarningStatisticsCount().then(res => {
        if (res.data.errcode === 0) {
          this.warnCounts = {
            level1Count: res.data.data.oneLevelCount || 0,
            level2Count: res.data.data.twoLevelCount || 0,
            level3Count: res.data.data.threeLevelCount || 0
          }
        } else {
          this.$Message.error(res.data.errmsg || '获取预警统计数据失败')
        }
      }).catch(error => {
        console.error('获取预警统计数据失败:', error)
        this.$Message.error('获取预警统计数据失败')
      })
    },
    toPages (page) {
      switch (page) {
        case 'newNum': // 今日登记
          this.$router.push({
            path: '/contradiction/contradictionList',
            query: {
              createTime: parseTime(new Date(), '{y}-{m}-{d}')
            }
          })
          break
        default:
      }
    }
  }
}
</script>
<style scoped lang="less">
.page_style {
  margin-top: 10px;
  text-align: right;
}

.contradiction-div {
  //background-color: #BFBFBF;
  padding: 0px;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

.statistics-bar {
  margin-top: 20px;
  border-radius: 16px;
  background: #fff;
  padding: 30px;
}

.statistics-bar-bottom {
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  align-self: center;
  align-content: center;
}

.statistics-bar-bottom-title {
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #2e3038;
}

.statistics-bar-bottom-num {
  font-family: "Montserrat";
  font-weight: 400;
  font-size: 18px;
  /*text-align: right;*/
  color: #209eff;
  margin-left: 24px;
}

.statistics-bar-bottom-unit {
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 10px;
  text-align: left;
  color: #c3cddb;
}

.statistics-bar-top {
  display: flex;
}

.i-top {
  color: #ff9e9e;
  font-size: 36px;
  font-face: Montserrat;
  font-weight: 400;
  letter-spacing: 0;
  position: relative;
}

.i-top-ii {
  color: #c6bb7f;
  font-size: 36px;
  font-face: Montserrat;
  font-weight: 400;
  letter-spacing: 0;
  position: relative;
}

.i-top-iii {
  color: #9fd5ff;
  font-size: 36px;
  font-face: Montserrat;
  font-weight: 400;
  letter-spacing: 0;
  position: relative;
}

.i-center {
  margin-top: 14px;
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 14px;
  text-align: left;
  color: #2e3038;
}

.i-bottom {
  font-family: "Montserrat";
  font-weight: 400;
  font-size: 18px;
  /*text-align: right;*/
  color: #c53535;
}

.i-bottom-ii {
  font-family: "Montserrat";
  font-weight: 400;
  font-size: 18px;
  /*text-align: right;*/
  color: #ee9f45;
}

.i-bottom-iii {
  font-family: "Montserrat";
  font-weight: 400;
  font-size: 18px;
  /*text-align: right;*/
  color: #209eff;
}

.statistics-bar-top-i {
  display: flex;
  /* width: calc(66% - 8px); */
  width: 33%;
  margin-right: 8px;
  padding: 10px;
  border-radius: 8px;
  background: linear-gradient(246.01deg, #ff8181 0%, #fff 100%);
  border: 1px solid #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.statistics-bar-top-ii {
  display: flex;
  /* width: calc(20% - 8px); */
  width: 33%;
  margin-right: 8px;
  background: linear-gradient(236.56deg, #ffe923 0%, #fffdf8 100%);
  border: 1px solid #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 8px;
  padding: 10px;
}

.statistics-bar-top-iii {
  display: flex;
  /* width: calc(14%); */
  width: 33%;
  background: linear-gradient(207.31deg, #9fd5ff 0%, #f9fdff 100%);
  border: 1px solid #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 8px;
  padding: 10px;
}

.litlelist {
  padding: 16px;
  margin-top: 20px;
  width: 100%;
  height: 290px;
  border-radius: 16px;
  background: #fff;
}

.title-img {
  width: 32px;
  height: 32px;
  background: transparent;
  margin-right: 16px;
}

.title-box {
  border-bottom: 1.5px solid #f6f6f6;
  padding-bottom: 16px;
  display: flex;
  font-weight: 700;
  font-size: 22px;
  text-align: left;
  color: #0c1f5d;
}

.rightbox {
  width: 100%;
}

.flex {
  display: flex;
}

.biglist {
  padding: 16px;
  margin-top: 20px;
  width: 100%;
  height: 390px;
  border-radius: 16px;
  background: #fff;
}

.top-outbox {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .top-bigbox {
    display: flex;

    .top-box {
      padding-top: 16px;
      background: #fff;
      height: 180px;
      width: 100%;
      text-align: center;
      margin-right: 20px;
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
        transform: translateY(-2px);
      }

      .topimg {
        margin: 0 auto;
        width: 85px;
        height: 85px;
        background: transparent;
      }

      .top-num {
        font-weight: 400;
        font-size: 36px;
        text-align: center;
        color: #2c3564;
      }

      .top-tit {
        font-family: "PingFang SC";
        font-weight: 400;
        font-size: 14px;
        text-align: center;
        color: #2e3038;
      }
    }

    .top-box-check {
      padding-top: 16px;
      //background: #fff;
      height: 180px;
      width: 100%;
      text-align: center;
      margin-right: 20px;
      border-radius: 16px;
      background: #ffeeec;
      border: 1px solid #c53535;

      .topimg {
        margin: 0 auto;
        width: 85px;
        height: 85px;
        background: transparent;
      }

      .top-num {
        font-weight: 400;
        font-size: 36px;
        text-align: center;
        color: #2c3564;
      }

      .top-tit {
        font-family: "PingFang SC";
        font-weight: 400;
        font-size: 14px;
        text-align: center;
        color: #2e3038;
      }
    }

    //.top-box:last-child{
    //  margin-right: 0;
    //}
  }

  .top-right-box {
    width: 40%;
    background-color: #FFFFFF;
    border-radius: 16px;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    flex-direction: column;

    .top-box {
      padding-top: 11px;
      padding-bottom: 7px;
      background: #F2F8FF;
      //height: 160px;
      width: 100%;
      text-align: center;
      margin-right: 10px;
      border-radius: 8px;

      .topimg {
        margin: 0 auto 3px;
        width: 40px;
        height: 40px;
        background: transparent;
      }

      .top-num {
        font-weight: 400;
        font-size: 36px;
        text-align: center;
        color: #2c3564;
      }

      .top-num-check {
        font-weight: 400;
        font-size: 36px;
        text-align: center;
        color: #c53535;
      }

      .top-tit {
        font-family: "PingFang SC";
        font-weight: 400;
        font-size: 14px;
        text-align: center;
        color: #2e3038;
      }
    }

    .top-box-check-ii {
      padding-top: 11px;
      padding-bottom: 7px;
      border-radius: 8px;
      background: #ffeeec;
      border: 1px solid #c53535;
      //height: 160px;
      width: 100%;
      text-align: center;
      margin-right: 10px;
      border-radius: 8px;

      .topimg {
        margin: 0 auto 3px;
        width: 40px;
        height: 40px;
        background: transparent;
      }

      .top-num {
        font-weight: 400;
        font-size: 36px;
        text-align: center;
        color: #2c3564;
      }

      .top-num-check {
        font-weight: 400;
        font-size: 36px;
        text-align: center;
        color: #c53535;
      }

      .top-tit {
        font-family: "PingFang SC";
        font-weight: 400;
        font-size: 14px;
        text-align: center;
        color: #2e3038;
      }
    }

    .can-click {
      cursor: pointer;
    }

    .top-box:last-child {
      margin-right: 0;
    }
  }

  .top-right-box-title {
    font-family: "PingFang SC";
    font-weight: 400;
    font-size: 22px;
    text-align: center;
    color: #c53535;
    margin-bottom: 5px;
  }
}
</style>
