65 lines
1.8 KiB
Vue
65 lines
1.8 KiB
Vue
<script setup>
|
|
const data = {
|
|
location: '中国 四川省',
|
|
city: '成都市',
|
|
temperature: 22,
|
|
icon: '101',
|
|
text: '多云',
|
|
hourly: [
|
|
{
|
|
icon: '100',
|
|
temperature: 22,
|
|
time: '1时'
|
|
}, {
|
|
icon: '102',
|
|
temperature: 30,
|
|
time: '2时'
|
|
}, {
|
|
icon: '101',
|
|
temperature: 21,
|
|
time: '3时'
|
|
}, {
|
|
icon: '103',
|
|
temperature: 25,
|
|
time: '4时'
|
|
}, {
|
|
icon: '104',
|
|
temperature: 24,
|
|
time: '5时'
|
|
}
|
|
]
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div style="display: flex;justify-content: space-between;margin: 10px 20px">
|
|
<div style="font-size: 45px">
|
|
<i :class="`qi-${data.icon}-fill`"></i>
|
|
</div>
|
|
<div style="font-weight: bold;text-align: center">
|
|
<div style="font-size: 25px">{{data.temperature}}℃</div>
|
|
<div style="font-size: 15px">{{data.text}}</div>
|
|
</div>
|
|
<div style="margin-top: 13px">
|
|
<div style="font-size: 15px">{{data.city}}</div>
|
|
<div style="font-size: 14px;color: grey">{{data.location}}</div>
|
|
</div>
|
|
</div>
|
|
<el-divider style="margin: 10px 0"/>
|
|
<div style="display: grid;grid-template-columns: repeat(5, 1fr);text-align: center">
|
|
<div v-for="item in data.hourly">
|
|
<div style="font-size: 13px">{{item.time}}</div>
|
|
<div style="font-size: 23px">
|
|
<i :class="`qi-${item.icon}-fill`"></i>
|
|
</div>
|
|
<div style="font-size: 12px">{{item.temperature}}℃</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style>
|