css 里面写if else 条件判断

@import './variables.scss';

// 弹性布局
@mixin flex($direction: row, $justify: flex-start, $align: stretch, $wrap: nowrap) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
  flex-wrap: $wrap;
}

// 居中对齐
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 两端对齐
@mixin flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

// 文本截断
@mixin text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 多行文本截断
@mixin text-truncate-multiline($lines: 2) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
}

// 响应式布局
@mixin responsive($breakpoint) {
  @if $breakpoint == sm {
    @media (min-width: $breakpoint-sm) { @content; }
  } @else if $breakpoint == md {
    @media (min-width: $breakpoint-md) { @content; }
  } @else if $breakpoint == lg {
    @media (min-width: $breakpoint-lg) { @content; }
  } @else if $breakpoint == xl {
    @media (min-width: $breakpoint-xl) { @content; }
  }
}

// 状态颜色
@mixin status-color($status) {
  @if $status == 'normal' or $status == '正常' {
    background-color: $color-success;
    color: $color-white;
  } @else if $status == 'warning' or $status == '警告' {
    background-color: $color-warning;
    color: $color-dark;
  } @else if $status == 'error' or $status == '异常' {
    background-color: $color-danger;
    color: $color-white;
  } @else {
    background-color: $color-secondary;
    color: $color-white;
  }
} 

引用的vue文件：

<template>
  <div class="switch-node">
    <!-- 交换机图标和名称 -->
    <div class="d-flex align-items-center mb-2">
      <div class="switch-node__icon">
        <svg class="switch-node__icon-svg" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
        </svg>
      </div>
      <div class="switch-node__content">
        <p class="switch-node__title" :title="nodeData.label">
          {{ nodeData.label }}
        </p>
        <p class="switch-node__subtitle">
          {{ nodeData.district }}
        </p>
      </div>
    </div>
    
    <!-- 状态指示器 -->
    <div class="switch-node__footer">
      <span>状态:</span>
      <span class="switch-node__status" :class="statusClass">
        <span class="switch-node__status-indicator"></span>
        {{ nodeData.status }}
      </span>
    </div>
    
    <!-- 设备计数指示器 -->
    <div class="switch-node__devices">
      设备: {{ nodeData.devices ? nodeData.devices.length : 0 }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'SwitchNode',
  props: {
    nodeData: {
      type: Object,
      required: true
    }
  },
  computed: {
    statusClass() {
      switch(this.nodeData.status) {
        case '正常': return 'status-normal';
        case '警告': return 'status-warning';
        case '异常': return 'status-error';
        default: return '';
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.scss';
@import '@/assets/styles/mixins.scss';

.status-normal {
  @include status-color('正常');
}

.status-warning {
  @include status-color('警告');
}

.status-error {
  @include status-color('异常');
}
</style>