You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1010 B
56 lines
1010 B
<template>
|
|
<div class="weather-container" v-if="weather">
|
|
今日天气
|
|
<i :class="[`qi-${weather.icon}`, 'icon']"></i>
|
|
<span class="text">{{ weather.text }}</span>
|
|
<span class="temp">{{ weather.temp }}℃</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
|
|
const weather = ref(null);
|
|
async function getData() {
|
|
try {
|
|
const { data: rawData } = await useFetch('/api/weather');
|
|
const { code, now } = rawData.value.data;
|
|
if (+code !== 200) {
|
|
throw new Error(code);
|
|
} else {
|
|
weather.value = now;
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
getData();
|
|
</script>
|
|
|
|
<style scoped>
|
|
.weather-container {
|
|
position: absolute;
|
|
right: 20rem;
|
|
top: 10rem;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.temp {
|
|
font-size: 25rem;
|
|
color: #fff;
|
|
font-family: impact;
|
|
margin-left: 14rem;
|
|
}
|
|
.text {
|
|
margin-left: 14rem;
|
|
}
|
|
.icon {
|
|
margin-left: 10rem;
|
|
color: #fff100;
|
|
font-size: 26rem;
|
|
font-weight: bolder;
|
|
}
|
|
</style>
|
|
|