|
@@ -1,74 +1,78 @@
|
|
|
<template>
|
|
|
- <div class="box">
|
|
|
- <p class="boxCity">{{weatcherData.city}}市</p>
|
|
|
- <p class="boxWeather">{{weatcherData.wea}}<br>
|
|
|
- <div class="boxTemperature">
|
|
|
- {{weatcherData.tem}}°
|
|
|
- </div>
|
|
|
- </p>
|
|
|
-
|
|
|
-
|
|
|
- <!-- <p class="boxWind">{{weatcherData.win}}{{weatcherData.win_speed}}</p> -->
|
|
|
-
|
|
|
- </div>
|
|
|
+ <div class="box">
|
|
|
+ <p class="boxCity">{{weatcherData.city}}市</p>
|
|
|
+ <p class="boxWeather">{{weatcherData.wea}}<br>
|
|
|
+ <label class="boxTemperature">
|
|
|
+ {{weatcherData.tem}}°
|
|
|
+ </label>
|
|
|
+ </p>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- <p class="boxWind">{{weatcherData.win}}{{weatcherData.win_speed}}</p> -->
|
|
|
+
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import axios from 'axios'
|
|
|
-export default {
|
|
|
- data(){
|
|
|
- return{
|
|
|
- weatcherData:{}
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.getWeather();
|
|
|
- this.timer = setInterval(() => {
|
|
|
- this.getWeather();
|
|
|
- }, 1000 * 60 * 60) //每小时调用一次
|
|
|
- },
|
|
|
- methods: {
|
|
|
- getWeather() { // 第三方天气api接口
|
|
|
- axios.get('https://yiketianqi.com/free/day', {
|
|
|
- params: {
|
|
|
- unescape: "1",
|
|
|
- appid: '66192398',
|
|
|
- appsecret: 'cqIyJ5ZP',
|
|
|
- // version: 'v91'
|
|
|
- }
|
|
|
- }).then(res => {
|
|
|
- console.log(res.data);
|
|
|
- if (res.data) {
|
|
|
- this.weatcherData = res.data;
|
|
|
- }
|
|
|
- }).catch(err => {
|
|
|
- console.log(err)
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ import axios from 'axios'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ weatcherData: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getWeather();
|
|
|
+ this.timer = setInterval(() => {
|
|
|
+ this.getWeather();
|
|
|
+ }, 1000 * 60 * 60) //每小时调用一次
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getWeather() { // 第三方天气api接口
|
|
|
+ axios.get('https://yiketianqi.com/free/day', {
|
|
|
+ params: {
|
|
|
+ unescape: "1",
|
|
|
+ appid: '66192398',
|
|
|
+ appsecret: 'cqIyJ5ZP',
|
|
|
+ // version: 'v91'
|
|
|
+ }
|
|
|
+ }).then(res => {
|
|
|
+ console.log('555', res.data);
|
|
|
+ if (res.data) {
|
|
|
+ this.weatcherData = res.data;
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ console.log(err)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-.box{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- color: #fff;
|
|
|
- margin-right: 20rem;
|
|
|
-}
|
|
|
-.boxTemperature{
|
|
|
- font-size: 18rem;
|
|
|
-}
|
|
|
-.boxWeather{
|
|
|
- font-size: 14rem;
|
|
|
- margin: 0 0 0 15rem;
|
|
|
-}
|
|
|
-.boxWind{
|
|
|
- margin: 0 15rem 0 8rem;
|
|
|
- font-size: 14rem;
|
|
|
-
|
|
|
-}
|
|
|
-.boxCity{
|
|
|
- font-size: 16rem;
|
|
|
-}
|
|
|
+ .box {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #fff;
|
|
|
+ margin-right: 20rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .boxTemperature {
|
|
|
+ font-size: 18rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .boxWeather {
|
|
|
+ font-size: 14rem;
|
|
|
+ margin: 0 0 0 15rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .boxWind {
|
|
|
+ margin: 0 15rem 0 8rem;
|
|
|
+ font-size: 14rem;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .boxCity {
|
|
|
+ font-size: 16rem;
|
|
|
+ }
|
|
|
</style>
|