logpm/pagesHome/pages/ArrivalList/ArrivalList.vue

<template>
	<BasicContainer ref='basicContainer' :option="option" :leftClick="option.leftClick">
		<!-- 头部 -->
		<template #head>
			<view class="header">
				<view class="headtop">
					<view @click='showCalendar' class="inputsr">
						<view class="timeInput">
							{{datatime|| '请选择时间'}}
						</view>
						<view @click.stop.prevent>
							<u-icon @click='showCalendar' style="margin-right: 10upx;" v-if="!datatime" name="calendar"
								color="#999999" size="50"></u-icon>
							<u-icon @click="cleartime" style="margin-right: 10upx;" v-else name="close-circle" color="#999999"
								size="40"></u-icon>
						</view>
					</view>
				</view>

				<view class="headtop mt20">
					<view class="input flex1 mr10">
						<MyInput clearable v-model="details.scancode" placeholder="请扫描或输入车次号">

						</MyInput>
					</view>


					<view @click="handleSearch">查询</view>
				</view>


			</view>

		</template>

		<!-- 主体 -->
		<template #body>
			<view class="scvmabx">
				<view class="maxboxs">
					<template v-for="item in datalist" :key="item.carsNo">
						<view class="items">
							<view class="items_row">
								<view>
									车次号：{{item.carsNo}}
								</view>
							</view>
							<view class="items_row">
								<view>
									计划装车：{{item.planLoadingNumber}}
								</view>

								<view>
									实际装车：{{item.totalLoadingNum}}
								</view>
							</view>

							<view class="items_row">
								<view>
									在车件数：{{item.realLoadingNumber}}
								</view>

								<view>
									车型：{{''}}
								</view>
							</view>

							<view class="items_row">
								<view>
									主驾司机：{{item.driverName}}
								</view>

								<view>
									电话：{{item.driverMobile}}
								</view>
							</view>

							<view class="items_row">
								<view>
									发车时间：{{item.startTime}}
								</view>

								<view>
									车牌号：{{item.carNumber}}
								</view>
							</view>

							<view class="items_row">
								线路：{{item.carsLineName}}
							</view>

							<template v-if="Number(item.unloadStatus) === 0">
								<view class="button-container" v-if=" item.showArrivalBtn">
									<view class="button" style="background-color: #86cad0; width: 60%; margin: 0 auto;"
										@click="handleArriveCarByLoadId(item)">
										到车
									</view>
								</view>

								<view class="button-container" v-else-if="item.showControl">
									<view class="button" @click="handleDetailsByOrder(item, 1)">
										按件入库
									</view>

									<view class="button" @click="handleDetailsByOrder(item, 2)">
										整托入库
									</view>

									<view class="button" @click="handleScanByTray(item)">
										卸分一体
									</view>

									<template v-if="item.showTruckLoading">
										<view class="button" @click="gostockuplist(item)">
											按件装车
										</view>

										<view class="button" @click="gostockuplistBytray(item)">
											整托装车
										</view>

										<view class="button" @click="handleShowLoadImg(item, 'beforeLoad')">
											装车前图片
										</view>

										<view class="button" @click="handleShowLoadImg(item, 'beforeStart')">
											发车前图片
										</view>
									</template>


									<view class="button" @click="handleShowLoadImg(item, 'beforeUnload')">
										卸车前图片
									</view>
								</view>
							</template>

							<template v-else-if="isShowBtn">
								<view class="flex">
									<view class="button" @click="handleDetailsByOrder(item, 3)">
										按件补录
									</view>
								</view>
							</template>

							<!-- 标签 -->
							<view
								:class="{tag: true, err: [100].includes(Number(item.loadStatus)), primary: [80, 90, 91].includes(Number(item.loadStatus)) }">
								{{item.loadStatusName}}
							</view>
						</view>
					</template>
				</view>
			</view>
		</template>

	</BasicContainer>

	<!-- 装车前上传 -->
	<PopUp ref="LoadUploadImg">
		<block v-for="item in details.imgOption" :key="item.title">

			<view class="upload_img_item">
				<view class="upload_img_item_title">
					<view>
						{{item.title}}
					</view>

					<view v-if="item.min" class="ml10" style="color: red; font-weight: normal">
						最少{{item.min}}张
					</view>
				</view>

				<u-upload :fileList="item.imgArr" @afterRead="(e)=> handleUploadImg(e, item.imgArr)"
					@delete="(e)=> deletePic(e, item.imgArr)" multiple></u-upload>
			</view>

		</block>

	</PopUp>

	<l-calendar v-model:value="show" :initStartDate='date[0]' :initEndDate='date[1]' @hide='showCalendar'
		@change="onConfirm"></l-calendar>
	<saomiao2 :ishidestop="scanState !== 0"></saomiao2>
</template>

<script lang="ts" setup>
	import {
		postArriveUnloadPageList,
		warehouseTrayTypeorderScanTrayCode,
		postArriveCarByLoadId,
		postUploadLoadingPhoto,
		postUploadStartPhoto,
		postUploadUnloadPhoto
	} from '@/api/user.js'
	import {
		onLoad,
		onShow,
		onHide,
	} from '@dcloudio/uni-app'
	import { computed, nextTick, reactive, ref, toRefs, watchEffect } from "vue";
	import utils from '@/utils/utils.js'
	import functions from '@/utils/functions.js';
	import useSystemSettingsStore from '@/store/useSystemSettingsStore';
	import { storeToRefs } from 'pinia';
	const { scanState } = storeToRefs(useSystemSettingsStore())
	// 组件配置
	const option = reactive({
		leftClick() {
			uni.reLaunch({
				url: "/pages/index/index"
			})
		},
		// 标题
		title: '到车列表',
		// 下拉刷新回调函数
		async pullDownRefreshInitPage() {
			// 重置页码
			details.pageNum = 1
			// 重置渲染列表
			details.datalist = []
			// 重置渲染列表数据请求是否结束状态
			option.isEnd = false
			// 重置是否有数据
			option.haveData = true
			await initpage()
			if (datalist.value.length === 0) {
				uni.showToast({
					title: '暂时没有数据',
					icon: 'error'
				})
				option.haveData = false
			}
			if (option.isEnd) {
				return uni.showToast({
					icon: 'success',
					title: '数据已加载完毕'
				})
			}
			return null
		},
		// 触底加载回到函数
		reachBottomInitPage: async () => {
			details.pageNum += 1
			return initpage()
		},
		haveData: true,
		isEnd: false,
		isFixed: true
	})

	// 组件实例
	const basicContainer = ref()
	const LoadUploadImg = ref()

	// 添加防抖函数
	let antiShake : any = null
	// 触底加载
	function reachBottomInitPage() {
		try {
			// 数据请求完毕, 不再请求
			if (option.isEnd) {
				return uni.showToast({
					icon: 'success',
					title: '数据已加载完毕'
				})
			}
			console.log('antiShake :>> ', antiShake);
			if (antiShake) {
				uni.hideLoading()
				// 清空定时器
				clearTimeout(antiShake)
				return antiShake = null
			}
			// 显示Loading, 并阻止点击屏幕
			uni.showLoading({
				title: '正在加载',
				mask: true
			})
			antiShake = setTimeout(async () => {
				// 触发触底回调
				details.pageNum += 1
				const res = await initpage()
				// 关闭loading效果
				uni.hideLoading()
				// 清空定时器
				antiShake = null
				// 当返回数据数组长度小于每页数量时, 数据请求完毕
				if (res.data && res.data.records.length < details.pageSize) {
					uni.showToast({
						title: '已经到底了',
						icon: 'success'
					})
					clearTimeout(antiShake)
					return option.isEnd = true
				}
				clearTimeout(antiShake)
			}, 500)
		} catch (err) {
			//TODO handle the exception
			console.log('err :>> ', err);
		}
	}

	let details = reactive({
		show: false,
		/** 时间 */
		datatime: '',
		/** 当前页码 */
		pageNum: 1,
		/** 页数 */
		pageSize: 20,
		/** 渲染列表数据 */
		datalist: [],
		/** 扫描的码值 */
		scancode: '',
		scrollheight: '80vh',
		notRefresh: false,
		/** 装车上传前配置 */
		LoadUploadImgOption: [
			{
				title: '车厢卫生',
				type: '10',
				position: '2',
				min: 1,
				imgArr: []
			}
		],
		/** 发车前上传前配置 */
		StartUploadImgOption: [
			{
				title: '盖雨棚前 - 左',
				type: '20',
				position: '3',
				min: 1,
				imgArr: [],
			},
			{
				title: '盖雨棚前 - 右',
				type: '20',
				position: '4',
				min: 1,
				imgArr: [],
			},
			{
				title: '盖雨棚前 - 后',
				type: '20',
				position: '2',
				min: 1,
				imgArr: [],
			},
			{
				title: '盖雨棚后 - 左',
				type: '21',
				position: '3',
				min: 1,
				imgArr: [],
			},
			{
				title: '盖雨棚后 - 右',
				type: '21',
				position: '4',
				min: 1,
				imgArr: [],
			},
			{
				title: '盖雨棚后 - 后',
				type: '21',
				position: '2',
				min: 1,
				imgArr: [],
			},

		],
		/** 卸车前图片 */
		beforeUnloadImgArr: [
			{
				title: '卸车前车辆照片 - 左',
				type: '20',
				position: '3',
				imgArr: [],
			},
			{
				title: '卸车前车辆照片 - 右',
				type: '20',
				position: '4',
				imgArr: [],
			},
			{
				title: '卸车前车辆照片 - 后',
				type: '20',
				position: '2',
				imgArr: [],
			},
			{
				title: '防护措施 - 左',
				type: '21',
				position: '3',
				imgArr: [],
			},
			{
				title: '防护措施 - 右',
				type: '21',
				position: '4',
				imgArr: [],
			},
			{
				title: '防护措施 - 后',
				type: '21',
				position: '2',
				imgArr: [],
			},
		],
		imgOption: [],
		/** 已上传的图片 */
		oldImgArr: []
	})

	const carStateDictionaries = reactive([
		{ label: '未发车', value: 0 },
		{ label: '已发车', value: 10 },
		{ label: '网点到车', value: 20 },
		{ label: '网点发车', value: 30 },
		{ label: '终点到车', value: 40 },
		{ label: '已卸车', value: 80 },
		{ label: '已签收', value: 90 },
		{ label: '部分签收', value: 91 },
		{ label: '取消配载', value: 100 },
	])

	/** 是否存在按件补录权限 */
	const isShowBtn = computed(() => {
		const rules = uni.getStorageSync('authbuts')

		if (utils.getObjType(rules) !== 'array') return false
		let _flag = false

		for (let i = 0; i < rules.length; i++) {
			const val = rules[i]
			if (val.code !== 'gzt_rk_CopyByPiece') continue
			_flag = true
			break
		}

		return _flag
	})

	onLoad(() => {
		date.value[0] = (uni as any).$u.timeFormat((new Date().valueOf() - 1000 * 60 * 60 * 24 * 3), 'yyyy-mm-dd')
		date.value[1] = (uni as any).$u.timeFormat((new Date().valueOf()), 'yyyy-mm-dd')
		details.datatime = date.value[0] + ' 至 ' + date.value[1]
		// #ifdef APP
		utils.ttsspke('请选择配载计划')
		// #endif
	})

	onShow(async () => {
		// 初始化关闭监听
		uni.$off('scancodedate')
		uni.$on('scancodedate', function (code) {
			console.log('code :>> ', code);
			if (code) {
				console.log(code);
				details.scancode = code
				scandata()
			}
		})

		await nextTick()
		console.log('details.notRefresh :>> ', details.notRefresh);
		basicContainer.value.startPullDownRefresh()
		details.scrollheight = await utils.getViewDistanceFormTop('.scvmabx')
	})

	/** 时间 */
	const date = ref<(string | number)[]>([])

	async function scandata() {
		// 重置页码
		details.pageNum = 1
		// 重置渲染列表
		details.datalist = []
		// 重置渲染列表数据请求是否结束状态
		option.isEnd = false
		// 重置是否有数据
		option.haveData = true
		await initpage()
		if (datalist.value.length === 0) {
			uni.showToast({
				title: '暂时没有数据',
				icon: 'error'
			})
			option.haveData = false
		}
		if (option.isEnd) {
			return uni.showToast({
				icon: 'success',
				title: '数据已加载完毕'
			})
		}
	}

	const handleScan = () => {
		details.notRefresh = true

		console.log('details.notRefresh :>> ', details.notRefresh);
		uni.scanCode({
			success(res) {
				console.log('res :>> ', res);
				details.scancode = res.result
				scandata()
			}
		})
	}

	async function initpage() {
		try {
			let submitData = {
				type: '1',
				pageNum: details.pageNum,
				pageSize: details.pageSize,
				startDate: date.value[0] || '',
				endDate: date.value[1] || '',
				carsNo: details.scancode
			}
			const res = await postArriveUnloadPageList(submitData)
			if (res.code !== 200) return
			const { code, data } = res
			if (code === 200 && data) {
				// 当前仓库的Id
				const _wareHouseId = uni.getStorageSync('checkname').id

				for (let iterator of data.records) {
					const _endWarehouseIds = iterator.endWarehouseIds ? iterator.endWarehouseIds.split(',') : []
					// 是否在显示控件
					iterator.showControl = false
					// 是否显示到车
					iterator.showArrivalBtn = false
					// 是否为中间节点
					iterator.showTruckLoading = false

					iterator.loadStatusName = carStateDictionaries.find(
						val => Number(iterator.loadStatus) === val.value
					).label;

					// 任务当前节点
					let _nowIndex = -1
					// 查询本仓在任务路线中的节点位置
					let _index = -1

					for (let i = 0; i < _endWarehouseIds.length; i++) {
						const value = _endWarehouseIds[i]

						if (iterator.nowWarehouseId === value) _nowIndex = i
						if (_wareHouseId === value) _index = i
					}

					// 现节点在始发仓, 无法操作
					if (Number(iterator.loadStatus) === 100 || Number(iterator.loadStatus) === 0) continue

					console.log('_nowIndex :>> ', _nowIndex);
					console.log('_index :>> ', _index);
					// 是否显示到车按钮
					if (_nowIndex < _index) {
						if (Number(iterator.loadStatus) === 10 || Number(iterator.loadStatus) === 30) iterator.showArrivalBtn = true

						continue
					}

					// 是否在当前节点
					iterator.showControl = true
					// 是否为中间节点
					if (_index !== _endWarehouseIds.length - 1 && _nowIndex === _index && Number(iterator.loadStatus) === 20) iterator.showTruckLoading = true
				}
				details.datalist = [...details.datalist, ...data.records]
			}
			if (data && data.pages <= details.pageNum) option.isEnd = true
			console.log('details.datalist :>> ', details.datalist);
			return res
		} catch (err) {
			//TODO handle the exception
			console.log('err :>> ', err);
		}
	}

	const handleSearch = () => {
		basicContainer.value.startPullDownRefresh()
	}

	function showCalendar() {
		details.show = !details.show
	}
	function onConfirm(e : any) {
		console.log(e);
		date.value[0] = e.startDate
		date.value[1] = e.endDate
		details.datatime = date.value[0] + ' 至 ' + date.value[1]

		basicContainer.value.startPullDownRefresh()
	}

	function cleartime() {
		details.datatime = ''
		date.value = []

		basicContainer.value.startPullDownRefresh()
	}

	/** 到车 */
	const handleArriveCarByLoadId = async (item) => {
		try {
			const submitData = {
				loadId: item.id
			}

			const res = await postArriveCarByLoadId(submitData)

			if (res.code !== 200) return
			utils.handleToast('到车成功')
			basicContainer.value.startPullDownRefresh()
		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		} finally {

		}
	}

	/** 按件入库 || 整托入库 || 按件补录 */
	const handleDetailsByOrder = (item, type) => {
		uni.navigateTo({
			url: '/pagesHome/pages/VehicleArrivalDetails/VehicleArrivalDetails?id=' + item.id + '&type=' + type + '&page=' + 'ArrivalList'
		})
	}

	/** 卸分一体 */
	const handleScanByTray = (item) => {
		uni.navigateTo({
			url: '/pagesHome/pages/VehicleArrivalDetailsByTray/VehicleArrivalDetailsByTray?id=' + item.id + '&carsNo=' + item.carsNo
		})
	}

	/** 按件装车 */
	function gostockuplist(item : any) {
		uni.navigateTo({
			url: '/pagesHome/pages/StowageListDetails/StowageListDetails?id=' + item.id + '&type=' + 1
		})
	}
	/** 按托装车 */
	function gostockuplistBytray(item : any) {
		uni.navigateTo({
			url: '/pagesHome/pages/StowageListDetails/StowageListDetails?id=' + item.id + '&type=' + 2
		})
	}

	const handleInitImg = (data, imgArr, cloneList) => {
		if (utils.getObjType(data) !== 'array') return
		if (utils.getObjType(imgArr) !== 'array') return
		if (utils.getObjType(cloneList) !== 'array') return

		console.log('imgArr :>> ', imgArr);
		console.log('cloneList :>> ', cloneList);

		for (let i = 0; i < data.length; i++) {
			const value = data[i]

			for (let i = 0; i < imgArr.length; i++) {
				const item = imgArr[i]

				if (item.type + ' - ' + item.position !== value.type + ' - ' + item.position) continue
				item.imgArr.push({ url: value.url })
				cloneList.push({ url: value.url })
				break
			}
		}
	}

	/** 显示装车前上传图片 */
	const handleShowLoadImg = (item, type) => {
		const _oldImgArr = []
		let title = ''

		const { carsLoadLinePhotoEntities } = item
		switch (type) {
			case 'beforeLoad':
				details.imgOption = utils.deepClone(details.LoadUploadImgOption)
				title = '装车前照片'
				break;

			case 'beforeStart':
				details.imgOption = utils.deepClone(details.StartUploadImgOption)
				title = '发车前照片'
				break;

			case 'beforeUnload':
				details.imgOption = utils.deepClone(details.beforeUnloadImgArr)
				title = '卸车前照片'
				break

			default:
				break;
		}
		handleInitImg(carsLoadLinePhotoEntities, details.imgOption, _oldImgArr)

		LoadUploadImg.value.setDetails({
			title,
			showPopUp: true,
			async success() {
				const submitData = {
					loadId: item.id,
					addUrlList: [],
					removeUrlList: []
				}


				for (let i = 0; i < details.imgOption.length; i++) {
					const value = details.imgOption[i]
					console.log('value :>> ', value);

					if (value.imgArr.length < value.min) return utils.handleToast(`${value.title}最少上传${value.min}张`)
					for (let i = 0; i < value.imgArr.length; i++) {
						const item = value.imgArr[i]

						let isContinue = false

						for (let i = 0; i < _oldImgArr.length; i++) {
							const _val = _oldImgArr[i]

							if (_val.url !== item.url) continue
							isContinue = true
							_oldImgArr.splice(i, 1)
							break
						}

						if (isContinue) continue
						submitData.addUrlList.push({
							type: value.type,
							position: value.position,
							url: item.url
						})
					}
				}

				for (let i = 0; i < _oldImgArr.length; i++) {
					const value = _oldImgArr[i]

					submitData.removeUrlList.push(value.id)
				}



				let res : any = {}

				switch (type) {
					case 'beforeLoad':
						res = await postUploadLoadingPhoto(submitData)
						break;

					case 'beforeStart':
						res = await postUploadStartPhoto(submitData)
						break;

					case 'beforeUnload':
						res = await postUploadStartPhoto(submitData)
						break;

					default:
						break;

				}

				const { code, msg } = res

				if (code !== 200) return

				utils.handleToast(msg)

				LoadUploadImg.value.details.showPopUp = false

				basicContainer.value.startPullDownRefresh()
			}
		})

	}

	/** 上传图片 */
	const handleUploadImg = async (event, imgArr) => {
		try {
			uni.showLoading({
				title: '上传中',
				mask: true
			})

			const writeArr = ['jpg', 'jpeg', 'png']
			const PromiseAll = []

			for (let i = 0; i < event.file.length; i++) {
				const item = event.file[i]
				console.log('item :>> ', item);
				// const type = item.name.split('.').slice(-1)[0]

				let type = ''

				item.url && (type = item.url.split('.').slice(-1)[0])
				item.name && (type = item.name.split('.').slice(-1)[0])


				if (writeArr.indexOf(type) === -1) continue

				console.log('type :>> ', type);

				PromiseAll.push(functions.upfile(item.url, false))
			}


			const res = await Promise.all(PromiseAll)

			console.log('res :>> ', res);

			for (let i = 0; i < res.length; i++) {
				const response = res[i]

				const { link } = response

				if (!link) continue

				imgArr.push({ url: link })
			}
		} catch (err) {
			console.log('err :>> ', err);
			//TODO handle the exception
		} finally {
			uni.hideLoading()
		}

		console.log('event :>> ', event);

	}

	/** 删除图片 */
	const deletePic = (event, imgArr) => {
		console.log('event :>> ', event);

		imgArr.splice(event.index, 1)
	}


	const {
		show,
		datatime,
		datalist,
		scancode,
	} = toRefs(details)
</script>

<style lang="scss" scoped>
	.inputsr {
		width: 100%;
		height: 64upx;
		background: #F5F5F6;
		border-radius: 8upx 8upx 8upx 8upx;
		opacity: 1;
		border: 2upx solid #EEEEEE;
		padding: 16upx 18upx;
		box-sizing: border-box;
		padding-right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 26upx;
		font-weight: 400;
		color: #092C4D;

		>.timeInput {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			flex: 1;
			font-size: 26upx;
		}
	}

	.header {
		width: 100vw;
		box-sizing: border-box;
		background-color: #FFFFFF;
		padding: 20upx 30upx;

		.input {
			height: 60upx;
			background: #F5F5F6;
			border-radius: 8upx;
			opacity: 1;
			border: 2upx solid #00000020;
			padding: 4upx;

			:deep(.input_container) {
				border: none;
			}
		}
	}

	.headtop {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;

		>view:nth-of-type(1) {
			border: 2upx solid #00000020;
			padding: 10upx 20upx;
			box-sizing: border-box;

			>input {
				flex: 1;
				font-size: 28upx;
			}
		}

		>view:nth-of-type(2) {
			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;
		}
	}

	.scvmabx {
		width: 100%;
		margin-top: 20upx;

		.maxboxs {
			width: 100%;
			font-size: 0.9rem;

			.items {
				display: flex;
				flex-direction: column;
				background-color: #ffffff;
				padding: 16upx 30upx;
				box-sizing: border-box;
				position: relative;
				margin: 20upx;
				border-radius: 10upx;

				.items_row {
					display: flex;
					padding-bottom: 15upx;

					>view {
						width: 60%;

						&:nth-child(2) {
							width: 40%;
						}
					}
				}
			}

			// 标签
			.tag {
				position: absolute;
				right: 0;
				top: 0;
				font-size: 28upx;
				font-weight: bold;
				padding: 10upx 20upx;
				color: #fa8c16;
				background-color: #fef3e7;
				// border-bottom-left-radius: 10upx;
				// border-top-left-radius: 10upx;
				// border-radius: 10upx;

				&.err {
					color: var(--errColor);
					background-color: #feeded;
				}

				&.primary {
					color: var(--primaryColor);
					background-color: #e5f2fd;
				}
			}

			.button-container {
				border-top: 4upx solid #eee;
				padding-top: 10upx;
				display: flex;
				flex-wrap: wrap;



				.button {
					margin-right: 20upx;
				}
			}

			.button {
				color: #fff;
				border-radius: 5upx;
				padding: 15upx 20upx;
				font-size: 28upx;
				background: var(--subjectColor);
				margin-bottom: 10upx;
				display: flex;
				justify-content: center;
			}
		}
	}

	// 上传
	:deep(.u-upload__button) {
		width: 4.5rem !important;
		height: 4.5rem !important;

		.u-icon__icon {
			font-size: 1.5rem !important;
			line-height: 1.5rem !important;
		}
	}

	:deep(.u-upload__wrap__preview__image) {
		width: 4.5rem !important;
		height: 4.5rem !important;


	}

	:deep(.u-upload__deletable) {
		width: 36upx;
		height: 36upx;

		.u-icon__icon {
			font-size: 28upx !important;
			line-height: 28upx !important;
		}
	}

	:deep(.popUpMask) {
		z-index: 99;
	}

	// 发车前上传
	.upload_img_item {
		.upload_img_item_title {
			margin: 20upx 0;
			font-weight: bold;
			color: var(--subjectColor);
			display: flex;
			align-items: center;

			&::before {
				content: '';
				width: 4upx;
				height: 1rem;
				background-color: var(--subjectColor);
				margin-right: 20upx;
			}
		}
	}


	.w100 {
		width: 100%;
	}
</style>