<template>
  <div class="rightcard">
    <div class="card bg-shadow">
      <div class="cardhead">房屋情况统计表</div>
      <div class="cardcontent">
        <el-table class="bueatyScroll"
          :header-cell-style="{ 'text-align': 'center', background: '#02296d', color: '#ffffff' }"
          :cell-style="{ 'text-align': 'center' }" :row-style="{ height: '30px' }" :data="tableData" stripe
          ref="tableref" height="250px" style="width: 100%">
          <el-table-column type="index" label="序号" />
          <el-table-column prop="use" label="用途" />
          <el-table-column prop="property" label="性质" />
          <el-table-column prop="area" label="面积" />
        </el-table>
      </div>
    </div>
    <div class="card bg-shadow">
      <div class="cardhead">登记业务量</div>
      <Rose />
    </div>
    <div class="card bg-shadow">
      <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 {
      tableData: [{
        use: '居住',
        property: '住宅',
        area: '120'
      }, {
        use: '水果店',
        property: '商铺',
        area: '342'
      }, {
        use: '商场',
        property: '商业',
        area: '2343'
      }, {
        use: '耕地',
        property: '农田',
        area: '29987'
      }, {
        use: '林场',
        property: '林地',
        area: '67894'
      }, {
        use: '旅游',
        property: '旅游区',
        area: '22328'
      }, {
        use: '政府',
        property: '建筑用地',
        area: '1228'
      }, {
        use: '学校',
        property: '建筑用地',
        area: '2328'
      }, {
        use: '采矿',
        property: '矿场',
        area: '2328'
      }]
    };
  },
  components: { columnarsmat, Rose },
  mounted () {
    scroll(tableref.value.$refs.bodyWrapper);//设置滚动
  },
  beforeDestroy () { },
};
</script>

<style lang="scss" scoped>
.rightcard {
  .cardhead {
    width: 100%;
    height: 40px;
    margin-left: 10px;
    line-height: 40px;
    color: rgb(27, 185, 206);
    font-size: 26px;
  }

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

    /deep/.el-table tr:nth-child(even) {
      background-color: #043d72 !important;
    }

    /deep/.el-table__body-wrapper {
      background-color: #043d72
    }

    /* striped先开启斑马纹属性，这里是修改斑马纹颜色 */
    /deep/.el-table--striped .el-table__body tr.el-table__row--striped td {
      background: #043d72
    }

    /* 非斑马纹颜色 */
    /deep/.el-table tr {
      background: #043d72
    }

    /* 斑马纹颜色定义完之后会显示自带的边框颜色，这里要重置 */
    /deep/.el-table td,
    .building-top .el-table th.is-leaf {
      border: none;
      color: white;
    }

    /* 这里是滑过斑马纹滑过时的颜色 */
    /deep/.el-table--enable-row-hover .el-table__body tr:hover>td {
      background-color: #021c55;
    }

    .el-table {
      --el-table-border: 0px;
      --el-table-border-color: rgb(0 0 0 / 0%);

    }

    /deep/.el-table .el-table__cell {
      padding: 6px 0;
    }

  }

  .card {
    width: 100%;
    height: 300px;
  }

}
</style>