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

import * as NongChangAPI from '@/api/model/nongchang'
import { useUserStore } from '@/store/modules/user'
import { getList as getVideoList } from '@/api/model/knowledgeVideo'

const userStore = useUserStore()
onShow(() => {
    // 获取金刚区菜单数据
    getZoomList()
    // 获取农业模型数据
    getAgricultureModelsList()
    // 获取基地管理数据
    getBaseManagementList()
    // 获取常用工具数据
    getCommonToolsList()
    // 农技课堂
    getAgricultureClassList()
    // 智能设备
    // getDeviceList()
    // 获取农村
    getFarmList()
})

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

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

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

    // 农业模型
    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: [],

    smartDeviceIcon: [
        '/static/images/codefun/8bd62352939b47e71f09a93a6ab344b2.png',
        '/static/images/codefun/81937c2666c800cf5966c29c2891b7c4.png',
    ],

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

    // 农技学习
    agricultureClass: {
        title: '',
        time: '',
        videoList: [],
    },
    current: 0,
    // 信用分
    userInfo: {
        creditScore: 0,
    },
})

function getZoomList() {
    NongChangAPI.zoneList({
        pageNo: 1,
        pageSize: 5,
        status: 1,
        type: 2,
    }).then((res) => {
        const { records } = res
        pageData.menuItems = records
    })
}
function getAgricultureModelsList() {
    NongChangAPI.agricultureModelsList({
        status: 1,
    }).then((res) => {
        const { records } = res
        pageData.agricultureModels = []
		records.sort((a, b) => a.sort_order - b.sort_order);
        pageData.agricultureModels = records
    })
}
function getBaseManagementList() {
    NongChangAPI.baseManagementList({
        pageNo: 1,
        pageSize: 5,
        status: 1,
    }).then((res) => {
        const { records } = res
        pageData.baseManagement = []
		records.sort((a, b) => a.sort_order - b.sort_order);
        pageData.baseManagement = records
    })
}
function getCommonToolsList() {
    NongChangAPI.commonToolsList({
        status: 1,
    }).then((res) => {
        const { records } = res
        pageData.commonTools = []
		records.sort((a, b) => a.sort_order - b.sort_order);
        pageData.commonTools = records
    })
}
function getAgricultureClassList() {
    getVideoList({ pageNo: 1, pageSize: 10, status: 1, classify: 3 }).then((res) => {
        const { records } = res
		let scale:any = 0;
		for(let i = 0; i < records.length;i++){
			if(records[i].width){
				scale = (340 / records[i].width).toFixed(1);
				records[i].videoWidth = 340;
				records[i].videoHeight = Math.floor(records[i].height * scale);
			}else{
				records[i].videoWidth = 0;
				records[i].videoHeight = 0;
			}
		}
        pageData.agricultureClass.videoList = records
    })
}

function getDeviceList() {
    NongChangAPI.getDeviceList({}).then((res) => {
        pageData.smartDevices = res.records
    })
}

function getFarmList() {
    NongChangAPI.AllFarms().then((res) => {
        if (res) {
            pageData.hasFarm = JSON.stringify(res) != '{}'
            pageData.farmInfo = res
        }
    })
}

function toAdd() {
    Navigate.to('/pages/nongchang/create-nongchang-form').catch(() => {
        Message.alert('跳转失败', '添加基地')
    })
}

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

    if (item.jump_target?.startsWith('/')) {
        const tabbarKeyWords = [
            '/pages/shouye/shouye',
            '/pages/nongchang/nongchang',
            '/pages/fuwu/fuwu',
            '/pages/chanxiao/chanxiao',
        ]
        if (tabbarKeyWords.includes(item.jump_target)) {
            uni.switchTab({
                url: item.jump_target,
            })
        } else {
            Navigate.to(item.jump_target).catch(() => {
                Message.alert(`${item.jump_target} 页面打开失败`, item.name)
            })
        }
    } else if (item.jump_target?.startsWith('http')) {
        Navigate.webview(item.jump_target, item.name)
    } else {
        if (item.jump_target?.startsWith('#')) {
            const value = item.jump_target?.substring(1)
            if (/^[+-]?\d+(\.\d+)?$/.test(value)) {
                uni.pageScrollTo({
                    scrollTop: Number(value),
                })
            } else {
                uni.pageScrollTo({
                    selector: item.jump_target,
                })
            }
        } else {
            uni.showModal({
                title: item.name,
                content: '功能暂未开放',
            })
        }
    }
}

// 农业模型点击事件
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('设备管理')
    // 在这里添加具体的设备管理逻辑
    uni.navigateTo({
        url: '/pages/device/device',
    })
}
// 灵活用工
function onViewMoreFlexibleEmployment(type) {
    console.log('查看更多灵活用工业务')
    // 在这里添加具体的查看逻辑

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

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

    Navigate.to('/pages/zhunongjinrong/zhunongjinrong')
}

// 查看更多农技课堂
function onViewMoreClass() {
    uni.navigateTo({
        url: '/pages/knowledgeVideo/index?classify=3',
    })
}

// 点击常用工具
function onClickTool(tool: any) {
    console.log('点击常用工具:', tool)
    // 在这里添加具体的常用工具点击逻辑
    uni.navigateTo({
        url: `/pages/webview/webview?url=${encodeURIComponent(tool.addr)}`,
    })
}

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

    console.log('当前索引:', currentIndex)

    // // 延迟处理视频切换，避免卡顿
    // setTimeout(() => {
    //     // 停止所有其他视频的播放（只暂停，不重置位置）
    //     pageData.agricultureClass.videoList.forEach((_, index) => {
    //         if (index !== currentIndex) {
    //             try {
    //                 const videoContext = uni.createVideoContext(`video${index}`)
    //                 videoContext.pause()
    //                 // 不重置到开头，保留播放位置
    //             } catch (error) {
    //                 console.log('停止视频失败:', error)
    //             }
    //         } else {
    //             // 当前视频：尝试播放
    //             try {
    //                 const videoContext = uni.createVideoContext(`video${index}`)
    //                 // 自动播放当前视频
    //                 videoContext.play()
    //             } catch (error) {
    //                 console.log('播放视频失败:', error)
    //             }
    //         }
    //     })
    // }, 100)
}

// 处理swiper过渡动画
function handleTransition(e: any) {
    // 过渡期间可以做一些优化处理
    console.log('swiper过渡中...')
}

// 获取视频时长
function handleMetadataLoaded(e: any) {
    pageData.agricultureClass.time = e.target.duration
}

// 解决轮播视频切换时，上一个视频不停止播放的问题
function handleVideoPlay(currentIndex) {
    pageData.agricultureClass.videoList.forEach((_, index) => {
        if (index !== currentIndex) {
            try {
                const videoContext = uni.createVideoContext(`video${index}`)
                videoContext.pause()
            } catch (error) {
                console.log('停止视频失败:', error)
            }
        }
    })
}

// 视频暂停事件处理
function handleVideoPause(currentIndex) {
    console.log(`视频${currentIndex}暂停`)
}

function playVideo(index) {
    const videoContext = uni.createVideoContext(`video${index}`)
    videoContext.requestFullScreen({ direction: 0 })
    videoContext.play()
}

function handleFullscreenChange(e: any, index) {
    console.log(`视频${index}全屏状态改变`)
    if (!e.detail.fullScreen) {
        const videoContext = uni.createVideoContext(`video${index}`)
        videoContext.pause()
    }
}

function toDetail(item: Recordable) {
    // Navigate.to(`/pages/nongchang/detail/index?id=${item.id}&name=${encodeURIComponent(item.name)}`)
    let id = Object.keys(item)[0]
    let name = Object.values(item)[0]
    Navigate.to(`/pages/nongchang/detail/index?id=${id}&name=${encodeURIComponent(name)}`)
}

function handlePublish() {
	Navigate.to('/pages/linghuoyonggong/linghuoyonggong')
}

onHide(() => {
    // 停止所有其他视频的播放（只暂停，不重置位置）
    pageData.agricultureClass.videoList.forEach((_, index) => {
        try {
            const videoContext = uni.createVideoContext(`video${index}`)
            videoContext.pause()
            // 不重置到开头，保留播放位置
        } catch (error) {
            console.log('停止视频失败:', error)
        }
    })
})
</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">
                    <!-- <WeatherForecast /> -->
                    <!-- <text class="codefun-self-center font text">{{ pageData.header.title }}</text> -->
                    <view class="codefun-flex-col codefun-self-stretch !hidden">
                        <!-- <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-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 !hidden" @click="toDetail(pageData.farmInfo)">
                    <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 mt-4">
                    <!-- <view class="codefun-flex-row codefun-justify-between codefun-items-center">
                        <text class="font">我的农场</text>
                    </view> -->
                    <view class="h-300rpx codefun-flex-col mr-3.5 mt-7 nongchang_box relative">
                        <image class="w-full h-full" src="/static/images/nongchang/mynongchang-1.png" />
                        <view
                            v-show="pageData.hasFarm"
                            class="w-280rpx h-80rpx flex-center border-rd-3xl absolute top-50% left-50% color-#ffffff"
                            style="
                                background-color: rgb(255 255 255 / 20%);
                                border: 1rpx solid #fff;
                                transform: translateY(-50%) translateX(-50%);
                            "
                            @click="toDetail(pageData.farmInfo)"
                        >
                            <image class="mr-1 w-40 h-40" src="/static/images/nongchang/eye-white.png" />
                            <text style="font-family: '思源黑体'; font-weight: 300">进入农场</text>
                        </view>
                        <view
                            v-show="!pageData.hasFarm"
                            class="w-280rpx h-80rpx flex-center border-rd-3xl absolute top-50% left-50% color-#ffffff"
                            style="
                                background-color: rgb(255 255 255 / 20%);
                                border: 1rpx solid #fff;
                                transform: translateY(-50%) translateX(-50%);
                            "
                            @click="toAdd"
                        >
                            <image class="mr-1 w-40 h-40" src="/static/images/nongchang/add.png" />
                            <text class="fontsize_28" style="font-family: '思源黑体'; font-weight: 400;color: #fff;">添加我的农场</text>
                        </view>
                        <view class="absolute nongchang-remark">基于农场实时精细化气象数据基地设备管理</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">
                                <view class="yr-wd-style" v-for="model in pageData.agricultureModels" :key="model.id">
                                    <view class="yr-model-item">
										<image class="model_icon" :src="model.icon_url" />
										<view class="model_content">
										    <view class="fontsize_28">{{ model.name }}</view>
										    <view class="fontsize_24 font_11">{{ model.describes }}</view>
											<view class="model-btn" @click="onAgricultureModelClick(model)">
											    <text class="font_8 text_24">查看介绍</text>
											</view> 
										</view>
                                        <!-- <view class="flex-row" style="text-align: center">
                                            <view class="flex-center">
                                                <image class="w-80 h-80" :src="model.icon_url" />
                                            </view>
                                            <view class="">
                                                <view class="fontsize_28">{{ model.name }}</view>
                                                <view class="fontsize_24 font_11">{{ model.describes }}</view>
                                            </view>
                                        </view>
                                        <view
                                            class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-center text-wrapper_3 mt-2!"
                                            @click="onAgricultureModelClick(model)">
                                            <text class="font_8 text_24">查看介绍</text>
                                        </view> -->
                                    </view>
                                </view>
                            </view>
                        </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 section_11 equal-division-item_7 gap-1 justify-center align-center"
                            :class="{ 'ml-9': index > 0 }"
                            @click="onBaseManagementClick(item)"
                        >
                            <image class="image_5" :src="item.icon" />
                            <text class="fontsize_24 font_11 mt-0.5" :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="onViewMoreTools">更多</text> -->
                    </view>
                    <view class="codefun-flex-col section_12">
                        <view class="flex-center flex-wrap 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 fontsize_28">{{ tool.name }}</view>
                            </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 !relative rounded-lg" style="margin-left: -28rpx">
                        <fui-waterfall topGap="20" leftGap="20" rightGap="20" bottomGap="20">
                            <fui-waterfall-item
                                v-for="(video, index) in pageData.agricultureClass.videoList"
                                :key="index"
								:imgWidth="video.videoWidth"
								:imgHeight="video.videoHeight"
                                :src="video.thumbnailPath"
								:videoDuration="video.totalTime"
                                @click="playVideo(index)"
                            >
                                <view class="flex flex-col justify-between pl-2 pr-2 pb-2">
                                    <view class="fontsize_28 mt-1 mb-2 font-13">{{ video.title }}</view>
                                    <view class="flex justify-between text-25 color-#686868">
                                        <view class="mr-1 flex-center">
                                            <view class="flex-center text-24 lh-24rpx"
                                                >{{ video.viewCount || 0 }}次播放</view
                                            >
                                        </view>
                                        <text>{{ dayjs(video.publishDate).format('MM-DD') }}</text>
                                    </view>
                                </view>
                                <video
                                    :id="`video${index}`"
                                    :src="video.url"
                                    :poster="video.thumbnailPath"
                                    :title="video.title"
                                    :controls="true"
                                    :autoplay="false"
                                    :muted="false"
                                    :loop="true"
                                    :show-play-btn="true"
                                    :show-center-play-btn="true"
                                    :enable-progress-gesture="true"
                                    :show-progress="true"
                                    :direction="0"
                                    object-fit="contain"
                                    @loadedmetadata="handleMetadataLoaded"
                                    @play="handleVideoPlay(index)"
                                    @pause="handleVideoPause(index)"
                                    @fullscreenchange="handleFullscreenChange($event, index)"
                                    class="!hidden"
                                ></video>
                            </fui-waterfall-item>
                        </fui-waterfall>
						
						<view @click="onViewMoreClass" style="text-align: center;font-size: 28rpx;padding:32rpx 0rpx;color:#999999;">点击查看更多</view>
						
                    </view>
                </view>
            </view>
        </view>
    </view>
	
<!-- 	<fui-fab position="right" distance="10" bottom="240" width="96" @click="handlePublish">
	    <view class="text-white text-center">
			<image style="width: 52rpx;height:52rpx;" src="/static/images/nongchang/work_icon.png" />
	        <view style="font-size: 18rpx;margin-top: -16rpx;">找人干活</view>
	    </view>
	</fui-fab> -->
</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: auto !important;
    padding-bottom: 30rpx;

    .group {
        .section {
            // padding: 0 28rpx 98rpx;
            // background-image: url('/static/images/codefun/7a5dc4ee864fe55da98b41c14ee3b931.png');
			padding-top: 98rpx;
			height: 574rpx;
			width: 750rpx;
			background-image: linear-gradient(179.89deg, rgba(93, 182, 111, 1) 0%, rgba(230, 245, 232, 1) 100%);
            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: -574rpx;
            padding-left: 28rpx;
			z-index: 10;
            .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: left;
                                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 8rpx;
                        }

                        .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: -5rpx;

                            .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: 75rpx;
                    height: 75rpx;
                }

                .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;
                    height: 418rpx;
                    padding-bottom: 0;
                    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: 0rpx;
                        left: 10rpx;
                        z-index: 1;

                        .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;
    }
}

.nongchang_box {
    background-image: url('/static/images/nongchang/mynongchang-2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

.font_11 {
    color: #666666;
}
.nongchang-remark {
    font-size: 24rpx;
    font-weight: 400;
    letter-spacing: 0px;
    line-height: 18px;
    color: #ffffff;
    text-align: center;
    vertical-align: middle;
    bottom: 30rpx;
    width: 312rpx;
    left: 50%;
    transform: translateX(-50%);
}

.yr-wd-style{
	display: flex;
	padding-top: 36rpx;
	padding-bottom: 20rpx;
	.yr-model-item{
		display: flex;
		padding-left: 20rpx;
	}
	.model_icon{
		width: 68rpx;
		height: 68rpx;
	}
	.model_content{
		display: flex;
		flex-direction: column;
	}
	.model-btn{
		width: 136rpx;
		border-radius: 40rpx;
		background: rgba(93, 182, 111, 0.2);
		height: 40rpx;
		opacity: 1;
		font-size: 24rpx;
		font-weight: 400;
		letter-spacing: 0px;
		line-height: 40rpx;
		color: #16A34A;
		text-align: center;
		margin-top: 22rpx;
	}
}

::v-deep .fui-fab__btn-main {
	background: linear-gradient(124.25deg, #a5d63f 0%, #5db66f 100%) !important;
	box-shadow: 0px 1px 8px #5db66f;
}
</style>
