mky-vent-base/src/views/vent/gas/components/form/formTitle.vue

<template>
  <div class="form-title">
    <span class="form-title__icon">
      <slot name="icon">
        <SvgIcon class="icon" size="18" :name="icon" />
      </slot>
    </span>
    <span class="form-title__text ml-5px">
      <slot name="title">
        {{ title }}
      </slot>
    </span>
  </div>
</template>

<script setup lang="ts">
  // @TODO 对组件的颜色、背景等样式进行修改，符合全局规范
  import { SvgIcon } from '/@/components/Icon';

  withDefaults(
    defineProps<{
      /** 标题，可用 slot */
      title?: string | number;
      /** 标题前缀图标，用法参考 SvgIcon，可用 slot */
      icon?: string;
    }>(),
    {
      title: '',
      icon: '',
    }
  );
</script>

<style lang="less" scoped>
  .form-title {
    background-image: url('@/assets/images/vent/home/form-title.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%;
    height: 40px;
    line-height: 40px;
    margin-bottom: 20px;
  }

  .form-title__text {
    font-size: 18px;
  }
</style>