contract/src/components/contractDetailBlock.vue

<template>
    <div class="detail-container">
      <div class="header clearfix">
        <p class="id">
          {{contractData.id}}
        </p>
        <p class="status" :class="{'gray':isOutDate}">
          {{contractData.status}}
        </p>
      </div>
      <p class="title" :class="{'gray':isOutDate}">
        {{contractData.title}}
      </p>
      <p class="date">
        {{contractData.date}}
      </p>
    </div>
</template>

<script>
    export default {
        name: "contractDetailBlock",
      props:['contractData','isOutDate'],
      data(){
          return{
            contractDataInner:this.contractData,
          }
      }
    }
</script>

<style scoped>
  .header{
    /*margin-top: 0.4rem;*/

  }
  p.id{
    float: left;
    color:#808080;
    font-size: 0.4rem;

  }
  p.status{
    color: #f1325f;
    font-size: 0.4rem;
    float: right;
  }
  p.title{
    text-align: left;
    font-size: 0.4rem;
    margin-top: 0.2rem;
    color: #1491e2;
  }
  p.date{
    text-align: left;
    color: #808080;
    font-size: 0.3rem;
    margin-top: 0.2rem;

  }
  .gray{
    color: #808080 !important;
  }
  .detail-container + .detail-container{
    margin-top: 0.6rem;
  }
</style>