<template>
  <div>
    <div class="image-capture">
      <div class="image-capture-top">影像采集3项</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.照片须反映客户名称；固定资产贷款项目的照片能清晰地记录项目工程进度</div>
              <div>2.照片需注明查看时间并双人签字确认；</div>
              <div>3.双人入镜：其中1人必须是主办客户经理；</div>
              <div>4.特殊情况下，协办客户经理不能去到现场的，可由其他同事代为进行现场调查；照片由实际到场的人签字，贷后报告由协办客户经理签字并承担贷后检查责任；</div>
              <div>5.照片时间为客户经理提交贷后报告时间的前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.年报：3表(资产负债表、利润表、现金流量表)+编表说明；</div>
              <div>2.最近一期报表：2表(资产负债表、利润表)+编表说明；</div>
              <div>3.企业日常财务管理未编制现金流量表的，不作强制要求；</div>
              <div>4.客户经理须对较上期变化幅度超过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>
    </div>
  </div>
</template>

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

@Component({
  name: "FinancialStatus",
})
export default class FinancialStatus extends Vue {}
</script>

<style scoped>
.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%;
}
.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 {
  width: 68%;
}
.card-bottom-left div {
  width: 100%;
  color: #999999;
  font-size: 14px;
  white-space: normal;
  line-height: 25px;
  font-family: "Arial Normal", "Arial";
}
.card-bottom {
  height: 175px;
  display: flex;
  justify-content: space-between;
}
.card-bottom-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  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>