<template>
  <div class="index-container">
    <div class="name-top">{{data.name}}</div>
    <!--左边图标-->
    <div class="index-top">
      <slot></slot>
    </div>
    <!--右边内容-->
    <div class="index-bottom">
      <!--标题-->
      <div class="index-name">{{data.name}}</div>
    </div>
  </div>
</template>

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

<style rel="stylesheet/scss" lang="scss" scoped>
  .name-top{
    color: #f9f9f9;
    z-index: 1000;
    position: relative;
    top:35px;
    left:10px;
  }
  .index-container{
    width: 100%;
    height: 100%;
    /*padding: 0.05rem;*/
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: column;
    .index-top{
      width: 280px;
      height:220px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img{
        padding-right: 20px;
        /*width:68%;*/
        width:100%;
        height:200px;
      }
    }
    .index-bottom{
      color: #000000;
      flex:1;
      width: 280px;
      .index-name{
        color: #000000;
        font-weight: bold;
        text-align: center;
        /*margin-bottom: 0.03rem;*/
      }
    }
  }
</style>