# 天气预报vue3

**Repository Path**: zhaoStore/weather-forecast

## Basic Information

- **Project Name**: 天气预报vue3
- **Description**: 基于vue3+和风天气API+echarts的天气预报网站实现，响应式兼容pc和移动端，根据当天日落时间自动切换明暗主题
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-07-02
- **Last Updated**: 2025-07-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目说明

基于 vue3 + 和风天气 API + echarts 的天气预报网站实现，响应式兼容pc和移动端。
早期写着玩的项目，所以可能比较💩

## 预览地址
想了一下还是不放了，和风天气 API 之前是每天提供几千次免费调用，现在改成按量计费了，怕被恶意刷爆

## UI参考: 必应天气

必应天气： https://www.msn.cn/zh-cn/weather/forecast

其他参考：

- 天气网 https://m.weather.com.cn/mweather/101090301.shtml 
- 百度天气 移动端 https://www.baidu.com/ssid=/from=/s?word=%E7%99%BE%E5%BA%A6%E5%A4%A9%E6%B0%94&ms=1
- 百度天气 PC [weathernew.pae.baidu.com/weathernew/pc?query=河北天气&srcid=4982&forecast=long_day_forecast](https://weathernew.pae.baidu.com/weathernew/pc?query=河北天气&srcid=4982&forecast=long_day_forecast)
- 

## API 来源

- 和风天气 https://console.qweather.com/#/console
- 腾讯位置 https://lbs.qq.com/dev/console/quota/mine



## 自动主题

可以根据日落时间自动切换明暗主题，本来计划根据天气改变主题，没来得及做鸽掉了，有兴趣可以试一下。

只需要在 `src\styles\common\weather.scss`文件中配置对应天气的css，然后判断在对应天气，在`html`标签加对应类名就行。（如果我没记错的话）

### 鸽掉的配色

(从必应天气截的，以下图片请在本地Markdown查看器查看)

#### 雾霾\雾 夜晚

linear-gradient(180deg, #4D6479 1%, #283B4E 7%, #172635 13%)

![image-20250702212458465](.\README.assets\image-20250702212458465.png)

#### **晴朗 白天**

linear-gradient(180deg, #FFEFDF 1.83%, #DCEAFF 5.31%)

![image-20250702212548936](.\README.assets\image-20250702212548936.png)

#### 晴朗 夜晚

![image-20250702212633900](.\README.assets\image-20250702212633900.png)

#### 阵雨 白天

linear-gradient(180deg, #C4DCFF 1.82%, rgba(167, 213, 255, 0.40) 5.89%)

![image-20250702212702477](.\README.assets\image-20250702212702477.png)

#### 小雨\大雨 夜晚

![image-20250702212737934](.\README.assets\image-20250702212737934.png)

#### 小阵雪 夜晚

linear-gradient(180deg, #215C8B 1%, #0A2E4B 7%, #002039 13%)

![image-20250702212808130](.\README.assets\image-20250702212808130.png)

#### 多云 夜晚

linear-gradient(180deg, #204C84 1%, #162544 8%, #14203D 11%)

![image-20250702212925940](.\README.assets\image-20250702212925940.png)