
<template>
  <div class="trade-count-box">
    <div class="title">
      <i class="iconfont icon-xieshu" :style="{color:iconColor,textShadow: `0 0 30px ${iconColor}`}"></i>
      {{title}}
    </div>
    <div class="content" :style='{borderBottom:"1px solid "+color}'>
        <numroll :money='money' :decimal='decimal' :color='color'></numroll>
        <div class="endpoint" :style='{background:color}'></div>
        <div class="unit" :style='{color:color}'>{{unit}}</div>
    </div>
  </div>
</template>
<script>
import numroll from "../../global/numroll/index";
export default {
  components: {
    numroll
  },
  props: {
    count: {
      type: String,
      default: "0.00"
    },
    unit: {
      type: String,
      default: ""
    },
    color: {
      type: String,
      default: "#00dbef"
    },
    iconColor: {
      type: String,
      default: "#00dbef"
    },
    title: {
      type: String,
      default: "#00dbef"
    },
    decimal:{
      type: Boolean,
      default: true
    }
  },
  watch:{
    count:{
      handler: function (val, oldVal) {
        if (val) {
          this.money=val.toString()
        }
      }
    }
  },
  data() {
    return {
      money:'0.00'
    }
  },
  mounted () {
    this.money=this.count
  }
};
</script>
<style>
.trade-count-box .title {
  font-size: 18px;
  color: #c0c0c3 !important;
  text-align: right;
  position: relative;
  padding-right: 12px;
  box-sizing: border-box;
  font-family: "pingfangR";
  margin: 5px 0 5px 0;
  text-align: right !important;
}
.trade-count-box .title .iconfont {
  font-size: 14px;
  margin-right: 5px;
  text-shadow: 0 0 30px #2a9e9e;
  background: transparent;
  animation-timing-function: ease-in-out;
  animation-name: breathe;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: #2a9e9e;
}
@-webkit-keyframes breathe {
  0% {
    text-shadow: 0 0 1px inherit;
    opacity: 0.1;
  }
  100% {
    text-shadow: 0 1px 30px inherit;
    opacity: 1;
  }
}
.trade-count-box .content {
  padding: 0px 0 25px 0;
  border-bottom: 1px solid #2a9e9e;
  position: relative;
  box-sizing: content-box;
  height: 40px;
}
.trade-count-box .content .endpoint {
  width: 4px;
  height: 4px;
  position: absolute;
  right: 0px;
  bottom: -2px;
  background: #2a9e9e;
  border-radius: 100%;
  color: #2a9e9e;
  text-shadow: 0 0 30px #2a9e9e;
  font-size: 1px
}
.trade-count-box .content .unit {
  position: absolute;
  right: -20px;
  top: 8px;
  color: #2a9e9e;
  font-size: 14px;
}
</style>
