<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/caae692e5d9b2719072f350f9e1d699f.png"
                />
                <view
                    class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-stretch text-wrapper codefun-mt-14"
                >
                    <text class="font text">主营：优质猪肉、冷鲜配送、全程冷链追溯</text>
                </view>
                <text class="codefun-self-stretch font text_2 codefun-mt-14 indent-md">
                    猪司令专注优质猪肉供应链建设，从养殖源头到餐桌全程把控。自建大型养殖基地，采用科学养殖技术，确保猪肉质。建立完善的冷链物流体系，全程温控运输，保证肉品新鲜专业品质检测团队，对每批产品进行严格检验。完善的溯源体系，消费者可追溯产品来源。专业分割团队，提供精细化肉品加工服务。冷鲜保证，确保肉品营养不流失。致力于为消费者提供安全、优质的猪肉产品。
                </text>
            </view>
            <view class="codefun-flex-col section_5 codefun-mt-12">
                <view class="codefun-flex-col codefun-items-start">
                    <text class="font_2">市场服务</text>
                    <view class="section_4 codefun-mt-12" />
                </view>
                <view class="grid codefun-mt-16">
                    <view class="codefun-flex-col codefun-items-center grid-item">
                        <image class="image_7" src="/static/images/codefun/1c894d991cb2f0bc70d7b3800e700423.png" />
                        <text class="font codefun-mt-8">源头直采</text>
                    </view>
                    <view class="codefun-flex-col codefun-items-center grid-item_2">
                        <image class="image_7" src="/static/images/codefun/bcef1c15592bbd3c1cea02585ab7df5e.png" />
                        <text class="font codefun-mt-8">冷链配送</text>
                    </view>
                    <view class="codefun-flex-col codefun-items-center grid-item_3">
                        <image class="image_7" src="/static/images/codefun/4c062022080fd91d26f0e788b0c7bcc3.png" />
                        <text class="font codefun-mt-8">品质检测</text>
                    </view>
                    <view class="codefun-flex-col codefun-items-center grid-item_4">
                        <image class="image_7" src="/static/images/codefun/1fea922d5a84f1606c718ff6f84dd2d5.png" />
                        <text class="font codefun-mt-8">专业分割</text>
                    </view>
                    <view class="codefun-flex-col codefun-items-center grid-item_5">
                        <image class="image_7" src="/static/images/codefun/992b9452dc42a5ce3e7ba8e8331e04b6.png" />
                        <text class="font mt-9">溯源体系</text>
                    </view>
                    <view class="codefun-flex-col codefun-items-center grid-item_6">
                        <image class="image_7" src="/static/images/codefun/28e6ba6a7044ff17819971d0ee111232.png" />
                        <text class="font mt-9">冷鲜保证</text>
                    </view>
                </view>
            </view>
            <view class="codefun-flex-col section_1 codefun-mt-12">
                <view class="codefun-flex-col codefun-items-start">
                    <text class="font_2">合作伙伴</text>
                    <view class="section_4 codefun-mt-12" />
                </view>
                <view class="codefun-flex-col codefun-justify-start codefun-relative group_4 mt-11">
                    <view class="grid_2">
                        <image class="grid-item_7" src="/static/images/codefun/9f6ba4be744a3b16b7dd8a193b0f9ca4.png" />
                        <image class="grid-item_7" src="/static/images/codefun/eed469732216e2dea0cf7795a89c53df.png" />
                        <image class="grid-item_7" src="/static/images/codefun/8a2cc237b5e903c7d5c34d83c6926623.png" />
                        <image class="grid-item_7" src="/static/images/codefun/1a2b68b0a409518e278ddde35f884806.png" />
                    </view>
                    <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>
    </view>
</template>

<style scoped lang="scss">
    .ml-5 {
        margin-left: 10rpx;
    }
    .mt-17 {
        margin-top: 34rpx;
    }
    .mt-9 {
        margin-top: 18rpx;
    }
    .mt-11 {
        margin-top: 22rpx;
    }
    .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 38rpx 382rpx;
            background-image: url('/static/images/codefun/b5493813a21cb38af4c6d8314e21b88c.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: 15.34rpx;
                    .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 24rpx;
            .section_2 {
                margin-right: 8rpx;
                padding: 34rpx 17rpx 26rpx 26rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                .image_6 {
                    width: 236rpx;
                    height: 72rpx;
                }
                .text-wrapper {
                    margin-right: 10.68rpx;
                    padding: 17.94rpx 0 15.42rpx;
                    background-image: linear-gradient(273.7deg, #217a33 0.1%, #43cf7c 99.9%);
                    border-radius: 8rpx;
                    .text {
                        margin-left: 19.3rpx;
                        color: #ffffff;
                    }
                }
                .text_2 {
                    margin-left: 2.68rpx;
                    line-height: 40rpx;
                    text-align: justify;
                }
            }
            .section_5 {
                margin-right: 8rpx;
                padding: 22.66rpx 26rpx 28rpx 28rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                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: 28rpx 0 31.16rpx;
                        background-color: #eefaeb;
                        border-radius: 8rpx;
                    }
                    .grid-item_2 {
                        padding: 28rpx 0 31.06rpx;
                        background-color: #eff1ff;
                        border-radius: 8rpx;
                    }
                    .image_7 {
                        width: 32rpx;
                        height: 32rpx;
                    }
                    .grid-item_3 {
                        padding: 28rpx 0 29.52rpx;
                        background-color: #fff3f1;
                        border-radius: 8rpx;
                    }
                    .grid-item_4 {
                        padding: 26rpx 0 31.08rpx;
                        background-color: #e8f7f7;
                        border-radius: 8rpx;
                    }
                    .grid-item_5 {
                        padding: 26rpx 0 29.46rpx;
                        background-color: #fff3e7;
                        border-radius: 8rpx;
                    }
                    .grid-item_6 {
                        padding: 26rpx 0 29.44rpx;
                        background-color: #faf8ea;
                        border-radius: 8rpx;
                    }
                }
            }
            .font {
                font-size: 24rpx;
                color: #333333;
            }
            .section_1 {
                margin-right: 8rpx;
                padding: 26.82rpx 20rpx 21.68rpx 28rpx;
                background-color: #ffffff;
                border-radius: 16.14rpx;
                mix-blend-mode: NOTTHROUGH;
                .group_4 {
                    height: 156.32rpx;
                    .grid_2 {
                        padding-left: 30rpx;
                        padding-right: 28rpx;
                        height: 156.32rpx;
                        display: grid;
                        grid-template-rows: repeat(2, minmax(0, 1fr));
                        grid-template-columns: repeat(2, minmax(0, 1fr));
                        row-gap: 30.32rpx;
                        column-gap: 18rpx;
                        .grid-item_7 {
                            filter: drop-shadow(0rpx 4rpx 4rpx #0e421829);
                            width: 242rpx;
                            height: 64rpx;
                        }
                    }
                    .section_6 {
                        padding: 22rpx 0 20rpx;
                        background-color: #ff9800;
                        border-radius: 198rpx;
                        .image_8 {
                            width: 30rpx;
                            height: 30rpx;
                        }
                        .text_8 {
                            color: #ffffff;
                            font-size: 28rpx;
                        }
                    }
                    .pos {
                        position: fixed;
                        left: 40rpx;
                        right: 40rpx;
                        bottom: 40rpx;
                        z-index: 1;
                    }
                }
            }
            .font_2 {
                font-size: 32rpx;
                color: #333333;
            }
            .section_4 {
                background-image: linear-gradient(272deg, #5cb56e 0%, #64d63e 100%);
                width: 128rpx;
                height: 6rpx;
            }
        }
    }
</style>
