<script setup lang="ts">
    const city = ref<string>('长沙市')

    const county = ref<string>('天心区')

    const path = ref<string>('/static/header.png')

    onMounted(() => {})
</script>

<template>
    <view
        class="text-c0 bg-cover h-362 pos-relative p-4 pt-13 pb-0 color-white"
        :style="`background-image: url(${path})`"
    >
        <fui-row>
            <!-- 定位 -->
            <fui-col :span="12">
                <view class="flex">
                    <FuiIcon custom-prefix="font_family" name="icon-location" color="#fff" size="42" />
                    <text class="ml-2 text-30">{{ city }} &nbsp;{{ county }}</text>
                </view>
            </fui-col>
            <!-- 应急响应 -->
            <fui-col :span="12">
                <view class="flex flex-justify-end b-rd-0.7 text-24 lh-7 h-56">
                    <view class="pl-3 pr-4 inline-block pr-2 bg-[#f6f7fb] b-rd-l-0.7 bg-[#FF9A03]">暴雨</view>
                    <view
                        class="pos-relative pr-1.3 pl-2 inline-block bg-[#fff] text-c2 font-650 b-rd-r-0.7 triangle color-[#333333]"
                    >
                        || 响应
                    </view>
                </view>
            </fui-col>
        </fui-row>
        <!-- 天气温度监测及天气类型 -->
        <fui-row class="pt-6 pb-5 pl-0.5">
            <!-- 天气监测 -->
            <fui-col :span="9" class="h-128">
                <view>
                    <text class="text-112">26°</text>
                    <text class="text-32">多云</text>
                </view>
            </fui-col>
            <!-- 天气类型  -->
            <fui-col :span="15">
                <fui-row class="h-128" :isFlex="true" justify="end" align="middle">
                    <fui-col :span="8" v-for="item in 2" :key="item">
                        <view class="h-40 text-27 mr-1 p-1 pr-2 mb-1 bg-amber b-rd-10 flex-center">
                            <FuiIcon custom-prefix="font_family" name="icon-gw" color="#fff" size="36" />
                            <text class="ml-1">高温</text>
                        </view>
                    </fui-col>
                </fui-row>
            </fui-col>
        </fui-row>
        <!-- 空气质量及预报 -->
        <fui-row>
            <fui-col :span="12">
                <view>
                    <text class="mr-4 text-32">18° ~ 29°</text>
                    <FuiIcon class="mt-1" custom-prefix="font_family" name="icon-bianzu" color="#fff" size="36" />
                    <text>20 优</text>
                </view>
            </fui-col>
            <fui-col :span="12">
                <view class="flex-1 flex flex-justify-end">
                    <text class="bg-[rgba(0,7,17,0.3)] text-28 pt-1 pb-1 pl-3 pr-1 b-rd-4">
                        城市预报
                        <fui-icon name="arrowright" :size="28" color="#fff" />
                    </text>
                </view>
            </fui-col>
        </fui-row>
    </view>
</template>

<style lang="less" scoped>
    .triangle {
        &::after {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            border-style: solid;
            border-color: #fff transparent;
            border-width: 0 0 56rpx 20rpx;
            top: 0;
            left: -20rpx;
            z-index: 99;
        }
    }
</style>
