|
|
@@ -1,6 +1,6 @@
|
|
|
<template>
|
|
|
<div class="weather-container">
|
|
|
- <div class="background-effects">
|
|
|
+ <div class="background-effects" v-if="type">
|
|
|
<Lightning v-if="isThunderstorm" />
|
|
|
<Snow v-else-if="isSnow" />
|
|
|
<Rain v-else-if="isRain" />
|
|
|
@@ -14,13 +14,13 @@
|
|
|
</div>
|
|
|
<div class="weather-details">
|
|
|
<div v-if="warning" class="weather-warning">{{ warning }}</div>
|
|
|
- <div class="weather-type">{{ weatherKeyToChinese[type as WeatherType] }}</div>
|
|
|
- <div class="details">
|
|
|
+ <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 class="other-info">
|
|
|
+ <div v-if="humidity || windSpeed" class="other-info">
|
|
|
<div>湿度:{{ humidity }}%</div>
|
|
|
<div>风速:{{ windSpeed }}</div>
|
|
|
</div>
|
|
|
@@ -41,9 +41,9 @@
|
|
|
|
|
|
interface WeatherProps {
|
|
|
type?: string;
|
|
|
- temperature: number;
|
|
|
- humidity: number;
|
|
|
- windSpeed: string;
|
|
|
+ temperature?: number | undefined;
|
|
|
+ humidity?: number | undefined;
|
|
|
+ windSpeed?: string;
|
|
|
warning?: string;
|
|
|
}
|
|
|
const props = defineProps<WeatherProps>();
|