ahyd_DIB/pages/commercialBI/components/manager/revenueAnalysis.vue

<template>
  <div class="revenueAnalysisMain">
    <div class="revenueAnalysis">
      <div class="item">
        <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/agreement.svg"></image>
        <div class="info" style="margin-bottom: 24px;">
          <p class="title">合同总金额<text class="unit">/万元</text></p>
          <p class="value">{{dataInfo.ContractProfitLoss}}</p>
        </div>
      </div>
      <div class="item" style="margin-bottom: 24px;">
        <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/shopNumber.svg"></image>
        <div class="info">
          <p class="title">店铺数量<text class="unit">/个</text></p>
          <p class="value">{{dataInfo.ShopCount}}</p>
        </div>
      </div>
      <div class="item">
        <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/add.svg"></image>
        <div class="info">
          <p class="title">欠款金额<text class="unit">/万元</text></p>
          <p class="value">{{dataInfo.SalesPerSquareMeter}}</p>
        </div>
      </div>
      <div class="item">
        <image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/overShop.svg"></image>
        <div class="info">
          <p class="title">半年到期合同<text class="unit">/个</text></p>
          <p class="value">{{dataInfo.ExpiredShopCount}}</p>
        </div>
      </div>
    </div>
    <div class="list" >
<!--      <p class="bigTitle" v-if="dataInfo.ContractList.length>0">即将到期合同列表: </p>-->
      <div class="item" v-for="(item,index) in dataInfo.ContractList" :key="index">
        <div class="title">{{item.name}}</div>
        <div class="value">{{item.value}}到期</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: "revenueAnalysis",
    data() {
        return {
            dataInfo:{}
        }
    },
    props: {
        data: {
            type: Object,
            default: () => {}
        }
    },
    watch: {
        data: {
            handler(value) {
                this.dataInfo = value
            }
        }
    },
    methods:{

    }
}
</script>

<style scoped lang="scss">
.revenueAnalysisMain{
  .revenueAnalysis{
    width: calc(100%);
    background: #F7F7F7;
    border-radius: 4px;
    padding: 12px;
    box-sizing: border-box;
    display: flex;
    flex-flow: wrap;
    margin-top: 12px;
    .item{
      width: 50%;
      display: flex;
      .icon{
        width: 20px;
        height: 20px;
        margin-right: 8px;
        margin-top: 4px;
      }
      .info{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #160002;
        line-height: 20px;
        .unit{
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #A69E9F;
          line-height: 20px;
          margin-left: 2px;
        }
      }
      .value{
        font-size:16px;
        font-family: DINAlternate-Bold, DINAlternate;
        font-weight: bold;
        color: #341D00;
        line-height: 20px;
        margin-top: 8px;
      }
    }
  }
  .list{
    margin-top: 12px;
    .bigTitle{
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 600;
      color: #160002;
    }
    .item{
      width: 100%;
      display: flex;
      .title{
        flex: 1;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #160002;
        line-height: 20px;
      }
      .value{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #160002;
        line-height: 20px;
        text-align: right;
      }
    }
  }
}
</style>