incomeHeader.vue 1.35 KB
<template>
<div>
  <div class="income-header">
     <p class="total-income">收入: {{data.totalIncome}}</p>
     <div class="income">
       <span class="dot1"></span>
       <span class="income-name">货款收入</span>
       <span class="income-num">{{data.goodsIncome}}</span>
     </div>
     <div class="income">
       <span class="dot2"></span>
       <span class="income-name">补偿收入</span>
       <span class="income-num">{{data.compensateIncome}}</span>
     </div>
  </div>
  <incomeCircle :data="data"></incomeCircle>
  </div>
</template>

<script>
import incomeCircle from './incomeCircle';
export default {
  name: 'income-header',
  props: {
      data: {
          type: Object,
          default: {}
      }
  },
  data() {
    return {

    };
  },
  components: {
    incomeCircle
  }
};
</script>

<style lang="scss" scoped>
.income-header-wrapper {
  position: relative;
}
.income-header {
  margin: 48px 0;
}
.total-income {
  color: #000;
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 44px;
}
.income {
  margin-bottom: 20px;
  font-size: 24px;
  .dot1,.dot2 {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 16px;
    margin-right: 16px;
  }
  .dot1 {
    background-color: #002B47;
  }
  .dot2 {
    background-color: #65AB85;
  }
  .income-num {
    color: #000;
    margin-left: 20px;
  }
}
</style>