<script setup lang="ts">
    import { reactive } from 'vue'
    import { onPullDownRefresh, onReachBottom, onShow } from '@dcloudio/uni-app'
    import PriceDialog from './components/price-dialog.vue'
    import Navigate from '@/utils/page/navigate'
    import * as ChanxiaoAPI from '@/api/model/chanxiao'
    import { getText } from '@/utils/dict/area'

    // 下拉刷新
    onPullDownRefresh(() => {
        pageData.search.pageNo = 1
        if (pageData.currentTransactionTab === 1) {
            pageData.purchaseDemands = []
            getPurchaseList()
        }
        if (pageData.currentTransactionTab === 2) {
            pageData.supplyInfos = []
            getSupplyList()
        }
        setTimeout(function () {
            uni.stopPullDownRefresh()
            Message.toast('刷新成功')
        }, 1000)
    })
    onShow(() => {
        pageData.search.pageNo = 1
        if (pageData.currentTransactionTab === 1) {
            pageData.purchaseDemands = []
            getPurchaseList()
        }
        if (pageData.currentTransactionTab === 2) {
            pageData.supplyInfos = []
            getSupplyList()
        }
    })

    // 页面数据
    const pageData = reactive({
        // 顶部标题和搜索
        header: {
            title: '产销',
            bannerImage: '/static/images/codefun/8a063bccb4a75c449a7ba2a1adc8caaf.png',
        },

        // 分类标签
        categoryTabs: [
            { id: -1, name: '全部' },
            { id: 1, name: '蔬菜' },
            { id: 2, name: '水果' },
            { id: 3, name: '粮食' },
            { id: 4, name: '畜牧' },
            { id: 0, name: '其他' },
        ],

        // 采购/供应标签
        transactionTabs: [
            { id: 1, name: '供货列表' },
            { id: 2, name: '采购需求' },
        ],
        currentTransactionTab: 1,

        loading: false,
        search: {
            pageNo: 1,
            pageSize: 10,
            classify: null,
            auditStatus: 1,
        },
        // 新需求提醒
        newDemandNotice: {
            icon: '/static/images/codefun/48f77b33e9b33c48eda3cfc9708d8c28.png',
            text: '3 条新需求发布，点击刷新查看',
        },
        icons: {
            deadline: '/static/images/codefun/56353ebdea095baedbcb33fc53f68a03.png',
            location: '/static/images/codefun/c98744e63719b5413f260ec6a899ee20.png',
            quote: '/static/images/codefun/bcf6538c8728a2894c90d4463c4c9520.png',
        },

        // 采购需求列表
        purchaseDemands: [],
        total: 0,

        // 供应信息列表
        supplyInfos: [],

        // 渠道列表
        channels: [
            {
                text: '高品质、即时配送和沉浸式体验构建品牌护城河',
                icon: '/static/images/qudao/hema.png',
                iconLeft: '/static/images/qudao/hema-left.png',
                backgroundColor: '#DBF8FF',
                iconColor: '252772',
                textColor: '#282A74',
                link: '/pages/chanxiao/hema/hema',
            },
            {
                text: '“不卖隔夜肉”的社区短链模式主打极致新鲜',
                icon: '/static/images/qudao/qiandama.png',
                iconLeft: '/static/images/qudao/qiandama-left.png',
                backgroundColor: '#FFE8E8',
                iconColor: 'FE0000',
                textColor: '#540000',
                link: '/pages/chanxiao/qiandama/qiandama',
            },
            {
                text: '商品齐全物美价廉“美团运力”实现万物速达',
                icon: '/static/images/qudao/xiaoxiangchaoshi.png',
                iconLeft: '/static/images/qudao/xiaoxiangchaoshi-left.png',
                backgroundColor: '#E2FFDE',
                iconColor: '00C53B',
                textColor: '#024A18',
                link: '/pages/chanxiao/xiaoxiangchaoshi/xiaoxiangchaoshi',
            },
            {
                text: '无与伦比的源头价格和海量品类选择',
                icon: '/static/images/qudao/hongxing.png',
                iconLeft: '/static/images/qudao/hongxing-left.png',
                backgroundColor: '#F5DADD',
                iconColor: 'E70E30',
                textColor: '#570612',
                link: '/pages/chanxiao/hongxing/hongxing',
            },
            {
                text: '畜牧类采购需求大“猪肉垂直”的深度专家',
                icon: '/static/images/qudao/muyizhu.png',
                iconLeft: '/static/images/qudao/muyizhu-left.png',
                backgroundColor: '#C0D1C7',
                iconColor: '383838',
                textColor: '#223D27',
                link: '/pages/chanxiao/zhusiling/zhusiling',
            },
            {
                text: '区域性优势明显“区域深耕”织密本地网络',
                icon: '/static/images/qudao/caixianyi.png',
                iconLeft: '/static/images/qudao/caixianyi-left.png',
                backgroundColor: '#C4F2DE',
                iconColor: '14AE68',
                textColor: '#064529',
                link: '/pages/chanxiao/caixianyi/caixianyi',
            },
        ],
    })
    // 获取采购需求列表
    function getPurchaseList() {
        pageData.loading = true
        ChanxiaoAPI.purchaseList(pageData.search)
            .then((res) => {
                const { records, total } = res
                pageData.purchaseDemands = [...pageData.purchaseDemands, ...records]
                pageData.purchaseDemands = pageData.purchaseDemands.map((item) => ({
                    ...item,
                    location: getText(`${item.province},${item.city},${item.country}`, ' / '),
                }))
                pageData.total = total
            })
            .finally(() => {
                pageData.loading = false
            })
    }
    // 获取供应信息列表
    function getSupplyList() {
        pageData.loading = true
        ChanxiaoAPI.supplyList(pageData.search)
            .then((res) => {
                const { records, total } = res
                pageData.supplyInfos = [...pageData.supplyInfos, ...records]
                pageData.supplyInfos = pageData.supplyInfos.map((item) => ({
                    ...item,
                    location: getText(`${item.province},${item.city},${item.country}`, ' / '),
                }))
                pageData.total = total
            })
            .finally(() => {
                pageData.loading = false
            })
    }

    // 分类标签点击事件
    function onCategoryTabClick(tab: any) {
        // 在这里添加具体的分类标签点击逻辑
        if (tab.id === -1) {
            pageData.search.classify = null
        } else {
            pageData.search.classify = tab.id
        }
        pageData.search.pageNo = 1
        pageData.purchaseDemands = []
        pageData.supplyInfos = []
        if (pageData.currentTransactionTab === 1) getPurchaseList()
        if (pageData.currentTransactionTab === 2) getSupplyList()
    }

    // 采购/供应标签点击事件
    function onTransactionTabClick(tab: any) {
        // 在这里添加具体的采购/供应标签点击逻辑
        pageData.currentTransactionTab = tab.id
        pageData.search.pageNo = 1
        pageData.purchaseDemands = []
        pageData.supplyInfos = []
        if (pageData.currentTransactionTab === 1) getPurchaseList()
        if (pageData.currentTransactionTab === 2) getSupplyList()
    }

    // 新需求提醒点击事件
    // function onNewDemandNoticeClick() {
    //     console.log('点击新需求提醒')
    //     // 在这里添加具体的新需求提醒点击逻辑
    // }

    // 采购需求点击事件
    function onPurchaseDemandClick(demand: any) {
        console.log('点击采购需求:', demand)
        // 在这里添加具体的采购需求点击逻辑
        Navigate.to(`/pages/chanxiao/purchaseXuQiu?id=${demand.id}`)
    }

    const priceDialogRef = ref()
    // 立即报价点击事件
    function onQuoteClick(item: any) {
        console.log('点击立即报价:', item)
        // 在这里添加具体的立即报价点击逻辑
        priceDialogRef.value.open(item)
    }

    // 供应信息点击事件
    function onSupplyInfoClick(info: any) {
        console.log('点击供应信息:', info)
        // 在这里添加具体的供应信息点击逻辑
        Navigate.to(`/pages/chanxiao/supplyXuQiu?id=${info.id}`)
    }

    // 发布需求
    function handlePublish() {
        if (pageData.currentTransactionTab === 1) {
            Navigate.to('/pages/chanxiao/purchaseXuQiu')
            return
        }
        if (pageData.currentTransactionTab === 2) {
            Navigate.to('/pages/chanxiao/supplyXuQiu')
        }
    }

    onReachBottom(() => {
        console.log('触底了')
        if (pageData.currentTransactionTab === 1) {
            if (pageData.total <= pageData.purchaseDemands.length) return
            pageData.search.pageNo++
            getPurchaseList()
        }
        if (pageData.currentTransactionTab === 2) {
            if (pageData.total <= pageData.supplyInfos.length) return
            pageData.search.pageNo++
            getSupplyList()
        }
    })
</script>

<template>
    <view class="codefun-flex-col page">
        <view class="codefun-flex-col section">
            <view class="codefun-flex-col">
                <view class="codefun-flex-col codefun-self-stretch">
                    <view><image class="image_5" :src="pageData.header.bannerImage" /></view>
                    <view class="mt-4">
                        <view>多渠道展开资深合作</view>
                        <view>
                            <view
                                class="channel-list"
                                :style="`background: linear-gradient(to right, ${channel.backgroundColor} 0%, white 100%);`"
                                v-for="(channel, index) in pageData.channels"
                                :key="index"
                                @click="Navigate.to(channel.link)"
                            >
                                <view class="channel-list-left">
                                    <image class="channel-imgLeft" :src="channel.iconLeft" />
                                </view>
                                <view class="channel-list-center">
                                    <image
                                        class="channel-imgCenter"
                                        :style="
                                            channel.icon.indexOf('caixianyi') > 0 ? 'width: 120rpx; height: 50rpx' : ''
                                        "
                                        :src="channel.icon"
                                    />
                                    <text class="channel-text" :style="`color: ${channel.textColor}`">{{
                                        channel.text
                                    }}</text>
                                </view>
                                <view class="channel-list-right">
                                    <image
                                        class="w-28 h-28 channel-imgRight"
                                        :src="`/static/images/qudao/icon-${channel.iconColor}.svg`"
                                        mode="scaleToFill"
                                    />
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="codefun-mt-16 codefun-flex-row gap-1">
                        <view
                            v-for="tab in pageData.categoryTabs"
                            :key="tab.id"
                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper"
                            :class="[
                                { section_2: pageData.search.classify === tab.id },
                                {
                                    section_2:
                                        pageData.search.classify !== 0 && !pageData.search.classify && tab.id === -1,
                                },
                            ]"
                            @click="onCategoryTabClick(tab)"
                        >
                            <view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_2">
                                <text class="font text_2">{{ tab.name }}</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="codefun-flex-row section_3">
            <view
                v-for="tab in pageData.transactionTabs"
                :key="tab.id"
                class="codefun-flex-col codefun-justify-start codefun-items-center section_50p"
                :class="[pageData.currentTransactionTab === tab.id ? 'text-wrapper_3' : 'codefun-self-start']"
                @click="onTransactionTabClick(tab)"
            >
                <text class="font" :class="pageData.currentTransactionTab === tab.id ? 'text_17' : 'text_27'">
                    {{ tab.name }}
                </text>
            </view>
        </view>
        <view class="codefun-flex-col codefun-relative section_4">
            <!-- <view class="codefun-flex-row codefun-items-center section_5" @click="onNewDemandNoticeClick">
                <image class="codefun-shrink-0 image_6" :src="pageData.newDemandNotice.icon" />
                <text class="codefun-ml-12 font_2 text_10">{{ pageData.newDemandNotice.text }}</text>
            </view> -->

            <view
                v-if="pageData.currentTransactionTab === 2 && pageData.supplyInfos.length === 0"
                style="height: 528rpx"
            >
                <fui-empty src="/static/images/no-data.png" title="暂无数据" />
            </view>
            <!-- 供应信息列表 -->
            <template v-for="(info, index) in pageData.supplyInfos" :key="info.id">
                <view
                    v-show="pageData.currentTransactionTab === 2"
                    class="codefun-flex-row"
                    :class="[index === 0 ? 'group_10' : 'group_12']"
                    @click="onSupplyInfoClick(info)"
                >
                    <view
                        class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-center codefun-relative"
                        :class="index === 0 ? 'section_7' : 'image-wrapper view'"
                    >
                        <image class="image_7" :src="info.image" />
                        <!-- <view
                            v-if="info.tag.show"
                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_6"
                            :class="index === 0 ? 'pos_2' : ''"
                        >
                            <text class="font_3" :class="`text_${index === 0 ? 25 : 31}`">{{ info.tag.text }}</text>
                        </view> -->
                    </view>
                    <view
                        class="codefun-ml-12 codefun-flex-col codefun-flex-1"
                        :class="index === 0 ? 'codefun-self-start group_11' : ''"
                    >
                        <text class="codefun-self-start font_4" :class="index === 0 ? 'text_24' : ''">
                            {{ info.title }}
                        </text>
                        <text
                            v-if="info.productSpecs"
                            class="codefun-self-start font_2"
                            :class="index === 0 ? 'text_26 mt-11' : 'mt-11'"
                        >
                            {{ info.productSpecs }}
                        </text>
                        <view
                            class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch"
                            :class="index === 0 ? 'mt-11' : 'mt-11'"
                        >
                            <view class="codefun-flex-row">
                                <image class="codefun-shrink-0 image_9" :src="pageData.icons.location" />
                                <text class="codefun-ml-4 font_2" :class="`text_${index === 0 ? 27 : 30}`">{{
                                    info.location
                                }}</text>
                            </view>
                            <view
                                class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5"
                                @click.stop="onQuoteClick(info)"
                            >
                                <text class="font_9">立即报价</text>
                            </view>
                        </view>
                    </view>
                </view>
            </template>

            <!-- 采购需求列表 -->
            <view
                v-if="pageData.currentTransactionTab === 1 && pageData.purchaseDemands.length === 0"
                style="height: 528rpx"
            >
                <fui-empty src="/static/images/no-data.png" title="暂无数据" />
            </view>
            <view v-else>
                <template v-for="(demand, index) in pageData.purchaseDemands" :key="demand.id">
                    <view
                        v-show="pageData.currentTransactionTab === 1"
                        class="codefun-flex-row codefun-items-center my-3"
                        :class="[index === 0 ? 'group_2' : '', index === 1 ? 'group_6' : '']"
                        @click="onPurchaseDemandClick(demand)"
                    >
                        <view
                            class="codefun-flex-col codefun-justify-start codefun-items-center codefun-relative"
                            :class="index === 0 ? 'section_6' : 'image-wrapper'"
                        >
                            <image class="image_7" :src="demand.image" />
                            <!-- <view
                            v-if="demand.tag.show"
                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
                            :class="index === 0 ? 'pos' : ''"
                        >
                            <text class="font_3 text_11">{{ demand.tag.text }}</text>
                        </view> -->
                        </view>
                        <view class="codefun-ml-12 codefun-flex-col codefun-flex-1">
                            <text class="codefun-self-start font_4">{{ demand.title }}</text>
                            <view class="codefun-flex-row codefun-self-stretch mt-2" v-if="demand.deadline">
                                <image class="image_8" :src="pageData.icons.deadline" />
                                <text class="codefun-ml-4 font_2" :class="`text_${index === 0 ? 13 : 19}`">{{
                                    demand.deadline
                                }}</text>
                            </view>
                            <view class="codefun-flex-row codefun-self-stretch mt-2">
                                <image class="image_9" :src="pageData.icons.location" />
                                <text class="codefun-ml-4 font_2" :class="`text_${index === 0 ? 14 : 20}`">{{
                                    demand.location
                                }}</text>
                            </view>
                            <view class="codefun-self-start" :class="index === 0 ? 'group_4' : 'group_8'">
                                <text
                                    v-if="demand.priceStart || demand.priceEnd"
                                    class="font_6"
                                    :class="`text_${index === 0 ? 15 : 21}`"
                                    >¥</text
                                >
                                <text v-if="demand.priceStart || demand.priceEnd" class="font_5">{{
                                    `${demand.priceStart}-${demand.priceEnd}`
                                }}</text>
                                <text v-if="demand.unit" class="font_7" :class="`text_${index === 0 ? 16 : 22}`"
                                    >/{{ demand.unit }}</text
                                >
                            </view>
                        </view>
                    </view>
                    <view
                        v-show="pageData.currentTransactionTab === 1"
                        class="codefun-flex-row codefun-justify-between codefun-items-center"
                        :class="[index === 0 ? 'group_5' : '', index === 1 ? 'group_9' : '']"
                    >
                        <view class="codefun-flex-row codefun-items-center">
                            <image class="codefun-shrink-0 image_10" :src="pageData.icons.quote" />
                            <text
                                class="font_8"
                                :class="[index === 0 ? 'text_17' : 'text_23', index === 0 ? 'ml-5' : 'codefun-ml-4']"
                            >
                                {{ demand.supplyCounts }}人报价
                            </text>
                        </view>
                        <view
                            class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5"
                            @click.stop="onQuoteClick(demand)"
                        >
                            <text class="font_9">立即报价</text>
                        </view>
                    </view>
                    <!-- 分隔线 -->
                    <view class="divider" v-if="index < pageData.purchaseDemands.length - 1" />
                </template>
            </view>
        </view>
    </view>
    <fui-fab position="right" distance="30" bottom="150" width="96" @click="handlePublish">
        <view v-show="pageData.currentTransactionTab === 1" class="text-white text-center">
            <view class="fab-icon" />
            <view style="font-size: 24rpx">发布</view>
        </view>
        <view v-show="pageData.currentTransactionTab === 2" class="text-white text-center">
            <view class="fab-icon" />
            <view style="font-size: 24rpx">发布</view>
        </view>
    </fui-fab>

    <PriceDialog ref="priceDialogRef" />
    <fui-loading isFixed v-if="pageData.loading" backgroundColor="rgba(0, 0, 0, 0.4)" />
</template>

<style scoped lang="scss">
    .ml-7 {
        margin-left: 14rpx;
    }
    .ml-55 {
        margin-left: 110rpx;
    }
    .ml-5 {
        margin-left: 10rpx;
    }
    .mt-11 {
        margin-top: 22rpx;
    }
    .mt-5 {
        margin-top: 10rpx;
    }
    .page {
        background-color: #e6f5e8;
        mix-blend-mode: NOTTHROUGH;
        height: 100%;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 32rpx;
        .section {
            padding: 0 28rpx 8rpx;
            background-image: url('/static/images/codefun/7a5dc4ee864fe55da98b41c14ee3b931.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            .group {
                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;
                font-size: 32rpx;
                font-family: DingTalk Sans;
                line-height: 29.7rpx;
            }
            .image_5 {
                width: 92.5333vw;
                height: 37.3333vw;
            }
            .section_2 {
                // padding: 16rpx 0;
                flex: 1 1 104rpx;
                background-color: #5db66f !important;
                border-radius: 19998rpx;
                mix-blend-mode: NOTTHROUGH;
                .text-wrapper_2 {
                    overflow: hidden;
                    width: 56rpx;
                    .text_2 {
                        color: #ffffff;
                        line-height: 26.02rpx;
                    }
                }
            }
            .text-wrapper {
                flex: 1 1 104rpx;
                padding: 24rpx 0 20rpx;
                background-color: #ffffff;
                border-radius: 19998rpx;
                mix-blend-mode: NOTTHROUGH;
                height: 72rpx;
                .text_3 {
                    line-height: 25.76rpx;
                }
                .text_4 {
                    line-height: 25.74rpx;
                }
                .text_5 {
                    line-height: 26.02rpx;
                }
                .text_6 {
                    line-height: 26.04rpx;
                }
                .text_7 {
                    line-height: 25.68rpx;
                }
            }
        }
        .section_3 {
            margin: 20rpx 28rpx 0;
            padding-bottom: 8rpx;
            background-color: #ffffff66;
            border-radius: 32rpx;
            border-left: solid 2rpx #ffffffcc;
            border-right: solid 2rpx #ffffffcc;
            border-top: solid 2rpx #ffffffcc;
            border-bottom: solid 2rpx #ffffffcc;
            .section_50p {
                flex: 0 0 50%;
                padding: 24rpx 0 52rpx;
            }
            .text-wrapper_3 {
                background-color: #ffffff;
                border-radius: 32rpx;
                .text_8 {
                    color: #333333;
                    line-height: 26.02rpx;
                }
            }
            .text_9 {
                margin-top: 20rpx;
                color: #5db66f;
                line-height: 26.18rpx;
            }
        }
        .font {
            font-size: 28rpx;
            font-family: DingTalk Sans;
            line-height: 24.44rpx;
            color: #1f2937;
        }
        .section_4 {
            margin: -44rpx 28rpx 0;
            padding: 12rpx 24rpx 20rpx;
            background-color: #ffffff;
            border-radius: 21.8rpx;
            mix-blend-mode: NOTTHROUGH;
            .image_7 {
                width: 100%;
                height: 100%;
            }
            .section_5 {
                padding: 16rpx 20rpx 8rpx;
                background-color: #fff7ec;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                .image_6 {
                    width: 26rpx;
                    height: 32rpx;
                }
                .text_10 {
                    color: #ff8d1a;
                    line-height: 40rpx;
                }
            }
            .group_2 {
                margin-top: 24rpx;
                .section_6 {
                    background-color: #f9fafb;
                    border-radius: 8rpx;
                    width: 160rpx;
                    height: 160rpx;
                    .text-wrapper_4 {
                        padding: 8rpx 0;
                        background-image: linear-gradient(90deg, #fb6c26 0%, #f2130d 100%);
                        border-radius: 0rpx 8rpx 8rpx 0rpx;
                        mix-blend-mode: NOTTHROUGH;
                        width: 64rpx;
                        .text_11 {
                            line-height: 18.46rpx;
                        }
                    }
                    .pos {
                        position: absolute;
                        left: 0;
                        top: 8rpx;
                    }
                }
                .group_3 {
                    margin-top: 16rpx;
                    .text_13 {
                        line-height: 22.1rpx;
                    }
                    .text_14 {
                        line-height: 22.24rpx;
                    }
                }
                .group_4 {
                    margin-left: 8rpx;
                    margin-top: 36rpx;
                    line-height: 24.44rpx;
                    .text_15 {
                        line-height: 17.3rpx;
                    }
                    .text_16 {
                        line-height: 24.24rpx;
                    }
                }
            }
            .font_2 {
                font-size: 24rpx;
                font-family: DingTalk Sans;
                line-height: 22.42rpx;
                color: #999999;
            }
            .group_5 {
                margin-top: 8rpx;
            }
            .divider {
                margin-top: 20rpx;
                background-color: #eeeeee;
                height: 2rpx;
            }
            .group_6 {
                margin-top: 18rpx;
                .group_7 {
                    margin-top: 16rpx;
                    .text_19 {
                        line-height: 22.1rpx;
                    }
                    .text_20 {
                        line-height: 22.28rpx;
                    }
                }
                .group_8 {
                    margin-left: 8rpx;
                    margin-top: 36rpx;
                    line-height: 24.44rpx;
                    .text_21 {
                        line-height: 17.3rpx;
                    }
                    .text_22 {
                        line-height: 24.24rpx;
                    }
                }
            }
            .font_4 {
                font-size: 32rpx;
                font-family: DingTalk Sans;
                line-height: 40rpx;
                color: #333333;
            }
            .image_8 {
                width: 24rpx;
                height: 24rpx;
            }
            .image_9 {
                width: 22rpx;
                height: 26rpx;
            }
            .font_6 {
                font-size: 24rpx;
                font-family: DingTalk Sans;
                line-height: 18.44rpx;
                font-weight: 700;
                color: #f2130d;
            }
            .font_5 {
                font-size: 32rpx;
                font-family: DingTalk Sans;
                line-height: 24.44rpx;
                color: #f2130d;
            }
            .font_7 {
                font-size: 24rpx;
                font-family: DingTalk Sans;
                line-height: 24.44rpx;
                color: #999999;
            }
            .group_9 {
                margin-top: 8rpx;
            }
            .image_10 {
                width: 80rpx;
                height: 30rpx;
            }
            .font_8 {
                font-size: 20rpx;
                font-family: DingTalk Sans;
                color: #999999;
            }
            .text-wrapper_5 {
                padding: 12rpx 0;
                background-color: #5db66f;
                border-radius: 400rpx;
                mix-blend-mode: NOTTHROUGH;
                width: 136rpx;
                height: 48rpx;
                .font_9 {
                    font-size: 24rpx;
                    font-family: DingTalk Sans;
                    line-height: 22.42rpx;
                    color: #ffffff;
                }
            }
            .group_10 {
                margin-top: 0;
                padding: 30rpx 0;
                border-bottom: solid 2rpx #eeeeee;
                .section_7 {
                    padding: 30rpx 0 16rpx;
                    background-color: #f9fafb;
                    border-radius: 8rpx;
                    width: 160rpx;
                    height: 160rpx;
                    .image_12 {
                        width: 152rpx;
                        height: 114rpx;
                    }
                    .text-wrapper_6 {
                        padding: 8rpx 0;
                        background-color: #ffb700;
                        border-radius: 0rpx 8rpx 8rpx 0rpx;
                        mix-blend-mode: NOTTHROUGH;
                        width: 64rpx;
                        .text_25 {
                            line-height: 18.62rpx;
                        }
                    }
                    .pos_2 {
                        position: absolute;
                        left: 0;
                        top: 16rpx;
                    }
                }
                .group_11 {
                    margin-top: 16rpx;
                    .text_24 {
                        line-height: 30.28rpx;
                    }
                    .text_26 {
                        line-height: 22.92rpx;
                    }
                    .text_27 {
                        line-height: 22.46rpx;
                    }
                }
            }
            .font_3 {
                font-size: 20rpx;
                font-family: DingTalk Sans;
                line-height: 18.44rpx;
                color: #ffffff;
            }
            .group_12 {
                margin-top: 18rpx;
                .view {
                    margin-bottom: 8rpx;
                }
                .group_13 {
                    margin-top: 16rpx;
                    .text_29 {
                        line-height: 22.1rpx;
                    }
                    .text_30 {
                        line-height: 22.46rpx;
                    }
                }
                .group_14 {
                    margin-left: 8rpx;
                    margin-top: 28rpx;
                    .text_31 {
                        margin-left: 20rpx;
                        margin-right: -104rpx;
                        color: #f2130d;
                        line-height: 40rpx;
                    }
                    .text_32 {
                        line-height: 40rpx;
                        position: relative;
                        left: -24rpx;
                    }
                }
            }
            .image-wrapper {
                padding: 30rpx 0 20rpx;
                background-color: #f9fafb;
                border-radius: 8rpx;
                width: 160rpx;
                height: 160rpx;
                .image_11 {
                    width: 114rpx;
                    height: 110rpx;
                }
            }
            .text_33 {
                line-height: 18.6rpx;
            }
        }
        .equal-division {
            margin-top: 40rpx;
            .group_15 {
                flex: 1 1 146.74rpx;
                .image_13 {
                    width: 32rpx;
                    height: 32rpx;
                }
                .font_10 {
                    font-size: 20rpx;
                    font-family: DingTalk Sans;
                    line-height: 18.44rpx;
                    color: #666666;
                }
            }
            .equal-division-item {
                padding: 12rpx 0;
            }
        }
        .section_8 {
            padding: 12rpx 8rpx;
            background-color: #ffffff;
            mix-blend-mode: NOTTHROUGH;
            border-top: solid 1rpx #e7e7e7;
        }
    }

    .channel-list {
        widows: 100%;
        height: 150rpx;
        margin: 15rpx 0;
        border-radius: 15rpx;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .channel-list-left {
            widows: 60rpx;

            .channel-imgLeft {
                width: 60rpx;
                height: 100%;
            }
        }

        .channel-list-center {
            width: calc(100% - 100rpx);
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            padding: 15rpx 0;

            .channel-imgCenter {
                width: 240rpx;
                height: 70rpx;
            }

            .channel-text {
                font-size: 26rpx;
                font-family: '思源黑体';
                line-height: 26rpx;
            }
        }

        .channel-list-right {
            widows: 60rpx;
            position: relative;

            .channel-imgRight {
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 30rpx;
            }
        }
    }

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