<!--
 * @Description: 数值显示,左右
 * @Author: 王晓颖
 * @Date: 2020-09-06 16:17:37
 -->
<template>
  <div class="index-container">
    <!--左边图标-->
    <div class="index-left">
      <!--标题-->
      <div class="index-name" :style="{'color':color}">{{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: 'imageBlock2',
  props: {
    options: {
      type: Object,
      default: () => {
        return {
          bgColor: 'rgb(0, 232, 255)', // 背景颜色,
          color: 'rgb(0, 232, 255)' // 数值颜色
        }
      }
    },
    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{
    /*border:solid 1px #ff0000;*/
    /*height:0.45rem;*/
    width:100%;
    box-sizing: border-box;
    padding:0.06rem 0.05rem 0.01rem 0.05rem;
    display:flex;
    justify-content: space-between;
    /*align-items: center;*/
    background: url("../../assets/images/button/boardBack.png") no-repeat left top;
    background-size: 100% 100%;
    .index-left{
      /*border:solid 1px #ff0000;*/
      width:45%;
      height:0.2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      .index-name{
        color:rgb(0, 232, 255);
        font-size:0.08rem;
        font-weight: bold;
        margin-bottom: 0.03rem;
      }
    }
    .index-right{
      /*border:solid 1px #ff0000;*/
      color:rgb(0, 232, 255);
      flex:1;
      text-align: center;
      box-sizing: border-box;
      .index-value{
        display: inline-block;
        font-size:0.21rem;
        font-weight: bolder;
        overflow: hidden;
        color: #fff;
        letter-spacing: .005rem;
        font-family: $digitalFamily;
        white-space: nowrap;
        .unit{
          font-size:0.07rem;
        }
      }

    }
  }
</style>