<script setup lang="ts">
    import { reactive } from 'vue'

    const pageData = reactive({
        // 分类标签
        categoryTabs: [
            { id: 1, name: '找农机' },
            { id: 2, name: '干农活' },
        ],
        currentCategoryId: 1,
    })

    // 分类标签点击事件
    function onCategoryTabClick(tab: any) {
        console.log('点击分类标签:', tab)
        pageData.currentCategoryId = tab.id
        // 在这里添加具体的分类标签点击逻辑
    }
</script>

<template>
    <view class="codefun-flex-col page">
        <view class="codefun-flex-col group_2">
            <view class="codefun-flex-row codefun-justify-between section_2">
                <text class="font_2 text_2">服务区域</text>
                <view class="codefun-flex-row codefun-items-center">
                    <text class="font_2 text_3">选择市县乡镇</text>
                    <image
                        class="codefun-shrink-0 image_7 codefun-ml-4"
                        src="/static/images/codefun/774cfe989f8417dc655fb301635f5893.png"
                    />
                </view>
            </view>
            <view class="codefun-flex-row section_3">
                <view
                    v-for="item in pageData.categoryTabs"
                    :key="item.id"
                    class="codefun-flex-col codefun-justify-start codefun-items-center text-50p"
                    :class="item.id === pageData.currentCategoryId ? 'text-wrapper' : ''"
                    @click="onCategoryTabClick(item)"
                >
                    <text class="font_2" :class="item.id === pageData.currentCategoryId ? 'text_4' : 'text_5'">{{
                        item.name
                    }}</text>
                </view>
            </view>
            <view class="codefun-flex-col codefun-relative section_4">
                <view class="codefun-flex-row group_6">
                    <image
                        class="codefun-shrink-0 codefun-self-center image_8"
                        src="/static/images/codefun/1f4e4111336d0f182201176d8c761a37.png"
                    />
                    <view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-self-center group_4">
                        <text class="font text_6">大联合收割机</text>
                        <text class="font_3 text_7">服务范围：市区及周边20公里</text>
                        <view class="group_5">
                            <text class="font_6">¥</text>
                            <text class="font_4 text_8">60</text>
                            <text class="font_7">/亩</text>
                        </view>
                    </view>
                    <view
                        class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 codefun-self-start text-wrapper_2 view"
                    >
                        <text class="font_5">我有需要</text>
                    </view>
                </view>
                <view class="codefun-flex-row group_6">
                    <view class="codefun-flex-row codefun-items-center codefun-flex-1 codefun-self-center">
                        <image
                            class="codefun-shrink-0 image_8"
                            src="/static/images/codefun/e3f873f79cdddaee3655c048852302e3.png"
                        />
                        <view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-ml-12">
                            <text class="font text_9">小麦播种机</text>
                            <text class="font_3 text_10">服务范围：全市各区县</text>
                            <view class="group_7">
                                <text class="font_6">¥</text>
                                <text class="font_4 text_11">60</text>
                                <text class="font_7">/亩</text>
                            </view>
                        </view>
                    </view>
                    <view
                        class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 codefun-self-start text-wrapper_2 view_2 codefun-ml-20"
                    >
                        <text class="font_5">我有需要</text>
                    </view>
                </view>
                <view class="codefun-flex-row group_8">
                    <view class="codefun-flex-row codefun-items-center codefun-flex-1 codefun-self-center">
                        <image
                            class="codefun-shrink-0 image_8"
                            src="/static/images/codefun/da314c458ad5d6714cfe7ee8524ccd9c.png"
                        />
                        <view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-ml-12">
                            <text class="font text_12">多功能拖拉机</text>
                            <text class="font_3 text_13">服务范围：全市各区县</text>
                            <view class="group_9">
                                <text class="font_6">¥</text>
                                <text class="font_4 text_14">60</text>
                                <text class="font_7">/亩</text>
                            </view>
                        </view>
                    </view>
                    <view
                        class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 codefun-self-start text-wrapper_2 view_3 codefun-ml-20"
                    >
                        <text class="font_5">我有需要</text>
                    </view>
                </view>
                <view class="codefun-flex-col codefun-justify-start codefun-relative section_5">
                    <view class="codefun-shrink-0 section_6" />
                    <text class="font_8 text_15 pos_4">夏收专享：收割机服务8折优惠</text>
                    <view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3 pos_3">
                        <text class="font_2 text_16">立即预约</text>
                    </view>
                </view>
                <view class="codefun-flex-row group_10">
                    <view class="codefun-flex-row codefun-items-center codefun-flex-1 codefun-self-center">
                        <image
                            class="codefun-shrink-0 image_8"
                            src="/static/images/codefun/3500502108a998fe7f49363a276af806.png"
                        />
                        <view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-ml-12">
                            <text class="font">水稻插秧机</text>
                            <text class="font_3 text_17">服务范围：全市各区县</text>
                            <view class="group_11">
                                <text class="font_6">¥</text>
                                <text class="font_4 text_18">60</text>
                                <text class="font_7">/亩</text>
                            </view>
                        </view>
                    </view>
                    <view
                        class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 codefun-self-start text-wrapper_2 view_4 codefun-ml-20"
                    >
                        <text class="font_5">我有需要</text>
                    </view>
                </view>
            </view>
            <view class="codefun-flex-col section_7">
                <view class="grid">
                    <view class="codefun-flex-row codefun-justify-between codefun-items-center grid-item">
                        <text class="font_3 text_19">农机类型</text>
                        <image class="image_10" src="/static/images/codefun/a13c36a46232de65d09f43b1720ba29d.png" />
                    </view>
                    <view class="codefun-flex-row codefun-justify-between codefun-items-center grid-item_2">
                        <view class="codefun-flex-row codefun-items-center">
                            <image
                                class="codefun-shrink-0 image_9"
                                src="/static/images/codefun/bf7b1672e65ba021aa79827f30014280.png"
                            />
                            <text class="font_3 text_20 codefun-ml-8">作业地点</text>
                        </view>
                        <image class="image_10" src="/static/images/codefun/a13c36a46232de65d09f43b1720ba29d.png" />
                    </view>
                    <view class="codefun-flex-row codefun-justify-between codefun-items-center grid-item_4">
                        <view class="codefun-flex-row codefun-items-center">
                            <image
                                class="codefun-shrink-0 image_11"
                                src="/static/images/codefun/206576465476f031295c48dcef261286.png"
                            />
                            <text class="font_3 text_21 codefun-ml-4">作业时间</text>
                        </view>
                        <image class="image_10" src="/static/images/codefun/a13c36a46232de65d09f43b1720ba29d.png" />
                    </view>
                    <view class="codefun-flex-row codefun-items-center grid-item_4">
                        <image class="image_12" src="/static/images/codefun/43220b5bebf6a41ff3f05e6ec94ce9f0.png" />
                        <text class="font_3 text_22 codefun-ml-4">联系方式</text>
                    </view>
                </view>
                <view class="codefun-flex-col codefun-mt-12">
                    <view class="codefun-flex-row codefun-items-center grid-item group_12">
                        <image class="image_13" src="/static/images/codefun/a83082710831140b897349a7f3bd46d9.png" />
                        <text class="font_3 text_23 codefun-ml-8">简要说明作业需求</text>
                    </view>
                    <view
                        class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4 codefun-mt-12"
                    >
                        <text class="font_8 text_24">发布需求</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
    .page {
        padding-bottom: 12rpx;
        background-color: #e6f5e8;
        mix-blend-mode: NOTTHROUGH;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
        .section {
            padding: 24rpx 24rpx 24rpx 32rpx;
            background-color: #5db66f;
            mix-blend-mode: NOTTHROUGH;
            .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;
            }
            .group {
                padding: 8rpx 0;
                .image_6 {
                    mix-blend-mode: NOTTHROUGH;
                    width: 14rpx;
                    height: 26rpx;
                }
                .pos_2 {
                    position: absolute;
                    left: 6rpx;
                    top: 50%;
                    transform: translateY(-50%);
                }
                .text {
                    color: #ffffffe6;
                    line-height: 29.5rpx;
                }
                .image_5 {
                    width: 44rpx;
                    height: 44rpx;
                }
                .pos {
                    position: absolute;
                    right: 0.66rpx;
                    top: 50%;
                    transform: translateY(-50%);
                }
            }
        }
        .group_2 {
            padding: 16rpx 24rpx;
            height: 1598rpx;
            .section_2 {
                padding: 32rpx 24rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                .text_2 {
                    line-height: 25.82rpx;
                }
                .text_3 {
                    color: #999999;
                    line-height: 26.04rpx;
                }
                .image_7 {
                    width: 22rpx;
                    height: 12rpx;
                }
            }
            .section_3 {
                margin-top: 24rpx;
                padding-bottom: 8rpx;
                background-color: #ffffff66;
                border-radius: 32rpx;
                border: solid 2rpx #ffffffcc;
                .text-50p {
                    width: 50%;
                    height: 102rpx;
                    padding: 0.75rem 0 1.625rem;
                }
                .text-wrapper {
                    padding: 24rpx 0 56rpx;
                    background-color: #ffffff;
                    border-radius: 32rpx;
                    .text_4 {
                        line-height: 26.02rpx;
                    }
                }
                .text_5 {
                    color: #5db66f;
                    line-height: 25.82rpx;
                }
            }
            .font_2 {
                font-size: 28rpx;
                line-height: 24.6rpx;
                color: #333333;
            }
            .section_4 {
                margin-top: -48rpx;
                padding: 0 16rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                .group_6 {
                    padding: 24rpx 8rpx;
                    border-bottom: solid 2rpx #eeeeee;
                    .group_4 {
                        margin-left: 24rpx;
                        .text_6 {
                            line-height: 30.18rpx;
                        }
                        .text_7 {
                            margin-top: 24rpx;
                            line-height: 22.42rpx;
                        }
                        .group_5 {
                            margin-top: 40rpx;
                            line-height: 24.6rpx;
                            .text_8 {
                                line-height: 24.44rpx;
                            }
                        }
                    }
                    .view {
                        margin-top: 112rpx;
                    }
                    .text_9 {
                        line-height: 29.72rpx;
                    }
                    .text_10 {
                        margin-top: 24rpx;
                        line-height: 22.44rpx;
                    }
                    .group_7 {
                        margin-top: 40rpx;
                        line-height: 24.6rpx;
                        .text_11 {
                            line-height: 24.44rpx;
                        }
                    }
                    .view_2 {
                        margin-top: 116rpx;
                    }
                }
                .group_8 {
                    padding: 24rpx 8rpx;
                    .text_12 {
                        line-height: 30.12rpx;
                    }
                    .text_13 {
                        margin-top: 24rpx;
                        line-height: 22.44rpx;
                    }
                    .group_9 {
                        margin-top: 40rpx;
                        line-height: 24.6rpx;
                        .text_14 {
                            line-height: 24.44rpx;
                        }
                    }
                    .view_3 {
                        margin-top: 116rpx;
                    }
                }
                .image_8 {
                    width: 160rpx;
                    height: 160rpx;
                }
                .font_6 {
                    font-size: 24rpx;
                    line-height: 17.3rpx;
                    font-weight: 700;
                    color: #f2130d;
                }
                .font_4 {
                    font-size: 32rpx;
                    line-height: 24.6rpx;
                    color: #f2130d;
                }
                .font_7 {
                    font-size: 24rpx;
                    line-height: 24.6rpx;
                    color: #999999;
                }
                .text-wrapper_2 {
                    padding: 16rpx 0;
                    background-color: #5db66f;
                    border-radius: 400rpx;
                    mix-blend-mode: NOTTHROUGH;
                    width: 136rpx;
                    height: 48rpx;
                    .font_5 {
                        font-size: 24rpx;
                        line-height: 18rpx;
                        color: #ffffff;
                    }
                }
                .section_5 {
                    margin-right: 4rpx;
                    overflow: hidden;
                    border-radius: 16rpx;
                    background-image: linear-gradient(90deg, #2e7d32 0%, #66bb6a 100%);
                    border-top: solid 2rpx #eeeeee;
                    .section_6 {
                        background-image: linear-gradient(90deg, #2e7d32 0%, #66bb6a 100%);
                        height: 96rpx;
                    }
                    .text_15 {
                        line-height: 26.02rpx;
                    }
                    .pos_4 {
                        position: absolute;
                        left: 30.26rpx;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                    .text-wrapper_3 {
                        padding: 8rpx 0;
                        background-color: #ffffff;
                        border-radius: 12rpx;
                        width: 146.14rpx;
                        .text_16 {
                            color: #2e7d32;
                            line-height: 25.92rpx;
                        }
                    }
                    .pos_3 {
                        position: absolute;
                        right: 29.24rpx;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
                .group_10 {
                    padding: 32rpx 8rpx 16rpx;
                    .text_17 {
                        margin-top: 24rpx;
                        line-height: 22.44rpx;
                    }
                    .group_11 {
                        margin-top: 40rpx;
                        line-height: 24.6rpx;
                        .text_18 {
                            line-height: 24.44rpx;
                        }
                    }
                    .view_4 {
                        margin-top: 112rpx;
                    }
                }
            }
            .section_7 {
                margin-top: 24rpx;
                padding: 32rpx 8rpx 32rpx 24rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                .grid {
                    margin-right: 16rpx;
                    height: 160rpx;
                    display: grid;
                    grid-template-rows: repeat(2, minmax(0, 1fr));
                    grid-template-columns: repeat(2, minmax(0, 1fr));
                    row-gap: 26rpx;
                    column-gap: 20rpx;
                    .grid-item_2 {
                        padding: 16rpx 24rpx;
                        border-radius: 12rpx;
                        border: solid 2rpx #eeeeee;
                        .image_9 {
                            width: 20rpx;
                            height: 28rpx;
                        }
                        .text_20 {
                            line-height: 22.06rpx;
                        }
                    }
                    .image_10 {
                        width: 16rpx;
                        height: 10rpx;
                    }
                    .grid-item_4 {
                        padding: 16rpx;
                        border-radius: 12rpx;
                        border: solid 2rpx #eeeeee;
                        .image_11 {
                            width: 28rpx;
                            height: 29rpx;
                        }
                        .text_21 {
                            line-height: 21.98rpx;
                        }
                        .image_12 {
                            width: 28rpx;
                            height: 28rpx;
                        }
                        .text_22 {
                            line-height: 22.42rpx;
                        }
                    }
                }
                .grid-item {
                    padding: 24rpx 16rpx;
                    border-radius: 12rpx;
                    border: solid 2rpx #eeeeee;
                    .text_19 {
                        line-height: 22.12rpx;
                    }
                    .image_13 {
                        width: 25rpx;
                        height: 25rpx;
                    }
                    .text_23 {
                        color: #999999;
                        line-height: 22.32rpx;
                    }
                }
                .group_12 {
                    margin-right: 16rpx;
                }
                .text-wrapper_4 {
                    margin-left: 8rpx;
                    padding: 24rpx 0;
                    background-color: #ff9800;
                    border-radius: 200rpx;
                    .text_24 {
                        line-height: 25.96rpx;
                    }
                }
            }
            .font_3 {
                font-size: 24rpx;
                line-height: 22.16rpx;
                color: #555555;
            }
            .font_8 {
                font-size: 28rpx;
                line-height: 24.6rpx;
                color: #ffffff;
            }
        }
        .font {
            font-size: 32rpx;
            line-height: 29.8rpx;
            color: #333333;
        }
    }
</style>
