logpm/pagesHome/pages/StowageListDetails/StowageListDetails.vue

<template>
	<BasicContainer ref="basicContainer" :option="option" :leftClick="leftClick">
		<template #head>
			<view class="hdtp">
				<view>
					<view>
						配载批次：{{details.pageInfo.carsNo}}
					</view>
					<view class="butlur" @click="showsdqs">
						{{details.pageType === 1? '录入包条码': '录入托盘码'}}
					</view>
				</view>
				<view>
					<view>司机名称：{{details.pageInfo.driverName}}</view>
					<view>司机电话：{{details.pageInfo.driverMobile}}</view>
				</view>
				<view>
					<view>车牌号：{{details.pageInfo.carNumber}}</view>
				</view>
				<view>
					<view style="width: 100%;">路线：{{details.pageInfo.carsLineName}}</view>
				</view>
				<!-- 				<view>
					<view>备货是否完成：{{items.isstock}}</view>
					<view>装车是否完成：{{items.isload}}</view>
				</view> -->
			</view>
			<view class="hdtpnum">
				<view>
					<view>订单总数</view>
					<view>{{items.orderNum || 0}}</view>
				</view>
				<view>
					<view>计划件数</view>
					<view>{{details.pageInfo.planLoadingNumber || 0}}</view>
				</view>
				<view>
					<view>装车件数</view>
					<view>{{details.pageInfo.realLoadingNumber || 0}}</view>
				</view>
			</view>

			<view class="tabtip">
				<view @click="setorderStatus(1)">
					<view :class="orderStatus==1?'xz':''">定制品</view>
				</view>
				<view @click="setorderStatus(2)">
					<view :class="orderStatus==2?'xz':''">零担</view>
				</view>
				<view @click="setorderStatus(3)">
					<view :class="orderStatus==3?'xz':''">异常</view>
				</view>
			</view>

		</template>

		<template #body>
			<scroll-view class="scve" scroll-y="true" @refresherpulling="" @scrolltolower="()=>{}">
				<!-- 按件装车 -->
				<view class="mabx">
					<block v-for="(item,index) in datalist" :key="item">
						<!-- 定制品 -->
						<template v-if="orderStatus== 1">
							<view class="itec" @click="handleDetails(item,index,1)">
								<view class="contenbx1">
									<view><text style="color: #90A0AF;">订单编号：</text>{{item.orderCode}}
									</view>
								</view>
								<view class="contenbx1">
									<view><text style="color: #90A0AF;">运单号：</text>{{item.waybillNo}}
									</view>
								</view>
								<view class="contenbx1">
									<view><text style="color: #90A0AF;">订单总数：</text>{{item.totalNum}}</view>
									<view><text style="color: #90A0AF;">
											计划数/已扫数：</text>{{item.planNum + '/' + item.realNum}}
									</view>
								</view>
								<view class="xialaxz" v-if="listcheckindex==index">
									<block v-for="ite in item.distributionAppParcelListVOS" :key="ite">
										<view class="box">
											<view>包条码：{{ite.scanCode}}</view>
											<view>数量：{{ite.num}}</view>
											<view>托盘名称：{{ite.trayName}}</view>
											<view>托盘码：{{ite.trayCode}}
											</view>
											<view class="w100">
												<view class="">

												</view>
												<view @click.stop="handleDelete(ite, 1)" class="button abnormalBtn">删除</view>
											</view>
										</view>
									</block>
								</view>
								<view v-if="item.complete"
									:class="item.completecode==3?'tip tp1':item.completecode==1?'tip tp2':'tip tp3'">
									{{item.complete}}
								</view>
							</view>
						</template>

						<!-- 零担 -->
						<template v-else-if="orderStatus == 2">
							<view class="itec" @click="handleDetails(item,index,2)">
								<view class="contenbx1">
									<view><text style="color: #90A0AF;">订单编号：</text>{{item.orderCode}}
									</view>
								</view>
								<view class="contenbx1">
									<view><text style="color: #90A0AF;">运单号：</text>{{item.waybillNo}}
									</view>
								</view>
								<view class="contenbx1">
									<view><text style="color: #90A0AF;">计划数量：</text>{{item.planNum || 0}}</view>
									<view><text style="color: #90A0AF;">装车数量：</text>{{item.loadingNum || 0}}</view>
								</view>
								<view class="flex-c-sb">
									<view class="button" @click.stop="handleShowZeroStowage(item)">
										零担装车
									</view>
								</view>
								<view class="xialaxz" v-if="listcheckindex==index">
									<block v-for="ite in item.distributionAppParcelListVOS" :key="ite">
										<view class="box">
											<view>物料名称：{{ite.scanCode}}</view>
											<view>数量：{{ite.num}}</view>
											<view>托盘名称：{{ite.trayName || '暂无数据'}}</view>
											<view>托盘码：{{ite.trayCode || '暂无数据'}}
											</view>
											<view class="w100 flex-c-sb">
												<view class="">
												</view>
												<view class="button abnormalBtn" @click.stop="handleDelete(ite, 1)">删除</view>
											</view>
										</view>
									</block>
								</view>

								<view v-if="item.complete"
									:class="item.completecode==3?'tip tp1':item.completecode==1?'tip tp2':'tip tp3'">
									{{item.complete}}
								</view>
							</view>
						</template>

						<!-- 异常 -->
						<template v-else-if="orderStatus == 3">
							<view class="itec">
								<view class="contenbx1">
									<view style=" word-break:break-all">
										<view style="color: #90A0AF;">订单编号：</view>

										{{item.orderCode || '暂无数据'}}
									</view>
									<view>
										<view style="color: #90A0AF;">运单号：</view>
										{{item.waybillNo || '暂无数据'}}
									</view>
								</view>


								<view class="contenbx1">
									<view style=" word-break:break-all">
										<view style="color: #90A0AF;">码值：</view>

										{{item.scanCode || 0}}
									</view>
									<view>
										<view style="color: #90A0AF;">装车数量：</view>
										{{item.num || 0}}
									</view>
								</view>

								<view class="deleteBtn button" @click.stop="handleDelete(item,3)">
									删除
								</view>

								<view v-if="item.complete"
									:class="item.completecode==3?'tip tp1':item.completecode==1?'tip tp2':'tip tp3'">
									{{item.complete}}
								</view>
							</view>
						</template>
					</block>
				</view>
			</scroll-view>
		</template>
	</BasicContainer>

	<tiplist ref="tiplists"></tiplist>

	<!-- 零担装车 -->
	<PopUp ref='ZeroStowage'>
		<scroll-view scroll-y="true">
			<view class="contenbx1 ZeroStowage_row">
				<view><text style="color: #90A0AF;">订单编号：</text>{{details.zeroInfo.orderCode}}
				</view>
			</view>
			<view class="contenbx1 ZeroStowage_row">
				<view><text style="color: #90A0AF;">运单号：</text>{{details.zeroInfo.waybillNo}}
				</view>
			</view>
			<view class="flex-c-sb ZeroStowage_row">
				<view><text style="color: #90A0AF;">计划数量：</text>{{details.zeroInfo.planNum || 0}}</view>
				<view><text style="color: #90A0AF;">装车数量：</text>{{details.zeroInfo.loadingNum || 0}}</view>
			</view>

			<view class="ZeroStowage_row">
				<inputNum :minNum="0" :maxNum="details.zeroInfo.planNum" v-model="details.zeroInfo.enterNum" />
			</view>
		</scroll-view>
	</PopUp>

	<!-- 整托装车 -->
	<PopUp ref='TrayStowage'>
		<scroll-view style="height: 50vh;" scroll-y="true">
			<view class="">
				零担:
			</view>
			<block v-for="item in details.trayInfo.zeroList" :key="item.associationValue">
				<view class="pop_row">
					<view class="flex-c-sb">
						<view>订单号：{{item.associationValue}}</view>
						<view>数量：{{item.num}}</view>
					</view>
				</view>
			</block>

			<view class="">
				定制品:
			</view>
			<block v-for="item in details.trayInfo.packageList" :key="item">
				<view class="pop_row">
					<view class="flex-c-sb">
						<view>包条码：{{item.associationValue}}</view>
						<view>数量：{{item.num}}</view>
					</view>
				</view>
			</block>
		</scroll-view>
	</PopUp>
	<!-- #ifdef APP -->
	<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
	<!-- #endif -->
</template>

<script lang="ts" setup>
	import {
		postFindCarsLoadingDetail,
		postFindLoadScanWaybillDetailList,
		postFindCarsLoadingOrderDetail,
		postLoadingScan,
		postRemoveCarsLoadScan,
		postLoadingZero,
		postLoadingTrayInfo,
		postLoadingTray
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
		onUnload,
		onPullDownRefresh
	} from '@dcloudio/uni-app'
	import { computed, inject, nextTick, reactive, ref, toRefs, } from "vue";
	import useSystemSettingsStore from '@/store/useSystemSettingsStore';
	import { storeToRefs } from 'pinia';
	import utils from '@/utils/utils.js';
	const { scanState } = storeToRefs(useSystemSettingsStore())

	const option = reactive({
		title: '配载按件装车',
		haveData: true,
		async pullDownRefreshInitPage() {
			details.datalist = []
			// initpage()
			return await initpage()
		},
	})

	let details = reactive({
		schanvalue: '',
		typearr: [
			{
				value: 3,
				label: '齐套'
			},
			{
				value: 2,
				label: '部分扫'
			},
			{
				value: 1,
				label: '未扫'
			}
		],
		items: {} as any,
		datalist: [],
		scancode: '',
		orderStatus: 1,
		loadId: '',
		orderType: 0,
		inputtxt: '',
		listcheckindex: -1,
		isscan: false,
		order: [],
		zero: [],
		pageInfo: {},
		// 零担详情装车列表
		zeroInfo: [],
		/** 页面类型 1: 按件装车 2: 整托装车 */
		pageType: 1,
		/** 整托渲染列表 */
		trayInfo: {
			zeroList: [],
			packageList: []
		}
	})

	// 获取组件实例
	const tiplists = ref(null)
	const basicContainer = ref(null)

	/** 零担装车 */
	const ZeroStowage = ref()

	/** 整托装车 */
	const TrayStowage = ref()

	onLoad((op) => {
		console.log('op :>> ', op);
		details.loadId = op.id
		details.pageType = op.type

		option.title = Number(op.type) === 2 ? '配载整托装车' : '配载按件装车'
		utils.handleToast(Number(op.type) === 2 ? '请扫描托盘码' : '请扫描包件码')
	})
	function goorderdetail(item) {
		uni.navigateTo({
			url: '/pagesHome/pages/orderDetails/orderDetails?orderCode=' + item.orderCode
		})
	}
	onShow(async () => {
		// #ifdef APP
		uni.$off('scancodedate')
		uni.$on('scancodedate', function (code) {
			if (code) {
				console.log('code', code);
				details.scancode = code
				details.isscan = true
				scandata()
			}
		})
		// #endif

		await nextTick()
		// 请求页面
		// const timer = setTimeout(() => {
		basicContainer.value.startPullDownRefresh()
		// clearTimeout(timer)
		// }, 10)
	})

	function showsdqs() {
		tiplists.value.setdetails({
			isshow: true,
			tipstate: 1,
			title: '请输入扫描的码',
			placeholder: '请输入扫描的码',
			inputtext: '',
			success: (detail) => {
				details.scancode = detail.inputtext
				scandata()
				tiplists.value.setdetails({ isshow: false })
			},
			cancel: () => {
				tiplists.value.setdetails({ isshow: false })
			},
			close: () => {
				tiplists.value.setdetails({ isshow: false })
			}
		})
	}

	/** 请求页面 -- 按件装车 */
	const initPageByOrder = async () => {
		try {
			const response = await postFindCarsLoadingDetail({
				loadId: details.loadId
			})
			const { code, data } = response
			console.log('response :>> ', response);
			if (code === 200) {
				details.pageInfo = data
				details.datalist = details.orderStatus === 1 ?
					details.pageInfo.loadScanOrderList :
					details.orderStatus === 2 ?
						details.pageInfo.zeroList :
						details.pageInfo.exceptionList
			}
		} catch (e) {
			//TODO handle the exception
		} finally {
			return null
		}
	}

	/** 请求页面数据 */
	async function initpage() {
		try {
			// 按件请求页面
			await initPageByOrder()
			// else { }
		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		} finally {
			return null
		}
	}

	function checktype(e) {
		if (e == '') {
			details.schanvalue = ''
			details.orderType = 0
		}
		details.typearr.map(item => {
			if (item.value == e) {
				details.schanvalue = item.label
				details.orderType = item.value
			}
		})
	}


	/**
	 * 切换tabBer状态
	 * @param {type} state 选中的状态 
	 */
	function setorderStatus(state : number) {
		if (details.orderStatus === state) return
		details.orderStatus = state

		details.datalist = details.orderStatus === 1 ?
			details.pageInfo.loadScanOrderList :
			details.orderStatus === 2 ?
				details.pageInfo.zeroList :
				details.pageInfo.exceptionList
	}

	/** 扫描包件 */
	const scanOrder = async () => {
		const submitData = {
			orderPackageCode: details.scancode,
			loadId: details.loadId
		}
		const res = await postLoadingScan(submitData)
		if (res.msg) {
			// #ifdef APP
			utils.ttsspke(res.msg)
			// #endif
		}
		return res
	}

	/** 扫描托盘 */
	const scanTray = async () => {
		console.log('111 :>> ', 111);
		const submitData = {
			trayCode: details.scancode,
			loadId: details.loadId
		}
		const res = await postLoadingTrayInfo(submitData)
		const { code, data } = res
		if (code !== 200) return res
		details.trayInfo = data
		// 通过Promise控制进程
		return new Promise((resolve, reject) => {
			utils.handleToast('是否整托装车')
			TrayStowage.value.setDetails({
				title: '整托装车',
				showPopUp: true,
				async success() {
					try {
						uni.showLoading({
							mask: true
						})

						const submitInfo = {
							...submitData,
							zeroList: details.trayInfo.zeroList.map(val => {
								return {
									orderCode: val.associationValue,
									waybillNo: val.waybillNo,
									enterNum: val.num
								}
							}),
							packageList:
								details.trayInfo.packageList.map(val => {
									return {
										orderPackageCode: val.associationValue
									}
								})
						}

						const res = await postLoadingTray(submitInfo)
						if (res.code !== 200) return
						uni.showToast({
							title: '装车成功',
							icon: 'none'
						})
						TrayStowage.value.details.showPopUp = false
					} catch (e) {
						//TODO handle the exception
					} finally {
						uni.hideLoading()
						// 结束Promise状态
						resolve({})
					}
				},
				close() {
					// 结束Promise状态, 并关闭弹窗
					reject({})
					TrayStowage.value.details.showPopUp = false
				}
			})
		})
		// return res
	}

	/** 扫描接口
	 * */
	async function scandata() {
		try {
			let res : any = {}

			// 按件装车
			if (Number(details.pageType) === 1) res = await scanOrder()
			// 整托装车
			else if (Number(details.pageType) === 2) res = await scanTray()

			console.log('res :>> ', res);
			if (res.code !== 200) return
			// 刷新
			basicContainer.value.startPullDownRefresh()
		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		}
	}

	/** 显示零担弹窗 -- 设置零担装车数量 */
	const handleShowZeroStowage = async (_item : any) => {
		details.zeroInfo = _item

		details.zeroInfo.enterNum = details.zeroInfo.loadingNum || details.zeroInfo.planNum

		ZeroStowage.value.setDetails({
			title: '零担装车',
			showPopUp: true,
			async success() {
				try {
					if (!_item.enterNum) {
						return uni.showToast({
							title: '请输入大于零的数字',
							icon: 'none'
						})
					}
					uni.showLoading({
						mask: true
					})
					const submitData = {
						orderCode: _item.orderCode,
						waybillNo: _item.waybillNo,
						loadId: details.loadId,
						enterNum: _item.enterNum
					}
					// submitData
					const res = await postLoadingZero(submitData)
					if (res.code !== 200) return
					ZeroStowage.value.details.showPopUp = false
					// 刷新
					basicContainer.value.startPullDownRefresh()
				} catch (err) {
					console.log('err :>> ', err);
					//TODO handle the exception
				} finally {
					uni.hideLoading()

				}

			}
		})
	}

	/** 
	 * 请求定制品和零担详情
	 */
	const handleDetails = async (item : any, index : number, type : number) => {
		console.log('item :>> ', item);

		if (details.listcheckindex == index) {
			details.listcheckindex = -1
		} else {
			details.listcheckindex = index
			try {
				item.distributionAppParcelListVOS = []
				uni.showLoading({
					mask: true
				})

				const res = await postFindCarsLoadingOrderDetail({ loadId: details.loadId, orderCode: item.orderCode })
				if (res.code !== 200) return
				item.distributionAppParcelListVOS = res.data
				console.log('item.distributionAppParcelListVOS :>> ', item.distributionAppParcelListVOS);
				console.log('res :>> ', res);
			} catch (e) {
				//TODO handle the exception
			} finally {
				uni.hideLoading()
			}
		}
		// listcheckindex.value = index
	}

	/** 删除 */
	const handleDelete = async (_item : any, type : number) => {
		try {
			uni.showLoading({
				mask: true
			})
			console.log('_item :>> ', _item);
			const submitData = {
				orderCode: _item.orderCode,
				carsLoadScanId: _item.id,
			}
			// 定制品
			if (type === 1) submitData.carsLoadScanId = _item.loadScanId
			const res = await postRemoveCarsLoadScan(submitData)
			if (res.code !== 200) return
			// #ifdef APP
			utils.ttsspke('删除成功')
			// #endif
			uni.showToast({
				title: '删除成功',
				icon: 'none'
			})
		} catch (e) {
			//TODO handle the exception
		} finally {
			uni.hideLoading()
			basicContainer.value.startPullDownRefresh()
		}

	}

	const leftClick = () => {
		uni.navigateBack()
	}

	const { listcheckindex, inputtxt, orderStatus, schanvalue, typearr, items, datalist } = toRefs(details)
</script>

<style lang="scss" scoped>
	.xialaxz {
		display: flex;
		flex-direction: column;

		.box {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			border-top: 1upx solid #00000010;
			padding: 20upx 0;
			box-sizing: border-box;
			font-size: 28upx;
			color: #092C4D;
			flex-wrap: wrap;

			>view {
				min-width: 50%;
				word-wrap: break-word;
				word-break: break-all;

				&:nth-last-child(1) {
					margin-right: 0upx;
				}
			}
		}
	}

	.butlur {
		width: 200upx !important;
		height: 64upx !important;
		background: var(--subjectColor);
		border-radius: 8upx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32upx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.tabtip {
		display: flex;
		align-items: center;
		justify-content: space-between;

		>view {
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ffffff;
			font-size: 32upx;
			font-weight: 400;
			color: #90A0AF;

			>view {
				height: 80upx;
				border-bottom: 8upx solid #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.xz {
			color: var(--subjectColor);
			border-bottom: 8upx solid var(--subjectColor);
			// border-radius: 5upx;
		}
	}

	.hdtp {
		padding: 34upx 32upx 0;
		box-sizing: border-box;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;

		>view {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28upx;
			font-weight: 400;
			color: #092C4D;
			margin-bottom: 24upx;

			&:nth-last-child(1) {
				margin-bottom: 0;
			}

			>view {
				width: 50%;
				// flex: 1;
			}
		}
	}

	.scve {
		width: 100%;
		height: 50vh;
		margin-top: 20upx;

		.mabx {
			display: flex;
			flex-direction: column;
			align-items: center;

			>.itec {
				position: relative;
				width: 686upx;
				// height: 176upx;
				background: #FFFFFF;
				border-radius: 8upx;
				padding: 36upx 24upx;
				box-sizing: border-box;
				position: relative;
				margin-bottom: 20upx;
				overflow: hidden;

				&:nth-last-child(1) {
					margin-bottom: 0;
				}

				>.contenbx1 {
					display: flex;
					justify-content: space-between;
					font-size: 28upx;
					color: #092C4D;
					margin-bottom: 20upx;

					&:nth-last-child(1) {
						margin-bottom: 0;
					}

					>view {
						flex: 1;

						&:first-child {
							margin-right: 20upx;
						}
					}
				}

				.deleteBtn {
					position: absolute;
					right: 0;
					top: 0;
					background-color: #f8544b;
				}

				.tip {
					position: absolute;
					right: 0;
					top: 0;
					width: 96upx;
					height: 48upx;
					border-radius: 0 8upx 0 8upx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24upx;
				}

				.tp1 {
					background-color: #0086F120;
					color: #0086F1;
				}

				.tp2 {
					background-color: #F8544B20;
					color: #F8544B;
				}

				.tp3 {
					background-color: #FA8C1620;
					color: #FA8C16;
				}
			}
		}
	}

	.scinp {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 12upx 32upx;
		box-sizing: border-box;
		background-color: #ffffff;

		>view:nth-of-type(1) {
			font-size: 28upx;
			font-weight: 400;
			color: #092C4D;
		}

		.inputs {
			width: 276upx;
			height: 64upx;
			background: #F5F5F6;
			border-radius: 8upx;
			opacity: 1;
			border: 2upx solid #EEEEEE;
			padding: 10upx;
			box-sizing: border-box;
			font-size: 24upx;
			font-weight: 400;
			color: #AFB4BA;

			>input {
				flex: 1;
				font-size: 24upx;
				color: #092C4D;
			}
		}

		.btscan {
			width: 128upx;
			height: 64upx;
			background: var(--subjectColor);
			border-radius: 8upx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32upx;
			font-weight: 400;
			color: #FFFFFF;
		}
	}

	.hdtpnum {
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #ffffff;
		padding: 28upx 0;
		border-bottom: 3upx solid #EEEEEE;

		>view {
			display: flex;
			align-items: center;
			flex-direction: column;
			font-size: 28upx;
			font-weight: 400;
			color: #092C4D;

			&:nth-of-type(1) {
				>view:nth-of-type(2) {
					color: #092C4D;
				}
			}

			&:nth-of-type(2) {
				>view:nth-of-type(2) {
					color: #0086F1;
				}
			}

			&:nth-of-type(3) {
				>view:nth-of-type(2) {
					color: #3AD8BC;
				}
			}

			&:nth-of-type(4) {
				>view:nth-of-type(2) {
					color: #FA8C16;
				}
			}

			>view:nth-of-type(2) {
				font-size: 36upx;
				font-weight: 400;
				color: #092C4D;
				margin-top: 20upx;
			}
		}
	}

	.abnormalStyleContainer {
		top: -20upx;
		left: -20upx;
		position: absolute;
		padding: 10upx;
		border: 1upx solid #f8544b;
		border-radius: 50%;
	}

	// 异常标签
	.abnormalStyle {
		font-size: 28upx;
		height: 80upx;
		width: 80upx;
		display: flex;
		align-items: center;
		text-align: center;

		color: #f8544b;
		padding: 10upx;
		border-radius: 50%;
		border: 1upx solid #f8544b;
		opacity: 0.6;
	}

	.flex-c-sb {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	// 按钮
	.button {
		padding: 10upx 15upx;
		background: var(--subjectColor);
		color: #fff;
		border-radius: 5upx;
		width: auto;
		display: inline-block;
		font-size: 28upx;

		&.abnormalBtn {
			background: #f8544b;
		}
	}

	// 异常
	.abnormal {
		background: linear-gradient(0% #000000 50% #0086F1);
	}

	.w100 {
		width: 100%;
	}

	.input {
		padding: 10upx 20upx;
		border: 1upx solid #aaa;
		border-radius: 10upx;
		margin: 5upx 0 20upx;
	}

	.pop_row {
		padding: 10upx 0;
		border-bottom: 1upx solid #aaa;
	}

	// 零担弹窗 -- 行
	.ZeroStowage_row {
		margin-top: 20upx;
		font-size: 0.9rem;
	}
</style>