<script>
    export default {
        components: {},
        props: {},
        data() {
            return {}
        },

        methods: {},

        onPullDownRefresh() {
            setTimeout(function () {
                uni.stopPullDownRefresh()
                Message.toast('刷新成功')
            }, 1000)
        },
    }
</script>

<template>
    <view class="codefun-flex-col page">
        <view class="codefun-flex-col">
            <view class="codefun-flex-col section">
                <view class="codefun-flex-col mt-60rpx">
                    <text class="codefun-self-center font_9 text">农知</text>
                    <view class="codefun-flex-col codefun-self-stretch codefun-mt-20">
                        <view class="codefun-flex-row codefun-items-center section_2">
                            <image class="image_5" src="/static/images/codefun/b8d30fcc0b08b881a41c8b3e35b7f8ac.png" />
                            <text class="font_2 codefun-ml-8">请输入搜索内容</text>
                        </view>
                        <image
                            class="image_6 codefun-mt-12"
                            src="/static/images/codefun/9c9b4490074d34c2eb0b1e2e2e543fce.png"
                        />
                    </view>
                </view>
            </view>
            <view class="codefun-flex-col group_2">
                <view class="codefun-flex-row codefun-justify-around group_1">
                    <view class="codefun-flex-col codefun-justify-start codefun-items-center section_3">
                        <view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
                            <text class="font_2">精选</text>
                        </view>
                    </view>
                    <view class="codefun-flex-col codefun-justify-start codefun-items-center section_4">
                        <view class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_1">
                            <text class="font_3">养殖技术</text>
                        </view>
                    </view>
                    <view class="codefun-flex-col codefun-justify-start codefun-items-center section_4">
                        <view class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_1">
                            <text class="font_3">水果种植</text>
                        </view>
                    </view>
                    <view class="codefun-flex-col codefun-justify-start codefun-items-center section_4">
                        <view class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_1">
                            <text class="font_3">蔬菜种植</text>
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-col group_3 mt-25">
                    <view class="codefun-flex-row codefun-justify-between codefun-items-baseline">
                        <text class="font_4">推荐专家</text>
                        <text class="font_5 text_7">更多</text>
                    </view>
                    <view class="codefun-flex-row horiz-list codefun-mt-16">
                        <view class="codefun-flex-col horiz-list-item section_5">
                            <image
                                class="codefun-self-stretch image_7"
                                src="/static/images/codefun/8e8583cf1cc6c34b1ddde37e17ad1adc.png"
                            />
                            <view class="codefun-flex-row codefun-items-baseline codefun-self-stretch codefun-mt-12">
                                <text class="font text_8">李大树</text>
                                <text class="font_6 text_8 codefun-ml-8">果树专家</text>
                            </view>
                            <text class="codefun-self-start font_7 text_8 codefun-mt-12">以解答311个问题</text>
                            <view
                                class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-start text-wrapper_3 codefun-mt-12"
                            >
                                <text class="font_8">免费咨询</text>
                            </view>
                        </view>
                        <view class="codefun-flex-col horiz-list-item section_6 codefun-ml-10">
                            <image
                                class="codefun-self-stretch image_7"
                                src="/static/images/codefun/dd9d3f56e39526077ca1f71ba4092491.png"
                            />
                            <view class="codefun-flex-row codefun-items-baseline codefun-self-stretch codefun-mt-12">
                                <text class="font text_8">张曼</text>
                                <text class="font_6 text_8 codefun-ml-8">蔬菜专家</text>
                            </view>
                            <text class="codefun-self-start font_7 text_8 codefun-mt-12">以解答186个问题</text>
                            <view
                                class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-start text-wrapper_3 codefun-mt-12"
                            >
                                <text class="font_8">免费咨询</text>
                            </view>
                        </view>
                        <view class="codefun-flex-col codefun-items-start horiz-list-item section_7 codefun-ml-10">
                            <image class="image_7" src="/static/images/codefun/8e8583cf1cc6c34b1ddde37e17ad1adc.png" />
                            <text class="font text_8 codefun-mt-12">王于苗</text>
                            <text class="font_7 text_8 codefun-mt-12">以解答311个问题</text>
                            <view
                                class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_3 codefun-mt-12"
                            >
                                <text class="font_8">免费咨询</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-col mt-25">
                    <view class="codefun-flex-row codefun-justify-between codefun-items-center group_5">
                        <text class="font_4">专家问答</text>
                        <text class="font_5 text_4">更多</text>
                    </view>
                    <view class="codefun-flex-col section_10">
                        <view class="codefun-flex-col codefun-self-stretch">
                            <view class="codefun-flex-row codefun-items-center codefun-self-stretch">
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
                                >
                                    <text class="font_9">Q</text>
                                </view>
                                <text class="font_10 codefun-ml-8">苹果树春季该如何进行修剪？</text>
                            </view>
                            <text class="codefun-self-start font_11 codefun-mt-4 text_23">
                                春季修剪应在萌芽前进行，重点去除病弱枝...
                            </text>
                        </view>
                        <text class="codefun-self-start font_14 text_23 codefun-mt-10">24人关注</text>
                        <view class="codefun-flex-col codefun-self-stretch codefun-mt-10">
                            <view class="codefun-flex-row codefun-items-center codefun-self-stretch">
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
                                >
                                    <text class="font_9">Q</text>
                                </view>
                                <text class="font_10 codefun-ml-8">水稻秧苗发黄是什么原因？</text>
                            </view>
                            <text class="codefun-self-start font_11 codefun-mt-4 text_23">
                                主要原因可能是养分不足、浸水过多或病虫害...
                            </text>
                        </view>
                        <text class="codefun-self-start font_14 text_26 codefun-mt-10">18人关注</text>
                        <view class="codefun-flex-col codefun-self-stretch codefun-mt-10">
                            <view class="codefun-flex-row codefun-items-center codefun-self-stretch">
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4"
                                >
                                    <text class="font_9">Q</text>
                                </view>
                                <text class="font_10 codefun-ml-8">大棚黄瓜叶子发卷怎么处理？</text>
                            </view>
                            <text class="codefun-self-start font_11 codefun-mt-4 text_23">
                                可能是由于温度过高、水分不足或病毒感染...
                            </text>
                        </view>
                        <text class="codefun-self-start font_14 text_29 codefun-mt-10">32人关注</text>
                    </view>
                </view>
                <view class="codefun-flex-col mt-25">
                    <view class="codefun-flex-row codefun-justify-between group_5">
                        <text class="codefun-self-center font_4">精品课程</text>
                        <text class="codefun-self-start font_5 text_4">更多</text>
                    </view>
                    <view class="codefun-flex-col section_10">
                        <view class="codefun-flex-row codefun-justify-center codefun-items-end">
                            <view class="section_11" />
                            <view class="codefun-flex-col codefun-items-start group_10 codefun-ml-12">
                                <text class="font_10">高效果园管理技术</text>
                                <text class="font_11 codefun-mt-8 single-line w-11em">全面提升果园产量与品质</text>
                                <view class="codefun-flex-row codefun-items-center group_11 codefun-mt-8">
                                    <text class="font_13">¥99</text>
                                    <view
                                        class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_10 codefun-ml-4"
                                    >
                                        <text class="font_14 text_34">¥129</text>
                                    </view>
                                </view>
                            </view>
                            <view
                                class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5 view_1 codefun-ml-12"
                            >
                                <text class="font_8">马上学</text>
                            </view>
                        </view>
                        <view class="codefun-flex-row codefun-justify-center codefun-mt-16">
                            <view class="codefun-flex-col codefun-justify-start codefun-items-start section_12">
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_7"
                                >
                                    <text class="font_15 text_37">免费</text>
                                </view>
                            </view>
                            <view class="codefun-flex-col codefun-self-center codefun-ml-12">
                                <text class="font_10">水稻病虫害防治专题</text>
                                <text class="font_11 text_10 single-line w-11em">预防与治疗水稻常见问题</text>
                                <view class="codefun-flex-row codefun-items-baseline group_8">
                                    <text class="font_13">¥0</text>
                                    <text class="font_14 text_34 codefun-ml-4">¥99</text>
                                </view>
                            </view>
                            <view
                                class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-start text-wrapper_5 view codefun-ml-12"
                            >
                                <text class="font_8">马上学</text>
                            </view>
                        </view>
                        <view class="codefun-flex-row codefun-items-end codefun-mt-16">
                            <view class="codefun-shrink-0 section_13" />
                            <view class="codefun-flex-col codefun-items-start codefun-flex-1 group_12">
                                <text class="font_10">蔬菜大棚种植要点</text>
                                <text class="font_11 codefun-mt-10 single-line w-11em">温室蔬菜四季种植技巧</text>
                                <view class="codefun-flex-row codefun-items-center group_13 codefun-mt-10">
                                    <text class="font_13">¥129</text>
                                    <view
                                        class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_10 codefun-ml-4"
                                    >
                                        <text class="font_14 text_34">¥159</text>
                                    </view>
                                </view>
                            </view>
                            <view
                                class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_5"
                            >
                                <text class="font_8">马上学</text>
                            </view>
                        </view>
                        <view class="codefun-flex-row codefun-mt-16">
                            <view class="codefun-shrink-0 section_14" />
                            <view class="codefun-flex-row codefun-items-end codefun-flex-1 group_14 codefun-ml-12">
                                <view class="codefun-flex-col codefun-items-start codefun-flex-1 group_27">
                                    <text class="font_10">珍珠鸡养殖技巧</text>
                                    <text class="font_11 codefun-mt-8 single-line w-11em">
                                        珍珠鸡养殖技巧与常见问题
                                    </text>
                                    <view class="codefun-flex-row codefun-items-center group_13 codefun-mt-8">
                                        <text class="font_13">¥149</text>
                                        <view
                                            class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_10 codefun-ml-4"
                                        >
                                            <text class="font_14 text_34">¥199</text>
                                        </view>
                                    </view>
                                </view>
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_5"
                                >
                                    <text class="font_8">马上学</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-col mt-25">
                    <view class="codefun-flex-row codefun-justify-between codefun-items-center group_16">
                        <text class="font_4">推荐文章</text>
                        <text class="font_5 text_48">更多</text>
                    </view>
                    <view class="codefun-flex-col section_15">
                        <view class="codefun-flex-row group_17">
                            <view class="w-200rpx h-124rpx">
                                <image
                                    class="w-full h-full"
                                    src="/static/images/codefun/ea2c9cb4b1cb479a8164a6ad745a7a9d.png"
                                    mode="scaleToFill"
                                />
                            </view>
                            <view class="flex-1 ml-4">
                                <text class="codefun-self-end font_16">春季麦田管理要点</text>
                                <view class="codefun-flex-row codefun-items-center codefun-self-stretch codefun-mt-20">
                                    <image
                                        class="image_3"
                                        src="/static/images/codefun/775d59654c837323ede8ad7db6d99db3.png"
                                    />
                                    <text class="font_7 codefun-ml-4">7335</text>
                                </view>
                            </view>
                        </view>
                        <view class="codefun-flex-row group_17 codefun-mt-32">
                            <view class="w-200rpx h-124rpx">
                                <image
                                    class="w-full h-full"
                                    src="/static/images/codefun/3f49c887f73048daa48ecc834bc32e49.png"
                                    mode="scaleToFill"
                                />
                            </view>
                            <view class="flex-1 ml-4">
                                <text class="codefun-self-end font_16">农作物施肥技术指南</text>
                                <view class="codefun-flex-row codefun-items-center codefun-self-stretch codefun-mt-20">
                                    <image
                                        class="image_3"
                                        src="/static/images/codefun/775d59654c837323ede8ad7db6d99db3.png"
                                    />
                                    <text class="font_7 codefun-ml-4">3235</text>
                                </view>
                            </view>
                        </view>
                        <view class="codefun-flex-row group_17 codefun-mt-32">
                            <view class="w-200rpx h-124rpx">
                                <image
                                    class="w-full h-full"
                                    src="/static/images/codefun/17706769e0f74252bc26be7a373cc674.png"
                                    mode="scaleToFill"
                                />
                            </view>
                            <view class="flex-1 ml-4">
                                <text class="codefun-self-end font_16">果树花期管理方法</text>
                                <view class="codefun-flex-row codefun-items-center codefun-self-stretch codefun-mt-20">
                                    <image
                                        class="image_3"
                                        src="/static/images/codefun/775d59654c837323ede8ad7db6d99db3.png"
                                    />
                                    <text class="font_7 codefun-ml-4">1245</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
    .mt-25 {
        margin-top: 50rpx;
    }
    .page {
        padding-bottom: 72rpx;
        background-color: #e6f5e8;
        mix-blend-mode: NOTTHROUGH;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        height: 100%;
        padding-bottom: 20rpx;

        .section {
            padding: 24rpx 28rpx;
            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_4 {
                    width: 48rpx;
                    height: 22rpx;
                }
            }
            .text {
                color: #ffffffe6;
            }
            .section_2 {
                padding: 16rpx;
                background-color: #ffffff4d;
                border-radius: 2000rpx;
                mix-blend-mode: NOTTHROUGH;
                border: solid 1rpx #ffffff7d;
            }
            .image_6 {
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                width: 92.5333vw;
                height: 37.3333vw;
            }
        }
        .group_2 {
            padding-left: 24rpx;
            padding-top: 16rpx;
            .group_1 {
                padding: 0 8rpx;
                .section_3 {
                    padding: 16rpx 0;
                    background-color: #5db66f;
                    border-radius: 20000rpx;
                    mix-blend-mode: NOTTHROUGH;
                    width: 119.12rpx;
                    height: 72rpx;
                    .text-wrapper {
                        padding: 8rpx 0;
                        overflow: hidden;
                        width: 56rpx;
                    }
                }
                .section_4 {
                    padding: 16rpx 0;
                    background-color: #ffffff;
                    border-radius: 20000rpx;
                    mix-blend-mode: NOTTHROUGH;
                    width: 174.22rpx;
                    height: 72rpx;
                    .text-wrapper_1 {
                        padding: 8rpx 0;
                        overflow: hidden;
                        width: 112rpx;
                        .font_3 {
                            font-size: 28rpx;
                            line-height: 28rpx;
                            color: #1f2937;
                        }
                    }
                }
            }
            .group_3 {
                overflow-x: hidden;
                .text_7 {
                    margin-right: 24rpx;
                }
                .horiz-list {
                    overflow-x: auto;
                    margin-right: 24rpx;

                    .horiz-list-item {
                        flex-shrink: 0;
                        .section_8 {
                            border-radius: 16rpx;
                            mix-blend-mode: NOTTHROUGH;
                            background-color: #00000000;
                            height: 240rpx;
                        }
                        .font {
                            font-size: 32rpx;
                            line-height: 32rpx;
                            color: #333333;
                        }
                        .text_8 {
                            text-transform: uppercase;
                        }
                        .font_6 {
                            font-size: 24rpx;
                            line-height: 24rpx;
                            color: #666666;
                        }
                        .text-wrapper_3 {
                            padding: 16rpx 0;
                            background-color: #5db66f;
                            border-radius: 2000rpx;
                            mix-blend-mode: NOTTHROUGH;
                            width: 160rpx;
                        }
                        .image_7 {
                            border-radius: 16rpx;
                            mix-blend-mode: NOTTHROUGH;
                            width: 240rpx;
                            height: 240rpx;
                        }
                    }
                    .section_5 {
                        padding: 24rpx;
                        background-color: #ffffff;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        width: 288rpx;
                        height: 460rpx;
                    }
                    .section_6 {
                        padding: 24rpx;
                        background-color: #ffffff;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        height: 460rpx;
                    }
                    .section_7 {
                        padding: 24rpx 24rpx 24rpx 24rpx;
                        background-color: #ffffff;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        height: 460rpx;
                    }
                }
            }
            .group_5 {
                padding-bottom: 32rpx;
                .text_4 {
                    margin-right: 24rpx;
                }
            }
            .font_4 {
                font-size: 32rpx;
                line-height: 32rpx;
                font-weight: 600;
                color: #333333;
            }
            .font_5 {
                font-size: 24rpx;
                line-height: 24rpx;
                color: #5db66f;
            }
            .section_10 {
                margin-right: 28rpx;
                padding: 24rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                .text-wrapper_4 {
                    padding: 8rpx 0;
                    background-color: #5db66f;
                    border-radius: 20000rpx;
                    mix-blend-mode: NOTTHROUGH;
                    width: 48rpx;
                    height: 48rpx;
                }
                .font_10 {
                    font-size: 28rpx;
                    line-height: 28rpx;
                    color: #000000;
                }
                .font_11 {
                    font-size: 24rpx;
                    line-height: 24rpx;
                    color: #6b7280;
                }
                .font_14 {
                    font-size: 24rpx;
                    line-height: 24rpx;
                    color: #9ca3af;
                }
                .text_23 {
                    margin-left: 64rpx;
                }
                .text_26 {
                    margin-left: 64rpx;
                }
                .text_29 {
                    margin-left: 64rpx;
                }
                .section_11 {
                    overflow: hidden;
                    background-image: url(https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/68c3b8c1d54496f19f6c4ca0/68c3b919ed31a90011da9937/17580177052721295100.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    width: 220rpx;
                    height: 140rpx;
                }
                .group_10 {
                    margin-top: 8rpx;
                    margin-bottom: 8rpx;
                    .group_11 {
                        padding: 4rpx 0;
                        width: 110.5rpx;
                    }
                }
                .text-wrapper_5 {
                    padding: 16rpx 0;
                    border-radius: 8rpx;
                    overflow: hidden;
                    background-color: #5db66f;
                    mix-blend-mode: NOTTHROUGH;
                    width: 120rpx;
                    height: 48rpx;
                }
                .view_1 {
                    margin-bottom: 4rpx;
                }
                .section_12 {
                    padding: 8rpx 0 104rpx;
                    overflow: hidden;
                    background-image: url(https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/68c3b8c1d54496f19f6c4ca0/68c3b919ed31a90011da9937/17580177052709218705.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    width: 220rpx;
                    height: 140rpx;
                    .text-wrapper_7 {
                        padding: 8rpx 0;
                        background-color: #4cd964;
                        border-radius: 4rpx;
                        mix-blend-mode: NOTTHROUGH;
                        width: 60rpx;
                        .text_37 {
                            color: #ffffff;
                        }
                    }
                }
                .text_10 {
                    margin-top: 16rpx;
                }
                .group_8 {
                    margin-top: 32rpx;
                }
                .font_13 {
                    font-size: 28rpx;
                    line-height: 28rpx;
                    color: #4cd964;
                }
                .text_34 {
                    text-decoration: line-through;
                }
                .view {
                    margin-top: 88rpx;
                }
                .section_13 {
                    overflow: hidden;
                    background-image: url(https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/68c3b8c1d54496f19f6c4ca0/68c3b919ed31a90011da9937/17580177052733138801.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    width: 220rpx;
                    height: 140rpx;
                }
                .group_12 {
                    margin: 8rpx 0 8rpx 24rpx;
                }
                .text-wrapper_10 {
                    padding: 8rpx 0;
                    width: 54rpx;
                    height: 32rpx;
                }
                .view_2 {
                    margin-left: 40rpx;
                }
                .section_14 {
                    overflow: hidden;
                    background-image: url(https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/68c3b8c1d54496f19f6c4ca0/68c3b919ed31a90011da9937/17580177055787756558.png);
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    width: 220rpx;
                    height: 140rpx;
                }
                .group_14 {
                    margin-top: 8rpx;
                    margin-bottom: 8rpx;
                    .group_27 {
                        margin-bottom: 4rpx;
                    }
                }
                .group_13 {
                    padding: 4rpx 0;
                    width: 126.78rpx;
                }
            }
            .font_8 {
                font-size: 24rpx;
                line-height: 24rpx;
                color: #ffffff;
            }
            .group_16 {
                padding-bottom: 40rpx;
                .text_48 {
                    margin-right: 24rpx;
                }
            }
            .section_15 {
                margin-right: 28rpx;
                padding: 48rpx 24rpx;
                background-color: #ffffff;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                .group_17 {
                    padding: 0 24rpx;
                    .group_15 {
                        padding: 0 72rpx;
                    }
                }
                .font_16 {
                    font-size: 32rpx;
                    line-height: 32rpx;
                    font-weight: 600;
                    color: #1d2129;
                }
                .image_8 {
                    margin-left: 104rpx;
                }
            }
            .font_7 {
                font-size: 24rpx;
                line-height: 24rpx;
                color: #999999;
            }
        }
        .font_2 {
            font-size: 28rpx;
            line-height: 28rpx;
            color: #ffffff;
        }
        .font_9 {
            font-size: 32rpx;
            line-height: 32rpx;
            color: #ffffff;
        }
        .image_3 {
            mix-blend-mode: NOTTHROUGH;
            width: 30rpx;
            height: 22rpx;
        }
        .equal-division {
            padding: 16rpx 8rpx;
            background-color: #ffffff;
            mix-blend-mode: NOTTHROUGH;
            border-top: solid 1rpx #e7e7e7;
            .group_19 {
                flex: 1 1 146.74rpx;
            }
            .equal-division-item {
                padding: 8rpx 0;
            }
        }
        .image_5 {
            width: 32rpx;
            height: 32rpx;
        }
        .font_15 {
            font-size: 20rpx;
            line-height: 20rpx;
            color: #666666;
        }
    }
</style>
