sl-sfy-safety/src/views/disaster/overview/components/weather-info/WeatherInfo.vue

<template>
  <div class="weather-container">
    <div class="background-effects" v-if="type">
      <Lightning v-if="isThunderstorm" />
      <Snow v-else-if="isSnow" />
      <Rain v-else-if="isRain" />
      <Sunshine v-else-if="isSunny" />
      <Wind v-else-if="isWindy" />
      <Clouds v-else />
    </div>

    <div class="weather-icon-container">
      <img :src="weatherIcon" alt="" class="weather-icon" />
    </div>
    <div class="weather-details">
      <div v-if="warning" class="weather-warning">{{ warning }}</div>
      <div v-if="type" class="weather-type">{{ weatherKeyToChinese[type as WeatherType] }}</div>
      <div v-if="temperature" class="details">
        <div class="temperature">
          {{ temperature }}
          <span class="tem-unit">°C</span>
        </div>
        <div v-if="humidity || windSpeed" class="other-info">
          <div>湿度：{{ humidity }}%</div>
          <div>风速：{{ windSpeed }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { computed } from 'vue';
  import { WeatherType, weatherIcons, weatherKeyToChinese } from './weatherIcons';
  import Lightning from '@/components/weather-effects/Lightning.vue';
  import Snow from '@/components/weather-effects/Snow.vue';
  import Rain from '@/components/weather-effects/Rain.vue';
  import Sunshine from '@/components/weather-effects/Sunshine.vue';
  import Wind from '@/components/weather-effects/Wind.vue';
  import Clouds from '@/components/weather-effects/Clouds.vue';

  interface WeatherProps {
    type?: string;
    temperature?: number | undefined;
    humidity?: number | undefined;
    windSpeed?: string;
    warning?: string;
  }
  const props = defineProps<WeatherProps>();

  const weatherIcon = computed(() => {
    return weatherIcons[props.type as WeatherType] || weatherIcons.defaultIcon;
  });

  const isThunderstorm = computed(() => weatherKeyToChinese[props.type as WeatherType].includes('雷'));
  const isSnow = computed(() => weatherKeyToChinese[props.type as WeatherType].includes('雪'));
  const isRain = computed(() => weatherKeyToChinese[props.type as WeatherType].includes('雨'));
  const isSunny = computed(() => weatherKeyToChinese[props.type as WeatherType].includes('晴'));
  const isWindy = computed(() => weatherKeyToChinese[props.type as WeatherType].includes('风'));
</script>

<style scoped lang="scss">
  .weather-container {
    width: 500px;
    display: flex;
    align-items: center;
    margin: 20px 0 0 0;
    position: relative;
    overflow: hidden;
    transition: background-color 0.5s ease;
  }

  .background-effects {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
  }

  .weather-icon-container {
    width: 200px;
    height: 200px;
    margin-right: 20px;
  }

  .weather-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: float 3s ease-in-out infinite;
  }

  .weather-details {
    .weather-warning {
      font-size: 40px;
      font-family: YouSheBiaoTiYuan;
      color: #f56c6c;
      margin-bottom: 15px;
    }

    .weather-type {
      font-size: 20px;
      color: #111;
    }

    .details {
      display: flex;
      align-items: center;

      .temperature {
        font-size: 63px;
        font-family: DINAlternate;
        color: #1d2541;
        margin-right: 20px;
        display: flex;
        align-items: baseline;

        .tem-unit {
          font-size: 30px;
          margin-left: 5px;
        }
      }

      .other-info {
        font-size: 16px;
        color: #333333;
      }
    }
  }

  @keyframes float {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
</style>