<template>
  <div>
    <div class="basic-situation">
      <div class="basic-situation-top">
        <div></div>
        <div>授信业务基本情况</div>
      </div>
      <div class="basic-situation-table">
        <table>
          <tr>
            <td>产品名称：</td>
            <td>一般流动资金贷款</td>
            <td>贷款金额(万元)：</td>
            <td>200,000,000.00</td>
          </tr>
          <tr>
            <td>贷款余额(万元)：</td>
            <td>200,000,000.00</td>
            <td>币种：</td>
            <td>人民币</td>
          </tr>
          <tr>
            <td>风险分类：</td>
            <td>正常二级</td>
            <td>逾期本金：</td>
            <td>300,000.00</td>
          </tr>
          <tr>
            <td>欠息金额：</td>
            <td>300,000.00</td>
            <td>贷款形式：</td>
            <td>新增贷款</td>
          </tr>
          <tr>
            <td>担保方式：</td>
            <td>保证</td>
            <td>展期次数：</td>
            <td>0</td>
          </tr>
          <tr>
            <td>起始日：</td>
            <td>2021-06-18</td>
            <td>到期日：</td>
            <td>2022-06-19</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="image-capture">
      <div class="image-capture-top">影像采集2项</div>
      <div class="image-capture-bottom">
        <div class="card">
          <div class="card-top">
            1、四网查询
            <span style="color: red">*</span>
            <div>(图片：0/0 视频：0/0 音频：0/0)</div>
          </div>
          <div class="card-bottom">
            <div class="card-bottom-left">
              <div>1.查询时间为客户经理提交贷后报告时间的前30日内；</div>
            </div>
            <div class="card-bottom-right">
              <div class="reference-example">
                <div></div>
                <div>参考样例</div>
              </div>
              <div class="photograph">
                <div></div>
                <div>查询</div>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-top">
            2、环保查询
            <span style="color: red">*</span>
            <div>(图片：0/0 视频：0/0 音频：0/0)</div>
          </div>
          <div class="card-bottom">
            <div class="card-bottom-left">
              <div>1.填写《环保信息查询表》</div>
              <div>2.制造业需进行环保调查</div>
              <div>3.循环额度项下提用时不做强制要求，但通过五网查出有环保问题的，须进行环保调查</div>
            </div>
            <div class="card-bottom-right">
              <div class="reference-example">
                <div></div>
                <div>参考样例</div>
              </div>
              <div class="photograph">
                <div></div>
                <div>拍照</div>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-top">
            2、环保查询
            <span style="color: red">*</span>
            <div>(图片：0/0 视频：0/0 音频：0/0)</div>
          </div>
          <div class="card-bottom">
            <div class="card-bottom-left">
              <div>1.填写《环保信息查询表》</div>
              <div>2.制造业需进行环保调查</div>
              <div>3.循环额度项下提用时不做强制要求，但通过五网查出有环保问题的，须进行环保调查</div>
            </div>
            <div class="card-bottom-right">
              <div class="reference-example">
                <div></div>
                <div>参考样例</div>
              </div>
              <div class="photograph">
                <div></div>
                <div>拍照</div>
              </div>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-top">
            2、环保查询
            <span style="color: red">*</span>
            <div>(图片：0/0 视频：0/0 音频：0/0)</div>
          </div>
          <div class="card-bottom">
            <div class="card-bottom-left">
              <div>1.填写《环保信息查询表》</div>
              <div>2.制造业需进行环保调查</div>
              <div>3.循环额度项下提用时不做强制要求，但通过五网查出有环保问题的，须进行环保调查</div>
            </div>
            <div class="card-bottom-right">
              <div class="reference-example">
                <div></div>
                <div>参考样例</div>
              </div>
              <div class="photograph">
                <div></div>
                <div>拍照</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
/**
 * @Description 借款人信用状况调查
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:52
 */
@Component({
  name: "CreditStatus",
})
export default class CreditStatus extends Vue {}
</script>

<style scoped lang="scss">
.basic-situation-top {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.basic-situation-top > div:nth-child(1) {
  width: 0.4%;
  margin-right: 1%;
  padding-top: 1.8%;
  background-color: #f59a23;
}
.basic-situation-top > div:nth-child(2) {
  font-size: 115%;
}
table {
  width: 80%;
  margin-top: 2%;
  margin-bottom: 2%;
}
tr td {
  font-size: 115%;
  padding: 0.8% 0;
  font-family: "Arial Normal", "Arial";
}
tr > td:nth-child(1),
tr > td:nth-child(3) {
  text-align: right;
  color: #999999;
}
.image-capture-top {
  font-size: 129%;
  font-weight: bold;
  font-family: "Arial Normal", "Arial";
}
.image-capture-bottom {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
}
.card {
  width: 72%;
  margin-right: 4%;
  display: inline-block;
  padding: 2%;
  background-color: #fff9ef;
  border: 1px solid rgb(215, 215, 215);
  border-radius: 10px;
  background-image: url("../../../../../../assets/images/logo.png");
  background-repeat: no-repeat;
  background-size: 13%;
  background-position-x: 65%;
  background-position-y: 50%;
  margin-top: 0;
}
.card-top {
  font-weight: bold;
  font-size: 143%;
  display: inline-block;
  margin-bottom: 1%;
  font-family: "Arial Normal", "Arial";
}
.card-top > div {
  display: inline-block;
}
.card-bottom-left div {
  color: #999999;
  line-height: 25px;
  font-family: "Arial Normal", "Arial";
}
.card-bottom {
  display: flex;
  justify-content: space-between;
}
.card-bottom-right {
  display: flex;
  justify-content: flex-end;
  width: 25%;
  border-left: 1px solid rgb(215, 215, 215);
  margin: 1% 0;
}
.reference-example,
.photograph {
  width: 40%;
}
.reference-example > div:nth-child(1) {
  width: 39.7%;
  padding-top: 40%;
  margin: 0 auto;
  background-image: url("../../../../../../assets/svg/reference-example-logo.svg");
  background-repeat: no-repeat;
}
.photograph > div:nth-child(1) {
  width: 39.7%;
  padding-top: 40%;
  margin: 0 auto;
  background-image: url("../../../../../../assets/svg/photograph-logo.svg");
  background-repeat: no-repeat;
}
.reference-example > div:nth-child(2),
.photograph > div:nth-child(2) {
  text-align: center;
  margin-top: 9%;
}
</style>
