<template>
  <div class="bottom-tabs">
    <div class="btns">
      <div v-for="(btn, i) in btns" :key="i">
        <m-count :style="`font-size:1.6rem;font-weight:bold;color:${colors[i]};`" :value="btn.count" :decimal="0"/>
        <p>{{btn.name}}</p>
      </div>
    </div>
    <img class="bar" :src="require(`@/assets/images/tab-bar.png`)">
  </div>
</template>

<script>
export default {
  name: 'BottomTabs',
  data() {
    return {
      btns: [
        {name: '任务总数', count: 7},
        {name: '自治共治', count: 4},
        {name: '站站联动', count: 1},
        {name: '协同会商', count: 1},
        {name: '处置完成', count: 1},
      ],
      colors: ['#fff', '#fd983f', '#1ea7c7', '#32e4af', '#fff'],
    }
  },
}
</script>

<style lang="stylus" scoped>
.bottom-tabs
  width 40%
  position fixed
  bottom 22%
  left 0
  right 0
  margin 0 auto
  // font-weight bold
  .btns
    display flex
    justify-content space-around
    padding 0 1rem
    >div
      text-align center
  .bar
    width 100%
    height 1.2rem
</style>
