<template>
  <div class="info-pad-container">
    <div class="title">
      {{ option.title }}
    </div>
    <div
      v-for="item in option.contentList"
      :key="item.key"
      class="item"
    >
      <div class="key">
        {{ item.key }}
      </div><div class="dot">
        {{ option.isShowDot ? '：' : '' }}
      </div>
      <div class="value">
        {{ item.value }}
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    /**
     * option: {
     *   isShowDot: false, -->是否展示:，默认false
     *   title: '标题', --> 标题
     *   contentList: [{
     *     key: '用户名',
     *     value: '小赵'
     *   }]
     * }
     */
    props: {
      option: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
      };
    },
    created() {},
    methods: {
  
    }
  };
</script>

<style lang="scss" scoped>
.info-pad-container {
  background: #fff;
  margin: 20px;
  padding: 20px;
  .title {
    font-weight: bold;
    margin: 5px 0;
    padding: 5px;
  }
  .item {
    // width: 100%;
    margin: 5px 0;
    display: flex;
    justify-content: flex-start;
    align-items: top;
    .key {
      padding: 5px;
      line-height: 20px;
      
    }
    .dot {
      line-height: 30px;
    }
    .value {
      padding: 5px;
      line-height: 20px;
      flex: 1;
      word-break: break-all;
    }
  }
}

</style>
