<template>
  <!-- 标题 -->
  <div
    class="label"
    :style="{ width: labelWidth + 'px', flex: `0 0 ${labelWidth}px` }"
  >
    {{ label }}
    <!-- 提示 -->
    <Popover v-if="popText" type="base" placement="top-left">
      <template #content>
        <article>
          {{ popText }}
        </article>
      </template>
      <Icon class="icon" :name="'tagError'" />
    </Popover>
    :
  </div>
</template>

<script>
export default {
  props: {
    labelWidth: {
      type: Number,
      default: 140,
    },
    popText: {
      type: String,
      default: "",
    },
    label: "",
  },
};
</script>
<style lang="less" scoped>
.label {
  font-size: 14px;
  text-align: right;
  color: #646c73;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .icon {
    width: 11.5px;
    height: 11.5px;
    /deep/ .v-svg-tagError {
      width: 11.5px !important;
      height: 11.5px !important;
    }
  }
}
</style>
