<script setup lang="ts">
    import { reactive } from 'vue'
    import { onPullDownRefresh, onShow } from '@dcloudio/uni-app'
    import Navigate from '@/utils/page/navigate'

    import * as HomeAPI from '@/api/model/home'
    import * as NongChangAPI from '@/api/model/nongchang'

    onShow(() => {
        // 获取金刚区菜单数据
        getZoomList()
        // 获取农业模型数据
        getAgricultureModelsList()
        // 获取基地管理数据
        getBaseManagementList()
        // 获取常用工具数据
        getCommonToolsList()
        // 农技课堂
        getAgricultureClassList()
    })

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

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

        // 功能菜单
        menuItems: [
            // { id: 1, name: '监测预警', icon: '/static/images/codefun/e683f9d10dc21da45abffbfa4c56fffb.png' },
            // { id: 2, name: '农业模型', icon: '/static/images/codefun/afdf5cf91bb1832ec12b89ba1f8a4a22.png' },
            // { id: 3, name: '基地管理', icon: '/static/images/codefun/8ce0f7de048a5d10fd901fa4caee40fd.png' },
            // { id: 4, name: '信用中心', icon: '/static/images/codefun/bc6853d7f464c445f1d6cc5f3b37103d.png' },
            // { id: 5, name: '灵活用工', icon: '/static/images/codefun/104cbc5dca418b07e6933d2e953db1d8.png' },
        ],

        // 农场信息
        farmInfo: {
            image: '/static/images/codefun/89a5811c35ff41e6a039c04e77d7380a.png',
            name: '张家界水稻农场',
            area: '32.5亩',
            crops: '水稻、油菜',
            soilCondition: '适宜',
            pestRisk: '中等',
            precipitation: '25mm',
        },

        // 农业模型
        agricultureModels: [
            // {
            //     id: 1,
            //     image: '/static/images/codefun/d8106d6756782001856157ea8933e6f0.png',
            //     name: '柑橘模型',
            //     description: '精准预测柑橘生长周期',
            //     actionText: '查看介绍',
            //     link: '/pages/nongyedamoxing/nongyedamoxing',
            // },
            // {
            //     id: 2,
            //     image: '/static/images/codefun/2716e8578a8409fc69b6b25ca47dd988.png',
            //     name: '作物生长监测',
            //     description: 'AI识别生长状况',
            //     actionText: '查看介绍',
            //     link: '/pages/nongyedamoxing/nongyedamoxing',
            // },
            // {
            //     id: 3,
            //     image: '/static/images/codefun/f29a54a031b5665bf1522b973b109416.png',
            //     name: '产能模型',
            //     description: '基于作物生长状况产能构建模型',
            //     actionText: '查看介绍',
            //     link: '/pages/nongyedamoxing/nongyedamoxing',
            // },
        ],

        // 灵活用工
        flexibleEmployment: {
            working: '找人干活',
            earning: '出工赚钱',
            progress: '1个进行中 3个已完成',
        },

        // 基地管理
        baseManagement: [
            // {
            //     id: 1,
            //     name: '基础信息',
            //     icon: '/static/images/codefun/652ff68221e41e59bd253d90a260a9d2.png',
            //     value: 3,
            //     unit: '个',
            // },
            // {
            //     id: 2,
            //     name: '作物管理',
            //     icon: '/static/images/codefun/73f2cd7926e10ad8d0222682c6f0dd44.png',
            //     value: 3,
            //     unit: '种',
            // },
            // {
            //     id: 3,
            //     name: '农资管理',
            //     icon: '/static/images/codefun/d5224faf803b94f41aea2c682a8b30fe.png',
            //     value: 4,
            //     unit: '项',
            // },
            // {
            //     id: 4,
            //     name: '销售记录',
            //     icon: '/static/images/codefun/9489121f8d1fa3d7847a2ef3e45b8753.png',
            //     value: 5,
            //     unit: '笔',
            // },
            // {
            //     id: 5,
            //     name: '收支概览',
            //     icon: '/static/images/codefun/68ae1a4d9d9f5bcd80dd2a4603ac7cdf.png',
            //     value: 8300,
            //     unit: '元',
            // },
        ],

        // 监测预警图表数据
        monitoringData: {
            title: '监测预警',
            yAxis: [80, 60, 40, 20, 0],
            chartImage: '/static/images/codefun/fb791ee7e711cfb556043cb81d3c32b1.png',
        },

        // 监测预警详情
        monitoringDetails: [
            {
                id: 1,
                name: '气象灾害',
                image: '/static/images/codefun/68bae99a74dc71e194d799ee24c1f023.png',
                status: '台风预警',
                statusColor: '#ef4444',
            },
            {
                id: 2,
                name: '作物倒伏',
                image: '/static/images/codefun/29bc217d767c53f1f4968ddcf08b6d85.png',
                status: '中等风险',
                statusColor: '#eab308',
            },
            {
                id: 3,
                name: '病虫害风险',
                image: '/static/images/codefun/143013b1c946e75b10133de0db6d9c7f.png',
                status: '水稻稻瘟病',
                statusColor: '#3b82f6',
            },
        ],

        // 常用工具
        commonTools: [
            { id: 1, name: '种植日历', icon: '/static/images/codefun/701b1b6c427847028c16038ad73b9788.png' },
            { id: 2, name: '农药配比', icon: '/static/images/codefun/429c85060b57461a9e7e0065ee3b0347.png' },
            { id: 3, name: '施肥计算', icon: '/static/images/codefun/9e09dc90a8f64165bd1cdd060463fe52.png' },
            { id: 4, name: '农机租赁', icon: '/static/images/codefun/80b66267a90246d2b265fcbfddd8df72.png' },
            { id: 5, name: '病虫图谱', icon: '/static/images/codefun/7a85c9339a044dbd8bff9cbc7a7fae5f.png' },
            { id: 6, name: '天气预报', icon: '/static/images/codefun/673c79c5a1384e3d93e86623e5095577.png' },
            { id: 7, name: '产品定价', icon: '/static/images/codefun/f1964e7a929b45abb87c8d79d42838e8.png' },
            { id: 8, name: '补贴咨询', icon: '/static/images/codefun/050ac1b430844be786310ff1bc11f3d6.png' },
        ],

        // 智能设备
        smartDevices: [
            {
                id: 1,
                name: '土壤监测仪',
                image: '/static/images/codefun/8bd62352939b47e71f09a93a6ab344b2.png',
                status: '在线',
                statusColor: '#13e000',
            },
            {
                id: 2,
                name: '监测仪A',
                image: '/static/images/codefun/81937c2666c800cf5966c29c2891b7c4.png',
                status: '掉线',
                statusColor: '#75777c',
            },
            {
                id: 3,
                name: '监测仪B',
                image: '/static/images/codefun/8bd62352939b47e71f09a93a6ab344b2.png',
                status: '在线',
                statusColor: '#13e000',
            },
        ],

        // 信用中心
        creditCenter: {
            image: '/static/images/codefun/fece3647f209c46ff19855722cffc960.png',
            score: '726',
            rating: '信用评级：良好',
            tips: '完善信息提升20分',
            actionText: '查看金融服务',
        },

        // 农技学习
        agricultureClass: {
            title: '专家实录—鸡饲养技术',
            time: '',
            videoList: [],
        },
        current: 0,
    })

    function getZoomList() {
        NongChangAPI.zoneList({
            pageNo: 1,
            pageSize: 5,
            status: 1,
            type: 2,
        }).then((res) => {
            const { records } = res
            pageData.menuItems = []
            pageData.menuItems = records
        })
    }
    function getAgricultureModelsList() {
        NongChangAPI.agricultureModelsList({
            status: 1,
        }).then((res) => {
            const { records } = res
            pageData.agricultureModels = []
            pageData.agricultureModels = records
        })
    }
    function getBaseManagementList() {
        NongChangAPI.baseManagementList({
            pageNo: 1,
            pageSize: 5,
            status: 1,
        }).then((res) => {
            const { records } = res
            pageData.baseManagement = []
            pageData.baseManagement = records
        })
    }
    function getCommonToolsList() {
        NongChangAPI.commonToolsList({
            status: 1,
        }).then((res) => {
            const { records } = res
            pageData.commonTools = []
            pageData.commonTools = records
        })
    }
    function getAgricultureClassList() {
        HomeAPI.agricultureClassList({
            status: 1,
        }).then((res) => {
            const { records } = res
            pageData.agricultureClass.videoList = records.reverse()
            pageData.agricultureClass.title = records[0]?.title
        })
    }

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

    // 农业模型点击事件
    function onAgricultureModelClick(model: any) {
        console.log('点击农业模型:', model)
        // 在这里添加具体的农业模型点击逻辑

        // 打开模型详情页面
        Navigate.to('/pages/nongyedamoxing/nongyedamoxing')
    }

    // 基地管理点击事件
    function onBaseManagementClick(item: any) {
        console.log('点击基地管理项:', item)
        // 在这里添加具体的基地管理点击逻辑

        uni.navigateTo({
            url: '/pages/jidiguanli/jidiguanli',
        })
    }

    // 查看更多监测预警
    function onViewMoreMonitoring() {
        console.log('查看更多监测预警')
        // 在这里添加具体的查看逻辑
    }

    // 查看更多常用工具
    function onViewMoreTools() {
        console.log('查看更多常用工具')
        // 在这里添加具体的查看逻辑
    }

    // 设备管理点击事件
    function onDeviceManagementClick() {
        console.log('设备管理')
        // 在这里添加具体的设备管理逻辑
    }
    // 灵活用工
    function onViewMoreFlexibleEmployment(type) {
        console.log('查看更多灵活用工业务')
        // 在这里添加具体的查看逻辑

        // 跳转到灵活用工界面
        Navigate.to(`/pages/linghuoyonggong/linghuoyonggong?type=${type}`)
    }

    // 查看金融服务
    function onViewFinancialServices() {
        console.log('查看金融服务')
        // 在这里添加具体的查看逻辑
    }

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

    // 点击常用工具
    function onClickTool(tool: any) {
        console.log('点击常用工具:', tool)
        // 在这里添加具体的常用工具点击逻辑
    }

    // 轮播视频切换的时候触发
    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">
                <view class="codefun-flex-col mt-52rpx">
                    <text class="codefun-self-center font text">{{ pageData.header.title }}</text>
                    <view class="codefun-flex-col codefun-self-stretch mt-19">
                        <view class="codefun-flex-row codefun-items-center section_2">
                            <image class="image_5" src="/static/images/codefun/b8d30fcc0b08b881a41c8b3e35b7f8ac.png" />
                            <text class="codefun-ml-8 font_2 text_2">{{ pageData.header.searchPlaceholder }}</text>
                        </view>
                        <view class="codefun-mt-14 codefun-flex-row equal-division section_3">
                            <view
                                v-for="item in pageData.menuItems"
                                :key="item.id"
                                class="codefun-flex-col codefun-items-center"
                                @click="onMenuItemClick(item)"
                            >
                                <image class="image_6" :src="item.icon_url" />
                                <text class="font_3 mt-13" :class="`text_${item.id + 2}`">{{ item.name }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="codefun-flex-col codefun-relative group_6">
                <view class="codefun-flex-row section_4 flex-row">
                    <view class="w-200rpx h-200rpx">
                        <image class="codefun-self-center image_7 w-full h-full" :src="pageData.farmInfo.image" />
                    </view>
                    <view class="ml-11">
                        <text class="codefun-self-center font text_8">{{ pageData.farmInfo.name }}</text>
                        <view class="codefun-flex-row codefun-justify-start codefun-self-stretch group_7">
                            <view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
                                <text class="font_4 text_9">{{ pageData.farmInfo.area }}</text>
                            </view>
                            <view
                                class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2 ml-3"
                            >
                                <text class="font_4 text_10">{{ pageData.farmInfo.crops }}</text>
                            </view>
                        </view>
                        <view class="codefun-flex-row codefun-items-start equal-division_2 section_5">
                            <view class="codefun-flex-col codefun-items-center equal-division-item_4">
                                <text class="font_5 text_11">{{ pageData.farmInfo.soilCondition }}</text>
                                <text class="font_4 text_14 mt-5">⼟壤墒情</text>
                            </view>
                            <view class="codefun-flex-col codefun-items-center group_8 equal-division-item_4">
                                <text class="font_5 text_12">{{ pageData.farmInfo.pestRisk }}</text>
                                <text class="font_4 text_15 mt-5">病虫害风险</text>
                            </view>
                            <view class="codefun-flex-col codefun-items-center group_9 equal-division-item_4">
                                <text class="font_5 text_13">{{ pageData.farmInfo.precipitation }}</text>
                                <text class="codefun-mt-6 font_4 text_16">7天降水</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-col group_10">
                    <view class="codefun-flex-row codefun-justify-between codefun-items-center">
                        <text class="font">农业大模型</text>
                        <text class="font_6 text_17">全部</text>
                    </view>
                    <view class="codefun-flex-col mt-17">
                        <view class="codefun-flex-col codefun-justify-start section_6">
                            <view class="codefun-flex-row equal-division_3">
                                <template v-for="(model, index) in pageData.agricultureModels" :key="model.id">
                                    <view class="codefun-flex-col equal-division-item_5 group_11">
                                        <image class="codefun-self-center image_7" :src="model.icon_url" />
                                        <text class="codefun-self-center font_5 text_18">{{ model.name }}</text>
                                        <text class="codefun-self-center font_7 text_21">{{ model.describes }}</text>
                                        <view
                                            class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-center text-wrapper_3"
                                            @click="onAgricultureModelClick(model)"
                                        >
                                            <text class="font_8 text_24">查看介绍</text>
                                        </view>
                                    </view>

                                    <view
                                        class="section_7 horiz-divider"
                                        v-if="index < pageData.agricultureModels.length - 1"
                                    />
                                </template>
                            </view>
                        </view>
                        <view class="codefun-mt-12 codefun-flex-col section_8">
                            <view class="codefun-flex-row equal-division_4">
                                <view
                                    class="codefun-flex-row codefun-justify-center equal-division-item_6 section_9"
                                    @click="onViewMoreFlexibleEmployment(1)"
                                >
                                    <text class="codefun-self-start font_9 text_25">{{
                                        pageData.flexibleEmployment.working
                                    }}</text>
                                    <image
                                        class="codefun-self-center image_8 ml-9"
                                        src="/static/images/codefun/e12b4605ec265981ebf23e742ae09d77.png"
                                    />
                                </view>
                                <view
                                    class="codefun-flex-row codefun-justify-evenly equal-division-item_6 section_10 ml-11"
                                    @click="onViewMoreFlexibleEmployment(2)"
                                >
                                    <text class="codefun-self-start font_9 text_26">{{
                                        pageData.flexibleEmployment.earning
                                    }}</text>
                                    <image
                                        class="codefun-self-center image_9"
                                        src="/static/images/codefun/abc27711926ec08e17bd512f96740931.png"
                                    />
                                </view>
                            </view>
                            <text class="codefun-self-start font_10 text_27 mt-7">{{
                                pageData.flexibleEmployment.progress
                            }}</text>
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-col group_15">
                    <view class="codefun-flex-row codefun-justify-between codefun-items-baseline">
                        <text class="font text_28">基地管理</text>
                        <text class="font_6 text_29" @click="onBaseManagementClick">更多</text>
                    </view>
                    <view class="codefun-flex-row equal-division_5 mt-17">
                        <view
                            v-for="(item, index) in pageData.baseManagement"
                            :key="item.id"
                            class="codefun-flex-col codefun-items-start section_11 equal-division-item_7 gap-1"
                            :class="{ 'ml-9': index > 0 }"
                            @click="onBaseManagementClick(item)"
                        >
                            <image class="image_5" :src="item.icon" />
                            <text class="font_11" :class="`text_${30 + item.id - 1}`">{{ item.name }}</text>
                            <view class="group_25">
                                <text class="font_12" :class="`text_${35 + item.id - 1}`">{{ item.num }}</text>
                                <text class="font_10" :class="`text_${35 + item.id + 3}`">{{ item.unit }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-col group_21">
                    <view class="codefun-flex-row codefun-justify-between codefun-items-center group_22">
                        <text class="font text_42">监测预警</text>
                        <text class="font_6 text_43 text_44" @click="onViewMoreMonitoring">更多</text>
                    </view>
                    <view class="codefun-flex-col section_12">
                        <view class="codefun-flex-row codefun-items-center group_23">
                            <view class="codefun-flex-col codefun-items-end codefun-shrink-0">
                                <text class="font_13 text_45">80</text>
                                <text class="codefun-mt-16 font_13 text_46">60</text>
                                <text class="codefun-mt-16 font_13 text_47">40</text>
                                <text class="codefun-mt-16 font_13 text_48">20</text>
                                <text class="codefun-mt-16 font_13 text_49">0</text>
                            </view>
                            <view class="codefun-flex-col codefun-flex-1 codefun-relative group_24 ml-7">
                                <view class="divider" />
                                <view class="divider view_2" />
                                <view class="divider view_3" />
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-items-start image-wrapper pos_2"
                                >
                                    <image
                                        class="codefun-shrink-0 image_11"
                                        src="/static/images/codefun/fb791ee7e711cfb556043cb81d3c32b1.png"
                                    />
                                </view>
                                <view class="divider pos" />
                                <view class="divider pos_3" />
                            </view>
                        </view>
                        <view class="codefun-mt-10 codefun-flex-col codefun-justify-start group_25">
                            <view class="codefun-flex-row equal-division_6">
                                <view class="codefun-flex-col codefun-items-center section_13 equal-division-item_8">
                                    <image
                                        class="image_12"
                                        src="/static/images/codefun/68bae99a74dc71e194d799ee24c1f023.png"
                                    />
                                    <view
                                        class="codefun-mt-4 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
                                    >
                                        <text class="font_10 text_50">气象灾害</text>
                                    </view>
                                    <view
                                        class="codefun-mt-4 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
                                    >
                                        <text class="font_10 text_53">台风预警</text>
                                    </view>
                                </view>
                                <view class="codefun-flex-col section_13 equal-division-item_8 ml-11">
                                    <image
                                        class="codefun-self-center image_12"
                                        src="/static/images/codefun/29bc217d767c53f1f4968ddcf08b6d85.png"
                                    />
                                    <view
                                        class="codefun-mt-4 codefun-flex-col codefun-items-center codefun-self-stretch"
                                    >
                                        <view
                                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
                                        >
                                            <text class="font_10 text_51">作物倒伏</text>
                                        </view>
                                        <view
                                            class="codefun-mt-4 codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
                                        >
                                            <text class="font_10 text_54">中等风险</text>
                                        </view>
                                    </view>
                                </view>
                                <view class="codefun-flex-col section_13 section_14 ml-11">
                                    <image
                                        class="codefun-self-center image_12"
                                        src="/static/images/codefun/143013b1c946e75b10133de0db6d9c7f.png"
                                    />
                                    <view
                                        class="codefun-mt-4 codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_5"
                                    >
                                        <text class="font_10 text_52">病虫害风险</text>
                                    </view>
                                    <view
                                        class="codefun-mt-4 codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_5"
                                    >
                                        <text class="font_10 text_55">水稻稻瘟病</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-col group_21">
                    <view class="codefun-flex-row codefun-justify-between codefun-items-center group_22">
                        <text class="font text_42">常用工具</text>
                        <text class="font_6 text_43 text_44" @click="onViewMoreTools">更多</text>
                    </view>
                    <view class="codefun-flex-col section_12">
                        <view class="flex-center flex-wrap gap-2 pt-3">
                            <view
                                v-for="tool in pageData.commonTools"
                                :key="tool.id"
                                class="px-3 py-3 bg-white rounded-lg flex-center flex-col gap-2"
                                @click="onClickTool(tool)"
                            >
                                <image class="w-100 h-100" :src="tool.icon" mode="scaleToFill" />
                                <view class="text-24">{{ tool.name }}</view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-col group_26 mt-21">
                    <view class="codefun-flex-row codefun-justify-between codefun-items-baseline">
                        <text class="font text_56">智能设备</text>
                        <text class="font_6 text_57" @click="onDeviceManagementClick">设备管理</text>
                    </view>
                    <view class="codefun-flex-row group_26 mt-17 gap-2">
                        <view
                            v-for="(device, index) in pageData.smartDevices"
                            :key="device.id"
                            class="section_16 codefun-flex-row codefun-justify-center codefun-items-center codefun-shrink-0 codefun-relative"
                        >
                            <image class="image_13" :src="device.image" />
                            <view class="codefun-ml-8 codefun-flex-col">
                                <text class="font_14" :class="`text_${58 + index}`">{{ device.name }}</text>
                                <view class="codefun-mt-10 codefun-flex-row codefun-items-center">
                                    <view class="section_17" v-if="index !== 1" />
                                    <view class="section_18" v-if="index === 1" />
                                    <text
                                        class="codefun-ml-4 font_4"
                                        :class="index !== 1 ? 'text_59' : 'text_60'"
                                        :style="{ color: device.statusColor }"
                                    >
                                        {{ device.status }}
                                    </text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-col group_28">
                    <text class="codefun-self-start font text_61">信用中心</text>
                    <view
                        class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch section_19 mt-21"
                    >
                        <image class="image_15" :src="pageData.creditCenter.image" />
                        <view class="codefun-flex-col codefun-items-start group_29">
                            <text class="text_62">{{ pageData.creditCenter.score }}</text>
                            <text class="font_5 text_63 mt-13">{{ pageData.creditCenter.rating }}</text>
                            <text class="font_10 text_64 mt-13">{{ pageData.creditCenter.tips }}</text>
                            <view
                                class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_6 mt-13"
                                @click="onViewFinancialServices"
                            >
                                <text class="font_15 text_65">{{ pageData.creditCenter.actionText }}</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-col group_30">
                    <view class="codefun-flex-row codefun-justify-between codefun-items-center group_22">
                        <text class="font text_66">农技学习</text>
                        <text class="font_6 text_43 text_67" @click="onViewMoreClass">查看更多</text>
                    </view>
                    <view class="codefun-flex-col section_20">
                        <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 class="codefun-flex-col section_20">
                        <text class="codefun-self-start font_2 text_68">{{ pageData.agricultureClass.title }}</text>
                        <view
                            class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_31"
                        >
                            <view class="codefun-flex-row codefun-items-center">
                                <image
                                    class="codefun-shrink-0 image_16"
                                    src="/static/images/codefun/893f216142f5ca20cf9f2496d9b793c8.png"
                                />
                                <text class="font_15 text_69 ml-5">{{ pageData.agricultureClass.expert }}</text>
                            </view>
                            <text class="font_15 text_70">{{ pageData.agricultureClass.info }}</text>
                        </view>
                        <view class="codefun-flex-row codefun-justify-center codefun-self-stretch group_32">
                            <view class="section_21" />
                            <view
                                class="codefun-ml-8 codefun-flex-row codefun-justify-start codefun-items-center image-wrapper_3"
                            >
                                <image
                                    class="image_17"
                                    src="/static/images/codefun/d2f4116cc0ab402e57bdbd7aa4dead94.png"
                                />
                            </view>
                            <view class="codefun-ml-8 section_22" />
                            <view
                                class="codefun-ml-8 codefun-flex-row codefun-justify-start codefun-items-center image-wrapper_3"
                            >
                                <image
                                    class="image_17"
                                    src="/static/images/codefun/d2f4116cc0ab402e57bdbd7aa4dead94.png"
                                />
                            </view>
                        </view>
                    </view> -->
                </view>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
    .mt-19 {
        margin-top: 38rpx;
    }
    .ml-3 {
        margin-left: 6rpx;
    }
    .mt-7 {
        margin-top: 14rpx;
    }
    .ml-9 {
        margin-left: 18rpx;
    }
    .ml-7 {
        margin-left: 14rpx;
    }
    .ml-11 {
        margin-left: 22rpx;
    }
    .mt-17 {
        margin-top: 34rpx;
    }
    .mt-11 {
        margin-top: 22rpx;
    }
    .mt-5 {
        margin-top: 10rpx;
    }
    .mt-21 {
        margin-top: 42rpx;
    }
    .mt-13 {
        margin-top: 26rpx;
    }
    .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: 30rpx;

        .group {
            .section {
                padding: 28rpx 28rpx 116rpx;
                background-image: url('/static/images/codefun/7a5dc4ee864fe55da98b41c14ee3b931.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 {
                    color: #ffffffe6;
                    line-height: 29.28rpx;
                }
                .section_2 {
                    padding: 16rpx 18rpx;
                    background-color: #ffffff4d;
                    border-radius: 1998rpx;
                    mix-blend-mode: NOTTHROUGH;
                    border-left: solid 1rpx #ffffff7d;
                    border-right: solid 1rpx #ffffff7d;
                    border-top: solid 1rpx #ffffff7d;
                    border-bottom: solid 1rpx #ffffff7d;
                    .text_2 {
                        line-height: 25.5rpx;
                    }
                }
                .equal-division {
                    position: relative;
                    .equal-division-item {
                        padding: 8rpx 0;
                        width: 134rpx;
                        .text_3 {
                            line-height: 21.88rpx;
                        }
                    }
                    .group_3 {
                        margin-left: 0;
                        .text_4 {
                            line-height: 21.98rpx;
                        }
                        .text_5 {
                            line-height: 21.98rpx;
                        }
                    }
                    .image_6 {
                        width: 96rpx;
                        height: 96rpx;
                    }
                    .font_3 {
                        font-size: 24rpx;

                        line-height: 22.84rpx;
                        color: #1d2129;
                    }
                    .equal-division-item_2 {
                        padding: 8rpx 0;
                        width: 134rpx;
                    }
                    .group_4 {
                        // position: absolute;
                        // right: 147rpx;
                        // top: 6rpx;
                        .text_6 {
                            line-height: 22.06rpx;
                        }
                    }
                    .equal-division-item_3 {
                        // position: absolute;
                        // right: 13rpx;
                        // top: 6rpx;
                        .text_7 {
                            line-height: 21.08rpx;
                        }
                    }
                    .group_5 {
                        padding: 8rpx 0;
                        width: 134rpx;
                    }
                }
                .section_3 {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 16rpx 24rpx 16rpx;
                    background-color: #ffffff;
                    border-radius: 16rpx;
                    mix-blend-mode: NOTTHROUGH;
                }
            }
            .group_6 {
                margin-top: -92rpx;
                padding-left: 28rpx;
                .section_4 {
                    margin-right: 28rpx;
                    padding: 28rpx 28rpx 24rpx;
                    background-color: #ffffff;
                    border-radius: 16rpx;
                    mix-blend-mode: NOTTHROUGH;
                    .text_8 {
                        line-height: 29.88rpx;
                    }
                    .group_7 {
                        margin-top: 16rpx;
                        .text-wrapper {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border-radius: 8rpx;
                            width: 94rpx;
                            height: 40rpx;
                            border-left: solid 2rpx #4f90f1;
                            border-right: solid 2rpx #4f90f1;
                            border-top: solid 2rpx #4f90f1;
                            border-bottom: solid 2rpx #4f90f1;
                            .text_9 {
                                color: #4f90f1;
                                line-height: 17.84rpx;
                            }
                        }
                        .text-wrapper_2 {
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            border-radius: 8rpx;
                            width: 132rpx;
                            height: 40rpx;
                            border-left: solid 2rpx #5db66f;
                            border-right: solid 2rpx #5db66f;
                            border-top: solid 2rpx #5db66f;
                            border-bottom: solid 2rpx #5db66f;
                            .text_10 {
                                color: #5db66f;
                                line-height: 18.14rpx;
                            }
                        }
                    }
                    .equal-division_2 {
                        position: relative;
                        align-self: flex-end;
                        margin-top: 12rpx;
                        .equal-division-item_4 {
                            padding: 12rpx 0;
                            width: 113.96rpx;
                            .text_11 {
                                color: #5db66f;
                                line-height: 24.62rpx;
                            }
                            .text_14 {
                                line-height: 18.98rpx;
                            }
                        }
                        .group_8 {
                            position: absolute;
                            left: 50%;
                            top: 50%;
                            transform: translate(-50%, -50%);
                            .text_12 {
                                color: #fc8145;
                            }
                            .text_15 {
                                line-height: 18.5rpx;
                            }
                        }
                        .group_9 {
                            position: absolute;
                            right: 0;
                            top: 50%;
                            transform: translateY(-50%);
                            .text_13 {
                                color: #4f90f1;
                                line-height: 20rpx;
                            }
                            .text_16 {
                                line-height: 18.52rpx;
                            }
                        }
                    }
                    .section_5 {
                        padding: 12rpx 0;
                        background-color: #f2faf3;
                        border-radius: 8rpx;
                        mix-blend-mode: NOTTHROUGH;
                        width: 414rpx;
                    }
                }
                .group_10 {
                    margin-top: 44rpx;
                    .text_17 {
                        margin-right: 28rpx;
                        line-height: 21.86rpx;
                    }
                    .section_6 {
                        margin-right: 28rpx;
                        padding: 16rpx 0;
                        background-color: #ffffff;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        .equal-division_3 {
                            .equal-division-item_5 {
                                flex: 1 1 207.64rpx;
                                .image_7 {
                                    width: 64rpx;
                                    height: 64rpx;
                                }
                                .text_18 {
                                    margin-top: 20rpx;
                                    line-height: 25.42rpx;
                                }
                                .font_7 {
                                    font-size: 20rpx;

                                    line-height: 32rpx;
                                    color: #666666;
                                }
                                .text_21 {
                                    margin-left: 8rpx;
                                    margin-top: 16rpx;
                                    text-align: center;
                                    width: 160rpx;
                                    height: 60rpx;
                                }
                                .text-wrapper_3 {
                                    margin-top: 36rpx;
                                    padding: 12rpx 0;
                                    background-color: #5db66f26;
                                    border-radius: 400rpx;
                                    mix-blend-mode: NOTTHROUGH;
                                    width: 136rpx;
                                    .font_8 {
                                        font-size: 24rpx;

                                        line-height: 22.84rpx;
                                        color: #16a34a;
                                    }
                                    .text_24 {
                                        line-height: 22.08rpx;
                                    }
                                }
                                .group_13 {
                                    padding: 8rpx 0;
                                    .text_19 {
                                        line-height: 25.62rpx;
                                    }
                                    .text_23 {
                                        line-height: 18.28rpx;
                                    }
                                }
                                .text_20 {
                                    margin-right: 12rpx;
                                    margin-top: 20rpx;
                                    line-height: 25.9rpx;
                                }
                                .text_22 {
                                    margin-top: 16rpx;
                                    text-align: center;
                                    width: 138rpx;
                                }
                            }
                            .group_11 {
                                padding: 8rpx 12rpx 26rpx;
                            }
                            .section_7 {
                                margin: 10rpx 0;
                            }
                            .horiz-divider {
                                background-color: #fafafa;
                                width: 2rpx;
                                height: 288rpx;
                            }
                            .group_12 {
                                padding: 0 20rpx 26rpx;
                            }
                            .group_14 {
                                padding: 8rpx 8rpx 26rpx;
                            }
                        }
                    }
                    .section_8 {
                        margin-right: 28rpx;
                        padding: 28rpx 28rpx 12rpx;
                        background-color: #ffffff;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        .equal-division_4 {
                            align-self: stretch;
                            .equal-division-item_6 {
                                flex: 1 1 308rpx;
                                .font_9 {
                                    font-size: 32rpx;

                                    line-height: 29.32rpx;
                                    color: #1d2129;
                                }
                                .text_25 {
                                    line-height: 28.96rpx;
                                }
                                .image_8 {
                                    mix-blend-mode: NOTTHROUGH;
                                    width: 94rpx;
                                    height: 106rpx;
                                }
                                .text_26 {
                                    line-height: 29.82rpx;
                                }
                                .image_9 {
                                    mix-blend-mode: NOTTHROUGH;
                                    width: 118rpx;
                                    height: 98rpx;
                                }
                            }
                            .section_9 {
                                padding: 28rpx 32rpx 4rpx;
                                background-color: #fff7ec;
                                border-radius: 16rpx;
                                mix-blend-mode: NOTTHROUGH;
                                height: 142rpx;
                            }
                            .section_10 {
                                padding: 28rpx 16rpx 12rpx 36rpx;
                                background-color: #f5fcff;
                                border-radius: 16rpx;
                                mix-blend-mode: NOTTHROUGH;
                                height: 142rpx;
                            }
                        }
                        .text_27 {
                            color: #00000099;
                            line-height: 40rpx;
                            width: 240rpx;
                        }
                    }
                }
                .font_5 {
                    font-size: 26rpx;

                    line-height: 25.56rpx;
                    color: #333333;
                }
                .group_15 {
                    margin-top: 44rpx;
                    .text_28 {
                        color: #000000;
                    }
                    .text_29 {
                        margin-right: 28rpx;
                        line-height: 22.24rpx;
                    }
                    .equal-division_5 {
                        margin-right: 28rpx;
                        .section_11 {
                            flex: 1 1 124rpx;
                            .image_10 {
                                mix-blend-mode: NOTTHROUGH;
                                width: 32rpx;
                                height: 32rpx;
                            }
                            .font_11 {
                                font-size: 24rpx;

                                line-height: 22.84rpx;
                                color: #666666;
                            }
                            .text_30 {
                                margin-top: 12rpx;
                                line-height: 21.76rpx;
                            }
                            .group_16 {
                                margin-left: 4rpx;
                                margin-top: 28rpx;
                                line-height: 22.84rpx;
                                .text_35 {
                                    line-height: 21.62rpx;
                                }
                            }
                            .text_31 {
                                margin-top: 12rpx;
                                line-height: 21.98rpx;
                            }
                            .group_17 {
                                margin-top: 24rpx;
                                line-height: 22.84rpx;
                                .text_38 {
                                    line-height: 21.76rpx;
                                }
                            }
                            .font_12 {
                                font-size: 28rpx;

                                line-height: 22.84rpx;
                                color: #000000;
                            }
                            .text_32 {
                                margin-top: 12rpx;
                                line-height: 22.12rpx;
                            }
                            .group_18 {
                                margin-top: 28rpx;
                                line-height: 22.2rpx;
                                .text_36 {
                                    line-height: 22.2rpx;
                                }
                                .text_39 {
                                    line-height: 20.14rpx;
                                }
                            }
                            .text_33 {
                                margin-top: 12rpx;
                                line-height: 21.74rpx;
                            }
                            .group_19 {
                                margin-left: 4rpx;
                                margin-top: 28rpx;
                                line-height: 22.52rpx;
                                .text_37 {
                                    line-height: 22.52rpx;
                                }
                                .text_40 {
                                    line-height: 21.46rpx;
                                }
                            }
                            .text_34 {
                                margin-left: 4rpx;
                                margin-top: 12rpx;
                                line-height: 22.04rpx;
                            }
                            .group_20 {
                                margin-left: 4rpx;
                                margin-top: 24rpx;
                                line-height: 22.84rpx;
                                .text_41 {
                                    line-height: 20.32rpx;
                                }
                            }
                        }
                        .equal-division-item_7 {
                            padding: 32rpx 12rpx 24rpx;
                            background-color: #ffffff;
                            border-radius: 8rpx;
                            mix-blend-mode: NOTTHROUGH;
                            height: 172rpx;
                        }
                    }
                }
                .font_6 {
                    font-size: 24rpx;

                    line-height: 22.84rpx;
                    color: #5db66f;
                }
                .font_10 {
                    font-size: 24rpx;

                    line-height: 22.84rpx;
                    color: #000000;
                }
                .group_21 {
                    margin-top: 44rpx;
                    .section_12 {
                        margin-right: 28rpx;
                        padding: 0 24rpx 24rpx;
                        background-color: #ffffff;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        .group_23 {
                            padding-left: 8rpx;
                            padding-top: 36rpx;
                            .font_13 {
                                font-size: 24rpx;
                                font-family: Inter;
                                line-height: 18.3rpx;
                                color: #89909d;
                            }
                            .text_45 {
                                line-height: 17.94rpx;
                            }
                            .text_46 {
                                line-height: 17.96rpx;
                            }
                            .text_47 {
                                line-height: 17.94rpx;
                            }
                            .text_48 {
                                line-height: 17.94rpx;
                            }
                            .text_49 {
                                line-height: 17.94rpx;
                            }
                            .group_24 {
                                padding: 48rpx 0;
                                .divider {
                                    mix-blend-mode: NOTTHROUGH;
                                    background-image: repeating-linear-gradient(
                                        90deg,
                                        #c6cacd,
                                        #c6cacd 1.36%,
                                        transparent 1.36%,
                                        transparent 2.717%
                                    );
                                    background-position: -4rpx 0rpx;
                                    height: 2rpx;
                                }
                                .view_2 {
                                    margin-top: 48rpx;
                                }
                                .view_3 {
                                    margin-top: 48rpx;
                                }
                                .image-wrapper {
                                    padding-bottom: 104rpx;
                                    background-image: url('/static/images/codefun/e18202eb8182b8d77c464523c2305fa3.png');
                                    background-size: 100% 100%;
                                    background-repeat: no-repeat;
                                    .image_11 {
                                        margin-left: 8rpx;
                                        width: 564rpx;
                                        height: 92rpx;
                                    }
                                }
                                .pos_2 {
                                    position: absolute;
                                    left: 17rpx;
                                    right: 6.6rpx;
                                    top: 0;
                                }
                                .pos {
                                    position: absolute;
                                    left: 0;
                                    right: 0;
                                    top: 0;
                                }
                                .pos_3 {
                                    position: absolute;
                                    left: 0;
                                    right: 0;
                                    top: 195.06rpx;
                                }
                            }
                        }
                        .group_25 {
                            overflow: hidden;
                            height: 142rpx;
                            .equal-division_6 {
                                position: relative;
                                margin-top: -16rpx;
                                .section_13 {
                                    flex: 1 1 201.34rpx;
                                    .image_12 {
                                        width: 48rpx;
                                        height: 48rpx;
                                    }
                                    .text-wrapper_4 {
                                        padding: 4rpx 0;
                                        overflow: hidden;
                                        width: 96rpx;
                                        .text_50 {
                                            line-height: 22rpx;
                                        }
                                        .text_53 {
                                            color: #ef4444;
                                            line-height: 22.16rpx;
                                        }
                                        .text_51 {
                                            line-height: 21.94rpx;
                                        }
                                        .text_54 {
                                            color: #eab308;
                                            line-height: 21.92rpx;
                                        }
                                    }
                                    .text-wrapper_5 {
                                        padding: 4rpx 0;
                                        overflow: hidden;
                                        .text_52 {
                                            line-height: 22.2rpx;
                                        }
                                        .text_55 {
                                            color: #3b82f6;
                                            line-height: 22.22rpx;
                                        }
                                    }
                                }
                                .equal-division-item_8 {
                                    padding: 24rpx 0;
                                    background-color: #f9fafb;
                                    border-radius: 16rpx;
                                    mix-blend-mode: NOTTHROUGH;
                                    height: 176rpx;
                                }
                                .section_14 {
                                    padding: 24rpx 40rpx;
                                    background-color: #f9fafb;
                                    border-radius: 16rpx;
                                    mix-blend-mode: NOTTHROUGH;
                                    height: 176rpx;
                                }
                            }
                        }
                    }
                }
                .group_26 {
                    overflow-x: scroll;
                    padding-right: 14rpx;
                    .text_56 {
                        line-height: 29.76rpx;
                    }
                    .text_57 {
                        margin-right: 24rpx;
                        line-height: 22.24rpx;
                    }
                    .section_15 {
                        padding: 16rpx 0;
                        background-color: #ffffff;
                        border-radius: 74rpx;
                        mix-blend-mode: NOTTHROUGH;
                        box-shadow: 0rpx 8rpx 64rpx #15161a0a;
                        width: 300rpx;
                        height: 120rpx;
                        .text_58 {
                            line-height: 25.78rpx;
                        }
                        .section_17 {
                            background-color: #13df00;
                            mix-blend-mode: NOTTHROUGH;
                            border-radius: 50%;
                            width: 12rpx;
                            height: 12rpx;
                        }
                        .text_59 {
                            color: #13e000;
                        }
                    }
                    .section_16 {
                        padding: 16rpx 26rpx;
                        background-color: #ffffff;
                        border-radius: 74rpx;
                        mix-blend-mode: NOTTHROUGH;
                        box-shadow: 0rpx 8rpx 64rpx #15161a0a;
                        width: 300rpx;
                        height: 120rpx;
                        .group_27 {
                            width: 140rpx;
                            .section_18 {
                                background-color: #d7d7d9;
                                mix-blend-mode: NOTTHROUGH;
                                border-radius: 50%;
                                width: 12rpx;
                                height: 12rpx;
                            }
                            .text_60 {
                                color: #75777c;
                                line-height: 18.04rpx;
                            }
                        }
                    }
                    .image_13 {
                        border-radius: 24rpx;
                        width: 92rpx;
                        height: 92rpx;
                    }
                    .font_14 {
                        font-size: 28rpx;

                        line-height: 25.56rpx;
                        color: #15161a;
                    }
                    .image-wrapper_2 {
                        padding: 16rpx 0;
                        background-color: #ffffff;
                        border-radius: 74rpx 0 0 74rpx;
                        mix-blend-mode: NOTTHROUGH;
                        box-shadow: 0rpx 8rpx 64rpx #15161a0a;
                        width: 92rpx;
                        height: 120rpx;
                        .image_14 {
                            border-radius: 24rpx 0 0 24rpx;
                            width: 66rpx;
                            height: 92rpx;
                        }
                    }
                }
                .view_4 {
                    margin-top: 520rpx;
                }
                .group_28 {
                    margin-top: 48rpx;
                    .text_61 {
                        line-height: 29.4rpx;
                    }
                    .section_19 {
                        margin-right: 28rpx;
                        padding: 32rpx 64rpx;
                        background-color: #ffffff;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        .image_15 {
                            mix-blend-mode: NOTTHROUGH;
                            width: 210rpx;
                            height: 210rpx;
                        }
                        .group_29 {
                            width: 260rpx;
                            .text_62 {
                                margin-left: 72rpx;
                                color: #ffaa1e;
                                font-size: 40rpx;

                                line-height: 28.56rpx;
                            }
                            .text_63 {
                                margin-left: 8rpx;
                                color: #000000;
                                line-height: 25.88rpx;
                            }
                            .text_64 {
                                margin-left: 8rpx;
                                color: #6b7280;
                                line-height: 22.24rpx;
                            }
                            .text-wrapper_6 {
                                padding: 16rpx 0;
                                background-color: #5db66f;
                                border-radius: 19998rpx;
                                mix-blend-mode: NOTTHROUGH;
                                width: 208rpx;
                                .text_65 {
                                    line-height: 22.18rpx;
                                }
                            }
                        }
                    }
                }
                .group_30 {
                    margin-top: 48rpx;
                    .section_20 {
                        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 {
                                color: #ffffff;
                            }
                        }
                        .text_68 {
                            line-height: 26.58rpx;
                        }
                        .group_31 {
                            margin-top: 20rpx;
                            .image_16 {
                                mix-blend-mode: NOTTHROUGH;
                                border-radius: 50%;
                                width: 48rpx;
                                height: 48rpx;
                            }
                            .text_69 {
                                line-height: 21.76rpx;
                            }
                            .text_70 {
                                line-height: 23.04rpx;
                            }
                        }
                        .group_32 {
                            margin-top: 30rpx;
                            .section_21 {
                                background-color: #5db66f;
                                border-radius: 12rpx;
                                mix-blend-mode: NOTTHROUGH;
                                width: 40rpx;
                                height: 12rpx;
                            }
                            .image-wrapper_3 {
                                width: 40rpx;
                                .image_17 {
                                    width: 40rpx;
                                    height: 12rpx;
                                }
                            }
                            .section_22 {
                                background-color: #5db66f33;
                                mix-blend-mode: NOTTHROUGH;
                                border-radius: 50%;
                                width: 12rpx;
                                height: 12rpx;
                            }
                        }
                    }
                }
                .group_22 {
                    padding-bottom: 32rpx;
                    .text_42 {
                        line-height: 29.18rpx;
                    }
                    .text_43 {
                        line-height: 22.24rpx;
                    }
                    .text_44 {
                        margin-right: 28rpx;
                    }
                    .text_66 {
                        line-height: 29.48rpx;
                    }
                    .text_67 {
                        margin-right: 24rpx;
                    }
                }
                .font_15 {
                    font-size: 24rpx;

                    line-height: 22.84rpx;
                    color: #ffffff;
                }
            }
            .font {
                font-size: 32rpx;
                line-height: 29.32rpx;
                color: #333333;
            }
            .font_2 {
                font-size: 28rpx;

                line-height: 25.56rpx;
                color: #ffffff;
            }
        }
        .equal-division_7 {
            padding: 10rpx 8rpx 16rpx;
            background-color: #ffffff;
            mix-blend-mode: NOTTHROUGH;
            border-top: solid 1rpx #e7e7e7;
            .group_33 {
                flex: 1 1 146.82rpx;
            }
            .equal-division-item_9 {
                padding: 12rpx 0;
            }
        }
        .image_5 {
            width: 32rpx;
            height: 32rpx;
        }
        .font_4 {
            font-size: 20rpx;

            line-height: 18.3rpx;
            color: #666666;
        }
    }
</style>
