<template>
  <div class="zdxx">
    <div class="tablebox">
      <table cellpadding="0" cellspacing="0" class="zdxxTable">
        <col width="80" />
        <col width="60" />
        <col width="90" />
        <col width="235" />
        <col width="150" />
        <tr>
          <td colspan="6" class="title">宗地基本信息</td>
        </tr>
        <tr>
          <td colspan="6" class="unit">单位：■平方米 □公顷（□亩）、万元</td>
        </tr>
        <tr>
          <td colspan="2">不动产类型</td>
          <td colspan="4">■土地 ■房屋建筑 □构筑物 □森林、林地 □其他</td>
        </tr>
        <tr>
          <td colspan="2">坐落</td>
          <td colspan="4"></td>
        </tr>
        <tr>
          <td rowspan="8" class="title2">土地状况</td>
        </tr>
        <tr>
          <td colspan="2">宗地面积</td>
          <td></td>
          <td>用途</td>
          <td></td>
        </tr>
        <tr>
          <td colspan="2">等级</td>
          <td></td>
          <td>价格</td>
          <td></td>
        </tr>
        <tr>
          <td colspan="2">权利类型</td>
          <td></td>
          <td>权利性质</td>
          <td></td>
        </tr>
        <tr>
          <td colspan="2">权利设定方式</td>
          <td></td>
          <td>容积率</td>
          <td></td>
        </tr>
        <tr>
          <td colspan="2">建筑密度</td>
          <td></td>
          <td>建筑限高</td>
          <td></td>
        </tr>
        <tr>
          <td colspan="2">图幅号</td>
          <td></td>
          <td>地籍号</td>
          <td></td>
        </tr>
        <tr>
          <td colspan="2">档案号</td>
          <td></td>
          <td>地块代码</td>
          <td></td>
        </tr>
        <tr>
          <td colspan="2">宗地四至-东</td>
          <td colspan="4"></td>
        </tr>
        <tr>
          <td colspan="2">宗地四至-南</td>
          <td colspan="4"></td>
        </tr>
        <tr>
          <td colspan="2">宗地四至-西</td>
          <td colspan="4"></td>
        </tr>
        <tr>
          <td colspan="2">宗地四至-北</td>
          <td colspan="4"></td>
        </tr>
        <tr>
          <td class="title2" height="96">备注</td>
          <td colspan="5"></td>
        </tr>
        <tr>
          <td class="title2" height="96">附记</td>
          <td colspan="5"></td>
        </tr>
        <tr>
          <td colspan="2">状态</td>
          <td colspan="2"></td>
          <td>区县代码</td>
          <td></td>
        </tr>
        <tr>
          <td class="title2">变化情况</td>
          <td colspan="5" class="bhqk">
            <div class="box">
              <table cellspacing="0" cellpadding="0" :width="bhqkTableWidth">
                <tr>
                  <td class="bhqkTh">上手业务号</td>
                  <td>20191230048</td>
                  <td>20191230048</td>
                  <td>20191230048</td>
                  <td>20191230048</td>
                  <td>20191230048</td>
                </tr>
                <tr>
                  <td class="bhqkTh">宗地代码</td>
                  <td>610100008004GB00001</td>
                  <td>610100008004GB00001</td>
                  <td>610100008004GB00001</td>
                  <td>610100008004GB00001</td>
                  <td>610100008004GB00001</td>
                </tr>
                <tr>
                  <td class="bhqkTh">变化前宗地代码</td>
                  <td>610100008004GB00001</td>
                  <td>610100008004GB00001</td>
                  <td>610100008004GB00001</td>
                  <td>610100008004GB00001</td>
                  <td>610100008004GB00001</td>
                </tr>
                <tr>
                  <td class="bhqkTh">变化内容</td>
                  <td>土地面积1000改为2000</td>
                  <td>土地面积1000改为2000</td>
                  <td>土地面积1000改为2000</td>
                  <td>土地面积1000改为2000</td>
                  <td>土地面积1000改为2000</td>
                </tr>
                <tr>
                  <td class="bhqkTh">变化原因</td>
                  <td>因某某原因</td>
                  <td>因某某原因</td>
                  <td>因某某原因</td>
                  <td>因某某原因</td>
                  <td>因某某原因</td>
                </tr>
                <tr>
                  <td class="bhqkTh">登记时间</td>
                  <td>2008年3月11日</td>
                  <td>2008年3月11日</td>
                  <td>2008年3月11日</td>
                  <td>2008年3月11日</td>
                  <td>2008年3月11日</td>
                </tr>
                <tr>
                  <td class="bhqkTh">登簿人</td>
                  <td>路**</td>
                  <td>路**</td>
                  <td>路**</td>
                  <td>路**</td>
                  <td>路**</td>
                </tr>
                <tr>
                  <td class="bhqkTh">附记</td>
                  <td>2014年10月21日办理房屋首次登记"</td>
                  <td>2014年10月21日办理房屋首次登记"</td>
                  <td>2014年10月21日办理房屋首次登记"</td>
                  <td>2014年10月21日办理房屋首次登记"</td>
                  <td>2014年10月21日办理房屋首次登记"</td>
                </tr>
              </table>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "zdxx",
  data() {
    return {
      bhqkColumns: [
        "上手业务号",
        "宗地代码",
        "变化前宗地代码",
        "变化内容",
        "变化原因",
        "登记时间",
        "登簿人",
        "附记",
      ],
      bhqkData: [
        {
          ssywh: "20191230048",
          zddm: "610100008004GB00001",
          bhqzddm: "610100008004GB00001",
          bhnr: "土地面积1000改为2000",
          bhyy: "因某某原因",
          djsj: "2008年3月11日",
          dbr: "路**",
          fj: "2014年10月21日办理房屋首次登记",
        },
        {
          ssywh: "20191230048",
          zddm: "610100008004GB00001",
          bhqzddm: "610100008004GB00001",
          bhnr: "土地面积1000改为2000",
          bhyy: "因某某原因",
          djsj: "2008年3月11日",
          dbr: "路**",
          fj: "2014年10月21日办理房屋首次登记",
        },
        {
          ssywh: "20191230048",
          zddm: "610100008004GB00001",
          bhqzddm: "610100008004GB00001",
          bhnr: "土地面积1000改为2000",
          bhyy: "因某某原因",
          djsj: "2008年3月11日",
          dbr: "路**",
          fj: "2014年10月21日办理房屋首次登记",
        },
        {
          ssywh: "20191230048",
          zddm: "610100008004GB00001",
          bhqzddm: "610100008004GB00001",
          bhnr: "土地面积1000改为2000",
          bhyy: "因某某原因",
          djsj: "2008年3月11日",
          dbr: "路**",
          fj: "2014年10月21日办理房屋首次登记",
        },
      ],
      bhqkTableWidth: 744,
    };
  },
  mounted() {
    this.bhqkTableWidth = (this.bhqkData.length + 1) * 180 + 110;
  },
};
</script>

<style lang="scss" scoped>
.zdxx {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  padding: 10px 25px;
  .tablebox {
    width: 100%;
    height: 100%;
    background: #fff;
    border: 1px solid rgb(228, 228, 228);
    text-align: center;
    padding: 4px;
    overflow-y: scroll;
    .zdxxTable {
      width: 100%;
      color: #333;
      td {
        border: 1px solid rgb(228, 228, 228);
        line-height: 30px;
        padding: 0 4px;
      }
      .title {
        line-height: 68px;
        font-size: 20px;
      }
      .unit {
        text-align: right;
      }
      .title2 {
        writing-mode: vertical-lr;
        letter-spacing: 6px;
      }
      .bhqk {
        padding: 0;
        .box {
          width: 744px;
          overflow-x: scroll;
        }
        .test {
        }
        table {
          .bhqkTh {
            width: 110px;
            line-height: 40px;
            background-color: #f5f5f5;
            border: 1px solid rgb(228, 228, 228);
            font-weight: bold;
          }
          td {
            width: 180px;
          }
        }
      }
    }
  }
}
</style>