<script setup lang="ts">
    import { reactive } from 'vue'
    import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app'
    import * as NongzhiAPI from '@/api/model/nongzhi'
    import * as HomeAPI from '@/api/model/home'
    import Navigate from '@/utils/page/navigate'

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

    // 页面数据
    const pageData = reactive({
        // 顶部标题
        header: {
            title: '服务',
        },

        // 岗位信息
        jobInfo: {
            jobCount: 32,
            demandCount: 215,
            matchedCount: 186,
        },

        // 功能菜单
        menuItems: [
            {
                id: 1,
                name: '灵活用工',
                icon_url: '/static/images/codefun/8193a279dfd933588d29a34aa2aeefe7.png',
                jump_target: '',
            },
            {
                id: 2,
                name: '助农金融',
                icon_url: '/static/images/codefun/b4ac84c6c037b7ab92fa371141ad88e0.png',
                jump_target: '',
            },
            {
                id: 3,
                name: '农资交易',
                icon_url: '/static/images/codefun/1ec00e65ad474de76b9efc3691acbbd1.png',
                jump_target: '',
            },
            {
                id: 4,
                name: '农机服务',
                icon_url: '/static/images/codefun/d6d66fa5331d2be60c7b0b66de6477e5.png',
                jump_target: '',
            },
            {
                id: 5,
                name: '代理记账',
                icon_url: '/static/images/codefun/agencyBookkeeping.png',
                jump_target: '',
            },
        ],

        // 灵活用工业务
        flexibleEmploymentServices: [
            {
                id: 1,
                image: '/static/images/codefun/ce0934e2137d43264df416c99d587cad.png',
                title: '季节性用工',
                description: '三农区域灵活用工服务',
                actionText: '去发布',
                url: '/pages/linghuoyonggong/linghuoyonggong?type=1',
            },
            {
                id: 2,
                image: '/static/images/codefun/8b6fa6d1f9b4e2a53a33619c1f8ccff4.png',
                title: '农机手调度',
                description: '专业人员作业安排',
                actionText: '去预约',
                url: '/pages/nongjifuwu/nongjifuwu',
            },
            // {
            //     id: 3,
            //     image: '/static/images/codefun/06319419d17b7630c1d5bc415bcd26ef.png',
            //     title: '作业质量评价',
            //     description: '农机定位精度≤50米',
            //     actionText: '去评价',
            // },
        ],

        // 助农金融产品
        financialProducts: [
            {
                id: 1,
                image: '/static/images/codefun/c6120d23a50c05f74836335d75fc42e5.png',
                name: '惠农贷',
                subName: '振兴贷',
                actionText: '去对比',
            },
            {
                id: 2,
                image: '/static/images/codefun/c7e55ddfc537c95cfba831af3dee0dd7.png',
                name: '灾害险',
                subName: '价格险',
                actionText: '去选择',
            },
            {
                id: 3,
                image: '/static/images/codefun/4f8282213bb5e0b881853f4a2e005c99.png',
                description: '本县576人已申请',
                actionText: '去申请',
            },
        ],

        // 农资交易商品
        agriculturalProducts: [
            // {
            //     id: 1,
            //     name: '有机肥料',
            //     price: '¥220',
            //     badge: '政府背书',
            //     image: '/static/images/codefun/6082011896d83113283c720e943a4999.png',
            // },
            // {
            //     id: 2,
            //     name: '种子套装',
            //     price: '¥65',
            //     badge: '政府背书',
            //     image: '/static/images/codefun/e812ea5af6105a808af058cb0796b7ee.png',
            // },
            // {
            //     id: 3,
            //     name: '复合肥',
            //     price: '¥125',
            //     badge: '政府背书',
            //     image: '/static/images/codefun/7a4ec325d59361d6716c2ec1394550bb.png',
            // },
            // {
            //     id: 4,
            //     name: '养殖饲料',
            //     price: '¥65',
            //     badge: '政府背书',
            //     image: '/static/images/codefun/e1d1e83ba1f6592210e646c5b6ca5b53.png',
            // },
        ],

        // 农机服务
        farmMachineryServices: [
            {
                id: 1,
                image: '/static/images/codefun/e9d22bb18119b11750e4ac8206873fed.png',
                title: '找农机',
                description: '谁家农机闲着？急用！',
                actionText: '去找农机',
                actionImage: '/static/images/codefun/26a0e2c4b4289791cb8aa94f57e5fead.png',
                bgColor: '#fff7ec',
            },
            {
                id: 2,
                image: '/static/images/codefun/7e9e9f3d417af907691d5c49986b0437.png',
                title: '干农活',
                description: '我有农机具，接个活！',
                actionText: '去找农机',
                actionImage: '/static/images/codefun/296e5d1e691ccb3507907c50da02c2ae.png',
                bgColor: '#f5fcff',
            },
        ],

        // 品牌策划
        machineryCases: [
            {
                id: 1,
                name: '绿鲜农场',
                image: '/static/images/codefun/7d1feb7eb973f087dcabf21b283162bc.png',
            },
            {
                id: 2,
                name: '山水有机',
                image: '/static/images/codefun/8d11e3cbcb918502bb6582a24cddb930.png',
            },
        ],

        // 农机服务类型
        machineryServiceTypes: [
            {
                id: 1,
                name: '包装设计',
                image: '/static/images/codefun/ddc5246c61923da3e926e67230daffd1.png',
            },
            {
                id: 2,
                name: '区域品牌',
                image: '/static/images/codefun/15c2bc548cf753d64ccb42b694f02ef5.png',
            },
            {
                id: 3,
                name: '地标申报',
                image: '/static/images/codefun/4c7a07198f2fefd52854cf70f21ac8b1.png',
            },
        ],

        // 技能培训日历
        trainingCalendar: {
            days: [],
            trainings: [],
        },
    })
    // 获取农资列表
    function getGoodsList() {
        NongzhiAPI.goodsList({
            pageNo: 1,
            pageSize: 4,
        }).then((res) => {
            console.log(res)
            const { records } = res
            pageData.agriculturalProducts = records
        })
    }

    // 查询服务列表
    function getServiceItems() {
        HomeAPI.zoneList({
            pageNo: 1,
            pageSize: 5,
            status: 1,
            type: 3,
        }).then((res) => {
            const { records } = res
            pageData.menuItems = [...records]
        })
    }

    // 菜单点击事件
    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',
                '/pages/agencyBookkeeping/index',
            ]
            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 onViewMoreFlexibleEmployment() {
        console.log('查看更多灵活用工业务')
        // 在这里添加具体的查看逻辑

        // 跳转到灵活用工界面
        Navigate.to('/pages/linghuoyonggong/linghuoyonggong')
    }

    // 助农金融产品点击事件
    function onFinancialProductClick(product: any) {
        console.log('点击助农金融产品:', product)
        // 在这里添加具体的产品点击逻辑

        // 跳转到助农金融界面
        if (product.name === '惠农贷') {
            Navigate.to('/pages/zhunongjinrong/zhunongjinrong?id=1')
        } else if (product.name === '灾害险') {
            Navigate.to('/pages/zhunongjinrong/zhunongjinrong?id=3')
        } else {
            Navigate.to('/pages/zhunongjinrong/zhunongjinrong')
        }
    }

    // 查看全部助农金融产品
    function onViewAllFinancialProducts() {
        console.log('查看全部助农金融产品')
        // 在这里添加具体的查看逻辑

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

    // 农资商品点击事件
    function onAgriculturalProductClick(product: any) {
        console.log('点击农资商品:', product)
        // 在这里添加具体的商品点击逻辑

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

    // 农机服务点击事件
    function onFarmMachineryServiceClick(service: any) {
        console.log('点击农机服务:', service)
        // 在这里添加具体的服务点击逻辑
        Navigate.to(`/pages/nongjifuwu/nongjifuwu?type=${service.id}`)
    }

    // 技能培训点击事件
    function onTrainingClick(training: any) {
        console.log('点击技能培训:', training)
        // 在这里添加具体的培训点击逻辑
    }

    // 查看全部农机案例
    function onViewAllMachineryCases() {
        console.log('查看全部农机案例')
        // 在这里添加具体的查看逻辑
    }
</script>

<template>
    <view class="codefun-flex-col page">
        <view class="codefun-flex-col">
            <view class="codefun-flex-col section">
                <view class="codefun-flex-col group_2">
                    <view class="codefun-flex-col">
                        <view class="codefun-flex-col">
                            <!-- <view class="codefun-flex-row codefun-items-center section_2">
                                <text class="codefun-shrink-0 font_2">岗位</text>
                                <text class="codefun-shrink-0 font_3 codefun-ml-2">{{
                                    pageData.jobInfo.jobCount
                                }}</text>
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-shrink-0 codefun-relative group_4 codefun-ml-2"
                                >
                                    <text class="font_2">个， 需求</text>
                                    <text class="font_3 pos_3">{{ pageData.jobInfo.demandCount }}</text>
                                    <text class="font_2 text_2 pos_4">人， 已匹配</text>
                                    <text class="font_3 pos_5">{{ pageData.jobInfo.matchedCount }}</text>
                                    <text class="font_2 pos_6">人</text>
                                </view>
                            </view> -->
                            <view class="codefun-flex-row equal-division section_3 codefun-mt-12">
                                <view
                                    v-for="(item, index) in pageData.menuItems"
                                    :key="item.id"
                                    class="codefun-flex-col codefun-items-center"
                                    :class="{
                                        'equal-division-item_1': index === 0,
                                        'equal-division-item_2 equal-division-item': index === 1,
                                        'equal-division-item_2 group_34': index === 2,
                                        'equal-division-item_9 group_35': index === 3,
                                        'equal-division-item_10 group_1': index === 4,
                                    }"
                                    @click="onMenuItemClick(item)"
                                >
                                    <image class="image_7" :src="item.icon_url" />
                                    <text class="fontsize_28" :class="`text_${item.id + 2} mt-13`">{{ item.name }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="codefun-flex-row codefun-justify-between codefun-items-baseline codefun-mt-24">
                        <text class="font_5 text_8">灵活用工</text>
                        <text class="font_6 text_9" @click="onViewMoreFlexibleEmployment">更多</text>
                    </view>
                </view>
            </view>
            <view class="codefun-flex-col group_8">
                <view class="codefun-flex-col section_4 flex gap-4">
                    <navigator
                        v-for="service in pageData.flexibleEmploymentServices"
                        :key="service.id"
                        :url="service.url"
                        hover-class="none"
                    >
                        <view class="codefun-flex-row codefun-justify-between codefun-items-center">
                            <view class="codefun-flex-row">
                                <image class="image_8" :src="service.image" />
                                <view class="codefun-flex-col codefun-items-start group_9 ml-11">
                                    <text class="font_7">{{ service.title }}</text>
                                    <text class="font_9 text_11 mt-11">{{ service.description }}</text>
                                </view>
                            </view>
                            <view
                                class="codefun-flex-col codefun-justify-start codefun-items-center"
                                :class="{
                                    'text-wrapper_1': service.id === 1,
                                    'text-wrapper': service.id === 2,
                                    'text-wrapper_15': service.id === 3,
                                }"
                            >
                                <text class="font_8" :class="`text_${9 + service.id}`">{{ service.actionText }}</text>
                            </view>
                        </view>
                    </navigator>
                </view>
                <view class="codefun-flex-col codefun-mt-24">
                    <view class="codefun-flex-row codefun-justify-between codefun-items-center group_11">
                        <text class="font_5 text_18">助农金融</text>
                        <text class="font_6 text_19" @click="onViewAllFinancialProducts">全部</text>
                    </view>
                    <view class="codefun-flex-row equal-division_2 section_1">
                        <template v-for="(product, index) in pageData.financialProducts" :key="product.id">
                            <view
                                class="codefun-flex-col group_12"
                                :class="{
                                    group_36: product.id === 1,
                                    group_32: product.id === 2,
                                    group_33: product.id === 3,
                                }"
                                @click="onFinancialProductClick(product)"
                            >
                                <image class="codefun-self-center image_10" :src="product.image" />
                                <template v-if="product.name">
                                    <text class="codefun-self-center font_11" :class="`text_${19 + product.id}`">{{
                                        product.name
                                    }}</text>
                                    <text class="codefun-self-center font_11">{{ product.subName }}</text>
                                </template>
                                <template v-else>
                                    <text class="codefun-self-stretch font_11 text_22">{{ product.description }}</text>
                                </template>
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch"
                                    :class="{
                                        'text-wrapper_2 view_1': product.id === 1,
                                        'text-wrapper_14': product.id === 2,
                                        'text-wrapper_2 view_2': product.id === 3,
                                    }"
                                >
                                    <text class="font_12" :class="`text_${24 + product.id}`">{{
                                        product.actionText
                                    }}</text>
                                </view>
                            </view>
                            <view
                                v-if="index < pageData.financialProducts.length - 1"
                                class="section_5 horiz-divider"
                            />
                        </template>
                    </view>
                </view>
                <view class="codefun-flex-col codefun-mt-24">
                    <text class="codefun-self-start font_5 text_26">农资交易</text>
                    <view class="codefun-flex-col codefun-self-stretch section_6 codefun-mt-16">
                        <view class="grid">
                            <view
                                v-for="product in pageData.agriculturalProducts"
                                :key="product.id"
                                class="codefun-flex-col grid-item_3"
                                @click="onAgriculturalProductClick(product)"
                            >
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-stretch section_10"
                                    :style="{
                                    'background-image': `url(${product.image})`,
                                }"
                                >
                                    <view
                                        class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3"
                                    >
                                        <text class="font_13">{{ product.labels_dictText.split(',')[0] }}</text>
                                    </view>
                                </view>
                                <text
                                    class="codefun-self-start font text_27 codefun-mt-10 ellipsis"
                                    style="font-size: 28rpx"
                                    >{{ product.name }}</text
                                >
                                <text class="codefun-self-start font_1 text_27 codefun-mt-10" style="font-size: 28rpx"
                                    >￥{{ product.sellPrice }}</text
                                >
                            </view>
                        </view>
                        <view
                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4 codefun-mt-14 !hidden"
                        >
                            <text class="font_15 text_29">作业预约</text>
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-col codefun-mt-24">
                    <text class="codefun-self-start font_5">一站式解决农机问题</text>
                    <view class="codefun-flex-col codefun-self-stretch section_11">
                        <view class="codefun-flex-row equal-division_3">
                            <view
                                v-for="service in pageData.farmMachineryServices"
                                :key="service.id"
                                class="codefun-flex-col equal-division-item_3"
                                :class="{ section_12: service.id === 1, 'section_13 ml-11': service.id === 2 }"
                                @click="onFarmMachineryServiceClick(service)"
                            >
                                <view class="codefun-flex-row codefun-items-center codefun-self-stretch">
                                    <image class="image_11" :src="service.image" />
                                    <text class="font_5 text_33 ml-7">{{ service.title }}</text>
                                </view>
                                <text
                                    class="codefun-self-start font_10"
                                    :class="`text_${31 + service.id} codefun-mt-10`"
                                    >{{ service.description }}</text
                                >
                                <view
                                    class="codefun-flex-row codefun-justify-end codefun-items-center codefun-self-stretch"
                                    :class="{
                                        'group_13 codefun-mt-10': service.id === 1,
                                        'codefun-mt-10': service.id === 2,
                                    }"
                                >
                                    <image
                                        class="image_12"
                                        :class="{ image_13: service.id === 1, image_14: service.id === 2 }"
                                        :src="service.actionImage"
                                    />
                                    <text class="font_10" :class="`text_${33 + service.id}`">{{
                                        service.actionText
                                    }}</text>
                                </view>
                            </view>
                        </view>
                        <view
                            class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-stretch text-wrapper_4 codefun-mt-14"
                            @click="Navigate.to('/pages/nongjifuwu/nongjifuwu')"
                        >
                            <text class="font_15 text_29">作业预约</text>
                        </view>
                        <text class="codefun-self-center font_10 text_36 codefun-mt-14">紧急报修30分钟响应</text>
                    </view>
                    <view
                        class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group_14"
                    >
                        <text class="font_5">品牌策划</text>
                        <!-- <text class="font_6 text_37" @click="onViewAllMachineryCases">全部案例</text> -->
                    </view>
                    <view class="codefun-flex-col codefun-self-stretch section_14">
                        <view class="codefun-flex-row">
                            <view
                                v-for="item in pageData.machineryCases"
                                :key="item.id"
                                class="codefun-flex-col codefun-justify-start equal-division-item_3"
                                :class="{
                                    section_15: item.id === 1,
                                    'section_16 ml-11': item.id === 2,
                                }"
                            >
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5"
                                >
                                    <text class="font_16">{{ item.name }}</text>
                                </view>
                            </view>
                        </view>
                        <view class="codefun-flex-col group_15 codefun-mt-24">
                            <view class="codefun-flex-row codefun-justify-between codefun-items-center group_16">
                                <view
                                    v-for="serviceType in pageData.machineryServiceTypes"
                                    :key="serviceType.id"
                                    class="codefun-flex-col codefun-justify-start codefun-items-center image-wrapper"
                                    :class="{ view: serviceType.id === 3 }"
                                >
                                    <image
                                        class="image_16"
                                        :class="{ image_15: serviceType.id !== 1 }"
                                        :src="serviceType.image"
                                    />
                                </view>
                            </view>
                            <view class="codefun-flex-row codefun-justify-between codefun-mt-12">
                                <view class="codefun-flex-row codefun-items-center">
                                    <text class="font_17 text_38">包装设计</text>
                                    <image
                                        class="codefun-shrink-0 image ml-23"
                                        src="/static/images/codefun/b31cf305e90b1547bca2725e5a2ea5be.png"
                                    />
                                </view>
                                <view class="codefun-flex-row codefun-items-center">
                                    <text class="font_17">区域品牌</text>
                                    <image
                                        class="codefun-shrink-0 image ml-23"
                                        src="/static/images/codefun/b31cf305e90b1547bca2725e5a2ea5be.png"
                                    />
                                </view>
                                <text class="font_17 text_39">地标申报</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-col codefun-mt-24">
                    <view class="codefun-flex-col codefun-self-stretch codefun-mt-18">
                        <view class="codefun-flex-col codefun-justify-start section_17">
                            <view class="codefun-flex-row equal-division_4">
                                <view
                                    v-for="day in pageData.trainingCalendar.days"
                                    :key="day.id"
                                    class="codefun-flex-col equal-division-item_4"
                                    :class="{
                                        group_17: day.id === 1,
                                        group_21: day.id === 2,
                                        group_18: day.id === 3,
                                        group_23: day.id === 4,
                                        group_24: day.id === 5,
                                        group_25: day.id === 6,
                                        group_26: day.id === 7,
                                    }"
                                >
                                    <text
                                        class="codefun-self-start font_10"
                                        :class="{ font_6: day.active, text_41: day.active }"
                                        >{{ day.month }}</text
                                    >
                                    <text
                                        class="codefun-self-center font_18"
                                        :class="`text_${41 + day.id} ${day.id === 3 ? 'mt-7' : 'codefun-mt-6'}`"
                                        >{{ day.day }}</text
                                    >
                                    <view v-if="day.active" class="codefun-self-start section_18 mt-7" />
                                </view>
                            </view>
                        </view>
                        <template v-for="training in pageData.trainingCalendar.trainings" :key="training.id">
                            <view
                                v-if="training.badgeType !== 'blue'"
                                class="codefun-flex-row codefun-justify-between codefun-items-center codefun-relative"
                                :class="{
                                    'section_19 codefun-mt-10': training.id === 1 || training.id === 3,
                                }"
                                @click="onTrainingClick(training)"
                            >
                                <view class="codefun-flex-col">
                                    <view class="codefun-flex-row codefun-items-center codefun-self-stretch">
                                        <text class="font_19 text_49">{{ training.time }}</text>
                                        <text class="font_20 text_49" :class="`text_${49 + training.id} ml-15`">{{
                                            training.title
                                        }}</text>
                                    </view>
                                    <text
                                        class="codefun-self-center font_21 text_49"
                                        :class="`text_${51 + training.id} mt-11`"
                                        >{{ training.description }}</text
                                    >
                                </view>
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_6"
                                >
                                    <text class="font_8" :class="`text_${50 + training.id}`">{{
                                        training.actionText
                                    }}</text>
                                </view>
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-items-center"
                                    :class="{
                                        'text-wrapper_7 pos_7': training.id === 1,
                                        'text-wrapper_10 pos_8': training.id === 3,
                                    }"
                                >
                                    <text class="font_13" :class="`text_${52 + training.id}`">{{
                                        training.badge
                                    }}</text>
                                </view>
                            </view>
                            <view v-else class="codefun-flex-row codefun-justify-between section_20 codefun-mt-10">
                                <view class="codefun-flex-col codefun-self-center">
                                    <view class="codefun-flex-row codefun-items-center">
                                        <text class="font_19 text_49">{{ training.time }}</text>
                                        <text class="font_20 text_49 text_59 ml-15">{{ training.title }}</text>
                                    </view>
                                    <view class="codefun-flex-row codefun-items-end group_27 codefun-mt-8">
                                        <view
                                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_9"
                                        >
                                            <text class="font_13 text_56">{{ training.badge }}</text>
                                        </view>
                                        <text class="font_9 text_49 text_57 codefun-ml-28">{{
                                            training.description
                                        }}</text>
                                    </view>
                                </view>
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-start text-wrapper_8"
                                >
                                    <text class="font_6 text_55">{{ training.actionText }}</text>
                                </view>
                            </view>
                        </template>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
    .ellipsis {
        width: 80%;
    }
    .ml-5 {
        margin-left: 10rpx;
    }
    .mt-15 {
        margin-top: 30rpx;
    }
    .mt-13 {
        margin-top: 26rpx;
    }
    .mt-19 {
        margin-top: 38rpx;
    }
    .ml-7 {
        margin-left: 14rpx;
    }
    .ml-11 {
        margin-left: 22rpx;
    }
    .ml-23 {
        margin-left: 46rpx;
    }
    .mt-7 {
        margin-top: 14rpx;
    }
    .mt-11 {
        margin-top: 22rpx;
    }
    .ml-15 {
        margin-left: 30rpx;
    }
    .mt-21 {
        margin-top: 42rpx;
    }
    .mt-5 {
        margin-top: 10rpx;
    }
    .page {
        background-color: #e6f5e8;
        mix-blend-mode: NOTTHROUGH;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        height: auto !important;
        padding-bottom: 20rpx;

        .section {
            padding: 0 28rpx 30rpx 28rpx;
            background-image: url('/static/images/codefun/7a5dc4ee864fe55da98b41c14ee3b931.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            .group {
                padding-left: 16rpx;
                .image_2 {
                    border-radius: 64rpx;
                    width: 108rpx;
                    height: 42rpx;
                }
                .image_3 {
                    mix-blend-mode: NOTTHROUGH;
                    width: 34rpx;
                    height: 22rpx;
                }
                .image_4 {
                    mix-blend-mode: NOTTHROUGH;
                    width: 30rpx;
                    height: 22rpx;
                }
                .image_5 {
                    width: 48rpx;
                    height: 22rpx;
                }
            }
            .group_2 {
                .group_3 {
                    padding: 9.04rpx 0 5.46rpx;
                    .text {
                        color: #ffffffe6;
                        line-height: 29.5rpx;
                    }
                    .image_6 {
                        width: 44rpx;
                        height: 44rpx;
                    }
                    .pos_2 {
                        position: absolute;
                        right: 1.12rpx;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
                .section_2 {
                    padding: 22.5rpx 33.06rpx 13.96rpx;
                    background-color: #fff7ec;
                    border-radius: 16rpx;
                    mix-blend-mode: NOTTHROUGH;
                    .font_2 {
                        font-size: 28rpx;
                        line-height: 40rpx;
                        color: #000000;
                    }
                    .font_3 {
                        font-size: 28rpx;
                        line-height: 40rpx;
                        color: #fc8145;
                    }
                    .group_4 {
                        margin-right: 186.54rpx;
                        padding-bottom: 3.38rpx;
                        width: 355.96rpx;
                        .pos_3 {
                            position: absolute;
                            left: 131rpx;
                            top: 0;
                        }
                        .text_2 {
                            width: 183rpx;
                        }
                        .pos_4 {
                            position: absolute;
                            right: -18rpx;
                            top: 0;
                        }
                        .pos_5 {
                            position: absolute;
                            right: -39rpx;
                            top: 0;
                        }
                        .pos_6 {
                            position: absolute;
                            right: -80rpx;
                        }
                    }
                }
                .equal-division {
                    position: relative;
                    .equal-division-item_1 {
                        padding: 10rpx 0 10rpx;
                        width: 134rpx;
                        .text_3 {
                            line-height: 22.12rpx;
                        }
                    }
                    .equal-division-item_2 {
                        margin-left: 0;
                        .text_4 {
                            line-height: 22.34rpx;
                        }
                        .text_5 {
                            line-height: 22.42rpx;
                        }
                    }
                    .equal-division-item {
                        padding: 10rpx 0 10.1rpx;
                        width: 134rpx;
                    }
                    .image_7 {
                        width: 96rpx;
                        height: 96rpx;
                    }
                    .font_4 {
                        font-size: 24rpx;
                        line-height: 20.84rpx;
                        color: #1d2129;
                    }
                    .group_34 {
                        padding: 10rpx 0 10.04rpx;
                        width: 134rpx;
                    }
                    .equal-division-item_9 {
                        // position: absolute;
                        // right: 147rpx;
                        // top: 6rpx;
                        .text_6 {
                            line-height: 22.12rpx;
                        }
                    }
                    .group_35 {
                        padding: 10rpx 0 10.12rpx;
                        width: 134rpx;
                    }
                    .equal-division-item_10 {
                        // position: absolute;
                        // right: 13rpx;
                        // top: 6rpx;
                        .text_7 {
                            line-height: 22.18rpx;
                        }
                    }
                    .group_1 {
                        padding: 10rpx 0 10.1rpx;
                        width: 134rpx;
                    }
                }
                .section_3 {
                    padding: 16rpx 12rpx 16rpx;
                    background-color: #ffffff;
                    border-radius: 16rpx;
                    mix-blend-mode: NOTTHROUGH;
                }
                .text_8 {
                    line-height: 29.5rpx;
                }
                .text_9 {
                    line-height: 22.18rpx;
                }
            }
        }
        .group_8 {
            padding: 4rpx 25.38rpx 0 28rpx;
            .section_4 {
                margin-right: 2.62rpx;
                padding: 30rpx 24rpx 24rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                .image_8 {
                    border-radius: 40rpx;
                    width: 80rpx;
                    height: 80rpx;
                }
                .group_9 {
                    margin-top: 6.68rpx;
                    margin-bottom: 3.48rpx;
                    .text_11 {
                        line-height: 22.24rpx;
                    }
                }
                .text-wrapper_1 {
                    padding: 14.2rpx 0 11.56rpx;
                    background-color: #5db66f;
                    border-radius: 400rpx;
                    mix-blend-mode: NOTTHROUGH;
                    width: 136rpx;
                    height: 48rpx;
                    .text_10 {
                        line-height: 22.24rpx;
                    }
                }
                .image_9 {
                    border-radius: 40rpx;
                    mix-blend-mode: NOTTHROUGH;
                    width: 80rpx;
                    height: 80rpx;
                }
                .group_10 {
                    margin-top: 6.54rpx;
                    margin-bottom: 3.52rpx;
                    .text_12 {
                        line-height: 25.92rpx;
                    }
                    .text_14 {
                        line-height: 22.22rpx;
                    }
                }
                .font_7 {
                    font-size: 28rpx;
                    line-height: 25.9rpx;
                    color: #333333;
                }
                .text-wrapper {
                    padding: 14.28rpx 0 11.64rpx;
                    background-color: #5db66f;
                    border-radius: 400rpx;
                    mix-blend-mode: NOTTHROUGH;
                    width: 136rpx;
                    height: 48rpx;
                    .text_13 {
                        line-height: 22.08rpx;
                    }
                }
                .text_15 {
                    line-height: 26.04rpx;
                }
                .text_17 {
                    line-height: 22.32rpx;
                }
                .text-wrapper_15 {
                    padding: 14.26rpx 0 11.42rpx;
                    background-color: #5db66f;
                    border-radius: 400rpx;
                    mix-blend-mode: NOTTHROUGH;
                    width: 136rpx;
                    height: 48rpx;
                    .text_16 {
                        line-height: 22.32rpx;
                    }
                }
            }
            .group_11 {
                padding-bottom: 31.42rpx;
                .text_18 {
                    line-height: 29.8rpx;
                }
                .text_19 {
                    margin-right: 32rpx;
                    line-height: 22.3rpx;
                }
            }
            .equal-division_2 {
                margin-right: 2.62rpx;
                .group_12 {
                    flex: 1 1 231.34rpx;
                    .image_10 {
                        width: 64rpx;
                        height: 64rpx;
                    }
                    .font_11 {
                        font-size: 28rpx;
                        line-height: 48rpx;
                        color: #333333;
                    }
                    .text_20 {
                        margin-top: 18.6rpx;
                    }
                    .text-wrapper_2 {
                        padding: 14.28rpx 0 11.64rpx;
                        background-color: #5db66f26;
                        border-radius: 400rpx;
                        mix-blend-mode: NOTTHROUGH;
                        .text_25 {
                            line-height: 22.08rpx;
                        }
                    }
                    .view_1 {
                        margin-top: 13.4rpx;
                    }
                    .text_21 {
                        margin-top: 18.5rpx;
                    }
                    .text-wrapper_14 {
                        margin-top: 13.5rpx;
                        padding: 14.28rpx 0 11.56rpx;
                        background-color: #5db66f26;
                        border-radius: 400rpx;
                        mix-blend-mode: NOTTHROUGH;
                        .text_24 {
                            line-height: 22.16rpx;
                        }
                    }
                    .font_12 {
                        font-size: 24rpx;
                        line-height: 20.84rpx;
                        color: #16a34a;
                    }
                    .text_22 {
                        margin: 18.72rpx 3.54rpx 0 2.46rpx;
                        text-align: center;
                    }
                    .view_2 {
                        margin-top: 13.3rpx;
                    }
                }
                .group_36 {
                    padding: 10rpx 47.34rpx 10rpx 48rpx;
                }
                .section_5 {
                    flex-shrink: 0;
                    margin: 22rpx 0 14rpx;
                }
                .horiz-divider {
                    background-color: #fafafa;
                    width: 2rpx;
                    height: 224rpx;
                }
                .group_32 {
                    padding: 10rpx 46.66rpx 10rpx 48.66rpx;
                }
                .group_33 {
                    padding: 10rpx 46rpx 10rpx 49.34rpx;
                }
            }
            .section_1 {
                padding: 26rpx 0 18rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
            }
            .text_26 {
                line-height: 29.88rpx;
            }
            .section_6 {
                margin-right: 2.62rpx;
                padding: 24rpx 24rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                .grid {
                    height: 608rpx;
                    display: grid;
                    grid-template-rows: repeat(2, minmax(0, 1fr));
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    row-gap: 26rpx;
                    column-gap: 28rpx;
                    .grid-item_1 {
                        padding-bottom: 18.74rpx;
                        background-color: #f9fafb;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        .section_7 {
                            padding: 20rpx 0 130rpx;
                            border-radius: 16rpx 16rpx 0rpx 0rpx;
                            background-image: url('/static/images/codefun/6082011896d83113283c720e943a4999.png');
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                        }
                        .text_27 {
                            margin-left: 25.28rpx;
                            line-height: 29.48rpx;
                        }
                        .font_1 {
                            font-size: 32rpx;
                            line-height: 23.38rpx;
                            color: #5db66f;
                        }
                        .text_64 {
                            margin-left: 24.24rpx;
                        }
                        .section_9 {
                            padding: 20rpx 0 130rpx;
                            border-radius: 16rpx 16rpx 0rpx 0rpx;
                            background-image: url('/static/images/codefun/7a4ec325d59361d6716c2ec1394550bb.png');
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                        }
                        .text_67 {
                            margin-left: 27.06rpx;
                        }
                        .text_65 {
                            margin-left: 26.24rpx;
                        }
                    }
                    .grid-item {
                        padding-bottom: 18.74rpx;
                        background-color: #f9fafb;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        .section_8 {
                            padding: 20rpx 0 130rpx;
                            border-radius: 16rpx 16rpx 0rpx 0rpx;
                            background-image: url('/static/images/codefun/e812ea5af6105a808af058cb0796b7ee.png');
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                        }
                        .text_27 {
                            margin-left: 25.28rpx;
                            line-height: 29.48rpx;
                        }
                        .font_1 {
                            font-size: 32rpx;
                            line-height: 23.38rpx;
                            color: #5db66f;
                        }
                        .text_1 {
                            margin-left: 24.74rpx;
                            line-height: 29.6rpx;
                        }
                        .text_28 {
                            margin-left: 24.24rpx;
                        }
                    }
                    .text-wrapper_3 {
                        padding: 5.72rpx 0 5.58rpx;
                        background-color: #4cd964;
                        border-radius: 0rpx 8rpx 8rpx 0rpx;
                        mix-blend-mode: NOTTHROUGH;
                        width: 108rpx;
                    }
                    .grid-item_3 {
                        padding-bottom: 18.74rpx;
                        background-color: #f9fafb;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        .section_10 {
                            padding: 20rpx 0 130rpx;
                            border-radius: 16rpx 16rpx 0rpx 0rpx;
                            // background-image: url('/static/images/codefun/e1d1e83ba1f6592210e646c5b6ca5b53.png');
                            background-size: 100% 100%;
                            background-repeat: no-repeat;
                        }
                        .text_27 {
                            margin-left: 25.28rpx;
                            line-height: 29.48rpx;
                        }
                        .font_1 {
                            font-size: 32rpx;
                            line-height: 23.38rpx;
                            color: #5db66f;
                        }
                        .text_68 {
                            margin-left: 27.12rpx;
                            line-height: 29.88rpx;
                        }
                        .text_66 {
                            margin-left: 26.24rpx;
                        }
                    }
                    .font_14 {
                        font-size: 32rpx;
                        line-height: 23.08rpx;
                        color: #5db66f;
                    }
                }
            }
            .section_11 {
                margin-right: 2.62rpx;
                margin-top: 31.4rpx;
                padding: 28rpx 24rpx 23.44rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                .equal-division_3 {
                    align-self: stretch;
                    .section_12 {
                        padding: 20rpx 20rpx 18rpx;
                        background-color: #fff7ec;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        height: 182rpx;
                    }
                    .section_13 {
                        padding: 20rpx 20rpx 18rpx;
                        background-color: #f5fcff;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        height: 182rpx;
                    }
                }
                .text_36 {
                    line-height: 22.44rpx;
                }
            }
            .font_10 {
                font-size: 24rpx;
                line-height: 20.84rpx;
                color: #999999;
            }
            .text-wrapper_4 {
                padding: 24.68rpx 0 21.58rpx;
                background-color: #5db66f;
                border-radius: 400rpx;
                mix-blend-mode: NOTTHROUGH;
                .font_15 {
                    font-size: 28rpx;
                    line-height: 25.9rpx;
                    color: #ffffff;
                }
                .text_29 {
                    line-height: 25.74rpx;
                }
            }
            .group_14 {
                padding: 43.04rpx 0 35.4rpx;
                .text_37 {
                    line-height: 22.36rpx;
                }
            }
            .section_14 {
                margin-right: 2.62rpx;
                padding: 24rpx 24rpx 56.28rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                .section_15 {
                    padding-top: 96rpx;
                    background-image: url('/static/images/codefun/7d1feb7eb973f087dcabf21b283162bc.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    height: 200rpx;
                }
                .section_16 {
                    padding-top: 96rpx;
                    background-image: url('/static/images/codefun/8d11e3cbcb918502bb6582a24cddb930.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    height: 200rpx;
                }
                .group_15 {
                    padding-left: 40.98rpx;
                    padding-right: 38.42rpx;
                    .group_16 {
                        padding: 0 31.02rpx;
                        .image-wrapper {
                            width: 48rpx;
                            .image_16 {
                                width: 38rpx;
                                height: 38rpx;
                            }
                            .image_15 {
                                width: 48rpx;
                                height: 48rpx;
                            }
                        }
                        .view {
                            margin-right: 5.9rpx;
                        }
                    }
                    .font_17 {
                        font-size: 28rpx;
                        line-height: 25.9rpx;
                        color: #000000;
                    }
                    .text_38 {
                        line-height: 26.04rpx;
                    }
                    .image {
                        mix-blend-mode: NOTTHROUGH;
                        width: 12rpx;
                        height: 22rpx;
                    }
                    .text_39 {
                        line-height: 25.82rpx;
                    }
                }
            }
            .equal-division-item_3 {
                flex: 1 1 312rpx;
                .image_11 {
                    border-radius: 50%;
                    width: 48rpx;
                    height: 48rpx;
                }
                .text_30 {
                    color: #29221d;
                    line-height: 29.5rpx;
                }
                .text_32 {
                    line-height: 22.36rpx;
                }
                .group_13 {
                    padding: 0 5.28rpx;
                    .image_13 {
                        margin-right: -126.72rpx;
                    }
                    .text_34 {
                        margin-right: 163.44rpx;
                        color: #fb8146;
                        line-height: 22.12rpx;
                    }
                }
                .text_31 {
                    color: #1d2229;
                    line-height: 29.5rpx;
                }
                .text_33 {
                    line-height: 22.76rpx;
                }
                .image_14 {
                    margin-right: -126.72rpx;
                }
                .text_35 {
                    margin-right: 172.72rpx;
                    color: #4f97f3;
                    line-height: 22.12rpx;
                }
                .text-wrapper_5 {
                    padding: 55.04rpx 0 19.4rpx;
                    background-image: linear-gradient(180.1deg, #5db66f00 0.2%, #5db66f 99.8%);
                    border-radius: 0rpx 0rpx 16rpx 16rpx;
                    mix-blend-mode: NOTTHROUGH;
                    .font_16 {
                        font-size: 32rpx;
                        line-height: 29.56rpx;
                        color: #ffffff;
                    }
                }
            }
            .text_40 {
                line-height: 29.64rpx;
            }
            .section_17 {
                margin-right: 2.62rpx;
                padding-bottom: 2.12rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                .equal-division_4 {
                    padding: 0 14.68rpx;
                    .equal-division-item_4 {
                        flex: 1 1 94.66rpx;
                        .font_18 {
                            font-size: 28rpx;
                            line-height: 20.84rpx;
                            font-weight: 600;
                            color: #000000;
                        }
                        .text_42 {
                            line-height: 20.46rpx;
                        }
                        .text_43 {
                            line-height: 20rpx;
                        }
                        .text_41 {
                            margin-left: 9.34rpx;
                        }
                        .text_44 {
                            color: #5db66f;
                            line-height: 20.18rpx;
                        }
                        .section_18 {
                            background-color: #5db66f;
                            mix-blend-mode: NOTTHROUGH;
                            width: 64rpx;
                            height: 8rpx;
                        }
                        .text_45 {
                            line-height: 20.46rpx;
                        }
                        .text_46 {
                            line-height: 20rpx;
                        }
                        .text_47 {
                            line-height: 20.28rpx;
                        }
                        .text_48 {
                            margin-left: 12.98rpx;
                            line-height: 20.28rpx;
                        }
                    }
                    .group_17 {
                        padding: 19.58rpx 10.66rpx 22.02rpx;
                    }
                    .group_21 {
                        padding: 19.58rpx 10rpx 22.32rpx;
                    }
                    .group_18 {
                        padding-top: 19.58rpx;
                    }
                    .group_23 {
                        padding: 19.58rpx 8.66rpx 22.02rpx;
                    }
                    .group_24 {
                        padding: 19.58rpx 8rpx 22.32rpx;
                    }
                    .group_25 {
                        padding: 19.58rpx 7.36rpx 22.04rpx;
                    }
                    .group_26 {
                        padding: 19.58rpx 6.7rpx 22.04rpx;
                    }
                }
            }
            .section_19 {
                margin-right: 2.62rpx;
                padding: 34.92rpx 24rpx 35.58rpx 25.8rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                .text_50 {
                    line-height: 29.64rpx;
                }
                .font_21 {
                    font-size: 24rpx;
                    line-height: 20.84rpx;
                    color: #666666;
                }
                .text_52 {
                    line-height: 22.28rpx;
                }
                .text-wrapper_6 {
                    padding: 14.24rpx 0 11.56rpx;
                    background-color: #5db66f;
                    border-radius: 1998rpx;
                    mix-blend-mode: NOTTHROUGH;
                    width: 160rpx;
                    height: 48rpx;
                    .text_51 {
                        line-height: 22.2rpx;
                    }
                }
                .text-wrapper_7 {
                    padding: 11.92rpx 0 9.68rpx;
                    background-image: linear-gradient(139.9deg, #f5a779 15%, #fc7e41 84.4%);
                    border-radius: 19998rpx;
                    mix-blend-mode: NOTTHROUGH;
                    width: 40rpx;
                    .text_53 {
                        line-height: 18.4rpx;
                    }
                }
                .pos_7 {
                    position: absolute;
                    left: 48rpx;
                    top: 80rpx;
                }
                .text-wrapper_10 {
                    padding: 12.44rpx 0 10.24rpx;
                    background-image: linear-gradient(139.9deg, #41e762 18.4%, #3dbc5f 74.8%);
                    border-radius: 19998rpx;
                    mix-blend-mode: NOTTHROUGH;
                    width: 40rpx;
                    .text_58 {
                        line-height: 17.32rpx;
                    }
                }
                .pos_8 {
                    position: absolute;
                    left: 44rpx;
                    top: 80rpx;
                }
            }
            .font_8 {
                font-size: 24rpx;
                line-height: 20.84rpx;
                color: #ffffff;
            }
            .font_13 {
                font-size: 20rpx;
                line-height: 18.7rpx;
                color: #ffffff;
            }
            .section_20 {
                margin-right: 2.62rpx;
                padding: 34.92rpx 24rpx 24rpx 26.66rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                .text_59 {
                    line-height: 29.64rpx;
                }
                .group_27 {
                    padding: 0 17.34rpx;
                    .text-wrapper_9 {
                        padding: 11.92rpx 0 9.64rpx;
                        background-image: linear-gradient(139.9deg, #4fc6fd 15%, #4f8ef1 84.4%);
                        border-radius: 19998rpx;
                        mix-blend-mode: NOTTHROUGH;
                        width: 40rpx;
                        height: 40rpx;
                        .text_56 {
                            line-height: 18.44rpx;
                        }
                    }
                    .text_57 {
                        margin-bottom: 3.5rpx;
                        line-height: 22.36rpx;
                    }
                }
                .text-wrapper_8 {
                    margin-top: 13.08rpx;
                    padding: 14.3rpx 0 11.58rpx;
                    background-color: #5db66f33;
                    border-radius: 1998rpx;
                    mix-blend-mode: NOTTHROUGH;
                    width: 160rpx;
                    height: 48rpx;
                    .text_55 {
                        line-height: 22.12rpx;
                    }
                }
            }
            .font_19 {
                font-size: 32rpx;
                line-height: 23.38rpx;
                color: #333333;
            }
            .text_49 {
                text-transform: uppercase;
            }
            .font_20 {
                font-size: 32rpx;
                line-height: 29.56rpx;
                color: #333333;
            }
            .font_9 {
                font-size: 24rpx;
                line-height: 20.84rpx;
                color: #6b7280;
            }
        }
        .font_5 {
            font-size: 32rpx;
            line-height: 29.56rpx;
            font-weight: 600;
            color: #333333;
        }
        .font_6 {
            font-size: 24rpx;
            line-height: 20.84rpx;
            color: #5db66f;
        }
        .font {
            font-size: 32rpx;
            line-height: 29.56rpx;
            color: #000000;
        }
        .equal-division_5 {
            padding: 10rpx 8.16rpx 14.66rpx;
            background-color: #ffffff;
            mix-blend-mode: NOTTHROUGH;
            border-top: solid 1rpx #e7e7e7;
            .group_19 {
                flex: 1 1 146.74rpx;
                .font_22 {
                    font-size: 20rpx;
                    line-height: 18.54rpx;
                    color: #666666;
                }
                .font_24 {
                    font-size: 20rpx;
                    line-height: 18.44rpx;
                    color: #666666;
                }
            }
            .equal-division-item_8 {
                padding: 12rpx 0 11.54rpx;
            }
            .group_29 {
                padding: 12rpx 0 10rpx;
            }
            .group_30 {
                padding: 12rpx 0 11.58rpx;
            }
            .group_31 {
                padding: 12rpx 0 11.38rpx;
            }
        }
        .image_12 {
            width: 32rpx;
            height: 32rpx;
        }
    }
</style>
