<script setup lang="ts">
    import { reactive, onMounted } 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 { getDictData, getText } from '@/utils/dict/area'

    onMounted(() => {
        getDictData()
    })

    // 下拉刷新
    onPullDownRefresh(() => {
        pageData.search.pageNo = 1
        if (pageData.currentTransactionTab === 1) {
            pageData.supplyInfos = []
            fetchSupplyInfos()
        }
        if (pageData.currentTransactionTab === 2) {
            pageData.purchaseDemands = []
            fetchPurchaseDemands()
        }
        setTimeout(function () {
            uni.stopPullDownRefresh()
            uni.showToast({
                title: '刷新成功',
                icon: 'none',
            })
        }, 1000)
    })
    onShow(() => {
        // 只有当列表为空时才重新获取数据，避免每次返回页面都全量刷新
        if (pageData.currentTransactionTab === 1 && pageData.supplyInfos.length === 0) {
            pageData.search.pageNo = 1
            fetchSupplyInfos()
        }
        if (pageData.currentTransactionTab === 2 && pageData.purchaseDemands.length === 0) {
            pageData.search.pageNo = 1
            fetchPurchaseDemands()
        }
    })

    // 页面数据
    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 fetchPurchaseDemands() {
        pageData.loading = true
        ChanxiaoAPI.purchaseList(pageData.search)
            .then((res) => {
                const { records, total } = res
                const mappedRecords = records.map((item) => {
                    const nameParts = [item.cityName, item.countryName].filter(Boolean)
                    return {
                        ...item,
                        location: nameParts.length > 0
                            ? nameParts.join('')
                            : getText(`${item.city},${item.country}`, ''),
                    }
                })
                pageData.purchaseDemands = [...pageData.purchaseDemands, ...mappedRecords]
                pageData.total = total
            })
            .finally(() => {
                pageData.loading = false
            })
    }
    // 获取供应信息列表
    function fetchSupplyInfos() {
        pageData.loading = true
        const params = { ...pageData.search }
        delete params.classify // 后端 BizSupply 无 classify 字段，移除以防报错

        ChanxiaoAPI.supplyList(params)
            .then((res) => {
                const { records, total } = res
                const mappedRecords = records.map((item) => {
                    const nameParts = [item.cityName, item.districtName].filter(Boolean)
                    return {
                        ...item,
                        location: nameParts.length > 0
                            ? nameParts.join('')
                            : getText(`${item.city},${item.district}`, ''),
                    }
                })
                pageData.supplyInfos = [...pageData.supplyInfos, ...mappedRecords]
                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) fetchSupplyInfos()
        if (pageData.currentTransactionTab === 2) fetchPurchaseDemands()
    }

    // 采购/供应标签点击事件
    function onTransactionTabClick(tab: any) {
        pageData.currentTransactionTab = tab.id
        pageData.search.pageNo = 1
        pageData.purchaseDemands = []
        pageData.supplyInfos = []
        if (pageData.currentTransactionTab === 1) fetchSupplyInfos()
        if (pageData.currentTransactionTab === 2) fetchPurchaseDemands()
    }

    // 新需求提醒点击事件
    // 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/supplyXuQiu')
            return
        }
        if (pageData.currentTransactionTab === 2) {
            Navigate.to('/pages/chanxiao/purchaseXuQiu')
        }
    }

    onReachBottom(() => {
        console.log('触底了')
        if (pageData.currentTransactionTab === 1) {
            if (pageData.total <= pageData.supplyInfos.length) return
            pageData.search.pageNo++
            fetchSupplyInfos()
        }
        if (pageData.currentTransactionTab === 2) {
            if (pageData.total <= pageData.purchaseDemands.length) return
            pageData.search.pageNo++
            fetchPurchaseDemands()
        }
    })
</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 === 1 && pageData.supplyInfos.length === 0"
                style="height: 528rpx"
            >
                <fui-empty src="/static/images/no-data.png" title="暂无数据" />
            </view>
            <!-- 供应信息列表 -->
            <view v-if="pageData.currentTransactionTab === 1">
                <view
                    v-for="(info, index) in pageData.supplyInfos"
                    :key="info.id"
                    class="product-card"
                    @click="onSupplyInfoClick(info)"
                >
                    <view class="product-image-box">
                        <image class="product-image" :src="info.image" mode="aspectFill" />
                    </view>
                    <view class="product-info">
                        <view class="product-title-row">
                            <text class="product-title">{{ info.title }}</text>
                        </view>
                        <view class="product-spec" v-if="info.productSpecs">
                            {{ info.productSpecs }}
                        </view>
                        <view class="product-price-row">
                            <text class="price-symbol">¥</text>
                            <text class="price-value">{{ info.minPrice }}-{{ info.maxPrice }}</text>
                            <text class="price-unit">/{{ info.unit }}</text>
                        </view>
                        <view class="product-footer">
                            <view class="footer-left">
                                <fui-icon name="location" :size="24" color="#999"></fui-icon>
                                <text class="footer-text">{{ info.location }}</text>
                            </view>
                            <view class="quote-btn supply" @click.stop="onQuoteClick(info)">
                                立即报价
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 采购需求列表 -->
            <view v-if="pageData.currentTransactionTab === 2">
                <view
                    v-if="pageData.purchaseDemands.length === 0"
                    style="height: 528rpx"
                >
                    <fui-empty src="/static/images/no-data.png" title="暂无数据" />
                </view>
                <view
                    v-for="(demand, index) in pageData.purchaseDemands"
                    :key="demand.id"
                    class="product-card purchase"
                    @click="onPurchaseDemandClick(demand)"
                >
                    <view class="product-image-box">
                        <image class="product-image" :src="demand.image" mode="aspectFill" />
                        <view class="status-badge">采购中</view>
                    </view>
                    <view class="product-info">
                        <view class="product-title-row">
                            <text class="product-title">{{ demand.title }}</text>
                        </view>
                        <view class="product-meta">
                            <text class="meta-item">需：{{ demand.count }}{{ demand.unit }}</text>
                            <text class="meta-item deadline" v-if="demand.deadline">截止：{{ demand.deadline }}</text>
                        </view>
                        <view class="product-price-row purchase">
                            <text class="price-label">预算：</text>
                            <text class="price-symbol">¥</text>
                            <text class="price-value">{{ demand.priceStart }}-{{ demand.priceEnd }}</text>
                        </view>
                        <view class="product-footer">
                            <view class="footer-left">
                                <fui-icon name="location" :size="24" color="#999"></fui-icon>
                                <text class="footer-text">{{ demand.location }}</text>
                            </view>
                            <view class="quote-btn purchase" @click.stop="onQuoteClick(demand)">
                                我有货
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
    <!-- 发布悬浮按钮 -->
    <view class="fab-container" @click="handlePublish">
        <view class="ripple" :class="{ 'ripple-purchase': pageData.currentTransactionTab === 2 }"></view>
        <view class="ripple ripple-2" :class="{ 'ripple-purchase': pageData.currentTransactionTab === 2 }"></view>
        <view class="fab-entry" :class="{ 'fab-purchase': pageData.currentTransactionTab === 2 }">
            <fui-icon name="plus" :size="48" color="#fff" bold></fui-icon>
            <text>发布</text>
        </view>
    </view>

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

<style scoped lang="scss">
    .fab-container {
        position: fixed;
        right: 30rpx;
        bottom: 150rpx;
        width: 110rpx;
        height: 110rpx;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;

        .ripple {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #5db66f;
            border-radius: 50%;
            opacity: 0.4;
            animation: ripple 2s infinite ease-out;

            &.ripple-purchase {
                background-color: #5db66f;
            }
        }

        .ripple-2 {
            animation-delay: 1s;
        }

        .fab-entry {
            position: relative;
            width: 110rpx;
            height: 110rpx;
            background: linear-gradient(135deg, #5db66f 0%, #4caf50 100%);
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4rpx 16rpx rgba(93, 182, 111, 0.3);

            &.fab-purchase {
                background-color: #5db66f;
            }

            text {
                color: #fff;
                font-size: 20rpx;
                font-weight: bold;
                margin-top: -4rpx;
            }
        }
    }

    @keyframes ripple {
        0% {
            transform: scale(1);
            opacity: 0.4;
        }
        100% {
            transform: scale(1.6);
            opacity: 0;
        }
    }
    .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;
            min-height: 400rpx;

            /* 商品卡片式设计 */
            .product-card {
                display: flex;
                padding: 24rpx 0;
                border-bottom: 1rpx solid #f2f2f2;
                &:last-child {
                    border-bottom: none;
                }

                .product-image-box {
                    width: 180rpx;
                    height: 180rpx;
                    border-radius: 12rpx;
                    overflow: hidden;
                    background-color: #f8f8f8;
                    position: relative;
                    flex-shrink: 0;

                    .product-image {
                        width: 100%;
                        height: 100%;
                    }

                    .status-badge {
                        position: absolute;
                        left: 0;
                        top: 0;
                        background: rgba(250, 140, 22, 0.9);
                        color: #fff;
                        font-size: 20rpx;
                        padding: 4rpx 12rpx;
                        border-bottom-right-radius: 12rpx;
                    }
                }

                .product-info {
                    flex: 1;
                    margin-left: 20rpx;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;

                    .product-title {
                        font-size: 30rpx;
                        color: #333;
                        font-weight: bold;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        line-height: 1.4;
                    }

                    .product-spec, .product-meta {
                        font-size: 24rpx;
                        color: #999;
                        margin-top: 8rpx;
                        .meta-item {
                            margin-right: 16rpx;
                            &.deadline {
                                color: #ff4d4f;
                            }
                        }
                    }

                    .product-price-row {
                        margin-top: 10rpx;
                        display: flex;
                        align-items: baseline;
                        
                        .price-symbol {
                            font-size: 24rpx;
                            color: #5db66f;
                            font-weight: bold;
                        }
                        .price-value {
                            font-size: 34rpx;
                            color: #5db66f;
                            font-weight: bold;
                            margin: 0 4rpx;
                        }
                        .price-unit {
                            font-size: 24rpx;
                            color: #999;
                        }

                        &.purchase {
                            .price-label {
                                font-size: 24rpx;
                                color: #666;
                            }
                            .price-symbol, .price-value {
                                color: #fa8c16;
                            }
                        }
                    }

                    .product-footer {
                        margin-top: 12rpx;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .footer-left {
                            display: flex;
                            align-items: center;
                            .footer-text {
                                font-size: 22rpx;
                                color: #999;
                                margin-left: 4rpx;
                                max-width: 220rpx;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }

                        .quote-btn {
                            font-size: 22rpx;
                            padding: 6rpx 20rpx;
                            border-radius: 30rpx;
							background-color: #5db66f;
							color: #fff;
                            /* &.supply {
                                background-color: #5db66f;
                                color: #fff;
                            }
                            &.purchase {
                                background-color: #fa8c16;
                                color: #fff;
                            } */
                        }
                    }
                }
            }
        }
        .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>
