From 3a9ca6d56fbad4c67b858185d9e9b157e3d60b82 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期三, 22 三月 2023 08:48:51 +0800 Subject: [PATCH] 对接特殊作业接口 --- src/views/specialWorkSystem/specialIndex/index.vue | 587 +++++++++++++++++++++++++++++++++++---------------------- 1 files changed, 359 insertions(+), 228 deletions(-) diff --git a/src/views/specialWorkSystem/specialIndex/index.vue b/src/views/specialWorkSystem/specialIndex/index.vue index fea8c63..c76b6ca 100644 --- a/src/views/specialWorkSystem/specialIndex/index.vue +++ b/src/views/specialWorkSystem/specialIndex/index.vue @@ -16,26 +16,28 @@ </div> <div class="topChart"> <div class="chart-item"> + <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10> <div class="chart-tit"> <span class="tit">八大作业各分类分布图</span> <div class="filter-part filter-part2"> - <el-cascader :teleported="false" v-model="chartSearch1.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> + <el-cascader :teleported="false" v-model="chartSearch1.depId" @change="changeDep1()" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> </div> </div> <div class="chart" :id="zyfb"></div> - <el-radio-group v-model="chartSearch1.period" size="small"> - <el-radio label="week" border>近7天</el-radio> - <el-radio label="month" border>近30天</el-radio> - <el-radio label="season" border>近90天</el-radio> - <el-radio label="year" border>近一年</el-radio> + <el-radio-group v-model="chartSearch1.days" size="small" @change="(value)=>changeTime1(value)"> + <el-radio :label='7' border>近7天</el-radio> + <el-radio :label='30' border>近30天</el-radio> + <el-radio :label='90' border>近90天</el-radio> + <el-radio :label='365' border>近一年</el-radio> </el-radio-group> </div> <div class="chart-item"> + <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10> <div class="chart-tit"> <span class="tit">各事业部关联作业分析</span> <div class="filter-part"> - <el-cascader :teleported="false" v-model="chartSearch2.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> - <el-select v-model="chartSearch2.type" size="small" :teleported="false"> + <el-cascader :teleported="false" v-model="chartSearch2.depId" @change="changeDep2()" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> + <el-select v-model="chartSearch2.type" size="small" :teleported="false" @change="changeType2()"> <el-option v-for="item in workType1" :key="item.id" @@ -50,15 +52,17 @@ </div> <div class="topChart"> <div class="chart-item"> + <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10> <div class="chart-tit"> <span class="tit">关联作业趋势图</span> <div class="filter-part filter-part2"> - <el-cascader :teleported="false" v-model="chartSearch3.searchDep" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> + <el-cascader :teleported="false" v-model="chartSearch3.depId" @change="changeDep3()" :options="departmentList" :props="casProps" :show-all-levels="false" size="small"/> </div> </div> <div class="chart" :id="zyqs"></div> </div> <div class="chart-item"> + <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10> <div class="chart-tit"> <span class="tit">异常警报关联人</span> <div class="filter-part"> @@ -104,13 +108,14 @@ </div> <div> <div class="homeCard"> + <dv-border-box10 v-if="isFull==true" class="item-bg"></dv-border-box10> <el-row> <el-col :span="5" style="display:flex;align-items: center"> <span style="white-space: nowrap">作业类型:</span> <div class="grid-content topInfo"> - <el-select :teleported="false" v-model="searchWord" size="small"> + <el-select :teleported="false" v-model="searchParams.workType" size="small"> <el-option - v-for="item in workType" + v-for="item in workTypeList" :key="item.id" :label="item.name" :value="item.id" @@ -121,9 +126,9 @@ <el-col :span="5" style="display:flex;align-items: center"> <span style="white-space: nowrap">作业状态:</span> <div class="grid-content topInfo"> - <el-select :teleported="false" v-model="searchStatus" size="small"> + <el-select :teleported="false" v-model="searchParams.workStatus" size="small"> <el-option - v-for="item in workStatus" + v-for="item in workStatusList" :key="item.value" :label="item.name" :value="item.value" @@ -134,7 +139,7 @@ <el-col :span="5" style="display:flex;align-items: center"> <span style="white-space: nowrap">作业部门:</span> <div class="grid-content topInfo"> - <el-cascader :teleported="false" size="small" v-model="searchDep" :options="departmentList" :props="casProps" :show-all-levels="false"/> + <el-cascader :teleported="false" size="small" v-model="searchParams.workDepId" :options="departmentList" :props="casProps" :show-all-levels="false"/> </div> </el-col> <el-col :span="6" style="display:flex;align-items: center;"> @@ -180,24 +185,20 @@ </el-col> </el-row> <el-table ref="multipleTableRef" stripe border :data="workData" style="width: 100%" :header-cell-style="{ background: '#fafafa' }"> - <el-table-column property="num" label="作业证编号" align="center"/> - <el-table-column property="dep" label="部门" align="center"/> + <el-table-column property="workPermitNo" label="作业证编号" align="center"/> + <el-table-column property="depName" label="部门" align="center"/> <el-table-column property="applyer" label="申请人" align="center"/> - <el-table-column property="worker" label="作业人" align="center"/> - <el-table-column property="type" label="作业类型" align="center"/> - <el-table-column property="level" label="作业等级" align="center"/> - <el-table-column property="applyTime" label="申请时间" align="center"/> - <el-table-column property="startTime" label="作业开始时间" align="center"/> - <el-table-column property="endTime" label="作业结束时间" align="center"/> - <el-table-column label="作业状态" align="center"> - <template #default="scope"> - <el-tag>{{ scope.row.status==0?'进行中':scope.row.status==1?'作业中止':scope.row.status==2?'作业结束验收': '作业完成'}}</el-tag> - </template> - </el-table-column> + <el-table-column property="finishUname" label="作业人" align="center"/> + <el-table-column property="workTypeDesc" label="作业类型" align="center"/> + <el-table-column property="workLevelDesc" label="作业等级" align="center"/> + <el-table-column property="gmtCreate" label="申请时间" align="center"/> + <el-table-column property="workStartTime" label="作业开始时间" align="center"/> + <el-table-column property="workFinishTime" label="作业结束时间" align="center"/> + <el-table-column property="workStatusDesc" label="作业状态" align="center"/> <el-table-column property="reason" label="中止原因" align="center"/> <el-table-column label="安全预警" align="center"> <template #default="scope"> - <el-tag :type="scope.row.warning==0?'success':(scope.row.warning==1||scope.row.warning==2)?'warning':'danger'">{{ scope.row.warning==0?'正常':'报警' }}</el-tag> + <el-tag>--</el-tag> </template> </el-table-column> <el-table-column property="message" label="报警信息" align="center"> @@ -215,7 +216,7 @@ </el-table-column> </el-table> <div class="pageBtn"> - <el-pagination v-model:currentPage="pageIndex1" v-model:page-size="pageSize1" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize1" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" /> + <el-pagination v-model:currentPage="pageIndex" v-model:page-size="pageSize" :page-sizes="[10, 15]" small="false" background layout="total, sizes, prev, pager, next, jumper" :total="totalSize" @size-change="handleSizeChange" @current-change="handleCurrentChange" /> </div> </div> </div> @@ -277,6 +278,7 @@ import * as echarts from "echarts"; import screenfull from "screenfull"; import VideoDetail from "/@/views/specialWorkSystem/specialIndex/components/videoDetail.vue"; +import { BorderBox10 as DvBorderBox10 } from '@kjgl77/datav-vue3' // 定义接口来定义对象的类型 interface stateType { @@ -287,10 +289,11 @@ approveInfo: Object; dialogDetails: boolean; dialogReview: boolean; - pageIndex1: number; - pageSize1: number; - chosenIndex: null | number; - searchWord: number | null; + pageIndex: number; + pageSize: number; + searchParams: {}; + workStatusList: Array<status>; + workTypeList: Array<type>; searchStatus: number | null; chartSearch1: object; chartSearch2: object; @@ -299,22 +302,21 @@ searchDep2: number | null; searchDep: number | null; searchDate: Array<any>, - totalSize1: number; + totalSize: number; details: {}; - workType: Array<type>; workType1: Array<type>; dialogType: number | null; departmentList: Array<any>; departmentRecursionList: Array<DepartmentState>; - workStatus: Array<status>; reviewForm: object; reviewRules: object; warningData: Array<any>; isFull:boolean; - themeColor:string + themeColor:string; + endTime:string } interface type { - id: number; + id: number | null; name: string; } interface status { @@ -353,111 +355,122 @@ const zyqs = ref("eChartZyqs" + Date.now() + Math.random()) const videoRef = ref(); const state = reactive<stateType>({ - pageIndex1: 1, - pageSize1: 10, - totalSize1: 0, + pageIndex: 1, + pageSize: 10, + totalSize: 0, dialogType: null, + searchParams: { + workType: null, + workDepId: null, + workPermitNo: '', + startTime: '', + endTime: '', + workStatus: null, + acceptStatus: null, + workAnalysisStatus: null + }, dialogReview: false, departmentList: [], departmentRecursionList: [], - chosenIndex: null, - searchWord: null, searchStatus: null, + endTime: '', chartSearch1: { - searchDep: null, - startTime: '2023-03-08', - endTime: '2023-02-08', - period: 'month' + depId: 1, + startTime: '', + days: 30 }, chartSearch2: { - searchDep: null, - type: 0 + depId: 1, + startTime: '', + type: null }, chartSearch3: { - searchDep: null + depId: 1 }, chartSearch4: { - searchDep: null + searchDep: null, + startTime: '', + days: 30 }, searchDep2: null, searchDep: null, searchDate: [], workData: [ - { - num: '111', - dep: '部门1', - applyer: '张凤', - worker: '李羽飞', - type: '动火作业', - level: '一级', - applyTime: '2023-03-08', - startTime: '2023-03-08', - endTime: '2023-03-08', - status: 0, - reason: '分析超时', - warning: 0, - message: 1 - }, - { - num: '222', - dep: '部门2', - applyer: '张凤', - worker: '李羽飞', - type: '动土作业', - level: '一级', - applyTime: '2023-03-08', - startTime: '2023-03-08', - endTime: '2023-03-08', - status: 1, - reason: '分析超时', - warning: 1, - message: 0 - }, - { - num: '333', - dep: '部门3', - applyer: '张凤', - worker: '李羽飞', - type: '动火作业', - level: '一级', - applyTime: '2023-03-08', - startTime: '2023-03-08', - endTime: '2023-03-08', - status: 2, - reason: '分析超时', - warning: 2, - message: 0 - }, - { - num: '222', - dep: '部门2', - applyer: '张凤', - worker: '李羽飞', - type: '动土作业', - level: '一级', - applyTime: '2023-03-08', - startTime: '2023-03-08', - endTime: '2023-03-08', - status: 1, - reason: '分析超时', - warning: 1, - message: 0 - }, - { - num: '333', - dep: '部门3', - applyer: '张凤', - worker: '李羽飞', - type: '动火作业', - level: '一级', - applyTime: '2023-03-08', - startTime: '2023-03-08', - endTime: '2023-03-08', - status: 2, - reason: '分析超时', - warning: 2, - message: 0 - } + // { + // num: '111', + // dep: '部门1', + // applyer: '张凤', + // worker: '李羽飞', + // type: '动火作业', + // level: '一级', + // applyTime: '2023-03-08', + // startTime: '2023-03-08', + // endTime: '2023-03-08', + // status: 0, + // reason: '分析超时', + // warning: 0, + // message: 1 + // }, + // { + // num: '222', + // dep: '部门2', + // applyer: '张凤', + // worker: '李羽飞', + // type: '动土作业', + // level: '一级', + // applyTime: '2023-03-08', + // startTime: '2023-03-08', + // endTime: '2023-03-08', + // status: 1, + // reason: '分析超时', + // warning: 1, + // message: 0 + // }, + // { + // num: '333', + // dep: '部门3', + // applyer: '张凤', + // worker: '李羽飞', + // type: '动火作业', + // level: '一级', + // applyTime: '2023-03-08', + // startTime: '2023-03-08', + // endTime: '2023-03-08', + // status: 2, + // reason: '分析超时', + // warning: 2, + // message: 0 + // }, + // { + // num: '222', + // dep: '部门2', + // applyer: '张凤', + // worker: '李羽飞', + // type: '动土作业', + // level: '一级', + // applyTime: '2023-03-08', + // startTime: '2023-03-08', + // endTime: '2023-03-08', + // status: 1, + // reason: '分析超时', + // warning: 1, + // message: 0 + // }, + // { + // num: '333', + // dep: '部门3', + // applyer: '张凤', + // worker: '李羽飞', + // type: '动火作业', + // level: '一级', + // applyTime: '2023-03-08', + // startTime: '2023-03-08', + // endTime: '2023-03-08', + // status: 2, + // reason: '分析超时', + // warning: 2, + // message: 0 + // } ], isFull: false, themeColor: '#333', @@ -477,7 +490,7 @@ dialogDetails: false, details: {}, workType1: [ - { id: 0, name: '所有作业' }, + { id: null, name: '所有作业' }, { id: 1, name: '动火作业' }, { id: 2, name: '受限空间作业' }, { id: 3, name: '吊装作业' }, @@ -487,7 +500,7 @@ { id: 7, name: '临时用电作业' }, { id: 8, name: '盲板抽堵作业' } ], - workType: [ + workTypeList: [ { id: 1, name: '动火作业' }, { id: 2, name: '受限空间作业' }, { id: 3, name: '吊装作业' }, @@ -497,22 +510,18 @@ { id: 7, name: '临时用电作业' }, { id: 8, name: '盲板抽堵作业' } ], - workStatus: [ + workStatusList: [ { - name: '作业进行中', - value: 0 + name: '未开始', + value: -1 }, { - name: '作业终止', + name: '开始', value: 1 }, { - name: '作业结束待验收', + name: '结束', value: 2 - }, - { - name: '作业完成', - value: 3 } ], warningData: [ @@ -547,12 +556,51 @@ }); // 页面载入时执行方法 onMounted(() => { - getListByPage(); + initTime() + getMydepList() getAllDepartment(); + getTypePie() + getWorkDep() + getDepMonth() initZyfb() initSlfx() initZyqs() }); + const initTime =()=>{ + state.chartSearch1.startTime = getPeriod(30) + state.chartSearch2.startTime = getPeriod(30) + state.endTime = formatDate(new Date()) + } + const getPeriod =(num)=> { + const currentDate = new Date(); + const startTime = new Date(); + startTime.setDate(currentDate.getDate() - num); + return formatDate(startTime) + } + const formatDate =(date)=> { + const year = date.getFullYear().toString(); + const month = ('0' + (date.getMonth() + 1)).slice(-2); + const day = ('0' + date.getDate()).slice(-2); + return `${year}-${month}-${day} 00:00:00`; + } + const changeTime1=(value:number)=>{ + state.chartSearch1.startTime = getPeriod(value) + console.log(state.chartSearch1.startTime,state.endTime,'结束段') + getTypePie() + } + const changeDep1=()=>{ + getTypePie() + } + + const changeDep2=()=>{ + getWorkDep() + } + const changeType2=()=>{ + getWorkDep() + } + const changeDep3=()=>{ + getDepMonth() + } const toFullscreen =()=>{ const element = document.getElementById('bigScreen') if (!screenfull.isEnabled) { @@ -569,11 +617,66 @@ initZyfb() initSlfx() initZyqs() + getMydepList() } const getTypePie = async ()=>{ - let res = await specialIndexApi().analyseType(state.chartSearch1.startTime,state.chartSearch1.endTime,state.chartSearch1.searchDep); + const data = { + startTime: state.chartSearch1.startTime, + endTime:state.endTime, + depId:state.chartSearch1.depId + } + let res = await specialIndexApi().analyseType(data); if (res.data.code === '200') { - console.log(res.data,'666666666') + console.log('饼图数据>>>', res.data.data) + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + const getWorkDep = async ()=>{ + const data = { + startTime: state.chartSearch2.startTime, + endTime: state.endTime, + depId:state.chartSearch2.depId, + type: state.chartSearch2.type + } + let res = await specialIndexApi().analyseAllWork(data); + if (res.data.code === '200') { + console.log('条形图数据>>>', res.data.data) + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + const getDepMonth = async ()=>{ + let res = await specialIndexApi().analyseDepMonth(state.chartSearch3.depId); + if (res.data.code === '200') { + console.log('折线图数据>>>', res.data.data) + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + const getMydepList = async()=>{ + const dateRange = JSON.parse(JSON.stringify(state.searchDate)) + if(dateRange[1]){ + dateRange[1] = dateRange[1].replace('00:00:00','23:59:59') + state.searchParams.startTime = dateRange[0] + state.searchParams.endTime = dateRange[1] + }else{ + state.searchParams.startTime = '' + state.searchParams.endTime = '' + } + let res = await specialIndexApi().getMydepList({pageIndex: state.pageIndex,pageSize: state.pageSize,searchParams: state.searchParams}) + if (res.data.code === '200') { + state.workData = JSON.parse(JSON.stringify(res.data.data)) + state.totalSize = res.data.total } else { ElMessage({ type: 'warning', @@ -597,7 +700,7 @@ textStyle: { // 设置默认的文字颜色 color: state.themeColor, - fontSize: 12 + // fontSize: 12 }, itemStyle: { borderWidth: 0 // 设置图例边框宽度为0 @@ -612,21 +715,29 @@ itemStyle: { borderRadius: 1, borderColor: '#fff', - borderWidth: 2 + borderWidth: 1 }, label: { - show: false, - position: 'center' - }, - emphasis: { - label: { - show: true, - fontSize: 40, - fontWeight: 'bold' - } + show: true, + position: 'outside', + overflow: 'truncate', + borderWidth: 0, + color: state.themeColor }, labelLine: { - show: true + show: true, // 显示指示线 + lineStyle: { + color: '#ccc', + width: 1, + type: 'solid' + } + }, + emphasis: { + itemStyle: { + shadowBlur: 10, + shadowOffsetX: 0, + shadowColor: 'rgba(0, 0, 0, 0.5)' + }, }, data: [ { value: 1048, name: '动火作业' }, @@ -709,7 +820,17 @@ } }, yAxis: { - type: 'value' + splitLine: { + show: true, + lineStyle: { + color: '#fafafa', + width: 1, + type: 'dashed' + } + }, + axisLabel:{ + color: '#ccc' + } }, grid: { top: '8%', @@ -718,7 +839,10 @@ series: [ { data: [150, 230, 224, 218, 135, 147, 230, 224, 218, 135, 147, 260], - type: 'line' + type: 'line', + label:{ + show: true + } } ] } @@ -730,7 +854,7 @@ } // 刷新 const reLoadData = async () => { - getListByPage(); + getMydepList() }; // 填写表单 @@ -755,73 +879,57 @@ }; // 分页获取列表 - const getListByPage = async () => { - const dateRange = JSON.parse(JSON.stringify(state.searchDate)) - if(dateRange[1]){dateRange[1] = dateRange[1].replace('00:00:00','23:59:59')} - const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: { workType: state.searchWord, applyDepId: state.searchDep,applyStartTime: dateRange[0],applyEndTime: dateRange[1]} }; - let res = await workApplyApi().getApplyList(data); - if (res.data.code === '200') { - state.workData = JSON.parse(JSON.stringify(res.data.data)); - state.workData = state.workData.map((item) => { - if (item.operators == null || item.operators == []) { - item.operators = []; - } else { - item.operators = Array.from(item.operators, ({ operatorUname }) => operatorUname); - } - return item; - }); - state.totalSize1 = res.data.total; - } else { - ElMessage({ - type: 'warning', - message: res.data.msg - }); - } - }; - - // 表格数据格式化 - const toNames = (row, column, cellValue, index) => { - if (row.list == []) { - return []; - } else { - const nameList = []; - for (let i = 0; i < row.list.length; i++) { - for (let t = 0; t < state.workTimeList.length; t++) { - if (row.list[i] == state.workTimeList[t].id) { - nameList.push(state.workTimeList[t].name); - } - } - } - return nameList.join(); - } - }; + // const getListByPage = async () => { + // const dateRange = JSON.parse(JSON.stringify(state.searchDate)) + // if(dateRange[1]){dateRange[1] = dateRange[1].replace('00:00:00','23:59:59')} + // const data = { pageSize: state.pageSize1, pageIndex: state.pageIndex1, searchParams: { workType: state.searchWord, applyDepId: state.searchDep,applyStartTime: dateRange[0],applyEndTime: dateRange[1]} }; + // let res = await workApplyApi().getApplyList(data); + // if (res.data.code === '200') { + // state.workData = JSON.parse(JSON.stringify(res.data.data)); + // state.workData = state.workData.map((item) => { + // if (item.operators == null || item.operators == []) { + // item.operators = []; + // } else { + // item.operators = Array.from(item.operators, ({ operatorUname }) => operatorUname); + // } + // return item; + // }); + // state.totalSize1 = res.data.total; + // } else { + // ElMessage({ + // type: 'warning', + // message: res.data.msg + // }); + // } + // }; // 关键词查询记录 const searchRecord = async () => { - if (state.searchWord == null && state.searchStatus == null && state.searchDep == null && state.searchDate == []) { - ElMessage({ - type: 'warning', - message: '请输入查询关键词' - }); - } else { - getListByPage(); - } + getMydepList() }; // 重置搜索 const clearSearch = async () => { - state.searchWord = null; - state.searchDep = null; + state.searchParams = { + workType:null, + workDepId:null, + workPermitNo: '', + startTime: '', + endTime: '', + workStatus: null, + acceptStatus: null, + workAnalysisStatus: null + } state.searchDate = [] - getListByPage(); + getMydepList() }; - const handleSizeChange1 = (val: number) => { - state.pageSize1 = val; - getListByPage(); + const handleSizeChange = (val: number) => { + state.pageSize = val; + getMydepList() }; - const handleCurrentChange1 = (val: number) => { - state.pageIndex1 = val; - getListByPage(); + const handleCurrentChange = (val: number) => { + state.pageIndex = val; + getMydepList() }; // 查看记录 @@ -834,7 +942,7 @@ 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; + return state.workTypeList.find((i: { id: number }) => i.id === Number(item))?.name; }); } if(state.details.workDetail.involvedDepIds == '' || !state.details.workDetail.involvedDepIds){ @@ -903,19 +1011,23 @@ zyfb, slfx, zyqs, + changeTime1, + changeDep1, + changeDep2, + changeType2, + changeDep3, toFullscreen, handleReview, openVideo, submitReview, reLoadData, toApply, - toNames, searchRecord, clearSearch, viewRecord, - getListByPage, - handleSizeChange1, - handleCurrentChange1, + // getListByPage, + handleSizeChange, + handleCurrentChange, ...toRefs(state) }; } @@ -942,7 +1054,7 @@ line-height: 34px; top: 80px; right: 20px; - z-index: 99999; + z-index: 9; } .demo-tabs { @@ -1389,26 +1501,38 @@ .full{ position:fixed; - background: #fff; - border-radius: 17px; + background: rgba(0,0,0,.2); + border: 1px solid rgba(54, 252, 252, .6); + border-radius: 17px 1px 1px 17px; box-shadow: 3px 3px 12px rgba(0,0,0,.2); - height: 34px; - line-height: 34px; - top: 0; - right: 20px; + height: 32px; + line-height: 30px; + top: 10px; + right: 2px; + display: flex; + justify-content: center; + backdrop-filter: blur(2px); z-index: 99999; } .topChart{ .chart-item{ border-radius: 4px; - background: rgba(8, 109, 209, 0.2); - border: 1px solid rgba(54, 252, 252, .6); + background: rgba(0, 61, 121, 0.2); backdrop-filter: blur(5px); position: relative; z-index: 2; &:last-of-type{ position: relative; z-index: 1; + } + + .item-bg{ + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: -1; } .el-radio.is-bordered.is-checked{ border-color: #11FEEE !important; @@ -1494,11 +1618,18 @@ } .homeCard{ border-radius: 4px; - background: rgba(8, 109, 209, 0.2); - border: 1px solid rgba(54, 252, 252, .6); + background: rgba(0, 61, 121, 0.2); backdrop-filter: blur(5px); position: relative; z-index: 3; + .item-bg{ + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + z-index: -1; + } .el-row{ &>div{ &>span{ -- Gitblit v1.9.2