<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";
@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>