<template>
  <m-card title="行业监管">
    <div class="summary">
      <div class="rate">
        <div>
          <div>
            <span>
              <m-count class="count orange-count" :value="31" />/<m-count
                :value="50"
              />
            </span>
            <p>督查</p>
          </div>
          <div>
            <span> <m-count class="count orange-count" :value="31" />% </span>
            <p>整改率</p>
          </div>
        </div>
        <div>
          <div>
            <span> <m-count class="count" :value="90" />% </span>
            <p>日查</p>
          </div>
          <div>
            <span> <m-count class="count" :value="82" />% </span>
            <p>双周查</p>
          </div>
          <div>
            <span> <m-count class="count" :value="76" />% </span>
            <p>月查</p>
          </div>
        </div>
      </div>
      <div class="month">
        <p>房办月查完成情况</p>
        <div>
          <span v-for="(_, i) in new Array(12)" :key="i">
            {{ i + 1 }}
          </span>
        </div>
      </div>
    </div>
    <m-sub>重大事件清单</m-sub>
    <div class="content">
      <div class="title">
        <p>小区名称</p>
        <span class="line" />
        <span>上报主题</span>
      </div>
      <div class="info">
        <div>
          <span>事件类型</span>
          <p>事件类型</p>
        </div>
        <div>
          <span>人员伤亡</span>
          <p>0人</p>
        </div>
        <div>
          <span>财产损失</span>
          <p>0元</p>
        </div>
      </div>
    </div>
  </m-card>
</template>

<script lang="ts" setup></script>

<style lang="stylus" scoped>
@import  '../../components/MyComponent/main.styl'

.summary
  display flex
  .rate
    width 45%
    >div
      >div
        display inline-block
        width 33.3%
      .count
        font-size .14rem
        color #fff
      span,
      p
        font-size .09rem
        color #ccc
  .month
    flex 1
    $box()
    padding .05rem .1rem
    display flex
    flex-direction column
    margin .04rem 0
    >div
      margin-top .04rem
      flex 1
      display grid
      grid-template-columns 1fr 1fr 1fr 1fr 1fr 1fr
      grid-template-rows 1fr 1fr
      grid-gap .04rem
      span
        $center()
        border-radius .02rem
        background $green
.content
  $box()
  padding .04rem .1rem
  margin-bottom .04rem
  .title
    display flex
    align-items center
    .line
      flex 1
      height 0
      border-bottom .01rem dashed $blue
      margin 0 .05rem
  .info
    display flex
    >div
      flex 1

      span
        color #ccc
        font-size .08rem
</style>
