<!--单独的背景颜色渐变、宽高100%的内容展示方块组件-->
<template>
  <el-card shadow="always" class="single-square-box" :style="{background: 'linear-gradient(180deg, '+data.bgColor+' 0%,rgba(255,255,255,0) 100%)'}">
    <div class="single-square-box-title">{{ data.title }}</div>
    <div class="single-square-box-value">{{ data.value }}</div>
  </el-card>
</template>

<style scoped lang="scss">
  .single-square-box{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    color:#666666;
    text-align: left;
    .single-square-box-title{
      font-size: 12px;
      line-height: 12px;
      padding-bottom: 12px;
    }
    .single-square-box-value{
      font-size: 26px;
      line-height: 26px;
      font-weight: 500;
    }
    ::v-deep .el-card__body{
      padding: 12px 16px;
    }
  }
</style>
<script>
  export default {
    props: ['data'],
  }
</script>
