<template>
  <div class="bdcqldjml">
    <table class="mlTable">
      <tr>
        <th colspan="5" class="title">
          不动产权利登记目录
          <font class="num">第 1 页</font>
        </th>
      </tr>
      <tr>
        <td>序号</td>
        <td>不动产单元号</td>
        <td>不动产类型</td>
        <td>所在本数</td>
        <td>备注</td>
      </tr>
      <tr v-for="(item, index) in data" :key="index">
        <td>{{ item.xh }}</td>
        <td>{{ item.bdcdyh }}</td>
        <td>{{ item.bdclx }}</td>
        <td>{{ item.szbs }}</td>
        <td>{{ item.bz }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "bdcqldjml",
  data() {
    return {
      data: [],
    };
  },
  computed: {
    ...mapGetters(["djbxx"]),
  },
  mounted() {
    this.data = this.djbxx.djml;
  },
};
</script>

<style lang="scss" scoped>
.bdcqldjml {
  width: 100%;
  height: 702px;
  background: #fff;
  overflow-y: scroll;
  .mlTable {
    width: 640px;
    margin: 0 auto;
    color: #333;
    border-spacing: 1px;
    background-color: #333;

    .title {
      font-size: 28px;
      line-height: 60px;
      font-family: serif;
      position: relative;

      .num {
        position: absolute;
        font-size: 12px;
        right: 20px;
        font-family: initial;
        font-weight: normal;
      }
    }

    td,
    th {
      background-color: white;
      line-height: 40px;
      padding: 0 4px;
      text-align: center;
    }
  }
}
</style>