qmx_page_admin/src/views/create-order/components/order-detail-submodule/PaymentPlan.vue

<template>
  <div class="payment-plan">
    <InfoCard>
      <template #title>
        <span>回款计划</span>
        <span style="font-size: 14px;line-height: 22px;">
          （共<span class="num-active"> 0 </span>条
          <span>预计回款</span>
          <span class="num-active"> ￥58000 </span>
          <span> 实际回款</span>
          <span class="num-active"> ￥580 </span>）
        </span>
      </template>
      <div class="payment-plan-content">
        <el-table
          class="payment-plan-content-table"
          border
          :data="paymentPlanList"
          style="width: 1108px">
          <el-table-column
            prop="number"
            label="序号"
            width="280">
          </el-table-column>
          <el-table-column
            prop="expectedReturnTime"
            label="预计回款时间"
          />
          <el-table-column
            prop="expectedReturnAmount"
            label="预计回款金额"
          />
        </el-table>
      </div>
    </InfoCard>
  </div>
</template>
<script>
import InfoCard from '../../ui/InfoCard.vue'
export default {
  name: 'PaymentPlan',
  components: {
    InfoCard
  },
  props: {
    orderDetail: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      paymentPlanList: [
        {
          number: '1',
          expectedReturnTime: '2020-01-01',
          expectedReturnAmount: '￥58000'
        }
      ] 
    } 
  }
}
</script>
<style scoped lang="scss">
.payment-plan {
  .payment-plan-content-table {
    border-radius: 4px;
    ::v-deep {
      .cell {
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        color: $gray_10;
      }
      .has-gutter {
        th {
          background: #F9FAFB;
          .cell {
            padding: 0;
            color: #686868;
          }
        }
      }
    }
  }
  .num-active {
    color: $color_main;
  }
}
</style>