<script setup lang="ts">
    import { useUserStore } from '@/store/modules/user'

    const userStore = useUserStore()

    function openAITools() {
        uni.navigateTo({
            animationType: 'slide-in-bottom',
            // 最新版 SDK Webview 嵌入版本，支持绑定用户 ID，支持自定义样式等
            url: `/pages/common/chat/webview?token=&userId=${userStore.getUserInfo?.id}`,
        })
    }

    function openStep() {
        uni.showModal({
            title: '温馨提示',
            content: '此处仅为信息展示显示',
            showCancel: false,
        })
    }
</script>

<template>
    <view class="codefun-flex-col page">
        <view class="codefun-flex-col codefun-justify-start codefun-relative group">
            <view class="codefun-flex-col codefun-justify-start codefun-items-start section_2">
                <view class="codefun-flex-col codefun-items-start section_3">
                    <text class="text_2">柑橘生长模型</text>
                    <view class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper codefun-mt-16">
                        <text class="font_12 text_3">智能预测全周期</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="codefun-flex-col codefun-relative group_3">
            <view class="codefun-flex-col section_4">
                <view class="codefun-flex-row equal-division">
                    <view class="codefun-flex-col equal-division-item group_4">
                        <image
                            class="codefun-self-center image_6"
                            src="/static/images/codefun/1d8e91708cae6b6244d183b5c3eb1c5e.png"
                        />
                        <view
                            class="codefun-flex-row codefun-justify-center codefun-items-baseline codefun-self-stretch group_7 codefun-mt-8"
                        >
                            <text class="font_3 text_4">幼苗</text>
                            <text class="font_4 codefun-ml-4">15天</text>
                        </view>
                    </view>
                    <view
                        class="codefun-flex-row codefun-justify-between equal-division-item equal-division-item_2 pl-0!"
                    >
                        <image
                            class="codefun-self-start image_9 image_10"
                            src="/static/images/codefun/ac7a11ec05eb9854a6d3ee34633c53c0.png"
                        />
                        <view class="codefun-flex-col group_6">
                            <image
                                class="codefun-self-center image_7"
                                src="/static/images/codefun/5d6c7fea65df7f4528d28301a632acca.png"
                            />
                            <view class="codefun-flex-row codefun-items-baseline codefun-self-center codefun-mt-8">
                                <text class="font_3">开花</text>
                                <text class="font_4 codefun-ml-4">35天</text>
                            </view>
                        </view>
                    </view>
                    <view class="codefun-flex-row codefun-justify-center group_5 equal-division-item_2">
                        <image
                            class="codefun-self-center image_9 pos_3"
                            src="/static/images/codefun/ac7a11ec05eb9854a6d3ee34633c53c0.png"
                        />
                        <view class="codefun-flex-col">
                            <image
                                class="codefun-self-center image_7"
                                src="/static/images/codefun/23995baf95335d84a302baeadeeeb5d3.png"
                            />
                            <view class="codefun-flex-row codefun-items-baseline codefun-self-stretch codefun-mt-8">
                                <text class="font_3 text_5">结果</text>
                                <text class="font_4 codefun-ml-4">60天</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="divider codefun-mt-8" />
                <view class="codefun-flex-row codefun-mt-8">
                    <view class="codefun-flex-col equal-division-item_3 group_9">
                        <text class="codefun-self-center font_2 text_7 !text-24">105天</text>
                        <text class="codefun-self-center font_5 text_11 codefun-mt-14">生长周期</text>
                    </view>
                    <view class="codefun-flex-col equal-division-item_3 group_9">
                        <text class="codefun-self-center font_2 text_7 !text-24">25℃</text>
                        <text class="codefun-self-center font_5 text_11 codefun-mt-14">适宜温度</text>
                    </view>
                    <view class="codefun-flex-col equal-division-item_3 group_9">
                        <text class="codefun-self-center font_2 text_7 !text-24">中等</text>
                        <text class="codefun-self-center font_5 text_11 codefun-mt-14">水分需求</text>
                    </view>
                    <view class="codefun-flex-col equal-division-item_3 group_9">
                        <text class="codefun-self-center font_2 text_7 !text-24">N-P-K平衡</text>
                        <text class="codefun-self-center font_5 text_11 codefun-mt-14">肥料推荐</text>
                    </view>
                </view>
            </view>
            <view class="codefun-flex-col group_12 codefun-mt-24">
                <view class="codefun-flex-row codefun-justify-between codefun-items-center">
                    <text class="font text_14">实际应用场景</text>
                    <text class="font_7 text_15">查看全部</text>
                </view>
                <view class="codefun-flex-row horiz-list group_13 codefun-mt-16">
                    <view class="codefun-flex-col horiz-list-item section_5">
                        <view class="codefun-flex-row codefun-items-center codefun-self-stretch">
                            <image class="image_11" src="/static/images/codefun/22109e59215c3e6f8e24b54d126d851f.png" />
                            <text class="font_7 text_16 codefun-ml-4">智能预警</text>
                        </view>
                        <text class="codefun-self-start font_12 text_18 codefun-mt-10">如何提前预防柑橘黄龙病？</text>
                        <view class="codefun-flex-col codefun-items-start codefun-self-stretch codefun-mt-10">
                            <text class="font_5">AI模型预测发病风险，提前7-10天</text>
                            <text class="font_5">预警</text>
                        </view>
                    </view>
                    <view class="codefun-flex-col horiz-list-item_2 section_6 mx-3.5">
                        <view class="codefun-flex-row codefun-items-center">
                            <image class="image_12" src="/static/images/codefun/93b830e77b49a5d5a885dba853cca4f2.png" />
                            <text class="font_7 text_17 codefun-ml-4">精准施肥</text>
                        </view>
                        <text class="font_12 text_19 codefun-mt-10">柑橘园精准水肥管理方案</text>
                        <view class="codefun-flex-col codefun-items-start equal-division codefun-mt-10">
                            <text class="font_5">根据生长阶段和土壤监测，</text>
                            <text class="font_5">智能调配水肥方案</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="codefun-flex-col codefun-mt-24">
                <text class="codefun-self-start font text_20">三步上手</text>
                <view class="codefun-flex-row codefun-items-start equal-division_2 section_7 codefun-mt-16">
                    <view class="codefun-flex-col equal-division-item_4 group_16" @click="openStep">
                        <image
                            class="codefun-self-center image_13"
                            src="/static/images/codefun/8d95c077ff410c467d25f1d02b84cd3c.png"
                        />
                        <view class="codefun-flex-col codefun-self-stretch codefun-mt-20">
                            <text class="codefun-self-center font_9">数据录入</text>
                            <text class="codefun-self-stretch font_10 text_23 codefun-mt-4">填写果园基本信息</text>
                        </view>
                    </view>
                    <view class="codefun-flex-col equal-division-item_5 group_17" @click="openStep">
                        <image
                            class="codefun-self-center image_14"
                            src="/static/images/codefun/e4453ccb0959797614bc6ffb5d62d56f.png"
                        />
                        <view class="codefun-flex-col codefun-self-stretch codefun-mt-16">
                            <view class="codefun-flex-col codefun-self-stretch group_20">
                                <image
                                    class="codefun-shrink-0 codefun-self-start image_9 image_16"
                                    src="/static/images/codefun/b31cf305e90b1547bca2725e5a2ea5be.png"
                                />
                                <text class="codefun-self-center font_9 text_22">模型选择</text>
                            </view>
                            <text class="codefun-self-center font_10 text_24">根据需求选择适用模型</text>
                        </view>
                    </view>
                    <view
                        class="codefun-flex-row codefun-justify-between equal-division-item_6 group_18"
                        @click="openStep"
                    >
                        <image
                            class="codefun-self-start image_9 image_17"
                            src="/static/images/codefun/b31cf305e90b1547bca2725e5a2ea5be.png"
                        />
                        <view class="codefun-flex-col group_19">
                            <image
                                class="codefun-self-center image_15"
                                src="/static/images/codefun/a8dc70a912aaa771eddc3a2bd607fdc3.png"
                            />
                            <view class="codefun-flex-col codefun-self-stretch codefun-mt-16">
                                <text class="codefun-self-center font_9 text_21">查看结果</text>
                                <text class="codefun-self-stretch font_5 text_25 mt-2">获取生长预测与建议</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="codefun-flex-col codefun-mt-24">
                <text class="codefun-self-start font text_26">AI农技助手</text>
                <view
                    class="codefun-flex-col codefun-self-stretch codefun-relative section_8 codefun-mt-16"
                    @click="openAITools"
                >
                    <text class="codefun-self-start font_2 text_27">Hi~有什么可以帮您吗？</text>
                    <view class="codefun-flex-col codefun-self-stretch group_21">
                        <view class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_3">
                            <text class="font_12 text_28 text_29">如何使用柑橘模型？</text>
                        </view>
                        <view
                            class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_3 codefun-mt-12"
                        >
                            <text class="font_12 text_28 text_30">水肥如何调整？</text>
                        </view>
                        <view
                            class="codefun-flex-col codefun-justify-start codefun-items-start text-wrapper_3 codefun-mt-12"
                        >
                            <text class="font_12 text_28 text_31">何时适合采摘？</text>
                        </view>
                    </view>
                    <image class="image_18 pos_4" src="/static/images/codefun/8ecf54ab157b99371d9e1fecfa1ef085.png" />
                </view>
            </view>
            <view class="codefun-flex-col codefun-mt-24">
                <view class="codefun-flex-row codefun-justify-between codefun-items-center group_22">
                    <text class="font">技术课堂</text>
                    <text class="font_7 text_32">更多</text>
                </view>
                <view class="codefun-flex-row section_9">
                    <view
                        class="codefun-flex-col codefun-justify-start codefun-items-center codefun-shrink-0 codefun-self-center image-wrapper"
                    >
                        <image class="image_19" src="/static/images/codefun/ad2e6d5cc57cc9e4a91adc18b3a155e2.png" />
                    </view>
                    <view class="codefun-flex-col codefun-flex-1 codefun-self-start group_23 codefun-ml-12">
                        <text class="codefun-self-start font_12 text_33">胡萝卜高产种植技术要点</text>
                        <view class="codefun-flex-row codefun-self-stretch codefun-mt-16">
                            <view class="codefun-flex-row codefun-items-center">
                                <image
                                    class="codefun-shrink-0 image_20"
                                    src="/static/images/codefun/74964a1e25c0e7d8c97198b99483e54a.png"
                                />
                                <text class="font_4 text_34 codefun-ml-4">12:30</text>
                            </view>
                            <view class="codefun-flex-row codefun-items-center codefun-ml-20">
                                <image
                                    class="codefun-shrink-0 image_21"
                                    src="/static/images/codefun/e8cae542eda3d68f054b3e0ce2afa242.png"
                                />
                                <text class="font_4 text_35 codefun-ml-6">99</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<style scoped lang="scss">
    .page {
        padding-bottom: 40rpx;
        background-color: #e6f5e8;
        mix-blend-mode: NOTTHROUGH;
        height: 100%;
        width: 100%;
        overflow-y: auto;
        overflow-x: hidden;
        .group {
            .section_2 {
                background-image: url('/static/images/codefun/c122979639a1f9d27d7c57245ab420a6.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                .section_3 {
                    padding: 184rpx 60rpx 120rpx;
                    background-image: linear-gradient(270.2deg, #00000000 0.1%, #00000080 99.9%);
                    mix-blend-mode: NOTTHROUGH;
                    width: 600rpx;
                    .text_2 {
                        color: #ffffff;
                        font-size: 40rpx;
                        line-height: 37.2rpx;
                        text-shadow: 0rpx 4rpx 8rpx #000000b3;
                    }
                    .text-wrapper {
                        padding: 8rpx 0;
                        background-image: linear-gradient(90deg, #43cf7c 0%, #5db66f00 100%);
                        border-radius: 200rpx;
                        width: 340rpx;
                        .text_3 {
                            margin-left: 24rpx;
                            color: #ffffff;
                            line-height: 26.24rpx;
                        }
                    }
                }
            }
            .section {
                padding: 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;
                }
            }
            .pos {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
            }
        }
        .group_3 {
            margin-top: -68rpx;
            padding-left: 28rpx;
            .section_4 {
                margin-right: 28rpx;
                padding-bottom: 12rpx;
                background-color: #f9fafb;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                backdrop-filter: blur(4rpx);
                .divider {
                    margin-right: 20rpx;
                    margin-left: 20rpx;
                    background-color: #eeeeee;
                    height: 2rpx;
                }
                .equal-division-item_3 {
                    flex: 1 1 174rpx;
                    justify-content: center !important;
                    .text_6 {
                        line-height: 23.88rpx;
                    }
                    .text_10 {
                        line-height: 22.22rpx;
                    }
                    .text_7 {
                        line-height: 21.98rpx;
                    }
                    .text_11 {
                        line-height: 22.2rpx;
                    }
                    .text_8 {
                        line-height: 26.16rpx;
                    }
                    .text-wrapper_2 {
                        padding: 8rpx 0;
                        overflow: hidden;
                        .text_12 {
                            line-height: 22.1rpx;
                        }
                    }
                    .text_9 {
                        line-height: 26.02rpx;
                    }
                    .font_6 {
                        font-size: 24rpx;
                        line-height: 20.18rpx;
                        color: #666666;
                    }
                    .text_13 {
                        line-height: 22.1rpx;
                    }
                }
                .group_8 {
                    padding: 16rpx;
                }
                .group_9 {
                    padding: 16rpx;
                }
                .group_10 {
                    padding: 16rpx;
                }
            }
            .group_12 {
                overflow-x: hidden;
                .text_14 {
                    line-height: 30.28rpx;
                }
                .text_15 {
                    margin-right: 24rpx;
                    line-height: 22.4rpx;
                }
                .horiz-list {
                    .horiz-list-item {
                        .image_11 {
                            width: 28rpx;
                            height: 30rpx;
                        }
                        .text_16 {
                            line-height: 22.16rpx;
                        }
                        .text_18 {
                            line-height: 26.18rpx;
                        }
                    }
                    .section_5 {
                        padding: 16rpx;
                        background-color: #ffffff;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        height: 198rpx;
                    }
                    .horiz-list-item_2 {
                        flex-shrink: 0;
                        .image_12 {
                            width: 28rpx;
                            height: 28rpx;
                        }
                        .text_17 {
                            line-height: 22.12rpx;
                        }
                        .text_19 {
                            margin-left: 8rpx;
                            line-height: 26.34rpx;
                        }
                    }
                    .section_6 {
                        padding: 16rpx;
                        background-color: #ffffff;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        height: 198rpx;
                    }
                }
                .group_13 {
                    overflow-x: auto;
                }
            }
            .font_5 {
                font-size: 24rpx;
                line-height: 32rpx;
                color: #666666;
            }
            .text_20 {
                line-height: 29.6rpx;
            }
            .equal-division_2 {
                position: relative;
                align-self: stretch;
                margin-right: 28rpx;
                .equal-division-item_4 {
                    margin-left: 40rpx;
                    .image_13 {
                        width: 48rpx;
                        height: 46rpx;
                    }
                    .text_23 {
                        text-align: center;
                    }
                }
                .group_16 {
                    padding: 8rpx 0;
                    width: 144rpx;
                }
                .equal-division-item_5 {
                    position: absolute;
                    left: 239.58rpx;
                    top: 50%;
                    transform: translateY(-50%);
                    .image_14 {
                        width: 48rpx;
                        height: 54rpx;
                    }
                    .group_20 {
                        height: 37.1rpx;
                        .image_16 {
                            margin-top: 16rpx;
                            top: -10rpx;
                        }
                        .text_22 {
                            margin-top: -40rpx;
                            line-height: 25.82rpx;
                        }
                    }
                    .text_24 {
                        text-align: center;
                        width: 144rpx;
                    }
                }
                .group_17 {
                    padding: 8rpx 0;
                    width: 240rpx;
                }
                .font_9 {
                    font-size: 28rpx;
                    line-height: 25.88rpx;
                    color: #000000;
                }
                .font_10 {
                    font-size: 24rpx;
                    line-height: 40rpx;
                    color: #999999;
                }
                .equal-division-item_6 {
                    position: absolute;
                    right: 23.84rpx;
                    top: 50%;
                    transform: translateY(-50%);
                    .image_17 {
                        align-self: center;
                    }
                    .group_19 {
                        width: 142rpx;
                        .image_15 {
                            width: 44rpx;
                            height: 44rpx;
                        }
                        .text_21 {
                            line-height: 25.84rpx;
                        }
                        .text_25 {
                            color: #999999;
                            text-align: center;
                        }
                    }
                }
                .group_18 {
                    padding: 8rpx 0;
                    width: 194.58rpx;
                }
            }
            .section_7 {
                padding: 16rpx 0;
                background-color: #f9fafb;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                backdrop-filter: blur(4rpx);
                border: solid 2rpx #ffffff;
            }
            .text_26 {
                line-height: 29.72rpx;
            }
            .section_8 {
                margin-right: 28rpx;
                padding: 56rpx 24rpx 24rpx;
                background-color: #f9fafb;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                backdrop-filter: blur(4rpx);
                .text_27 {
                    margin-left: 128rpx;
                    line-height: 26.1rpx;
                }
                .group_21 {
                    margin-top: 48rpx;
                    .text-wrapper_3 {
                        padding: 24rpx 0;
                        background-color: #5db66f1a;
                        border-radius: 16rpx;
                        .text_28 {
                            margin-left: 24rpx;
                        }
                        .text_29 {
                            line-height: 25.98rpx;
                        }
                        .text_30 {
                            line-height: 26.04rpx;
                        }
                        .text_31 {
                            line-height: 25.82rpx;
                        }
                    }
                }
                .image_18 {
                    width: 132rpx;
                    height: 134rpx;
                }
                .pos_4 {
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
            .font_2 {
                font-size: 28rpx;
                line-height: 25.88rpx;
                color: #5db66f;
            }
            .group_22 {
                padding-bottom: 32rpx;
                .text_32 {
                    margin-right: 24rpx;
                    line-height: 22.18rpx;
                }
            }
            .font_7 {
                font-size: 24rpx;
                line-height: 20.18rpx;
                color: #5db66f;
            }
            .section_9 {
                margin-right: 28rpx;
                padding: 24rpx;
                background-color: #f9fafb;
                border-radius: 16rpx;
                mix-blend-mode: NOTTHROUGH;
                backdrop-filter: blur(4rpx);
                .image-wrapper {
                    padding: 48rpx 0;
                    background-image: url('/static/images/codefun/5149f97303e2fa97daa823a1452dce11.png');
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    width: 240rpx;
                    height: 160rpx;
                    .image_19 {
                        width: 66rpx;
                        height: 66rpx;
                    }
                }
                .group_23 {
                    margin-top: 32rpx;
                    .text_33 {
                        line-height: 26.4rpx;
                    }
                    .image_20 {
                        width: 20rpx;
                        height: 20rpx;
                    }
                    .text_34 {
                        line-height: 18.14rpx;
                    }
                    .image_21 {
                        width: 22rpx;
                        height: 16rpx;
                    }
                    .text_35 {
                        line-height: 17.86rpx;
                    }
                }
            }
        }
        .equal-division {
            padding: 0 8rpx;
            .image_5 {
                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;
            }
            .equal-division-item {
                flex: 1 1 224.64rpx;
                .image_6 {
                    width: 42rpx;
                    height: 68rpx;
                }
                .group_7 {
                    padding-left: 24rpx;
                    .text_4 {
                        line-height: 25.84rpx;
                    }
                }
                .image_10 {
                    margin-top: 48rpx;
                }
                .group_6 {
                    width: 158.96rpx;
                    .image_8 {
                        margin-left: 24rpx;
                    }
                }
            }
            .group_4 {
                padding: 16rpx 0rpx 16rpx 0rpx;
            }
            .group_5 {
                position: relative;
                flex: 1 1 224.64rpx;
                .pos_3 {
                    position: absolute;
                    left: -0.74rpx;
                    top: 50%;
                    transform: translateY(-50%);
                }
                .text_5 {
                    line-height: 25.78rpx;
                }
            }
            .image_7 {
                width: 68rpx;
                height: 68rpx;
            }
            .font_3 {
                font-size: 28rpx;
                line-height: 25.88rpx;
                color: #333333;
            }
        }
        .equal-division-item_2 {
            padding: 16rpx;
        }
        .font {
            font-size: 32rpx;
            line-height: 29.76rpx;
            color: #333333;
        }
        .font_12 {
            font-size: 28rpx;
            line-height: 25.88rpx;
            color: #1a1a1a;
        }
        .image_9 {
            mix-blend-mode: NOTTHROUGH;
            width: 12rpx;
            height: 22rpx;
        }
        .font_4 {
            font-size: 24rpx;
            line-height: 20.18rpx;
            color: #999999;
        }
    }
</style>
