时间轴-流程样式

时间轴垂直

/** 时间轴垂直 **/
.timeline {
    position: relative;
    display: grid;
    gap: 20px;
    padding: 0;
    max-width: 600px;
    font-size: 12px;
    line-height: 1;
    list-style-type: none;
}

.timeline.displayNone {
    display: none;
}

.timeline h4 {
    font-size: 12px;
}

.timeline .timeline__line {
    position: absolute;
    top: 0;
    left: 7px;
    width: 2px;
    height: 100%;
    background: #ccc;
}

.timeline .timeline__item .info {
    display: grid;
    grid-template-columns: repeat(3, auto) 1fr;
    align-items: center;
    gap: 0.3rem;
}

.timeline .timeline__item .info h4 {
    margin: 0;
}

.timeline .timeline__item .info a {
    text-decoration: none;
    color: #3498db;
}

.timeline .timeline__item .info .dot {
    position: relative;
    width: 16px;
    height: 16px;
    background: #999;
    border-radius: 50%;
}

.timeline .timeline__item .info .dot::before {
    position: absolute;
    content: '';
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
}

.timeline .timeline__item .info .dot::after {
    position: absolute;
    content: '';
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    border: 4px solid #fff;
    border-radius: inherit;
}

.timeline .timeline__item .info .title {
    color: #999;
    margin-left: 5px;
}

.timeline .timeline__item .info .time {
    margin-right: 8px;
}

.timeline .timeline__item .content {
    margin: 10px 0 0 3em;
    line-height: 1.5;
}

                <ul class="timeline">
                    <li class='timeline__line'></li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>创建离职单</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'>人事管理完成</h4>
                        </div>
                        <div class='content text-gray'>在人事管理模块创建离职单，并复制链接给离职员工</div>
                    </li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>离职申请单填写</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'>离职人完成</h4>
                        </div>
                        <div class='content text-gray'>离职人完成离职原因等信息填写，并完成申请人签字，系统通知部门负责人签字</div>
                    </li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>部门负责人签字</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'>人事组织构架设置部门负责人完成</h4>
                        </div>
                        <div class='content text-gray'>由人事组织构架中设置的部门负责人完成对接后签字确认，系统通知财务负责人签字</div>
                    </li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>财务签字确认</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'>设置确认人：</h4>
                        </div>
                        <div class='content text-gray'>财务完成相关手续、并签字确认，系统通知人事负责人签字</div>
                    </li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>人事签字确认</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'>设置确认人：</h4>
                        </div>
                        <div class='content text-gray'>人事完成离职单相关信息填写、并签字确认，系统通知离职人签字确认</div>
                    </li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>本人签字确认</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'>离职人完成</h4>
                        </div>
                        <div class='content text-gray'>离职人完成签字确认</div>
                    </li>
                    <li class='timeline__item'>
                        <div class='info'>
                            <div class='dot'></div>
                            <time class='time'>流程完成</time>
                            <h4 class='speaker'></h4>
                            <h4 class='title'></h4>
                        </div>
                        <div class='content text-gray'></div>
                    </li>
                </ul>

横向流程步骤样式

.step-list {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}
.step-list .li{
    position: relative;
    text-align: center;
}
.step-list .li:before,.step-list .li:after{
    position: absolute;
    display: block;
    content: '';
    height: 1px;
    width: calc(50% - 20px);
    background-color: #ccc;
    top: 20px;
}
.step-list .li:after{right: 0;}
.step-list .li:first-child:before,.step-list .li:last-child:after{display: none;}
.step-list .li.success:before,.step-list .li.success:after{background-color: #5cb85c;    }
.step-list .li.error:before,.step-list .li.error:after{background-color: #ff423d}
.step-list .li a{color: #02a7f0; text-decoration: none;}
.step-list .li .circle{
    background: linear-gradient( to bottom, #81d9ff, #38bcfa);
    color: #fff;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}
.step-list .li.success{color: #418841;    }
.step-list .li.success .circle{background: linear-gradient(to bottom, #87d787, #5cb85c); color: #fff;}
.step-list .li .text{padding:6px 0;}
.step-list .li.error{color: #ff423d;    }
.step-list .li.error .circle{background: linear-gradient( to bottom, #ff5d59, #ff423d); color: #fff}
.step-list .li.disabled{color: #ccc}
.step-list .li.disabled .circle{background: linear-gradient( to bottom, #e8e8e8, #e8e8e8); color: #ccc}

<div class="step-list" style="margin-top: 30px;">
                            <div class="li success" style="width: 14.285714285714%;">
                                            <div class="circle fa fa-check"></div><div class="text">已提交需求</div>
                                    </div>
                            <div class="li success" style="width: 14.285714285714%;">
                                            <div class="circle fa fa-check"></div><div class="text">已付定金</div>
                                    </div>
                            <div class="li " style="width: 14.285714285714%;">
                                            <a href="javascript:;" class="" onclick="setPlanStatus('63398','6')" title="标记为已定策划">
                            <div class="circle fa fa-pencil"></div><div class="text">已定策划(进行中)</div>
                        </a>
                                    </div>
                            <div class="li disabled" style="width: 14.285714285714%;">
                                            <div class="circle fa fa-ban"></div><div class="text">已付预付</div>
                                    </div>
                            <div class="li disabled" style="width: 14.285714285714%;">
                                            <div class="circle fa fa-ban"></div><div class="text">准备好求婚</div>
                                    </div>
                            <div class="li disabled" style="width: 14.285714285714%;">
                                            <div class="circle fa fa-ban"></div><div class="text">已付尾款</div>
                                    </div>
                            <div class="li disabled" style="width: 14.285714285714%;">
                                            <div class="circle fa fa-ban"></div><div class="text">已完成</div>
                                    </div>
                    </div>

版权属于：Joyber

本文链接：https://blog.qqvbc.com/default/1186.html

转载时须注明出处及本声明