<template>
  <div class="defense">
    <p>民防建筑总数 <m-count style="color:#6ae7b5" :value="190" :decimal="0"/>/<m-count :value="208" :decimal="0"/></p>
    <div class="bar">
      <div class="inner green" style="background:#6ae7b5;width:91%;"></div>
    </div>
    <p>使用面积 <m-count style="color:#ff9502" :value="308433" /> <span class="unit">㎡</span></p>
    <p>建筑面积 <m-count :value="606413.35" /> <span class="unit">㎡</span></p>
    <div class="bar">
      <div class="inner red" style="background:#ff9502;width:51%;"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Defense',
  data() {
    return {}
  },
}
</script>

<style lang="stylus" scoped>
.defense
  display flex
  flex-direction column
  justify-content space-around
  .bar
    width 90%
    height .06rem
    border-radius .02rem
    background #19487F
    >.inner
      height 99%
      border-radius inherit
      position relative
      &:after
        content ''
        width .04rem
        height 100%
        position absolute
        right -0.015rem
        transform skew(-30deg)
      &.green
        &:after
          background #CCFF78
          box-shadow 0 0 .03rem .01rem #9FFF00
      &.red
        &:after
          background #E02020
          box-shadow 0 0 .03rem .01rem #E63D3D
  .unit
    color #aaa
    font-size .08rem
</style>
