<template>
  <div class="rightcard">
    <div class="card1 cardCon d-center">
      <div class="cardhead">房屋情况统计表</div>
      <div class="cardcontent" style="margin-top: 70px">
        <dv-scroll-board :config="config" class="board" />
      </div>
    </div>
    <div class="card2 cardCon mt-10">
      <div class="cardhead">登记业务量</div>
      <Rose />
    </div>
    <div class="card3 cardCon mt-10">
      <div class="cardhead">登记类型总量</div>
      <columnarsmat />
    </div>
  </div>
</template>

<script>
import columnarsmat from "@/components/Echart/Columnarsmat";
import Rose from "@/components/Echart/Rose";
export default {
  data () {
    return {
      config: {
        headerBGC: '#016AC5',
        oddRowBGC: '#154295',
        evenRowBGC: '#154295',
        header: ['序号', '用途', '性质', '面积'],
        data: [
          ['住宅', '自建房', '转移登记', '73.94'],
          ['商业服务', '市场化商品房', '转移登记', '1067.14'],
          ['住宅', '成本售价房', '转移登记', '601.47'],
          ['住宅', '市场化商品房', '转移登记', '38111.37'],
          ['住宅', '移民搬迁安置房', '转移登记', '104.16'],
          ['办公', '自建房', '转移登记', '14913.86'],
          ['柴房', '市场化商品房', '转移登记', '615.55'],
          ['住宅', '经济适用住房', '转移登记', '173.17'],
          ['车库/车位', '市场化商品房', '转移登记', '105.27'],
          ['住宅', '房改房', '转移登记', '372.4']
        ]
      }
    }
  },
  components: { columnarsmat, Rose },
  mounted () {
    // scroll(tableref.value.$refs.bodyWrapper);//设置滚动
  }
}
</script>
<style lang="scss" scoped>
/deep/.row-item:not(:last-child) {
  margin-bottom: 5px;
}

.rightcard {
  width: 32%;
  display: flex;
  height: calc(100% -94px);
  flex-direction: column;

  .cardhead {
    font-size: 20px;
    font-weight: bold;
    color: #02D9FD;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    top: 12px;
    text-align: center;
  }

  .cardcontent {
    width: 100%;
    height: 250px;
  }

  .cardCon {
    padding: 20px 5px;
    position: relative;
    text-align: center;
    width: 100%;
  }

  .card1 {
    height: 200px;
    background: url("~@/image/homeLeftBg.png") no-repeat;
    background-size: 100% 100%;

    .board {
      width: 90%;
      margin: 0 auto;
      height: 135px;
      margin-top: 40px;
    }
  }

  .card2 {
    background: url("~@/image/djywl.png") no-repeat;
    background-size: 100% 100%;
    padding: 60px 0 0 0;
  }

  .card3 {
    flex: 1;
    height: 100%;
    background: url("~@/image/lxzl.png") no-repeat;
    background-size: 100% 100%;
    padding-bottom: 0;
    .cardhead {
      top: 8px;
    }
  }

  .cardhead {
    position: absolute;
  }
}
</style>