29 lines
1.0 KiB
TypeScript
29 lines
1.0 KiB
TypeScript
import { defineComponent } from 'vue'
|
|
import useWeatherStore from './useWeatherStore'
|
|
|
|
export default defineComponent(() => {
|
|
const weather = useWeatherStore()
|
|
return () => (
|
|
<div
|
|
class="w-full h-full items-center pl-3 gap-x-2 flex py-3 text-white"
|
|
style={{
|
|
background: 'linear-gradient(135deg,#5996ff 0%,#4862ff 100%)'
|
|
}}
|
|
>
|
|
<span class="text-[18px] font-bold">{weather.weatherData?.base.stemp}°</span>
|
|
<div class={'h-full w-[1px] bg-white/[.2]'}></div>
|
|
<div class="flex flex-col gap-y-[1px]">
|
|
<div class="flex items-center gap-x-1">
|
|
<span class="font-bold text-[14px] leading-[14px]">{weather.weatherData?.city.name}</span>
|
|
</div>
|
|
<span class={'tracking-tight flex gap-x-1 items-center'}>
|
|
<span class="text-[12px]">{weather.weatherData?.base.weather}</span>
|
|
<span class="text-[12px]">
|
|
{weather.weatherData?.base.ltemp}°/{weather.weatherData?.base.htemp}°
|
|
</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
})
|