
<template>
  <div class="cusdesc">
    <div class="desc" v-for="(col, index) in columns" :key="index" :style="{ width: col.width || '50%' }">
      <div class="desc-title">{{ col.title }}:</div>
      <div class="desc-value">{{ data[col.key || col.dataIndex] }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CusDesc",
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    data: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>


<style scoped lang="less">
  .cusdesc {
    width: 100%;
    /** 文本1 */
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 23.17px;
    color: rgba(255, 255, 255, 1);
    text-align: left;
    vertical-align: top;
    .desc {
      width: 100%;
      margin-top: 16px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      &:first-child {
        margin-top: 0;
      }
    }

  }
</style>
