<template>
  <div class="contractGuarantee">
      <div class="top">
          <p class="title">{{obj.title?obj.title:''}}</p>
          <p class="value">{{obj.value?obj.value:''}}%</p>
      </div>
      <div class="progress">
          <div class="success" :style="{width:obj.value + '%'}"></div>
      </div>
  </div>
</template>

<script>
export default {
    name: "contractGuarantee",
    data() {
        return {
            obj:{

            }
        }
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data: {
            handler(value) {
                this.obj = value
            }
        }
    },
    methods:{

    }
}
</script>

<style scoped lang="scss">
.contractGuarantee{
  width: 100%;
  margin-top: 12px;
  .top{
    display: flex;
    align-content: center;
    justify-content: space-between;
    margin-bottom: 4px;
    .title{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #786B6C;
      line-height: 20px;
    }
    .value{
      font-size: 16px;
      font-family: DINAlternate-Bold, DINAlternate;
      font-weight: bold;
      color: #150002;
      line-height: 20px;
    }
  }
  .progress{
    width: 100%;
    height: 14px;
    background: #E5E8EF;
    border-radius: 4px;
    position: relative;
    .success{
      position: absolute;
      left: 0;top: 0;
      height: 100%;
      background: #1E80FF;
      border-radius: 0 2px 2px 0;
    }
  }
}
</style>
