|
@ -26,7 +26,6 @@ |
|
|
|
|
|
|
|
|
</el-row> --> |
|
|
</el-row> --> |
|
|
<el-row> |
|
|
<el-row> |
|
|
|
|
|
|
|
|
<el-col :span="24"> |
|
|
<el-col :span="24"> |
|
|
项目进度:<Progress :size="15" :percent="activities[0]?.totalPercent"></Progress> |
|
|
项目进度:<Progress :size="15" :percent="activities[0]?.totalPercent"></Progress> |
|
|
</el-col> |
|
|
</el-col> |
|
@ -34,25 +33,33 @@ |
|
|
<el-row> |
|
|
<el-row> |
|
|
<el-col :span="24"> |
|
|
<el-col :span="24"> |
|
|
<el-steps finish-status="success" :active="activities.status"> |
|
|
<el-steps finish-status="success" :active="activities.status"> |
|
|
<el-step v-for="(item, index) in activities" :key="index" :status="item.isfinish == 2 ? 'success' : 'wait'"> |
|
|
<el-step |
|
|
|
|
|
v-for="(item, index) in activities" |
|
|
|
|
|
:key="index" |
|
|
|
|
|
:status="item.isfinish == 2 ? 'success' : 'wait'" |
|
|
|
|
|
> |
|
|
<template #title> |
|
|
<template #title> |
|
|
<div> |
|
|
<div> |
|
|
{{ item.taskName }} |
|
|
{{ item.taskName }} |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<div> |
|
|
{{ item.scheduledStartTime + "--" + item.scheduledEndTime }} |
|
|
{{ item.scheduledStartTime + '--' + item.scheduledEndTime }} |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
<template #description> |
|
|
<template #description> |
|
|
<elstepchild v-if="item.children != null" :child="item.children"></elstepchild> |
|
|
<elstepchild v-if="item.children != null" :child="item.children"></elstepchild> |
|
|
</template> |
|
|
</template> |
|
|
<template #icon> |
|
|
<template #icon> |
|
|
<Progress type="circle" :percent="item.percent" :size="40" :status="item.progressStatus"></Progress> |
|
|
<Progress |
|
|
|
|
|
type="circle" |
|
|
|
|
|
:percent="item.percent" |
|
|
|
|
|
:size="40" |
|
|
|
|
|
:status="item.progressStatus" |
|
|
|
|
|
></Progress> |
|
|
</template> |
|
|
</template> |
|
|
</el-step> |
|
|
</el-step> |
|
|
</el-steps> |
|
|
</el-steps> |
|
|
</el-col> |
|
|
</el-col> |
|
|
|
|
|
|
|
|
</el-row> |
|
|
</el-row> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
@ -63,274 +70,302 @@ |
|
|
<TableAction :actions="getTableAction(record)" /> |
|
|
<TableAction :actions="getTableAction(record)" /> |
|
|
</template> |
|
|
</template> |
|
|
<template #tableTitle> |
|
|
<template #tableTitle> |
|
|
<el-button type="primary" @click="handledownload" v-if="isShowByRoles('manageOrg,supervisor')">下载</el-button> |
|
|
<el-button type="primary" @click="handledownload" v-if="isShowByRoles('manageOrg,supervisor')" |
|
|
|
|
|
>下载</el-button |
|
|
|
|
|
> |
|
|
</template> |
|
|
</template> |
|
|
</BasicTable> |
|
|
</BasicTable> |
|
|
<div v-if="dataTo.projectStage == 4"> |
|
|
<div v-if="dataTo.projectStage == 4"> |
|
|
<ApprovalDetails :projectid="projectId" stage="createPlaninfo" /> |
|
|
<ApprovalDetails :projectid="projectId" stage="createPlaninfo" /> |
|
|
</div> |
|
|
</div> |
|
|
<BasicModal @register="registeruploadFile" title="上传文件" width="1200px" :showOkBtn="false" :showCancelBtn="false"> |
|
|
<BasicModal |
|
|
<addPlanFile :type="type" :planinfoid="planinfoid" :files="fileArr" @close="closePlanFileModal()" /> |
|
|
@register="registeruploadFile" |
|
|
|
|
|
title="上传文件" |
|
|
|
|
|
width="1200px" |
|
|
|
|
|
:showOkBtn="false" |
|
|
|
|
|
:showCancelBtn="false" |
|
|
|
|
|
> |
|
|
|
|
|
<addPlanFile |
|
|
|
|
|
:type="type" |
|
|
|
|
|
:planinfoid="planinfoid" |
|
|
|
|
|
:files="fileArr" |
|
|
|
|
|
@close="closePlanFileModal()" |
|
|
|
|
|
/> |
|
|
</BasicModal> |
|
|
</BasicModal> |
|
|
<planinfoFileDetail @register="registerFileInfo" /> |
|
|
<planinfoFileDetail @register="registerFileInfo" /> |
|
|
<BasicModal @register="registerplanFileApproval" title="文件审批" width="1200px" :showOkBtn="false" |
|
|
<BasicModal |
|
|
:showCancelBtn="false"> |
|
|
@register="registerplanFileApproval" |
|
|
|
|
|
title="文件审批" |
|
|
|
|
|
width="1200px" |
|
|
|
|
|
:showOkBtn="false" |
|
|
|
|
|
:showCancelBtn="false" |
|
|
|
|
|
> |
|
|
<planFileApproval :record="recordData" @close="closeplanFile" /> |
|
|
<planFileApproval :record="recordData" @close="closeplanFile" /> |
|
|
</BasicModal> |
|
|
</BasicModal> |
|
|
<uploadURTfile @register="registerUnitedTechnicalReview" @close="closePlanFileModal" /> |
|
|
<uploadURTfile @register="registerUnitedTechnicalReview" @close="closePlanFileModal" /> |
|
|
|
|
|
|
|
|
</template> |
|
|
</template> |
|
|
<script lang="ts" name="viewPlanDetail" setup> |
|
|
<script lang="ts" name="viewPlanDetail" setup> |
|
|
import { ref, onMounted } from 'vue' |
|
|
import { ref, onMounted } from 'vue'; |
|
|
import elstepchild from './elstepchild.vue' |
|
|
import elstepchild from './elstepchild.vue'; |
|
|
import addPlanFile from './addPlanFile.vue' |
|
|
import addPlanFile from './addPlanFile.vue'; |
|
|
import planinfoFileDetail from './planinfoFileDetail.vue' |
|
|
import planinfoFileDetail from './planinfoFileDetail.vue'; |
|
|
import { Progress,message } from 'ant-design-vue'; |
|
|
import { Progress, message } from 'ant-design-vue'; |
|
|
import { BasicModal } from '@/components/Modal'; |
|
|
import { BasicModal } from '@/components/Modal'; |
|
|
import { PlaninfoColumn } from './projectPlan.data'; |
|
|
import { PlaninfoColumn } from './projectPlan.data'; |
|
|
import { queryPlanInfoMainTimeline, getPlanFileApprovalInfoByPlaninfoId, planUploadFile, downloadPlanInfo } from './projectPlan.api' |
|
|
import { |
|
|
import { ActionItem, BasicTable, TableAction, useTable } from '@/components/Table'; |
|
|
queryPlanInfoMainTimeline, |
|
|
import { useModal } from '@/components/Modal'; |
|
|
getPlanFileApprovalInfoByPlaninfoId, |
|
|
import ApprovalDetails from "../../ProcessApprovalSubPage/component/ApprovalDetails.vue" |
|
|
planUploadFile, |
|
|
import planFileApproval from '@/views/ProcessApprovalSubPage/planFileApproval.vue' |
|
|
downloadPlanInfo, |
|
|
import { isShowByRoles } from '../../projectLib/projectInfo/projectInfo.api'; |
|
|
} from './projectPlan.api'; |
|
|
import uploadURTfile from "@/views/projectLib/projectPlan/uploadURTfile.vue" |
|
|
import { ActionItem, BasicTable, TableAction, useTable } from '@/components/Table'; |
|
|
|
|
|
import { useModal } from '@/components/Modal'; |
|
|
let dataTo = defineProps(["projectId", "projectStage"]) |
|
|
import ApprovalDetails from '../../ProcessApprovalSubPage/component/ApprovalDetails.vue'; |
|
|
let projectId = ref(dataTo.projectId) |
|
|
import planFileApproval from '@/views/ProcessApprovalSubPage/planFileApproval.vue'; |
|
|
let isfinish = ref() |
|
|
import { isShowByRoles } from '../../projectLib/projectInfo/projectInfo.api'; |
|
|
let activities = ref([]) |
|
|
import uploadURTfile from '@/views/projectLib/projectPlan/uploadURTfile.vue'; |
|
|
let type = ref(1) |
|
|
|
|
|
let fileArr = ref([]) |
|
|
let dataTo = defineProps(['projectId', 'projectStage']); |
|
|
let planinfoid = ref() |
|
|
let projectId = ref(dataTo.projectId); |
|
|
let taskName = ref() |
|
|
let isfinish = ref(); |
|
|
let recordData = ref({}) |
|
|
let activities = ref([]); |
|
|
const [registeruploadFile, { openModal: openPlanFile, closeModal: closePlanFile }] = useModal();//文件上传和查看 |
|
|
let type = ref(1); |
|
|
const [registerplanFileApproval, { openModal: openplanFileApproval, closeModal: closeplanFileApproval }] = useModal();//文件上传和查看 |
|
|
let fileArr = ref([]); |
|
|
const [registerFileInfo, { openModal: openFileInfo }] = useModal();//文件上传和查看 |
|
|
let planinfoid = ref(); |
|
|
const [registerUnitedTechnicalReview, { openModal:openUnitedTechnicalReviewmode,closeModal:closeUnitedTechnicalReviewmode}] = useModal();//新增修改周月报页面 |
|
|
let taskName = ref(); |
|
|
|
|
|
let recordData = ref({}); |
|
|
onMounted(() => { |
|
|
const [registeruploadFile, { openModal: openPlanFile, closeModal: closePlanFile }] = useModal(); //文件上传和查看 |
|
|
queryPlanInfoMainTimeline({ |
|
|
const [ |
|
|
projectid: dataTo.projectId |
|
|
registerplanFileApproval, |
|
|
}).then(res => { |
|
|
{ openModal: openplanFileApproval, closeModal: closeplanFileApproval }, |
|
|
activities.value = res |
|
|
] = useModal(); //文件上传和查看 |
|
|
console.log("activities", activities) |
|
|
const [registerFileInfo, { openModal: openFileInfo }] = useModal(); //文件上传和查看 |
|
|
}) |
|
|
const [ |
|
|
console.log("projectid1111111111", activities, dataTo.projectId) |
|
|
registerUnitedTechnicalReview, |
|
|
|
|
|
{ openModal: openUnitedTechnicalReviewmode, closeModal: closeUnitedTechnicalReviewmode }, |
|
|
}) |
|
|
] = useModal(); //新增修改周月报页面 |
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
|
|
queryPlanInfoMainTimeline({ |
|
|
// 项目入库审批table |
|
|
projectid: dataTo.projectId, |
|
|
const [registerTable, { reload,getDataSource }] = useTable({ |
|
|
}).then((res) => { |
|
|
size: 'small',//紧凑型表格 |
|
|
activities.value = res; |
|
|
title: '项目计划阶段详情', |
|
|
console.log('activities', activities); |
|
|
api: queryPlanInfoMainTimeline, |
|
|
}); |
|
|
columns: PlaninfoColumn, |
|
|
console.log('projectid1111111111', activities, dataTo.projectId); |
|
|
// showActionColumn: true, |
|
|
}); |
|
|
rowKey: "taskName", |
|
|
|
|
|
showIndexColumn: false, |
|
|
// 项目入库审批table |
|
|
useSearchForm: false, |
|
|
const [registerTable, { reload, getDataSource }] = useTable({ |
|
|
actionColumn: { |
|
|
size: 'small', //紧凑型表格 |
|
|
width: 140, |
|
|
title: '项目计划阶段详情', |
|
|
title: '操作', |
|
|
api: queryPlanInfoMainTimeline, |
|
|
dataIndex: 'action', |
|
|
columns: PlaninfoColumn, |
|
|
slots: { customRender: 'action' }, |
|
|
// showActionColumn: true, |
|
|
}, |
|
|
rowKey: 'taskName', |
|
|
beforeFetch(params) { |
|
|
showIndexColumn: false, |
|
|
params.projectid = projectId.value; |
|
|
useSearchForm: false, |
|
|
}, |
|
|
actionColumn: { |
|
|
}); |
|
|
width: 140, |
|
|
|
|
|
title: '操作', |
|
|
function getTableAction(record): ActionItem[] { |
|
|
dataIndex: 'action', |
|
|
if (dataTo.projectStage == 4) { |
|
|
slots: { customRender: 'action' }, |
|
|
return [] |
|
|
}, |
|
|
} |
|
|
beforeFetch(params) { |
|
|
return [ |
|
|
params.projectid = projectId.value; |
|
|
{ |
|
|
|
|
|
label: '详情', |
|
|
|
|
|
ifShow: () => { |
|
|
|
|
|
if (record.isfinish >= 1) { |
|
|
|
|
|
return true |
|
|
|
|
|
} |
|
|
|
|
|
return false |
|
|
|
|
|
}, |
|
|
|
|
|
onClick: handleDetail.bind(null, record), |
|
|
|
|
|
}, |
|
|
}, |
|
|
{ |
|
|
}); |
|
|
label: '上传资料', |
|
|
|
|
|
ifShow: () => { |
|
|
function getTableAction(record): ActionItem[] { |
|
|
if (record.isfinish == 0 && record.taskFile?.length > 0) { |
|
|
if (dataTo.projectStage == 4) { |
|
|
if (isShowByRoles('projectContact')) { |
|
|
return []; |
|
|
return true |
|
|
} |
|
|
|
|
|
return [ |
|
|
|
|
|
{ |
|
|
|
|
|
label: '详情', |
|
|
|
|
|
ifShow: () => { |
|
|
|
|
|
if (record.isfinish >= 1) { |
|
|
|
|
|
return true; |
|
|
} |
|
|
} |
|
|
return false |
|
|
return false; |
|
|
} |
|
|
}, |
|
|
return false |
|
|
onClick: handleDetail.bind(null, record), |
|
|
}, |
|
|
}, |
|
|
onClick: handleuploadfile.bind(null, record) |
|
|
{ |
|
|
}, |
|
|
label: '上传资料', |
|
|
{ |
|
|
ifShow: () => { |
|
|
label: '完成', |
|
|
if ( |
|
|
ifShow: () => { |
|
|
record.isfinish == 0 && |
|
|
if (record.isfinish == 0 && record.children == null && record.taskFile?.length == 0) {//归档流程中不允许修改 |
|
|
record.taskFile?.length > 0 && |
|
|
if (isShowByRoles('projectContact')) { |
|
|
record.taskName != '可研技术审查报告确认' && |
|
|
return true |
|
|
record.taskName != '造价评估报告确认' |
|
|
|
|
|
) { |
|
|
|
|
|
if (isShowByRoles('projectContact')) { |
|
|
|
|
|
return true; |
|
|
|
|
|
} |
|
|
|
|
|
return false; |
|
|
} |
|
|
} |
|
|
return false |
|
|
return false; |
|
|
} |
|
|
}, |
|
|
return false |
|
|
onClick: handleuploadfile.bind(null, record), |
|
|
}, |
|
|
}, |
|
|
// onClick: handleModifyuploadfile.bind(null, record) |
|
|
{ |
|
|
popConfirm: { |
|
|
label: '完成', |
|
|
title: '确定完成该阶段吗?', |
|
|
ifShow: () => { |
|
|
confirm: handlefinish.bind(null, record), |
|
|
if (record.isfinish == 0 && record.children == null && record.taskFile?.length == 0) { |
|
|
|
|
|
//归档流程中不允许修改 |
|
|
|
|
|
if (isShowByRoles('projectContact')) { |
|
|
|
|
|
return true; |
|
|
|
|
|
} |
|
|
|
|
|
return false; |
|
|
|
|
|
} |
|
|
|
|
|
return false; |
|
|
|
|
|
}, |
|
|
|
|
|
// onClick: handleModifyuploadfile.bind(null, record) |
|
|
|
|
|
popConfirm: { |
|
|
|
|
|
title: '确定完成该阶段吗?', |
|
|
|
|
|
confirm: handlefinish.bind(null, record), |
|
|
|
|
|
}, |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
]; |
|
|
]; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function handleDetail(record) { |
|
|
|
|
|
|
|
|
|
|
|
openFileInfo(true, { planinfoid: record.id, taskName: record.taskName, isfinish: record.isfinish }) |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
function handleDetail(record) { |
|
|
async function handleuploadfile(record) { |
|
|
openFileInfo(true, { |
|
|
type.value = record.isfinish |
|
|
planinfoid: record.id, |
|
|
fileArr = record.taskFile.split(",") |
|
|
taskName: record.taskName, |
|
|
planinfoid.value = record.id |
|
|
isfinish: record.isfinish, |
|
|
let tableData = await getDataSource() |
|
|
}); |
|
|
console.log("tableData",tableData) |
|
|
} |
|
|
//项目立项阶段 |
|
|
async function handleuploadfile(record) { |
|
|
for(let i = 0;i<tableData[0].children.length;i++) |
|
|
type.value = record.isfinish; |
|
|
{ |
|
|
fileArr = record.taskFile.split(','); |
|
|
let child=tableData[0].children[i] |
|
|
planinfoid.value = record.id; |
|
|
//得到当前计划 |
|
|
let tableData = await getDataSource(); |
|
|
if(child.id==record.id){ |
|
|
console.log('tableData', tableData); |
|
|
//获取上一个计划 |
|
|
//项目立项阶段先后顺序限制取消 |
|
|
let pre=tableData[0].children[i-1] |
|
|
// for (let i = 0; i < tableData[0].children.length; i++) { |
|
|
if(pre.isfinish!=2){ |
|
|
// let child = tableData[0].children[i]; |
|
|
message.error("请先完成【"+pre.taskName+"】") |
|
|
// //得到当前计划 |
|
|
return |
|
|
// if (child.id == record.id) { |
|
|
|
|
|
// //获取上一个计划 |
|
|
|
|
|
// let pre = tableData[0].children[i - 1]; |
|
|
|
|
|
// if (pre.isfinish != 2) { |
|
|
|
|
|
// message.error('请先完成【' + pre.taskName + '】'); |
|
|
|
|
|
// return; |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
|
|
|
// } |
|
|
|
|
|
if (record.taskName == '联合技术审查') { |
|
|
|
|
|
openUnitedTechnicalReviewmode(true, { planinfoid: record.id }); |
|
|
|
|
|
} else { |
|
|
|
|
|
openPlanFile(); |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
async function handlefinish(record) { |
|
|
if(record.taskName=="联合技术审查"){ |
|
|
let params = { |
|
|
openUnitedTechnicalReviewmode(true,{planinfoid:record.id}) |
|
|
planinfoid: record.id, |
|
|
}else{ |
|
|
}; |
|
|
openPlanFile() |
|
|
await planUploadFile(params); |
|
|
|
|
|
reload(); |
|
|
} |
|
|
} |
|
|
} |
|
|
async function handleModifyuploadfile(record) { |
|
|
async function handlefinish(record) { |
|
|
//更加record.id获取当前阶段的流程信息。返回流程信息,然后打开文件上传弹窗 |
|
|
let params = { |
|
|
let res = await getPlanFileApprovalInfoByPlaninfoId({ planinfoid: record.id }); |
|
|
planinfoid: record.id, |
|
|
if (res.isEdit == 1) { |
|
|
|
|
|
recordData.value = res; |
|
|
|
|
|
openplanFileApproval(); |
|
|
|
|
|
} |
|
|
|
|
|
record.id; |
|
|
} |
|
|
} |
|
|
await planUploadFile(params) |
|
|
function closeplanFile() { |
|
|
reload() |
|
|
closeplanFileApproval(); |
|
|
|
|
|
reload(); |
|
|
} |
|
|
} |
|
|
async function handleModifyuploadfile(record) { |
|
|
function closePlanFileModal() { |
|
|
//更加record.id获取当前阶段的流程信息。返回流程信息,然后打开文件上传弹窗 |
|
|
closePlanFile(); |
|
|
let res = await getPlanFileApprovalInfoByPlaninfoId({ planinfoid: record.id }) |
|
|
closeUnitedTechnicalReviewmode(); |
|
|
if (res.isEdit == 1) { |
|
|
reload(); |
|
|
recordData.value = res |
|
|
queryPlanInfoMainTimeline({ |
|
|
openplanFileApproval() |
|
|
projectid: dataTo.projectId, |
|
|
|
|
|
}).then((res) => { |
|
|
|
|
|
activities.value = res; |
|
|
|
|
|
console.log('activities', activities); |
|
|
|
|
|
}); |
|
|
|
|
|
} |
|
|
|
|
|
async function handledownload() { |
|
|
|
|
|
//下载 |
|
|
|
|
|
await downloadPlanInfo({ projectid: dataTo.projectId }); |
|
|
} |
|
|
} |
|
|
record.id |
|
|
|
|
|
} |
|
|
|
|
|
function closeplanFile() { |
|
|
|
|
|
closeplanFileApproval() |
|
|
|
|
|
reload() |
|
|
|
|
|
} |
|
|
|
|
|
function closePlanFileModal() { |
|
|
|
|
|
closePlanFile() |
|
|
|
|
|
closeUnitedTechnicalReviewmode() |
|
|
|
|
|
reload() |
|
|
|
|
|
queryPlanInfoMainTimeline({ |
|
|
|
|
|
projectid: dataTo.projectId |
|
|
|
|
|
}).then(res => { |
|
|
|
|
|
activities.value = res |
|
|
|
|
|
console.log("activities", activities) |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
async function handledownload() { |
|
|
|
|
|
//下载 |
|
|
|
|
|
await downloadPlanInfo({ projectid: dataTo.projectId }); |
|
|
|
|
|
} |
|
|
|
|
|
</script> |
|
|
</script> |
|
|
<style scoped> |
|
|
<style scoped> |
|
|
.timeline { |
|
|
.timeline { |
|
|
display: flex; |
|
|
display: flex; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
margin-bottom: 100px; |
|
|
margin-bottom: 100px; |
|
|
|
|
|
|
|
|
.lineitem { |
|
|
.lineitem { |
|
|
transform: translateX(50%); |
|
|
transform: translateX(50%); |
|
|
width: 25%; |
|
|
width: 25%; |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
:deep(.el-timeline-item__tail) { |
|
|
|
|
|
border-left: none; |
|
|
|
|
|
border-top: 2px solid #e4e7ed; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 9px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
:deep(.el-timeline-item__wrapper) { |
|
|
|
|
|
padding-left: 0; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 20px; |
|
|
|
|
|
transform: translateX(-50%); |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
:deep(.el-timeline-item__timestamp) { |
|
|
:deep(.el-timeline-item__tail) { |
|
|
font-size: 14px; |
|
|
border-left: none; |
|
|
|
|
|
border-top: 2px solid #e4e7ed; |
|
|
} |
|
|
width: 100%; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 9px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.el-row { |
|
|
:deep(.el-timeline-item__wrapper) { |
|
|
margin-bottom: 25px; |
|
|
padding-left: 0; |
|
|
margin-top: 25px; |
|
|
position: absolute; |
|
|
|
|
|
top: 20px; |
|
|
|
|
|
transform: translateX(-50%); |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
} |
|
|
:deep(.el-timeline-item__timestamp) { |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.componentA { |
|
|
.el-row { |
|
|
position: absolute; |
|
|
margin-bottom: 25px; |
|
|
z-index: 1; |
|
|
margin-top: 25px; |
|
|
/* 设置较低的z-index值 */ |
|
|
} |
|
|
/* 其他样式 */ |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.componentB { |
|
|
.componentA { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
z-index: 2; |
|
|
z-index: 1; |
|
|
/* 设置较高的z-index值 */ |
|
|
/* 设置较低的z-index值 */ |
|
|
/* 其他样式 */ |
|
|
/* 其他样式 */ |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.custom-content { |
|
|
.componentB { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
z-index: 2; |
|
|
transform: translateX(-50%); |
|
|
/* 设置较高的z-index值 */ |
|
|
transition: left 0.3s; |
|
|
/* 其他样式 */ |
|
|
z-index: 3; |
|
|
} |
|
|
margin-top: 20px; |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
.custom-content { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 0; |
|
|
|
|
|
transform: translateX(-50%); |
|
|
|
|
|
transition: left 0.3s; |
|
|
|
|
|
z-index: 3; |
|
|
|
|
|
margin-top: 20px; |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
.italicize { |
|
|
.italicize { |
|
|
/* transform: skew(15deg); 使用 transform 属性进行倾斜 */ |
|
|
/* transform: skew(15deg); 使用 transform 属性进行倾斜 */ |
|
|
transform: rotate(-45deg); |
|
|
transform: rotate(-45deg); |
|
|
display: inline-block; |
|
|
display: inline-block; |
|
|
/* 需要将元素设为块级元素才能应用transform属性 */ |
|
|
/* 需要将元素设为块级元素才能应用transform属性 */ |
|
|
z-index: 4; |
|
|
z-index: 4; |
|
|
margin-top: -20px; |
|
|
margin-top: -20px; |
|
|
color: #ea1212; |
|
|
color: #ea1212; |
|
|
font-size: large; |
|
|
font-size: large; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</style> |