<script setup lang="ts">
    import { reactive } from 'vue'
    import { onPullDownRefresh } from '@dcloudio/uni-app'
    import dayjs from 'dayjs'
    import { closeSplashscreenAndChechUpgrade } from '@/utils/upgrade'
    import * as WeatherAPI from '@/api/model/weather'
    import * as HomeAPI from '@/api/model/home'

    const model = reactive({
        // 湖南省人民政府
        location: '112.982931,28.116698',
    })

    onLoad(() => {
        // 关闭启动页并检查更新
        closeSplashscreenAndChechUpgrade()
    })

    onShow(() => {
        uni.getLocation({
            type: 'wgs84',
            success(res) {
                console.log(`经度：${res.longitude}`)
                console.log(`纬度：${res.latitude}`)

                if (res.longitude === 0 || res.latitude === 0) {
                    return
                }

                pageData.weather.lon = res.longitude
                pageData.weather.lat = res.latitude
                uni.setStorageSync('location', {
                    // 缓存地址
                    lon: res.longitude,
                    lat: res.latitude,
                })
                model.location = `${res.longitude},${res.latitude}`
                reloadWeather()
            },
            fail(res) {
                console.log('获取位置失败:', res)
                reloadWeather()
                uni.showToast({
                    title: '获取地址失败，将导致部分功能不可用',
                    icon: 'none',
                })
            },
        })

        // 查询金刚区数据
        getServiceItems()
        getMenuItems()
        // 查询天气信息
        getWarningInfo()
        // 查询热门产地行情
        getProductMarketList()
        // 服务展示窗
        getServiceStatsList()
        // 农技课堂
        getAgricultureClassList()
    })

    // 下拉刷新
    onPullDownRefresh(() => {
        setTimeout(function () {
            uni.stopPullDownRefresh()
            Message.toast('刷新成功')
        }, 1000)
    })

    function getWeatherRecommend(weather: string) {
        switch (weather) {
            case '晴':
                return '宜喷药'
            case '阴':
                return '宜少浇水'
            case '小雨':
                return '宜播种'
            case '中雨':
                return '注意防涝'
            default:
                return '无建议'
        }
    }

    // 刷新天气信息
    function reloadWeather() {
        WeatherAPI.now(model.location).then((res) => {
            console.log('WeatherAPI.now', res)

            pageData.weather.temperature = `${res.data.now.temp}°C`
            pageData.weather.condition = `${res.data.now.text} | ${getWeatherRecommend(res.data.now.text)}`
            pageData.weather.icon = `${res.data.now.icon}`
        })
        WeatherAPI.forecast(model.location).then((res) => {
            console.log('WeatherAPI.forecast', res)

            const weekDays = ['日', '一', '二', '三', '四', '五', '六']
            pageData.weather.forecast = res.data.daily.slice(1, 4).map((item: any, index: number) => {
                return {
                    day: index === 0 ? '明天' : `周${weekDays[dayjs(item.fxDate).day()]}`,
                    temp: `${item.tempMin}~${item.tempMax}°`,
                    icon: item.iconDay || item.iconNight,
                }
            })
        })
    }

    // 页面数据
    const pageData = reactive({
        // 顶部标题和搜索
        header: {
            title: $app.name,
            searchPlaceholder: '请输入搜索内容',
        },

        // 天气信息
        weather: {
            icon: '100',
            location: '长沙',
            date: `${dayjs().format('MM-DD')} ${dayjs().toLunarDay().getName()}`,
            temperature: '-°C',
            condition: '晴｜适宜喷药',
            forecast: [
                { day: '明天', temp: '24-28°', icon: '100' },
                { day: '周三', temp: '25-29°', icon: '101' },
                { day: '周四', temp: '26-31°', icon: '102' },
            ],
            warning: '',
            lon: null,
            lat: null,
        },

        // 功能菜单
        menuItems: [],

        // 其他服务
        serviceItems: [],

        // 新闻资讯
        newsItems: [
            { id: 1, type: '最新', title: '积极防范持续高温对农作物的影响', date: '2025-08-29' },
            { id: 2, type: '预警', title: '', date: '2025-08-29' },
        ],

        // 农产品行情
        productMarket: {
            title: '热门产地行情',
            // updateTime: '08-30日更新',
            products: [
                // { id: 1, name: '晚稻13号', price: '¥4120', change: '+1.2%', isUp: true },
                // { id: 2, name: '晚稻9号', price: '¥3211', change: '+1.2%', isUp: true },
                // { id: 3, name: '晚稻11号', price: '¥2120', change: '-1.2%', isUp: false },
            ],
        },

        // 服务展示窗
        serviceStats: [
            // {
            //     id: 1,
            //     name: '农场入驻',
            //     value: '2,360',
            //     unit: '个',
            //     icon: '/static/images/codefun/15911306636a361a8dc16ce0283f3830.png',
            // },
            // {
            //     id: 2,
            //     name: '空闲农机',
            //     value: '126',
            //     unit: '台',
            //     icon: '/static/images/codefun/1d0cd168eeffbaf37a90aa949c6ad806.png',
            // },
            // {
            //     id: 3,
            //     name: '产销对接',
            //     value: '156',
            //     unit: '笔',
            //     icon: '/static/images/codefun/24dd00386672f240ef00394b746c2ff0.png',
            // },
            // {
            //     id: 4,
            //     name: '服务农户',
            //     value: '12,580',
            //     unit: '人',
            //     icon: '/static/images/codefun/3fd6a50eaf22431687a6151df0581156.png',
            // },
            // {
            //     id: 5,
            //     name: '覆盖面积',
            //     value: '268',
            //     unit: 'km',
            //     icon: '/static/images/codefun/87773a17a1b64dc686bf935708262002.png',
            // },
            // {
            //     id: 6,
            //     name: '覆盖区县',
            //     value: '21',
            //     unit: '个',
            //     icon: '/static/images/codefun/329a4404092545f2924ad095c531cc66.png',
            // },
        ],

        // 农技课堂
        agricultureClass: {
            title: '',
            // expert: '张教授',
            time: '',
            videoList: [],
        },
        current: 0,
    })

    function getServiceItems() {
        HomeAPI.zoneList({
            pageNo: 1,
            pageSize: 4,
            status: 1,
            type: 1,
        }).then((res) => {
            const { records } = res
            pageData.serviceItems = []
            pageData.serviceItems = records
        })
    }
    function getMenuItems() {
        HomeAPI.zoneList({
            pageNo: 1,
            pageSize: 4,
            status: 1,
            type: 2,
        }).then((res) => {
            const { records } = res
            pageData.menuItems = []
            pageData.menuItems = records
        })
    }
    function getWarningInfo() {
        if (!pageData.weather.lon || !pageData.weather.lat) {
            return
        }

        HomeAPI.warningInfo({
            lon: pageData.weather.lon,
            lat: pageData.weather.lat,
        }).then((res) => {
            pageData.weather.warning = res[0].criteria
        })
    }
    function getProductMarketList() {
        HomeAPI.productMarketList({
            status: 1,
        }).then((res) => {
            const { records } = res
            console.log(res)
            pageData.productMarket.products = records
            pageData.productMarket.products.forEach((item: any) => {
                switch (item.tendency) {
                    case 1:
                        item.isUp = true
                        break
                    case 2:
                        item.isUp = false
                        break
                }
            })
        })
    }
    function getServiceStatsList() {
        HomeAPI.serviceStatsList({
            status: 1,
        }).then((res) => {
            const { records } = res
            pageData.serviceStats = records
        })
    }
    function getAgricultureClassList() {
        HomeAPI.agricultureClassList({
            status: 1,
        }).then((res) => {
            const { records } = res
            pageData.agricultureClass.videoList = records
            pageData.agricultureClass.title = records[0]?.title
        })
    }

    // 菜单点击事件
    function onMenuItemClick(item: any) {
        console.log('点击菜单项:', item)
        // 在这里添加具体的菜单点击逻辑
    }

    // 农产品关注点击事件
    function onProductFollowClick(product: any) {
        console.log('点击关注农产品:', product)
        // 在这里添加具体的关注逻辑
    }

    // 查看更多农技课堂
    function onViewMoreClass() {
        console.log('查看全部农技课堂')
        // 在这里添加具体的查看逻辑
    }

    // 轮播视频切换的时候触发
    function handleChangeVideo(e: any) {
        // console.log('切换视频', e.detail.current)
        pageData.current = e.detail.current
        pageData.agricultureClass.title = pageData.agricultureClass.videoList[pageData.current]?.title
    }

    // 获取视频时长
    function handleMetadataLoaded(e: any) {
        pageData.agricultureClass.time = e.target.duration
    }
    // 解决轮播视频切换时，上一个视频不停止播放的问题
    function handleVideoPlay(currentIndex) {
        pageData.agricultureClass.videoList.forEach((_, index) => {
            if (index !== currentIndex) {
                const videoContext = uni.createVideoContext(`video${index}`)
                videoContext.pause()
            }
        })
    }
</script>

<template>
    <view class="codefun-flex-col page">
        <view class="codefun-flex-col group">
            <view class="codefun-flex-col section">
                <text class="codefun-self-start text pb-2">{{ pageData.header.title }}</text>
                <view class="codefun-flex-row codefun-items-center codefun-self-stretch section_2" v-show="false">
                    <image class="image_5" src="/static/images/codefun/b8d30fcc0b08b881a41c8b3e35b7f8ac.png" />
                    <text class="font text_2 codefun-ml-8">{{ pageData.header.searchPlaceholder }}</text>
                </view>
            </view>
            <view class="codefun-flex-col codefun-relative group_3">
                <view class="codefun-flex-col">
                    <view class="codefun-flex-col codefun-self-stretch group_4">
                        <view class="codefun-flex-col section_3">
                            <view class="codefun-flex-row codefun-justify-between">
                                <view class="codefun-flex-row codefun-items-center">
                                    <view
                                        class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper"
                                    >
                                        <text class="font_2 text_4">{{ pageData.weather.location }}</text>
                                    </view>
                                    <image
                                        class="image_6 codefun-ml-6"
                                        src="/static/images/codefun/a2f290fb1b65d093b844e73ddae1aed9.png"
                                    />
                                </view>
                                <view class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_2">
                                    <text class="text_3">{{ pageData.weather.date }}</text>
                                </view>
                            </view>
                            <view class="codefun-flex-row group_5">
                                <view class="codefun-flex-row codefun-items-center group_8">
                                    <image
                                        class="codefun-shrink-0 image_8"
                                        :src="`/static/images/weather/${pageData.weather.icon}.svg`"
                                    />
                                    <view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-ml-10">
                                        <text class="text_5">{{ pageData.weather.temperature }}</text>
                                        <text class="font_2 text_8 !text-24rpx codefun-mt-16">{{
                                            pageData.weather.condition
                                        }}</text>
                                    </view>
                                </view>
                                <view class="codefun-flex-col group_6 ml-2">
                                    <view class="codefun-flex-row codefun-justify-between group_7">
                                        <!-- <image
                                            class="image_9"
                                            src="/static/images/codefun/78e80b7080b127271004edad2f6e6234.png"
                                        />
                                        <image class="image_7" src="/static/images/codefun/cloud.png" />
                                        <image
                                            class="image_7"
                                            src="/static/images/codefun/c785818f2c08b7682aa5188542b2dede.png"
                                        /> -->

                                        <image
                                            class="image_7"
                                            :src="`/static/images/weather/${forecast.icon}.svg`"
                                            v-for="forecast in pageData.weather.forecast"
                                            :key="forecast.day"
                                        />
                                    </view>
                                    <view class="codefun-flex-row codefun-justify-between codefun-items-center group_9">
                                        <view
                                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_9"
                                        >
                                            <text class="font_3 text_6">{{ pageData.weather.forecast[0].day }}</text>
                                        </view>
                                        <view
                                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3"
                                        >
                                            <text class="font_3 text_52">{{ pageData.weather.forecast[1].day }}</text>
                                        </view>
                                        <text class="font_3 text_7">{{ pageData.weather.forecast[2].day }}</text>
                                    </view>
                                    <view class="codefun-flex-row codefun-justify-center">
                                        <view
                                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
                                        >
                                            <text class="font_4 text_9">{{ pageData.weather.forecast[0].temp }}</text>
                                        </view>
                                        <view
                                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_1 ml-17"
                                        >
                                            <text class="font_4 text_10">{{ pageData.weather.forecast[1].temp }}</text>
                                        </view>
                                        <view
                                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4 ml-17"
                                        >
                                            <text class="font_4 text_9">{{ pageData.weather.forecast[2].temp }}</text>
                                        </view>
                                    </view>
                                </view>
                            </view>
                            <view class="codefun-flex-row section_4" v-if="pageData.weather.warning">
                                <image
                                    class="codefun-shrink-0 image_10"
                                    src="/static/images/codefun/344155285176a7ac7ccd670a2a1daf19.png"
                                />
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-shrink-0 text-wrapper_5 codefun-ml-6"
                                >
                                    <text class="text_12">{{ pageData.weather.warning }}</text>
                                </view>
                            </view>
                        </view>
                        <view class="codefun-flex-col codefun-relative section_5">
                            <view class="codefun-flex-row">
                                <view
                                    v-show="item.status"
                                    v-for="item in pageData.menuItems"
                                    :key="item.id"
                                    class="codefun-flex-col codefun-items-center group_10"
                                    @click="onMenuItemClick(item)"
                                >
                                    <image class="image_11" :src="item.icon_url" />
                                    <text class="font_2 mt-11">{{ item.name }}</text>
                                </view>
                            </view>
                            <view class="codefun-flex-row codefun-mt-20">
                                <view
                                    v-show="item.status"
                                    v-for="item in pageData.serviceItems"
                                    :key="item.id"
                                    class="codefun-flex-col codefun-items-center group_10"
                                    @click="onMenuItemClick(item)"
                                >
                                    <image class="image_11" :src="item.icon_url" />
                                    <text class="font_2 mt-11">{{ item.name }}</text>
                                </view>
                            </view>
                        </view>
                        <view class="codefun-flex-row codefun-justify-between codefun-items-center section_6">
                            <view class="codefun-flex-col">
                                <view class="codefun-flex-row codefun-items-baseline">
                                    <text class="font_5 text_17">{{ pageData.newsItems[0].type }}</text>
                                    <text class="font_2 text_18 ml-11">{{ pageData.newsItems[0].title }}</text>
                                </view>
                                <view class="codefun-flex-row codefun-items-baseline">
                                    <text class="font_5 text_19">{{ pageData.newsItems[1].type }}</text>
                                    <text class="text-26 text_20 text_21 ml-11">{{ pageData.newsItems[1].date }}</text>
                                </view>
                            </view>
                            <image class="image_13" src="/static/images/codefun/64d85a99ca3de5fab9ce0e8dc71aa791.png" />
                        </view>
                    </view>
                    <view class="codefun-self-end section_7" />
                </view>
                <view class="codefun-flex-row codefun-justify-between codefun-items-baseline group_12">
                    <text class="font_6">{{ pageData.productMarket.title }}</text>
                    <!-- <text class="font_7 text_22">{{ pageData.productMarket.updateTime }}</text> -->
                </view>
                <view class="codefun-flex-row equal-division section_8">
                    <view
                        v-for="(product, index) in pageData.productMarket.products"
                        :key="product.id"
                        class="codefun-flex-col group_13"
                        :class="{
                            group_17: index === 0,
                            group_39: index === 1,
                            group_21: index === 2,
                        }"
                    >
                        <view
                            class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-center codefun-relative group_1"
                        >
                            <text class="font_8 text_23">{{ product.name }}</text>
                            <text class="font_9 text_23" :class="`pos${index > 0 ? `_${index + 1}` : ''}`">{{
                                product.current_price
                            }}</text>
                        </view>
                        <view
                            class="codefun-flex-row codefun-items-center codefun-self-stretch"
                            :class="{
                                section_10: product.isUp,
                                section_11: !product.isUp,
                            }"
                        >
                            <image
                                class="codefun-shrink-0 image_14"
                                :src="
                                    product.isUp
                                        ? '/static/images/codefun/c6f953be58ac3e9752ab9475a2a53c14.png'
                                        : '/static/images/codefun/c7e797cc626699dcc8999a72145e9f8b.png'
                                "
                            />
                            <text
                                class="font_10 ml-3"
                                :class="{
                                    text_25: product.isUp,
                                    text_24: !product.isUp,
                                    text_26: !product.isUp,
                                }"
                            >
                                {{ `${product.isUp ? '' : '-'}${product.percent}%` }}
                            </text>
                        </view>
                        <view
                            class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_6"
                            @click="onProductFollowClick(product)"
                        >
                            <text class="font_11">点击关注</text>
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-row codefun-justify-between codefun-items-baseline group_15">
                    <text class="font_12 text_28">服务展示窗</text>
                    <text class="font_7 text_20 text_29">实时数据</text>
                </view>
                <view class="codefun-flex-row equal-division_2 group_16">
                    <view
                        v-for="stat in pageData.serviceStats"
                        :key="stat.id"
                        class="codefun-flex-col section_12 section_19"
                    >
                        <view
                            class="codefun-flex-row codefun-justify-center codefun-items-center codefun-self-stretch codefun-relative group_27"
                        >
                            <image class="image_5 mr-1" :class="`pos_${stat.id}`" :src="stat.icon" />
                            <text
                                class="font_13"
                                :class="`text_${stat.id === 1 ? 30 : stat.id === 2 ? 1 : stat.id > 4 ? 46 : 37}`"
                                >{{ stat.name }}</text
                            >
                        </view>
                        <view class="codefun-flex-row codefun-justify-center codefun-items-baseline mt-11 group_30">
                            <text class="font_12 text_37">{{ stat.num }}</text>
                            <text class="font_7 text_31">{{ stat.unit }}</text>
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-row codefun-justify-between codefun-items-center group_19">
                    <text class="font_6 text_32">农技课堂</text>
                    <text class="font_7 text_33" @click="onViewMoreClass">查看全部</text>
                </view>
                <view class="codefun-flex-col section_13">
                    <fui-swiper-dot
                        :items="pageData.agricultureClass.videoList"
                        :current="pageData.current"
                        :styles="{
                            height: 10,
                            activeWidth: 40,
                            background: '#dff0e2',
                            activeBackground: '#5db66f',
                            bottom: 10,
                        }"
                    >
                        <swiper
                            class="fui-banner__wrap"
                            circular
                            :indicator-dots="false"
                            autoplay
                            :interval="4000"
                            :duration="150"
                            @change="handleChangeVideo"
                        >
                            <swiper-item v-for="(video, index) in pageData.agricultureClass.videoList" :key="index">
                                <video
                                    :id="`video${index}`"
                                    :src="video.media_video"
                                    :poster="video.cover_image"
                                    :controls="false"
                                    style="width: 654rpx; height: 358rpx"
                                    @loadedmetadata="handleMetadataLoaded"
                                    @play="handleVideoPlay(index)"
                                ></video>
                            </swiper-item>
                        </swiper>
                    </fui-swiper-dot>
                    <view class="describe">
                        <text class="codefun-self-start font text_34">{{ pageData.agricultureClass.title }}</text>
                        <view
                            class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch mt-13"
                        >
                            <!-- <view class="codefun-flex-row codefun-items-center">
                                <image
                                    class="codefun-shrink-0 image_15"
                                    src="/static/images/codefun/893f216142f5ca20cf9f2496d9b793c8.png"
                                />
                                <text class="font_14 text_35 ml-5">{{ pageData.agricultureClass.expert }}</text>
                            </view> -->
                            <text class="font_14 text_36">{{ pageData.agricultureClass.time }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
    .ml-17 {
        margin-left: 34rpx;
    }
    .ml-43 {
        margin-left: 86rpx;
    }
    .mt-13 {
        margin-top: 26rpx;
    }
    .ml-11 {
        margin-left: 22rpx;
    }
    .ml-3 {
        margin-left: 6rpx;
    }
    .ml-19 {
        margin-left: 38rpx;
    }
    .mt-11 {
        margin-top: 22rpx;
    }
    .ml-5 {
        margin-left: 10rpx;
    }
    .mt-3 {
        margin-top: 6rpx;
    }
    .page {
        background-color: #e6f5e8;
        mix-blend-mode: NOTTHROUGH;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
        padding-bottom: 20rpx;

        .group {
            .section {
                padding: 48rpx 28rpx 220rpx;
                background-image: url('/static/images/codefun/1086a098c06f7f52e77bd7a646747a13.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                .group_2 {
                    padding-left: 16rpx;
                    .image {
                        border-radius: 64rpx;
                        width: 108rpx;
                        height: 42rpx;
                    }
                    .image_2 {
                        mix-blend-mode: NOTTHROUGH;
                        width: 34rpx;
                        height: 22rpx;
                    }
                    .image_3 {
                        mix-blend-mode: NOTTHROUGH;
                        width: 30rpx;
                        height: 22rpx;
                    }
                    .image_4 {
                        width: 48rpx;
                        height: 22rpx;
                    }
                }
                .text {
                    margin-left: 5.3rpx;
                    margin-top: 37.62rpx;
                    color: #ffffffe6;
                    font-size: 36rpx;
                    line-height: 33.58rpx;
                    letter-spacing: 4.32rpx;
                    font-family: meixin;
                }
                .section_2 {
                    margin-top: 25.8rpx;
                    padding: 14rpx 18rpx 16rpx;
                    background-color: #ffffff4d;
                    border-radius: 1998rpx;
                    mix-blend-mode: NOTTHROUGH;
                    border: solid 1rpx #ffffff7d;
                    .text_2 {
                        line-height: 25.5rpx;
                    }
                }
            }
            .group_3 {
                margin-top: -188rpx;
                padding-left: 28rpx;
                .group_4 {
                    // height: 864rpx;
                    .section_3 {
                        margin-right: 28rpx;
                        padding: 20rpx 28rpx 58rpx;
                        background-image: linear-gradient(180deg, #dcfce7 0%, #f8fef9 100%);
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        .text-wrapper {
                            padding: 7.6rpx 0 6.76rpx;
                            overflow: hidden;
                            width: 56rpx;
                            height: 40rpx;
                            .text_4 {
                                color: #5db66f;
                                line-height: 25.64rpx;
                            }
                        }
                        .image_6 {
                            width: 16rpx;
                            height: 10rpx;
                        }
                        .text-wrapper_2 {
                            overflow: hidden;
                            width: 140rpx;
                            height: 40rpx;
                            .text_3 {
                                margin-left: 9.28rpx;
                                color: #5db66f;
                                font-size: 24rpx;
                                line-height: 40rpx;
                                width: 164rpx;
                            }
                        }
                        .group_5 {
                            margin-top: 16rpx;
                            .group_8 {
                                margin: 4rpx 0;
                                flex: 1 1 300.68rpx;
                                .image_8 {
                                    mix-blend-mode: NOTTHROUGH;
                                    width: 112rpx;
                                    height: 112rpx;
                                }
                                .text_5 {
                                    color: #06280b;
                                    font-size: 48rpx;
                                    line-height: 34.28rpx;
                                }
                                .text_8 {
                                    color: #555555;
                                    line-height: 26.88rpx;
                                }
                            }
                            .group_6 {
                                flex: 1 1 300.68rpx;
                                .group_7 {
                                    padding: 0 8rpx;
                                    .image_9 {
                                        margin-top: 4rpx;
                                        width: 54rpx;
                                        height: 42rpx;
                                    }
                                    .image_7 {
                                        margin-right: 4rpx;
                                        margin-bottom: 4rpx;
                                        width: 56rpx;
                                        height: 42rpx;
                                    }
                                }
                                .group_9 {
                                    margin-top: 10rpx;
                                    padding: 0 12rpx;
                                    .text-wrapper_9 {
                                        padding: 6.8rpx 0 4.6rpx;
                                        overflow: hidden;
                                        width: 48rpx;
                                        height: 32rpx;
                                        .text_6 {
                                            line-height: 20.6rpx;
                                        }
                                    }
                                    .text-wrapper_3 {
                                        padding: 6.54rpx 0 4.92rpx;
                                        overflow: hidden;
                                        width: 48rpx;
                                        height: 32rpx;
                                        .text_52 {
                                            line-height: 20.54rpx;
                                        }
                                    }
                                    .font_3 {
                                        font-size: 24rpx;
                                        line-height: 22.04rpx;
                                        color: #6b7280;
                                    }
                                    .text_7 {
                                        margin-right: 9rpx;
                                        line-height: 20.54rpx;
                                    }
                                }
                                .text-wrapper_4 {
                                    padding: 7.84rpx 0 7.02rpx;
                                    overflow: hidden;
                                    width: 76rpx;
                                    height: 32rpx;
                                    .text_9 {
                                        line-height: 17.14rpx;
                                    }
                                }
                                .text-wrapper_1 {
                                    padding: 7.84rpx 0 6.98rpx;
                                    overflow: hidden;
                                    width: 76rpx;
                                    height: 32rpx;
                                    .text_10 {
                                        line-height: 17.18rpx;
                                    }
                                }
                            }
                        }
                        .section_4 {
                            margin-top: 30rpx;
                            padding: 10rpx 20rpx;
                            background-color: #fb81461f;
                            border-radius: 12rpx;
                            mix-blend-mode: NOTTHROUGH;
                            .image_10 {
                                width: 40rpx;
                                height: 40rpx;
                            }
                            .text-wrapper_5 {
                                margin-right: 180rpx;
                                width: 90%;
                                height: 40rpx;
                                .text_12 {
                                    margin-left: 2.3rpx;
                                    margin-right: 13.7rpx;
                                    font-size: 28rpx;
                                    line-height: 40rpx;
                                    overflow: hidden;
                                    text-overflow: ellipsis; /*  超出以 ...显示 */
                                    display: -webkit-box;
                                    -webkit-line-clamp: 1; /* // 显示1行 */
                                    -webkit-box-orient: vertical;
                                    color: #ff612c;
                                }
                            }
                        }
                    }
                    .section_5 {
                        margin-right: 28rpx;
                        margin-top: -34rpx;
                        padding: 30rpx 0 40.76rpx;
                        background-color: #ffffff;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        .image_11 {
                            border-radius: 88rpx;
                            width: 96rpx;
                            height: 96rpx;
                        }
                        .group_10 {
                            flex: 1 1 173.5rpx;
                            .text_50 {
                                line-height: 25.76rpx;
                            }
                            .text_13 {
                                line-height: 24.58rpx;
                            }
                            .text_51 {
                                line-height: 25.78rpx;
                            }
                        }
                        .group_43 {
                            padding-bottom: 10rpx;
                        }
                        .group_42 {
                            padding-bottom: 10rpx;
                        }
                        .group_37 {
                            padding-bottom: 10.06rpx;
                        }
                        .group_40 {
                            padding-bottom: 10.06rpx;
                        }
                        .group_11 {
                            padding-left: 31.3rpx;
                            padding-right: 25.86rpx;
                            .group_38 {
                                padding: 0 9.7rpx;
                                .image_12 {
                                    border-radius: 88rpx;
                                    mix-blend-mode: NOTTHROUGH;
                                    width: 88rpx;
                                    height: 88rpx;
                                }
                            }
                            .text_14 {
                                line-height: 25.62rpx;
                            }
                            .text_15 {
                                line-height: 25.76rpx;
                            }
                            .text_16 {
                                line-height: 25.78rpx;
                            }
                        }
                    }
                    .font_2 {
                        font-size: 28rpx;
                        line-height: 25.7rpx;
                        color: #1d2129;
                    }
                    .section_6 {
                        margin-right: 28rpx;
                        margin-top: 24rpx;
                        padding: 18rpx 18rpx 12.32rpx 22.78rpx;
                        background-color: #ffffff;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        .font_5 {
                            font-size: 28rpx;
                            line-height: 44rpx;
                            color: #5db66f;
                        }
                        .text_17 {
                            font-size: 30rpx;
                            font-family: alimamashuheiti;
                        }
                        .text_18 {
                            color: #000000;
                            line-height: 26.16rpx;
                        }
                        .text_19 {
                            font-size: 30rpx;
                            font-family: alimamashuheiti;
                        }
                        .text_21 {
                            line-height: 17.18rpx;
                        }
                        .image_13 {
                            border-radius: 16rpx;
                            mix-blend-mode: NOTTHROUGH;
                            width: 32rpx;
                            height: 32rpx;
                        }
                    }
                    .font_4 {
                        font-size: 20rpx;
                        line-height: 18.3rpx;
                        color: #000000;
                    }
                }
                .section_7 {
                    margin-right: 8rpx;
                    background-color: #00000000;
                    width: 24rpx;
                    height: 24rpx;
                }
                .group_12 {
                    margin-top: 17.72rpx;
                    .text_22 {
                        margin-right: 30.72rpx;
                        color: #33333399;
                        line-height: 22.16rpx;
                    }
                }
                .equal-division {
                    margin-right: 28rpx;
                    margin-top: 32.72rpx;
                    .group_13 {
                        flex: 0 0 33.33%;
                        text-align: center;
                        .group_41 {
                            padding: 10rpx 0 4.92rpx;
                            width: 106rpx;
                        }
                        .section_10 {
                            margin: 24rpx 0 0 0;
                            padding: 0 14rpx;
                            background-color: #da14141a;
                            border-radius: 1998rpx;
                            mix-blend-mode: NOTTHROUGH;
                        }
                        .text-wrapper_6 {
                            margin-top: 40rpx;
                            padding: 17.3rpx 0 16.66rpx;
                            background-color: #5db66f29;
                            border-radius: 1998rpx;
                            mix-blend-mode: NOTTHROUGH;
                            .font_11 {
                                font-size: 24rpx;
                                line-height: 22.04rpx;
                                color: #16a34a;
                            }
                        }
                        .group_20 {
                            padding: 10rpx 0 4.92rpx;
                            width: 100rpx;
                        }
                        .font_8 {
                            font-size: 28rpx;
                            line-height: 72rpx;
                            color: #333333;
                        }
                        .text_23 {
                            width: 100%;
                        }
                        .font_9 {
                            font-size: 36rpx;
                            line-height: 25.7rpx;
                            color: #f26464;
                        }
                        .group_1 {
                            padding: 10rpx 0 4.92rpx;
                            // width: 106rpx;
                            .text_24 {
                                color: #5db66f;
                            }
                        }
                        .section_11 {
                            margin: 24rpx 0 0 0;
                            padding: 0 14rpx;
                            background-color: rgba(93, 182, 111, 0.2);
                            border-radius: 1998rpx;
                            mix-blend-mode: NOTTHROUGH;
                            .text_26 {
                                color: #5db66f;
                                padding-left: 10rpx;
                            }
                        }
                        .image_14 {
                            mix-blend-mode: NOTTHROUGH;
                            width: 28rpx;
                            height: 16rpx;
                            margin: 0 8rpx;
                        }
                        .font_10 {
                            font-size: 20rpx;
                            line-height: 56rpx;
                            color: #f44336;
                        }
                    }
                    .group_17 {
                        padding: 0 31.34rpx 12rpx 32rpx;
                    }
                    .section_9 {
                        flex-shrink: 0;
                        margin: 10.62rpx 0 10rpx;
                    }
                    .horiz-divider {
                        background-color: #fafafa;
                        width: 2rpx;
                        height: 288rpx;
                    }
                    .group_39 {
                        padding: 0 30.66rpx 12rpx 32.66rpx;
                    }
                    .group_21 {
                        padding: 0 30rpx 12rpx 33.34rpx;
                    }
                }
                .section_8 {
                    padding: 15.38rpx 0 12rpx;
                    background-color: #ffffff;
                    border-radius: 16rpx;
                    mix-blend-mode: NOTTHROUGH;
                    overflow: scroll;
                }
                .group_15 {
                    margin-top: 41.54rpx;
                    .text_28 {
                        line-height: 29.56rpx;
                    }
                    .text_29 {
                        margin-right: 24.44rpx;
                    }
                }
                .font_7 {
                    font-size: 24rpx;
                    line-height: 22.04rpx;
                    color: #000000;
                }
                .text_20 {
                    opacity: 0.6;
                }
                .equal-division_2 {
                    margin-top: 32.9rpx;
                    .section_12 {
                        flex: 0 0 calc(33.33% - 14rpx);
                        .group_25 {
                            padding: 5.24rpx 0 4.8rpx;
                            .pos_4 {
                                position: absolute;
                                left: 0;
                                top: 50%;
                                transform: translateY(-50%);
                            }
                            .text_30 {
                                line-height: 21.96rpx;
                            }
                        }
                        .group_28 {
                            margin-left: 5.82rpx;
                            line-height: 26.88rpx;
                            .text_47 {
                                line-height: 26.88rpx;
                            }
                            .text_49 {
                                line-height: 21.62rpx;
                            }
                        }
                        .group_26 {
                            padding: 5.2rpx 0 4.72rpx;
                            .pos_5 {
                                position: absolute;
                                left: 0;
                                top: 50%;
                                transform: translateY(-50%);
                            }
                            .text_1 {
                                line-height: 22.08rpx;
                            }
                        }
                        .font_13 {
                            font-size: 24rpx;
                            line-height: 22.04rpx;
                            color: #666666;
                        }
                        .group_18 {
                            margin-left: 5.24rpx;
                            line-height: 22.84rpx;
                            .text_48 {
                                line-height: 22.84rpx;
                            }
                        }
                        .group_27 {
                            padding: 5.3rpx 0 4.52rpx;
                            .text_46 {
                                line-height: 22.18rpx;
                            }
                        }
                        .group_30 {
                            margin-left: 7.24rpx;
                            line-height: 22.84rpx;
                            .text_37 {
                                line-height: 22.84rpx;
                            }
                            .text_31 {
                                line-height: 21.46rpx;
                            }
                        }
                    }
                    .section_18 {
                        padding: 32rpx 20rpx 38rpx;
                        background-color: #ffffff;
                        border-radius: 8rpx;
                        mix-blend-mode: NOTTHROUGH;
                        height: 150rpx;
                    }
                    .section_1 {
                        padding: 32rpx 22rpx 39.98rpx;
                        background-color: #ffffff;
                        border-radius: 8rpx;
                        mix-blend-mode: NOTTHROUGH;
                        height: 150rpx;
                    }
                    .section_19 {
                        padding: 32rpx 20rpx 40.4rpx;
                        background-color: #ffffff;
                        border-radius: 8rpx;
                        mix-blend-mode: NOTTHROUGH;
                        height: 150rpx;
                    }
                }
                .group_16 {
                    flex-wrap: wrap;
                    gap: 20rpx;
                    justify-content: center;
                    align-items: center;
                    margin-right: 10px;
                }
                .font_12 {
                    font-size: 32rpx;
                    line-height: 22.04rpx;
                    color: #000000;
                }
                .group_19 {
                    margin-top: 38rpx;
                    .text_32 {
                        line-height: 29.48rpx;
                    }
                    .text_33 {
                        margin-right: 25.48rpx;
                        color: #5db66f;
                        line-height: 21.86rpx;
                    }
                }
                .font_6 {
                    font-size: 32rpx;
                    line-height: 29.56rpx;
                    color: #333333;
                }
                .section_13 {
                    position: relative;
                    margin-right: 28rpx;
                    margin-top: 32.86rpx;
                    height: 418rpx;
                    // padding: 271.06rpx 36.64rpx 22rpx 48rpx;
                    padding: 20rpx;
                    padding-bottom: 0;
                    background-color: #ffffff;
                    border-radius: 16rpx;
                    mix-blend-mode: NOTTHROUGH;
                    // background-image: url('/static/images/codefun/de7f2f0177d74c2b9c784b3825ea9832.png');
                    // background-size: 94%;
                    // background-repeat: no-repeat;
                    // background-position-x: 20rpx;
                    // background-position-y: 20rpx;
                    .fui-banner__item {
                        height: 358rpx;
                        border-radius: 20rpx;
                    }

                    .fui-banner__wrap {
                        height: 358rpx;

                        :deep(.uni-video-cover) {
                            .uni-video-cover-play-button {
                                width: 70rpx;
                                height: 70rpx;
                                line-height: 40rpx;
                                font-size: 56rpx;
                            }
                        }
                    }
                    .describe {
                        width: 88%;
                        position: absolute;
                        bottom: 52rpx;
                        left: 40rpx;
                    }

                    .text_34 {
                        line-height: 26.58rpx;
                    }
                    .image_15 {
                        mix-blend-mode: NOTTHROUGH;
                        border-radius: 50%;
                        width: 48rpx;
                        height: 48rpx;
                    }
                    .font_14 {
                        font-size: 24rpx;
                        line-height: 22.04rpx;
                        color: #ffffff;
                    }
                    .text_35 {
                        line-height: 21.76rpx;
                    }
                    .text_36 {
                        line-height: 23.04rpx;
                    }
                    .section_14 {
                        background-color: #5db66f;
                        border-radius: 12rpx;
                        mix-blend-mode: NOTTHROUGH;
                        width: 40rpx;
                        height: 12rpx;
                    }
                    .image-wrapper {
                        width: 40rpx;
                        .image_16 {
                            width: 40rpx;
                            height: 12rpx;
                        }
                    }
                    .section_15 {
                        background-color: #5db66f33;
                        mix-blend-mode: NOTTHROUGH;
                        border-radius: 50%;
                        width: 12rpx;
                        height: 12rpx;
                    }
                }
            }
            .font {
                font-size: 28rpx;
                line-height: 25.7rpx;
                color: #ffffff;
            }
        }
        .equal-division_3 {
            padding: 10rpx 7.98rpx 15.66rpx 7.98rpx;
            background-color: #ffffff;
            mix-blend-mode: NOTTHROUGH;
            border-top: solid 1rpx #e7e7e7;
            .group_22 {
                flex: 1 1 146.82rpx;
                .font_15 {
                    font-size: 20rpx;
                    line-height: 18.3rpx;
                    color: #666666;
                }
                .text_44 {
                    line-height: 18.4rpx;
                }
                .text_45 {
                    line-height: 18.48rpx;
                }
            }
            .group_32 {
                padding: 12rpx 0 11.68rpx;
            }
            .group_33 {
                padding: 12rpx 0 10rpx;
            }
            .group_34 {
                padding: 12rpx 0 11.48rpx;
            }
            .group_35 {
                padding: 12rpx 0 11.38rpx;
            }
            .group_36 {
                padding: 12rpx 0 11.84rpx;
            }
        }
        .image_5 {
            width: 32rpx;
            height: 32rpx;
        }
    }
</style>
