35 lines
1.7 KiB
TypeScript
35 lines
1.7 KiB
TypeScript
import { useWeatherStore } from "@/store/weatherStore";
|
|
import { Cloud } from "lucide-react";
|
|
|
|
export function WeatherCard(){
|
|
const{ currentWeather} = useWeatherStore();
|
|
//样式待修改
|
|
return (
|
|
<div className ="relative overflow-hidden rounded-3xl bg-white/80 dark:bg-slate-800/80
|
|
backdrop-blur-xl border border-slate-200/80 dark:border-slate-700/80 shadow-2xl shadow-slate-200/50
|
|
dark:shadow-slate-900/50 transition-all duration-300">
|
|
<WeatherSearchForm />
|
|
{currentWeather ? (
|
|
<div className="p-6">
|
|
<WeatherDisplay />
|
|
<WeatherDetailsGrid />
|
|
</div>
|
|
) :(
|
|
<div className="flex flex-col items-center justify-center py-16 px-6 text-center">
|
|
<div className="relative mb-6">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-400 to-cyan-400 rounded-full opacity-10 blur-2xl"></div>
|
|
<div className="relative w-20 h-20 rounded-full bg-gradient-to-br from-blue-100 to-cyan-100 dark:from-blue-900/30 dark:to-cyan-900/30 flex items-center justify-center">
|
|
<Cloud className="w-10 h-10 text-blue-500 dark:text-blue-400" />
|
|
</div>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-slate-700 dark:text-slate-200 mb-2">
|
|
暂无天气数据
|
|
</h3>
|
|
<p className="text-sm text-slate-500 dark:text-slate-400">
|
|
请搜索城市查看实时天气信息
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
} |