<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: [
          ['1', '咸阳市', '6', '998'],
          ['1', '咸阳市', '6', '998'],
          ['1', '咸阳市', '6', '998'],
          ['1', '咸阳市', '6', '998'],
          ['1', '咸阳市', '6', '998'],
          ['1', '咸阳市', '6', '998'],
        ]
      }
    }
  },
  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>