<template>
  <m-card title="公共收益">
    <m-sub :addition="{ value: 6000, unit: '元' }"> 存量总额 </m-sub>
    <div class="wrapper">
      <div>
        <p>收入（季度）</p>
        <div>
          <div>
            <p class="count"><m-count :value="100" /><span>元</span></p>
            <p>总额</p>
          </div>
          |
          <div>
            <p class="count"><m-count :value="180" /><span>个</span></p>
            <p>小区</p>
          </div>
        </div>
      </div>
      <div>
        <p>支出（季度）</p>
        <div>
          <div>
            <p class="count"><m-count :value="169" /><span>元</span></p>
            <p>总额</p>
          </div>
          |
          <div>
            <p class="count"><m-count :value="156" /><span>个</span></p>
            <p>小区</p>
          </div>
        </div>
      </div>
    </div>
    <m-sub :addition="{ value: 1684, unit: '万元' }">维修资金总额</m-sub>
  </m-card>
</template>

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

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

.wrapper
  display flex
  justify-content space-between
  margin .05rem 0
  >div
    width 48%
    $box()
    padding .06rem .1rem
    >div
      display flex
      align-items center
      margin-top .05rem
      >div
        flex 1
        text-align center
        .count
          font-size .14rem
          color $yellow
          font-family $font-din
          font-weight bold
          >span
            color #ccc
            font-size .09rem
            font-weight normal
        >p
          color #ccc
</style>
