来由：项目用的是iview组件库进行开发的，但是它的时间轴组件无法满足项目复杂需求，所有特意自定义这个新的流程图组件
注意：所有图标来自阿里云iconfont图标库

效果图：
在这里插入图片描述

  1. 页面
<!-- 自定义流程图 -->
<div class="new-approval-map">
    <h2 class="map-title">审批进度</h2>
    <div class="map-node">
        <div class="map-left-line">
            <span title="宫本武藏" class="line-name">{{'宫本武'.substring(0,2)}}</span>
            <span class="line-complete-icon"><i class="icon2_ icon2_gou complete-icon"></i></span>
            <!-- <i class="icon2_ icon2_shenpiguanli line-icon"></i> -->
        </div>
        <div class="map-right-content">
            <div class="item-cell">
                <div class="item-label">
                    <span class="label-name">发起申请</span>
                    <span class="label-time">2021-4-30 13:54:44</span>
                </div>
                <div class="item-node">
                    <span title="李四撒大苏" :class="['node-name', 'active']">李四撒大苏</span>
                    <span class="is-complete-icon"><i class="icon2_ icon2_gou complete-icon"></i></span>
                    <span :class="['node-status']"></span>
                </div>
                <div class="item-status-content">送到佛山东方红石佛店还是山大佛还是</div>
            </div>
        </div>
    </div>
    <div class="map-node">
        <div class="map-left-line">
            <!-- <span title="后羿" class="line-name">后羿</span> -->
            <i class="icon2_ icon2_workflow-center line-icon"></i>
            <span class="line-complete-icon"><i class="icon2_ icon2_gou complete-icon"></i></span>
        </div>
        <div class="map-right-content">
            <div class="item-cell">
                <div class="item-label">
                    <span class="label-name">审批人</span>
                    <span class="label-time">2021-4-30 13:54:44</span>
                </div>
                <div class="item-node">
                    <span :class="['node-name', 'active']">李四</span>
                    <span class="is-complete-icon"><i class="icon2_ icon2_gou complete-icon"></i></span>
                    <span :class="['node-status','agree']">已审批</span>
                </div>
                <div class="item-status-content">送到佛山东方红石佛店还是山大佛还是</div>
            </div>
        </div>
    </div>
    <div class="map-node">
        <div :class="['map-left-line', 'send']">
            <!-- <span title="后羿" class="line-name">后羿</span> -->
            <i class="icon2_ icon2_faqishenpi line-icon"></i>
        </div>
        <div class="map-right-content">
            <div class="item-cell">
                <div class="item-label">
                    <span class="label-name">抄送人</span>
                    <span class="label-time">2021-4-30 13:54:44</span>
                </div>
                <div class="item-node">
                    <span :class="['node-name', 'active']">李四</span>
                    <span :class="['node-status','pend']">待审批</span>
                </div>
                <div class="item-status-content">送到佛山东方红石佛店还是山大佛还是</div>
            </div>
        </div>
    </div>
</div>
  1. css代码（less文件）
.new-approval-map{
    .map-title{
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin-bottom: 20px;
    }
    .map-node{
         display: flex;
         position: relative;
         .map-left-line{
             width: 40px;
             height: 40px;
             border-radius: 50%;
             background-color: #2d8cf0;
             font-size: 8px;
             color: #fff;
             text-align: center;
             line-height: 40px;
             // overflow: hidden;
             // position: relative;
             .line-name{
                 font-size: 12px;
             }
             .line-icon{
                 font-size: 22px;
             }
             .line-complete-icon{
                 display: block;
                 width: 16px;
                 height: 16px;
                 border-radius: 50%;
                 text-align: center;
                 line-height: 16px;
                 background-color: #3fba73;
                 position: absolute;
                 left: 25px;
                 top: 25px;
                 .complete-icon{
                     color: #fff;
                 }
             }
             &.send{
                background-color: #FFBA02; 
             }
             // 自定义流程虚线
             &::before{
                 content: '';
                 display: block;
                 width: 2px;
                 height: 100%;
                 background-color: #CDCDCD;
                 z-index: -1;
                 position: absolute;
                 left: 18px;
                 top: 0px;
             }
         }
         &:last-child{
             .map-left-line{
                 &::before{
                     display: none;
                 }
             }
         }
         .map-right-content{
             position: relative;
             width: 100%;
             margin: 12px 0 0 17px;
             .item-cell{
                 position: relative;
                 top: -22px;
                 left: 10px;
                 background-color: #fff;
                 border-radius: 6px;
                 padding: 12px 16px;
                 box-shadow: 1px 1px 4px #93c1f3;
                 .item-label{
                     line-height: 1;
                     display: flex;
                     justify-content: space-between;
                     .label-name{
                         font-size: 15px;
                         font-weight: bold;
                         color: #333;
                     }
                     .label-time{
                         font-size: 13px;
                         font-weight: bold;
                         color: #B9B9B9;
                         .label-status{
                             padding: 0 10px;
                         }
                     }
                 }
                 .item-node{
                     display: flex;
                     align-items: center;
                     margin: 10px 0;
                     .node-name{
                         width: 30px;
                         height: 30px;
                         border-radius: 50%;
                         background-color: #2d8cf0;
                         font-size: 8px;
                         color: #fff;
                         text-align: center;
                         line-height: 30px;
                         overflow: hidden;
                         position: relative;
                     }
                     .is-complete-icon{
                         display: block;
                         width: 16px;
                         height: 16px;
                         border-radius: 50%;
                         text-align: center;
                         line-height: 16px;
                         background-color: #3fba73;
                         position: absolute;
                         left: 35px;
                         top: 55px;
                         .complete-icon{
                             color: #fff;
                         }
                     }
                     .node-status{
                         color: #666;
                         padding-left: 10px;
                         &.agree{
                             // 同意样式
                             color: #3fba73;
                         }
                         &.reject{
                             // 拒绝样式
                             color: #E76060;
                         }
                         &.pend{
                             // 待审批样式
                             color: #fa795e;
                         }
                         &.recall{
                             // 撤回
                             color: orange;
                         }
                         &.send{
                             // chaoso
                             color: #2d8cf0;
                         }
                     }
                 }
                 .item-status-content{
                     line-height: 1.5;
                 }
                 &::before{
                     content: '';
                     width: 0;
                     height: 0;
                     border-top: 10px solid transparent;
                     border-right: 12px solid #edf6ff;
                     border-bottom: 11px solid transparent;
                     position: absolute;
                     left: -13px;
                     top: 20px;
                 }
             }
         }
     }
 }
# html # css # less
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架，具有简洁的语法和丰富的组件库，可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支：2 个月前 )
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891 Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区