<!--
 * @Description: 数值显示
 * @Author: 王晓颖
 * @Date: 2020-09-06 16:17:37
 -->
<template>
  <div class="index-container">
    <!--左边-->
    <div class="index-left" style="width:0.43rem">
      <div class="index-name" :style="{'color':color,'font-size':size=='small'?'0.08rem':'0.09rem'}">{{data.name}}</div>
    </div>
    <!--右边内容-->
    <div class="index-right">
      <div class="index-value" :style="{'color':color}">{{data.value}}<span class="unit">{{data.unit}}</span></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'imageBlock',
  props: {
    options: {
      type: Object,
      default: () => {
        return {
          bgColor: 'rgb(0, 232, 255)', // 背景颜色,
          color: 'rgb(0, 232, 255)' // 数值颜色
        }
      }
    },
    size: {
      type: String,
      default: ''
    }, // 大小
    color: {
      type: String,
      default: 'rgb(0, 232, 255)'
    },
    data: {
      type: Object,
      default: () => {
        return {
          name: '拥堵指数', // 标题
          value: '341', // 数值
          unit: ''
        }
      }
    }
  },
  data () {
    return {
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import '../../assets/css/variable.scss';
  .index-container{
    /*height:0.45rem;*/
    width:1.2rem;
    box-sizing: border-box;
    padding:0.12rem 0.05rem;
    /*justify-content: space-between;*/
    /*align-items: center;*/
    background: url("../../assets/images/button/boardBack2.png") no-repeat left top;
    background-size: 100% 100%;
    .index-left{
      /*width:2rem;*/
      /*width:0.47rem;*/
      height:0.2rem;
      margin-left:0.08rem;
      width:0.6rem;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      .index-name{
        color:rgb(0, 232, 255);
        font-size:0.1rem;
        font-weight: bold;
        margin-bottom: 0.03rem;
      }
    }
    .index-right{
      color:rgb(0, 232, 255);
      flex:1;
      text-align: center;
      .index-value{
        font-size:0.25rem;
        font-weight: bolder;
        color: #fff;
        letter-spacing: .005rem;
        font-family: $digitalFamily;
        .unit{
          font-size:0.07rem;
        }
      }

    }
  }
</style>