aiot-app/pages/maintenance/detail/detail.vue

<template>
	<view class="maintenance-container">
		<uni-nav-bar fixed="true" statusBar="true" left-icon="back" title="保养工单详情" @clickLeft="back"
			@clickRight="HandlScanCode"></uni-nav-bar>
		<view class="maintenance-wrapper">
			<view class="maintenance-content">
				<u-subsection :list="tabList" :current="active" @change="handleTabChange" active-color="#157a2c"></u-subsection>
				<view class="kd-baseInfo" v-show="active === 0">
					<view class="kd-cell">
						<text class="kd-label">工单编号</text>
						<text class="kd-content">{{ worksheetInfo.code }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">保养名称</text>
						<text class="kd-content">{{ worksheetInfo.planName }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">设备分类</text>
						<text class="kd-content">{{ worksheetInfo.categoryName }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">保养设备总数</text>
						<text
							class="kd-content text-warning">{{ worksheetInfo.finishNum }}/{{ worksheetInfo.total }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">计划完成时长</text>
						<text class="kd-content">{{ worksheetInfo.duration }}分钟</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">实际完成时长</text>
						<text
							class="kd-content">{{ finishTime(worksheetInfo.acceptTime, worksheetInfo.finishTime) }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">实际开始时间</text>
						<text class="kd-content">{{ worksheetInfo.acceptTime }}</text>
					</view>
					<view class="kd-cell">
						<text class="kd-label">实际完成时间</text>
						<text class="kd-content">{{ worksheetInfo.finishTime }}</text>
					</view>

					<!-- <u-button type="primary" size="large" text="开始执行"></u-button> -->
					<template>
						<template v-if="worksheetInfo.orderStatus === 0">
							<button class="btn-execute" type="primary" @click="handleExecute">开始执行</button>
							<button class="btn-sparepart" type="warning" @click="handlbpbj">申请备品备件</button>
							<button class="btn-reassignment" type="primary" @click="handleAssign">转派</button>
							<!-- <div class="apply-box">
                <button
                  class="btn-reassignment"
                  type="primary"
                  @click="sparepartApply"
                >
                  申请备品备件
                </button>
              </div> -->
						</template>
						<template v-else-if="worksheetInfo.orderStatus === 2">
							<button class="btn-execute" type="primary" @click="handleReport">报工</button>
							<button class="btn-sparepart" type="warning" @click="handlbpbj">申请备品备件</button>
						</template>
						<button v-else-if="worksheetInfo.orderStatus === 3" :disabled="true" class="btn-execute"
							type="primary">已报工</button>
						<!-- <div class="apply-box">
              <button
                v-if="worksheetInfo.status.code !== 3"
                class="btn-reassignment"
                type="primary"
                @click="sparepartApply"
              >
                申请备品备件
              </button>
              <button
                v-if="worksheetInfo.status.code === 0"
                class="btn-reassignment"
                type="primary"
                @click="handleAssign"
              >
                转派
              </button>
            </div> -->
					</template>
				</view>
				<view class="kd-equipment" v-show="active === 1">
					<view class="kd-type-box">
						<view :class="{ 'type—active': typeActive === index }" v-for="(item, index) in equpStatus"
							:key="index" @click="typeChange(index)">
							{{ item.name }}
							<text v-if="item.count > 0" class="count">{{ item.count }}</text>
						</view>
					</view>
					<view class="kd-list-container">
						<u-list @scrolltolower="scrolltolower">
							<u-list-item v-for="(item, index) in euqiList" :key="index">
								<view class="kd-card">
									<view class="kd-card-wrapper">
										<view class="kd-cell">
											<text class="kd-label">设备编码</text>
											<text class="kd-content">{{ item.code }}</text>
										</view>
										<view class="kd-cell">
											<text class="kd-label">设备名称</text>
											<text class="kd-content">{{ item.name }}</text>
										</view>
										<view class="kd-cell">
											<text class="kd-label">设备型号</text>
											<text class="kd-content">{{ item.model }}</text>
										</view>
										<view class="kd-cell">
											<text class="kd-label">设备位置</text>
											<text class="kd-content">{{ item.deviceLocationName.pathName }}</text>
										</view>
										<view class="kd-cell">
											<text class="kd-label">执行结果</text>
											<text class="kd-content">
												<text class="status-box text-warning"
													v-if="item.executeStatus === 0">待检</text>
												<text class="status-box text-primary"
													v-else-if="item.executeStatus === 1">已检</text>
												<text class="status-box text-danger"
													v-else-if="item.executeStatus === 2">异常</text>
												<text class="status-box text-primary"
													v-else-if="item.executeStatus === 3">已报修</text>
											</text>
										</view>
									</view>
									<view class="card-footer">
										<button v-if="item.orderStatus == 2 && item.executeStatus == 0" type="primary"
											class="primary-btn" @click="handleCheck(item)">检查</button>
										<!-- <button type="primary" class="primary-btn" @click="handleExecute" v-if="item.orderStatus == 2 && item.executeStatus == 0">开始执行</button> -->
										<template v-if="item.orderStatus && item.orderStatus === 3">
											<button type="default" v-if="item.resultStatus === 2"
												@click="handLbx(item)">报修</button>
											<button type="default" v-else-if="item.resultStatus === 3"
												@click="handLbxDetail(item)">报修详情</button>
										</template>
										<button type="default"
											v-if="[0, 2, 3].includes(item.orderStatus) && item.executeStatus != 0"
											@click="checkDetail(item)">保养详情</button>
									</view>
								</view>
							</u-list-item>
						</u-list>
					</view>
				</view>
				<view class="spare-parts" v-if="active == 2">
					<pickCard :list="sparePartsApply" />
				</view>
				<!-- 	<view class="spare-parts" v-show="active === 2">
					<Step>
						<StepItem v-for="(item, index) in repairInfoLogList" :key="index" :active="index == 0" :hideContent="Boolean(item.content)">
							<template v-slot:header>
								<view class="step-title">
									<view class="s1">{{ typeOptions[item.type] }}</view>
									<view class="s2">
										{{ item.createTime }}
									</view>
								</view>
							</template>
							<template v-slot:content v-if="item.content">
								<view class="list-xs" v-if="item.type == 'CREATE'">
									<view class="list-xs-item">
										<view class="label">报修人</view>
										<view class="value">
											{{ logs[item.id] ? logs[item.id].content.requestUserName : '' }}
										</view>
									</view>
									<view class="list-xs-item">
										<view class="label">故障描述</view>
										<view class="value">
											{{ logs[item.id] ? logs[item.id].content.remark : '' }}
										</view>
									</view>
								</view>
								<view class="list-xs" v-else-if="item.type == 'SPARE_PARTS_APPLY'">
									<view class="list-xs-item">
										<view class="label">申领清单</view>
										<view class="value bjsymx" @click="handlbjsymx('备件明细', item.content.infoList)">备件使用明细</view>
									</view>
								</view>
								<view class="list-xs" v-else-if="item.type == 'ACCEPTANCE_CHEK'">
									<view class="list-xs-item">
										<view class="label">验收人</view>
										<view class="value">
											{{ logs[item.id] ? logs[item.id].content.userName : '' }}
										</view>
									</view>
									<view class="list-xs-item">
										<view class="label">验收结果</view>
										<view class="value">
											{{ logs[item.id] ? (logs[item.id].content.orderStatus == 4 ? '通过' : '驳回') : '' }}
										</view>
									</view>
								</view>
								<view class="list-xs" v-else-if="item.type == 'WORK_REPORT'">
									<view class="list-xs-item">
										<view class="label">处理说明</view>
										<view class="value">
											{{ logs[item.id] ? logs[item.id].content.reason : '' }}
										</view>
									</view>
								</view>
							</template>
						</StepItem>
					</Step>
					<PopSparePart ref="PopSparePart" :workOrderCode="workOrderCode" :noRequest="true"></PopSparePart>
				</view> -->
			</view>
		</view>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="您当前已超出计划完成时间，请填写原因" placeholder="请输入内容"
				:before-close="true" @close="handleClose" @confirm="timeoutCauseConfirm"></uni-popup-dialog>
		</uni-popup>
		<u-modal :show="modalShow" title="提示" @confirm="modalShow = false">
			<view>
				您还有
				<text class="text-warning">{{ worksheetInfo.awaitInspectSum }}</text>
				台设备待检，不可报工
			</view>
		</u-modal>
		<Assign ref="assignRef" @success="assignSuccess" />

		<!-- <ScanCode @scancodedate="scancodedate" :model="'uni'"></ScanCode> -->
	</view>
</template>

<script>
	import Step from '@/components/Step/Step.vue'
	import StepItem from '@/components/Step/StepItem.vue'
	import PopSparePart from '../../maintenanceWorkorder/components/PopSparePart.vue'
	import {
		getWorkOrderDetail,
		getDeviceList,
		startExecuting,
		signingWork,
		devicestatistics
	} from '@/api/myTicket/index.js'
	import {
		getSpareParts,
		getSparePartsApply,
		getWordOrderDetail
	} from '@/api/repair'
	import {
		get,
		post,
		postJ
	} from '@/utils/api.js'
	import Assign from '@/components/Assign.vue'
	import CellInfo from '@/components/CellInfo.vue'
	import KdTabs from '@/components/KdTabs.vue'
	import dayjs from 'dayjs'
	import ScanCode from '@/components/ScanCode.vue'
	import pickCard from '@/pages/maintenanceWorkorder/components/pickCard.vue'
	export default {
		components: {
			CellInfo,
			KdTabs,
			Assign,
			ScanCode,
			Step,
			StepItem,
			PopSparePart,
			pickCard
		},
		data() {
			return {
				tabList: ['基本信息', '保养设备', '备品备件'],
				typeOptions: {
					CREATE: '生成工单',
					SPARE_PARTS_APPLY: '备品备件申请',
					ACCEPTANCE_CHEK: '验收',
					WORK_REPORT: '报工'
				},
				logs: {},
				modalShow: false,
				active: 0,
				typeActive: 0,
				statusList: {
					0: '待接收',
					1: '执行中',
					3: '已完成'
				},
				pageId: '',
				workOrderCode: '',
				worksheetInfo: {
					equiList: [],
					workOrder: {}
				},
				repairInfoLogList: [],
				sparePartsApply: [],
				equpStatus: [
					// {
					//   name: '全部',
					//   value: []
					// },
					{
						name: '全部',
						value: -1
					},
					{
						name: '待检',
						value: 0
					},
					{
						name: '已检',
						value: 1
					},
					{
						name: '异常',
						value: 2
					}
				],
				euqiList: [],
				equipPage: 1,
				isEnd: false,
				barType: 0,
				qrContent: null
			}
		},
		async onLoad(options) {
			this.pageId = options.id
			this.planId = options.planId
			// 设备台账跳转详情
			this.getInfo()
		},
		onShow() {
			this.getInfo()
			this.getCount()
			if (this.chooseTab) {
				this.active = 1
				this.typeChange(2)
			} else {
				this.typeChange(0)
			}
		},
		onHide() {
			uni.$off('scancodedate')
		},
		onUnload() {
			uni.$off('scancodedate')
		},
		methods: {

			// 跳转备品备件
			async handlbpbj() {
				let data = await getWordOrderDetail(this.worksheetInfo.id);
				data.deviceList = data.deviceList.map((item) => {
					return item.substance;
				});
				data['pageType'] = 'add'
				uni.navigateTo({
					url: `/pages/maintenanceWorkorder/sparepart/sparepart?data=${JSON.stringify(data)}`
				})

			},
			//获取备品备件
			async getSparePartsApply(id) {
				const list = await getSparePartsApply(id)
				this.sparePartsApply = list
			},
			getCount() {
				devicestatistics({
					planId: this.planId
				}).then(data => {
					this.equpStatus = this.equpStatus.map(item => {
						switch (item.name) {
							case '全部':
								return {
									...item, count: data.total
								}
							case '待检':
								return {
									...item, count: data.isInspectedNum
								}
							case '已检':
								return {
									...item, count: data.checkedNum
								}
							case '异常':
								return {
									...item, count: data.abnormalNum
								}
						}
					})
				})
			},
			// 扫码枪扫码
			cbScancodedate(data) {
				this.Scancodedate(data.code)
			},
			// 相机扫码
			HandlScanCode() {
				let _this = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						_this.Scancodedate(res.result)
					}
				})
			},
			Scancodedate(code) {
				let _this = this
				if (this.worksheetInfo.status.code === 0) {
					uni.showModal({
						title: '提示',
						content: '工单未开启执行，不可进行保养操作，请先点击“开始执行”！',
						confirmText: '开始执行', //这块是确定按钮的文字
						cancelText: '取消', //这块是取消的文字
						success: function(res) {
							if (res.confirm) {
								_this.handleExecute() // 执行确认后的操作
							} else {
								// 执行取消后的操作
							}
						}
					})
					return
				}
				this.qrContent = code.trim()
				this.barType = this.setBarType(this.qrContent)
				_this.getData()
			},
			// 设置barType
			setBarType(val) {
				let index = val.indexOf('@_@')
				let result = 0
				if (index !== -1) {
					let item = val.substr(index + 3, 1)
					if (item) {
						result = Number(item)
					}
				}
				return result
			},
			// 根据条码请求设备数据
			getData() {
				let par = {
					barType: this.barType,
					qrContent: this.qrContent
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				postJ(this.apiUrl + '/scan/getAssetInfo', par)
					.then(res => {
						console.log('扫码接口返回', res)
						let data = res.data
						this.matchEquipment(data)
					})
					.finally(() => {
						uni.hideLoading()
					})
			},

			matchEquipment(data) {
				let par = {
					assetCode: data.assetCode,
					workOrderId: this.worksheetInfo.id
				}
				console.log('par', par)
				post(this.apiUrl + '/workOrder/scanMatching', par).then(res => {
					let data = res.data
					if (!data) {
						uni.showModal({
							title: '提示',
							content: '本工单中，无此设备！',
							confirmText: '好的', //这块是确定按钮的文字
							showCancel: false,
							success: function(res) {
								if (res.confirm) {
									// 执行确认后的操作
								} else {
									// 执行取消后的操作
								}
							}
						})
					} else {
						// 未报工
						if (this.worksheetInfo.status.code === 1) {
							this.handleCheck(data)
						}
						// 已报工
						if (this.worksheetInfo.status.code === 3) {
							this.checkDetail(data)
						}
					}
				})
			},

			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			handleAssign() {
				this.$refs.assignRef.open(this.worksheetInfo.id)
			},
			assignSuccess() {
				this.back()
			},
			finishTime(start, end) {
				if (!end) return ''
				let dur = new Date(end).getTime() - new Date(start).getTime()
				return Math.ceil(dur / 1000 / 60) + '分钟'
			},
			// 申请备品备件
			sparepartApply() {
				uni.navigateTo({
					url: `/pages/maintenance/sparepart/sparepart?planCode=${this.worksheetInfo.planCode}&sourceId=${this.worksheetInfo.id}&sourceCode=${this.worksheetInfo.workOrderCode}`
				})
			},
			// 申请备品备件详情
			sparepartDetail() {
				uni.navigateTo({
					url: `/pages/maintenance/sparepart/sparepartDetail?applyOrder=${this.worksheetInfo.applyOrder}`
				})
			},
			// 报工
			handleReport() {
				if (this.worksheetInfo.finishNum !== this.worksheetInfo.total) {
					uni.showToast({
						title: '请完成巡检设备检查',
						icon: 'none'
					})
					this.active = 1
					//---------------------------------
				} else {
					if (new Date(this.worksheetInfo.acceptTime).getTime() + this.worksheetInfo.duration * 60 * 1000 <
						new Date().getTime()) {
						this.$refs.inputDialog.open()
						return
					}
					this._report()
				}
			},
			handleClose() {
				this.$refs.inputDialog.close()
			},
			timeoutCauseConfirm(value) {
				if (!value) {
					uni.showToast({
						title: '请输入超时原因',
						icon: 'none'
					})
					return
				}
				this.$refs.inputDialog.close()
				this._report(value)
			},
			_report(timeoutCause = '') {
				signingWork({
					id: this.pageId,
					timeoutCause: timeoutCause
				}).then(() => {
					uni.showToast({
						icon: 'success',
						title: '操作成功！',
						duration: 2000
					})
					this.getInfo()
				})
			},
			// 执行工单
			handleExecute() {
				startExecuting({
					id: this.pageId
				}).then(() => {
					uni.showToast({
						icon: 'success',
						title: '操作成功！',
						duration: 2000
					})
					this.getInfo()
				})
			},
			//巡点检设备加载更多
			scrolltolower() {
				if (this.isEnd) return
				this.equipPage++
				this.getEquipList()
			},
			// 巡点检设备列表
			getEquipList() {
				const params = {
					planId: this.planId,
					status: this.equpStatus[this.typeActive].value,
					pageNum: 1,
					size: 9999
				}
				getDeviceList(params).then(data => {
					if (this.equipPage === 1) {
						this.euqiList = data.list
					} else {
						this.euqiList.push(...data.list)
					}
					this.isEnd = this.euqiList.length >= data.count
				})
			},

			handleTabChange(value) {
				console.log(value, 'value')
				this.active = value
				if (value === 1) {
					this.typeChange(0)
				}
			},
			// 设备状态切换
			typeChange(type) {
				this.typeActive = type
				this.equipPage = 1
				this.getEquipList()
			},
			// handleCheck({ id, equiName, equiCode, sparePartsJson }) {
			// 	this.$store.commit('maintenance/SET_SPAREPARTSJSON', sparePartsJson)
			// 	uni.navigateTo({
			// 		url: `/pages/maintenance/check/index?workOrderId=${this.pageId}&id=${id}&equiName=${equiName}&equiCode=${equiCode}&applyOrder=${this.worksheetInfo.applyOrder}&workOrderCode=${this.worksheetInfo.workOrderCode}`
			// 	})
			// },
			// checkDetail({ id, equiName, equiCode, sparePartsJson }) {
			// 	this.$store.commit('maintenance/SET_SPAREPARTSJSON', sparePartsJson)
			// 	uni.navigateTo({
			// 		url: `/pages/maintenance/check/detail?workOrderId=${this.pageId}&id=${id}&equiName=${equiName}&equiCode=${equiCode}&applyOrder=${this.worksheetInfo.applyOrder}&workOrderCode=${this.worksheetInfo.workOrderCode}`
			// 	})
			// },
			handleCheck({
				id
			}) {
				uni.navigateTo({
					url: `/pages/maintenance/check/index?id=${id}`
				})
			},
			checkDetail({
				id
			}) {
				uni.navigateTo({
					url: `/pages/maintenance/check/detail?id=${id}`
				})
			},
			getInfo() {
				getWorkOrderDetail({
					workId: this.pageId
				}).then(data => {
					this.worksheetInfo = data
					this.getSparePartsApply(data.id)
				})
				getSpareParts({
					workOrderId: this.pageId
				}).then(data => {
					let list = JSON.parse(JSON.stringify(data))
					this.repairInfoLogList = list.reverse()
					this.repairInfoLogList.forEach(item => {
						this.logs[item.id] = {
							id: item.id,
							content: item.content,
							createTime: item.createTime,
							type: item.type,
							remark: item.remark,
							requestUserName: item.requestUserName
						}
						if (item.type === 'SPARE_PARTS_APPLY') {
							this.logs[item.id].content.infoList =
								this.logs[item.id].content && this.logs[item.id].content.infoList && this
								.logs[item.id].content.infoList.length > 0 ?
								this.logs[item.id].content.infoList.map(item => {
									return {
										...JSON.parse(item.sparePartsList),
										sparePartsId: item.sparePartsId
									}
								}) : []
						}
						console.log('this.logs---------------')
						console.log(this.logs)
					})
				})
			},
			// 报修
			handLbx(item) {
				uni.navigateTo({
					url: `/pages/repair/repair/index?source=4&workOrderCode=${this.workOrderCode}&equiCode=${item.equiCode}&equiId=${item.equiId}&workOrderId=${this.pageId}&equiName=${item.equiName}&equiModel=${item.equiModel}&equiLocation=${item.equiLocation}`
				})
			},
			// 报修详情
			handLbxDetail(item) {
				uni.navigateTo({
					url: `/pages/repair/detail/detail?id=${item.repairId}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/components/submitted.scss';

	/deep/.u-subsection__item__text {
		font-size: 28rpx !important;
	}

	/deep/.u-cell__body {
		// {
		// 	font-size: 26rpx !important;
		// }
		// padding: 12rpx 12rpx;

		.u-cell__title-text,
		.input-value,
		.uni-input-wrapper {
			font-size: 26rpx !important;
		}
	}

	.list-cell {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: $uni-text-color-grey;
		padding: 5rpx 20rpx;
	}

	.font-sm {
		font-size: $uni-font-size-sm;
	}

	.font-text {
		color: $uni-text-color;
	}

	.btn-execute {
		background-color: $j-primary-border-green;
		width: 450rpx;
		margin-top: 10vh;
	}

	.btn-sparepart {
		width: 450rpx;
		margin-top: 20rpx;
	}

	.btn-reassignment {
		color: $uni-color-primary;
		background-color: transparent;
		border: none;
		box-shadow: none;

		&::after {
			display: none;
		}
	}

	.maintenance-container {
		position: fixed;
		top: 0;
		bottom: 0;
		width: 100vw;
		display: flex;
		flex-direction: column;

		/deep/.u-popup {
			flex: none !important;
		}
	}

	.maintenance-wrapper {
		position: relative;
		flex: 1;
	}

	.maintenance-content {
		padding-top: 12rpx;
		box-sizing: border-box;
		// height: calc(100vh - 88rpx);
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
	}

	.kd-cell {
		line-height: 90rpx;
		border-bottom: 1px dashed #dadada;
		display: flex;
		justify-content: space-between;

		.kd-label {
			display: inline-block;
			width: 7em;
			font-weight: bold;
		}

		.kd-content {
			flex: 1;
			text-align: left;
			word-break: break-all;
		}
	}

	.kd-baseInfo {
		padding: 0 32rpx;
		font-size: 28rpx;
		overflow: auto;
	}

	.kd-equipment {
		flex: 1;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.kd-type-box {
			text-align: center;
			padding: 26rpx 0;

			view {
				position: relative;
				display: inline-block;
				width: 120rpx;
				padding: 4rpx 0;
				color: #747474;
				margin: 0 20rpx;
				background-color: rgba(215, 215, 215, 0.5);

				&.type—active {
					background-color: #1e7f35;
					color: #fff;
				}

				.count {
					position: absolute;
					top: -9px;
					right: -9px;
					width: 18px;
					height: 18px;
					border-radius: 50%;
					font-size: 12px;
					background-color: red;
					color: #fff;
				}
			}
		}

		.kd-list-container {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			padding: 12rpx 18rpx;
			background-color: $page-bg;

			.u-list {
				flex: 1;
				height: 100% !important;
			}
		}
	}

	.spare-parts {
		flex: 1;
		overflow: hidden;
	}

	.kd-card {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 8rpx 0;
		font-size: 28rpx;
		word-break: break-all;

		.kd-card-wrapper {
			padding: 0 30rpx;
			border-bottom: 1px solid #dadada;
		}

		.kd-cell {
			line-height: 60rpx;
		}

		.kd-cell:last-of-type {
			border-bottom: none;
		}

		.status-box {
			margin-right: 16rpx;
		}

		.card-footer {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 8rpx 0 20rpx;

			button {
				width: 180rpx;
				height: 56rpx;
				line-height: 56rpx;
				font-size: 28rpx;
				margin: 0 8rpx;
			}

			.primary-btn {
				background-color: $j-primary-border-green;
			}
		}
	}

	.apply-box {
		width: 70%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
</style>