| | |
| | | <template> |
| | | <div class="home-container"> |
| | | <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick"> |
| | | <el-tab-pane label="申请中" name="1"> |
| | | <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">--> |
| | | <!-- <el-tab-pane label="申请中" name="1">--> |
| | | <div style="height: 100%"> |
| | | <el-row class="homeCard"> |
| | | <el-col :span="8"> |
| | | <span>作业类型:</span> |
| | | <el-col :span="10"> |
| | | <div class="grid-content topInfo"> |
| | | <el-input v-model="searchWord" placeholder="作业证名称"></el-input> |
| | | <el-button type="primary">查询</el-button> |
| | | <el-button plain>重置</el-button> |
| | | <el-select v-model="searchWord"> |
| | | <el-option |
| | | v-for="item in workType" |
| | | :key="item.id" |
| | | :label="item.name" |
| | | :value="item.id" |
| | | /> |
| | | </el-select> |
| | | <el-button type="primary" @click="searchRecord">查询</el-button> |
| | | <el-button plain @click="clearSearch">重置</el-button> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | |
| | | <el-table-column property="workTypeDesc" label="作业类型" /> |
| | | <el-table-column property="workLevelDesc" label="作业等级" /> |
| | | <el-table-column property="applyTime" label="申请时间" width="180" /> |
| | | <el-table-column label="申请状态" width="180"> |
| | | <el-table-column label="申请状态" align="center" width="180"> |
| | | <template #default="scope"> |
| | | <el-tag type="success">{{ scope.row.statusDesc }}</el-tag> |
| | | <el-tag :type="scope.row.status==2?'success':(scope.row.status==8||scope.row.status==9)?'warning':'danger'">{{ scope.row.statusDesc }}</el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | <el-table-column fixed="right" label="操作" align="center" width="250"> |
| | |
| | | <el-button link type="primary" size="small" :icon="View" @click="viewRecord(scope.row)">查看</el-button> |
| | | <el-button link type="success" size="small" :icon="Finished" @click="viewStatus(scope.row)">进度</el-button> |
| | | <el-button link type="warning" size="small" :icon="Delete" @click="deleteRecordBtn(scope.row)">取消</el-button> |
| | | <el-button link type="primary" size="small" :icon="Download" @click="downLoadBtn(scope.row)">导出</el-button> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <el-dialog v-model="dialogDetails" title="作业申请详情"> |
| | | <el-form :model="details" label-width="120px"> |
| | | <el-form-item label="作业申请单号"> |
| | | <el-input v-model="details.workPermitNo" readonly /> |
| | | </el-form-item> |
| | | <el-form-item label="申请人"> |
| | | <el-input v-model="details.applyUname" readonly /> |
| | | </el-form-item> |
| | | <el-form-item label="部门名称"> |
| | | <el-input v-model="details.depName" readonly /> |
| | | </el-form-item> |
| | | <el-form-item label="作业人"> |
| | | <el-input v-model="details.operators" readonly type="textarea" /> |
| | | </el-form-item> |
| | | <el-form-item label="作业类型"> |
| | | <el-input v-model="details.workTypeDesc" readonly /> |
| | | </el-form-item> |
| | | <el-form-item label="作业等级"> |
| | | <el-input v-model="details.workLevelDesc" readonly /> |
| | | </el-form-item> |
| | | <el-form-item label="作业内容"> |
| | | <el-input v-model="details.workContent" readonly type="textarea" /> |
| | | </el-form-item> |
| | | <el-form-item label="作业地址"> |
| | | <el-input v-model="details.workLocation" readonly type="textarea" /> |
| | | </el-form-item> |
| | | <el-form-item label="作业方式"> |
| | | <el-input v-model="details.workDetail.hotMethod" readonly type="textarea" /> |
| | | </el-form-item> |
| | | <el-form-item label="关联其他作业"> |
| | | <el-input v-model="details.workDetail.otherSpecialWork" readonly type="textarea" /> |
| | | </el-form-item> |
| | | <el-form-item label="期望开始时间"> |
| | | <el-input v-model="details.expStartTime" readonly /> |
| | | </el-form-item> |
| | | <el-form-item label="期望结束时间"> |
| | | <el-input v-model="details.expEndTime" readonly /> |
| | | </el-form-item> |
| | | <el-form-item label="申请时间"> |
| | | <el-input v-model="details.applyTime" readonly /> |
| | | </el-form-item> |
| | | <el-form-item label="当前状态"> |
| | | <el-input v-model="details.statusDesc" readonly /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="dialogDetails = false" size="default">确认</el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | <el-dialog v-model="dialogDetails" title="作业申请详情" center> |
| | | <fire v-if="dialogType == 1" :details = details></fire> |
| | | <space v-else-if="dialogType == 2" :details = details></space> |
| | | <hoist v-else-if="dialogType == 3" :details = details></hoist> |
| | | <ground v-else-if="dialogType == 4" :details = details></ground> |
| | | <broken v-else-if="dialogType == 5" :details = details></broken> |
| | | <height v-else-if="dialogType == 6" :details = details></height> |
| | | <power v-else-if="dialogType == 7" :details = details></power> |
| | | <plate v-else :details = details></plate> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button type="primary" @click="dialogDetails = false" |
| | | >确认</el-button |
| | | > |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | <el-dialog v-model="dialogStatus" title="作业申请进度"> |
| | | <el-dialog v-model="dialogStatus" title="作业申请进度" width="60%"> |
| | | <el-form v-if="approveInfo.operators.length > 0" style="margin-bottom: 40px"> |
| | | <el-form-item label="申请作业人"> |
| | | <el-input v-model="approveInfo.operators" readonly type="textarea" /> |
| | |
| | | </div> |
| | | <div class="approveItem"> |
| | | <div class="item-tit"> |
| | | <span>审批项目</span><span>类型</span> |
| | | <span>审批项目</span> |
| | | <!-- <span>类型</span>--> |
| | | <div>措施标准</div> |
| | | </div> |
| | | <div class="item-cont" v-for="i in item.stepItems"> |
| | | <span>{{ i.itemName }}</span |
| | | ><span>{{ i.typeDesc }}</span> |
| | | <span>{{ i.itemName }}</span> |
| | | <!-- <span>{{ i.typeDesc }}</span>--> |
| | | <div v-if="i.measure !== null"> |
| | | <div> |
| | | <span>作业类型:</span><span>{{ i.measure.workTypeDesc }}</span> |
| | |
| | | </div> |
| | | </div> |
| | | </el-dialog> |
| | | <el-dialog v-model="deleteDialog" title="提示" width="30%" center @close="indexClear"> |
| | | <el-dialog v-model="deleteDialog" title="提示" width="30%" center> |
| | | <span>您确定要取消该条申请吗?</span> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | </el-tab-pane> |
| | | <el-tab-pane label="已通过" name="2"> |
| | | <div style="height: 100%"> |
| | | <el-row class="homeCard"> |
| | | <el-col :span="8"> |
| | | <div class="grid-content topInfo"> |
| | | <el-input v-model="searchWord" placeholder="作业证名称"></el-input> |
| | | <el-button type="primary">查询</el-button> |
| | | <el-button plain>重置</el-button> |
| | | </div> |
| | | </el-col> |
| | | </el-row> |
| | | <div class="homeCard"> |
| | | <div class="main-card"> |
| | | <el-table ref="multipleTableRef" :data="passedData" style="width: 100%" height="calc(100% - 48px)" :header-cell-style="{ background: '#fafafa' }" @selection-change="handleSelectionChange"> |
| | | <el-table-column type="selection" width="55" /> |
| | | <el-table-column type="index" label="编号" width="200" /> |
| | | <el-table-column property="level" label="作业证等级" width="180" sortable /> |
| | | <el-table-column property="applyDate" label="申请日期" sortable /> |
| | | <el-table-column property="name" label="申请人" width="180" /> |
| | | <el-table-column property="department" label="申请部门" width="180" /> |
| | | <el-table-column label="申请状态" width="180"> |
| | | <template #default="scope"> |
| | | <el-tag type="success">{{ scope.row.status }}</el-tag> |
| | | </template> |
| | | </el-table-column> |
| | | </el-table> |
| | | <div class="pageBtn"> |
| | | <el-pagination v-model:currentPage="pageIndex2" v-model:page-size="pageSize2" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize2" @size-change="handleSizeChange2" @current-change="handleCurrentChange2" /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </el-tab-pane> |
| | | </el-tabs> |
| | | <el-dialog v-model="downLoadDialog" title="提示" width="30%" center> |
| | | <span>您确定要导出该条记录吗?</span> |
| | | <template #footer> |
| | | <span class="dialog-footer"> |
| | | <el-button @click="downLoadDialog = false" size="default">取消</el-button> |
| | | <el-button type="primary" @click="conFirmDownLoad" size="default">确认</el-button> |
| | | </span> |
| | | </template> |
| | | </el-dialog> |
| | | <!-- </el-tab-pane>--> |
| | | <!-- <el-tab-pane label="已通过" name="2">--> |
| | | <!-- <div style="height: 100%">--> |
| | | <!-- <el-row class="homeCard">--> |
| | | <!-- <el-col :span="8">--> |
| | | <!-- <div class="grid-content topInfo">--> |
| | | <!-- <el-input v-model="searchWord" placeholder="作业证名称"></el-input>--> |
| | | <!-- <el-button type="primary">查询</el-button>--> |
| | | <!-- <el-button plain>重置</el-button>--> |
| | | <!-- </div>--> |
| | | <!-- </el-col>--> |
| | | <!-- </el-row>--> |
| | | <!-- <div class="homeCard">--> |
| | | <!-- <div class="main-card">--> |
| | | <!-- <el-table ref="multipleTableRef" :data="passedData" style="width: 100%" height="calc(100% - 48px)" :header-cell-style="{ background: '#fafafa' }" @selection-change="handleSelectionChange">--> |
| | | <!-- <el-table-column type="selection" width="55" />--> |
| | | <!-- <el-table-column type="index" label="编号" width="200" />--> |
| | | <!-- <el-table-column property="level" label="作业证等级" width="180" sortable />--> |
| | | <!-- <el-table-column property="applyDate" label="申请日期" sortable />--> |
| | | <!-- <el-table-column property="name" label="申请人" width="180" />--> |
| | | <!-- <el-table-column property="department" label="申请部门" width="180" />--> |
| | | <!-- <el-table-column label="申请状态" width="180">--> |
| | | <!-- <template #default="scope">--> |
| | | <!-- <el-tag type="success">{{ scope.row.status }}</el-tag>--> |
| | | <!-- </template>--> |
| | | <!-- </el-table-column>--> |
| | | <!-- </el-table>--> |
| | | <!-- <div class="pageBtn">--> |
| | | <!-- <el-pagination v-model:currentPage="pageIndex2" v-model:page-size="pageSize2" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize2" @size-change="handleSizeChange2" @current-change="handleCurrentChange2" />--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </div>--> |
| | | <!-- </el-tab-pane>--> |
| | | <!-- </el-tabs>--> |
| | | </div> |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import { toRefs, reactive, defineComponent, ref, onMounted } from 'vue'; |
| | | import {toRefs, reactive, defineComponent, ref, onMounted, defineAsyncComponent} from 'vue'; |
| | | import { storeToRefs } from 'pinia'; |
| | | import { initBackEndControlRoutes } from '/@/router/backEnd'; |
| | | import { useUserInfo } from '/@/stores/userInfo'; |
| | | import { Session } from '/@/utils/storage'; |
| | | import { useRouter } from 'vue-router'; |
| | | import { Edit, View, Plus, Delete, Refresh, Search, Finished } from '@element-plus/icons-vue'; |
| | | import { Edit, View, Plus, Delete, Refresh, Search, Finished, Download } from '@element-plus/icons-vue'; |
| | | import { ElTable } from 'element-plus'; |
| | | import { FormInstance, FormRules, ElMessage } from 'element-plus'; |
| | | import { workApplyApi } from '/@/api/specialWorkSystem/workApply'; |
| | | import type { TabsPaneContext } from 'element-plus'; |
| | | import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage"; |
| | | import Cookies from 'js-cookie'; |
| | | import axios from 'axios'; |
| | | |
| | | // 定义接口来定义对象的类型 |
| | | interface stateType { |
| | |
| | | dialogDetails: boolean; |
| | | dialogStatus: boolean; |
| | | deleteDialog: boolean; |
| | | downLoadDialog: boolean; |
| | | pageIndex1: number; |
| | | pageSize1: number; |
| | | chosenIndex: null | number; |
| | | deleteId: null | number; |
| | | downLoadId: null | number; |
| | | downLoadName: string; |
| | | searchWord: string; |
| | | totalSize1: number; |
| | | activeName: string; |
| | |
| | | details: {}; |
| | | statusInfo: {}; |
| | | workType: Array<type>; |
| | | dialogType: number | null; |
| | | departmentList: Array<any>; |
| | | departmentRecursionList: Array<DepartmentState>; |
| | | } |
| | | interface type { |
| | | id: number; |
| | | name: string; |
| | | } |
| | | |
| | | interface DepartmentState { |
| | | depId: number; |
| | | depName: string; |
| | | } |
| | | export default defineComponent({ |
| | | name: 'myApply', |
| | | components: {}, |
| | | components: { |
| | | fire: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/myJobApply/components/fireLog.vue')), |
| | | space: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/myJobApply/components/spaceLog.vue')), |
| | | hoist: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/myJobApply/components/hoistLog.vue')), |
| | | ground: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/myJobApply/components/groundLog.vue')), |
| | | broken: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/myJobApply/components/brokenLog.vue')), |
| | | height: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/myJobApply/components/heightLog.vue')), |
| | | power: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/myJobApply/components/powerLog.vue')), |
| | | plate: defineAsyncComponent(() => import('/@/views/specialWorkSystem/workTicket/myJobApply/components/plateLog.vue')) |
| | | }, |
| | | setup() { |
| | | const userInfo = useUserInfo(); |
| | | const { userInfos } = storeToRefs(userInfo); |
| | |
| | | pageIndex1: 1, |
| | | pageSize1: 10, |
| | | totalSize1: 0, |
| | | dialogType: null, |
| | | activeName: '1', |
| | | departmentList: [], |
| | | departmentRecursionList: [], |
| | | chosenIndex: null, |
| | | searchWord: '', |
| | | applyData: [], |
| | |
| | | dialogDetails: false, |
| | | dialogStatus: false, |
| | | deleteDialog: false, |
| | | downLoadDialog: false, |
| | | addRecord: {}, |
| | | details: {}, |
| | | statusInfo: {}, |
| | | deleteId: null, |
| | | downLoadId: null, |
| | | downLoadName: '', |
| | | deleteArr: [], |
| | | workType: [ |
| | | { id: 1, name: '动火作业' }, |
| | |
| | | // 填写表单 |
| | | const toApply = () => { |
| | | router.push({ |
| | | path: 'workTicket' |
| | | path: 'workApply' |
| | | }); |
| | | }; |
| | | |
| | | const handleClick = (tab: TabsPaneContext, event: Event) => { |
| | | console.log(tab, event); |
| | | }; |
| | | |
| | | // 获取部门列表 |
| | | const getAllDepartment = async () => { |
| | | let res = await teamManageApi().getAllDepartment(); |
| | | if (res.data.code === '200') { |
| | | state.departmentList = JSON.parse(JSON.stringify(res.data.data)) |
| | | recursion(state.departmentList); |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | const recursion = (value: any) => { |
| | | for (let i of value) { |
| | | if (i.children.length !== 0) { |
| | | state.departmentRecursionList.push(i); |
| | | recursion(i.children); |
| | | } else { |
| | | state.departmentRecursionList.push(i); |
| | | } |
| | | } |
| | | }; |
| | | |
| | | // 分页获取工作时间组列表 |
| | | const getListByPage = async () => { |
| | | const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: { name: state.searchWord } }; |
| | | let res = await workApplyApi().getApplyListtPage(data); |
| | | const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: { workType: state.searchWord } }; |
| | | let res = await workApplyApi().getApplyListPage(data); |
| | | if (res.data.code === '200') { |
| | | state.applyData = JSON.parse(JSON.stringify(res.data.data)); |
| | | state.applyData = state.applyData.map((item) => { |
| | |
| | | return item; |
| | | }); |
| | | state.totalSize1 = res.data.total; |
| | | console.log('0212121'); |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | |
| | | getListByPage(); |
| | | } |
| | | }; |
| | | |
| | | // 重置搜索 |
| | | const clearSearch = async () => { |
| | | state.searchWord = ''; |
| | | getListByPage(); |
| | |
| | | if (res.data.code === '200') { |
| | | state.approveInfo = JSON.parse(JSON.stringify(res.data.data)); |
| | | state.approveInfo.operators = Array.from(state.approveInfo.operators, ({ operatorUname }) => operatorUname); |
| | | console.log(state.approveInfo, 'steps'); |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | |
| | | if (res.data.code === '200') { |
| | | ElMessage({ |
| | | type: 'success', |
| | | message: res.data.msg |
| | | message: '删除成功!' |
| | | }); |
| | | getListByPage(); |
| | | } else { |
| | |
| | | state.deleteDialog = false; |
| | | }; |
| | | |
| | | // 导出图表 |
| | | const downLoadBtn = (row:any) =>{ |
| | | state.downLoadId = row.workApplyId; |
| | | state.downLoadName = row.workTypeDesc + row.workPermitNo |
| | | state.downLoadDialog = true; |
| | | } |
| | | |
| | | // 导出方法 |
| | | const downLoadRecord = async (data: any) => { |
| | | // let res = await workApplyApi().postPrinting(data); |
| | | axios.post(import.meta.env.VITE_API_URL + `/work/apply/printing`,data,{headers:{'Content-Type': 'application/json','Authorization': `${Cookies.get('token')}`,'uid':`${Cookies.get('uid')}`},responseType: 'blob'}).then(res=>{ |
| | | if (res) { |
| | | const link = document.createElement('a') |
| | | let blob = new Blob([res.data],{type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'}) |
| | | link.style.display = "none"; |
| | | link.href = URL.createObjectURL(blob); // 创建URL |
| | | link.setAttribute("download", state.downLoadName + "作业证.docx"); |
| | | document.body.appendChild(link); |
| | | link.click(); |
| | | document.body.removeChild(link); |
| | | } else { |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: res.data.msg |
| | | }); |
| | | } |
| | | }) |
| | | |
| | | }; |
| | | |
| | | const conFirmDownLoad = () => { |
| | | downLoadRecord({ applyWorkId: state.downLoadId }); |
| | | state.downLoadDialog = false; |
| | | }; |
| | | |
| | | const handleSizeChange1 = (val: number) => { |
| | | state.pageSize1 = val; |
| | | getListByPage(); |
| | |
| | | |
| | | // 查看记录 |
| | | const viewRecord = (row: any) => { |
| | | row.workDetail.otherSpecialWork = JSON.parse(JSON.stringify(row.workDetail.otherSpecialWork.split(','))).map((item: Array<string>) => { |
| | | return state.workType.find((i: { id: number }) => i.id === Number(item))?.name; |
| | | }); |
| | | state.dialogType = row.workType |
| | | state.details = JSON.parse(JSON.stringify(row)); |
| | | if(state.details.workDetail.otherSpecialWork == '' || !state.details.workDetail.otherSpecialWork){ |
| | | state.details.workDetail.otherSpecialWork=[] |
| | | } |
| | | else { |
| | | const a = state.details.workDetail.otherSpecialWork |
| | | state.details.workDetail.otherSpecialWork = a.split(',').map((item) => { |
| | | return state.workType.find((i: { id: number }) => i.id === Number(item))?.name; |
| | | }); |
| | | } |
| | | if(state.details.workDetail.involvedDepIds == '' || !state.details.workDetail.involvedDepIds){ |
| | | state.details.workDetail.involvedDepIds=[] |
| | | } |
| | | else { |
| | | const a = state.details.workDetail.involvedDepIds |
| | | state.details.workDetail.involvedDepIds = a.split(',').map((item) => { |
| | | return state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(item))?.depName; |
| | | }); |
| | | } |
| | | if(state.details.workDetail.csDepId){ |
| | | state.details.workDetail.csDepId = state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(state.details.workDetail.csDepId))?.depName; |
| | | } |
| | | if(state.details.workDetail.operationDepId){ |
| | | state.details.workDetail.operationDepId = state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(state.details.workDetail.operationDepId))?.depName; |
| | | } |
| | | if(state.details.workDetail.gbPath){ |
| | | state.details.workDetail.gbPath = state.details.workDetail.gbPath.split(',') |
| | | } |
| | | if(state.details.workDetail.bcPath){ |
| | | state.details.workDetail.bcPath = state.details.workDetail.bcPath.split(',') |
| | | } |
| | | if(state.details.workDetail.bpLocationMapPath){ |
| | | state.details.workDetail.bpLocationMapPath = state.details.workDetail.bpLocationMapPath.split(',') |
| | | } |
| | | state.dialogDetails = true; |
| | | }; |
| | | |
| | |
| | | // 页面载入时执行方法 |
| | | onMounted(() => { |
| | | getListByPage(); |
| | | getAllDepartment() |
| | | }); |
| | | |
| | | return { |
| | |
| | | Refresh, |
| | | Plus, |
| | | Finished, |
| | | Download, |
| | | reLoadData, |
| | | toApply, |
| | | handleClick, |
| | |
| | | viewRecord, |
| | | viewStatus, |
| | | deleteRecordBtn, |
| | | downLoadBtn, |
| | | conFirmDelete, |
| | | conFirmDownLoad, |
| | | getListByPage, |
| | | handleSizeChange1, |
| | | handleCurrentChange1, |
| | |
| | | |
| | | & > span { |
| | | flex: 1; |
| | | &:last-of-type{ |
| | | text-align: center; |
| | | } |
| | | } |
| | | & > div { |
| | | flex: 2; |
| | | flex: 1; |
| | | text-align: center; |
| | | } |
| | | } |
| | |
| | | |
| | | & > span { |
| | | flex: 1; |
| | | &:last-of-type{ |
| | | text-align: center; |
| | | } |
| | | } |
| | | & > div { |
| | | flex: 2; |
| | | flex: 1; |
| | | text-align: center; |
| | | |
| | | & > div { |
| | |
| | | width: 100%; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | align-items: flex-start; |
| | | margin-bottom: 10px; |
| | | span { |
| | | width: 45%; |
| | | width: 50%; |
| | | &:first-of-type { |
| | | width: 30%; |
| | | width: 25%; |
| | | } |
| | | } |
| | | } |