gxt_app/pages/order/detail/acceptIndex.uvue

<template>
    <view class="detail-page">
        <scroll-view class="detail-content" :scroll-y="true">
            <!-- 工单信息 -->
            <view class="info-section">
                <view class="section-title">
                    <text class="section-title-text">工单信息</text>
                </view>
                <view class="info-card">
                    <view class="info-item">
                        <text class="info-label">工单编码</text>
                        <text class="info-value">{{ detailData.workOrderProjectNo ?? '' }}</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">工单类型</text>
                        <text class="info-value">{{ detailData.orderType == 1 ? '维修工单' : '维保工单' }}</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">风机编号</text>
                        <text class="info-value">{{ detailData.pcsDeviceName ?? '' }}</text>
                    </view>
					<view class="info-item">
					    <text class="info-label">维保中心</text>
					    <text class="info-value">{{ detailData.gxtCenter ?? '' }}</text>
					</view>
                    <view class="info-item">
                        <text class="info-label">场站</text>
                        <text class="info-value">{{ detailData.pcsStationName ?? '' }}</text>
                    </view>
					<!-- <view class="info-item">
					    <text class="info-label">品牌</text>
					    <text class="info-value">{{ detailData.model ?? '' }}</text>
					</view> -->
                    <view class="info-item">
                        <text class="info-label">机型</text>
                        <text class="info-value">{{ detailData.brand ?? '' }} {{ detailData.model ?? '' }}</text>
                    </view>
					<view class="info-item">
					    <text class="info-label">下发时间</text>
					    <text class="info-value">{{ detailData.assignTime ?? '' }}</text>
					</view>
					<view class="info-item" v-if="detailData.orderType == 2">
					    <text class="info-label">MIS工单编码</text>
					    <text class="info-value">{{ detailData.misNo ?? '' }}</text>
					</view>
					<view class="info-item" v-if="detailData.orderType == 2">
					    <text class="info-label">维保内容</text>
					    <text class="info-value">{{ detailData.content ?? '' }}</text>
					</view>
					<view class="info-item" v-if="detailData.orderType == 1">
					    <text class="info-label">故障代码</text>
					    <text class="info-value">{{ detailData.faultCode ?? '' }}</text>
					</view>
					<view class="info-item" v-if="detailData.orderType == 1">
					    <text class="info-label">故障信息</text>
					    <text class="info-value">{{ detailData.faultBarcode ?? '' }}</text>
					</view>
					<!-- <view class="info-item" v-if="detailData.orderType == 1">
					    <text class="info-label">工作负责人</text>
					    <view class="form-picker" @click="showLeaderPicker = true">
					        <view class="picker-display">
					            <text v-if="selectedTeamLeaderName" class="selected-value">{{ selectedTeamLeaderName }}</text>
					            <text v-else class="placeholder">请选择工作负责人</text>
					            <text class="arrow">▼</text>
					        </view>
					    </view>
					</view> -->
                </view>
            </view>
			<!-- <view class="info-section">
				<view class="section-title">
					<text class="section-title-text">工作负责人</text>
				</view>
				<view class="info-card">
					<view class="info-item">
						<input class="input" type="text" placeholder="请输入工作负责人" v-model="teamLeaderName" />
					</view>
				</view>
			</view> -->
			<!-- 工作负责人选择 -->
			<view class="info-section">
			    <view class="section-title">
			        <text class="section-title-text">工作负责人</text>
			    </view>
			    <view class="info-card">
			        <view class="form-item">
			            <!-- <text class="form-label required">工作负责人</text> -->
			            <view class="form-picker" @click="showLeaderPicker = true">
			                <view class="picker-display">
			                    <text v-if="selectedTeamLeaderName" class="selected-value">{{ selectedTeamLeaderName }}</text>
								<text v-else class="placeholder">
									请选择工作负责人
								</text>
			                    <text class="arrow">▼</text>
			                </view>
			            </view>
			        </view>
			    </view>
			</view>

			<!-- 自定义选择器弹窗 -->
			<view v-if="showLeaderPicker" class="picker-modal">
			    <view class="modal-mask" @click="showLeaderPicker = false"></view>
			    <view class="modal-content">
			        <view class="modal-header">
			            <text class="modal-title">选择工作负责人</text>
			            <text class="modal-close" @click="showLeaderPicker = false">取消</text>
			        </view>
					<view class="search-bar">
						<view class="search-box">
							<image class="search-icon" src="/static/images/workbench/list/1.png" mode="aspectFit"></image>
							<input class="search-input" type="text" placeholder="搜索姓名" v-model="keyword" @input="handleSearch" />
							<text v-if="keyword.length > 0" class="clear-icon" @click="clearSearch">✕</text>
						</view>
					</view>
			        <scroll-view class="modal-body" scroll-y="true">
						<!-- 有数据时显示列表 -->
						<view v-if="teamLeaderList.length > 0">
							<view
								v-for="(option, index) in teamLeaderList"
								:key="index"
								class="picker-option"
								:class="{ 'selected': index === selectedTeamLeaderIndex }"
								@click="selectLeaderManually(index)"
							>
								<!-- <text class="option-text">{{ option.label }}</text>
								<text class="option-text">{{ option.value }}</text> -->
								<text class="option-text">{{ option.nickName }}</text>
								<text class="option-text">{{ option.deptName }}</text>
								<text v-if="index === selectedTeamLeaderIndex" class="option-check">✓</text>
							</view>
						</view>
						<!-- 无数据时显示提示 -->
						<view v-else class="empty-tip">
						    <text>未找到匹配的人员</text>
						</view>
			        </scroll-view>
			    </view>
			</view>
        </scroll-view>

        <!-- 接单按钮 -->
        <view class="accept-button-container" v-if="checkPermi(detailData.orderType == 2 ? ['gxt:maintenance:order:accept'] : ['gxt:repairOrder:accept'] )">
            <button class="accept-button" @click.stop="handleAcceptOrder">{{ isDealing ? '接单中...' : '接 单' }}</button>
        </view>

        <!-- 加载中状态 -->
        <view v-if="loading" class="loading-mask">
            <text class="loading-text">加载中...</text>
        </view>
    </view>
</template>

<script setup lang="uts">
    import { ref } from 'vue'
    import type { acceptOrderInfo2 } from '../../../types/order'
    import type { WorkOrderFlow } from '../../../types/flow'
    import { getOrderInfoById, getRepairOrderInfoById, acceptOrder } from '../../../api/order/detail'
	import type { SysDictData } from '../../../types/dict'
	import { getDictDataByType } from '../../../api/dict/index'
	import { getLeaderList } from '../../../api/user/list'
	import type { UserInfo } from '../../../types/user'
	import {checkPermi} from '../../../utils/storage'

	const teamLeaderName = ref<string>("")
	const statusDictList = ref<SysDictData[]>([]) // 工单状态字典列表
	// 添加字典加载状态
	const dictLoaded = ref<boolean>(false)
	let keyword = ref<string>("")

	// 详情数据
	const detailData = ref<acceptOrderInfo2>({
		orderType: 0,
		id: 0,
		teamLeaderId: 0,
		acceptUserId: 0,
		teamLeaderName: null,
		acceptUserName: null,
		acceptTime: null,
		assignTime:  null,
		assignUserName: null,
		status: 0,
		workOrderProjectNo: null,
		workOrderStatus: null,
		gxtCenterId: 0,
		gxtCenter: null,
		pcsStationId:  0,
		pcsStationName: null,
		pcsDeviceId: 0,
		pcsDeviceName: null,
		brand: null,
		model: null,
		createTime: null,
		workOrderFlowList: null,
		suspendReason: null,
		rejectionReason: null,
		misNo: null,
		content: null,
		faultCode: null,
		faultBarcode: null,
		updateTime: null,  // 新增字段
		workEndTime: null  // 新增字段
	})

	// 选择器选项类型
	type PickerOption = {
	    label: string
	    value: string
	}

	// 选中的负责人信息
	const selectedTeamLeaderName = ref<string>('')
	const selectedTeamLeaderIndex = ref<number>(-1)
	const showLeaderPicker = ref<boolean>(false)
	const teamLeaderList = ref<UserInfo[]>([])
	const teamAllLeaderList = ref<UserInfo[]>([])

	// 获取负责人列表（使用用户列表接口）
	const loadTeamLeaderList = async (): Promise<void> => {
	    try {
			const deptId = detailData.value.gxtCenterId
	        const result = await getLeaderList(-1)
	        const resultObj = result as UTSJSONObject

	        if (resultObj['code'] == 200) {
	            const data = resultObj['data'] as any[]
	            const leaders: UserInfo[] = []

	            if (data.length > 0) {
	                for (let i = 0; i < data.length; i++) {
	                    const item = data[i] as UTSJSONObject
	                    const deptObj = item['dept'] as UTSJSONObject
	                    let leader: UserInfo = {
							userName: item['userName'] as string,
							nickName: item['nickName'] as string,
							userId: new Int32Array([item['userId'] != null ? (item['userId'] as number) : 0]),
							phone: item['phonenumber'] as string,
							deptName : (deptObj['deptName'] != null) ? (deptObj['deptName'] as string) : ''
	                    }
	                    leaders.push(leader)
	                }
	            }

	            teamLeaderList.value = leaders
				teamAllLeaderList.value = teamLeaderList.value
	        }
	    } catch (e: any) {
	        console.error('获取负责人列表失败:', e.message)
	    }
	}

	// 手动选择负责人
	const selectLeaderManually = (index: number): void => {
	    selectedTeamLeaderIndex.value = index
		if (index >= 0 && index < teamLeaderList.value.length) {
		    const selectedOption = teamLeaderList.value[index]
		    selectedTeamLeaderName.value = selectedOption.nickName
		    detailData.value.teamLeaderId = selectedOption.userId[0] as number
			detailData.value.teamLeaderName = selectedOption.nickName
		}
	    showLeaderPicker.value = false
	}

	// 获取工单状态字典列表
	const loadStatusDictList = async (): Promise<void> => {
	    try {
	        const result = await getDictDataByType('gxt_repair_order_flow_action_type')
	        const resultObj = result as UTSJSONObject

	        if (resultObj['code'] == 200) {
	            const data = resultObj['data'] as any[]
	            const dictData: SysDictData[] = []

	            if (data.length > 0) {
	                for (let i = 0; i < data.length; i++) {
	                    const item = data[i] as UTSJSONObject
	                    // 只提取需要的字段
	                    const dictItem: SysDictData = {
							dictValue: item['dictValue'] as string | null,
							dictLabel: item['dictLabel'] as string | null,
							dictCode: null,
							dictSort: null,
							dictType: null,
							cssClass: null,
							listClass: null,
							isDefault: null,
							status: null,
							default: null,
							createTime: null,
							remark: null
						}
	                    dictData.push(dictItem)
	                }
	            }

	            statusDictList.value = dictData
	            dictLoaded.value = true
	        }
	    } catch (e: any) {
	        console.error('获取工单状态字典失败:', e.message)
	        dictLoaded.value = true
	    }
	}

	const isDealing = ref(false)
	const hasDealed = ref(false)
	// 处理接单操作
	const handleAcceptOrder = async (): Promise<void> => {
		// if (selectedTeamLeaderName.value.trim() === '') {
		// 	uni.showToast({
		// 		title: '请选择工作负责人',
		// 		icon: 'none'
		// 	})
		// 	return
		// }
		if (isDealing.value || hasDealed.value) return // 双重保险
		isDealing.value = true
		// const subOrder = {
		// 	id: detailData.value.id,
		// 	orderType: detailData.value.orderType,
		// 	teamLeaderId: (selectedTeamLeaderId.value != null && selectedTeamLeaderId.value.length > 0) ? parseInt(selectedTeamLeaderId.value) : 0,
		// 	teamLeaderName: selectedTeamLeaderName.value,
		// 	workOrderProjectNo: detailData.value.workOrderProjectNo,
		// 	// gxtRepairOrder:
		// } as UTSJSONObject
		detailData.value.workOrderStatus = 'to_finish'
		try {
			const result = await acceptOrder(detailData.value)
			const resultObj = result as UTSJSONObject
			const code = resultObj['code'] as number
			if (code == 200) {
				uni.showToast({
					title: '接单成功',
					icon: 'success'
				})
				hasDealed.value = true
				// 使用事件总线通知列表页面刷新
				uni.$emit('refreshOrderList', {})
				// 通知首页刷新待处理工单数量
				uni.$emit('refreshAssignedCount')
				// 通知首页刷新超时工单数量
				uni.$emit('refreshOverdueCount')

				// 接单成功后返回上一页
				setTimeout(() => {
					uni.navigateBack()
				}, 800)
			} else {
			    // 处理业务错误
			    uni.showToast({
				    title: resultObj['msg'] as string,
				    icon: 'none'
			    })
			}
		} catch (error: any) {
		    console.error('请求失败:', error);
			uni.showToast({
			    title: error.message ?? '接单失败',
			    icon: 'none'
			})
		} finally {
			isDealing.value = false // 无论成功失败都解锁
		}
	}



    const loading = ref<boolean>(false)

	// 获取操作类型名称
	const getActionTypeName = (item: string | null): string | null => {
	    if (item == null) return ''
	    // const orderInfoItem = item as orderInfo
	    const rawStatus = item

	    if (rawStatus==null) return ''

		// 如果字典尚未加载，返回原始值
		if (!dictLoaded.value) {
			return rawStatus
		}

	    // 查找字典中对应的标签
	    const dictItem = statusDictList.value.find(dict => dict.dictValue == rawStatus)
	    return dictItem!=null ? dictItem.dictLabel : rawStatus
	}

    // 加载详情数据
    const loadDetail = async (id: string, orderType?: number): Promise<void> => {
        try {
            loading.value = true

            let result: any;

            // 根据orderType决定调用哪个API
            if (orderType == 1) {
                // 维修工单
                result = await getRepairOrderInfoById(id)
            } else {
                // 维保工单
                result = await getOrderInfoById(id)
            }

            // 提取响应数据
            const resultObj = result as UTSJSONObject
			const code = resultObj['code'] as number
            const data = resultObj['data'] as UTSJSONObject | null

            if (code == 200 && data != null) {
                // 处理工单流转列表
                let workOrderFlowList: WorkOrderFlow[] | null = null
				let flowList: UTSJSONObject[] = []
				if (orderType == 1) {
				    // 维修工单
				    flowList = data['repairOrderFlowList'] as UTSJSONObject[]
				} else {
				    // 维保工单
				    flowList = data['workOrderFlowList'] as UTSJSONObject[]
				}
                if (flowList.length > 0) {
                    workOrderFlowList = []
                    for (let i = 0; i < flowList.length; i++) {
                        const flowItem = flowList[i]
                        const flow: WorkOrderFlow = {
                            id: flowItem['id'] as Number,
                            orderId: flowItem['orderId'] as Number,
                            orderCode: flowItem['orderCode'] as string,
                            actionType: flowItem['actionType'] as string,
                            fromStatus: flowItem['fromStatus'] as string | null,
                            toStatus: flowItem['toStatus'] as string,
                            operatorId: flowItem['operatorId'] as Number | null,
                            operatorName: flowItem['operatorName'] as string | null,
                            actionTime: flowItem['actionTime'] as string,
                            actionRemark: flowItem['actionRemark'] as string | null,
                            createBy: flowItem['createBy'] as string | null,
                            createTime: flowItem['createTime'] as string | null
                        }
                        workOrderFlowList.push(flow)
                    }
                }

                // 转换数据
                const orderDtail: acceptOrderInfo2 = {
                    orderType: data['orderType'] as Number,
                    id: data['id'] as Number,
  					teamLeaderId: data['teamLeaderId'] != null ? (data['teamLeaderId'] as Number) : 0,
  					acceptUserId: data['acceptUserId'] != null ? (data['acceptUserId'] as Number) : 0,
                    teamLeaderName: data['teamLeaderName'] as string | null,
                    acceptUserName: data['acceptUserName'] as string | null,
                    acceptTime: data['acceptTime'] as string | null,
                    assignTime: data['assignTime'] as string | null,
                    assignUserName: data['assignUserName'] as string | null,
                    status: (data['status']==null)?0:data['status'] as Number,
                    workOrderProjectNo: data['workOrderProjectNo'] as string | null,
                    workOrderStatus: data['workOrderStatus'] as string | null,
                    gxtCenterId: data['gxtCenterId'] as Number | 0,
                    gxtCenter: data['gxtCenter'] as string | null,
                    pcsStationId: data['pcsStationId'] as Number | 0,
                    pcsStationName: data['pcsStationName'] as string | null,
                    pcsDeviceId: data['pcsDeviceId'] as Number | 0,
                    pcsDeviceName: data['pcsDeviceName'] as string | null,
                    brand: data['brand'] as string | null,
                    model: data['model'] as string | null,
                    createTime: data['createTime'] as string | null,
                    workOrderFlowList: workOrderFlowList,
					suspendReason: data['suspendReason'] as string | null,
					rejectionReason: data['rejectionReason'] as string | null,
					misNo: data['misNo'] as string | null,
					content: data['content'] as string | null,
					faultCode: data['faultCode'] as string | null,
					faultBarcode: data['faultBarcode'] as string | null,
                    updateTime: data['updateTime'] as string | null,  // 新增字段
                    workEndTime: data['workEndTime'] as string | null  // 新增字段
                }
                detailData.value = orderDtail

				// 如果工单数据中已有负责人信息，设置到输入框中
				if (orderDtail.teamLeaderName != null && orderDtail.teamLeaderName.length > 0) {
					teamLeaderName.value = orderDtail.teamLeaderName as string
				}
				loadTeamLeaderList()
            } else {
                const msg = resultObj['msg'] as string | null
                uni.showToast({
                    title: msg ?? '加载失败',
                    icon: 'none'
                })
            }

        } catch (e: any) {
            uni.showToast({
                title: e.message ?? '加载失败',
                icon: 'none'
            })
        } finally {
            loading.value = false
        }
    }

	// 搜索
	const handleSearch = (): void => {
		teamLeaderList.value = teamAllLeaderList.value.filter(leader =>
			leader.nickName.includes(keyword.value)
		)
	}

	// 清空搜索
	const clearSearch = (): void => {
		keyword.value = ""
		teamLeaderList.value = teamAllLeaderList.value
	}

    // 页面加载
    onLoad((options: any) => {
        const params = options as UTSJSONObject
        const id = params['id'] as string | null
		const orderTypeParam = params['orderType'] as string | null
        if (id != null && orderTypeParam != null) {
            // 先尝试从参数中获取orderType
            const orderTypeNumber = parseInt(orderTypeParam)
            loadDetail(id, orderTypeNumber)
        }
    })
	// 初始化
	onMounted(() => {
	    loadStatusDictList()
	})
</script>

<style lang="scss">
    .detail-page {
        flex: 1;
        background-color: #e8f0f9;
    }

    .detail-content {
        flex: 1;
        padding: 20rpx 0;
    }

    .info-section {
        margin: 0 30rpx 24rpx;

        .section-title {
            position: relative;
            padding-left: 20rpx;
            margin-bottom: 20rpx;

            &::before {
                // content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 8rpx;
                height: 32rpx;
                background-color: #007aff;
                border-radius: 4rpx;
            }

            &-text {
                font-size: 32rpx;
                font-weight: bold;
                color: #333333;
            }
        }

        .info-card {
            background-color: #ffffff;
            border-radius: 16rpx;
            padding: 30rpx;

            .info-item {
                flex-direction: row;
                padding: 20rpx 0;
                border-bottom: 1rpx solid #f0f0f0;

                &:last-child {
                    border-bottom: none;
                }

                &.full-width {
                    flex-direction: column;

                    .info-label {
                        margin-bottom: 12rpx;
                    }

                    .info-value {
                        line-height: 44rpx;
                    }
                }

                .info-label {
                    width: 240rpx;
                    font-size: 28rpx;
                    color: #666666;
                    white-space: nowrap;
                }

                .info-value {
                    flex: 1;
                    font-size: 28rpx;
                    color: #333333;
                    text-align: left;

                    &.highlight {
                        color: #007aff;
                        font-weight: bold;
                    }

                    &.input {
                        text-align: left;
                        border: 1rpx solid #e0e0e0;
                        border-radius: 8rpx;
                        padding: 10rpx;
                    }
                }
            }

            .flow-item {
                padding: 20rpx 0;
                border-bottom: 1rpx solid #f0f0f0;

                &:last-child {
                    border-bottom: none;
                }

                .flow-header {
                    flex-direction: row;
                    justify-content: space-between;
                    margin-bottom: 10rpx;

                    .flow-operator {
                        font-size: 28rpx;
                        color: #333333;
                        font-weight: bold;
                    }

                    .flow-time {
                        font-size: 24rpx;
                        color: #999999;
                    }
                }

                .flow-content {
                    flex-direction: column;

                    .flow-action {
                        font-size: 26rpx;
                        color: #666666;
                        margin-bottom: 8rpx;
                    }

                    .flow-remark {
                        font-size: 24rpx;
                        color: #999999;
                        background-color: #f5f5f5;
                        padding: 10rpx;
                        border-radius: 8rpx;
                    }
                }
            }

            .no-data {
                text-align: center;
                padding: 40rpx 0;
                font-size: 28rpx;
                color: #999999;
            }
        }
    }

    .accept-button-container {
        padding: 30rpx 30rpx 50rpx;
        background-color: #ffffff;

        .accept-button {
            width: 100%;
            height: 80rpx;
            background-color: #007aff;
            color: #ffffff;
            font-size: 32rpx;
            border-radius: 16rpx;
            border: none;

            &:active {
                background-color: #0062cc;
            }
        }
    }

    .loading-mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.3);

        .loading-text {
            padding: 30rpx 60rpx;
            background-color: rgba(0, 0, 0, 0.7);
            color: #ffffff;
            font-size: 28rpx;
            border-radius: 12rpx;
        }
    }
	.picker-modal {
	    position: fixed;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    z-index: 1000;
	}

	.modal-mask {
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background-color: rgba(0, 0, 0, 0.5);
	}

	.modal-content {
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    background-color: #ffffff;
	    border-top-left-radius: 16rpx;
	    border-top-right-radius: 16rpx;
	    max-height: 1000rpx;
	}

	.modal-header {
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
	    padding: 30rpx;
	    border-bottom: 1rpx solid #f0f0f0;
	}

	.modal-title {
	    font-size: 32rpx;
	    font-weight: bold;
	    color: #333333;
	}

	.modal-close {
	    font-size: 28rpx;
	    color: #007aff;
	}

	.modal-body {
	    max-height: 800rpx;
		min-height: 800rpx;
	}

	.picker-option {
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
	    padding: 24rpx 30rpx;
	    border-bottom: 1rpx solid #f0f0f0;
	}

	.picker-option.selected {
	    background-color: #f8f9fa;
	}

	.option-text {
	    font-size: 28rpx;
	    color: #333333;
	}

	.option-check {
	    font-size: 28rpx;
	    color: #007aff;
	}

	.form-picker {
	    flex: 1;
	}

	.picker-display {
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
	    min-height: 40rpx;
	}

	.selected-value {
	    font-size: 28rpx;
	    color: #333333;
	}

	.placeholder {
	    font-size: 28rpx;
	    color: #999999;
	}

	.arrow {
	    font-size: 24rpx;
	    color: #999999;
	    margin-left: 12rpx;
	}
	.search-bar {
		padding: 20rpx 30rpx;
		background-color: #d7eafe;
	}

	.search-box {
		flex-direction: row;
		align-items: center;
		height: 72rpx;
		padding: 0 24rpx;
		background-color: #f5f5f5;
		border-radius: 36rpx;

		.search-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 12rpx;
		}

		.search-input {
			flex: 1;
			font-size: 28rpx;
			color: #333333;
		}

		.clear-icon {
			margin-left: 12rpx;
			font-size: 28rpx;
			color: #999999;
		}
	}

	.empty-tip {
	    justify-content: space-between;
	    // text-align: center;
	    padding: 24rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
	}
</style>