ezhizao_dms_app/pages/addNewBatch/index.vue

<template>
	<view class='container'>
		<view class="content">
			<view>
				<text class='title'>批次号</text>
				<view class="batchNo uni-row">
					<view :class="{'batchNo-item':true, 'uni-row': true}" v-for="(item,index) in batchNoList"
						:key='index'>
						<!-- ,'batchNoCheck':batchNoCheck === item -->
						<!-- @click="handleCheckBatchNo(item)" -->
						{{ item.lotCode }}{{ item.isLast == 1 ? ' (尾批)': '' }}
					</view>
				</view>
				<view class="inpAndScan ">
					<uni-easyinput v-if="batchNoList.length > 0" class="inp" suffixIcon="checkmarkempty"
						v-model="inpValue" placeholder="可手动修正批次" @iconClick="iconClick"></uni-easyinput>
					<view class="uni-row" style="justify-content: space-between;">
						<view v-if="batchNoList.length > 0 && curDept" class="scanLotCode" @click="handleDoLastLot">
							<text>是否加工尾批</text>
						</view>
						<view v-if="batchNoList.length > 0" class="scanLotCode" @click="handleConfirmLotCode">
							<text>扫码修正批次</text>
						</view>
					</view>
				</view>
			</view>
			<view class='middle'>
				<view class='segment'></view>
				<uni-icons type="link" size="30" style="margin: 10rpx;  transform: rotate(135deg);"></uni-icons>
				<view class='segment'></view>
			</view>
			<!-- 			<view>
				<text class='title'>扫码绑定载具</text>
				<view class="vehicleList uni-row">
					<view class="vehicleNo uni-row" v-for="(item,index) in vehicleList">
						<text>{{item.carrierCode}}</text>
						<text @click="handleDelVehicleNo(index)">×</text>
					</view>
				</view>
				<view>
					<button style='background-color: rgba(0, 226, 166,1);
						   color: white;margin: 20rpx auto;
						   width: 80%;' @click='handleScanCode'>扫码</button>
				</view>
			</view> -->
			<view class="selectedProcess">
				<uni-section title="请选择工序" type="square">
					<uni-data-select v-model="selectedProcess" :localdata="processList" :clear="false"
						@change="handleProcessChange">
						<template v-slot:option="{item }">
							<!-- 自定义下拉框每一项的显示内容 -->
							<span>{{ (item.index) + 1}}</span>
							<span>{{ item.text }}</span>
						</template></uni-data-select>
				</uni-section>
			</view>
			<view class='middle'>
				<view class='segment'></view>
				<uni-icons type="paperclip" size="30" style="margin: 10rpx;"></uni-icons>
				<view class='segment'></view>
			</view>
			<view>
				<text class='title' style="margin-bottom: 40rpx;">基础信息</text>
				<view class="uni-row info" style="align-items: center;">
					<label for="HeatNo">炉号:</label>
					<uni-data-select v-if="isWasteRecyclingFlag" id="incomingInfo" class="uni-input data-select"
						v-model="basicInfo" :localdata="furnaceNumberInfoList" :clear="false"
						@change="handleFurnaceNumberChange"></uni-data-select>
					<text id="incomingInfo" v-else class="uni-input">废品回用</text>
				</view>
				<!-- <view class='segment' style="width: 90%;margin: 20rpx auto;"></view> -->
				<view class="uni-row info">
					<label for="productionPlanNo">计划单号:</label>
					<text id="productionPlanNo"
						class="uni-input">{{ basicInfo.productionPlanNo ? basicInfo.productionPlanNo : '-'}}</text>
				</view>
				<!-- <view class='segment' style="width: 90%;margin: 20rpx auto;"></view> -->
				<view class="uni-row info">
					<label for="lineNumber">序号:</label>
					<text id="lineNumber"
						class="uni-input">{{ basicInfo.lineNumber ? basicInfo.lineNumber : '-'}}</text>
				</view>
				<!-- <view class='segment' style="width: 90%;margin: 20rpx auto;"></view> -->
				<view class="uni-row info">
					<label for="factory">厂家:</label>
					<text id="factory"
						class="material uni-input">{{ basicInfo.factory ? basicInfo.factory : '-'}}</text>
				</view>
				<view class="uni-row info">
					<label for="brandNumber">牌号:</label>
					<text id="brandNumber"
						class="material uni-input">{{ basicInfo.brandNumber ? basicInfo.brandNumber : '-' }}</text>
				</view>
				<view class="uni-row info">
					<label for="spec">规格:</label>
					<text id="spec" class="material uni-input">{{ basicInfo.spec ? basicInfo.spec : '-' }}</text>
				</view>
				<view class="uni-row info">
					<label for="shape">形状:</label>
					<text id="shape" class="material uni-input">{{ basicInfo.shape ? basicInfo.shape : '-'}}</text>
				</view>
				<view class="uni-row info">
					<label for="diameter">材料直径:</label>
					<text id="diameter"
						class="material uni-input">{{ basicInfo.diameter ? basicInfo.diameter : '-' }}</text>
				</view>
				<view class="uni-row info">
					<label for="rawMaterialCode">原料编码:</label>
					<text id="rawMaterialCode"
						class="material uni-input">{{ basicInfo.rawMaterialCode ? basicInfo.rawMaterialCode : '-' }}</text>
				</view>
				<view class="uni-row info">
					<label for="incomingDate">来料日期:</label>
					<text id="incomingDate"
						class="material uni-input">{{ basicInfo.incomingDate ? basicInfo.incomingDate : '-' }}</text>
				</view>
				<view class="uni-row info">
					<label for="firstTechnicalRequirement">材质1:</label>
					<text id="firstTechnicalRequirement"
						class="material uni-input">{{ basicInfo.firstTechnicalRequirement ? basicInfo.firstTechnicalRequirement : '-' }}</text>
				</view>
				<view class="uni-row info">
					<label for="SecondTechnicalRequirement">材质2:</label>
					<text id="SecondTechnicalRequirement"
						class="material uni-input">{{ basicInfo.SecondTechnicalRequirement ? basicInfo.SecondTechnicalRequirement : '-' }}</text>
				</view>
			</view>
		</view>
		<view class='bottom uni-row'>
			<button class='add' type=primary @click='handleAdd'>添加</button>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app'
	import {
		getLotList,
		getAbnormalityLot,
		getProcessListByLot
	} from "@/api/business/lot.js"
	import {
		saveDayWork
	} from '@/api/business/dayWork.js'
	import {
		store
	} from '@/store/index.js'
	import {
		getCarrierById,
		checkCarrier
	} from '@/api/business/carrier.js'
	import {
		getFurnaceNoInfo
	} from '@/api/p2/furnaceNoInfo.js'
	import {
		getToken
	} from '@/utils/auth'
	import {
		getProcessList
	} from '@/api/business/deptProcess.js'
	import path from '@/api/base/path.js'

	const batchNoCheck = ref(null) // 批次号是否选中
	const batchNoList = ref([]) // 批次号列表
	const vehicleList = ref([])
	const basicInfo = ref({}) // 基础信息对象
	const dayWork = ref({})
	const furnaceInfo = ref({})
	const wasteRecyclingList = ref([]) //废品回用批次
	const curPlan = ref({})
	const furnaceNumberInfoList = ref([])
	const isWasteRecyclingFlag = ref(true)
	const emit = defineEmits(['batchReporting-addBatch']);
	const inpValue = ref('')

	const curDept = ref(false) //判断当前工段是否是该批次的领料部门
	const lotList = ref([])
	const selectedProcess = ref(null)
	const processList = ref([])

	onLoad(() => {
		// 处理特殊字符JSON解析失败报错
		curPlan.value = store.planDetails;
		dayWork.value = {
			productionPlanDetailId: curPlan.value.id,
			productionPlanId: curPlan.value.productionDetailId,
			technologicalProcessId: curPlan.value.technologicalProcessId,
			deptId: store.curDeptDetails.deptId
		}
		init();
	})

	function init() {
		let obj = {}
		obj.productionPlanDetailId = store.planDetails.id;
		//开始新批次，判断当前工段是否能开始这个批次（领料部门是当前工段的；批次的领料部门是当前工段的）
		//当前计划单的领料部门是当前工段
		if (store.normalStatus) {
			curDept.value = true
			//只查不是废品回用的批次
			getLotList(obj).then(res => {
				lotList.value = res.rows;
				if (res.rows.length > 0) {
					batchNoList.value = [res.rows[0]];
					dayWork.value.lotId = batchNoList.value[0].id;
					dayWork.value.lotCode = batchNoList.value[0].lotCode;
						dayWork.value.technologicalProcessId = batchNoList.value[0].technologicalProcessId;
						store.planDetails.technologicalProcessId = batchNoList.value[0].technologicalProcessId;
					getProcessInfo(batchNoList.value[0])
					getFurnaceInfo(batchNoList.value[0])
				} else {
					batchNoList.value = res.rows;
				}
			})
		} else {
			//废品回用的批次(领料部门是当前工段)
			getAbnormalityLot({
				productionPlanDetailId: store.planDetails.id,
				requisitionDepartmentId: store.curDeptDetails.deptId,
				flag: true
			}).then(res => {
				wasteRecyclingList.value = res.rows
				if (res.rows.length > 0) {
					//如果废品回用的批次领料部门是当前计划的领料部门，则加到lotList
					lotList.value = res.rows
					batchNoList.value = [res.rows[0]];
					isWasteRecyclingFlag.value = true
					if(batchNoList.value[0].isWasteRecycling == 0) {
						isWasteRecyclingFlag.value = false
					}
					dayWork.value.lotId = batchNoList.value[0].id;
					dayWork.value.lotCode = batchNoList.value[0].lotCode;
						dayWork.value.technologicalProcessId = batchNoList.value[0].technologicalProcessId;
						store.planDetails.technologicalProcessId = batchNoList.value[0].technologicalProcessId;
					getProcessInfo(batchNoList.value[0])
					//提示当前批次是废品回用
					if (batchNoList.value[0].isAmend == 1) {
						uni.showToast({
							icon: "none",
							title: "该批是单批单改",
							duration: 2000
						})
					} else if (batchNoList.value[0].isWasteRecycling == 1) {
						uni.showToast({
							icon: "none",
							title: "该批是废品回用",
							duration: 2000
						})
					}
					getFurnaceInfo(batchNoList.value[0])
				} else {
					uni.showToast({
						icon: "none",
						title: "没有废品回用或单批单改批次",
						duration: 2000
					})
				}
			})
		}
	}

	// function handleCheckBatchNo(item) {
	// 	batchNoCheck.value = item;
	// 	dayWork.value.lotId = item.id;
	// }

	// function handleDelVehicleNo(index) {
	// 	vehicleList.value.splice(index, 1);
	// }

	// function handleValidate() {
	// 	if (batchNoCheck.value && vehicleList.value) {
	// 		return true;
	// 	} else {
	// 		return false;
	// 	}
	// }
	function getFurnaceInfo(data) {
		if (data.isWasteRecycling == 0) {
			 isWasteRecyclingFlag.value = true
			let token = 'Bearer ' + getToken();
			let header = {
				Authorization: token
			}
			uni.request({
				url: path.furnaceNoURL + '/business/furnaceNoInfo/getFurnaceNoInfo',
				data: {
					productionPlanNo: store.planDetails.productionPlanNo,
					lineNumber: store.planDetails.lineNumber
				},
				method: 'GET',
				header,
				sslVerify: false,
				success: (res) => {
					if (res.data.code == 200 && res.data.data.length > 0) {
						for (let i = 0; i < res.data.data.length; i++) {
							furnaceNumberInfoList.value[i] = {
								text: res.data.data[i].furnaceNumber,
								value: res.data.data[i]
							}
						}

						// basicInfo.value = res.data.data[0];
						// dayWork.value.furnaceNoInfo = basicInfo.value;
					}
				},
				fail: (err) => {
					console.log(err)
				}
			})
		} else {
			isWasteRecyclingFlag.value = false
			furnaceInfo.value.furnaceNumber = "废品回用"
			furnaceInfo.value.firstTechnicalRequirement = "废品回用"
			dayWork.value.furnaceNoInfo = furnaceInfo.value
			basicInfo.value = dayWork.value.furnaceNoInfo
		}
	}

	function iconClick() {
		checkLotCode(inpValue.value);
	}

	function checkLotCode(lotCode) {
		var lotCodes = lotList.value.map(obj => obj.lotCode)
		if (lotCodes.includes(lotCode)) {
			for (let i = 0; i < lotList.value.length; i++) {
				if (lotList.value[i].lotCode == lotCode) {
					batchNoList.value = [lotList.value[i]];
					dayWork.value.lotId = lotList.value[i].id;
					dayWork.value.lotCode = lotList.value[i].lotCode;
					dayWork.value.technologicalProcessId = lotList.value[i].technologicalProcessId;
					store.planDetails.technologicalProcessId = lotList.value[i].technologicalProcessId;
					if (batchNoList.value[0].isWasteRecycling == 1) {
						isWasteRecyclingFlag.value = false
						uni.showToast({
							icon: "none",
							title: "该批次号可用，该批是废品回用",
							duration: 2000
						})
					} else if (batchNoList.value[0].isAmend == 1) {
						isWasteRecyclingFlag.value = true
						getFurnaceInfo(batchNoList.value[0])
						uni.showToast({
							icon: "none",
							title: "该批次号可用，该批是单批单改",
							duration: 2000
						})
						
					} else {
						uni.showToast({
							icon: "none",
							title: "该批次号可用",
							duration: 2000
						})
					}
					return true;
				}
			}
		} else {
			getAbnormalList(lotCode);
		}
	}

	function getAbnormalList(lotCode) {
		if (store.normalStatus) {
			getAbnormalityLot({
				productionPlanDetailId: store.planDetails.id,
				requisitionDepartmentId: store.curDeptDetails.deptId,
				flag: true
			}).then(res => {
				if (res.rows.length > 0) {
					var abNormaLotCode = res.rows.map(obj => obj.lotCode)
					if (abNormaLotCode.includes(lotCode)) {
						uni.showToast({
							icon: "none",
							title: "该批次号是废品回用或单批单改",
							duration: 2000
						})
						return false;
					}
				} else {
					uni.showToast({
						icon: "none",
						title: "该批次号已被使用或不属于该产品",
						duration: 2000
					})
					return false;
				}
			})
		} else {
			getLotList({productionPlanDetailId: store.planDetails.id}).then(res => {
				if (res.rows.length > 0) {
					console.log(res.rows)
					var normaLotCode = res.rows.map(obj => obj.lotCode)
					if (normaLotCode.includes(lotCode)) {
						uni.showToast({
							icon: "none",
							title: "该批次号是正常批",
							duration: 2000
						})
						return false;
					}
				} else {
					uni.showToast({
						icon: "none",
						title: "该批次号已被使用或不属于该产品",
						duration: 2000
					})
					return false;
				}
			})
		}

	}

	function getProcessInfo(data) {
		getProcessList({
			deptId: store.curDeptDetails.deptId,
		}).then(res => {
			if (res.code == 200) {
				//过滤出工序交集
				//因为废品回用对工序进行单独的修改。所以重新查产品的工艺，如果该批不是废品回用，则查产品工序，如果是，则到
				//对应表查
				//通过批次号查
				getProcessListByLot(data).then(response => {
					let lotProcessList = response.data
					let filteredData = lotProcessList.filter((item1) =>
						res.data.some((item2) => item2.processCode === item1.processCode)
					);
					processList.value = filteredData.map((v, index) => ({
						text: v.processAlias,
						value: v.technologicalProcessDetailId ? v
							.technologicalProcessDetailId : v.id,
						processId: v.processId,
						processStepNumber: v.processStepNumber,
						index: index,
						technologicalProcessId:v.technologicalProcessId ? v
							.technologicalProcessId : v.lotTechnologicalProcessId

					}))
					selectedProcess.value = processList.value[0].value;
					dayWork.value.processId = processList.value[0].processId;
					dayWork.value.technologicalProcessId = processList.value[0].technologicalProcessId
					dayWork.value.technologicalProcessDetailId = selectedProcess.value
					dayWork.value.processStepNumber = processList.value.findIndex(v => v.value ===
							selectedProcess.value) >= 0 ?
						processList.value.find(v => v.value === selectedProcess.value).processStepNumber :
						null
				})
			}
		})
	}


	function handleDoLastLot() {
		uni.showModal({
			title: '提示',
			content: '确认是否加工尾批?',
			success: function(res) {
				if (res.confirm) {
					if (lotList.value.some(item => item.isLast == 1)) {
						for (let i = 0; i < lotList.value.length; i++) {
							if (lotList.value[i].isLast == 1) {
								batchNoList.value = [lotList.value[i]];
								dayWork.value.lotId = lotList.value[i].id;
								dayWork.value.lotCode = lotList.value[i].lotCode;
								dayWork.value.isLast = '1';
								return;
							}
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: '当前计划尾批已被加工',
							duration: 2500
						})
					}
				} else if (res.cancel) {}
			}
		});
	}

	function handleConfirmLotCode() {
		// 引入原生插件
		const mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module");
		// 调用插件的 mpaasScan 方法
		mpaasScanModule.mpaasScan({
				// 扫码识别类型，参数可多选，qrCode、barCode，
				// 如不设置，默认识别所有扫码类型，可能有些许影响识别效率
				scanType: ["qrCode", "barCode"],
				// 是否隐藏相册，默认false不隐藏
				hideAlbum: false,
			},
			(ret) => {
				console.log(ret);
				// uni.showModal({
				// 	title: "扫码结果",
				// 	// 返回值中，有三个参数 resp_code、resp_message、resp_result
				// 	// resp_code 表示返回结果值，10：用户取消，11：其他错误，1000：成功
				// 	// resp_message 表示返回结果信息
				// 	// resp_result 表示扫码结果，只有成功才会有返回
				// 	content: JSON.stringify(ret),
				// 	showCancel: false,
				// 	confirmText: "确定",
				// });
				if (ret.resp_result) {
					checkLotCode(ret.resp_result);
				}
			}
		);
	}

	function handleFurnaceNumberChange() {

		dayWork.value.furnaceNoInfo = basicInfo.value;
	}

	function handleProcessChange() {
		dayWork.value.technologicalProcessDetailId = selectedProcess.value;
		dayWork.value.processId = processList.value.findIndex(v => v.value === selectedProcess.value) >= 0 ? processList
			.value.find(v => v.value === selectedProcess.value).processId : null
		dayWork.value.processStepNumber = processList.value.findIndex(v => v.value === selectedProcess.value) >= 0 ?
			processList.value.find(v => v.value === selectedProcess.value).processStepNumber : null
		dayWork.value.technologicalProcessId = batchNoList.value[0].technologicalProcessId;
	}

	// function handleScanCode() {
	// 	uni.scanCode({
	// 		scanType: ['qrCode'],
	// 		onlyFromCamera: true, // 只允许相机扫码
	// 		autoZoom: false,
	// 		success: function(res) {
	// 			let vehicleObj = JSON.parse(res.result);
	// 			if (!vehicleObj.carrierId || vehicleObj.carrierId == "") {
	// 				uni.showToast({
	// 					icon: "error",
	// 					title: "请扫载具码",
	// 					duration: 1000
	// 				})
	// 				return;
	// 			}
	// 			for (let i = 0; i < vehicleList.value.length; i++) {
	// 				if (vehicleList.value[i].carrierId == vehicleObj.carrierId) {
	// 					uni.showToast({
	// 						icon: "error",
	// 						title: "载具已存在",
	// 						duration: 1000
	// 					})
	// 					return;
	// 				}
	// 			}
	// 			checkCarrier(vehicleObj.carrierId).then(response => {
	// 				if (response.code == 200) {
	// 					vehicleList.value.push(vehicleObj);
	// 				} else {
	// 					uni.showToast({
	// 						icon: 'none',
	// 						title: response.msg
	// 					})
	// 					return;
	// 				}
	// 			})
	// 		}
	// 	});
	// }

	function handleAdd() {
		if (selectedProcess.value == null) {
			uni.showToast({
				icon: 'none',
				title: '请选择工序后再开始批次'
			})
			return;
		}
		if (dayWork.value.furnaceNoInfo == null) {
			uni.showToast({
				icon: 'none',
				title: '请选择炉号再开始批次'
			})
			return;
		}
		dayWork.value.isWasteRecycling = batchNoList.value[0].isWasteRecycling
		dayWork.value.isAmend = batchNoList.value[0].isAmend
		dayWork.value.fromId = batchNoList.value[0].fromId
		store.furnaceNumberInfo = basicInfo.value;
		if (checkLotCode(dayWork.value.lotCode)) {
			saveDayWork(dayWork.value).then(res => {
				console.log(res)
				if (res.code === 200) {
					uni.showToast({
						icon: 'success',
						title: '添加成功',
						duration: 2000
					});
					// uni.$emit('batchReporting-addBatch');
					// uni.$emit('dayworkItemUpdate');
					uni.navigateBack({
						url: '/pages/batchReporting/index'
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 2000
					});
				}
			})
		} else {
			uni.showToast({
				icon: "none",
				title: "该批次号已被使用或不属于该产品",
				duration: 2000
			})
		}
	}
</script>

<style lang="scss">
	.container {
		height: 90%;
		background-color: #f5f5f5;
		padding-bottom: 112rpx;
	}

	.bottom {
		background-color: white;
		width: 100%;
		position: fixed;
		bottom: 0;
		align-items: center;
		background-color: #ffffff;
		padding: 16rpx 0;

		.add {
			margin: 0 auto;
			width: 80%;
			height: 80rpx;
		}
	}

	.content {
		position: relative;
		width: auto;
		background-color: rgba(255, 255, 255, 1);
		margin: 32rpx;
		padding-bottom: 50rpx;
		padding-top: 20rpx;
		border-radius: 12rpx;
		height: 100%;
		overflow: auto;

		.title {
			width: auto;
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
		}
	}

	.inpAndScan {
		justify-content: space-between;
		width: calc(88% + 20rpx);
		margin: 0 auto;

		.inp {
			width: calc(100% - 16rpx);
			margin: 10rpx auto;
			height: 74rpx;
		}

		.scanLotCode {
			border-radius: 6rpx;
			border: 1rpx solid rgba(22, 132, 252, 1);
			height: 60rpx;
			margin: 10rpx;
			height: 72rpx;
			width: 46%;
			text-align: center;
			line-height: 72rpx;
			background-color: rgba(22, 132, 252, 1);
			color: white;
		}
	}

	.batchNo {
		// justify-content: flex-start;
		// flex-wrap: wrap;
		// width: auto;
		// height: 320rpx;
		// overflow: auto;
		// padding-left: calc(100% - 88% - 4rpx - 40rpx);
		// margin-bottom: 40rpx;
		// border-radius: 6rpx;
		justify-content: center;

		.batchNo-item {
			justify-content: center;
			align-items: center;
			width: 88%;
			margin: 10rpx;
			height: 72rpx;
			border: 1px solid rgba(213, 213, 213, 1);
			border-radius: 6rpx;
		}

		.batchNoCheck {
			color: #FFF;
			border: 1rpx solid rgba(22, 132, 252, 1);
			background-color: rgba(22, 132, 252, 1);
		}
	}

	.vehicleList {
		justify-content: flex-start;
		flex-wrap: wrap;
		width: auto;
		height: 120rpx;
		overflow: auto;
		padding: 0 80rpx;

		.vehicleNo {
			padding: 0 10rpx;
			margin: 10rpx;
			justify-content: space-between;
			align-items: center;
			width: 230rpx;
			height: 60rpx;
			border: 1px solid rgba(213, 213, 213, 1);
			border-radius: 6rpx;
		}
	}

	.middle {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center
	}

	.segment {
		width: 280rpx;
		background-color: rgba(213, 213, 213, 1);
		border: 1rpx solid rgba(213, 213, 213, 1);
	}

	.info {
		width: 94%;
		justify-content: space-around;
		padding: 10rpx;
		margin: 0 auto;

		label {
			flex: 1;
			text-combine-upright: all;
			margin: 0 30rpx 0 20rpx;
		}

		text {
			flex: 3;
			// width: 80%;
		}

		.data-select {
			flex: 3;
			width: 80%;
			height: 60rpx;
			margin-right: 40rpx;
			border-radius: 18rpx;
			background-color: #FFF;

			.data-select-options {
				width: 200rpx;
			}
		}
	}

	.material {
		height: auto;
		width: 60%;
	}

	.selectedProcess {
		width: 88%;
		margin: 20rpx auto 40rpx;
	}
</style>