<!--
 * @Description: 文本2, 三个值的
 * @Author: 王晓颖
 * @Date: 2020-08-12 09:32:56
 -->
<template>
  <div class="info-box">
    <div>
      <span>{{titles.name}}：{{data[options.name]}}</span>
    </div>
    <div>
      <span>{{titles.num1}}：<b :style="'color:'+options.color">{{data[options.num1]}}</b>{{options.unit1}}</span>
      <span>{{titles.num2}}：{{data[options.num2]}}{{options.unit2}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Text2',
  props: {
    titles: {
      type: Object,
      default: () => {
        return {
          name: '名称',
          num1: '数量1',
          num2: '数量2'
        }
      }
    }, // 标题
    options: {
      type: Object,
      default: () => {
        return {
          color: 'red',
          name: 'name',
          num1: 'num1',
          num2: 'num2',
          unit1: '个',
          unit2: '%'
        }
      }
    }, // 胚子
    data: {
      type: Object,
      required: true
    } // 数据
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '../../assets/css/variable.scss';
  .info-box{
    flex:1;
    div{
      overflow: hidden;
      height: .12rem;
    }
    span{
      font-size: .04rem;
      color:$blockTextColor;
      -webkit-transform-origin-x: 0;
      transform:  scale(0.5833333333333334);
      -webkit-transform: scale(.5);
      b{
        font-weight: bold;
        font-size: .07rem
      }
    }
  }
</style>