wdt_erp_process_h5/pages/workbench/workbench.vue

<template>
	<view class="container">
		<!-- 顶部自定义导航栏 -->
		<cu-custom bgColor="bg-blue">
			<block slot="content"> 工作台</block>
		</cu-custom>

		<!-- 信息区域 -->
		<view class="col-1 no-border fixed" style="margin:5px 10px 5px 10px;">
			<view :style="dynamicStyle">
				<view class="col-1 no-border fixed" style="padding:20px 40px 20px 40px;">
					<!-- 个人信息 -->
					<view class="ellipsis-description" style="font-size: 16px">
							<span style="padding:5px;display: inline-block; width: 80px">
							  <span style="font-weight: bold">{{userInfo.roleNames}}</span>
							</span>
							<span style="padding-left: 30px;display: inline-block;">
							  <span class="cuIcon-locationfill" style="color: #FFFFFF;margin-right: 5px;"></span>
							  <span style="color: #FFFFFF;font-weight: bold">{{userInfo.officeDTO.name}}</span>
							</span>
					</view>
					<view class="ellipsis-description" style="font-size: 16px">
						<span style="padding:5px;display: inline-block; width: 80px">
						  	<span style="color: #FFFFFF;font-weight: bold">姓名</span>
						</span>
						<span style="padding-left: 30px;display: inline-block;">
						  	<span style="color: #FFFFFF;font-weight: bold">{{userInfo.name}}</span>
						</span>
					</view>
					<view class="ellipsis-description" style="font-size: 16px">
						<span style="padding:5px;display: inline-block; width: 80px">
						  	<span style="color: #FFFFFF;font-weight: bold">联系方式</span>
						</span>
						<span style="padding-left: 30px;display: inline-block;">
						  	<span style="color: #FFFFFF;font-weight: bold">{{userInfo.mobile}}</span>
						</span>
					</view>
				</view>
			</view>
		</view>

		<!-- 功能按钮区域 -->
		<view class="cu-list grid col-4 no-border fixed">
			<view @tap="toTodoList" class="circle-button-box">
				<view class="cuIcon-time text-blue circle-button font-size-35"></view>
				<text>待办事项</text>
			</view>
			<view @tap="toHistoryList" class="circle-button-box">
				<view class="cuIcon-roundcheck text-blue circle-button font-size-35"></view>
				<text>已办事项</text>
			</view>
			<view @tap="toApplyList" class="circle-button-box">
				<view class="cuIcon-peoplelist text-blue circle-button font-size-35"></view>
				<text>我发起的</text>
			</view>
			<view @tap="toFlowCopyList" class="circle-button-box">
				<view class="cuIcon-copy text-blue circle-button font-size-35"></view>
				<text>抄送给我</text>
			</view>
		</view>

		<!-- 标签切换区域 -->
		<view>
			<u-subsection
					:list="['待处理', '已处理']"
					mode="button"
					:fontSize="16"
					:current="tabIndex"
					@change="tabSelect"
			></u-subsection>
		</view>

		<!-- 过磅记录 -->
		<view style="margin: 11px 28px;">
			<view class="ellipsis-description" style="font-size: 20px">
        <span style="margin-right: 10px;">
          <span class="cuIcon-title" style="color: #f67e1f;margin-right: 5px;"></span>
          <span v-if="userInfo.roleNames === '过磅专员' " style="font-weight: bold">过磅记录</span>
          <span v-if="userInfo.roleNames === '村负责人' " style="font-weight: bold">清运记录</span>
          <span v-if="userInfo.roleNames === '巡视员' || userInfo.roleNames === '乡镇巡查员' " style="font-weight: bold">垃圾巡视</span>
          <span v-if="userInfo.roleNames === '乡镇负责人' " style="font-weight: bold">清运记录</span>
        </span>
			</view>
		</view>

		<!-- 可滚动内容区域 -->
		<scroll-view scroll-y class="page">
			<!-- 其他可滚动内容 -->
			<u-swipe-action v-if="this.showType == 'task'">
				<view v-for="(row, index) in dataList" :key="index">
					<u-swipe-action-item @click="todo(row)" :key="row.id" :threshold="60" duration="500"
										 :options="[{ text: '办理', style: { backgroundColor: '#3c9cff' } }]">
						<u-cell-group>
							<u-cell @click="todo(row)">
								<view slot="title" class="content" style="line-height: 1.5;">
									<view class="text-bold text-grey">
										<view class="ellipsis-description" style="font-size: 16px">
										  <span style="margin-right: 10px;">
											<span class="cuIcon-timefill" style="color: #3c9cff;margin-right: 5px;"></span>
											<span>{{row.vars.startDate}}</span>
										  </span>
										  <span style="margin-right: 10px;">
											<span class="cuIcon-locationfill" style="color: #f67e1f;margin-right: 5px;"></span>
											<span>{{row.vars.title}}</span>
										  </span>
										</view>
									</view>
									<view class="text-grey text-sm" style="font-size: 16px">
										<div style="margin-right: 20px; float: left">
											<u-tag-small text="进行中" plain shape="circle" type="error"></u-tag-small>
										</div>
										<div style="margin-right: 10px; float: left">
											<!--<span class="cuIcon-deliver" style="color: #d95141;margin-right: 5px;"></span>
											<span>12.5km</span>-->
										</div>
										<div style="margin-right: 10px;">
											<!--<span class="cuIcon-deletefill" style="color: #38b64b;margin-right: 5px;"></span>
											<span>2.2t</span>-->
										</div>
									</view>
								</view>
								<view slot="right-icon" class="action">
									<u-tag text="处理" plain bgColor="#38b64b" color="white" plainFill shape="circle" type="success" @click="todo(row)"></u-tag>
								</view>
							</u-cell>
						</u-cell-group>
					</u-swipe-action-item>
				</view>
				<!-- 加载更多 -->
				<u-loadmore :status="status" @loadmore="loadmore" :line="true" />
			</u-swipe-action>
			<u-swipe-action v-else>
				<view v-for="(row, index) in dataList" :key="index">
					<u-swipe-action-item @click="toDetail(row)" :key="row.id" :threshold="60" duration="500"
										 :options="[{ text: '办理', style: { backgroundColor: '#3c9cff' } }]">
						<u-cell-group>
							<u-cell @click="toDetail(row)">
								<view slot="title" class="content" style="line-height: 1.5;">
									<view class="text-bold text-grey">
										<view class="ellipsis-description" style="font-size: 16px">
										  <span style="margin-right: 10px;">
											<span class="cuIcon-timefill" style="color: #3c9cff;margin-right: 5px;"></span>
											<span>{{row.vars.startDate}}</span>
										  </span>
											<span style="margin-right: 10px;">
											<span class="cuIcon-locationfill" style="color: #f67e1f;margin-right: 5px;"></span>
											<span>{{row.vars.title}}</span>
										  </span>
										</view>
									</view>
									<view class="text-grey text-sm" style="font-size: 16px">
										<div style="margin-right: 20px; float: left" v-if="row.status === '2'">
											<u-tag-small text="进行中" plain shape="circle" type="error"></u-tag-small>
										</div>
										<div style="margin-right: 20px; float: left" v-else>
											<u-tag-small text="已处理" plain shape="circle" type="error"></u-tag-small>
										</div>
										<div style="margin-right: 10px; float: left" v-if="row.transportMileage">
											<span class="cuIcon-deliver" style="color: #d95141;margin-right: 5px;"></span>
											<span>{{row.transportMileage}}km</span>
										</div>
										<div style="margin-right: 10px;" v-if="row.weight">
											<span class="cuIcon-deletefill" style="color: #38b64b;margin-right: 5px;"></span>
											<span>{{row.weight}}t</span>
										</div>
									</view>
								</view>
								<view slot="right-icon" class="action">
									<u-tag text="详情" plain bgColor="#38b64b" color="white" plainFill shape="circle" type="success" @click="toDetail(row)"></u-tag>
								</view>
							</u-cell>
						</u-cell-group>
					</u-swipe-action-item>
				</view>
				<!-- 加载更多 -->
				<u-loadmore :status="status" @loadmore="haveDone" :line="true" />
			</u-swipe-action>

			<u-back-top :scrollTop="0" mode="square"></u-back-top>
		</scroll-view>

		<!-- 页脚区域 -->
		<view class="footer-div">
			<!--<u-button v-if="userInfo.roleNames == '巡视员' || userInfo.roleNames == '乡镇巡查员' " type="primary" text="巡视工单" @click="openPatrolWorkOrderForm()"></u-button>-->
			<u-button v-if="userInfo.roleNames == '巡视员' || userInfo.roleNames == '乡镇巡查员' " type="primary" text="巡视工单" @click="start()"></u-button>
			<u-button v-if="userInfo.roleNames == '村负责人' " type="primary" text="清运工单" @click="start()"></u-button>
		</view>
	</view>
</template>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		position: relative; /* 为 footer-div 提供定位上下文 */
	}

	.page {
		flex: 1;
		padding-bottom: 130px; /* 留出空间给 footer-div 和额外的 20px 间距 */
		overflow-y: auto;
	}

	.footer-div {
		height: 50px; /* 页脚高度 */
		text-align: center;
		line-height: 50px; /* 垂直居中内容 */
		position: fixed; /* 固定在视口底部 */
		bottom: 70px; /* 距离底部 100px */
		left: 0;
		width: 100%;
	}
</style>







<script>
	import userSelect from '@/components/user-select/user-select.vue'
	import pick from 'lodash.pick'
	import moment from 'moment'
	import {mapState, mapMutations, mapActions} from 'vuex'
	import actCategoryService from "@/api/flowable/actCategoryService"
	import processService from "@/api/flowable/processService"
	import taskService from "@/api/flowable/taskService"
	import notifyService from "@/api/notify/notifyService";
	import userService from "@/api/sys/userService"
	import { EventBus } from '@/store/eventBus.js';
	import disposeRubbishService from '@/api/garbageClearance/disposeRubbishService'
	import flowCopyService from "@/api/flowable/flowCopyService"
	export default {
		components:{
			userSelect
		},
		data() {

			return {
				tabIndex: 0,
				showType: 'task',
				status: 'loadmore',
				searchForm: {
					title: '',
					procInsName: ''
				},
				sprocessForm: {
					filterText: ''
				},
				tablePage: {
					pages: 0,
					currentPage: 0,
					pageSize: 10,
					orders: [{ column: "a.create_time", asc: false }],
				},
				loading: false,
				cardCur: 0,
				dataList: [],
				categoryList: [],
				processMap: new Map(),
				swiperList: [/*{
					id: 0,
					type: 'image',
					url: '/static/swiper/1.svg'
				}, {
					id: 1,
					type: 'image',
					url: '/static/swiper/2.svg'
				}, {
					id: 2,
					type: 'image',
					url: '/static/swiper/3.svg'
				}, {
					id: 3,
					type: 'image',
					url: '/static/swiper/4.svg'
				}, {
					id: 4,
					type: 'image',
					url: '/static/swiper/5.svg'
				}, {
					id: 5,
					type: 'image',
					url: '/static/swiper/6.svg'
				}, {
					id: 6,
					type: 'image',
					url: '/static/swiper/7.svg'
				}*/],
				dotStyle: false,
				towerStart: 0,
				direction: ''
			};
		},
		onLoad() {
			this.loadmore()
		},
		onShow() {
			this.loadmore()
		},
		computed:{
			...mapState({
				username: (state) => state.user.username,
				userInfo: (state) => state.user.userInfo,
				userId: (state) => state.user.id
			}),
			dynamicStyle() {
				// 增加空值检查
				if (!this.userInfo || !this.userInfo.roleNames) {
					// 如果 userInfo 或 roleNames 不存在，返回一个默认样式
					return {
						height: '130px',
						borderRadius: '15px',
						backgroundImage: 'linear-gradient(to right, #3cb54b 0%, #88c546 100%)'
					};
				}

				// 直接通过 this.userInfo 访问 userInfo 中的属性
				// 如果 userInfo 存在，继续执行原来的逻辑
				let roleNames = this.userInfo.roleNames;
				if(this.userInfo && this.userInfo.roleNames){
					roleNames = this.userInfo.roleNames;
				}
				// 根据从 Vuex 获取的状态来判断样式
				switch (roleNames) {
					case '过磅专员':
						return {
							height: '130px',
							borderRadius: '15px',
							backgroundImage: 'linear-gradient(to right, #3cb54b 0%, #88c546 100%)'
						};
					case '村负责人':
					case '乡镇负责人':
						return {
							height: '130px',
							borderRadius: '15px',
							backgroundImage: 'linear-gradient(to right, #0285f7 0%, #19b3bd 100%)'
						};
					case '巡视员':
					case '乡镇巡查员':
						return {
							height: '130px',
							borderRadius: '15px',
							backgroundImage: 'linear-gradient(to right, #fd8e03 0%, #f02d1f 100%)'
						};
					default:
						return {
							height: '130px',
							borderRadius: '15px',
							backgroundImage: 'linear-gradient(to right, #3cb54b 0%, #88c546 100%)'
						};
				}
			},
		},

		async mounted() {
			this.loadmore()
			//获取当前人对应的负责流程的信息
			this.fetchUserInfo(); // 模拟获取用户信息
		},
		created() {
			if(!this.username) {
				this.refreshUserInfo()
			}
		},

		methods: {
			async fetchUserInfo() {
				try {
					// 这里调用获取数据的 API 或者 Vuex action
					await this.$store.dispatch('fetchUserInfo');  // 示例
					this.isLoading = false;  // 数据加载完成，关闭加载状态
				} catch (error) {
					console.error('获取用户信息失败:', error);
					this.isLoading = false;  // 即使加载失败也需要关闭加载状态
				}
			},
			tabSelect(index) {
				this.tabIndex = index;
				this.tablePage.currentPage = 0
				if(1 === index){
					const roleNames = this.userInfo.roleNames;
					// 根据从 Vuex 获取的状态来判断样式
					if('村负责人' === roleNames){
						this.flowCopyShow()
					}else{
						this.haveDone()
					}
				}else {
					this.loadmore()
				}
			},
			openPatrolWorkOrderForm () {
				uni.navigateTo({
					url: '/pages/edt/PatrolWorkOrderForm',
					//url: '/pages/test/mobile/TestMobileForm',
					success: function(res) {
						// 跳转成功后的处理
						console.log('跳转成功');
					},
					fail: function(err) {
						// 跳转失败后的处理
						console.log('跳转失败', err);
					},
					complete: function() {
						// 无论跳转成功还是失败都会执行
						console.log('跳转完成');
					}
				})
			},
			// 跳转到详细页面
			todo (row) {
				taskService.getTaskDef({
					taskId: row.task.id,
					taskName: row.task.name,
					taskDefKey: row.task.taskDefinitionKey,
					procInsId: row.task.processInstanceId,
					procDefId: row.task.processDefinitionId,
					procDefKey: row.task.processDefKey,
					status: row.status
				}).then((data) => {
					let query = {formTitle: `${row.vars.title}`, title: `审批【${row.task.name || ''}】`, ...pick(data, 'formType', 'formReadOnly', 'formUrl', 'procDefKey', 'taskDefKey', 'procInsId', 'procDefId', 'taskId', 'status', 'title', 'businessId')};
					uni.navigateTo({
						url: '/pages/workbench/task/TaskForm?flow='+JSON.stringify(query)
					})
				})
			},
			// 跳转到详细页面
			toDetail (row) {
				console.log('row',row)
				taskService.getTaskDef({
					taskDefKey: row.taskDefinitionKey,
					procInsId: row.processInstanceId,
					procDefId: row.processDefinitionId
				}).then((data) => {
					let query = {readOnly: true, taskId: row.executionId, title: `${row.name}【${row.name}】`, formTitle: `${row.name}`, ...pick(data, 'formType', 'formUrl', 'procDefKey', 'taskDefKey', 'procInsId', 'procDefId', 'taskId', 'status', 'title', 'businessId')}
					uni.navigateTo({
						url: '/pages/workbench/task/TaskFormDetail?flow='+JSON.stringify(query)
					})
				})
			},
			// 输入监听
			inputWord(e){
				this.searchTimer && clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(()=>{
					this.doSearch()
				},300)
			},
			// 搜索
			doSearch(){
				this.dataList = [];
				this.tablePage.currentPage = 0;
				this.tablePage.pageSize = 10;
				this.tablePage.pages = 0;
				this.loadmore()
			},
			onReachBottom() {
				this.loadmore()
			},
			loadmore() {

				/*if(this.tablePage.currentPage!==0 && this.tablePage.pages <= this.tablePage.currentPage ) {
					this.status = 'nomore';
					return;
				}*/
				if(this.showType === 'history'){
					this.dataList = []
					this.showType = 'task'
					this.tablePage.currentPage = 0
				}
				this.tablePage.currentPage = ++ this.tablePage.currentPage;
				//联网加载数据
				this.status = 'loading';
				taskService.todoList({
					current: this.tablePage.currentPage,
					size: this.tablePage.pageSize,
					orders: this.tablePage.orders,
					...this.searchForm
				}).then((data)=>{
					var idList = []
					for (const value of this.dataList) {
						idList.push(value.task.id)
					}
					for (const value of data.records) {
						if(!idList.includes(value.task.id)){
							this.dataList=this.dataList.concat(value);
						}
					}
					//追加新数据
					this.tablePage.pages = data.pages;
					if(this.tablePage.pages <= this.tablePage.currentPage){
						this.status = 'nomore'
					} else {
						this.status = 'loadmore'
					}

					if(this.showType === 'history'){
						this.dataList = []
						this.tablePage.currentPage = 0;
						this.haveDone()
					}
				})

				notifyService.getUnreadCountByIsSelf({
					isSelf: true,
					...this.searchForm
				}).then((data)=>{
					EventBus.$emit('dataFromMessage', data); // 触发事件，传递参数
				})

			},
			//已办数据
			async haveDone() {
				if (this.showType === 'task') {
					this.dataList = [];
					this.showType = 'history';
					this.tablePage.currentPage = 0;
				}
				this.tablePage.currentPage++;
				this.status = 'loading';

				try {
					// 获取历史数据
					const data = await taskService.historicList({
						current: this.tablePage.currentPage,
						size: this.tablePage.pageSize,
						orders: this.tablePage.orders,
						...this.searchForm
					});

					var procInsIdList = [];
					for (const value of data.records) {
						if ('垃圾处理流程' === value.processDefinitionName && '1' === value.vars.disposeType) {
							procInsIdList.push(value.processInstanceId);
						}
					}

					if (procInsIdList.length > 0) {
						const rubbishStationList = await disposeRubbishService.getByProcInsId(procInsIdList);
						for (const rubbishStation of rubbishStationList) {
							for (const value of data.records) {
								if (value.processInstanceId === rubbishStation.procInsId) {
									value.weight = rubbishStation.weight;
									value.transportMileage = rubbishStation.transportMileage;
									value.subsidy = rubbishStation.subsidy;
									value.status = rubbishStation.status;
								}
							}
						}
					}

					// 过滤重复数据
					this.dataList = [
						...this.dataList,
						...data.records.filter(record => !this.dataList.some(existingRecord => existingRecord.processInstanceId === record.processInstanceId))
					];
					this.tablePage.pages = data.pages;
					this.status = this.tablePage.pages <= this.tablePage.currentPage ? 'nomore' : 'loadmore';

					if (this.showType === 'task') {
						this.dataList = [];
						this.tablePage.currentPage = 0;
						this.loadmore();
					}
				} catch (error) {
					console.error('Error loading data:', error);
				}

				try {
					// 获取未读通知数量
					const unreadCount = await notifyService.getUnreadCountByIsSelf({
						isSelf: true,
						...this.searchForm
					});
					EventBus.$emit('dataFromMessage', unreadCount);
				} catch (error) {
					console.error('Error getting unread count:', error);
				}
			},
			//抄送数据
			async flowCopyShow() {

				if (this.showType === 'task') {
					this.dataList = [];
					this.showType = 'history';
					this.tablePage.currentPage = 0;
				}
				this.tablePage.currentPage++;
				this.status = 'loading';

				try {
					// 获取历史数据
					const data = await flowCopyService.list({
						current: this.tablePage.currentPage,
						size: this.tablePage.pageSize,
						orders: this.tablePage.orders,
						...this.searchForm
					});

					var procInsIdList = [];
					for (const value of data.records) {
						procInsIdList.push(value.processInstanceId);
					}

					if (procInsIdList.length > 0) {
						const rubbishStationList = await disposeRubbishService.getByProcInsId(procInsIdList);
						for (const rubbishStation of rubbishStationList) {
							for (const value of data.records) {
								if (value.processInstanceId === rubbishStation.procInsId) {
									value.weight = rubbishStation.weight;
									value.transportMileage = rubbishStation.transportMileage;
									value.subsidy = rubbishStation.subsidy;
									value.status = rubbishStation.status;
								}
							}
						}
					}

					// 过滤重复数据
					const existingIds = new Set(this.dataList.map(record => record.processInstanceId));
					const newRecords = data.records.filter(record => !existingIds.has(record.processInstanceId));
					this.dataList = [...this.dataList, ...newRecords];

					this.tablePage.pages = data.pages;
					this.status = this.tablePage.pages <= this.tablePage.currentPage ? 'nomore' : 'loadmore';

					if (this.showType === 'task') {
						this.dataList = [];
						this.tablePage.currentPage = 0;
						this.loadmore();
					}
				} catch (error) {
					console.error('Error loading data:', error);
				}

				try {
					// 获取未读通知数量
					const unreadCount = await notifyService.getUnreadCountByIsSelf({
						isSelf: true,
						...this.searchForm
					});
					EventBus.$emit('dataFromMessage', unreadCount);
				} catch (error) {
					console.error('Error getting unread count:', error);
				}
			},
			...mapActions(['refreshUserInfo']),
			toApplyList (mail) {
				uni.navigateTo({
					url: '/pages/workbench/task/ApplyList'
				})
			},
			toTodoList (mail) {
				uni.navigateTo({
					url: '/pages/workbench/task/TodoList'
				})
			},
			toHistoryList (mail) {
				uni.navigateTo({
					url: '/pages/workbench/task/HistoryList'
				})
			},
			toFlowCopyList (mail) {
				uni.navigateTo({
					url: '/pages/workbench/task/FlowCopyList'
				})
			},
			async start () {
				var row = null;
				//根据当前人的权限获取对应的流程信息
				const roleNames = this.userInfo.roleNames;
				// 根据从 Vuex 获取的状态来判断样式
				switch (roleNames) {
					case '村负责人':
						this.sprocessForm.filterText = '垃圾处理流程'
						//根据用户id查询流程id
						await taskService.getProcessDefIdByRoleName({
							filter: "processes",
							modelType: 0,
							...this.sprocessForm,
						}).then((data) => {
							row = data.records[0].procDef
						});
						break;
					case '巡视员':
					case '乡镇巡查员':
						this.sprocessForm.filterText = '巡视工单流程'
						//根据用户id查询流程id
						await taskService.getProcessDefIdByRoleName({
							filter: "processes",
							modelType: 0,
							...this.sprocessForm,
						}).then((data) => {
							row = data.records[0].procDef
						});
						break;
				}
				// 读取流程表单
				taskService.getTaskDef({
					procDefId: row.id,
					status: 'start'
				}).then((data) => {
					let processTitle = `${this.userInfo.officeDTO.name} 在 ${moment(new Date()).format('MM-DD')} 发起了 [${row.name}]`
					let query = {procDefId: row.id, procDefKey: row.key, status: 'start', title: `发起流程【${row.name}】`, formType: data.formType, formUrl: data.formUrl, formTitle: processTitle}
					uni.navigateTo({
						url: '/pages/workbench/task/TaskForm?flow='+JSON.stringify(query)
					})
				})
			}
		}
	}
</script>

<style>
	.cu-list.card-menu {
		overflow: hidden;
		margin-right: 5px;
		margin-left: 5px;
		border-radius: 7px;
	}
	.cu-list.card-menu.margin-top-20 {
		margin-top: -20px;
	}
	.cu-list.menu>.cu-item .content>uni-view:first-child {
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-align: center;
		/* -webkit-align-items: center; */
		/* align-items: center; */
		display: inline-block;
		margin-right: 5px;
		width: 1.6em;
		text-align: center;
	}
	.font-size-35{
		font-size: 35px!important;
	}
	.circle-button{
		width: 44px;
		height: 44px;
		border-radius: 18px;
		padding-top: 4px;
	}
	.circle-button-box{
		width: 25%;
		margin-top: 10px;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-webkit-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		-webkit-box-pack: center;
		-webkit-justify-content: center;
		justify-content: center;
		box-sizing: border-box;
	}
	.font-b {
		vertical-align: middle;
		font-size: 18px;
		font-weight: 500;
		color: #3a3a3a;
	}
</style>