<template>
  <section class="fdItem">
    <label v-text="label"/>
    <div class="content fill">
      <slot v-if="$slots.default"/>
      <div v-else-if="value" v-html="value"/>
    </div>
  </section>
</template>
<script>
export default {
  name: "fdItem",
  props: {
    label: String,
    value: {default: null}
  },
}
</script>
<style scoped lang="scss">
.fdItem {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 14px;
  margin-bottom: 8px;

  &:last-of-type {
    margin-bottom: 0;
  }

  & > label {
    flex-shrink: 0;
    color: #FFFFFF;
    text-align: right;

    &:after {
      content: "：";
    }
  }

  .content {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    margin-left: 8px;
    color: #FFD324;
  }
}
</style>
