gas-injection/src/views/vent/home/configurable/components/preset/partition.vue

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="partition-block" :class="`partition-block_${type}`">
    <slot name="icon">
      <div class="partition-block__icon" :class="`partition-block__icon_${type}`" :style="{ backgroundImage: iconUrl ? `url(${icon})` : '' }"> </div>
    </slot>
    <slot name="label">
      <div class="partition-block__label" :class="`partition-block__label_${type}`">
        {{ label }}
      </div>
    </slot>
  </div>
</template>
<script lang="ts" setup>
  import { computed, defineEmits, defineProps, withDefaults } from 'vue';
  const props = withDefaults(
    defineProps<{
      // 分隔条类型，类型为：'A' | 'B'
      type?: string;
      // 分隔条内容
      label: string;
      // 分隔条图标
      icon: string;
    }>(),
    {
      type: 'A',
      label: '分隔条',
      icon: '',
    }
  );
  // 处理 icon 路径，兼容静态资源
  const iconUrl = computed(() => {
    if (!props.icon) return '';
    if (props.icon.startsWith('/')) {
      return props.icon;
    }
    return '/' + props.icon;
  });

  defineEmits(['click']);
</script>
<style lang="less" scoped>
  @import '/@/design/theme.less';
  @import '/@/design/theme.less';
  @{theme-green} {
    .partition-block {
      --image-partition-bg: url('/@/assets/images/themify/green/home-container/configurable/partition-bg-a.png');
    }
  }
  @{theme-deepblue} {
    .partition-block {
      --image-partition-bg: url('/@/assets/images/home-container/configurable/tashanhome/partition-bg-a.png');
    }
  }
  .partition-block {
    --image-partition-bg: url('/@/assets/images/home-container/configurable/tashanhome/partition-bg-a.png');
    display: flex;
    background: var(--image-partition-bg);
    background-size: 100% 100%;
    position: relative;
    .partition-block__icon {
      width: 14px;
      height: 14px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin: 3px 5px;
    }
  }
  .partition-block_A {
    height: 30px !important;
    width: calc(100% - 30px) !important;
    margin: 5px 0 10px 20px;
  }
</style>