<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>担保方式</td>
            <td>担保合同金额(万元)</td>
          </tr>
          <tr>
            <td>李雪峰</td>
            <td>D2819098876322</td>
            <td>最高额担保合同</td>
            <td>保证-担任担保</td>
            <td>220.00</td>
          </tr>
          <tr>
            <td>李雪峰</td>
            <td>D2819098876322</td>
            <td>最高额担保合同</td>
            <td>保证-担任担保</td>
            <td>220.00</td>
          </tr>
          <tr>
            <td>李雪峰</td>
            <td>D2819098876322</td>
            <td>最高额担保合同</td>
            <td>保证-担任担保</td>
            <td>220.00</td>
          </tr>
          <tr>
            <td>李雪峰</td>
            <td>D2819098876322</td>
            <td>最高额担保合同</td>
            <td>保证-担任担保</td>
            <td>220.00</td>
          </tr>
          <tr>
            <td>李雪峰</td>
            <td>D2819098876322</td>
            <td>最高额担保合同</td>
            <td>保证-担任担保</td>
            <td>220.00</td>
          </tr>
          <tr>
            <td>李雪峰</td>
            <td>D2819098876322</td>
            <td>最高额担保合同</td>
            <td>保证-担任担保</td>
            <td>220.00</td>
          </tr>
          <tr>
            <td>李雪峰</td>
            <td>D2819098876322</td>
            <td>最高额担保合同</td>
            <td>保证-担任担保</td>
            <td>220.00</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="image-capture">
      <div class="image-capture-top">影像采集5项</div>
      <div class="image-capture-bottom">
        <div class="card">
          <div class="card-top">
            抵质押物现场照片
            <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>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
/**
 * @Description 保证人情况调查
 * @Author JiangTao
 * @Date 2021-11-10 下午 03:52
 */
@Component({
  name: "GuarantorStatus",
})
export default class GuarantorStatus 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: 95%;
  margin: 0 auto;
  margin-top: 2%;
  margin-bottom: 2%;
}
table > tr:nth-child(odd) td {
  background-color: #f7fafc;
}
tr {
  height: 52px;
}
table > tr:nth-child(1) {
  height: 46px;
}
table > tr:nth-child(1) td {
  background-color: #f2f2f2;
}
tr > td:nth-child(5) {
  padding-right: 32px;
  text-align: right;
}
table > tr:nth-child(1) > td:nth-child(5) {
  padding-right: 0;
  text-align: center;
}
tr td {
  width: 20%;
  font-size: 115%;
  padding: 0.8% 0;
  font-family: "Arial Normal", "Arial";
  text-align: center;
}
.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>
