<!--
 * @Description: 指标块布局
 * @Author: 王晓颖
 * @Date: 2021-07-14 09:03:40
 -->
<template>
  <div class="block-container">
    <div class="block-title">
      <title2 :title="title"/>
      <!--<dv-decoration-1 style="width:0.8rem; height:100%;" :color="colors"/>-->
      <!--<div class="title">{{title}}</div>-->
      <!--</dv-decoration-1>-->
    </div>
    <div class="block-content" :style="{'padding':padding}">
      <slot/>
    </div>
  </div>
</template>

<script>
  import Title2 from "../title/Title2";
  export default {
    name: "container1",
    components: {Title2},
    props:{
      title:{
        type:String,
        default:''
      }, // 标题
      colors:{
        type: Array,
        default: ()=>{
          return ['#ffffff','#4f98ee']
        }
      },
      padding:{
        type:String,
        default:'0.05rem'
      }, // 内容内边距
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.block-container{
  height: 100%;
  width:100%;
  display: flex;
  flex-direction: column;
  .block-title{
    display: flex;
    justify-content: start;
    align-items: flex-end;
    .title{
      line-height: 0.4rem;
      font-size:0.28rem;
      font-weight: bold;
      color: white;
    }
  }
  .block-content{
    flex:1;
    /*height: calc(100% - 0.5rem);*/
  }
}
</style>