<script setup lang="ts">
    // 洽谈合作
    function onCooperationClick() {
        Message.alert('洽谈合作功能暂不可用，敬请期待~', '温馨提示')
    }
</script>

<template>
    <view class="codefun-flex-col page">
        <view class="codefun-flex-col section">
            <view class="codefun-flex-row codefun-justify-between codefun-items-center codefun-self-stretch group">
                <view class="image" />
                <view class="codefun-flex-row group_2" />
            </view>
            <view class="codefun-self-start image_5 mt-17" />
        </view>
        <view class="codefun-flex-col codefun-relative group_3">
            <view class="codefun-flex-col section_2">
                <image
                    class="codefun-self-start image_6"
                    src="/static/images/codefun/30df594376de06bdd0246cfc368c4712.png"
                />
                <view
                    class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-stretch text-wrapper"
                >
                    <text class="font text">主营：水果、蔬菜、花卉、水产、肉品以及粮油批发</text>
                </view>
                <text class="codefun-self-stretch font text_2 indent-md">
                    红星批发市场（现红星全球农批中心）是中南地区规模最大、功能最全的现代化农产品集散枢纽。其核心优势在于“海量、源头、枢纽”——作为国家级定点市场，它依托超过1700亩的现代化园区，整合了水果、蔬菜、粮油等全品类农产品，年交易额超500亿元，构建了“买全球、卖全球”的流通网络。通过严格的品控标准、强大的冷链物流及24小时食品安全检测体系，它不仅为大批发商提供极具价格优势的源头现货，更通过“智慧市场”升级，持续强化其作为区域农产品流通基本盘的枢纽地位。
                </text>
            </view>
            <view class="codefun-mt-12 codefun-flex-col section_3">
                <view class="codefun-flex-col codefun-items-start">
                    <text class="font_2">市场服务</text>
                    <view class="codefun-mt-12 section_4" />
                </view>
                <view class="codefun-mt-16 grid">
                    <view class="codefun-flex-col codefun-items-center grid-item">
                        <image class="image_7" src="/static/images/codefun/c5376f7be5bfbb9dda9e6a1ab3e7bcaa.png" />
                        <text class="codefun-mt-4 font">仓储服务</text>
                    </view>
                    <view class="codefun-flex-col codefun-items-center grid-item_2">
                        <image class="image_7" src="/static/images/codefun/4227f65f96a91d996129d562170ee512.png" />
                        <text class="codefun-mt-4 font">冷链服务</text>
                    </view>
                    <view class="codefun-flex-col codefun-items-center grid-item_3">
                        <image class="image_7" src="/static/images/codefun/4bcc73ba05cdf2d34e0072a01231e49e.png" />
                        <text class="codefun-mt-4 font text_3">广告服务</text>
                    </view>
                    <view class="codefun-flex-col codefun-items-center grid-item_4">
                        <image class="image_7" src="/static/images/codefun/d2d1c5eb9713ab5c1a96f5cad551e99c.png" />
                        <text class="font text_4 mt-5">物流服务</text>
                    </view>
                    <view class="codefun-flex-col codefun-items-center grid-item_5">
                        <image class="image_7" src="/static/images/codefun/98d493b05aacca4d791d5e7eafe165dd.png" />
                        <text class="font text_5 mt-5">加盟服务</text>
                    </view>
                    <view class="codefun-flex-col codefun-items-center grid-item_6">
                        <image class="image_7" src="/static/images/codefun/6453792d886238f4365824df11a73895.png" />
                        <text class="codefun-mt-4 font text_6">进场交易</text>
                    </view>
                </view>
            </view>
            <view class="codefun-mt-12 codefun-flex-col section_5">
                <view class="codefun-flex-col group_4">
                    <view class="codefun-flex-col codefun-items-start">
                        <text class="font_2 text_7">合作伙伴</text>
                        <view class="codefun-mt-12 section_4" />
                    </view>
                    <view class="codefun-flex-row codefun-justify-evenly codefun-relative group_5">
                        <image class="image_9" src="/static/images/codefun/392530f2fc89e2a05eeb217134de07fc.png" />
                        <image class="image_10" src="/static/images/codefun/71764c63e31cd611e37c8e63d89cdf46.png" />
                        <image class="image_11" src="/static/images/codefun/f50d4460a289e873cf281304841f8b06.png" />
                        <view
                            class="codefun-flex-row codefun-justify-center codefun-items-center section_6 pos"
                            @click="onCooperationClick"
                        >
                            <image class="image_8" src="/static/images/codefun/3e23931a51dff8d555bc053a33133be1.png" />
                            <text class="text_8 ml-9">洽谈合作</text>
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-row codefun-justify-around codefun-items-center group_6">
                    <view class="codefun-flex-col codefun-justify-start codefun-items-center image-wrapper">
                        <image class="image_13" src="/static/images/codefun/285cb382854f4a0bcb81b6df31461ac3.png" />
                    </view>
                    <view class="codefun-flex-col codefun-justify-start codefun-items-center image-wrapper_2">
                        <image class="image_14" src="/static/images/codefun/bcdceae8b26c6f6da7f63256a4ff492a.png" />
                    </view>
                    <image class="image_12" src="/static/images/codefun/878c6a14f1c4a781f2ad4c0b42e66a40.png" />
                </view>
                <view class="codefun-flex-row group_7">
                    <image
                        class="codefun-flex-1 image_15"
                        src="/static/images/codefun/5773b71d4b9da414a58e757b8e2c4096.png"
                    />
                    <view
                        class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 image-wrapper_3 ml-17"
                    >
                        <image class="image_16" src="/static/images/codefun/154bbbe9720db989c5bb38e7470a070b.png" />
                    </view>
                </view>
                <view class="codefun-flex-row codefun-justify-center equal-division">
                    <view class="codefun-flex-col codefun-justify-start codefun-items-center equal-division-item">
                        <image class="image_17" src="/static/images/codefun/7ee07db3777657f41e4794743619e49b.png" />
                    </view>
                    <image
                        class="equal-division-item_2 ml-9"
                        src="/static/images/codefun/55c54aa2927b714f5ad896d60d9ed1dc.png"
                    />
                    <view
                        class="codefun-flex-col codefun-justify-start codefun-items-center equal-division-item_3 ml-9"
                    >
                        <image class="image_18" src="/static/images/codefun/003edb8aa22fb6fea96dec2eb8dfbe0c.png" />
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
    .ml-5 {
        margin-left: 10rpx;
    }
    .mt-17 {
        margin-top: 34rpx;
    }
    .mt-5 {
        margin-top: 10rpx;
    }
    .ml-17 {
        margin-left: 34rpx;
    }
    .ml-9 {
        margin-left: 18rpx;
    }
    page {
        background-color: #e6f5e8;
    }
    .page {
        padding-bottom: 140rpx;
        background-color: #e6f5e8;
        mix-blend-mode: NOTTHROUGH;
        height: 100%;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        .section {
            padding: 28rpx 42rpx 382rpx;
            background-image: url('/static/images/codefun/319caa972700f74982472280d1edb65e.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            .group {
                padding: 0 2rpx;
                .image {
                    border-radius: 64rpx;
                    width: 108rpx;
                    height: 42rpx;
                }
                .group_2 {
                    margin-right: 8rpx;
                    .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;
                    }
                }
            }
            .image_5 {
                mix-blend-mode: NOTTHROUGH;
                width: 14rpx;
                height: 26rpx;
            }
        }
        .group_3 {
            margin-top: -188rpx;
            padding: 0 28rpx;
            .section_2 {
                padding: 34rpx 16rpx 28rpx 28rpx;
                background-color: #ffffff;
                border-radius: 17rpx;
                mix-blend-mode: NOTTHROUGH;
                .image_6 {
                    width: 236rpx;
                    height: 72rpx;
                }
                .text-wrapper {
                    margin-right: 12rpx;
                    margin-top: 32rpx;
                    padding: 16rpx 0;
                    background-image: linear-gradient(273.7deg, #5cb56e 0.1%, #64d63e 99.9%);
                    border-radius: 8rpx;
                    .text {
                        margin-left: 20rpx;
                        color: #ffffff;
                        line-height: 22.68rpx;
                    }
                }
                .text_2 {
                    margin-top: 20rpx;
                    line-height: 40rpx;
                    text-align: justify;
                }
            }
            .section_3 {
                padding: 24rpx 28rpx 28rpx;
                background-color: #ffffff;
                border-radius: 19.78rpx;
                mix-blend-mode: NOTTHROUGH;
                .grid {
                    height: 276rpx;
                    display: grid;
                    grid-template-rows: repeat(2, minmax(0, 1fr));
                    grid-template-columns: repeat(3, minmax(0, 1fr));
                    row-gap: 22rpx;
                    column-gap: 22rpx;
                    .grid-item {
                        padding: 20rpx 0 32rpx;
                        background-color: #eefaeb;
                        border-radius: 8rpx;
                    }
                    .grid-item_2 {
                        padding: 20rpx 0 32rpx;
                        background-color: #eff1ff;
                        border-radius: 8rpx;
                    }
                    .image_7 {
                        width: 48rpx;
                        height: 48rpx;
                    }
                    .grid-item_3 {
                        padding: 20rpx 0 32rpx;
                        background-color: #fff3f1;
                        border-radius: 8rpx;
                        .text_3 {
                            line-height: 22.64rpx;
                        }
                    }
                    .grid-item_4 {
                        padding: 18rpx 0 32rpx;
                        background-color: #e8f7f7;
                        border-radius: 8rpx;
                        .text_4 {
                            line-height: 22.34rpx;
                        }
                    }
                    .grid-item_5 {
                        padding: 18rpx 0 32rpx;
                        background-color: #fff3e7;
                        border-radius: 8rpx;
                        .text_5 {
                            line-height: 22.34rpx;
                        }
                    }
                    .grid-item_6 {
                        padding: 18rpx 0 32rpx;
                        background-color: #faf8ea;
                        border-radius: 8rpx;
                        .text_6 {
                            line-height: 22.68rpx;
                        }
                    }
                }
            }
            .font {
                font-size: 24rpx;
                font-family: SourceHanSansCN;
                line-height: 22.4rpx;
                color: #333333;
            }
            .section_5 {
                padding: 28rpx 8rpx 28rpx 28rpx;
                background-color: #ffffff;
                border-radius: 16.14rpx;
                mix-blend-mode: NOTTHROUGH;
                .group_4 {
                    height: 145.5rpx;
                    .text_7 {
                        line-height: 29.82rpx;
                    }
                    .group_5 {
                        margin-top: -16rpx;
                        padding-top: 40rpx;
                        .image_9 {
                            filter: drop-shadow(0rpx 4rpx 4rpx #0e421829);
                            width: 230rpx;
                            height: 64rpx;
                        }
                        .image_10 {
                            filter: drop-shadow(0rpx 4rpx 4rpx #0e421829);
                            width: 220rpx;
                            height: 64rpx;
                        }
                        .image_11 {
                            filter: drop-shadow(0rpx 4rpx 4rpx #0e421829);
                            width: 147.26rpx;
                            height: 64.32rpx;
                        }
                        .section_6 {
                            padding: 20rpx 0;
                            background-color: #ff9800;
                            border-radius: 198rpx;
                            .image_8 {
                                width: 30rpx;
                                height: 30rpx;
                            }
                            .text_8 {
                                color: #ffffff;
                                font-size: 28rpx;
                                font-family: SourceHanSansCN;
                                line-height: 25.92rpx;
                            }
                        }
                        .pos {
                            position: fixed;
                            left: 40rpx;
                            right: 40rpx;
                            bottom: 40rpx;
                            z-index: 1;
                        }
                    }
                }
                .group_6 {
                    margin-top: 20rpx;
                    .image-wrapper {
                        padding: 8rpx 0;
                        filter: drop-shadow(0rpx 4rpx 4rpx #0e421829);
                        background-color: #ffffff;
                        width: 248.5rpx;
                        height: 64.32rpx;
                        .image_13 {
                            width: 230rpx;
                            height: 50rpx;
                        }
                    }
                    .image-wrapper_2 {
                        padding: 12rpx 0;
                        filter: drop-shadow(0rpx 4rpx 4rpx #0e421829);
                        background-color: #ffffff;
                        width: 241.6rpx;
                        height: 64.32rpx;
                        .image_14 {
                            width: 230rpx;
                            height: 40rpx;
                        }
                    }
                    .image_12 {
                        filter: drop-shadow(0rpx 4rpx 4rpx #0e421829);
                        width: 80rpx;
                        height: 80rpx;
                    }
                }
                .group_7 {
                    margin-top: 20rpx;
                    .image_15 {
                        filter: drop-shadow(0rpx 4rpx 4rpx #0e421829);
                        height: 64rpx;
                    }
                    .image-wrapper_3 {
                        margin-right: 20rpx;
                        filter: drop-shadow(0rpx 4rpx 4rpx #0e421829);
                        background-color: #ffffff;
                        width: 266rpx;
                        height: 64rpx;
                        .image_16 {
                            width: 230rpx;
                            height: 56rpx;
                        }
                    }
                }
                .equal-division {
                    margin-right: 20rpx;
                    margin-top: 28rpx;
                    .equal-division-item {
                        padding: 8rpx 0;
                        filter: drop-shadow(0rpx 4rpx 4rpx #0e421829);
                        background-color: #ffffff;
                        width: 196rpx;
                        height: 64rpx;
                        .image_17 {
                            width: 186rpx;
                            height: 48rpx;
                        }
                    }
                    .equal-division-item_2 {
                        filter: drop-shadow(0rpx 4rpx 4rpx #0e421829);
                        width: 200rpx;
                        height: 64rpx;
                    }
                    .equal-division-item_3 {
                        padding: 10rpx 0;
                        filter: drop-shadow(0rpx 4rpx 4rpx #0e421829);
                        background-color: #ffffff;
                        width: 208rpx;
                        height: 64rpx;
                        .image_18 {
                            width: 208rpx;
                            height: 44rpx;
                        }
                    }
                }
            }
            .font_2 {
                font-size: 32rpx;
                font-family: SourceHanSansCN;
                line-height: 30.04rpx;
                color: #333333;
            }
            .section_4 {
                background-image: linear-gradient(272deg, #5cb56e 0%, #64d63e 100%);
                width: 128rpx;
                height: 6rpx;
            }
        }
    }
</style>
