<template>
  <div class="sub-title">
    <span class="dot" />
    <p class="title">{{title}}</p>
    <m-count v-if="value" class="count" :value="value" />
    <span v-if="unit" class="unit">{{unit}}</span>
  </div>
</template>

<script>
export default {
  name: 'SubTitle',
  props: {
    title: {
      type: String,
    },
    value: {
      type: Number,
    },
    unit: {
      type: String
    }
  },
}
</script>

<style lang="stylus" scoped>
.sub-title
  display flex
  align-items center
  font-weight bold
  color $edgeColor
  margin-bottom .05rem
  .dot
    display inline-block
    width .03rem
    height .1rem
    background $edgeColor
    margin-right .05rem
  .count
    font-size .14rem
    color $color-yellow
    margin-left 20%
    margin-right .05rem
  .unit
    $unit()
</style>
