<template>
  <div class="body">
    <div class="rarle">
      <tatle-bar :tatle="tatleName"></tatle-bar>
    </div>
    <scroller-view height="calc(100vh - 50px)">
    <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>
      </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="conAmt" 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="startDate" 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="endDate" 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="合同利率" :value="conRate" 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="办理机构" label-width="120" :value="handleOrg" 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="manager" 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="managerPhone" readonly input-align="right" />
            </van-cell-group>
          </van-col>
        </van-row>
      </div>
    </div>
    </scroller-view>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from "vue-property-decorator";

@Component({
  name: "ContractDetail"
})
export default class ContractDetail extends Vue{
  tatleName="合同详情";
  name="刘明明";
  idcard="121212121212121212";
  conAmt="¥5,000,000.00";
  startDate="2022-01-01";
  endDate="2022-01-01";
  grtType="抵押";
  conRate="4.35%";
  loanUse="活动经营";
  handleOrg="黑龙江省哈尔滨市松北区支行";
  manager="李莉莉";
  managerPhone="13333333333";
}
</script>

<style scoped lang="scss">
.coollayout {
  margin: 3%;
}
.CoolName {
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
}
.layout {
  background: rgba(249, 249, 249, 1);
}
.layoutName {
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 13px;
  color: #333333;
}
</style>
