seecoder-devcloud-frontend/src/components/RowItem.vue

<template>
  <ElRow style="width: 100%; margin: 3px 0;height: 32px" :gutter="12">
    <ElCol :span="labelSpan" class="label-col">
      {{label}}
    </ElCol>
    <ElCol :span="valueSpan" class="value-col">
      <slot></slot>
    </ElCol>
  </ElRow>
</template>

<script>
export default {
  name: 'RowItem',
  props: {
    labelSpan: {
      type: Number,
      default: 8,
    },
    valueSpan: {
      type: Number,
      default: 16,
    },
    label: {
      type: String,
    },
  },
};
</script>

<style scoped>
.label-col{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
  height: 100%;
  color: darkcyan;
}
.value-col{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}
</style>