home.vue
3.17 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<template>
<div>
<index-Ch v-if="language ==0"/>
<index-En v-else/>
<div v-if="showgg" class="fixed_gg">
<!--天气-->
<el-icon class="cclose" @click.stop="showgg=false"><circle-close /></el-icon>
<div class="bg-lineg pd20">
<div class="smallToday" @click="popWeather">
<div>
<div class="type">
<weather-icon :type="weatherObj.forecast[0]?.type" :width="50"/>
</div>
</div>
<div>
<h3 v-if="language == 0">无锡</h3>
<h3 v-else>WUXI</h3>
<div class="wd_p">{{weatherObj.forecast[0]?.low.slice(2)}}~{{weatherObj.forecast[0]?.high.slice(2)}}</div>
</div>
</div>
</div>
<el-dialog v-model="weatherdialog" width="540" :close-on-click-modal="true"
style="--el-dialog-padding-primary:0;--el-dialog-border-radius:15px;
--el-dialog-bg-color:transparent;overflow: hidden;">
<div class="bg-lineg pd20">
<div class="weatherbox">
<div class="today">
<div class="mr50">
<h1 v-if="language == 0">无锡</h1>
<h1 v-else>WUXI</h1>
</div>
<div>
<div class="wd">{{weatherObj.wendu}}°c</div>
<div class="wd_p">{{weatherObj.forecast[0]?.low.slice(2)}}~{{weatherObj.forecast[0]?.high.slice(2)}}</div>
<div class="week">{{weatherObj.forecast[0]?.week}}</div>
</div>
<div>
<div class="type">
<weather-icon :type="weatherObj.forecast[0].type" :width="64"/>
</div>
</div>
</div>
<ul class="wlist">
<li v-for="n in weatherObj.forecast.slice(1,6)">
<div class="type">
<weather-icon :type="n.type" :width="32"/>
</div>
<div class="wd">{{n.low.slice(2,-1)}}/{{n.high.slice(2)}}</div>
<div class="week" v-if="language==1">
{{n.week=='星期一'?'Mon':n.week=='星期二'?'Tue':n.week=='星期三'?'Wed':n.week=='星期四'?'Thu':n.week=='星期五'?'Fri':n.week=='星期六'?'Sat':n.week=='星期日'?'Sun':''}}
</div>
<div class="week" v-else>
{{n.week}}
</div>
<div class="date mt10">{{n.ymd.slice(5,10)}}</div>
</li>
</ul>
</div>
</div>
</el-dialog>
</div>
</div>
</template>
<script setup>
import IndexCh from '/src/viewsPc/index'
import IndexEn from '/src/viewsPc/index_en'
import WeatherIcon from '@/viewsPc/components/weatherIcon'
import {useStorage} from "@vueuse/core/index";
import {ref} from "vue";
import {getWeather} from "@/apiPc/webSite";
const showgg = ref(true)
const language = useStorage('language', 0)
const weatherObj = ref({
forecast:[]
})
const weatherdialog = ref(false)
init()
function init(){
getWeather().then(res=>{
weatherObj.value = JSON.parse(res.data).data
console.log(weatherObj.value)
})
}
const popWeather = () => {
weatherdialog.value = true
}
</script>
<style scoped lang="scss">
</style>