bonus
/
Zlpt_Portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

进度条横向

This commit is contained in:
13218645326 2023-12-06 09:50:03 +08:00
parent 79c5923f3a
commit e398689720
1 changed files with 86 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
src/views/user/orderManagement/orderCom/timeLineHorizontal.vue
View File

@ -1,107 +1,115 @@
<template>
<div class="processBox">
<div class="title">工程进度</div>
<el-divider />
<div class="timelineProcessBox">
<el-timeline class="timeline">
<el-timeline-item
class="lineitem"
:class="item.done ? 'active' : 'inactive'"
v-for="(item, index) in activities"
:key="index"
:timestamp="item.time"
>
<div>
{{ item.content }}
</div>
</el-timeline-item>
</el-timeline>
</div>
<div class="title">工程进度</div>
<el-divider />
<div class="timelineProcessBox">
<el-timeline class="timeline" >
<el-timeline-item class="lineitem" :class="item.done ? 'active' : 'inactive'"
v-for="(item, index) in props.timeLineList" :key="index" :timestamp="item.content">
<div>
{{ item.title }}
</div>
</el-timeline-item>
</el-timeline>
</div>
</div>
</template>
<script lang="ts" setup>
const activities = [
{
content: '开工阶段',
time: '2018-04-12 20:46',
people: '五六七',
done: true,
</template>
<script lang="ts" setup>
const props = defineProps({
themeColor:{
type:String,
default:'#2282fe'
},
{
content: '实施阶段',
people: '吉吉国王',
done: true,
time: '2018-04-03 20:46',
},
{
content: '竣工阶段',
done: false,
people: '熊大',
time: '2018-04-03 20:46',
},
{
content: '结算阶段',
people: '',
done: false,
time: '',
},
]
</script>
<style lang="scss" scoped>
timeLineList: {
type: Array,
default: () => {
return [
{
title: '订单需求审核',
content: '开工阶段',
done: true,
},
{
title: '合同上传',
content: '请填写公司详细信息',
done: true,
},
{
title: '装备发货',
content: '请填写公司财务信息',
done: true,
},
]
}
}
})
.processBox {
</script>
<style lang="scss" scoped>
.processBox {
background-color: #fff;
height: 210px;
.title {
font-size: 16px;
font-weight: 600;
padding-left: 32px;
padding-top: 16px;
font-size: 16px;
font-weight: 600;
padding-left: 32px;
padding-top: 16px;
}
.timelineProcessBox {
.timeline {
display: flex;
width: 95%;
margin: 40px auto;
.lineitem {
transform: translateX(50%);
width: 25%;
.timeline {
display: flex;
width: 95%;
margin: 40px auto;
.lineitem {
transform: translateX(50%);
width: 25%;
}
}
}
}
}
:deep(.el-timeline-item__tail) {
}
:deep(.el-timeline-item__tail) {
border-left: none;
border-top: 2px solid #e4e7ed;
width: 100%;
position: absolute;
top: 6px;
}
:deep(.el-timeline-item__wrapper) {
}
: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__timestamp) {
font-size: 14px;
}
.active {
border: none!important;
font-weight: normal;
}
.active {
border: none !important;
:deep(.el-timeline-item__node) {
background-color: $main-color;
// background-color: $main-color;
}
:deep(.el-timeline-item__tail) {
border-color: $main-color;
// border-color: $main-color;
}
}
// 有active样式的下一个li
.active + li {
}
// 有active样式的下一个li
.active+li {
:deep(.el-timeline-item__node) {
background-color: $main-color;
// background-color: $main-color;
}
}
</style>
}
</style>