<script setup lang="ts">
    const url = ref<string>('/static/images/weather-little-icon/day3.png')
</script>

<template>
    <view class="weather-container">
        <view class="weather-city">
            <FuiIcon name="location" color="#3FA5FF" class="location-icon" />
            <text class="location-text">天心区</text>
            <text class="right-line" />
        </view>
        <view class="weather-info">
            <image :url="url" />
            <text> 晴 39°</text>
        </view>
        <view class="weather-detail" />
    </view>
</template>

<style lang="less" scoped>
    .weather-container {
        display: flex;
        width: 100%;
        height: 70rpx;
        padding: 20rpx;
        align-items: center;
        justify-content: center;
        background-color: #fff;

        .weather-city {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: left;

            .location-icon {
                font-size: 42rpx !important;
                margin-right: 12rpx;
                vertical-align: middle;
            }

            .location-text {
                vertical-align: middle;
            }

            .right-line {
                display: block;
                width: 2px;
                height: 42rpx;
                background-color: #eeeeee;
                margin-left: 30rpx;
                border-radius: 50%;
            }
        }

        .weather-info {
            flex: 1.2;
            display: flex;

            image {
                width: 50rpx;
            }

            text {
                font-size: 40rpx;
            }
        }

        .weather-detail {
            flex: 1.6;
        }
    }
</style>
