<!--
  @description: 订单信息
  @Modifier: wy
  @routerPath:
  @date:2021-12-31 14:27
-->
<template>
  <div class="showDetailInfo">
    <div class="title pad-left">
      {{ infoContent.title }}
    </div>
    <template v-for="(item,index) in infoContent.descName">
      <div :key="index" class="desc">
        <div :class="['desc-name', 'pad-left', 'border-r', index===0 ? '' : 'border-top']">
          {{ item.name }}
        </div>
        <div :class="['desc-content', 'pad-left', 'border-r', index===0 ? '' : 'border-top']">
          {{ descContent[item.flag] }}
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: 'ShowDetailInfo',
  props: {
    infoContent: {
      type: Object,
      require: true
    }
  },
  data() {
    return {
      descContent: {
        orderStatus: 1,
        orderNum: 2,
        time: '2021-12-31',
        type: '个人'
      }

    }
  }
}
</script>

<style scoped lang="less">
    .showDetailInfo {
       margin: 15px 0;
       border: 1px solid #f2f2f2;
        .title {
            background-color: #f5f5f5
        }
        .desc {
            width: 100%;
            display: flex;
            .desc-name {
                width: 200px;
                box-sizing: border-box;
                padding: 10px 20px;
            }
            .desc-content {
                flex: 1;
                padding: 10px 20px;
            }
        }
    }

    .pad-left {
        padding-left: 20px;
    }
    .border-r {
        border-right: 1px solid #F5F5F5;
    }
    .border-top {
        border-top: 1px solid #f5f5f5;
    }
</style>
