<template>
  <m-card title="保障">
    <div class="row">
      <div>
        <m-sub>公租房</m-sub>
        <m-progress
          :value="50"
          :msg="{
            name: '公共租赁',
            value: '2253/38863',
            color: '#fff',
          }"
          color="#EDB872"
        />
        <m-progress
          :value="50"
          :msg="{
            name: '单位租赁',
            value: '3554/468833',
            color: '#fff',
          }"
          color="#EDB872"
        />
      </div>
      <div>
        <m-sub>廉租房</m-sub>
        <div class="legend">
          <p><i /><span>实物</span><m-count class="count" :value="33" /></p>
          <p><i /><span>租金</span><m-count class="count" :value="798" /></p>
        </div>
        <m-progress
          :value="10"
          :msg="{
            name: '补贴金额',
            value: '426万元',
            color: '#fff',
          }"
          color="#F7D600"
          background-color="#0091FF"
        />
      </div>
    </div>
    <div class="row">
      <div>
        <m-sub>共有产权房</m-sub>
        <m-progress
          :value="50"
          :msg="{
            name: '已办入户/已分配',
            value: '8763/19324',
            color: '#fff',
          }"
          color="#EDB872"
        />
      </div>
      <div>
        <m-sub>动迁安置房</m-sub>
        <m-progress
          :value="50"
          :msg="{
            name: '剩余套数/总套数',
            value: '4183/94028',
            color: '#fff',
          }"
          color="#EDB872"
        />
      </div>
    </div>
  </m-card>
</template>

<script lang="ts">
export default {
  name: 'A014',
  title: '保障',
  row: 1,
}
</script>
<script lang="ts" setup></script>

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

.row
  display flex
  &+.row
    margin-top .1rem
  >div
    flex 1
    &+div
      margin-left .04rem
    .legend
      display flex
      width 100%
      justify-content space-between
      margin .08rem 0 .02rem
      p
        display flex
        align-items center
        i
          width .06rem
          height @width
          border-radius 50%
        span
          margin 0 .05rem
        .count
          font-size .14rem
          color $yellow
        &:first-child
          i
            background #F7D600
        &:last-child
          i
            background #0091FF
</style>
