<template>
  <div class="box">
    <img :src="imgSrc" class="arrow" />
    <span class="value">{{ value }}</span>
  </div>
</template>

<script>
import arrawUp from './images/up_bg.png'
import arrawDown from './images/down_bg.png'
export default {
  name:'TslCompare',
  props: {
    value: {
      type: String,
      default: '20%'
    }
  },
  computed: {
    imgSrc() {
      const val = this.value.split('%')[0]
      if (val >= 0) {
        return arrawUp
      } else {
        return arrawDown
      }
    }
  }
}
</script>

<style scoped>
.box {
  display: flex;
}
.box .arrow {
  margin-right: 0.18em;
  width: 0.25em;
  height: 0.34em;
}
.box .value {
  font-size: 0.36em;
}
</style>