<template>
  <div class="body">
    <div class="rarle">
      <tatle-bar :tatle="tatleName"></tatle-bar>
    </div>
    <div class="layout">
      <van-row type="flex" class="CoolName">
        <van-col span="24" class="coollayout">个人信息</van-col>
      </van-row>
      <div class="layoutbody">
        <van-row type="flex" class="layoutName">
          <van-col span="24">
            <van-cell-group>
              <van-field label="姓名" :value="name" readonly input-align="right" />
            </van-cell-group>
          </van-col>
        </van-row>
        <van-row type="flex" class="layoutName">
          <van-col span="24">
            <van-cell-group>
              <van-field label="身份证号" :value="idCard" readonly input-align="right" />
            </van-cell-group>
          </van-col>
        </van-row>
        <van-row type="flex" class="layoutName">
          <van-col span="24">
            <van-cell-group>
              <van-field label="手机号码" :value="phone" readonly input-align="right" />
            </van-cell-group>
          </van-col>
        </van-row>
      </div>
      <van-row type="flex" class="CoolName">
        <van-col span="24" class="coollayout">借款信息</van-col>
      </van-row>
      <div class="layoutbody">
        <van-row type="flex" class="layoutName">
          <van-col span="24">
            <van-cell-group>
              <van-field label="贷款账号" :value="loanNo" readonly input-align="right" />
            </van-cell-group>
          </van-col>
        </van-row>
        <van-row type="flex" class="layoutName">
          <van-col span="24">
            <van-cell-group>
              <van-field label="借款金额" :value="loanAmt" readonly input-align="right" />
            </van-cell-group>
          </van-col>
        </van-row>
        <van-row type="flex" class="layoutName">
          <van-col span="24">
            <van-cell-group>
              <van-field label="借款日期" :value="loanStartDate" readonly input-align="right" />
            </van-cell-group>
          </van-col>
        </van-row>
        <van-row type="flex" class="layoutName">
          <van-col span="24">
            <van-cell-group>
              <van-field label="到期日期" :value="loanEndDate" readonly input-align="right" />
            </van-cell-group>
          </van-col>
        </van-row>
        <van-row type="flex" class="layoutName">
          <van-col span="24">
            <van-cell-group>
              <van-field label="借款用途" :value="loanUse" readonly input-align="right" />
            </van-cell-group>
          </van-col>
        </van-row>
        <van-row type="flex" class="layoutName">
          <van-col span="24">
            <van-cell-group>
              <van-field label="担保方式" :value="grtType" readonly input-align="right" />
            </van-cell-group>
          </van-col>
        </van-row>
        <van-row type="flex" class="layoutName">
          <van-col span="24">
            <van-cell-group>
              <van-field label="还款方式" label-width="120" :value="repayType" readonly input-align="right" />
            </van-cell-group>
          </van-col>
        </van-row>
        <van-row type="flex" class="layoutName">
          <van-col span="24">
            <van-cell-group>
              <van-field label="借款利率" label-width="120" :value="loanRate" readonly input-align="right" />
            </van-cell-group>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
import {Component, Vue} from "vue-property-decorator";
@Component({
  name: "BillDetails"
})
export default class BillDetails extends Vue{
  tatleName = "借据详情";
  name = "刘明明";
  idCard = "122323232323232323";
  phone = "13223232323";
  loanNo = "3746 8827 8849 0002";
  loanAmt = "￥5,000,000.00";
  loanStartDate = "2022-09-01";
  loanEndDate = "2022-09-09";
  loanUse = "企业经营";
  grtType = "抵押";
  repayType = "等额本息";
  loanRate = "5.51%";
}
</script>

<style scoped lang="scss">
.layout {
  background: rgba(249, 249, 249, 1);
}

.coollayout {
  margin: 3%;
}

.CoolName {
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
}

.layoutName {
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  color: #333333;
}
</style>