JCSS / jcss-miniprogram

<template>
  <view class="page-container">
    <up-form :model="formData" ref="formRef" label-width="140rpx" border-bottom>
      <!-- 基础信息卡片（设计稿 .card.pad + .fgrp-title） -->
      <view class="form-card">
        <view class="sec-head">
          <view class="sec-bar"></view>
          <text class="sec-title">基础信息</text>
        </view>

        <up-form-item label="名称" prop="treetype" required>
          <up-input v-model.trim="formData.treetype" placeholder="请输入名称" maxlength="30" border="none"/>
        </up-form-item>

        <!-- 树种类型 底部弹窗选择 -->
        <!-- <up-form-item label="树种类型" prop="treeSpeciesType" required arrow @click="openTreeSpeciesType">
          <up-input
            v-model="formData.treeSpeciesTypeName"
            placeholder="请选择树种类型"
            readonly
            border="none"
            bg-color="transparent"
          />
        </up-form-item> -->

        <view class="form-row-wrap">
          <up-row gutter="10">
            <up-col span="6">
              <up-form-item label="胸径" prop="dbh" required>
                <up-input v-model.trim="formData.dbh" placeholder="请输入" maxlength="10" border="none" input-align="left"/>
                <template #right>
                  <text style="padding-left: 12rpx;color:#6B7280;font-size:26rpx">厘米</text>
                </template>
              </up-form-item>
            </up-col>
            <up-col span="6">
              <up-form-item label="高度" prop="treeheight">
                <up-input v-model.trim="formData.treeheight" placeholder="请输入" maxlength="10" border="none"
                          input-align="left"/>
                <template #right>
                  <text style="padding-left: 12rpx;color:#6B7280;font-size:26rpx;">米</text>
                </template>
              </up-form-item>
            </up-col>
          </up-row>
        </view>

        <up-form-item label="位置" prop="growlocation" required class="location-form-item" @click="openMap">
          <up-input v-model="formData.growlocation" placeholder="请选择" readonly border="none"/>
          <template #right>
            <view class="loc-select">
              <up-icon name="map" size="15" color="#2563EB"></up-icon>
              <text class="loc-select-text">定位</text>
            </view>
          </template>
        </up-form-item>

        <!-- 经纬度：只读展示，定位成功后自动回填（设计稿 .ta 灰底信息块） -->
        <view class="coord-row">
          <view class="coord">
            <text class="coord-k">经度</text>
            <text class="coord-v">{{ formData.longitude || '定位后自动填充' }}</text>
          </view>
          <view class="coord-line"></view>
          <view class="coord">
            <text class="coord-k">纬度</text>
            <text class="coord-v">{{ formData.latitude || '定位后自动填充' }}</text>
          </view>
        </view>

        <up-form-item label="管护单位" prop="managedutyunit" required>
          <up-input v-model.trim="formData.managedutyunit" placeholder="请输入" maxlength="30" border="none"/>
        </up-form-item>

        <up-form-item label="权属分类" prop="oldtreeownershipText" required @click="handleActionSheetOpen('ownership')">
          <up-input v-model.trim="formData.oldtreeownershipText" placeholder="请选择" readonly border="none"
                    input-align="right" bg-color="transparent"/>
          <template #right>
            <up-icon name="arrow-right" size="12" color="#C0C6D0"></up-icon>
          </template>
        </up-form-item>
      </view>

      <!-- 树木照片卡片 -->
      <view class="form-card">
        <view class="sec-head">
          <view class="sec-bar"></view>
          <text class="sec-title">树木照片</text>
        </view>
        <up-form-item label="图片信息" prop="treeImgList" required :border-bottom="false">
          <view class="upload-row">
            <up-upload
                :file-list="treeImgs.imgList.value || []"
                @after-read="treeImgs.uploadImgs"
                @delete="treeImgs.deleteImg"
                multiple
                :width="70"
                :height="70"
                :max-count="treeImgs.uploadConfig.maxCount"
                :upload-text="treeImgs.uploadText"
                :size-type="treeImgs.uploadConfig.sizeType"
            ></up-upload>
            <view class="upload-tip">
              <text class="upload-tip-line">最少 1 张，最多 {{ treeImgs.uploadConfig.maxCount }} 张</text>
              <text class="upload-tip-line">支持 jpg / png 格式</text>
            </view>
          </view>
        </up-form-item>
      </view>

      <view
          class="animated-area"
          :style="{
          height: isShow ? 'auto' : '0',
          opacity: isShow ? 1 : 0,
          overflow: 'hidden'
        }"
      >
        <view class="form-card">
          <view class="sec-head">
            <view class="sec-bar"></view>
            <text class="sec-title">扩展信息</text>
          </view>

          <up-row gutter="10">
            <up-col span="6">
              <up-form-item label="拉丁文" prop="latinname">
                <up-input v-model.trim="formData.latinname" placeholder="请输入" maxlength="30" border="none"/>
              </up-form-item>
            </up-col>
            <up-col span="6">
              <up-form-item label="级别" @click="handleActionSheetOpen('level')">
                <up-input v-model.trim="formData.treeleveltext" placeholder="请选择" readonly border="none"
                          input-align="right" bg-color="transparent"/>
                <template #right>
                  <up-icon name="arrow-right" size="12" color="#C0C6D0"></up-icon>
                </template>
              </up-form-item>
            </up-col>
          </up-row>

          <up-form-item label="生长环境" prop="growthenvironment">
            <up-input v-model.trim="formData.growthenvironment" placeholder="请输入" maxlength="50" border="none"/>
          </up-form-item>

          <view class="form-row-wrap">
            <up-row gutter="10">
              <up-col span="6">
                <!-- 栽种年月 年月选择器 -->
                <up-form-item label="栽种年月" @click="openPlantDatePicker">
                  <up-input v-model.trim="formData.plantingDate" placeholder="请选择栽种年月" readonly border="none"
                            input-align="right" bg-color="transparent"/>
                </up-form-item>
              </up-col>
              <up-col span="6">
                <up-form-item label="干周" prop="weekday">
                  <up-input v-model.trim="formData.weekday" placeholder="请输入" maxlength="10" border="none"
                            input-align="left"/>
                  <template #right>
                    <text style="padding-left:12rpx;color:#6B7280;font-size:26rpx">厘米</text>
                  </template>
                </up-form-item>
              </up-col>
            </up-row>
          </view>

          <view class="form-row-wrap">
            <up-row gutter="10">
              <up-col span="6">
                <up-form-item label="东西冠幅" prop="canopyeastwest">
                  <up-input v-model.trim="formData.canopyeastwest" placeholder="请输入" maxlength="10" border="none"
                            input-align="left"/>
                  <template #right>
                    <text style="padding-left:12rpx;color:#6B7280;font-size:26rpx">米</text>
                  </template>
                </up-form-item>
              </up-col>
              <up-col span="6">
                <up-form-item label="南北冠幅" prop="canopysouthnorth">
                  <up-input v-model.trim="formData.canopysouthnorth" placeholder="请输入" maxlength="10" border="none"
                            input-align="left"/>
                  <template #right>
                    <text style="padding-left:12rpx;color:#6B7280;font-size:26rpx">米</text>
                  </template>
                </up-form-item>
              </up-col>
            </up-row>
          </view>
        </view>
      </view>

      <!-- 展开/收起扩展信息 -->
      <view class="expand-bar" @click="toggleArea">
        <up-icon :name="isShow ? 'arrow-up' : 'arrow-down'" size="12" color="#2563EB"></up-icon>
        <text class="expand-text">{{ isShow ? '收起更多信息' : '展开更多信息' }}</text>
      </view>
    </up-form>

    <view class="fixed-bottom-btn-wrap">
      <up-button type="primary" @click="submit" :loading="loadingFlag" size="large" bold>提交</up-button>
    </view>

    <up-action-sheet
        :show="showActionSheet"
        :actions="currentActionSheetData.list"
        :title="currentActionSheetData.title"
        @close="handleActionSheetClose"
        @select="handleActionSheetSelect"
    ></up-action-sheet>

    <!-- 年月选择弹窗 -->
    <up-datetime-picker
        v-model="plantingDate"
        :show="showDatePicker"
        :closeOnClickOverlay="true"
        mode="year-month"
        minDate="1000"
        @confirm="onSelectPlantDate"
        @cancel="showDatePicker=false"
    ></up-datetime-picker>
  </view>
</template>

<script setup>
import { timeFormat } from '@/uni_modules/uview-plus';
import { ref, reactive, nextTick } from 'vue'
import { onReady, onLoad, onShow, onUnload } from '@dcloudio/uni-app';

onUnload(() => {
  uni.reLaunch({
    url: '/pages-sub/data/tree-archive/index'
  })
})

import { addTree } from "@/api/tree-archive/tree-archive.js";
import { useUploadImgs } from '@/common/utils/useUploadImgs'
import { useUserStore } from '@/pinia/user';

// ========== 核心工具方法 ==========
const isPureZero = (val) => {
  if (!val) return false;
  const pureZeroReg = /^0+$/;
  return pureZeroReg.test(val.trim());
};
const trimFormData = (obj) => {
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      const val = obj[key];
      if (typeof val === 'string') {
        obj[key] = val.trim();
      }
    }
  }
};
const emojiReg = /[\uD83C\uD83D\uD83E][\uDC00-\uDFFF]+|[\u2702\u2705\u2708-\u2712\u2714\u2716\u271D\u2721\u2728\u2733\u2734\u2744\u2747\u274C\u274E\u2753-\u2755\u2757\u2763-\u2767\u2795-\u2797\u27A1\u27B0\u27BF\u2934\u2935\u2B05-\u2B07\u2B1B\u2B1C\u2B50\u2B55\u3030\u303D\u3297\u3299\ufe0f\u200d]+/g;
const filterEmoji = (val) => {
  if (typeof val !== 'string') return val;
  return val.replace(emojiReg, '');
};
const hasEmoji = (val) => {
  if (!val) return false;
  return emojiReg.test(val);
};

// ========== 状态管理 ==========
const userStore = useUserStore();
const formRef = ref(null)
const isShow = ref(false)
const contentHeight = ref(200)
const treeOwnershipData = ref([])
const treeLevelData = ref([])
const treeSpeciesTypeList = ref([])
const loadingFlag = ref(false)
const showActionSheet = ref(false);
const currentActionSheetData = reactive({ type: '', list: [], title: '' });
const showDatePicker = ref(false);
const plantingDate = ref(Date.now())

// 图片上传配置
const treeImgs = useUploadImgs({
  maxCount: 3,
  uploadText: '选择图片',
  sizeType: ['compressed'],
  formRef: formRef,
  fieldName: 'treeImgList'
})
if (!Array.isArray(treeImgs.rawImgList.value)) treeImgs.rawImgList.value = [];

// 表单数据：treeSpeciesType 存编码，treeSpeciesTypeName 页面展示文字
const formData = reactive({
  treetype: '',
  // treeSpeciesType: '',
  treeSpeciesTypeName: '',
  treeheight: '',
  dbh: '',
  treelevel: '',
  treeleveltext: '',
  managedutyunit: '',
  oldtreeownership: '',
  oldtreeownershipText: '',
  latinname: '',
  plantingDate: '',
  canopysouthnorth: '',
  canopyeastwest: '',
  weekday: '',
  growlocation: '',
  growthenvironment: '',
  treeImgList: [],
  address: '',
  latitude: '',
  longitude: '',
  road: '',
  maintainunit: ''
})

// 表单校验规则
const rules = reactive({
  treetype: [
    {
      validator: (rule, val, callback) => {
        if (val && hasEmoji(val)) return callback(new Error('禁止输入表情符号'));
        callback();
      }, trigger: ['blur', 'change', 'input'], priority: 10
    },
    { required: true, message: '请输入名称', trigger: ['blur', 'change', 'input'] },
    { max: 30, message: '名称最多输入30个字符', trigger: ['blur', 'change', 'input'] }
  ],
  // treeSpeciesType: [
  //   { required: true, message: '请选择树种类型', trigger: ['change'] }
  // ],
  treeheight: [
    { max: 10, message: '树高不能超过10个字符', trigger: ['blur', 'change', 'input'] },
    { pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input'] },
    {
      validator: (rule, val, callback) => {
        if (isPureZero(val)) return callback(new Error('不能输入纯0无效值'));
        callback();
      }, trigger: ['blur', 'change', 'input']
    }
  ],
  dbh: [
    {
      validator: (rule, val, callback) => {
        if (val && hasEmoji(val)) return callback(new Error('禁止输入表情符号'));
        callback();
      }, trigger: ['blur', 'change', 'input'], priority: 10
    },
    { required: true, message: '请输入胸径', trigger: ['blur', 'change', 'input'] },
    { max: 10, message: '胸径不能超过10个字符', trigger: ['blur', 'change', 'input'] },
    { pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input'] },
    {
      validator: (rule, val, callback) => {
        if (isPureZero(val)) return callback(new Error('不能输入纯0无效值'));
        callback();
      }, trigger: ['blur', 'change', 'input']
    }
  ],
  weekday: [
    { max: 10, message: '干周不能超过10个字符', trigger: ['blur', 'change', 'input'] },
    { pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input'] },
    {
      validator: (rule, val, callback) => {
        if (isPureZero(val)) return callback(new Error('不能输入纯0无效值'));
        callback();
      }, trigger: ['blur', 'change', 'input']
    }
  ],
  canopyeastwest: [
    { max: 10, message: '东西冠幅不能超过10个字符', trigger: ['blur', 'change', 'input'] },
    { pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input'] },
    {
      validator: (rule, val, callback) => {
        if (isPureZero(val)) return callback(new Error('不能输入纯0无效值'));
        callback();
      }, trigger: ['blur', 'change', 'input']
    }
  ],
  canopysouthnorth: [
    { max: 10, message: '南北冠幅不能超过10个字符', trigger: ['blur', 'change', 'input'] },
    { pattern: /^\d+(\.\d{1,2})?$/, message: '格式不正确，支持数字或两位小数', trigger: ['blur', 'change', 'input'] },
    {
      validator: (rule, val, callback) => {
        if (isPureZero(val)) return callback(new Error('不能输入纯0无效值'));
        callback();
      }, trigger: ['blur', 'change', 'input']
    }
  ],
  growlocation: [{ required: true, message: '请选择地图位置', trigger: ['blur', 'change', 'manual'] }],
  managedutyunit: [
    {
      validator: (rule, val, callback) => {
        if (val && hasEmoji(val)) return callback(new Error('禁止输入表情符号'));
        callback();
      }, trigger: ['blur', 'change', 'input'], priority: 10
    },
    { required: true, message: '请输入管护单位', trigger: ['blur', 'change', 'input'] },
    { max: 30, message: '管护单位最多输入30个字符', trigger: ['blur', 'change', 'input'] }
  ],
  oldtreeownershipText: [{ required: true, message: '请选择权属分类', trigger: ['blur', 'change'] }],
  latinname: [
    {
      validator: (rule, val, callback) => {
        if (val && hasEmoji(val)) return callback(new Error('禁止输入表情符号'));
        callback();
      }, trigger: ['blur', 'change', 'input'], priority: 10
    },
    { max: 30, message: '拉丁文最多输入30个字符', trigger: ['blur', 'change', 'input'] }
  ],
  growthenvironment: [
    {
      validator: (rule, val, callback) => {
        if (val && hasEmoji(val)) return callback(new Error('禁止输入表情符号'));
        callback();
      }, trigger: ['blur', 'change', 'input'], priority: 10
    },
    { max: 50, message: '生长环境最多输入50个字符', trigger: ['blur', 'change', 'input'] }
  ],
  treeImgList: [treeImgs.imgValidateRule]
})

// 生命周期
onLoad((options) => {
  formData.road = options.roadId
})

onShow(async () => {
  treeLevelData.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('tree_level'))
  treeOwnershipData.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('tree_ownership'))
  treeSpeciesTypeList.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('tree_species_type'))
})

onReady(() => {
  nextTick(() => {
    formRef.value?.setRules(rules);
  });
});

// 打开栽种年月选择器
const openPlantDatePicker = () => {
  showDatePicker.value = true
}

// 年月选择回调
const onSelectPlantDate = () => {
  formData.plantingDate = timeFormat(plantingDate.value, 'yyyy-mm')
  showDatePicker.value = false
}

// 展开/收起更多区域
const toggleArea = () => {
  isShow.value = !isShow.value
}

// 打开权属/级别选择弹窗
const handleActionSheetOpen = (type) => {
  const configMap = {
    ownership: { title: '请选择权属分类', list: treeOwnershipData.value },
    level: { title: '请选择树木级别', list: treeLevelData.value }
  };
  Object.assign(currentActionSheetData, configMap[type], { type });
  showActionSheet.value = true;
};

// 打开树种类型选择弹窗
const openTreeSpeciesType = () => {
  Object.assign(currentActionSheetData, {
    title: '请选择树种类型',
    list: treeSpeciesTypeList.value,
    type: 'treeSpecies'
  })
  showActionSheet.value = true
}

// 关闭弹窗
const handleActionSheetClose = () => {
  showActionSheet.value = false;
  Object.assign(currentActionSheetData, { type: '', list: [], title: '' });
};

// 弹窗选中回调
const handleActionSheetSelect = (e) => {
  const { type } = currentActionSheetData;
  if (type === 'ownership') {
    formData.oldtreeownership = e.value
    formData.oldtreeownershipText = e.name
    formRef.value?.validateField('oldtreeownershipText');
  } else if (type === 'level') {
    formData.treelevel = e.value
    formData.treeleveltext = e.name
  } else if (type === 'treeSpecies') {
    formData.treeSpeciesType = e.value
    formData.treeSpeciesTypeName = e.name
    formRef.value?.validateField('treeSpeciesType');
  }
  handleActionSheetClose();
};

// 地图选址
const openMap = () => {
  uni.chooseLocation({
    success: async (res) => {
      formData.growlocation = res.address
      formData.latitude = res.latitude
      formData.longitude = res.longitude
      await nextTick()
      formRef.value?.validateField('growlocation');
    },
    fail: (err) => {
      console.error('地图选择失败', err);
      if (err.errMsg.includes('auth deny')) {
        uni.showToast({ title: '请授权位置权限', icon: 'none' });
      }
    }
  });
}

// 提交表单
const submit = async () => {
  if (loadingFlag.value) return

  for (const key in formData) {
    if (typeof formData[key] === 'string') {
      formData[key] = filterEmoji(formData[key]).trim();
    }
  }

  const valid = await formRef.value.validate()
  if (!valid) return

  const uploadImgUrls = treeImgs.getSuccessImgUrls()
  formData.maintainunit = userStore.userInfo.user.companyId
  formData.treeImgList = uploadImgUrls
  loadingFlag.value = true
  try {
    await addTree(formData)
    uni.showToast({ title: "新增成功", icon: "success" });
    uni.redirectTo({ url: '/pages-sub/data/tree-archive/index' });
  } catch (err) {
    uni.showToast({ title: "新增失败，请重试", icon: "none" });
    console.error(err)
  } finally {
    loadingFlag.value = false
  }
}
</script>

<style scoped lang="scss">
/* 页面底色 + 留白（设计稿 --page-bg / .body） */
.page-container {
  padding: 24rpx;
  padding-bottom: calc(144rpx + env(safe-area-inset-bottom)); // 给底部固定按钮留空间
  box-sizing: border-box;
  background-color: #F4F6FA;
}

/* 表单本身不铺底色，白卡片交给下面的 .form-card 分组（设计稿 .card.pad） */
.page-container :deep(.u-form) {
  padding: 0;
  background-color: transparent;
}
.page-container :deep(.u-line) {
  background-color: #EEF1F6;
}

/* 分组卡片：白底 16rpx 圆角 + 浅投影，卡片之间 24rpx */
.form-card {
  padding: 8rpx 24rpx 16rpx;
  background-color: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(17, 24, 39, 0.06);
}
.form-card + .form-card,
.animated-area > .form-card {
  margin-top: 24rpx;
}
/* 卡片内最后一行不画分隔线 */
.page-container :deep(.u-form-item:last-child .u-line) {
  display: none;
}

/* 分区标题：蓝色竖条 + 标题文字 */
.sec-head {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 20rpx 0 8rpx;
}
.sec-bar {
  width: 6rpx;
  height: 28rpx;
  background-color: #2563EB;
  border-radius: 3rpx;
}
.sec-title {
  font-size: 30rpx;
  font-weight: 500;
  color: #1F2937;
}

/* 表单行：标签 28rpx 深色，输入值 26rpx 内容色 */
.page-container :deep(.u-form-item__body) {
  padding: 24rpx 0 !important;
}
.page-container :deep(.u-form-item__body__left__content__label) {
  font-size: 28rpx;
  color: #1F2937;
}
.page-container :deep(.u-input__inner) {
  font-size: 26rpx;
  color: #1F2937;
}
/* 必填星号统一用超时红（设计稿 .frow .req） */
.page-container :deep(.u-form-item__body__left__content__required) {
  color: #DC2626 !important;
}

/* 位置行右侧「定位」入口 */
.loc-select {
  display: flex;
  align-items: center;
  gap: 6rpx;
}
.loc-select-text {
  font-size: 24rpx;
  color: #2563EB;
}

/* 经纬度信息条：灰底圆角块，只读展示（设计稿 .ta） */
.coord-row {
  display: flex;
  align-items: center;
  margin: 8rpx 0 16rpx;
  padding: 16rpx 20rpx;
  background-color: #F4F6FA;
  border-radius: 12rpx;
}
.coord {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8rpx;
}
.coord-k {
  flex-shrink: 0;
  font-size: 22rpx;
  color: #6B7280;
}
.coord-v {
  flex: 1;
  min-width: 0;
  font-size: 24rpx;
  color: #1F2937;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coord-line {
  flex-shrink: 0;
  width: 1rpx;
  height: 24rpx;
  margin: 0 20rpx;
  background-color: #E8EBF0;
}

/* 图片上传：虚线框 + 右侧说明文案（设计稿 .uploader / .up-tip） */
.upload-row {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
}
.page-container :deep(.u-upload__button) {
  background-color: #F8FAFC !important;
  border: 2rpx dashed #D5DAE2 !important;
  border-radius: 12rpx !important;
  box-sizing: border-box;
}
.page-container :deep(.u-upload__button__text) {
  font-size: 22rpx !important;
  color: #6B7280 !important;
}
.page-container :deep(.u-upload__wrap__preview) {
  border-radius: 12rpx !important;
  overflow: hidden;
}
.upload-tip {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
  padding-top: 8rpx;
}
.upload-tip-line {
  font-size: 22rpx;
  line-height: 1.5;
  color: #6B7280;
}

/* 展开/收起：浅蓝底整行按钮（设计稿 .btn.soft） */
.expand-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  height: 80rpx;
  margin-top: 24rpx;
  background-color: #EBF3FF;
  border-radius: 12rpx;
}
.expand-text {
  font-size: 26rpx;
  color: #2563EB;
}

.animated-area {
  transition: all 0.3s ease-out;
  margin-top: 10rpx;
}

.location-form-item {
  padding-right: 10rpx;
}

.form-row-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  :deep(.u-form-item) {
    position: relative;
    margin-bottom: 0 !important;
  }
  :deep(.u-form-item__body__right__message) {
    position: absolute;
    left: 0;
    bottom: -20rpx;
    line-height: 20rpx;
    font-size: 24rpx;
    color: #f56c6c;
    width: 100%;
    box-sizing: border-box;
  }
}

.form-row-wrap + .u-form-item {
  margin-top: 25rpx !important;
}
</style>