feat:更新小程序

chenyao

2026-01-17 6509e017a883be53bc8f6809c78fdc9129c12a6f

feat:更新小程序

 uniapps/work-wx/src/subPackages/deviceRegistration/details.vue

New file
@@ -0,0 +1,443 @@
<!-- 飞行器详情 -->
<template>
<view class="deviceRegistration">
    <u-form labelPosition="top" :model="formParams" :rules="rules" ref="formRef">
        <u-form-item
                label="飞行器名称"
                labelWidth="200rpx"
                prop="name"
                :borderBottom="true"
                ref="item1"
        >
            <u-input v-model="formParams.name" border="none" placeholder="请输入"></u-input>
        </u-form-item>
        <u-form-item
                label="SN(出厂序列号)"
                labelWidth="230rpx"
                prop="sn"
                :borderBottom="true"
                ref="item2"
        >
            <u-input v-model="formParams.sn" border="none" placeholder="请输入"></u-input>
        </u-form-item>
        <u-form-item
                label="飞行器厂商"
                labelWidth="230rpx"
                prop="manufacturer"
                :borderBottom="true"
                ref="item2"
        >
            <u-input
                v-model="formParams.manufacturer"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择飞行器厂商"
                border="none"
            ></u-input>
        </u-form-item>
        <u-form-item
                label="飞行器型号"
                labelWidth="200rpx"
                prop="model"
                :borderBottom="true"
                ref="item1"
        >
            <u-input v-model="formParams.model" border="none" placeholder="请输入"></u-input>
        </u-form-item>
        <u-form-item
                label="是否改装"
                labelWidth="200rpx"
                prop="isModified"
                :borderBottom="true"
                ref="item1"
        >
            <u-input
                v-model="formParams.isModified"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择是否改装"
                border="none"
            ></u-input>
        </u-form-item>
        <u-form-item
                label="飞行器类型"
                labelWidth="200rpx"
                prop="type"
                :borderBottom="true"
                ref="item1"
        >
            <u-input
                v-model="formParams.type"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择飞行器类型"
                border="none"
            ></u-input>
        </u-form-item>
         <u-form-item
                label="持有人"
                labelWidth="200rpx"
                prop="holder"
                :borderBottom="true"
                ref="item1"
        >
            <u-input
                    v-model="formParams.holder"
                    border="none"
                    placeholder="请输入"
            ></u-input>
        </u-form-item>
         <u-form-item
                label="购买日期"
                labelWidth="200rpx"
                prop="purchaseDate"
                :borderBottom="true"
                ref="item1"
        >
            <u-input v-model="formParams.purchaseDate" border="none" placeholder="请选择日期" suffixIcon="calendar"></u-input>
        </u-form-item>
        <u-form-item
                label="有无保险"
                labelWidth="230rpx"
                prop="hasInsurance"
                :borderBottom="true"
                ref="item2"
        >
            <u-input
                v-model="formParams.hasInsurance"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择有无保险"
                border="none"
            ></u-input>
        </u-form-item>
        <u-form-item
                label="所属区域"
                labelWidth="230rpx"
                prop="region"
                :borderBottom="true"
                ref="item2"
        >
            <u-input
                v-model="formParams.region"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择所属区域"
                border="none"
            ></u-input>
        </u-form-item>
        <u-form-item
                label="民用航空器登记证书"
                labelWidth="300rpx"
                prop="caacRegistrationCode"
                :borderBottom="true"
                ref="item1"
        >
            <u-input
                    v-model="formParams.caacRegistrationCode"
                    border="none"
                    placeholder="请输入"
            ></u-input>
        </u-form-item>
        <u-form-item
                label="飞行器照片"
                labelWidth="200rpx"
                prop="deviceImage"
                :borderBottom="true"
                ref="item1"
        >
            <u-input
                    v-model="formParams.deviceImage"
                    border="none"
                    placeholder="请输入"
            ></u-input>
        </u-form-item>
        <u-form-item
                label="备注"
                labelWidth="200rpx"
                prop="remarks"
                :borderBottom="true"
                ref="item1"
        >
            <u-input
                    v-model="formParams.remarks"
                    border="none"
                    placeholder="请输入"
            ></u-input>
        </u-form-item>
    </u-form>
</view>
</template>
<script setup>
import { aircraftInfoSaveApi,uploadFileApi, areaDataApi, proTypeApi, manufacturerInfoApi, aircraftInfoDetailsApi } from '@/api/index'
import { ref, computed, onMounted } from 'vue'
import dayjs from 'dayjs'
import { onHide, onShow, onLoad } from "@dcloudio/uni-app";

const formRef = ref(null);
const formParams = ref({
    name: '',
    manufacturer: '', // 制造商
    manufacturerText: '', // 制造商文本
    model: '', // 型号
    sn: '', // sn编号
    type: '', // 航空器类型
    typeText: '', // 航空器类型文本
    holder: '', // 持有人
    pilotId: '', // 飞行员id
    status: '', // 状态 飞行器状态：0-未激活，1-正常，2-维修中，3-报废:
    purchaseDate: '', // 购买日期
    isModified: '', // 是否改装 0否 1是:
    isModifiedText: '', // 是否改装文本
    hasInsurance: '', // 是否有保险
    hasInsuranceText: '', // 是否有保险文本
    region: '', // 所属区域
    regionCode: '', // 所属区域
    regionText: '', // 所属区域文本
    caacRegistrationCode: '', // 民用航空器登记证书
    caacRegistrationCodeText: '', // 民用航空器登记证书文本
    deviceImage: '', // 飞行器照片
    deviceImageText: '', // 飞行器照片文本
    remarks: '', // 备注
})

const rules = ref({})
// 是否改装
const actionsModified = ref([
    {
        label: '否',
        value: 0
    },
    {
        label: '是',
        value: 1
    }
])
const showIsModified = ref(false);
const onPickerConfirm = (e) => {
  const selected = e.value[0]
  formParams.value.isModified = selected.value
  formParams.value.isModifiedText = selected.label
  showIsModified.value = false
}
const showPurchaseDate = ref(false);
const birthdayValue = ref(Date.now()); // 设置默认值为当前时间戳
// 购买日期
const onPurchaseDate = (e) => {
    formParams.value.purchaseDate = dayjs(e.value).format('YYYY-MM-DD')
    showPurchaseDate.value = false
}

const findRegionNamesByCodes = (codes, areaData) => {
  const result = []
  let currentData = areaData
  
  for (const code of codes) {
    // 转换为字符串比较（因为code可能是字符串类型）
    const codeStr = code.toString()
    const item = currentData.find(item => item.code === codeStr)
    
    if (!item) {
      console.warn(`未找到code为 ${codeStr} 的行政区划`)
      break
    }
    
    result.push(item.name)
    currentData = item.children || []
  }
  
  return result
}

// 所属区域确认
const onRegionConfirm = (e) => {
    console.log(e,'888')
    formParams.value.region = e?.join(',')[2] || '' // 用逗号分隔的区域码
    // 通过arrRegion的数组值为[36,3608,360824] 从areaData里面反查出名称
    const regionNames = findRegionNamesByCodes(e, areaData.value)
    console.log(regionNames, '77777')
    formParams.value.regionText = regionNames.join('-') || '' // 用连字符连接的区域名称
    isShowRegion.value = false  
}
// 是否有保险
const actionsHasInsurance = ref([
    {
        label: '无',
        value: '0'
    },
    {
        label: '有',
        value: '1'
    }
])
const showHasInsurance = ref(false);
const onPickerConfirmHasInsurance = (e) => {
  const selected = e.value[0]
  formParams.value.hasInsurance = selected.value
  formParams.value.hasInsuranceText = selected.label
  showHasInsurance.value = false
}
// 飞行器厂商
const showManufacturer = ref(false);
const manufacturerList = ref([])
// 选择飞行器厂商
const onPickerConfirmManufacturer = (e) => {
  const selected = e.value[0]
  formParams.value.manufacturer = selected.value
  formParams.value.manufacturerText = selected.label
  showManufacturer.value = false
}
// 飞行器型号
const showType = ref(false);
const typeList = ref([])
// 选择飞行器型号
const onPickerConfirmType = (e) => {
  const selected = e.value[0]
  formParams.value.type = selected.value
  formParams.value.typeText = selected.label
  showType.value = false
}
// 获取所属单位
const isShowRegion = ref(false)
const areaData = ref([])
// function getAreaData() {
//     areaDataApi().then(res => {
//         if (res.data.code === 200) {
//             areaData.value = res.data.data
//         }
//     })
// }
// 获取飞行器类型
function getProTypeApi() {
    proTypeApi().then(res => {
        typeList.value = res.data.data.map(item => ({
            ...item,
            label: item.dictLabel,
            value: item.dictValue
        }))
    })
}
// 获取无人机厂商
function getManufacturerInfoApi() {
    manufacturerInfoApi({
        current: 1,
        size: 1000,
    }).then(res => {
        manufacturerList.value = res.data.data.records.map(item => ({
            ...item,
            label: item.unitName,
            value: item.id,
        }))
    })
}
onLoad((options) => {
    aircraftInfoDetailsApi(options.id).then(res => {
        formParams.value = res.data.data
        formParams.value.isModified = res.data.data.isModified ? '是' : '否'
        formParams.value.hasInsurance = res.data.data.hasInsurance === '1' ? '有' : '无'
        formParams.value.manufacturer = manufacturerList.value.find(item => item.value === res.data.data.manufacturer)?.label || ''
        formParams.value.type = typeList.value.find(item => item.value === res.data.data.type)?.label || ''
        formParams.value.region = res.data.data.region
    })
    
    
})
onMounted(async () => {
    getProTypeApi()
    getManufacturerInfoApi()
    // 动态导入xzqhData，确保在使用前已初始化
    const { xzqhData } = await import('@/static/xzqh/index')
    areaData.value = xzqhData
})
</script>
<style scoped lang="scss">
.deviceRegistration {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    // padding: 24rpx;
    
    .select-wrapper {
        position: relative;
        width: 100%;
        
        .select-icon {
            position: absolute;
            right: 20rpx;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            font-size: 24rpx;
            pointer-events: none;
        }
    }

    .upload {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 15px;
        color: #1D6FE9;
    }

    :deep(.u-form) {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        box-sizing: border-box;
        padding: 24rpx;
    }

    :deep(.u-button) {
        width: 80%;
        padding: 28rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        margin-bottom: 20rpx;
    }
    
    :deep(.u-form-item) {
        margin-bottom: 40rpx;
        padding: 16rpx 24rpx 18rpx 24rpx;
        border-radius: 6px 6px 6px 6px;
        background: white;
        :deep(.u-line) {
            border-bottom: 1px solid #EFEFEF;
        }
        :deep(.u-input) {
            width: 100%;
            height: 80rpx;
            border-radius: 8rpx;
            padding: 0 20rpx;
            background-color: #f5f5f5;
            
            &::placeholder {
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 400;
                font-size: 30rpx;
                color: #D2D2D2;
            }
        }
        
        .clickable-input {
            width: 100%;
            cursor: pointer;
        }
        
        :deep(.u-form-item__label) {
            margin-bottom: 20rpx;
            // font-weight: bold;
            // color: #333;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 30rpx;
            color: #222324;
        }
        
        :deep(.u-form-item__required) {
            color: #FF2600;
            margin-right: 8rpx;
        }
    }
}
</style>

 uniapps/work-wx/src/subPackages/flightApplication/details.vue

New file
@@ -0,0 +1,509 @@
<!-- 飞行活动申请 -->
<template>
<view class="flightApplication-add">
    <view class="title">
        基本信息
    </view>
    <u-form labelPosition="top" :model="formParams" :rules="rules" ref="formRef">
        <u-form-item
                label="飞行计划"
                labelWidth="200rpx"
                prop="flightPlanName"
                :borderBottom="true"
                ref="item1"
        >
            <u-input v-model="formParams.flightPlanName" border="none" placeholder="请输入飞行计划名称"></u-input>
        </u-form-item>
        <u-form-item
                label="任务类型"
                labelWidth="230rpx"
                prop="flightTaskType"
                :borderBottom="true"
                ref="item2"
        >
            <u-input
                v-model="formParams.flightTaskType"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择任务类型"
                border="none"
            ></u-input>
        </u-form-item>
        <u-form-item
                label="飞行规则"
                labelWidth="230rpx"
                prop="flightRule"
                :borderBottom="true"
                ref="item2"
        >
            <u-input
                v-model="formParams.flightRule"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择飞行规则"
                border="none"
            ></u-input>
        </u-form-item>
        <u-form-item
                label="飞行方式"
                labelWidth="200rpx"
                prop="flightMode"
                :borderBottom="true"
                ref="item1"
        >
            <u-input
                v-model="formParams.flightMode"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择飞行方式"
                border="none"
            ></u-input>
        </u-form-item>
        <u-form-item
                label="飞行活动开始日期"
                labelWidth="260rpx"
                prop="flightStartTime"
                :borderBottom="true"
                ref="item1"
        >
            <u-input v-model="formParams.flightStartTime" border="none" placeholder="请选择日期" suffixIcon="calendar"></u-input>
        </u-form-item>
         <u-form-item
                label="飞行活动结束日期"
                labelWidth="260rpx"
                prop="flightEndTime"
                :borderBottom="true"
                ref="item1"
        >
            <u-input v-model="formParams.flightEndTime" border="none" placeholder="请选择日期" suffixIcon="calendar"></u-input>
        </u-form-item>
        
        <u-form-item
                label="计划类型"
                labelWidth="200rpx"
                prop="planType"
                :borderBottom="true"
                ref="item1"
        >
            <u-input
                v-model="formParams.planType"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择计划类型"
                border="none"
            ></u-input>
        </u-form-item>
         <u-form-item
                label="联系人"
                labelWidth="200rpx"
                prop="contactPerson"
                :borderBottom="true"
                ref="item1"
        >
            <u-input v-model="formParams.contactPerson" border="none" placeholder="请输入"></u-input>
        </u-form-item>
        <u-form-item
                label="联系电话"
                labelWidth="200rpx"
                prop="contactPhone"
                :borderBottom="true"
                ref="item1"
        >
            <u-input v-model="formParams.contactPhone" border="none" placeholder="请输入"></u-input>
        </u-form-item>
        <u-form-item
                label="承办人"
                labelWidth="200rpx"
                prop="undertaker"
                :borderBottom="true"
                ref="item1"
        >
            <u-input v-model="formParams.undertaker" border="none" placeholder="请输入"></u-input>
        </u-form-item>
        <u-form-item
                label="承办人联系电话"
                labelWidth="300rpx"
                prop="undertakerPhone"
                :borderBottom="true"
                ref="item1"
        >
            <u-input v-model="formParams.undertakerPhone" border="none" placeholder="请输入"></u-input>
        </u-form-item>
        <u-form-item
                label="临时空域批件"
                labelWidth="200rpx"
                prop="aircraftName"
                :borderBottom="true"
                ref="item1"
        >
            <u-input v-model="formParams.tempAirspaceApproval" border="none" readonly></u-input>
        </u-form-item>
        <u-form-item
                label="气象条件"
                labelWidth="200rpx"
                prop="weatherCondition"
                :borderBottom="true"
                ref="item1"
        >
            <u-input
                    v-model="formParams.weatherCondition"
                    border="none"
                    placeholder="请输入"
            ></u-input>
        </u-form-item>
         <view class="title form-title">飞行器/飞手</view>
        <u-form-item
                label="飞行器"
                labelWidth="230rpx"
                prop="aircraftId"
                :borderBottom="true"
                ref="item2"
        >
            <u-input
                v-model="formParams.aircraftId"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择飞行器"
                border="none"
            ></u-input>
        </u-form-item>
        <u-form-item
                label="飞手"
                labelWidth="230rpx"
                prop="pilotId"
                :borderBottom="true"
                ref="item2"
        >
            <u-input
                v-model="formParams.pilotId"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择飞手"
                border="none"
            ></u-input>
        </u-form-item>
        <view class="title form-title">空域/航线/场点</view>
        <u-form-item
                label="空域"
                labelWidth="230rpx"
                prop="airspaceId"
                :borderBottom="true"
                ref="item2"
        >
            <u-input
                v-model="formParams.airspaceId"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择空域"
                border="none"
            ></u-input>
        </u-form-item>
        <u-form-item
                label="航线"
                labelWidth="230rpx"
                prop="routeId"
                :borderBottom="true"
                ref="item2"
        >
            <u-input
                v-model="formParams.routeId"
                disabled
                disabledColor="#ffffff"
                placeholder="请选择航线"
                border="none"
            ></u-input>
        </u-form-item>
    </u-form>
</view>
</template>
<script setup>
import { flightPlanSaveApi, 
    flightRoutePageInfoApi, 
    aircraftInfoPageInfoOfMyApi, 
    pilotInfoPageInfoOfMyApi, 
    flightAirspacePageInfoApi, 
    uploadFileApi,
    flightTaskApi,flightRulesApi,flightModeApi,flightPlanApi,flightPlanDetailsApi
 } from '@/api/index'
import { ref, computed, onMounted } from 'vue'
import dayjs from 'dayjs'

const formRef = ref(null);
const formParams = ref({})
const rules = ref({})
// 任务类型
const isShowFlightTaskType = ref(false)
const actionsFlightTaskType = ref([])


// 飞行规则
const isShowFlightRule = ref(false)
const actionsFlightRule = ref([])

// 飞行方式
const isShowFlightMode = ref(false)
const actionsFlightMode = ref([])

// 计划类型
const isShowPlanType = ref(false)
const actionsPlanType = ref([])

// 是否显示开始时间选择器
const isShowStartTime = ref(false)
// 是否显示结束时间选择器
const isShowEndTime = ref(false)
const startTime = ref(Date.now()); // 设置默认值为当前时间戳
const endTime = ref(Date.now()); // 设置默认值为当前时间戳

const onConfirmStartTime = (e) => {
    formParams.value.flightStartTime = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
    isShowStartTime.value = false
}
const onConfirmEndTime = (e) => {
    formParams.value.flightEndTime = dayjs(e.value).format('YYYY-MM-DD HH:mm:ss')
    isShowEndTime.value = false
}



// 获取飞行器信息
const isShowAircraftInfo = ref(false)
const aircraftInfoList = ref([])
function getAircraftInfo() {
    aircraftInfoPageInfoOfMyApi({
        current: 1,
        size: 1000,
    }).then(res => {
        aircraftInfoList.value = res.data.data.records.map(item => ({
            label: item.name || '暂无',
            value: item.id,
        }))
    })
}
const onPickerAircraftInfo = (e) => {
  const selected = e.value[0]
  formParams.value.aircraftId = selected.value
  formParams.value.aircraftText = selected.label
  isShowAircraftInfo.value = false
}
// 获取飞手信息
const isShowPilotInfo = ref(false)
const pilotInfoList = ref([])
function getPilotInfo() {
    pilotInfoPageInfoOfMyApi({
        current: 1,
        size: 1000,
    }).then(res => {
        pilotInfoList.value = res.data.data.records.map(item => ({
            label: item.name || '暂无',
            value: item.id,
        }))
    })
}
// 获取空域信息
const isShowAirspaceInfo = ref(false)
const airspaceInfoList = ref([])
function getAirspaceInfo() {
    flightAirspacePageInfoApi({
        current: 1,
        size: 1000,
    }).then(res => {
        airspaceInfoList.value = res.data.data.records.map(item => ({
            label: item.airspaceName || '暂无',
            value: item.id,
        }))
    })
}
// 获取航线信息
const isShowFlightRouteInfo = ref(false)
const flightRouteInfoList = ref([])
function getFlightRouteInfo() {
    flightRoutePageInfoApi({
        current: 1,
        size: 1000,
    }).then(res => {
        flightRouteInfoList.value = res.data.data.records.map(item => ({
            label: item.name,
            value: item.id,
        }))
    })
}

// 获取任务类型
function getTaskType() {
    flightTaskApi().then(res => {
        actionsFlightTaskType.value = res.data.data.map(item => ({
            ...item,
            label: item.dictLabel || '暂无',
            value: item.dictCode || '暂无',
        }))
    })
}
// 获取飞行模式
function getFlightMode() {
    flightModeApi().then(res => {
        actionsFlightMode.value = res.data.data.map(item => ({
            ...item,
            label: item.dictLabel || '暂无',
            value: item.dictCode || '暂无',
        }))
    })
}
// 获取飞行规则
function getFlightRules() {
    flightRulesApi().then(res => {
        actionsFlightRule.value = res.data.data.map(item => ({
            ...item,
            label: item.dictLabel || '暂无',
            value: item.dictCode || '暂无',
        }))
    })
}
// 获取飞行计划
function getFlightPlan() {
    flightPlanApi().then(res => {
        actionsPlanType.value = res.data.data.map(item => ({
            ...item,
            label: item.dictLabel || '暂无',
            value: item.dictCode || '暂无',
        }))
    })
}

onLoad((options) => {
     flightPlanDetailsApi(options.id).then(res => {
        console.log(res.data.data, '789')
        // return
        formParams.value = res.data.data
        formParams.value.routeId = res.data.data.routeInfo.name
        formParams.value.airspaceId = res.data.data.airspaceInfo.taskName
        formParams.value.aircraftId = res.data.data.airspaceInfo.aircraftInfoList.map(item => item.name).join(',')
        formParams.value.pilotId = res.data.data.operatorInfoList.map(item => item.name).join(',')
        formParams.value.flightRule = actionsFlightRule.value.find(item => item.dictValue === res.data.data.flightRule)?.dictLabel || ''
        formParams.value.flightMode = actionsFlightMode.value.find(item => item.dictValue === res.data.data.flightMode)?.dictLabel || ''
        formParams.value.planType = actionsPlanType.value.find(item => item.dictValue === res.data.data.planType)?.dictLabel || ''
        formParams.value.flightTaskType = actionsFlightTaskType.value.find(item => item.dictValue === res.data.data.flightTaskType)?.dictLabel || ''
    })
})
onMounted(() => {
    getTaskType()
    getFlightMode()
    getFlightRules()
    getFlightPlan()
    // getAircraftInfo()
    // getPilotInfo()
    // getAirspaceInfo()
    // getFlightRouteInfo()
})
</script>
<style scoped lang="scss">
.flightApplication-add {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .title {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 17px;
        color: #222324;
        padding-left: 24rpx;
    }
    .form-title {
        margin-bottom: 24rpx;
        padding-left: 0rpx !important;
    }
    :deep(.u-button) {
        width: 80%;
        padding: 28rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        margin-bottom: 20rpx;
    }
    .attention {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 12px;
        color: #1D6FE9;
        //  margin-top: 24rpx;
        text-align: center;
    }
    .select-wrapper {
        position: relative;
        width: 100%;
        
        .select-icon {
            position: absolute;
            right: 20rpx;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            font-size: 24rpx;
            pointer-events: none;
        }
    }

    .upload {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 15px;
        color: #1D6FE9;
    }
     :deep(.u-form) {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        box-sizing: border-box;
        padding: 24rpx;
    }
     .submit-button-wrapper {
        padding: 28rpx;
        // width: 80%;
        // height: 100rpx;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
    }
    :deep(.u-form-item) {
        margin-bottom: 40rpx;
        padding: 16rpx 24rpx 18rpx 24rpx;
        border-radius: 6px 6px 6px 6px;
        background: white;
        :deep(.u-line) {
            border-bottom: 1px solid #EFEFEF;
        }
        :deep(.u-input) {
            width: 100%;
            height: 80rpx;
            border-radius: 8rpx;
            padding: 0 20rpx;
            background-color: #f5f5f5;
            
            &::placeholder {
                font-family: Source Han Sans CN, Source Han Sans CN;
                font-weight: 400;
                font-size: 30rpx;
                color: #D2D2D2;
            }
        }
        
        .clickable-input {
            width: 100%;
            cursor: pointer;
        }
        
        :deep(.u-form-item__label) {
            margin-bottom: 20rpx;
            // font-weight: bold;
            // color: #333;
            font-family: Source Han Sans CN, Source Han Sans CN;
            font-weight: 400;
            font-size: 30rpx;
            color: #222324;
        }
        
        :deep(.u-form-item__required) {
            color: #FF2600;
            margin-right: 8rpx;
        }
    }
}
</style>