<template>
  <div class="desc">
    <div class="icon" v-if="icon">
      <img :src="icon" alt="" class="icon-img">
    </div>
    <div class="info" :style="{ paddingLeft: `${paddingLeft}px` }">
      <div class="title" :style="{ color: titleColor }">{{ title }}</div>
      <div class="num" :style="{ color: color, textAlign: align }">{{ num }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CustomDesc",
  props: {
    titleColor: {
      type: String,
      default: ''
    },
    paddingLeft: {
      type: [String, Number],
      default: '12'
    },
    icon: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: '#08EBF5'
    },
    title: {
      type: String,
      default: ''
    },
    num: {
      type: [String, Number],
      default: ''
    },
    align: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped lang="less">
@import "assets/styles/mixin";
  .desc {
    .clear-fix;
    .icon {
      width: 56px;
      height: 56px;
      .float(left);
      .icon-img {
        display: block;
        width: 56px;
        height: 56px;
      }
    }
    .info {
      overflow: hidden;
      padding-left: 12px;
      .title {
        font-family: MicrosoftYaHei;
        font-size: 14px;
        color: rgba(255,255,255,0.50);
        font-weight: 400;
      }
      .num {
        font-family: HIKLDH-Number-CondensedMedium;
        font-size: 24px;
        color: #08EBF5;
        letter-spacing: 0;
        font-weight: 500;
      }
    }
  }
</style>
