From 5847612a583f81cfc4d6b745b8b75ab47c36e904 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Fri, 12 Jun 2026 16:23:23 +0800
Subject: [PATCH] =?UTF-8?q?fix(ns-newform):=20=E4=BF=AE=E5=A4=8D=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E5=99=A8=E7=AE=AD=E5=A4=B4=E5=AF=B9=E9=BD=90=E4=B8=8E?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 调整选择器容器布局，将箭头移入flex容器内，统一picker类布局结构
2. 新增box-flex样式类，实现picker与箭头的自适应右对齐布局
3. 修复城市选择器的flex布局类缺失问题
4. 优化原生picker和自定义组件的宽度适配，确保文本对齐生效
---
 components/ns-newform/ns-newform.vue | 66 +++++++++++++++++++++-------
 1 file changed, 49 insertions(+), 17 deletions(-)

diff --git a/components/ns-newform/ns-newform.vue b/components/ns-newform/ns-newform.vue
index 7b348bc..4657fc3 100644
--- a/components/ns-newform/ns-newform.vue
+++ b/components/ns-newform/ns-newform.vue
@@ -48,11 +48,11 @@
 							<text class="tit">{{ item.value.title }}</text>
 							<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
 						</view>
-						<view :class="['box', 'align-right']">
+						<view :class="['box', 'box-flex', 'align-right']">
 							<text v-if="item.val != ''">{{ item.val }}</text>
 							<text v-else class="color-tip">{{ item.value.placeholder || '请选择' }}</text>
+							<text class="iconfont icon-right"></text>
 						</view>
-						<text class="iconfont icon-right"></text>
 					</view>
 				</picker>
 			</view>
@@ -140,17 +140,17 @@
 						<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
 					</view>
 					<view :class="['box', 'box-flex', 'align-right']">
-						<picker 
-							mode="date" 
-							:value="item.val" 
+						<picker
+							mode="date"
+							:value="item.val"
 							@change="bindDateChange($event, index)"
 						>
 							<view :class="['uni-input', !item.val ? 'color-tip' : '']">
 								{{ item.val ? item.val : (item.value.placeholder || '请选择日期') }}
 							</view>
 						</picker>
+						<text class="iconfont icon-right"></text>
 					</view>
-					<text class="iconfont icon-right"></text>
 				</view>
 			</view>
 			
@@ -201,17 +201,17 @@
 						<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
 					</view>
 					<view :class="['box', 'box-flex', 'align-right']">
-						<picker 
-							mode="time" 
-							:value="item.val" 
+						<picker
+							mode="time"
+							:value="item.val"
 							@change="bindTimeChange($event, index)"
 						>
 							<view :class="['uni-input', !item.val ? 'color-tip' : '']">
 								{{ item.val ? item.val : (item.value.placeholder || '请选择时间') }}
 							</view>
 						</picker>
+						<text class="iconfont icon-right"></text>
 					</view>
-					<text class="iconfont icon-right"></text>
 				</view>
 			</view>
 			
@@ -256,13 +256,13 @@
 			
 			<!-- 城市选择器 -->
 			<view v-if="item.controller == 'City'" class="order-wrap" :class="rowWrapClass" :style="rowWrapStyle">
-				<view :class="['order-cell', 'box-flex', { 'vertical-layout': mode === 'vertical' }]">
+				<view :class="['order-cell', { 'vertical-layout': mode === 'vertical' }]">
 					<view class="name" :style="item._labelStyle">
 						<text class="tit">{{ item.value.title }}</text>
 						<text class="required" :style="{ color: requiredColor }">{{ item.value.required ? '*' : '' }}</text>
 					</view>
-					<view :class="['box', 'align-right']">
-						<pick-regions 
+					<view :class="['box', 'box-flex', 'align-right']">
+						<pick-regions
 							:defaultRegions="item.default_regions"
 							:selectArr="item.select_arr"
 							@getRegions="handleGetRegions($event, index)"
@@ -271,8 +271,8 @@
 								{{ item.val ? item.val : (item.value.placeholder || '请选择城市') }}
 							</view>
 						</pick-regions>
+						<text class="iconfont icon-right"></text>
 					</view>
-					<text class="iconfont icon-right"></text>
 				</view>
 			</view>
 		</view>
@@ -1158,19 +1158,51 @@ export default {
 			padding: 0;
 			line-height: inherit;
 			min-width: 0; // 防止 flex 子元素内容溢出
-			
+
 			// 对齐方式
 			&.align-left {
 				text-align: left;
 			}
-			
+
 			&.align-right {
 				text-align: right;
 			}
-			
+
 			&.align-center {
 				text-align: center;
 			}
+
+			// 让 box 在 City / Select / Date / Time 等"picker + 右侧箭头"场景下成为
+			// 独立的 flex 行容器：picker 占满剩余宽度，箭头自然贴右
+			// （与 .order-cell.vertical-layout 不冲突 —— 在垂直布局下 .order-cell 是
+			//   column，.box.box-flex 自身仍是 row，箭头与 picker 仍同行）
+			&.box-flex {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+
+				picker,
+				.pick-regions {
+					flex: 1;
+					min-width: 0;
+					width: auto; // 覆盖下方 .box picker,.pick-regions 的 width: 100%
+				}
+
+				.iconfont.icon-right {
+					flex-shrink: 0;
+					margin-left: 8rpx;
+					line-height: 1;
+				}
+			}
+
+			// 让原生 picker 与自定义 pick-regions 撑满父容器，
+			// 使 .box.align-right / align-center 的 text-align 能正确传递到内部
+			// .uni-input / .select-address（inline-block），与后端 .more 的右对齐效果一致
+			picker,
+			.pick-regions {
+				display: block;
+				width: 100%;
+			}
 			
 			input {
 				font-size: var(--label-font-size, 28rpx);