assess-app/page_task/credit/credit.vue

<template>
  <view class="text-color-333" style="position: relative;left: -15rpx;">
    <view class="property content p-30 sys-background-fff r-30">
      <view  class=" size-26">
        <!-- 房产信息 -->
        <view  class="">
          <view class="row-c">
            <view class="dot"></view>
            <text class="sys-weight-600 m-l10">征信信息</text>
          </view>
          <view class="property-box-one r-20 m-t30 p-20">

            <view class="sys-from-background-color m-t20 p-20 r-20">
              <view class="m-b20">征信照片</view>
              <view class="row-c">
                <!--									<image class="picture m-r20 r-10" :src="property.data.certificate_img"-->
                <!--										mode="aspectFill">-->
                <!--									</image>-->
                <en-image @onShowImg="onPreviewImage" :img="creditData.credit_img"></en-image>
              </view>
            </view>
          </view>
        </view>



      </view>

    </view>
  </view>
</template>

<script>
import EnImage from "@/components/en-utils/en-image/en-image.vue";
import EnBlank from "@/components/en-utils/en-blank/en-blank.vue";

export default {
  name:'credit-list',
  components: {
    EnBlank,
    EnImage
  },
  props: {
    creditData: {
      default: {
        'credit_img':[]
      }
    },
    creditKey: {
      default: []
    }
  },
  data() {
    return {}
  },
  methods: {
    onPreviewImage(url) {
      this.$emit('onShowImg', url)
    },
    verifyKey(key) {
      return this.creditKey.indexOf(key) >= 0
    }
  },
}
</script>

<style lang="scss" scoped>
.property {
  padding-top: 90rpx;
  background-image: url('/page_task/static/img/task-details/bg-four.png');
  background-repeat: no-repeat;
  background-size: 100% auto;


  .bg-box {
    width: 710rpx;
    height: 80rpx;
  }

  .dot {
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background: #0FB160;
  }
}

.property-box-one {
  position: relative;
  background: linear-gradient(161deg, #B0FDB3 0%, #5EDE9D 100%);

}

.property-box-two {
  position: relative;
  background: linear-gradient(161deg, #FFE2E2 0%, #FBCACA 100%);

  .two-text {
    background: #D06565;
  }

  .picture {
    width: 160rpx;
    height: 190rpx;
    display: block;
  }
}

.property-box-three {
  position: relative;
  background: linear-gradient(161deg, #CDE7FD 0%, #B6D2FB 100%);

  .two-text {
    background: #2E86F4;
  }

  .picture {
    width: 160rpx;
    height: 90rpx;
    display: block;
    border-radius: 10rpx;
  }
}

.property-box-four {
  position: relative;
  background: linear-gradient(161deg, #F4DCBD 0%, #EEC398 100%);

  .two-text {
    background: #C37929;
  }

  .picture {
    width: 160rpx;
    height: 90rpx;
    display: block;
    border-radius: 10rpx;
  }
}

.property-icon {
  position: absolute;
  right: 40rpx;
  top: 12rpx;
}

.capsule {
  color: #fff;
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 99rpx;
  background: #0FB160;
  text-align: center;
  padding: 0 20rpx;
  margin-right: 10rpx;
}

.card {
  width: 160rpx;
  height: 90rpx;
  display: block;
}
</style>