样式修改

src/api/model/nongchang.ts

@@ -2,8 +2,8 @@ import { otherHttp } from '/@/utils/http/axios'
 
 enum Api {
     zoneList = '/online/cgform/api/getData/01fd687ecb164aea914e92047e144d66', // 功能菜单数据
-    farmsList = '/farms/list', // 农场列表
-    farmsAdd = '/farms/add', // 添加农场
+    farmsList = '/farm/list', // 农场列表
+    farmsAdd = '/farm/add', // 添加农场
     agricultureModelsList = '/online/cgform/api/getData/7b2983df6ddf416aba68db8b0ab234ab', // 农业模型数据
     baseManagementList = '/online/cgform/api/getData/e4e4e6c901254b60b1e7a005097999ec', // 基地管理数据
     commonToolsList = '/online/cgform/api/getData/3a7fbb877f304b7d83935caa454859c4', // 常用工具数据
@@ -109,7 +109,7 @@ export function getFarmbaseList(params: any = {}) {
 }
 export function AllFarms(params = {}) {
     return otherHttp.get({
-        url: '/farms/getAllFarms',
+        url: '/farm/getAllFarms',
         params,
     })
 }
@@ -156,7 +156,27 @@ export function farmsAdd(params = {}) {
         params,
     })
 }
-
+/**
+ * @param params 
+ * @description: 编辑农场
+ * @returns 
+ */
+export function farmsEdit(params = {}) {
+    return otherHttp.post({
+        url: '/farm/edit',
+        params,
+    })
+}
+/**
+ * @param params 请求参数
+ * @description: id查询农场
+ */
+export function farmsGet(params = {}) {
+    return otherHttp.get({
+        url: '/farm/queryById',
+        params,
+    })
+}
 /**
  * @param params 请求参数
  * @description: 农业模型数据

src/pages.json

@@ -592,25 +592,10 @@
         {
             "path": "pages/nongchang/detail/index",
             "style": {
-                "navigationBarTitleText": "农场",
-                "enablePullDownRefresh": false,
-                "navigationBarBackgroundColor": "#5DB66F",
-                "navigationBarTextStyle": "white",
+                "navigationStyle": "custom",
+                "backgroundColorTop": "#5DB66F",
                 "backgroundColorBottom": "#F2F2F2",
-                "app-plus": {
-                    "titleNView": {
-                        "titleAlign": "left",
-                        "buttons": [
-                            {
-                                "text": "+ 添加基地",
-                                "fontSrc": "/static/uni.ttf",
-                                "color": "#fff",
-                                "fontSize": "26rpx",
-                                "width": "auto"
-                            }
-                        ]
-                    }
-                }
+                "enablePullDownRefresh": false
             }
         },
         // === AI 聊天助手 ===

src/pages/jidiguanli/add.vue

 <script setup lang="ts">
-    import { reactive, ref } from 'vue'
-    import { onLoad } from '@dcloudio/uni-app'
-    import { areaTree } from '@/utils/areaData'
-    import { useUserStore } from '@/store/modules/user'
-    import { useGlobSetting } from '/@/hooks/setting'
-    import { useDictStore } from '@/store/modules/dict'
-    import * as NongchangAPI from '@/api/model/nongchang'
-    import { useFarmStore } from '@/store/modules/farm'
-
-    const dictStore = useDictStore()
-    // 表单引用
-    const formRef = ref()
-    const loading = ref(false)
-    const show = reactive({
-        address: false,
-        farmType: false,
-    })
-    const options = reactive({
-        address: areaTree,
-        farmType: [],
-    })
-    // 表单数据
-    const formData = reactive({
+import { reactive, toRefs } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import { useUserStore } from '@/store/modules/user'
+import { useGlobSetting } from '/@/hooks/setting'
+import * as NongchangAPI from '@/api/model/nongchang'
+import { areaTree } from '@/utils/areaData'
+import { useDictStore } from '@/store/modules/dict'
+import { useFarmStore } from '@/store/modules/farm'
+
+const dictStore = useDictStore()
+const userStore = useUserStore()
+const globSetting = useGlobSetting()
+const farmStore = useFarmStore()
+onLoad((pageOptions) => {
+    // 页面加载时的初始化操作
+    const farmInfo = farmStore.getFarm
+    if (farmInfo) {
+        pageData.form.farmId = farmInfo.id
+    }
+    pageData.form.farmId = pageOptions.farmId
+})
+
+onShow(() => {
+    // 数据字典赋值
+    initDict()
+    pageData.form.userId = userStore.getUserInfo.id
+})
+
+const pageData = reactive({
+    loading: false,
+    show: {
+        growCrops: false,
+    },
+    options: {
+        address: [],
+        mainProducts: [],
+        growCrops: [],
+    },
+    form: {
+        id: '',
+        userId: '',
         farmId: '',
         baseName: '',
-        baseType: '',
-        baseTypeText: '',
         scale: '',
-        provinceName: '',
-        cityName: '',
-        districtName: '',
-        detailedAddress: '',
-        province: '',
         managerName: '',
         contactPhone: '',
-        idCard: '',
-        plantedCrops: '',
-        operationYears: '',
-        baseImages: [],
-        identityProveUrl: [], // 身份证明(身份证/营业执照图片)
-        landProveUrl: [], // 土地证明(土地证/国有土地使用证)
-        productionProveUrl: [], // 生产证明(生产许可证/种养许可证)
-        qualityCertificateUrl: [], // 质量证明(质量认证证书)
-        otherMaterialUrl: [], // 其他证明(其他证明)
-    })
-
-    // 表单验证规则
-    const rules = {
-        baseName: [
-            { required: true, message: '请输入基地名称', trigger: 'blur' },
-            { min: 2, max: 50, message: '基地名称长度在2-50个字符之间', trigger: 'blur' },
-        ],
-        baseType: [{ required: true, message: '请选择基地类型', trigger: 'change' }],
-        scale: [
-            {
-                validator: (rule: any, value: any, callback: any) => {
-                    if (!value || value === '') {
-                        callback(new Error('请输入规模'))
-                    } else if (!/^[1-9]\d*$/.test(value.toString())) {
-                        callback(new Error('规模必须为正整数'))
-                    } else {
-                        callback()
-                    }
-                },
-                trigger: ['blur', 'change'],
-            },
-        ],
-        province: [
-            {
-                required: true,
-                message: '请获取地址信息',
-                trigger: 'change',
-                // validator: () => formData.provinceName && formData.cityName && formData.districtName
-            },
-        ],
-        detailedAddress: [
-            { required: true, message: '请输入详细地址', trigger: 'blur' },
-            { min: 5, max: 200, message: '详细地址长度在5-200个字符之间', trigger: 'blur' },
-        ],
-        managerName: [
-            { required: true, message: '请输入负责人姓名', trigger: 'blur' },
-            { pattern: /^[\u4E00-\u9FA5]{2,10}$/, message: '姓名必须为2-10个汉字', trigger: 'blur' },
-        ],
-        contactPhone: [
-            { required: true, message: '请输入联系电话', trigger: 'blur' },
-            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' },
-        ],
-        idCard: [
-            { required: true, message: '请输入身份证号', trigger: 'blur' },
-            {
-                pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
-                message: '请输入正确的身份证号码',
-                trigger: 'blur',
-            },
-        ],
-        plantedCrops: [
-            { required: true, message: '请输入种植作物', trigger: 'blur' },
-            { min: 2, max: 100, message: '种植作物长度在2-100个字符之间', trigger: 'blur' },
-        ],
-        operationYears: [
-            {
-                validator: (rule: any, value: any, callback: any) => {
-                    if (value && !/^[1-9]\d*$/.test(value.toString())) {
-                        callback(new Error('经营年限必须为正整数'))
-                    } else {
-                        callback()
-                    }
-                },
-                message: '经营年限必须为正整数',
-                trigger: ['blur', 'change'],
-            },
-        ],
-        identityProveUrl: [{ required: true, message: '请上传身份证明', trigger: 'change', type: 'array' }],
-        landProveUrl: [{ required: true, message: '请上传场地证明', trigger: 'change', type: 'array' }],
-        productionProveUrl: [{ required: true, message: '请上传生产证明', trigger: 'change', type: 'array' }],
-    }
-    function handleChangeFarmType(e) {
-        formData.baseType = e.value
-        formData.baseTypeText = e.text
-        show.farmType = false
-    }
-    function handleChangeAddress(e) {
-        formData.province = e.result
-        formData.provinceName = e.text[0]
-        formData.cityName = e.text[1]
-        formData.districtName = e.text[2]
-        show.address = false
-    }
-
-    const userStore = useUserStore()
-    const globSetting = useGlobSetting()
-    const toastRef = ref()
-    // 文件上传
-    function afterRead(event, key) {
-        // 获取上传的文件列表
-        const files = event.file
-
-        // 如果没有文件，直接返回
-        if (!files || files.length === 0) {
-            return
+        growCrops: '',
+        growCropsText: '',
+    },
+    rules: [
+        {
+            name: 'baseName',
+            rule: ['required'],
+            msg: ['请输入基地名称'],
+        },
+        {
+            name: 'scale',
+            rule: ['required'],
+            msg: ['请输入面积'],
+        },
+        {
+            name: 'managerName',
+            rule: ['required'],
+            msg: ['请输入负责人'],
+        },
+        {
+            name: 'contactPhone',
+            rule: ['required'],
+            msg: ['请输入联系电话'],
+        },
+        {
+            name: 'growCrops',
+            rule: ['required'],
+            msg: ['请选择种植作物'],
+        },
+    ],
+})
+
+function initDict() {
+    pageData.options.address = areaTree
+    pageData.options.growCrops = dictStore.getDictList.crops_type.map((item) => {
+        return {
+            value: item.value,
+            text: item.text,
         }
-
-        // 记录成功上传的数量
-        let successCount = 0
-        const totalCount = files.length
-
-        // 遍历所有文件进行上传
-        files.forEach((file) => {
-            uni.uploadFile({
-                url: `${globSetting.apiUrl + globSetting.urlPrefix}/sys/common/upload`, // 直接使用上传接口URL
-                filePath: file.url,
-                name: 'file',
-                formData: {
-                    biz: 'temp',
-                },
-                header: {
-                    'X-Access-Token': userStore.getToken,
-                },
-                success: (res) => {
-                    if (res.statusCode === 200) {
-                        const data = JSON.parse(res.data)
-                        if (data.code === 200 || data.code === 0) {
-                            successCount++
-                            formData[key].push(data.message)
-
-                            // 所有文件上传完成
-                            if (successCount === totalCount) {
-                                toastRef.value.show({
-                                    type: 'success',
-                                    text: `成功上传${successCount}张图片`,
-                                })
-                            }
-                        }
-                    }
-                },
-                fail: () => {
+    })
+}
+function handleChangeGrowCrops(e) {
+    pageData.form.growCrops = e.value
+    pageData.form.growCropsText = e.text
+    pageData.show.growCrops = false
+}
+const toastRef = ref()
+
+const formRef = ref()
+function submit() {
+    formRef.value.validator(pageData.form, pageData.rules, true).then((res) => {
+        if (res.isPassed) {
+            pageData.loading = true
+            // 根据是否有ID决定调用编辑还是新增接口
+            const apiCall = pageData.form.id ? NongchangAPI.editFarmbase : NongchangAPI.addFarmbase
+            apiCall(pageData.form)
+                .then(() => {
                     toastRef.value.show({
-                        type: 'error',
-                        text: '部分图片上传失败',
+                        type: 'success',
+                        text: '添加基地成功',
                     })
-                },
-            })
-        })
-    }
-    // 删除图片
-    function deletePic(event: any, key) {
-        formData[key].splice(event.index, 1)
-    }
-
-    // 提交表单
-    async function submitForm() {
-        try {
-            // 先进行表单验证
-            const valid = await formRef.value.validate()
-            if (!valid) {
-                return
-            }
-
-            loading.value = true
-
-            // 准备提交数据
-            const submitData = { ...formData }
-
-            // 将数组字段转换为逗号分隔的字符串
-            const arrayFields = [
-                'baseImages',
-                'identityProveUrl',
-                'landProveUrl',
-                'productionProveUrl',
-                'qualityCertificateUrl',
-                'otherMaterialUrl',
-            ]
-
-            arrayFields.forEach((field) => {
-                if (Array.isArray(submitData[field])) {
-                    submitData[field] = submitData[field].filter((item) => item?.trim()).join(',')
-                }
-            })
-
-            // 根据是否有ID决定调用编辑还是新增接口
-            const apiCall = submitData.id ? NongchangAPI.editFarmbase : NongchangAPI.addFarmbase
-
-            try {
-                await apiCall(submitData)
-
-                uni.showToast({
-                    title: '提交成功',
-                    icon: 'success',
-                    duration: 1500,
+                    setTimeout(() => {
+                        uni.navigateBack()
+                    }, 800)
+                    // uni.switchTab({
+                    //     url: '/pages/mine/index',
+                    // })
                 })
-
-                // 延迟返回上一页
-                setTimeout(() => {
-                    uni.navigateBack()
-                }, 1500)
-            } catch (error) {
-                console.error('API调用失败:', error)
-                uni.showToast({
-                    title: error.message || '提交失败，请重试',
-                    icon: 'none',
-                    duration: 2000,
+                .finally(() => {
+                    pageData.loading = false
                 })
-            } finally {
-                loading.value = false
-            }
-        } catch (error) {
-            console.log('表单验证失败:', error)
-            loading.value = false
-            uni.showToast({
-                title: '请完善表单信息',
-                icon: 'none',
-                duration: 2000,
-            })
-        }
-    }
-    const farmStore = useFarmStore()
-    onLoad((pageOptions) => {
-        // 页面加载时的初始化操作
-        const farmInfo = farmStore.getFarm
-        if (farmInfo) {
-            formData.farmId = farmInfo.id
-        }
-        formData.farmId = pageOptions.farmId
-        console.log('pageOptions', pageOptions)
-        // 修复：修改页面上定义的 options 对象中的 farmType
-        options.farmType = dictStore.getDictList.farm_type.map((item) => {
-            return {
-                value: item.value,
-                text: item.text,
-            }
-        })
-        if (pageOptions.id) {
-            NongchangAPI.getFarmbaseInfoById({ id: pageOptions.id }).then((res) => {
-                if (res) {
-                    // 将 res 中的数据赋值到 formData 中，key 保持一致
-                    Object.keys(res).forEach((key) => {
-                        if (key in formData) {
-                            // 如果是数组类型的字段且返回的是字符串，需要转换为数组
-                            if (
-                                [
-                                    'baseImages',
-                                    'identityProveUrl',
-                                    'landProveUrl',
-                                    'productionProveUrl',
-                                    'qualityCertificateUrl',
-                                    'otherMaterialUrl',
-                                ].includes(key) &&
-                                typeof res[key] === 'string'
-                            ) {
-                                formData[key] = res[key].split(',').filter((item) => item.trim() !== '')
-                            } else {
-                                formData[key] = res[key]
-                            }
-                        }
-                    })
-                    formData.id = res.id
-                    formData.province = res.provinceName + res.cityName + res.districtName
-                    // 根据 res.baseType 的值从 options.farmType 中查找对应的文本
-                    if (res.baseType && options.farmType.length > 0) {
-                        const foundItem = options.farmType.find((item: any) => item.value === res.baseType)
-                        if (foundItem) {
-                            formData.baseTypeText = foundItem.text
-                        }
-                    }
-
-                    // 数据赋值完成后，延迟触发表单验证更新
-                    setTimeout(() => {
-                        if (formRef.value) {
-                            // 逐个验证可能存在问题的字段
-                            formRef.value.validateField('scale')
-                            formRef.value.validateField('operationYears')
-                            // 重新验证整个表单
-                            formRef.value.validate()
-                        }
-                    }, 200)
-                }
-            })
         }
     })
+}
 </script>
 
 <template>
-    <view class="container">
-        <u-form :model="formData" :rules="rules" ref="formRef" label-width="160rpx">
-            <!-- 基地基本信息 -->
-            <view class="section-title">基地基本信息</view>
-
-            <u-form-item label="基地名称" prop="baseName" required>
-                <u-input v-model="formData.baseName" placeholder="请输入基地名称" border="bottom" />
-            </u-form-item>
-
-            <u-form-item label="基地类型" prop="baseType" required class="clickable" @click="show.farmType = true">
-                <view class="address-display">
-                    <text :class="{ 'placeholder-text': !formData.baseTypeText }">
-                        {{ formData.baseTypeText || '请选择基地类型' }}
-                    </text>
+    <view class="page">
+        <view class="page-container">
+            <fui-form ref="formRef">
+                <!-- 第一组表单 -->
+                <view class="form-card">
+                    <fui-input
+                        required
+                        label="基地名称"
+                        labelSize="28"
+                        size="28"
+                        :labelWeight="400"
+                        labelWidth="auto"
+                        placeholder="请输入基地名称"
+                        v-model="pageData.form.baseName"
+                    />
+                    <fui-input
+                        required
+                        number
+                        label="面积"
+                        labelSize="28"
+                        size="28"
+                        :labelWeight="400"
+                        labelWidth="auto"
+                        placeholder="请输入基地面积"
+                        v-model="pageData.form.scale"
+                    >
+                        <view class="fontsize_28">亩</view>
+                    </fui-input>
+
+                    <fui-input
+                        required
+                        labelSize="28"
+                        size="28"
+                        :labelWeight="400"
+                        labelWidth="auto"
+                        label="负责人"
+                        placeholder="请输入联系人名称"
+                        v-model="pageData.form.managerName"
+                    />
+                    <fui-input
+                        required
+                        type="number"
+                        labelSize="28"
+                        size="28"
+                        :labelWeight="400"
+                        labelWidth="auto"
+                        label="负责人电话"
+                        placeholder="请输入负责人电话"
+                        v-model="pageData.form.contactPhone"
+                    />
+                    <fui-form-item
+                        required
+                        asterisk
+                        label="种植作物"
+                        labelSize="28"
+                        :labelWeight="400"
+                        labelWidth="auto"
+                    >
+                        <view class="time-input" @click="pageData.show.growCrops = true">
+                            <text class="select-text" :class="{ placeholder: !pageData.form.growCropsText }">
+                                {{ pageData.form.growCropsText || '请选择种植作物' }}
+                            </text>
+                        </view>
+                    </fui-form-item>
                 </view>
-            </u-form-item>
-
-            <u-form-item label="规模" prop="scale" required>
-                <u-input v-model="formData.scale" placeholder="请输入规模（亩）" border="bottom" type="number">
-                    <template #suffix>
-                        <text class="suffix-text">亩</text>
-                    </template>
-                </u-input>
-            </u-form-item>
 
-            <!-- 地址信息 -->
-            <view class="section-title">地址信息</view>
-
-            <u-form-item label="省市区" prop="province" required class="clickable" @click="show.address = true">
-                <view class="address-display">
-                    <text :class="{ 'placeholder-text': !formData.province }">
-                        {{ formData.province || '请选择省市区' }}
-                    </text>
+                <view class="submit-btn-box">
+                    <fui-button text="添加农场" bold radius="96rpx" @click="submit" />
                 </view>
-            </u-form-item>
-
-            <u-form-item label="详细地址" prop="detailedAddress" required>
-                <u-input v-model="formData.detailedAddress" placeholder="请输入详细地址" border="bottom" />
-            </u-form-item>
-
-            <!-- 负责人信息 -->
-            <view class="section-title">负责人信息</view>
-
-            <u-form-item label="负责人姓名" prop="managerName" required>
-                <u-input v-model="formData.managerName" placeholder="请输入负责人姓名" border="bottom" />
-            </u-form-item>
-
-            <u-form-item label="联系电话" prop="contactPhone" required>
-                <u-input v-model="formData.contactPhone" placeholder="请输入联系电话" border="bottom" type="number" />
-            </u-form-item>
-
-            <u-form-item label="身份证号" prop="idCard" required>
-                <u-input v-model="formData.idCard" placeholder="请输入身份证号" border="bottom" />
-            </u-form-item>
-
-            <!-- 经营信息 -->
-            <view class="section-title">经营信息</view>
-
-            <u-form-item label="种植作物" prop="plantedCrops" required>
-                <u-input v-model="formData.plantedCrops" placeholder="请输入种植作物，多个用逗号分隔" border="bottom" />
-            </u-form-item>
-
-            <u-form-item label="经营年限" prop="operationYears" required>
-                <u-input v-model="formData.operationYears" placeholder="请输入经营年限" border="bottom" type="number">
-                    <template #suffix>
-                        <text class="suffix-text">年</text>
-                    </template>
-                </u-input>
-            </u-form-item>
+            </fui-form>
+        </view>
 
-            <!-- 基地图片 -->
-            <view class="section-title">认证材料</view>
-            <u-form-item label="基地图片" prop="baseImages">
-                <u-upload
-                    :fileList="formData.baseImages"
-                    @after-read="(e) => afterRead(e, 'baseImages')"
-                    @delete="(e) => deletePic(e, 'baseImages')"
-                    name="1"
-                    multiple
-                    :maxCount="5"
-                    :previewFullImage="true"
-                />
-            </u-form-item>
-            <u-form-item label="身份证明" prop="identityProveUrl" required>
-                <div>
-                    <u-upload
-                        :fileList="formData.identityProveUrl"
-                        @after-read="(e) => afterRead(e, 'identityProveUrl')"
-                        @delete="(e) => deletePic(e, 'identityProveUrl')"
-                        name="identityProveUrl"
-                        multiple
-                        :maxCount="2"
-                        :previewFullImage="true"
-                    />
-                    <div><i>身份证/营业执照图片</i></div>
-                </div>
-            </u-form-item>
-            <u-form-item label="场地证明" prop="landProveUrl" required>
-                <div>
-                    <u-upload
-                        :fileList="formData.landProveUrl"
-                        @after-read="(e) => afterRead(e, 'landProveUrl')"
-                        @delete="(e) => deletePic(e, 'landProveUrl')"
-                        name="landProveUrl"
-                        multiple
-                        :maxCount="2"
-                        :previewFullImage="true"
-                    />
-                    <div><i>土地合同/场地照片</i></div>
-                </div>
-            </u-form-item>
-            <u-form-item label="生产证明" prop="productionProveUrl" required>
-                <div>
-                    <u-upload
-                        :fileList="formData.productionProveUrl"
-                        @after-read="(e) => afterRead(e, 'productionProveUrl')"
-                        @delete="(e) => deletePic(e, 'productionProveUrl')"
-                        name="productionProveUrl"
-                        multiple
-                        :maxCount="2"
-                        :previewFullImage="true"
-                    />
-                    <div><i>现场作业照片/产品照片</i></div>
-                </div>
-            </u-form-item>
-            <u-form-item label="质量证书">
-                <div>
-                    <u-upload
-                        :fileList="formData.qualityCertificateUrl"
-                        @after-read="(e) => afterRead(e, 'qualityCertificateUrl')"
-                        @delete="(e) => deletePic(e, 'qualityCertificateUrl')"
-                        name="qualityCertificateUrl"
-                        multiple
-                        :maxCount="2"
-                        :previewFullImage="true"
-                    />
-                    <div><i>质量认证证书</i></div>
-                </div>
-            </u-form-item>
-            <u-form-item label="其他材料">
-                <div>
-                    <u-upload
-                        :fileList="formData.otherMaterialUrl"
-                        @after-read="(e) => afterRead(e, 'otherMaterialUrl')"
-                        @delete="(e) => deletePic(e, 'otherMaterialUrl')"
-                        name="otherMaterialUrl"
-                        multiple
-                        :maxCount="2"
-                        :previewFullImage="true"
-                    />
-                    <div><i>其他补充材料</i></div>
-                </div>
-            </u-form-item>
-            <!-- 提交按钮 -->
-            <view class="submit-btn-container">
-                <u-button type="primary" @click="submitForm" :loading="loading">提交</u-button>
-            </view>
-        </u-form>
         <fui-picker
-            :show="show.address"
-            :options="options.address"
-            :linkage="true"
-            :layer="3"
-            @change="handleChangeAddress"
-            @cancel="show.address = false"
-        />
-        <fui-picker
-            :show="show.farmType"
+            :show="pageData.show.growCrops"
             :layer="1"
             :linkage="true"
-            :options="options.farmType"
-            @change="handleChangeFarmType"
-            @cancel="show.farmType = false"
+            :options="pageData.options.growCrops"
+            @change="handleChangeGrowCrops"
+            @cancel="pageData.show.growCrops = false"
         />
+
+        <fui-toast ref="toastRef" />
+        <fui-loading isFixed v-if="pageData.loading" backgroundColor="rgba(0, 0, 0, 0.4)" />
     </view>
 </template>
 
 <style lang="scss" scoped>
-    .container {
-        padding: 30rpx;
-        background-color: #f8f9fa;
-        min-height: 100vh;
+.page {
+    background: #e8f5e9;
+    min-height: 100vh;
+}
+
+.page-container {
+    padding: 28rpx;
+}
+
+.form-card {
+    background-color: #ffffff;
+    border-radius: 20rpx;
+    margin-bottom: 20rpx;
+    padding: 0;
+    overflow: hidden;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.upload-title {
+    padding: 28rpx;
+    font-size: 28rpx;
+    color: #333333;
+    font-weight: 400;
+}
+
+.upload-content {
+    padding: 0 32rpx 32rpx;
+}
+
+.submit-btn-box {
+    padding: 32rpx 0;
+}
+
+:deep(.fui-button) {
+    border-color: #ff9800 !important;
+    background: #ff9800 !important;
+}
+
+:deep(.fui-input__wrap),
+:deep(.fui-textarea__wrap) {
+    padding: 28rpx 32rpx;
+    // border-bottom: 1px solid #e5e5e5;
+}
+
+:deep(.fui-input__label),
+:deep(.fui-textarea__label) {
+    font-size: 28rpx;
+    color: #333333;
+    min-width: 160rpx;
+    font-weight: 400;
+}
+
+:deep(.fui-input__self),
+:deep(.fui-textarea__self) {
+    font-size: 28rpx;
+    color: #333333;
+}
+
+:deep(.fui-input__placeholder),
+:deep(.fui-textarea__placeholder) {
+    color: #d0d0d0;
+    font-size: 28rpx;
+}
+
+.form-card :deep(.fui-input__wrap:last-child),
+.form-card :deep(.fui-textarea__wrap:last-child) {
+    border-bottom: none;
+}
+
+::v-deep .uni-input-placeholder {
+    font-size: 28rpx !important;
+    color: #999999 !important;
+}
+:deep(.uni-textarea-placeholder) {
+    font-size: 28rpx !important;
+    color: #999999 !important;
+}
+:deep(.fui-button) {
+    width: 690rpx;
+    border-color: #5db66f !important;
+    background: #5db66f !important;
+}
+
+// 移除fui-form的默认样式
+:deep(.fui-form) {
+    background: transparent;
+}
+
+:deep(.fui-form__item) {
+    background: transparent;
+    border: none;
+    margin-bottom: 0;
+    padding: 0;
+}
+:deep(.fui-input__border-bottom) {
+    right: 32rpx !important;
+}
+.form-item-block {
+    padding: 24rpx 12rpx;
+    // border-bottom: 1px solid #e5e5e5;
+
+    &:last-child {
+        border-bottom: none;
     }
-
-    .section-title {
-        font-size: 32rpx;
-        font-weight: 600;
-        color: #333;
-        margin: 40rpx 0 20rpx 0;
-        padding-left: 20rpx;
-        border-left: 6rpx solid #5db66f;
+}
+
+.form-item-label {
+    font-size: 28rpx;
+    color: #333333;
+    font-weight: 400;
+    margin-bottom: 20rpx;
+
+    &.required::before {
+        content: '*';
+        color: #ff4d4f;
+        margin-right: 8rpx;
     }
-
-    .address-display {
+}
+
+.block-textarea {
+    width: 100%;
+    padding: 0rpx 12rpx !important;
+}
+
+.block-upload {
+    width: 100%;
+    padding: 0 20rpx;
+    :deep(.uni-file-picker__container) {
+        background-color: #fff !important;
+        border: unset !important;
+        border-radius: 16rpx;
+        min-height: 200rpx;
         display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 12rpx 18rpx;
-        background-color: transparent;
-        border-bottom: 2rpx solid #e4e7ed;
-        border-radius: 0;
-        cursor: pointer;
-        width: 100%;
-
-        text {
-            flex: 1;
-            font-size: 28rpx;
-            color: #333;
-        }
-
-        .placeholder-text {
-            color: #c0c4cc;
-        }
-    }
-
-    .suffix-text {
-        color: #909399;
-        margin-left: 10rpx;
+        justify-content: left !important;
     }
-
-    .submit-btn-container {
-        margin: 60rpx 0;
-
-        ::v-deep .u-button {
-            height: 88rpx;
-            border-radius: 44rpx;
-            font-size: 32rpx;
-            background-color: #5db66f;
-            border-color: #5db66f;
-        }
+}
+.select-text {
+    font-size: 28rpx;
+    color: #333333;
+    padding: 0 20rpx;
+    &.placeholder {
+        color: #999999;
     }
+}
 
-    // uview-plus 表单样式调整
-    ::v-deep .u-form-item {
-        margin-bottom: 40rpx;
-
-        .u-form-item__body {
-            padding: 0;
-            align-items: flex-start;
-        }
-
-        .u-form-item__body__left__content__label {
-            font-size: 28rpx;
-            color: #333;
-            font-weight: 500;
-            width: 160rpx;
-            flex-shrink: 0;
-            text-align: right;
-            padding-right: 20rpx;
-            line-height: 80rpx;
-        }
-
-        .u-form-item__body__right {
-            flex: 1;
-            min-width: 0;
-        }
-    }
-
-    ::v-deep .u-form-item__body__left__content__required {
-        position: static;
-        padding-right: 10rpx;
-    }
-
-    // 输入框样式优化 - 只保留下面的线
-    ::v-deep .u-input {
-        .u-input__content {
-            padding: 0;
-
-            .u-input__content__field-wrapper {
-                border: none;
-                // border-bottom: 2rpx solid #e4e7ed;
-                border-radius: 0;
-
-                .u-input__content__field-wrapper__field {
-                    font-size: 28rpx;
-                    // padding: 20rpx 0;
-                    height: auto;
-                    // min-height: 80rpx;
-                }
-
-                .u-input__content__field-wrapper__placeholder {
-                    color: #c0c4cc;
-                    font-size: 28rpx;
-                }
-            }
-
-            &.u-input--focus {
-                .u-input__content__field-wrapper {
-                    border-bottom-color: #5db66f;
-                }
-            }
-        }
-    }
-
-    // 上传组件样式调整
-    ::v-deep .u-upload {
-        margin-top: 10rpx;
-
-        .u-upload__wrap {
-            padding: 0;
-        }
-    }
-
-    // 选择器输入框样式
-    ::v-deep .u-input--readonly {
-        .u-input__content__field-wrapper {
-            background-color: transparent;
-
-            .u-input__content__field-wrapper__field {
-                color: #333;
-            }
-        }
-    }
-
-    // 表单项点击区域样式
-    ::v-deep .u-form-item {
-        &.clickable {
-            cursor: pointer;
-
-            .u-form-item__body__right {
-                position: relative;
-
-                &:after {
-                    content: '';
-                    position: absolute;
-                    top: 0;
-                    left: -20rpx;
-                    right: -20rpx;
-                    bottom: 0;
-                }
-            }
-        }
-    }
+.fui-input-wrapper {
+    cursor: pointer;
+}
 </style>

src/pages/linghuoyonggong/components/yonggongmap.vue

@@ -108,6 +108,7 @@ function createPopupHTML(employment) {
     if (!employment) return ''
 
     const distance = getDistanceText(employment)
+    const stars = getStarsHTML(employment)
     console.log('employment', employment)
     return `
         <div style="
@@ -163,9 +164,8 @@ function createPopupHTML(employment) {
             
             <div style="display: flex; align-items: center; justify-content: space-between;">
                 <div style="display: flex; align-items: center; gap: 4px;">
-                    <span style="color: #FF9800; font-size: 16px;">★★★★</span>
-                    <span style="color: #E0E0E0; font-size: 16px;">★</span>
-                    <span style="font-size: 13px; color: #666666; margin-left: 4px;">4</span>
+                    ${stars.html}
+                    <span style="font-size: 13px; color: #666666; margin-left: 4px;">${stars.rating}</span>
                 </div>
                 <a href="#" onclick="window.navigateToDetail('${employment.id}'); return false;" style="
                     display: inline-block;
@@ -403,6 +403,28 @@ function getDistanceText(employment) {
     }
     return `${distance.toFixed(1)}km`
 }
+
+// 生成星级HTML
+function getStarsHTML(employment) {
+    // 获取紧急程度，默认为0
+    const urgentdegree = Number(employment.urgentdegree) || 0
+    // 确保评级在0-5之间
+    const rating = Math.max(0, Math.min(5, urgentdegree))
+    
+    let html = ''
+    for (let i = 1; i <= 5; i++) {
+        if (i <= rating) {
+            html += '<span style="color: #FF9800; font-size: 16px;">★</span>'
+        } else {
+            html += '<span style="color: #E0E0E0; font-size: 16px;">★</span>'
+        }
+    }
+    
+    return {
+        html,
+        rating
+    }
+}
 // 发布用工
 function handlePublish() {
     Navigate.to('/pages/linghuoyonggong/form')

src/pages/nongchang/create-nongchang-form.vue

 <script setup lang="ts">
-    import { reactive, toRefs } from 'vue'
-    import { onShow } from '@dcloudio/uni-app'
-    import { useUserStore } from '@/store/modules/user'
-    import { useGlobSetting } from '/@/hooks/setting'
-    import * as NongchangAPI from '@/api/model/nongchang'
-    import { areaTree } from '@/utils/areaData'
-    import { useDictStore } from '@/store/modules/dict'
+import { reactive, toRefs } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import { useUserStore } from '@/store/modules/user'
+import { useGlobSetting } from '/@/hooks/setting'
+import * as NongchangAPI from '@/api/model/nongchang'
+import { areaTree } from '@/utils/areaData'
+import { useDictStore } from '@/store/modules/dict'
 
-    const dictStore = useDictStore()
-    const userStore = useUserStore()
-    const globSetting = useGlobSetting()
-
-    onShow(() => {
-        // 数据字典赋值
-        initDict()
-        pageData.form.userId = userStore.getUserInfo.id
-    })
-
-    const pageData = reactive({
-        loading: false,
-        show: {
-            address: false,
-            mainProducts: false,
-            farmType: false,
-        },
-        options: {
-            address: [],
-            mainProducts: [],
-            farmType: [],
-        },
-        form: {
-            userId: '',
-            farmName: '',
-            title: '',
-            farmType: '',
-            farmTypeText: '',
-            contactPhone: '',
-            contactPerson: '',
-            description: '',
-            address: '',
-            provinceName: '',
-            cityName: '',
-            districtName: '',
-            addressDetail: '',
-            mainBusiness: '',
-            mainProducts: '',
-            mainProductsText: '',
-            totalArea: '',
-            coverImage: '',
-        },
-        rules: [
-            {
-                name: 'farmName',
-                rule: ['required'],
-                msg: ['请输入农场名称'],
-            },
-            {
-                name: 'title',
-                rule: ['required'],
-                msg: ['请输入农场类型'],
-            },
-            {
-                name: 'farmType',
-                rule: ['required'],
-                msg: ['请选择农场类型'],
-            },
-            {
-                name: 'contactPhone',
-                rule: ['required'],
-                msg: ['请输入联系电话'],
-            },
-            {
-                name: 'contactPerson',
-                rule: ['required'],
-                msg: ['请输入联系人'],
-            },
-            {
-                name: 'description',
-                rule: ['required'],
-                msg: ['请输入农场简介'],
-            },
-            {
-                name: 'address',
-                rule: ['required'],
-                msg: ['请选择农场地址'],
-            },
-            {
-                name: 'addressDetail',
-                rule: ['required'],
-                msg: ['请填写详细地址'],
-            },
-            {
-                name: 'mainBusiness',
-                rule: ['required'],
-                msg: ['请填写主要业务'],
-            },
-            {
-                name: 'mainProducts',
-                rule: ['required'],
-                msg: ['请选择主要产品'],
-            },
-            {
-                name: 'totalArea',
-                rule: ['required'],
-                msg: ['请输入农场面积'],
-            },
-        ],
-    })
-
-    const { show, options, form } = toRefs(pageData)
-
-    function initDict() {
-        pageData.options.address = areaTree
-        pageData.options.mainProducts = dictStore.getDictList.main_business.map((item) => {
-            return {
-                value: item.value,
-                text: item.text,
-            }
+const dictStore = useDictStore()
+const userStore = useUserStore()
+const globSetting = useGlobSetting()
+onLoad((pageOptions) => {
+    if (pageOptions.id) {
+        uni.setNavigationBarTitle({
+            title: '编辑农场',
         })
-        pageData.options.farmType = dictStore.getDictList.farm_type.map((item) => {
-            return {
-                value: item.value,
-                text: item.text,
+        pageData.form.id = pageOptions.id;
+        NongchangAPI.farmsGet({ id: pageOptions.id }).then((res) => {
+            // 将 res 中的数据赋值到 formData 中，key 保持一致
+            Object.keys(res).forEach((key) => {
+                if (key in pageData.form) {
+                    pageData.form[key] = res[key]
+                }
+            })
+            pageData.form.provinceText = res.provinceName + '/' + res.cityName + '/' + res.districtName
+            
+            // 编辑模式下，如果已有示例图片，需要设置到上传组件中
+            if (res.coverImage) {
+                nextTick(() => {
+                    // 设置上传组件的初始文件
+                    const uploadComponent = uploadRef.value
+                    if (uploadComponent) {
+                        uploadComponent.clearFiles()
+                        // 构造文件对象格式，适配uni-file-picker的数据结构
+                        const fileItem = {
+                            url: res.coverImage,
+                            name: res.coverImage.split('/').pop() || 'image.jpg',
+                            extname: res.coverImage.split('.').pop() || 'jpg'
+                        }
+                        uploadComponent.files.push(fileItem)
+                    }
+                })
             }
-        })
-    }
-    function handleChangeFarmType(e) {
-        pageData.form.farmType = e.value
-        pageData.form.farmTypeText = e.text
-        pageData.show.farmType = false
-    }
-    function handleChangeMainProducts(e) {
-        pageData.form.mainProducts = e.value
-        pageData.form.mainProductsText = e.text
-        pageData.show.mainProducts = false
-    }
-    function handleChangeAddress(e) {
-        pageData.form.address = e.text.join('/')
-        pageData.form.provinceName = e.text[0]
-        pageData.form.cityName = e.text[1]
-        pageData.form.districtName = e.text[2]
-        pageData.show.address = false
-    }
-    const toastRef = ref()
-    const uploadRef = ref()
-    // 文件上传
-    function handleUpload(file) {
-        pageData.loading = true
-        uni.uploadFile({
-            url: `${globSetting.apiUrl + globSetting.urlPrefix}/sys/common/upload`, // 直接使用上传接口URL
-            filePath: file.tempFiles[0].path,
-            name: 'file',
-            formData: {
-                biz: 'temp',
-            },
-            header: {
-                'X-Access-Token': userStore.getToken,
-            },
-            success: (res) => {
-                if (res.statusCode === 200) {
-                    const data = JSON.parse(res.data)
-                    if (data.code === 200 || data.code === 0) {
-                        toastRef.value.show({
-                            type: 'success',
-                            text: '上传成功',
-                        })
-                        pageData.form.coverImage = data.message // 保存返回的图片信息
+            
+            // 编辑模式下，根据字典值获取对应的文本
+            // 延迟执行，确保字典数据已加载完成
+            nextTick(() => {
+                if (res.farmType) {
+                    const farmTypeItem = pageData.options.farmType.find(item => item.value == res.farmType)
+                    if (farmTypeItem) {
+                        pageData.form.farmTypeText = farmTypeItem.text
                     }
                 }
-            },
-            fail: (err) => {
-                toastRef.value.show({
-                    type: 'error',
-                    text: '上传失败',
-                })
-                uploadRef.value.clearFiles()
-                pageData.form.coverImage = null
-            },
-            complete: () => {
-                pageData.loading = false
-            },
+                
+                if (res.growCrops) {
+                    const growCropsItem = pageData.options.mainProducts.find(item => item.value == res.growCrops)
+                    if (growCropsItem) {
+                        pageData.form.growCropsText = growCropsItem.text
+                    }
+                }
+            })
         })
     }
-    // 文件删除
-    function handleDelete(file) {
-        uploadRef.value.clearFiles()
-        pageData.form.coverImage = null
-    }
-    const formRef = ref()
-    function submit() {
-        formRef.value.validator(pageData.form, pageData.rules, true).then((res) => {
-            if (res.isPassed) {
-                pageData.loading = true
-                NongchangAPI.farmsAdd(pageData.form)
-                    .then(() => {
-                        toastRef.value.show({
-                            type: 'success',
-                            text: '添加农场成功',
-                        })
-                        uni.switchTab({
-                            url: '/pages/mine/index',
-                        })
-                    })
-                    .finally(() => {
-                        pageData.loading = false
+})
+onShow(() => {
+    // 数据字典赋值
+    initDict()
+    pageData.form.userId = userStore.getUserInfo.id
+})
+
+const pageData = reactive({
+    loading: false,
+    show: {
+        address: false,
+        mainProducts: false,
+        farmType: false,
+    },
+    options: {
+        address: [],
+        mainProducts: [],
+        farmType: [],
+    },
+    form: {
+        id:'',
+        userId: '',
+        farmName: '',
+        farmType: '',
+        farmTypeText: '',
+        growCrops: '',
+        growCropsText: '',
+        totalArea: '',
+        farmProfiles: '',
+        owner: '',
+        ownerPhone: '',
+        provinceText: '',
+        provinceName: '',
+        cityName: '',
+        districtName: '',
+        addressDetail: '',
+        coverImage: '',
+    },
+    rules: [
+        {
+            name: 'farmName',
+            rule: ['required'],
+            msg: ['请输入农场名称'],
+        },
+        {
+            name: 'farmType',
+            rule: ['required'],
+            msg: ['请选择农场类型'],
+        },
+        {
+            name: 'growCrops',
+            rule: ['required'],
+            msg: ['请选择种植物种'],
+        },
+        {
+            name: 'totalArea',
+            rule: ['required'],
+            msg: ['请输入总面积'],
+        },
+        {
+            name: 'farmProfiles',
+            rule: ['required'],
+            msg: ['请输入农场简介'],
+        },
+        {
+            name: 'owner',
+            rule: ['required'],
+            msg: ['请输入农场主姓名'],
+        },
+        {
+            name: 'ownerPhone',
+            rule: ['required'],
+            msg: ['请输入农场主电话'],
+        },
+        {
+            name: 'provinceName',
+            rule: ['required'],
+            msg: ['请选择归属省份'],
+        },
+        {
+            name: 'addressDetail',
+            rule: ['required'],
+            msg: ['请填写详细地址'],
+        },
+    ],
+})
+
+function initDict() {
+    pageData.options.address = areaTree
+    pageData.options.mainProducts = dictStore.getDictList.main_business.map((item) => {
+        return {
+            value: item.value,
+            text: item.text,
+        }
+    })
+    pageData.options.farmType = dictStore.getDictList.farm_type.map((item) => {
+        return {
+            value: item.value,
+            text: item.text,
+        }
+    })
+}
+function handleChangeFarmType(e) {
+    pageData.form.farmType = e.value
+    pageData.form.farmTypeText = e.text
+    pageData.show.farmType = false
+}
+function handleChangeGrowCrops(e) {
+    pageData.form.growCrops = e.value
+    pageData.form.growCropsText = e.text
+    pageData.show.mainProducts = false
+}
+function handleChangeAddress(e) {
+    pageData.form.provinceName = e.text[0]
+    pageData.form.cityName = e.text[1]
+    pageData.form.districtName = e.text[2]
+    pageData.form.provinceText = e.text[0] + '/' + e.text[1] + '/' + e.text[2]
+    pageData.show.address = false
+}
+const toastRef = ref()
+const uploadRef = ref()
+// 文件上传
+function handleUpload(file) {
+    pageData.loading = true
+    uni.uploadFile({
+        url: `${globSetting.apiUrl + globSetting.urlPrefix}/sys/common/upload`, // 直接使用上传接口URL
+        filePath: file.tempFiles[0].path,
+        name: 'file',
+        formData: {
+            biz: 'temp',
+        },
+        header: {
+            'X-Access-Token': userStore.getToken,
+        },
+        success: (res) => {
+            if (res.statusCode === 200) {
+                const data = JSON.parse(res.data)
+                if (data.code === 200 || data.code === 0) {
+                    toastRef.value.show({
+                        type: 'success',
+                        text: '上传成功',
                     })
+                    pageData.form.coverImage = data.message // 保存返回的图片信息
+                }
             }
-        })
-    }
+        },
+        fail: (err) => {
+            toastRef.value.show({
+                type: 'error',
+                text: '上传失败',
+            })
+            uploadRef.value.clearFiles()
+            pageData.form.coverImage = null
+        },
+        complete: () => {
+            pageData.loading = false
+        },
+    })
+}
+// 文件删除
+function handleDelete(file) {
+    uploadRef.value.clearFiles()
+    pageData.form.coverImage = null
+}
+const formRef = ref()
+function submit() {
+    formRef.value.validator(pageData.form, pageData.rules, true).then((res) => {
+        if (res.isPassed) {
+            pageData.loading = true
+             const apiCall = pageData.form.id ? NongchangAPI.farmsEdit : NongchangAPI.farmsAdd
+            apiCall(pageData.form)
+                .then(() => {
+                    toastRef.value.show({
+                        type: 'success',
+                        text: pageData.form.id ? '保存修改成功' : '添加农场成功',
+                    })
+                    setTimeout(() => {
+                        uni.navigateBack()
+                    }, 500);
+                })
+                .finally(() => {
+                    pageData.loading = false
+                })
+        }
+    })
+}
 </script>
 
 <template>
-    <fui-form ref="formRef">
-        <fui-input required label="农场名称" placeholder="请输入农场名称" v-model="form.farmName" />
-        <fui-input required label="农场标语" placeholder="请输入农场标语" v-model="form.title" />
-        <fui-input
-            required
-            label="农场类型"
-            placeholder="请选择农场类型"
-            v-model="form.farmTypeText"
-            @click="show.farmType = true"
-        />
-        <fui-input required label="联系人" placeholder="请输入联系人" v-model="form.contactPerson" />
-        <fui-input required label="联系电话" placeholder="请输入联系电话" v-model="form.contactPhone" />
-        <fui-textarea required label="农场描述" placeholder="请输入农场描述" v-model="pageData.form.description" />
-        <fui-input required label="地区" placeholder="请选择地区" v-model="form.address" @click="show.address = true" />
-        <fui-input required label="详细地址" placeholder="请输入详细地址" v-model="form.addressDetail" />
-        <fui-input required label="主营业务" borderTop placeholder="请输入主营业务" v-model="form.mainBusiness" />
-        <fui-input
-            required
-            label="主要产品"
-            borderTop
-            placeholder="请选择主要产品"
-            v-model="form.mainProductsText"
-            @click="show.mainProducts = true"
-        />
-        <fui-input required label="总面积(亩)" borderTop placeholder="请输入总面积" v-model="form.totalArea" />
-        <view class="bg-white" style="padding: 0.875rem 0.35rem">
-            <view class="mb-1 flex justify-start"> 封面图片 </view>
-            <uni-file-picker
-                ref="uploadRef"
-                limit="1"
-                :auto-upload="false"
-                @select="handleUpload"
-                @delete="handleDelete"
-            />
-        </view>
-        <view class="fui-btn__box bg-white p-4">
-            <fui-button text="添加农场" bold radius="96rpx" @click="submit" />
+    <view class="page">
+        <view class="page-container">
+            <fui-form ref="formRef">
+                <!-- 第一组表单 -->
+                <view class="form-card">
+                    <fui-input
+                        required
+                        label="农场名称"
+                        labelSize="28"
+                        size="28"
+                        :labelWeight="400"
+                        labelWidth="auto"
+                        placeholder="请输入农场名称"
+                        v-model="pageData.form.farmName"
+                    />
+                    <fui-form-item
+                        required
+                        asterisk
+                        label="农场类型"
+                        labelSize="28"
+                        :labelWeight="400"
+                        labelWidth="auto"
+                    >
+                        <view class="time-input" @click="pageData.show.farmType = true">
+                            <text class="select-text" :class="{ placeholder: !pageData.form.farmTypeText }">
+                                {{ pageData.form.farmTypeText || '请选择农场类型' }}
+                            </text>
+                        </view>
+                    </fui-form-item>
+                    <!-- <view class="fui-input-wrapper" @click="pageData.show.farmType = true">
+                        <fui-input
+                            required
+                            readonly
+                            label="农场类型"
+                            placeholder="请选择农场类型"
+                            v-model="pageData.form.farmTypeText"
+                            labelSize="28"
+                            :labelWeight="400"
+                            labelWidth="auto"
+                        />
+                    </view> -->
+                    <fui-input
+                        required
+                        labelSize="28"
+                        size="28"
+                        :labelWeight="400"
+                        labelWidth="auto"
+                        label="农场主姓名"
+                        placeholder="请输入农场主姓名"
+                        v-model="pageData.form.owner"
+                    />
+                    <fui-input
+                        required
+                        type="number"
+                        labelSize="28"
+                        size="28"
+                        :labelWeight="400"
+                        labelWidth="auto"
+                        label="农场主电话"
+                        placeholder="请输入农场主电话"
+                        v-model="pageData.form.ownerPhone"
+                    />
+                    <!-- 农场简介换行显示 -->
+                    <view class="form-item-block">
+                        <view class="form-item-label required">农场简介</view>
+                        <fui-textarea
+                            height="100rpx"
+                            size="28"
+                            :borderTop="false"
+                            :borderBottom="false"
+                            placeholder="请输入农场简介"
+                            v-model="pageData.form.farmProfiles"
+                            class="block-textarea"
+                        />
+                    </view>
+                </view>
+
+                <!-- 第二组表单 -->
+                <view class="form-card">
+                    <fui-form-item
+                        required
+                        asterisk
+                        label="归属省份"
+                        labelSize="28"
+                        :labelWeight="400"
+                        labelWidth="auto"
+                    >
+                        <view class="time-input" @click="pageData.show.address = true">
+                            <text class="select-text" :class="{ placeholder: !pageData.form.provinceText }">
+                                {{ pageData.form.provinceText || '请选择归属省份' }}
+                            </text>
+                        </view>
+                    </fui-form-item>
+                    <!-- <view class="fui-input-wrapper" @click="pageData.show.address = true">
+                        <fui-input
+                            required
+                            readonly
+                            labelWidth="auto"
+                            labelSize="28"
+                            :labelWeight="400"
+                            label="归属省份"
+                            placeholder="请选择归属省份"
+                            :value="pageData.form.provinceText"
+                        />
+                    </view> -->
+                    <fui-input
+                        required
+                        labelWidth="auto"
+                        labelSize="28"
+                        :labelWeight="400"
+                        size="28"
+                        label="详细地址"
+                        placeholder="请输入详细地址"
+                        v-model="pageData.form.addressDetail"
+                    />
+                    <fui-form-item
+                        required
+                        asterisk
+                        label="种植物种"
+                        labelSize="28"
+                        :labelWeight="400"
+                        labelWidth="auto"
+                    >
+                        <view class="time-input" @click="pageData.show.mainProducts = true">
+                            <text class="select-text" :class="{ placeholder: !pageData.form.growCropsText }">
+                                {{ pageData.form.growCropsText || '请选择种植物种' }}
+                            </text>
+                        </view>
+                    </fui-form-item>
+                    <!-- <view class="fui-input-wrapper" @click="pageData.show.mainProducts = true">
+                        <fui-input
+                            required
+                            readonly
+                            labelWidth="auto"
+                            labelSize="28"
+                            :labelWeight="400"
+                            label="种植物种"
+                            placeholder="请选择种植物种"
+                            v-model="pageData.form.growCropsText"
+                        />
+                    </view> -->
+                    <fui-input
+                        required
+                        size="28"
+                        labelWidth="auto"
+                        labelSize="28"
+                        :labelWeight="400"
+                        label="总面积 (亩)"
+                        placeholder="请输入总面积"
+                        v-model="pageData.form.totalArea"
+                    />
+                </view>
+
+                <!-- 第三组表单 - 图片上传 -->
+                <view class="form-card">
+                    <!-- 上传图片换行显示 -->
+                    <view class="form-item-block">
+                        <view class="form-item-label required">示例图片</view>
+                        <view class="block-upload">
+                            <uni-file-picker
+                                ref="uploadRef"
+                                limit="1"
+                                :auto-upload="false"
+                                @select="handleUpload"
+                                @delete="handleDelete"
+                            />
+                        </view>
+                    </view>
+                </view>
+
+                <view class="submit-btn-box">
+                    <fui-button :text="pageData.form.id ? '保存修改' : '添加基地'" bold radius="96rpx" @click="submit" />
+                </view>
+            </fui-form>
         </view>
-    </fui-form>
 
-    <fui-picker
-        :show="show.farmType"
-        :layer="1"
-        :linkage="true"
-        :options="options.farmType"
-        @change="handleChangeFarmType"
-        @cancel="show.farmType = false"
-    />
-    <fui-picker
-        :show="show.mainProducts"
-        :layer="1"
-        :linkage="true"
-        :options="options.mainProducts"
-        @change="handleChangeMainProducts"
-        @cancel="show.mainProducts = false"
-    />
-    <fui-picker
-        :show="show.address"
-        :options="options.address"
-        :linkage="true"
-        :layer="3"
-        @change="handleChangeAddress"
-        @cancel="show.address = false"
-    />
+        <fui-picker
+            :show="pageData.show.farmType"
+            :layer="1"
+            :linkage="true"
+            :options="pageData.options.farmType"
+            @change="handleChangeFarmType"
+            @cancel="pageData.show.farmType = false"
+        />
+        <fui-picker
+            :show="pageData.show.mainProducts"
+            :layer="1"
+            :linkage="true"
+            :options="pageData.options.mainProducts"
+            @change="handleChangeGrowCrops"
+            @cancel="pageData.show.mainProducts = false"
+        />
+        <fui-picker
+            :show="pageData.show.address"
+            :options="pageData.options.address"
+            :linkage="true"
+            :layer="3"
+            @change="handleChangeAddress"
+            @cancel="pageData.show.address = false"
+        />
 
-    <fui-toast ref="toastRef" />
-    <fui-loading isFixed v-if="pageData.loading" backgroundColor="rgba(0, 0, 0, 0.4)" />
+        <fui-toast ref="toastRef" />
+        <fui-loading isFixed v-if="pageData.loading" backgroundColor="rgba(0, 0, 0, 0.4)" />
+    </view>
 </template>
 
 <style lang="scss" scoped>
-    :deep(.fui-button) {
-        border-color: #ff9800 !important;
-        background: #ff9800 !important;
+.page {
+    background: #e8f5e9;
+    min-height: 100vh;
+}
+
+.page-container {
+    padding: 28rpx;
+}
+
+.form-card {
+    background-color: #ffffff;
+    border-radius: 20rpx;
+    margin-bottom: 20rpx;
+    padding: 0;
+    overflow: hidden;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.upload-title {
+    padding: 28rpx;
+    font-size: 28rpx;
+    color: #333333;
+    font-weight: 400;
+}
+
+.upload-content {
+    padding: 0 32rpx 32rpx;
+}
+
+.submit-btn-box {
+    padding: 32rpx 0;
+}
+
+:deep(.fui-button) {
+    border-color: #ff9800 !important;
+    background: #ff9800 !important;
+}
+
+:deep(.fui-input__wrap),
+:deep(.fui-textarea__wrap) {
+    padding: 28rpx 32rpx;
+    // border-bottom: 1px solid #e5e5e5;
+}
+
+:deep(.fui-input__label),
+:deep(.fui-textarea__label) {
+    font-size: 28rpx;
+    color: #333333;
+    min-width: 160rpx;
+    font-weight: 400;
+}
+
+:deep(.fui-input__self),
+:deep(.fui-textarea__self) {
+    font-size: 28rpx;
+    color: #333333;
+}
+
+:deep(.fui-input__placeholder),
+:deep(.fui-textarea__placeholder) {
+    color: #d0d0d0;
+    font-size: 28rpx;
+}
+
+.form-card :deep(.fui-input__wrap:last-child),
+.form-card :deep(.fui-textarea__wrap:last-child) {
+    border-bottom: none;
+}
+
+::v-deep .uni-input-placeholder {
+    font-size: 28rpx !important;
+    color: #999999 !important;
+}
+:deep(.uni-textarea-placeholder) {
+    font-size: 28rpx !important;
+    color: #999999 !important;
+}
+:deep(.fui-button) {
+    width: 690rpx;
+    border-color: #5db66f !important;
+    background: #5db66f !important;
+}
+
+// 移除fui-form的默认样式
+:deep(.fui-form) {
+    background: transparent;
+}
+
+:deep(.fui-form__item) {
+    background: transparent;
+    border: none;
+    margin-bottom: 0;
+    padding: 0;
+}
+:deep(.fui-input__border-bottom) {
+    right: 32rpx !important;
+}
+.form-item-block {
+    padding: 24rpx 12rpx;
+    // border-bottom: 1px solid #e5e5e5;
+
+    &:last-child {
+        border-bottom: none;
+    }
+}
+
+.form-item-label {
+    font-size: 28rpx;
+    color: #333333;
+    font-weight: 400;
+    margin-bottom: 20rpx;
+
+    &.required::before {
+        content: '*';
+        color: #ff4d4f;
+        margin-right: 8rpx;
     }
+}
+
+.block-textarea {
+    width: 100%;
+    padding: 0rpx 12rpx !important;
+}
+
+.block-upload {
+    width: 100%;
+    padding: 0 20rpx;
+    :deep(.uni-file-picker__container) {
+        background-color: #fff !important;
+        border: unset !important;
+        border-radius: 16rpx;
+        min-height: 200rpx;
+        display: flex;
+        justify-content: left !important;
+    }
+}
+.select-text {
+    font-size: 28rpx;
+    color: #333333;
+    padding: 0 20rpx;
+    &.placeholder {
+        color: #999999;
+    }
+}
+
+.fui-input-wrapper {
+    cursor: pointer;
+}
 </style>

src/pages/nongchang/detail/index.vue

 <!-- 农场详情 -->
 <script setup lang="ts">
-    import * as turf from '@turf/turf'
-    import type { Page } from './config'
-    import PlayWidget from './components/PlayWidget.vue'
-    import Navigate from '@/utils/page/navigate'
-    import {
-        addDefaultGeoJSONSource,
-        addDefaultSplotLayer,
-        addDefaultSymbolLayer,
-        useMapbox,
-    } from '@/components/Map/Mapbox/hook'
-    import type { ToolBoxButtonHandleEvent } from '@/components/Map/Widgets/ToolBox'
-    import { ToolBoxWidget, useToolBoxWidget } from '@/components/Map/Widgets/ToolBox'
-    import * as NongchangAPI from '@/api/model/nongchang'
-    import * as farmbaseApi from '@/api/model/farmbase'
-
-    // 页面参数
-    const page = reactive<Page>({
-        id: 'example-mapbox',
-        init: false,
-        requests: 0,
-        latest: null,
-        query: {},
-    })
-
-    const model = reactive({
-        id: '',
-        name: '',
-        lonlat: '',
-        address: '',
-        description: '',
-        // 地块、位置信息 GeoJSON
-        plots: [],
-        // 设备信息
-        devices: [],
-
-        // 天气信息
-        weather: {
-            live: {
-                tem: '12°',
+import * as turf from '@turf/turf'
+import type { Page } from './config'
+import PlayWidget from './components/PlayWidget.vue'
+import Navigate from '@/utils/page/navigate'
+import {
+    addDefaultGeoJSONSource,
+    addDefaultSplotLayer,
+    addDefaultSymbolLayer,
+    useMapbox,
+} from '@/components/Map/Mapbox/hook'
+import type { ToolBoxButtonHandleEvent } from '@/components/Map/Widgets/ToolBox'
+import { ToolBoxWidget, useToolBoxWidget } from '@/components/Map/Widgets/ToolBox'
+import * as NongchangAPI from '@/api/model/nongchang'
+import * as farmbaseApi from '@/api/model/farmbase'
+
+// 页面参数
+const page = reactive<Page>({
+    id: 'example-mapbox',
+    init: false,
+    requests: 0,
+    latest: null,
+    query: {},
+})
+onShow(() => {
+    getFarmbaseInfoList()
+})
+const model = reactive({
+    id: '',
+    name: '',
+    lonlat: '',
+    address: '',
+    description: '',
+    // 地块、位置信息 GeoJSON
+    plots: [],
+    // 设备信息
+    devices: [],
+
+    // 天气信息
+    weather: {
+        live: {
+            tem: '12°',
+            phenomena: '',
+            wind: '',
+            humidity: '',
+        },
+        forecast: [
+            {
                 phenomena: '',
-                wind: '',
-                humidity: '',
+                date: '',
+                maxTem: '',
+                minTem: '',
             },
-            forecast: [
-                {
-                    phenomena: '',
-                    date: '',
-                    maxTem: '',
-                    minTem: '',
-                },
-            ],
-        },
-        // 预报日期
-        forecasts: ['29日', '30日', '1日', '2日', '3日'],
-        clicked: 0,
-        farmbaseInfo: {},
-        farmbaseInfoList: [],
-        deviceTypeCount: [],
+        ],
+    },
+    // 预报日期
+    forecasts: ['29日', '30日', '1日', '2日', '3日'],
+    clicked: 0,
+    farmbaseInfo: {},
+    farmbaseInfoList: [],
+    deviceTypeCount: [],
+})
+async function getFarmbaseInfoList() {
+    farmbaseApi
+        .list({
+            farmId: model.id,
+        })
+        .then((res) => {
+            const { records } = res
+            model.farmbaseInfoList = records
+
+            if (records.length > 0) {
+                getFarmbaseInfoById(records[0].id)
+            }
+        })
+}
+
+async function getFarmbaseInfoById(id) {
+    farmbaseApi.getFarmbaseInfoById({ id }).then((res) => {
+        model.farmbaseInfo = res
+        getDeviceTypeCount()
     })
+}
 
-    async function getFarmbaseInfoList() {
-        farmbaseApi
-            .list({
-                farmId: model.id,
-            })
-            .then((res) => {
-                const { records } = res
-                model.farmbaseInfoList = records
-
-                if (records.length > 0) {
-                    getFarmbaseInfoById(records[0].id)
-                }
-            })
-    }
+async function getDeviceTypeCount() {
+    farmbaseApi.getDeviceTypeCount({ farmId: model.id, farmBaseId: model.farmbaseInfo?.id }).then((res) => {
+        model.deviceTypeCount = res
+    })
+}
+
+// 地图组件
+const [registerMap, map] = useMapbox({
+    style: { zoom: 15 },
+    onLoaded: async (data) => {
+        console.log('✨✨✨ Map Loaded', data)
+
+        // 查询农场数据
+        const res = await NongchangAPI.farmsList()
+        console.log('农场列表', res.records)
+
+        // 获取第一个农场信息
+        const item = res.records?.[0]
+        model.id = item.id
+        model.name = item.farmName
+        model.description = item.description
+        if (item.longitude && item.latitude) {
+            model.lonlat = `${item.longitude},${item.latitude}`
+        } else {
+            // 模拟位置数据
+            model.lonlat = '111.024108, 29.554847'
+            Message.toast('未设置农场坐标位置，已使用模拟位置数据')
+        }
 
-    async function getFarmbaseInfoById(id) {
-        farmbaseApi.getFarmbaseInfoById({ id }).then((res) => {
-            model.farmbaseInfo = res
-            getDeviceTypeCount()
+        // 设置页面标题
+        uni.setNavigationBarTitle({
+            title: item.farmName,
         })
-    }
-
-    async function getDeviceTypeCount() {
-        farmbaseApi.getDeviceTypeCount({ farmId: model.id, farmBaseId: model.farmbaseInfo?.id }).then((res) => {
-            model.deviceTypeCount = res
+        // 设置地图中心点
+        map.flyTo({
+            center: model.lonlat.split(',').map(Number) as [number, number],
+            duration: 0,
         })
-    }
-
-    // 地图组件
-    const [registerMap, map] = useMapbox({
-        style: { zoom: 15 },
-        onLoaded: async (data) => {
-            console.log('✨✨✨ Map Loaded', data)
-
-            // 查询农场数据
-            const res = await NongchangAPI.farmsList()
-            console.log('农场列表', res.records)
-
-            // 获取第一个农场信息
-            const item = res.records?.[0]
-            model.id = item.id
-            model.name = item.farmName
-            model.description = item.description
-            if (item.longitude && item.latitude) {
-                model.lonlat = `${item.longitude},${item.latitude}`
-            } else {
-                // 模拟位置数据
-                model.lonlat = '111.024108, 29.554847'
-                Message.toast('未设置农场坐标位置，已使用模拟位置数据')
-            }
 
-            // 设置页面标题
-            uni.setNavigationBarTitle({
-                title: item.farmName,
-            })
-            // 设置地图中心点
-            map.flyTo({
-                center: model.lonlat.split(',').map(Number) as [number, number],
-                duration: 0,
-            })
-
-            // 渲染地块数据
-            model.plots = [
-                turf.polygon(
+        // 渲染地块数据
+        model.plots = [
+            turf.polygon(
+                [
                     [
-                        [
-                            [111.0235, 29.5562],
-                            [111.0255, 29.5562],
-                            [111.0255, 29.5558],
-                            [111.0235, 29.5558],
-                            [111.0235, 29.5562],
-                        ],
+                        [111.0235, 29.5562],
+                        [111.0255, 29.5562],
+                        [111.0255, 29.5558],
+                        [111.0235, 29.5558],
+                        [111.0235, 29.5562],
                     ],
-                    {
-                        color: 'yellow',
-                        name: '基地 A',
-                        popup: `{{name}}`,
-                    },
-                ),
-                turf.polygon(
+                ],
+                {
+                    color: 'yellow',
+                    name: '基地 A',
+                    popup: `{{name}}`,
+                },
+            ),
+            turf.polygon(
+                [
                     [
-                        [
-                            [111.0225, 29.5565],
-                            [111.0238, 29.5568],
-                            [111.023, 29.5555],
-                            [111.022, 29.5558],
-                            [111.0225, 29.5565],
-                        ],
+                        [111.0225, 29.5565],
+                        [111.0238, 29.5568],
+                        [111.023, 29.5555],
+                        [111.022, 29.5558],
+                        [111.0225, 29.5565],
                     ],
-                    {
-                        color: 'red',
-                        name: '基地 B',
-                        popup: `{{name}}`,
-                    },
-                ),
-                turf.polygon(
+                ],
+                {
+                    color: 'red',
+                    name: '基地 B',
+                    popup: `{{name}}`,
+                },
+            ),
+            turf.polygon(
+                [
                     [
-                        [
-                            [111.0258, 29.555],
-                            [111.0262, 29.5542],
-                            [111.0252, 29.554],
-                            [111.0258, 29.555],
-                        ],
+                        [111.0258, 29.555],
+                        [111.0262, 29.5542],
+                        [111.0252, 29.554],
+                        [111.0258, 29.555],
                     ],
-                    {
-                        color: 'blue',
-                        name: '基地 C',
-                        popup: `{{name}}`,
-                    },
-                ),
-            ]
-            addDefaultGeoJSONSource(map, `${page.id}-plot`, model.plots)
-            addDefaultSplotLayer(map, `${page.id}-plot`, {
-                paint: {
-                    'fill-opacity': 0.2,
-                    'fill-outline-color': ['get', 'color'],
-                },
-            })
-            map.addLayer({
-                type: 'line',
-                id: `${page.id}-plot-line`,
-                source: `${page.id}-plot`,
-                layout: {
-                    'line-join': 'round',
-                    'line-cap': 'round',
-                },
-                paint: {
-                    'line-color': ['get', 'color'],
-                    'line-width': 2,
-                },
-            })
-
-            // 渲染设备数据
-            model.devices = [
-                turf.point([111.024108, 29.554847], {
-                    name: '设备1',
-                    description: '设备1描述',
-                    icon: 'GD',
-                    popup: `{{name}}`,
-                }),
-                turf.point([111.023139, 29.55539], {
-                    name: '设备2',
-                    description: '设备2描述',
-                    icon: 'JCD',
-                    popup: `{{name}}`,
-                }),
-                turf.point([111.024989, 29.555435], {
-                    name: '设备3',
-                    description: '设备3描述',
-                    icon: 'BZ',
+                ],
+                {
+                    color: 'blue',
+                    name: '基地 C',
                     popup: `{{name}}`,
-                }),
-            ]
-            addDefaultGeoJSONSource(map, `${page.id}-symbol`, model.devices)
-            addDefaultSymbolLayer(map, `${page.id}-symbol`, {
-                layout: {
-                    'text-field': '',
-                    'icon-image': ['get', 'icon'],
-                    'icon-size': 1,
                 },
-            })
+            ),
+        ]
+        addDefaultGeoJSONSource(map, `${page.id}-plot`, model.plots)
+        addDefaultSplotLayer(map, `${page.id}-plot`, {
+            paint: {
+                'fill-opacity': 0.2,
+                'fill-outline-color': ['get', 'color'],
+            },
+        })
+        map.addLayer({
+            type: 'line',
+            id: `${page.id}-plot-line`,
+            source: `${page.id}-plot`,
+            layout: {
+                'line-join': 'round',
+                'line-cap': 'round',
+            },
+            paint: {
+                'line-color': ['get', 'color'],
+                'line-width': 2,
+            },
+        })
 
-            // 查询农场信息
-            getFarmbaseInfoList()
-        },
-        onSourceRequestHandle: () => {
-            page.requests--
-            if (page.requests === 0) {
-                Message.hideLoading()
-            }
-        },
-        onSourceRequestErrorHandle: () => {
-            Message.hideLoading()
-        },
-    })
+        // 渲染设备数据
+        model.devices = [
+            turf.point([111.024108, 29.554847], {
+                name: '设备1',
+                description: '设备1描述',
+                icon: 'GD',
+                popup: `{{name}}`,
+            }),
+            turf.point([111.023139, 29.55539], {
+                name: '设备2',
+                description: '设备2描述',
+                icon: 'JCD',
+                popup: `{{name}}`,
+            }),
+            turf.point([111.024989, 29.555435], {
+                name: '设备3',
+                description: '设备3描述',
+                icon: 'BZ',
+                popup: `{{name}}`,
+            }),
+        ]
+        addDefaultGeoJSONSource(map, `${page.id}-symbol`, model.devices)
+        addDefaultSymbolLayer(map, `${page.id}-symbol`, {
+            layout: {
+                'text-field': '',
+                'icon-image': ['get', 'icon'],
+                'icon-size': 1,
+            },
+        })
 
-    // 左侧工具栏小部件
-    const [registerToolBoxWidget] = useToolBoxWidget({
-        show: true,
-        expand: true,
-        showExpandButton: false,
-        top: -90,
-        tools: [
-            {
-                key: 'action',
-                align: 'top',
-                buttons: [
-                    {
-                        name: '设备',
-                        color: '#75c849',
-                        icon: '/static/images/codefun/device.active.png',
-                        type: 'toggle',
-                        handle: (e: ToolBoxButtonHandleEvent) => {
-                            // 切换显示设备数据地图渲染
-                            const active = e.button.icon === '/static/images/codefun/device.active.png'
-                            if (active) {
-                                e.button.color = '#666666'
-                                e.button.icon = '/static/images/codefun/device.png'
-                                map.setLayoutProperty(`${page.id}-symbol`, 'visibility', 'none')
-                            } else {
-                                e.button.color = '#75c849'
-                                e.button.icon = '/static/images/codefun/device.active.png'
-                                map.setLayoutProperty(`${page.id}-symbol`, 'visibility', 'visible')
-                            }
-                        },
+        // 查询农场信息
+        getFarmbaseInfoList()
+    },
+    onSourceRequestHandle: () => {
+        page.requests--
+        if (page.requests === 0) {
+            Message.hideLoading()
+        }
+    },
+    onSourceRequestErrorHandle: () => {
+        Message.hideLoading()
+    },
+})
+
+// 左侧工具栏小部件
+const [registerToolBoxWidget] = useToolBoxWidget({
+    show: true,
+    expand: true,
+    showExpandButton: false,
+    top: -90,
+    tools: [
+        {
+            key: 'action',
+            align: 'top',
+            buttons: [
+                {
+                    name: '设备',
+                    color: '#75c849',
+                    icon: '/static/images/codefun/device.active.png',
+                    type: 'toggle',
+                    handle: (e: ToolBoxButtonHandleEvent) => {
+                        // 切换显示设备数据地图渲染
+                        const active = e.button.icon === '/static/images/codefun/device.active.png'
+                        if (active) {
+                            e.button.color = '#666666'
+                            e.button.icon = '/static/images/codefun/device.png'
+                            map.setLayoutProperty(`${page.id}-symbol`, 'visibility', 'none')
+                        } else {
+                            e.button.color = '#75c849'
+                            e.button.icon = '/static/images/codefun/device.active.png'
+                            map.setLayoutProperty(`${page.id}-symbol`, 'visibility', 'visible')
+                        }
                     },
-                ],
-            },
-            {
-                key: 'action',
-                align: 'top',
-                buttons: [
-                    {
-                        name: '降雨',
-                        icon: '/static/images/codefun/rain.png',
-                        type: 'button',
-                        handle: () => {
-                            Message.toast('暂无降雨数据')
-                        },
+                },
+            ],
+        },
+        {
+            key: 'action',
+            align: 'top',
+            buttons: [
+                {
+                    name: '降雨',
+                    icon: '/static/images/codefun/rain.png',
+                    type: 'button',
+                    handle: () => {
+                        Message.toast('暂无降雨数据')
                     },
-                    {
-                        name: '温度',
-                        icon: '/static/images/codefun/temp.png',
-                        type: 'button',
-                        handle: () => {
-                            Message.toast('暂无温度数据')
-                        },
+                },
+                {
+                    name: '温度',
+                    icon: '/static/images/codefun/temp.png',
+                    type: 'button',
+                    handle: () => {
+                        Message.toast('暂无温度数据')
                     },
-                    {
-                        name: '强对流',
-                        icon: '/static/images/codefun/severe.png',
-                        type: 'button',
-                        handle: () => {
-                            Message.toast('暂无强对流数据')
-                        },
+                },
+                {
+                    name: '强对流',
+                    icon: '/static/images/codefun/severe.png',
+                    type: 'button',
+                    handle: () => {
+                        Message.toast('暂无强对流数据')
                     },
-                    {
-                        name: '大风',
-                        icon: '/static/images/codefun/wind.png',
-                        type: 'button',
-                        handle: () => {
-                            Message.toast('暂无大风数据')
-                        },
+                },
+                {
+                    name: '大风',
+                    icon: '/static/images/codefun/wind.png',
+                    type: 'button',
+                    handle: () => {
+                        Message.toast('暂无大风数据')
                     },
-                    {
-                        name: '其他',
-                        icon: '/static/images/codefun/other.png',
-                        type: 'button',
-                        handle: () => {
-                            Message.alert('敬请期待~', '温馨提醒')
-                        },
+                },
+                {
+                    name: '其他',
+                    icon: '/static/images/codefun/other.png',
+                    type: 'button',
+                    handle: () => {
+                        Message.alert('敬请期待~', '温馨提醒')
                     },
-                ],
-            },
-        ],
-    })
+                },
+            ],
+        },
+    ],
+})
 
-    onNavigationBarButtonTap((e) => {
-        if (e.index === 0) {
-            Navigate.to(`/pages/jidiguanli/add?farmId=${model.id}`)
-        }
+// 自定义导航栏回调函数
+function onBackClick() {
+    uni.navigateBack({
+        delta: 1,
     })
+}
+
+function onTitleIconClick() {
+    Navigate.to(`/pages/nongchang/create-nongchang-form?id=${model.id}`)
+}
+
+function onAddBaseClick() {
+    // 点击添加基地按钮的回调函数
+    Navigate.to(`/pages/jidiguanli/add?farmId=${model.id}`)
+}
+
+// 保留原有的导航栏按钮点击回调（如果有需要的话）
+onNavigationBarButtonTap((e) => {
+    console.log(e)
+    if (e.index === 0) {
+        Navigate.to(`/pages/jidiguanli/add?farmId=${model.id}`)
+    }
+})
 </script>
 
 <template>
     <view class="page bg-white">
+        <!-- 自定义导航栏 -->
+        <view class="custom-navbar">
+            <view class="navbar-content">
+                <view class="navbar-left" @click="onBackClick">
+                    <fui-icon name="arrowleft" color="#FFF" size="44"></fui-icon>
+                </view>
+                <view class="navbar-center">
+                    <text class="navbar-title">{{ model.name || '农场' }}</text>
+                    <view class="navbar-icon" @click="onTitleIconClick">
+                        <image class="title-icon" src="/static/images/nongchang/farm-title-icon.png" />
+                    </view>
+                </view>
+                <view class="navbar-right">
+                    <text class="add-base-btn" @click="onAddBaseClick">+ 添加基地</text>
+                </view>
+            </view>
+        </view>
+
+        <!-- 为自定义导航栏预留空间 -->
+        <view class="navbar-placeholder"></view>
+
         <!-- 地图组件 -->
         <!-- <view class="h-730 overflow-hidden map-box"> -->
-        <view class="h-810 overflow-hidden map-box">
+        <view class="h-730 overflow-hidden map-box">
             <!-- 地图组件 -->
             <Mapbox @register="registerMap" />
         </view>
@@ -351,105 +391,115 @@
             </view>
         </view>
 
-        <view class="card !top-810">
+        <view class="card !top-730">
             <view class="w-full absolute top--70rpx">
-                <view class="box-1">
-                    <view class="relative w-full flex flex-row">
-                        <view class="box-1-left"
-                            ><image class="image_1" src="/static/images/nongchang/play.png"
-                        /></view>
-                        <view class="box-1-right">
-                            <view class="box-1-right-top">
-                                <view class="text_1">预报</view>
+                <view style="background: #e6f5e8">
+                    <view class="box-1">
+                        <view class="relative w-full flex flex-row">
+                            <view class="box-1-left"
+                                ><image class="image_1" src="/static/images/nongchang/play.png"
+                            /></view>
+                            <view class="box-1-right">
+                                <view class="box-1-right-top">
+                                    <view class="text_1">预报</view>
+                                </view>
+                                <view class="box-1-right-bottom"
+                                    ><text
+                                        v-for="(forecast, index) in model.forecasts"
+                                        :class="model.clicked === index ? 'active' : ''"
+                                        :key="index"
+                                        >{{ forecast }}</text
+                                    ></view
+                                >
                             </view>
-                            <view class="box-1-right-bottom"
-                                ><text
-                                    v-for="(forecast, index) in model.forecasts"
-                                    :class="model.clicked === index ? 'active' : ''"
-                                    :key="index"
-                                    >{{ forecast }}</text
-                                ></view
-                            >
-                        </view>
-                    </view>
-                </view>
-                <view class="box-2">
-                    <view class="box-2-left">
-                        <view class="box-2-left-top">
-                            <text class="box-2-left-top-text1">12°</text>
-                            <text class="box-2-left-top-text2">多云</text>
-                        </view>
-                        <view class="box-2-left-bottom">
-                            <text class="box-2-left-bottom-text1">北风2级 | 湿度62%</text>
                         </view>
                     </view>
-                    <view class="box-2-right">
-                        <view class="box-2-right-item">
-                            <text class="box-2-right-text1">15°-19°</text>
-                            <text class="box-2-right-text2">今天 阴</text>
-                        </view>
-                        <view class="box-2-right-interval" />
-                        <view class="box-2-right-item">
-                            <text class="box-2-right-text1">17°-21°</text>
-                            <text class="box-2-right-text2">明天 多云</text>
+                    <view class="box-2">
+                        <view class="box-2-left">
+                            <view class="box-2-left-top">
+                                <text class="box-2-left-top-text1">12°</text>
+                                <text class="box-2-left-top-text2">多云</text>
+                            </view>
+                            <view class="box-2-left-bottom">
+                                <text class="box-2-left-bottom-text1">北风2级 | 湿度62%</text>
+                            </view>
                         </view>
-                    </view>
-                </view>
-                <view class="box-3">
-                    <view class="box-3-tags">
-                        <view
-                            class="box-3-tags-item"
-                            :class="model.farmbaseInfo.id === farmbase.id ? 'box-3-tags-item-active' : ''"
-                            v-for="farmbase in model.farmbaseInfoList"
-                            :key="farmbase.id"
-                        >
-                            <view @click="getFarmbaseInfoById(farmbase.id)">
-                                <text>{{ farmbase.baseName }}</text>
+                        <view class="box-2-right">
+                            <view class="box-2-right-item">
+                                <text class="box-2-right-text1">15°-19°</text>
+                                <text class="box-2-right-text2">今天 阴</text>
+                            </view>
+                            <view class="box-2-right-interval" />
+                            <view class="box-2-right-item">
+                                <text class="box-2-right-text1">17°-21°</text>
+                                <text class="box-2-right-text2">明天 多云</text>
                             </view>
                         </view>
                     </view>
-                    <view class="box-3-info">
-                        <view class="box-3-info-item">
-                            <view class="box-3-info-item-text-box">
-                                <text class="box-3-info-item-text1">总面积: </text>
-                                <text class="box-3-info-item-text2">{{ model.farmbaseInfo.scale }} 亩</text>
+                    <view class="box-3">
+                        <view class="box-3-tags">
+                            <view
+                                class="box-3-tags-item"
+                                :class="model.farmbaseInfo.id === farmbase.id ? 'box-3-tags-item-active' : ''"
+                                v-for="farmbase in model.farmbaseInfoList"
+                                :key="farmbase.id"
+                            >
+                                <view @click="getFarmbaseInfoById(farmbase.id)">
+                                    <text>{{ farmbase.baseName }}</text>
+                                </view>
                             </view>
                         </view>
-                        <view class="box-3-info-item justify-between">
-                            <view class="box-3-info-item-text-box">
-                                <text class="box-3-info-item-text1">种植: </text>
-                                <text class="box-3-info-item-text2">{{ model.farmbaseInfo.plantedCrops }}</text>
+                        <view class="box-3-info">
+                            <view class="box-3-info-item">
+                                <view class="box-3-info-item-text-box">
+                                    <text class="box-3-info-item-text1">总面积: </text>
+                                    <text class="box-3-info-item-text2">{{ model.farmbaseInfo.scale }} 亩</text>
+                                </view>
                             </view>
-                            <view class="box-3-info-item-text-box">
-                                <text class="box-3-info-item-text1">预计产量: </text>
-                                <text class="box-3-info-item-text2" />
+                            <view class="box-3-info-item justify-between">
+                                <view class="box-3-info-item-text-box">
+                                    <text class="box-3-info-item-text1">种植: </text>
+                                    <text class="box-3-info-item-text2">{{
+                                        model.farmbaseInfo.growCrops_dictText
+                                    }}</text>
+                                </view>
+                                <view class="box-3-info-item-text-box">
+                                    <text class="box-3-info-item-text1">预计产量: </text>
+                                    <text class="box-3-info-item-text2" />
+                                </view>
                             </view>
-                        </view>
-                        <view class="box-3-info-item justify-between">
-                            <view class="box-3-info-item-text-box">
-                                <text class="box-3-info-item-text1">负责人: </text>
-                                <text class="box-3-info-item-text2">{{ model.farmbaseInfo.managerName }}</text>
-                            </view>
-                            <view class="box-3-info-item-text-box">
-                                <text class="box-3-info-item-text1">联系电话: </text>
-                                <text class="box-3-info-item-text2">{{ model.farmbaseInfo.contactPhone }}</text>
+                            <view class="box-3-info-item justify-between">
+                                <view class="box-3-info-item-text-box">
+                                    <text class="box-3-info-item-text1">负责人: </text>
+                                    <text class="box-3-info-item-text2">{{ model.farmbaseInfo.managerName }}</text>
+                                </view>
+                                <view class="box-3-info-item-text-box">
+                                    <text class="box-3-info-item-text1">联系电话: </text>
+                                    <text class="box-3-info-item-text2">{{ model.farmbaseInfo.contactPhone }}</text>
+                                </view>
                             </view>
                         </view>
                     </view>
-                </view>
-                <view class="box-4">
-                    <view class="box-4-title">
-                        <view class="box-4-title-text1"><text>基地设备</text></view>
-                        <navigator url="/pages/device/device"  class="box-4-title-text2"><text>＋ 添加设备</text></navigator>
-                    </view>
-                    <view class="box-4-device">
-                        <view class="box-4-device-item" v-for="(device, index) in model.deviceTypeCount" :key="index">
-                            <view class="box-4-item-icon">
-                                <image class="box-4-item-icon-image" src="/static/images/nongchang/jiankong.png" />
-                            </view>
-                            <view class="box-4-item-content">
-                                <text class="box-4-item-text1">{{ device.deviceName }}</text>
-                                <text class="box-4-item-text2">{{ device.deviceCount }}台</text>
+                    <view class="box-4">
+                        <view class="box-4-title">
+                            <view class="box-4-title-text1"><text>基地设备</text></view>
+                            <navigator url="/pages/device/device" class="box-4-title-text2"
+                                ><text>＋ 添加设备</text></navigator
+                            >
+                        </view>
+                        <view class="box-4-device">
+                            <view
+                                class="box-4-device-item"
+                                v-for="(device, index) in model.deviceTypeCount"
+                                :key="index"
+                            >
+                                <view class="box-4-item-icon">
+                                    <image class="box-4-item-icon-image" src="/static/images/nongchang/jiankong.png" />
+                                </view>
+                                <view class="box-4-item-content">
+                                    <text class="box-4-item-text1">{{ device.deviceName }}</text>
+                                    <text class="box-4-item-text2">{{ device.deviceCount }}台</text>
+                                </view>
                             </view>
                         </view>
                     </view>
@@ -460,311 +510,422 @@
 </template>
 
 <style lang="scss" scoped>
-    //
-    page {
-        background-color: #e6f5e8;
-    }
-    .page {
-        position: relative;
-        background-color: #e6f5e8;
-
-        .map-box {
-            // #ifdef APP-PLUS
-            position: relative;
-            top: 0;
-            // #endif
-            // #ifdef H5
-            position: relative;
-            top: 0;
-            // #endif
-        }
+//
+page {
+    background-color: #e6f5e8;
+}
+.page {
+    position: relative;
+    min-height: 100vh;
+    background-color: #e6f5e8;
+
+    // 自定义导航栏样式
+    .custom-navbar {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 999;
+        background-color: #5db66f;
+        padding-top: var(--status-bar-height, 44rpx);
+
+        .navbar-content {
+            height: 88rpx;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 20rpx;
+
+            .navbar-left {
+                width: 120rpx;
+                display: flex;
+                justify-content: flex-start;
 
-        .card {
-            width: 100%;
-            background-color: #e6f5e8;
-            position: absolute;
-            font-weight: 400;
-            font-family: '思源黑体';
+                .back-icon {
+                    width: 60rpx;
+                    height: 60rpx;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    color: #fff;
+                    font-size: 36rpx;
+                    font-weight: bold;
+                    border-radius: 50%;
+                    background-color: rgba(255, 255, 255, 0.2);
+
+                    &:active {
+                        background-color: rgba(255, 255, 255, 0.3);
+                        transform: scale(0.95);
+                    }
+                }
+            }
 
-            .box-1 {
-                width: 95%;
-                height: 80rpx;
-                background-color: #fff;
-                margin: 20rpx;
-                border-radius: 18rpx;
+            .navbar-center {
+                flex: 1;
                 display: flex;
-                flex-direction: row;
+                align-items: center;
+                justify-content: center;
+                position: relative;
+
+                .navbar-title {
+                    color: #fff;
+                    font-size: 32rpx;
+                    font-weight: 600;
+                    // margin-right: 10rpx;
+                }
 
-                .box-1-left {
-                    width: 50rpx;
-                    height: 100%;
-                    margin-left: 20rpx;
+                .navbar-icon {
                     display: flex;
                     align-items: center;
+                    justify-content: center;
+                    // margin-left: 8rpx;
+                    // padding: 8rpx;
+                    border-radius: 50%;
+                    // background-color: rgba(255, 255, 255, 0.2);
+                    transition: all 0.3s ease;
+
+                    .title-icon {
+                        width: 32rpx;
+                        height: 32rpx;
+                    }
 
-                    .image_1 {
-                        width: 50rpx;
-                        height: 50rpx;
+                    &:active {
+                        background-color: rgba(255, 255, 255, 0.3);
+                        transform: scale(0.9);
+                    }
+
+                    &:hover {
+                        background-color: rgba(255, 255, 255, 0.25);
                     }
                 }
+            }
 
-                .box-1-right {
-                    width: calc(100% - 80rpx);
-                    height: 100%;
-                    margin-left: 20rpx;
-                    display: flex;
-                    flex-direction: column;
+            .navbar-right {
+                width: 180rpx;
+                display: flex;
+                justify-content: flex-end;
 
-                    .box-1-right-top {
-                        // height: 50%;
-                        background-image: url('/static/images/nongchang/yubaobeijing.png');
-                        background-size: 100% 100%;
-                        background-repeat: no-repeat;
+                .add-base-btn {
+                    color: #fff;
+                    font-size: 26rpx;
+                    padding: 12rpx 20rpx;
+                    transition: all 0.3s ease;
 
-                        .text_1 {
-                            font-size: 25rpx;
-                            color: #5db66f;
-                            text-align: center;
-                        }
+                    &:active {
+                        background-color: rgba(255, 255, 255, 0.3);
+                        transform: scale(0.95);
                     }
 
-                    .box-1-right-bottom {
-                        // height: 50%;
-                        display: flex;
-                        flex-direction: row;
-                        justify-content: space-around;
-                        color: #999999;
-                        font-size: 24rpx;
-
-                        .active {
-                            color: #cccccc;
-                        }
+                    &:hover {
+                        background-color: rgba(255, 255, 255, 0.25);
                     }
                 }
             }
+        }
+    }
+
+    // 导航栏占位空间
+    .navbar-placeholder {
+        height: calc(88rpx + var(--status-bar-height, 44rpx));
+    }
 
-            .box-2 {
-                width: 95%;
-                height: 150rpx;
-                margin: 20rpx;
+    .map-box {
+        // #ifdef APP-PLUS
+        position: relative;
+        top: 0;
+        // #endif
+        // #ifdef H5
+        position: relative;
+        top: 0;
+        // #endif
+    }
+
+    .card {
+        width: 100%;
+        background-color: #e6f5e8;
+        position: absolute;
+        font-weight: 400;
+        font-family: '思源黑体';
+
+        .box-1 {
+            width: 95%;
+            height: 80rpx;
+            background-color: #fff;
+            margin: 20rpx;
+            border-radius: 18rpx;
+            display: flex;
+            flex-direction: row;
+
+            .box-1-left {
+                width: 50rpx;
+                height: 100%;
+                margin-left: 20rpx;
                 display: flex;
-                flex-direction: row;
+                align-items: center;
 
-                .box-2-left {
-                    width: 35%;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: space-around;
-                    padding: 10rpx;
-                    margin-right: 20rpx;
-                    background-color: #fff;
-                    border-radius: 18rpx;
-                    line-height: 100%;
+                .image_1 {
+                    width: 50rpx;
+                    height: 50rpx;
+                }
+            }
 
-                    .box-2-left-top {
-                        display: flex;
-                        flex-direction: row;
-                        justify-content: space-around;
-                        .box-2-left-top-text1 {
-                            font-size: 50rpx;
-                            font-weight: bold;
-                            color: #333333;
-                        }
+            .box-1-right {
+                width: calc(100% - 80rpx);
+                height: 100%;
+                margin-left: 20rpx;
+                display: flex;
+                flex-direction: column;
 
-                        .box-2-left-top-text2 {
-                            font-size: 32rpx;
-                            color: #555555;
-                        }
-                    }
+                .box-1-right-top {
+                    // height: 50%;
+                    background-image: url('/static/images/nongchang/yubaobeijing.png');
+                    background-size: 100% 100%;
+                    background-repeat: no-repeat;
 
-                    .box-2-left-bottom {
-                        display: flex;
-                        flex-direction: row;
-                        justify-content: space-around;
-                        line-height: 100%;
-                        .box-2-left-bottom-text1 {
-                            font-size: 24rpx;
-                            color: #555555;
-                        }
+                    .text_1 {
+                        font-size: 25rpx;
+                        color: #5db66f;
+                        text-align: center;
                     }
                 }
 
-                .box-2-right {
-                    width: 62%;
+                .box-1-right-bottom {
+                    // height: 50%;
                     display: flex;
                     flex-direction: row;
                     justify-content: space-around;
-                    margin-right: 20rpx;
-                    background-color: #fff;
-                    border-radius: 18rpx;
-                    line-height: 100%;
+                    color: #999999;
+                    font-size: 24rpx;
 
-                    .box-2-right-item {
-                        width: 50%;
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: space-around;
-                        text-align: center;
-                        .box-2-right-text1 {
-                            font-size: 42rpx;
-                            font-weight: bold;
-                            color: #333333;
-                        }
-
-                        .box-2-right-text2 {
-                            font-size: 24rpx;
-                            color: #555555;
-                        }
-                    }
-
-                    .box-2-right-interval {
-                        width: 1px;
-                        height: 80%;
-                        margin: auto;
-                        background-color: #eeeeee;
+                    .active {
+                        color: #cccccc;
                     }
                 }
             }
+        }
 
-            .box-3 {
-                width: 95%;
-                height: 280rpx;
-                margin: 20rpx;
-                padding: 0 20rpx;
-                background-color: #fff;
-                border-radius: 18rpx;
+        .box-2 {
+            width: 95%;
+            height: 150rpx;
+            margin: 20rpx;
+            display: flex;
+            flex-direction: row;
+
+            .box-2-left {
+                width: 35%;
                 display: flex;
                 flex-direction: column;
                 justify-content: space-around;
+                padding: 10rpx;
+                margin-right: 20rpx;
+                background-color: #fff;
+                border-radius: 18rpx;
+                line-height: 100%;
 
-                .box-3-tags {
-                    width: 100%;
-                    height: 70rpx;
+                .box-2-left-top {
                     display: flex;
                     flex-direction: row;
-                    font-size: 28rpx;
+                    justify-content: space-around;
+                    .box-2-left-top-text1 {
+                        font-size: 50rpx;
+                        font-weight: bold;
+                        color: #333333;
+                    }
 
-                    .box-3-tags-item {
-                        width: 31%;
-                        height: 100%;
-                        margin-right: 20rpx;
-                        text-align: center;
-                        line-height: 70rpx;
-                        border-radius: 48rpx;
-                        background-color: rgba($color: #5db66f, $alpha: 0.1);
-                        color: #5db66f;
-                        font-weight: 300;
+                    .box-2-left-top-text2 {
+                        font-size: 32rpx;
+                        color: #555555;
                     }
+                }
 
-                    .box-3-tags-item-active {
-                        background-color: #5db66f !important;
-                        color: #fff !important;
+                .box-2-left-bottom {
+                    display: flex;
+                    flex-direction: row;
+                    justify-content: space-around;
+                    line-height: 100%;
+                    .box-2-left-bottom-text1 {
+                        font-size: 24rpx;
+                        color: #555555;
                     }
                 }
+            }
 
-                .box-3-info {
-                    width: 100%;
-                    height: calc(100% - 120rpx);
+            .box-2-right {
+                width: 62%;
+                display: flex;
+                flex-direction: row;
+                justify-content: space-around;
+                margin-right: 20rpx;
+                background-color: #fff;
+                border-radius: 18rpx;
+                line-height: 100%;
+
+                .box-2-right-item {
+                    width: 50%;
                     display: flex;
                     flex-direction: column;
                     justify-content: space-around;
+                    text-align: center;
+                    .box-2-right-text1 {
+                        font-size: 42rpx;
+                        font-weight: bold;
+                        color: #333333;
+                    }
 
-                    .box-3-info-item {
-                        display: flex;
-                        flex-direction: row;
+                    .box-2-right-text2 {
+                        font-size: 24rpx;
+                        color: #555555;
+                    }
+                }
+
+                .box-2-right-interval {
+                    width: 1px;
+                    height: 80%;
+                    margin: auto;
+                    background-color: #eeeeee;
+                }
+            }
+        }
 
-                        .box-3-info-item-text-box {
-                            width: 50%;
+        .box-3 {
+            width: 95%;
+            height: 280rpx;
+            margin: 20rpx;
+            padding: 0 20rpx;
+            background-color: #fff;
+            border-radius: 18rpx;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+
+            .box-3-tags {
+                width: 100%;
+                height: 70rpx;
+                display: flex;
+                flex-direction: row;
+                font-size: 28rpx;
 
-                            .box-3-info-item-text1 {
-                                font-size: 26rpx;
-                                color: #999999;
-                                margin-right: 10rpx;
-                            }
+                .box-3-tags-item {
+                    width: 31%;
+                    height: 100%;
+                    margin-right: 20rpx;
+                    text-align: center;
+                    line-height: 70rpx;
+                    border-radius: 48rpx;
+                    background-color: rgba($color: #5db66f, $alpha: 0.1);
+                    color: #5db66f;
+                    font-weight: 300;
+                }
 
-                            .box-3-info-item-text2 {
-                                font-size: 30rpx;
-                                color: #333333;
-                            }
-                        }
-                    }
+                .box-3-tags-item-active {
+                    background-color: #5db66f !important;
+                    color: #fff !important;
                 }
             }
 
-            .box-4 {
-                width: 95%;
-                margin: 30rpx 20rpx 0 20rpx;
-                border-radius: 18rpx;
+            .box-3-info {
+                width: 100%;
+                height: calc(100% - 120rpx);
+                display: flex;
+                flex-direction: column;
+                justify-content: space-around;
 
-                .box-4-title {
-                    width: 100%;
-                    height: 50rpx;
+                .box-3-info-item {
                     display: flex;
                     flex-direction: row;
-                    justify-content: space-between;
 
-                    .box-4-title-text1 {
-                        font-size: 30rpx;
-                        color: #333333;
-                        font-weight: bold;
-                    }
+                    .box-3-info-item-text-box {
+                        width: 50%;
 
-                    .box-4-title-text2 {
-                        font-size: 28rpx;
-                        color: #5db66f;
+                        .box-3-info-item-text1 {
+                            font-size: 26rpx;
+                            color: #999999;
+                            margin-right: 10rpx;
+                        }
+
+                        .box-3-info-item-text2 {
+                            font-size: 30rpx;
+                            color: #333333;
+                        }
                     }
                 }
+            }
+        }
+
+        .box-4 {
+            width: 95%;
+            margin: 30rpx 20rpx 0 20rpx;
+            border-radius: 18rpx;
+
+            .box-4-title {
+                width: 100%;
+                height: 50rpx;
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+
+                .box-4-title-text1 {
+                    font-size: 30rpx;
+                    color: #333333;
+                    font-weight: bold;
+                }
+
+                .box-4-title-text2 {
+                    font-size: 28rpx;
+                    color: #5db66f;
+                }
+            }
 
-                .box-4-device {
-                    width: 100%;
-                    height: calc(100% - 50rpx);
-                    margin-top: 10rpx;
+            .box-4-device {
+                width: 100%;
+                height: calc(100% - 50rpx);
+                margin-top: 10rpx;
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+
+                .box-4-device-item {
+                    width: 49%;
+                    height: 48%;
                     display: flex;
-                    flex-wrap: wrap;
-                    justify-content: space-between;
+                    flex-direction: row;
+                    border-radius: 24rpx;
+                    background-color: #fff;
+                    margin-bottom: 10rpx;
 
-                    .box-4-device-item {
-                        width: 49%;
-                        height: 48%;
+                    .box-4-item-icon {
+                        width: 80rpx;
+                        height: 100%;
+                        margin: 0 25rpx;
                         display: flex;
-                        flex-direction: row;
-                        border-radius: 24rpx;
-                        background-color: #fff;
-                        margin-bottom: 10rpx;
-
-                        .box-4-item-icon {
-                            width: 80rpx;
-                            height: 100%;
-                            margin: 0 25rpx;
-                            display: flex;
-                            align-items: center;
-
-                            .box-4-item-icon-image {
-                                width: 100%;
-                                height: 80rpx;
-                            }
-                        }
+                        align-items: center;
 
-                        .box-4-item-content {
+                        .box-4-item-icon-image {
                             width: 100%;
-                            height: 100%;
-                            display: flex;
-                            justify-content: center;
-                            flex-direction: column;
-
-                            .box-4-item-text1 {
-                                font-size: 30rpx;
-                                color: #333333;
-                            }
-
-                            .box-4-item-text2 {
-                                font-size: 26rpx;
-                                color: #5db66f;
-                            }
+                            height: 80rpx;
+                        }
+                    }
+
+                    .box-4-item-content {
+                        width: 100%;
+                        height: 100%;
+                        display: flex;
+                        justify-content: center;
+                        flex-direction: column;
+
+                        .box-4-item-text1 {
+                            font-size: 30rpx;
+                            color: #333333;
+                        }
+
+                        .box-4-item-text2 {
+                            font-size: 26rpx;
+                            color: #5db66f;
                         }
                     }
                 }
             }
         }
     }
+}
 </style>

src/utils/proxy.ts

@@ -11,7 +11,8 @@ const PROXY_LIST: [[string, string]?] = [
     // [`http://192.168.0.100:18100`, `https://oss.beta.app.yiring.com`],
 
     // 开发环境（预览）
-    [`http://192.168.0.156:18100`, `http://111.22.182.169:49091`],
+    // [`http://192.168.0.156:18100`, `http://111.22.182.169:49091`],
+    [`http://192.168.0.156:18100`, `http://36.133.16.81:42111`],
 ]
 
 /**