bigDataApp/components/Descriptions/DescriptionItem.vue

<template>
  <view class="description-item">
    <view class="description-item__title" :style="{ width: labelWidth }">
      <slot name="title"></slot>
    </view>
    <view class="description-item__content">
      <slot name="content"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'DescriptionItem',
  props: {
    labelWidth: {
      type: String,
      default: ''
    }
  }
};
</script>

<style lang="scss" scoped>
.description-item {
  width: 100%;
  display: flex;
  align-items: center;
  line-height: 40rpx;
  margin-bottom: 24rpx;

  &__title {
    width: 112rpx;
    text-align: right;
    font-size: 28rpx;
    color: #9ba6a3;
    font-weight: 500;
    margin-right: 16rpx;
  }

  &__content {
    font-size: 28rpx;
    color: #042118;
    flex: 1;
  }
}
</style>