weui 时间轴改造成审批节点意见显示

由于工作需要，网上找了一些都需要什么下载积分，最后决定自己改造下，基本改造可以使用，希望对大家有所帮助。

声明我是居于weui 做的，首先得引入weui

样式文件：如下

<style type="text/css">
        body{
            background-color:#f5f3f3
        }
        .content-wg {
            border: 1px solid #ffffff;
            border-radius: 5px 5px 5px 5px;
            background-color:#fbfafa;
            margin-top:5px;
            margin-left:20px;
            padding:0px;
        }
        .appuser {
            text-align: right;
            padding: 0 15px 0 0;
            color:#ccc8c8;
            font-size:12px;
           
        }
        .appusername{
            color:#000000;
        }
        .flownode {
            border-bottom: solid 1px #e6e0e0;
            padding-left:5px;
            border-radius: 5px 5px 0 0;
            font-size: 16px;
         
        }
        .appyijian {
            padding: 5px 8px 5px 8px;
            font-size: 14px;
          
        }
    </style>

html:

<div class="timeline">
    <ul>
        <li class="timeline-item">
            <div class="timeline-item-color timeline-item-head-first"><i
                    class="timeline-item-checked   weui-icon-success-no-circle"></i>
            </div>
            <div class="timeline-item-tail" ></div>
            <div class="timeline-item-content content-wg">
                <div class="recent flownode">
                   广东
                </div>
                <div class="appyijian">同意</div>
                <div class="appuser"><div class="appusername">张家辉1</div><div>2021-0001</div></div>
           
         
            </div>
        </li>
        <li class="timeline-item">
            <div class="timeline-item-color timeline-item-head"></div>
            <div class="timeline-item-tail" ></div>
            <div class="timeline-item-content content-wg">
                <div class="recent flownode">
                    广东
                </div>
                <div class="appyijian">同意</div>
                <div class="appuser"><div class="appusername">张家辉2</div><div>2021-0001</div></div>


            </div>
        </li>
        <li class="timeline-item">
            <div class="timeline-item-color timeline-item-head"></div>
            <div class="timeline-item-tail hide" ></div>
            <div class="timeline-item-content content-wg">
                <div class="recent flownode">
                    广东
                </div>
                <div class="appyijian">同意</div>
                <div class="appuser"><div class="appusername">张家辉3</div><div>2021-0001</div></div>


            </div>
        </li>
    </ul>
</div>

效果图如下：