<script>
    export default {
        components: {},
        props: {},
        data() {
            return {
                items: [null, null, null],
            }
        },

        methods: {},
    }
</script>

<template>
    <view class="codefun-flex-col page">
        <view class="codefun-flex-col group">
            <view class="codefun-flex-col section">
                <view class="codefun-flex-row codefun-justify-center codefun-relative group_3">
                    <text class="codefun-self-start font text">我的</text>
                    <image
                        class="codefun-self-center image_5 pos"
                        src="/static/images/codefun/acd10a2959857f5912a96306bc56976e.png"
                    />
                </view>
                <view class="codefun-flex-row codefun-justify-between codefun-items-center group_4">
                    <view class="codefun-flex-row">
                        <image class="image_6" src="/static/images/codefun/8653455b786fbf94ae1c3946f11e7d40.png" />
                        <view class="codefun-flex-col group_5 codefun-ml-8">
                            <view class="codefun-flex-row codefun-items-center codefun-self-stretch">
                                <text class="font_2 text_2">007农场</text>
                                <view
                                    class="codefun-flex-row codefun-items-center codefun-shrink-0 section_2 codefun-ml-6"
                                >
                                    <image
                                        class="codefun-shrink-0 image_7"
                                        src="/static/images/codefun/b6079649e1f0ba231d158cb10bea118f.png"
                                    />
                                    <text class="font_3 text_3 codefun-ml-4">已认证农场主</text>
                                </view>
                            </view>
                            <text class="codefun-self-start font_1 codefun-mt-10">华北绿色农业示范基地</text>
                        </view>
                    </view>
                    <image class="image_8 image_9" src="/static/images/codefun/1458747d012f7cb820f99627876e8fa6.png" />
                </view>
                <view class="codefun-flex-col codefun-justify-start section_3">
                    <view class="codefun-flex-row">
                        <view class="codefun-flex-col codefun-items-center group_6 equal-division-item">
                            <text class="font_4">44</text>
                            <text class="font_5 codefun-mt-16">我的基地</text>
                        </view>
                        <view class="codefun-flex-col codefun-items-center group_6 equal-division-item codefun-ml-32">
                            <text class="font_4">¥3266</text>
                            <text class="font_5 codefun-mt-16">累计收益</text>
                        </view>
                        <view class="codefun-flex-col codefun-items-center group_6 equal-division-item codefun-ml-32">
                            <text class="font_4">8</text>
                            <text class="font_5 codefun-mt-16">服务订单</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="codefun-flex-col codefun-relative group_7">
                <view class="codefun-flex-col">
                    <view class="codefun-flex-row codefun-justify-between codefun-items-center section_12">
                        <view class="codefun-flex-row group_8">
                            <image class="image_10" src="/static/images/codefun/41d4366b8b071c40d285a8f48c696d8a.png" />
                            <view class="codefun-flex-col group_9 codefun-ml-12">
                                <text class="codefun-self-start font">消息中心</text>
                                <view
                                    class="codefun-flex-col codefun-justify-start codefun-items-start codefun-self-stretch text-wrapper_2 codefun-mt-4"
                                >
                                    <text class="font_7">预警通知/服务进度/订单状态</text>
                                </view>
                            </view>
                        </view>
                        <view class="codefun-flex-row codefun-items-center group_10">
                            <view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper">
                                <text class="font_1">6</text>
                            </view>
                            <image
                                class="image_11 codefun-ml-12"
                                src="/static/images/codefun/f29a8c39eb37da965d0a764a567a1c77.png"
                            />
                        </view>
                    </view>
                    <view class="codefun-flex-row equal-division codefun-mt-12">
                        <view class="codefun-flex-col section_5 section_11">
                            <view class="codefun-flex-row codefun-self-stretch">
                                <view class="codefun-flex-row codefun-items-center codefun-flex-1">
                                    <image
                                        class="codefun-shrink-0 image_10"
                                        src="/static/images/codefun/a1b5d5fd677e3e3c32cdfe7a476aee19.png"
                                    />
                                    <view class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-ml-8">
                                        <text class="font">资源库</text>
                                        <text class="font_8 codefun-mt-8">38个资源可用</text>
                                    </view>
                                </view>
                                <image
                                    class="codefun-shrink-0 codefun-self-start image_11 image_12 codefun-ml-8"
                                    src="/static/images/codefun/f29a8c39eb37da965d0a764a567a1c77.png"
                                />
                            </view>
                            <text class="codefun-self-stretch font_7 codefun-mt-10">合同模板/政策文件/财务表</text>
                            <view
                                class="codefun-flex-col codefun-justify-start codefun-items-center codefun-self-start view codefun-mt-10"
                            >
                                <text class="font_6 text_14">离线可用</text>
                            </view>
                        </view>
                        <view class="codefun-flex-col section_5 section_11 codefun-ml-12">
                            <view class="codefun-flex-row codefun-self-stretch">
                                <image
                                    class="codefun-shrink-0 image_10"
                                    src="/static/images/codefun/d38158bc612aa1c6a022fae41afd8a42.png"
                                />
                                <view
                                    class="codefun-flex-col codefun-items-start codefun-flex-1 codefun-self-center group_12"
                                >
                                    <text class="font">物联设备</text>
                                    <text class="font_8 codefun-mt-8">2台在线</text>
                                </view>
                                <image
                                    class="codefun-shrink-0 codefun-self-start image_11 image_13"
                                    src="/static/images/codefun/f29a8c39eb37da965d0a764a567a1c77.png"
                                />
                            </view>
                            <text class="codefun-self-stretch font_7 codefun-mt-10">灌溉设备/气象站绑定管理</text>
                            <view
                                class="codefun-flex-row codefun-justify-evenly codefun-items-center codefun-self-start view_2 codefun-mt-10"
                            >
                                <image
                                    class="image_14"
                                    src="/static/images/codefun/2ff61f748e26b18760ca166aa8cfa15a.png"
                                />
                                <text class="font_3">添加设备</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-col codefun-mt-24">
                    <view class="codefun-flex-row codefun-justify-between codefun-items-center group_13">
                        <text class="font_2">常用资源</text>
                        <text class="font_3 text_16">全部</text>
                    </view>
                    <view class="codefun-flex-col list">
                        <view
                            class="codefun-flex-row codefun-justify-between codefun-items-center list-item codefun-mt-24"
                            v-for="(item, index) in items"
                            :key="index"
                        >
                            <view class="codefun-flex-row">
                                <image
                                    class="image_15"
                                    src="/static/images/codefun/38f8cccf12ace58fd9cd4612dce944b0.png"
                                />
                                <view class="codefun-flex-col codefun-items-start group_14 codefun-ml-12">
                                    <text class="font_9">水稻种植合同模版</text>
                                    <text class="font_6 codefun-mt-12">125kb</text>
                                </view>
                            </view>
                            <view class="codefun-flex-col codefun-justify-start codefun-items-center text-wrapper_4">
                                <text class="font_10">下载</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="codefun-flex-col codefun-mt-24">
                    <view class="codefun-flex-row codefun-justify-between codefun-items-baseline">
                        <text class="font_2">我的设备</text>
                        <text class="font_3 text_22">添加设备</text>
                    </view>
                    <view class="codefun-flex-col codefun-mt-16">
                        <view class="codefun-flex-col section_12">
                            <view class="codefun-flex-row codefun-justify-between codefun-items-center">
                                <view class="codefun-flex-row codefun-items-center">
                                    <image
                                        class="image_17"
                                        src="/static/images/codefun/8bd62352939b47e71f09a93a6ab344b2.png"
                                    />
                                    <view class="codefun-flex-col codefun-items-start codefun-ml-8">
                                        <text class="font_11">智能灌溉控制器</text>
                                        <text class="font_6 codefun-mt-12">上次链接：10分钟前</text>
                                    </view>
                                </view>
                                <view class="codefun-flex-row codefun-items-center">
                                    <image
                                        class="codefun-shrink-0 image_18"
                                        src="/static/images/codefun/e9da7be7465ae5310ccbc8a61ec653af.png"
                                    />
                                    <text class="font_6 text_24 codefun-ml-4">正常</text>
                                </view>
                            </view>
                            <view class="codefun-flex-row codefun-justify-between codefun-items-center codefun-mt-16">
                                <view class="codefun-flex-row codefun-items-center">
                                    <image
                                        class="image_17"
                                        src="/static/images/codefun/81937c2666c800cf5966c29c2891b7c4.png"
                                    />
                                    <view class="codefun-flex-col codefun-items-start codefun-ml-8">
                                        <text class="font_11">智能灌溉控制器</text>
                                        <text class="font_6 codefun-mt-12">上次链接：10分钟前</text>
                                    </view>
                                </view>
                                <view class="codefun-flex-row codefun-items-center">
                                    <image
                                        class="codefun-shrink-0 image_18"
                                        src="/static/images/codefun/1d16bdeaf73b863640e5855843a54682.png"
                                    />
                                    <text class="font_6 codefun-ml-4">离线</text>
                                </view>
                            </view>
                        </view>
                        <view class="codefun-flex-col section_9 codefun-mt-12">
                            <view class="codefun-flex-row codefun-justify-between codefun-items-center">
                                <view class="codefun-flex-row codefun-items-center">
                                    <image
                                        class="codefun-shrink-0 image_19"
                                        src="/static/images/codefun/e4267d4e96c1020d60dfbbf315b662cb.png"
                                    />
                                    <text class="font_13 codefun-ml-8">在线客服</text>
                                </view>
                                <image
                                    class="image_20"
                                    src="/static/images/codefun/543b9b7cb3072527207b45b678ca5794.png"
                                />
                            </view>
                            <view class="codefun-flex-col codefun-mt-20">
                                <view class="codefun-flex-row codefun-justify-between codefun-items-center">
                                    <view class="codefun-flex-row codefun-items-center">
                                        <image
                                            class="codefun-shrink-0 image_21"
                                            src="/static/images/codefun/46ebd858a611104ee741fc252ca6f0ce.png"
                                        />
                                        <text class="font_13 codefun-ml-8">帮助中心</text>
                                    </view>
                                    <image
                                        class="image_20"
                                        src="/static/images/codefun/0314db942874f91963bc16e91b9798bc.png"
                                    />
                                </view>
                                <view
                                    class="codefun-flex-row codefun-justify-between codefun-items-center codefun-mt-20"
                                >
                                    <view class="codefun-flex-row codefun-items-center">
                                        <image
                                            class="codefun-shrink-0 image_8"
                                            src="/static/images/codefun/559cc3a424e888da63761cafa26dad82.png"
                                        />
                                        <text class="font_13 codefun-ml-8">问题反馈</text>
                                    </view>
                                    <image
                                        class="image_20"
                                        src="/static/images/codefun/0314db942874f91963bc16e91b9798bc.png"
                                    />
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

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

        .group {
            height: 2020rpx;
            .section {
                padding: 24rpx 20rpx 88rpx;
                background-image: url('/static/images/codefun/7a5dc4ee864fe55da98b41c14ee3b931.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                .group_2 {
                    margin-right: 8rpx;
                    padding: 0 12rpx;
                    .image {
                        border-radius: 64rpx;
                        width: 108rpx;
                        height: 42rpx;
                    }
                    .image_2 {
                        mix-blend-mode: NOTTHROUGH;
                        width: 34rpx;
                        height: 22rpx;
                    }
                    .image_3 {
                        mix-blend-mode: NOTTHROUGH;
                        width: 30rpx;
                        height: 22rpx;
                    }
                    .image_4 {
                        width: 48rpx;
                        height: 22rpx;
                    }
                }
                .group_3 {
                    margin-right: 8rpx;
                    margin-top: 42rpx;
                    padding: 16rpx 8rpx 0;
                    .text {
                        color: #ffffffe6;
                    }
                    .image_5 {
                        mix-blend-mode: NOTTHROUGH;
                        width: 44rpx;
                        height: 42rpx;
                    }
                    .pos {
                        position: absolute;
                        right: 8rpx;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
                .group_4 {
                    margin-right: 8rpx;
                    margin-top: 56rpx;
                    .image_6 {
                        mix-blend-mode: NOTTHROUGH;
                        border-radius: 50%;
                        width: 96rpx;
                        height: 96rpx;
                    }
                    .group_5 {
                        margin-top: 8rpx;
                        margin-bottom: 8rpx;
                        .text_2 {
                            color: #ffffff;
                        }
                        .section_2 {
                            padding: 8rpx;
                            background-color: #ffffff;
                            border-radius: 400rpx;
                            mix-blend-mode: NOTTHROUGH;
                            height: 42rpx;
                            .image_7 {
                                mix-blend-mode: NOTTHROUGH;
                                width: 18rpx;
                                height: 12rpx;
                            }
                            .text_3 {
                                font-size: 22rpx;
                                line-height: 22rpx;
                            }
                        }
                    }
                    .image_9 {
                        margin-right: 8rpx;
                    }
                }
                .section_3 {
                    margin-right: 16rpx;
                    margin-top: 24rpx;
                    padding: 32rpx 0;
                    background-color: #ffffff;
                    border-radius: 16rpx;
                    mix-blend-mode: NOTTHROUGH;
                    .group_6 {
                        flex: 1 1 186.88rpx;
                        .font_4 {
                            font-size: 36rpx;
                            line-height: 36rpx;
                            font-weight: 600;
                            color: #20602d;
                        }
                        .font_5 {
                            font-size: 28rpx;
                            line-height: 28rpx;
                            color: #4e5969;
                        }
                    }
                }
            }
            .group_7 {
                margin-top: -64rpx;
                padding: 0 20rpx;
                .section_12 {
                    margin-right: 16rpx;
                    padding: 24rpx;
                    background-color: #ffffff;
                    border-radius: 16rpx;
                    mix-blend-mode: NOTTHROUGH;
                    .group_8 {
                        overflow: hidden;
                        width: 411.4rpx;
                        height: 80rpx;
                        .group_9 {
                            padding-top: 8rpx;
                            overflow: hidden;
                            width: 307.4rpx;
                            height: 80rpx;
                            .text-wrapper_2 {
                                padding: 8rpx 0;
                                overflow: hidden;
                                width: 308rpx;
                            }
                        }
                    }
                    .group_10 {
                        margin-right: 8rpx;
                        .text-wrapper {
                            padding: 8rpx 0;
                            background-color: #ff5454;
                            border-radius: 20000rpx;
                            mix-blend-mode: NOTTHROUGH;
                            width: 40rpx;
                            height: 40rpx;
                        }
                    }
                    .image_17 {
                        border-radius: 24rpx;
                        width: 92rpx;
                        height: 92rpx;
                    }
                    .font_11 {
                        font-size: 28rpx;
                        line-height: 28rpx;
                        color: #15161a;
                    }
                    .image_18 {
                        width: 72rpx;
                        height: 12rpx;
                    }
                    .text_24 {
                        color: #13e000;
                    }
                }
                .equal-division {
                    margin-right: 16rpx;
                    .section_5 {
                        flex: 1 1 336rpx;
                        .font_8 {
                            font-size: 24rpx;
                            line-height: 24rpx;
                            color: #4cd964;
                        }
                        .image_12 {
                            margin-right: 8rpx;
                            margin-top: 8rpx;
                        }
                        .view {
                            padding: 8rpx 0;
                            border-radius: 12rpx;
                            overflow: hidden;
                            background-color: #4fc5fd33;
                            mix-blend-mode: NOTTHROUGH;
                            width: 112rpx;
                            .text_14 {
                                color: #4fbdfb;
                            }
                        }
                        .group_12 {
                            margin-left: 16rpx;
                        }
                        .image_13 {
                            margin: 8rpx 8rpx 0 40rpx;
                        }
                        .view_2 {
                            padding: 0 16rpx;
                            border-radius: 12rpx;
                            overflow: hidden;
                            background-color: #5db66f1a;
                            mix-blend-mode: NOTTHROUGH;
                            width: 152rpx;
                            .image_14 {
                                width: 20rpx;
                                height: 20rpx;
                            }
                        }
                    }
                    .section_11 {
                        padding: 20rpx 24rpx;
                        background-color: #ffffff;
                        border-radius: 16rpx;
                        mix-blend-mode: NOTTHROUGH;
                        height: 220rpx;
                    }
                }
                .image_10 {
                    border-radius: 16rpx;
                    width: 80rpx;
                    height: 80rpx;
                }
                .image_11 {
                    mix-blend-mode: NOTTHROUGH;
                    width: 12rpx;
                    height: 22rpx;
                }
                .font_7 {
                    font-size: 24rpx;
                    line-height: 24rpx;
                    color: #6b7280;
                }
                .group_13 {
                    padding-bottom: 32rpx;
                    .text_16 {
                        margin-right: 8rpx;
                    }
                }
                .list {
                    margin-right: 16rpx;
                    padding: 32rpx 24rpx;
                    background-color: #ffffff;
                    border-radius: 16rpx;
                    mix-blend-mode: NOTTHROUGH;
                    .list-item {
                        &:first-child {
                            margin-top: 0;
                        }
                        .image_15 {
                            width: 54rpx;
                            height: 72rpx;
                        }
                        .group_14 {
                            margin-top: 8rpx;
                            .font_9 {
                                font-size: 28rpx;
                                line-height: 28rpx;
                                color: #333333;
                            }
                        }
                        .text-wrapper_4 {
                            padding: 16rpx 0;
                            background-color: #5db66f26;
                            border-radius: 400rpx;
                            mix-blend-mode: NOTTHROUGH;
                            width: 136rpx;
                            height: 48rpx;
                            .font_10 {
                                font-size: 24rpx;
                                line-height: 24rpx;
                                color: #16a34a;
                            }
                        }
                    }
                }
                .font_6 {
                    font-size: 24rpx;
                    line-height: 24rpx;
                    color: #999999;
                }
                .text_22 {
                    margin-right: 16rpx;
                }
                .section_9 {
                    margin-right: 16rpx;
                    padding: 28rpx 24rpx;
                    background-color: #ffffff;
                    border-radius: 16rpx;
                    mix-blend-mode: NOTTHROUGH;
                    .image_19 {
                        width: 40rpx;
                        height: 40rpx;
                    }
                    .font_13 {
                        font-size: 28rpx;
                        line-height: 28rpx;
                        color: #1d2129;
                    }
                    .image_21 {
                        width: 38rpx;
                        height: 38rpx;
                    }
                }
            }
            .font {
                font-size: 32rpx;
                line-height: 32rpx;
                color: #000000;
            }
            .font_1 {
                font-size: 24rpx;
                line-height: 24rpx;
                color: #ffffff;
            }
            .font_3 {
                font-size: 24rpx;
                line-height: 24rpx;
                color: #5db66f;
            }
            .font_2 {
                font-size: 32rpx;
                line-height: 32rpx;
                font-weight: 600;
                color: #333333;
            }
            .image_8 {
                width: 36rpx;
                height: 36rpx;
            }
        }
        .equal-division_2 {
            margin-right: 8rpx;
            .group_15 {
                flex: 1 1 148.4rpx;
                .font_14 {
                    font-size: 20rpx;
                    line-height: 20rpx;
                    color: #666666;
                }
            }
        }
        .section_6 {
            padding: 16rpx 0;
            background-color: #ffffff;
            mix-blend-mode: NOTTHROUGH;
            border-top: solid 1rpx #e7e7e7;
        }
        .equal-division-item {
            padding: 8rpx 0;
        }
        .image_20 {
            width: 32rpx;
            height: 32rpx;
        }
    }
</style>
