<template>
  <div class="leftcard">
    <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="序号" width="100" />
      <el-table-column prop="use" label="用途" width="100" />
       <el-table-column prop="property" label="性质" width="120" />
      <el-table-column prop="area" label="面积" width="130" />
    </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() {

  },
  beforeDestroy() {},
  methods: {

  },
};
</script>

<style lang="scss" scoped>
.leftcard {
  width: 25%;
  height: 100%;
  .cardhead {
    width: 100%;
    height: 40px;
    margin-left: 10px;
    line-height: 40px;
    color: rgb(27, 185, 206);
    font-size: 26px;
  }
  .cardcontent {
  width: 450px;
  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>