<!--
 * @Description: 
 * @Author: 陈长吉
 * @Date: 2019-01-10 14:37:57
 * @LastEditTime: 2020-09-17 16:31:37
 * @LastEditors: Please set LastEditors
 -->
<template>
  <el-col v-bind="$attrs">
    <div class="details-item">
      <label class="details-item__label" :style="{ width: labelWidth }">
        <slot name="label">{{ label }}</slot>
      </label>
      <div class="details-item__content">
        <slot></slot>
      </div>
    </div>
  </el-col>
</template>
<script>
// @yunjidoc 布局组件 - 详情页单元格
export default {
  componentName: 'DetailItem',
  props: {
    /**
     * @prop {String} label 标题
     */
    label: {
      type: String,
      default: ''
    },
    /**
     * @prop {String} labelWidth 标题宽度
     */
    labelWidth: {
      type: [String],
      default: 'auto'
    }
  }
}
</script>
<style lang="less" scoped>
@import '~styles/var';
.details-item {
  display: flex;
  margin-bottom: 15px;
  &__label {
    text-align: left;
    flex: none;
    display: inline-block;
    color: @color-sub;
  }
  &__content {
    flex: 1;
    padding-left: 10px;
    padding-right: 20px;
  }
}
</style>
