<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>
