e:\Downloads\农场 (1).png
<script setup lang="ts">
    import { reactive } from 'vue'

    // 页面数据
    const pageData = reactive({
        // 顶部标题和搜索
        header: {
            title: '农知',
            searchPlaceholder: '请输入搜索内容',
            searchIcon: '/static/images/codefun/b8d30fcc0b08b881a41c8b3e35b7f8ac.png',
            bannerImage: '/static/images/codefun/9c9b4490074d34c2eb0b1e2e2e543fce.png',
        },

        // 分类标签
        categoryTabs: [
            { id: 1, name: '精选' },
            { id: 2, name: '养殖技术' },
            { id: 3, name: '水果种植' },
            { id: 4, name: '蔬菜种植' },
        ],

        // 推荐专家
        recommendedExperts: {
            title: '推荐专家',
            moreText: '更多',
            experts: [
                {
                    id: 1,
                    image: '/static/images/codefun/8e8583cf1cc6c34b1ddde37e17ad1adc.png',
                    name: '李大树',
                    specialty: '果树专家',
                    solvedCount: '以解答311个问题',
                    actionText: '免费咨询',
                },
                {
                    id: 2,
                    image: '/static/images/codefun/dd9d3f56e39526077ca1f71ba4092491.png',
                    name: '张曼',
                    specialty: '蔬菜专家',
                    solvedCount: '以解答186个问题',
                    actionText: '免费咨询',
                },
                {
                    id: 3,
                    image: '/static/images/codefun/8e8583cf1cc6c34b1ddde37e17ad1adc.png',
                    name: '王于苗',
                    specialty: '果树专家',
                    solvedCount: '以解答311个问题',
                    actionText: '免费咨询',
                },
            ],
        },

        // 专家问答
        expertQAs: {
            title: '专家问答',
            moreText: '更多',
            questions: [
                {
                    id: 1,
                    question: '苹果树春季该如何进行修剪？',
                    answer: '春季修剪应在萌芽前进行，重点去除病弱枝...',
                    followers: '24人关注',
                },
                {
                    id: 2,
                    question: '水稻秧苗发黄是什么原因？',
                    answer: '主要原因可能是养分不足、浸水过多或病虫害...',
                    followers: '18人关注',
                },
                {
                    id: 3,
                    question: '大棚黄瓜叶子发卷怎么处理？',
                    answer: '可能是由于温度过高、水分不足或病毒感染...',
                    followers: '32人关注',
                },
            ],
        },

        // 精品课程
        premiumCourses: {
            title: '精品课程',
            moreText: '更多',
            courses: [
                {
                    id: 1,
                    image: '', // 使用section_11的背景图
                    title: '高效果园管理技术',
                    description: '全面提升果园产量与品质',
                    price: '¥99',
                    originalPrice: '¥129',
                    actionText: '马上学',
                    free: false,
                },
                {
                    id: 2,
                    image: '', // 使用section_12的背景图
                    title: '水稻病虫害防治专题',
                    description: '预防与治疗水稻常见问题',
                    price: '¥0',
                    originalPrice: '¥99',
                    actionText: '马上学',
                    free: true,
                    freeText: '免费',
                },
                {
                    id: 3,
                    image: '', // 使用section_13的背景图
                    title: '蔬菜大棚种植要点',
                    description: '温室蔬菜四季种植技巧',
                    price: '¥129',
                    originalPrice: '¥159',
                    actionText: '马上学',
                    free: false,
                },
                {
                    id: 4,
                    image: '', // 使用section_14的背景图
                    title: '珍珠鸡养殖技巧',
                    description: '珍珠鸡养殖技巧与常见问题',
                    price: '¥149',
                    originalPrice: '¥199',
                    actionText: '马上学',
                    free: false,
                },
            ],
        },

        // 推荐文章
        recommendedArticles: {
            title: '推荐文章',
            moreText: '更多',
            articles: [
                {
                    id: 1,
                    image: '/static/images/codefun/ea2c9cb4b1cb479a8164a6ad745a7a9d.png',
                    title: '春季麦田管理要点',
                    views: '7335',
                },
                {
                    id: 2,
                    image: '/static/images/codefun/3f49c887f73048daa48ecc834bc32e49.png',
                    title: '农作物施肥技术指南',
                    views: '3235',
                },
                {
                    id: 3,
                    image: '/static/images/codefun/17706769e0f74252bc26be7a373cc674.png',
                    title: '果树花期管理方法',
                    views: '1245',
                },
            ],
        },
    })

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

    // 查看更多推荐专家
    function onViewMoreExperts() {
        console.log('查看更多推荐专家')
        // 在这里添加具体的查看逻辑
    }

    // 专家点击事件
    function onExpertClick(expert: any) {
        console.log('点击专家:', expert)
        // 在这里添加具体的专家点击逻辑
    }

    // 免费咨询点击事件
    function onFreeConsultClick(expert: any) {
        console.log('点击免费咨询:', expert)
        // 在这里添加具体的免费咨询点击逻辑
    }

    // 查看更多专家问答
    function onViewMoreQAs() {
        console.log('查看更多专家问答')
        // 在这里添加具体的查看逻辑
    }

    // 问题点击事件
    function onQuestionClick(question: any) {
        console.log('点击问题:', question)
        // 在这里添加具体的问题点击逻辑
    }

    // 查看更多精品课程
    function onViewMoreCourses() {
        console.log('查看更多精品课程')
        // 在这里添加具体的查看逻辑
    }

    // 课程点击事件
    function onCourseClick(course: any) {
        console.log('点击课程:', course)
        // 在这里添加具体的课程点击逻辑
    }

    // 马上学点击事件
    function onStudyNowClick(course: any) {
        console.log('点击马上学:', course)
        // 在这里添加具体的马上学点击逻辑
    }

    // 查看更多推荐文章
    function onViewMoreArticles() {
        console.log('查看更多推荐文章')
        // 在这里添加具体的查看逻辑
    }

    // 文章点击事件
    function onArticleClick(article: any) {
        console.log('点击文章:', article)
        // 在这里添加具体的文章点击逻辑
    }
</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">{{ pageData.header.title }}</text>
                    <view class="codefun-flex-col codefun-self-stretch codefun-mt-20">
                        <view class="codefun-flex-row codefun-items-center section_2 !hidden">
                            <image class="image_5" :src="pageData.header.searchIcon" />
                            <text class="font_2 codefun-ml-8">{{ pageData.header.searchPlaceholder }}</text>
                        </view>
                        <image class="image_6" :src="pageData.header.bannerImage" />
                    </view>
                </view>
            </view>
            <view class="codefun-flex-col group_2">
                <view class="codefun-flex-row codefun-justify-around group_1">
                    <view
                        v-for="tab in pageData.categoryTabs"
                        :key="tab.id"
                        class="codefun-flex-col codefun-justify-start codefun-items-center"
                        :class="[tab.id === 1 ? 'section_3' : 'section_4']"
                        @click="onCategoryTabClick(tab)"
                    >
                        <view
                            class="codefun-flex-col codefun-justify-start"
                            :class="[
                                tab.id === 1 ? 'codefun-items-center' : 'codefun-items-start',
                                tab.id === 1 ? 'text-wrapper' : 'text-wrapper_1',
                            ]"
                        >
                            <text :class="[tab.id === 1 ? 'font_2' : 'font_3']">
                                {{ tab.name }}
                            </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">{{ pageData.recommendedExperts.title }}</text>
                        <text class="font_5 text_7" @click="onViewMoreExperts">{{
                            pageData.recommendedExperts.moreText
                        }}</text>
                    </view>
                    <view class="codefun-flex-row horiz-list codefun-mt-16">
                        <view
                            v-for="(expert, index) in pageData.recommendedExperts.experts"
                            :key="expert.id"
                            class="codefun-flex-col horiz-list-item"
                            :class="[
                                index === 0 ? 'section_5' : '',
                                index === 1 ? 'section_6' : '',
                                index === 2 ? 'section_7' : '',
                                index > 0 ? `codefun-ml-${index === 1 ? 10 : 10}` : '',
                            ]"
                            @click="onExpertClick(expert)"
                        >
                            <image
                                class="image_7"
                                :class="[index < 2 ? 'codefun-self-stretch' : '']"
                                :src="expert.image"
                            />
                            <view class="codefun-flex-row codefun-items-baseline codefun-self-stretch codefun-mt-12">
                                <text class="font text_8">{{ expert.name }}</text>
                                <text class="font_6 text_8 codefun-ml-8">{{ expert.specialty }}</text>
                            </view>
                            <text class="codefun-self-start font_7 text_8 codefun-mt-12">{{ expert.solvedCount }}</text>
                            <view
                                class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-start text-wrapper_3 codefun-mt-12"
                                @click.stop="onFreeConsultClick(expert)"
                            >
                                <text class="font_8">{{ expert.actionText }}</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">{{ pageData.expertQAs.title }}</text>
                        <text class="font_5 text_4" @click="onViewMoreQAs">{{ pageData.expertQAs.moreText }}</text>
                    </view>
                    <view class="codefun-flex-col section_10">
                        <view
                            v-for="(qa, index) in pageData.expertQAs.questions"
                            :key="qa.id"
                            class="codefun-flex-col"
                            :class="[index > 0 ? 'codefun-self-stretch codefun-mt-10' : 'codefun-self-stretch']"
                            @click="onQuestionClick(qa)"
                        >
                            <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">{{ qa.question }}</text>
                            </view>
                            <text
                                class="codefun-self-start font_11 codefun-mt-4"
                                :class="[`text_2${index === 0 ? '3' : index === 1 ? '6' : '9'}`]"
                            >
                                {{ qa.answer }}
                            </text>
                            <text
                                class="codefun-self-start font_14"
                                :class="[
                                    `text_2${index === 0 ? '3' : index === 1 ? '6' : '9'}`,
                                    index === 0 ? 'codefun-mt-10' : 'codefun-mt-10',
                                ]"
                            >
                                {{ qa.followers }}
                            </text>
                        </view>
                    </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">{{ pageData.premiumCourses.title }}</text>
                        <text class="codefun-self-start font_5 text_4" @click="onViewMoreCourses">{{
                            pageData.premiumCourses.moreText
                        }}</text>
                    </view>
                    <view class="codefun-flex-col section_10">
                        <view
                            v-for="(course, index) in pageData.premiumCourses.courses"
                            :key="course.id"
                            class="codefun-flex-row"
                            :class="[
                                index === 0 ? 'codefun-justify-center codefun-items-end' : '',
                                index === 1 ? 'codefun-justify-center codefun-mt-16' : '',
                                index === 2 ? 'codefun-items-end codefun-mt-16' : '',
                                index === 3 ? 'codefun-mt-16' : '',
                            ]"
                            @click="onCourseClick(course)"
                        >
                            <template v-if="index === 0">
                                <view class="section_11" />
                                <view class="codefun-flex-col codefun-items-start group_10 codefun-ml-12">
                                    <text class="font_10">{{ course.title }}</text>
                                    <text class="font_11 codefun-mt-8 single-line w-11em">{{
                                        course.description
                                    }}</text>
                                    <view class="codefun-flex-row codefun-items-center group_11 codefun-mt-8">
                                        <text class="font_13">{{ course.price }}</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">{{ course.originalPrice }}</text>
                                        </view>
                                    </view>
                                </view>
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_5 view_1 codefun-ml-12"
                                    @click.stop="onStudyNowClick(course)"
                                >
                                    <text class="font_8">{{ course.actionText }}</text>
                                </view>
                            </template>
                            <template v-else-if="index === 1">
                                <view class="codefun-flex-col codefun-justify-start codefun-items-start section_12">
                                    <view
                                        v-if="course.free"
                                        class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_7"
                                    >
                                        <text class="font_15 text_37">{{ course.freeText }}</text>
                                    </view>
                                </view>
                                <view class="codefun-flex-col codefun-self-center codefun-ml-12">
                                    <text class="font_10">{{ course.title }}</text>
                                    <text class="font_11 text_10 single-line w-11em">{{ course.description }}</text>
                                    <view class="codefun-flex-row codefun-items-baseline group_8">
                                        <text class="font_13">{{ course.price }}</text>
                                        <text class="font_14 text_34 codefun-ml-4">{{ course.originalPrice }}</text>
                                    </view>
                                </view>
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-start text-wrapper_5 view codefun-ml-12"
                                    @click.stop="onStudyNowClick(course)"
                                >
                                    <text class="font_8">{{ course.actionText }}</text>
                                </view>
                            </template>
                            <template v-else-if="index === 2">
                                <view class="codefun-shrink-0 section_13" />
                                <view class="codefun-flex-col codefun-items-start codefun-flex-1 group_12">
                                    <text class="font_10">{{ course.title }}</text>
                                    <text class="font_11 codefun-mt-10 single-line w-11em">{{
                                        course.description
                                    }}</text>
                                    <view class="codefun-flex-row codefun-items-center group_13 codefun-mt-10">
                                        <text class="font_13">{{ course.price }}</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">{{ course.originalPrice }}</text>
                                        </view>
                                    </view>
                                </view>
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_5"
                                    @click.stop="onStudyNowClick(course)"
                                >
                                    <text class="font_8">{{ course.actionText }}</text>
                                </view>
                            </template>
                            <template v-else-if="index === 3">
                                <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">{{ course.title }}</text>
                                        <text class="font_11 codefun-mt-8 single-line w-11em">
                                            {{ course.description }}
                                        </text>
                                        <view class="codefun-flex-row codefun-items-center group_13 codefun-mt-8">
                                            <text class="font_13">{{ course.price }}</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">{{ course.originalPrice }}</text>
                                            </view>
                                        </view>
                                    </view>
                                    <view
                                        class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 text-wrapper_5"
                                        @click.stop="onStudyNowClick(course)"
                                    >
                                        <text class="font_8">{{ course.actionText }}</text>
                                    </view>
                                </view>
                            </template>
                        </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">{{ pageData.recommendedArticles.title }}</text>
                        <text class="font_5 text_48" @click="onViewMoreArticles">{{
                            pageData.recommendedArticles.moreText
                        }}</text>
                    </view>
                    <view class="codefun-flex-col section_15">
                        <view
                            v-for="article in pageData.recommendedArticles.articles"
                            :key="article.id"
                            class="codefun-flex-row group_17"
                            :class="{ 'codefun-mt-32': article.id > 1 }"
                            @click="onArticleClick(article)"
                        >
                            <view class="w-200rpx h-124rpx">
                                <image class="w-full h-full" :src="article.image" mode="scaleToFill" />
                            </view>
                            <view class="flex-1 ml-4">
                                <text class="codefun-self-end font_16">{{ article.title }}</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">{{ article.views }}</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: 17rpx;
                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>
