Просмотр исходного кода

fix: 修复库存列表长文本布局错乱

- 将库存列表字段从栅格列布局调整为独立 flex 行
- 固定字段标签宽度,内容区域支持长物料名自动换行
- 补充列表项行高与字段间距,避免库位、库存显示被挤乱
Zimo 11 часов назад
Родитель
Сommit
c87244b989
1 измененных файлов с 56 добавлено и 27 удалено
  1. 56 27
      pages/inventory/index.vue

+ 56 - 27
pages/inventory/index.vue

@@ -15,21 +15,25 @@
 					</button>
 				</uni-col>
 			</uni-row>
-		</template>
-		<view>
-			<view class="item" v-for="(item,index) in dataList" :key="index">
-				<uni-row>
-					<uni-col :span="6">{{ $t('inventory.materialName') }}</uni-col>
-					<uni-col :span="18">{{ item.materialName }}</uni-col>
-					<uni-col :span="6" style="margin-top: 8px">{{ $t('inventory.costCenter') }}</uni-col>
-					<uni-col :span="18" style="margin-top: 8px">{{ item.costCenter }}</uni-col>
-					<uni-col :span="6" style="margin-top: 8px">{{ $t('inventory.quantity') }}</uni-col>
-					<uni-col :span="18" style="margin-top: 8px">{{ item.quantity }}</uni-col>
-				</uni-row>
-			</view>
-		</view>
-	</z-paging>
-</template>
+		</template>
+		<view>
+			<view class="item" v-for="(item,index) in dataList" :key="index">
+				<view class="field-row">
+					<text class="field-label">{{ $t('inventory.materialName') }}</text>
+					<text class="field-value">{{ item.materialName }}</text>
+				</view>
+				<view class="field-row">
+					<text class="field-label">{{ $t('inventory.costCenter') }}</text>
+					<text class="field-value">{{ item.costCenter }}</text>
+				</view>
+				<view class="field-row">
+					<text class="field-label">{{ $t('inventory.quantity') }}</text>
+					<text class="field-value">{{ item.quantity }}</text>
+				</view>
+			</view>
+		</view>
+	</z-paging>
+</template>
 
 <script setup>
 	import {
@@ -119,17 +123,42 @@
 		font-size: 12px;
 	}
 
-	.item {
-		width: 100%;
-		background: #FFFFFF;
-		border-radius: 6px;
-		margin-top: 10px;
-		padding: 14px 20px;
-		font-size: 14px;
-		box-sizing: border-box;
-	}
-
-	.item-module {
+	.item {
+		width: 100%;
+		background: #FFFFFF;
+		border-radius: 6px;
+		margin-top: 10px;
+		padding: 14px 20px;
+		font-size: 14px;
+		line-height: 20px;
+		box-sizing: border-box;
+	}
+
+	.field-row {
+		display: flex;
+		align-items: flex-start;
+		width: 100%;
+
+		& + .field-row {
+			margin-top: 8px;
+		}
+	}
+
+	.field-label {
+		flex: 0 0 72px;
+		color: #000000;
+		white-space: nowrap;
+	}
+
+	.field-value {
+		flex: 1;
+		min-width: 0;
+		color: #000000;
+		word-break: break-all;
+		overflow-wrap: anywhere;
+	}
+
+	.item-module {
 		width: 100%;
 		height: 42px;
 		box-sizing: border-box;
@@ -176,4 +205,4 @@
 	.item-title-width {
 		min-width: 70px;
 	}
-</style>
+</style>