kyj-yanglao-web-new/src/views/living-home/device-management/home-device/components/StatusBar.vue

<template>
  <div class="status-bar">
    <div class="status-info">
      <span>
        系统状态:
        <span :class="hasAlerts ? 'status-warning' : 'status-online'">{{
          systemStatus || '未知状态'
        }}</span>
      </span>
      <span>最后数据同步: {{ lastTime || '-' }}</span>
    </div>
    <div class="alert-indicator" :class="{ active: hasAlerts }">
      {{ hasAlerts ? '有警告设备需要关注' : '所有设备运行正常' }}
    </div>
  </div>
</template>

<script lang="ts" setup>
interface Props {
  systemStatus: string
  lastTime: string
  hasAlerts: boolean
}

defineProps<Props>()
</script>

<style lang="scss" scoped>
$success-color: #26de81;
$warning-color: #fd9644;

@keyframes pulse {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }

  100% {
    opacity: 1;
  }
}

.status-bar {
  display: flex;
  padding: 12px 25px;
  font-size: 14px;
  background: rgb(26 31 46 / 90%);
  border: 1px solid rgb(255 255 255 / 15%);
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
}

.status-info {
  display: flex;
  gap: 20px;

  .status-online {
    font-weight: 600;
    color: $success-color;
  }

  .status-warning {
    font-weight: 600;
    color: $warning-color;
  }
}

.alert-indicator {
  padding: 5px 15px;
  background: rgb(166 177 194 / 20%);
  border-radius: 20px;

  &.active {
    color: $warning-color;
    background: rgb(253 150 68 / 30%);
    animation: pulse 2s infinite;
  }
}
</style>