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

<script>
export default {
  name: "CusDesc2",
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    data: {
      type: Object,
      default: () => ({})
    },
    defaultValue: {
      type: String,
      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: space-between;
      align-items: center;
      height: 36px;
      line-height: 36px;
      background: rgba(1, 105, 216, 0.2);
      border: 1px solid rgba(212, 230, 255, 0.1);
      padding: 0 16px;
      box-sizing: border-box;
      &:first-child {
        margin-top: 0;
      }
    }

  }
</style>
