<script setup lang="ts">
    const url = ref<string>('/static/images/navBg/nav-bx.jpg')
    const warn = ref<string>('长沙天气（暴雨Ⅲ级相应）')
</script>

<template>
    <view class="header-container">
        <image :src="url" />
        <text class="header-text">{{ warn }}</text>
        <FuiIcon name="setup" class="setup" />
    </view>
</template>

<style lang="less" scoped>
    .header-container {
        width: 100%;
        height: 162rpx;
        position: relative;

        image {
            width: 100%;
            height: 100%;
            display: block;
        }

        .header-text {
            position: absolute;
            left: 50%;
            bottom: 15%;
            color: #fff;
            font-size: 30rpx;
            transform: translateX(-50%);
        }

        .setup {
            position: absolute;
            right: 20rpx;
            bottom: 16rpx;
            font-size: 55rpx !important;
        }
    }
</style>
