<template>
  <div>
    <div class="image-capture">
      <div class="image-capture-top">影像采集1项</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.客户经理应至少留存2张照片，其中1张应是客户经理与抵押物的合影，另外一张应能较为清晰地记录押品的状态</div>
              <div>2.押品实物状态发生变化，须在贷后检查报告中披露,点位：</div>
              <div>1.抵押物为房龄20年以内的商品房(住宅类)，贷后检查频率可调整为“半年/次”；</div>
              <div>2.照片由客户经理注明查看时间并双人签字确认；</div>
              <div>3.双人入镜：其中1人必须是主办客户经理；</div>
              <div>4.特殊情况下，协办客户经理不能去到现场的，可由其他同事代为进行现场调查；照片由实际到场的人签字，贷后报告由协办客户经理签字并承担贷后检查责任；</div>
              <div>5.照片时间为客户经理提交贷后报告时间的前30日内；</div>
              <div>6.追加的抵押物不作强制要求</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: "Others",
})
export default class Others 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: 100%;
  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 {
  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>
