itsm-whlg/wechat/assets/views/customform/tpl/processincident.html

<style>
    .iconfontPadding {
        padding-top: 10px;
    }
    
    a:focus,
    a:hover {
        /* color: red; */
        /* font-weight: bolder; */
        text-decoration: none;
    }
    
    .iconfontColor {
        color: #006bc0 !important;
        /* font-weight: bolder; */
    }
    /* .titleStyle {
        background: #d9edf7 !important;
        margin-top: 1.3rem !important;
        margin-bottom: 0.7rem !important;
        border-left: 0.4rem solid #006bc0;
        height: 3rem;
        line-height: 3rem;
        font-size: 1.4rem;
        color: #606367;
        padding: 0;
        padding-left: 1rem;
    }
    
    .titledetail {
        background: #f5f5f5;
        height: 3rem;
        font-size: 1.4rem;
        color: #606367;
        padding: 0;
        padding-left: 1rem;
    }
     */
    
    .timepost {
        margin-left: 1rem;
        padding-top: 2.5rem;
        position: absolute;
    }
    
    .timepostlast {
        margin-left: 1rem;
        padding-top: 0rem;
        position: absolute;
    }
    
    timeline-panel {
        background-color: #fff;
        float: left;
        padding-top: 2.3rem;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
        border: 0px solid #d4d4d4;
        border-radius: 0px;
        position: static;
        -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.175);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0.175);
    }
    
    .timelinepanellast {
        background-color: #fff;
        float: left;
        padding-top: 0rem;
        padding-bottom: 0px;
        padding-left: 0px;
        padding-right: 0px;
        border: 0px solid #d4d4d4;
        border-radius: 0px;
        position: static;
        -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.175);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0.175);
    }
    
    .timeline-event.timeline-inverted {
        min-height: 4rem;
        margin-bottom: 0px;
    }
    
    timeline-badge {
        box-shadow: 0 0 0 4px white, 0 3px 0 4px white;
        color: #4A90E2;
        width: 1.4rem;
        height: 1.4rem;
        left: 4.3rem;
        top: 2.5rem;
        line-height: 1.4rem;
        font-size: 1.4em;
        text-align: center;
        position: absolute;
        background-color: #fff;
        z-index: 100;
        border-top-right-radius: 50%;
        border-top-left-radius: 50%;
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
    }
    
    .timelinebadge {
        box-shadow: 0 0 0 4px white, 0 3px 0 4px white;
        color: #4A90E2;
        width: 1.4rem;
        height: 1.4rem;
        left: 4.3rem;
        top: 0rem;
        line-height: 1.4rem;
        font-size: 1.4em;
        text-align: center;
        position: absolute;
        background-color: #fff;
        z-index: 100;
        border-top-right-radius: 50%;
        border-top-left-radius: 50%;
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
    }
    
    timeline-badge.info.timeline-hidden {
        background-color: #fff !important;
    }
    
    timeline-panel:before {
        position: absolute;
        top: 35px;
        right: -15px;
        display: inline-block;
        border-top: 0px solid transparent !important;
        border-left: 0px solid #ccc !important;
        border-right: 0 solid #ccc !important;
        border-bottom: 0px solid transparent !important;
        content: " ";
    }
    
    .timeline:before {
        top: 0;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 1px;
        background-color: #cccccc;
        left: 5rem;
        /* margin-left: -1.5px; */
    }
    
    .shoujibord {
        position: absolute;
        top: 0;
        right: 0;
        height: 1px;
        -webkit-transition: -webkit-transform 0.4s;
        -moz-transition: -moz-transform 0.4s;
        transition: transform 0.4s;
        bottom: 0;
        height: 3.2rem;
        border-color: #f5f5f5;
        border-left-style: solid;
        border-width: 1px;
        vertical-align: middle;
    }
    
    td {
        padding: 0.7rem;
        background-color: rgba(0, 0, 0, 0);
        vertical-align: middle;
    }
    
    p {
        margin: 0 !important;
    }
    
    .text-muted {
        color: #888;
    }
    
    table {
        border-spacing: 0;
        border-collapse: inherit !important;
    }
    
    .pitt {
        width: 6rem;
        height: 6rem;
        padding: 5px;
    }
    
    .bot {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 10;
        width: 100%;
        background-color: #f5f5f5;
        height: 6rem;
        line-height: 6rem;
        text-align: center
    }
    
    .bot input {
        width: 90%;
        border-radius: 4px;
        border: 0;
        background-color: #006bc0;
        color: white;
        height: 3.5rem;
        font-size: 16px;
    }
    
    .fot {
        height: 3rem;
        width: 100%;
        float: left;
    }
</style>
<timeline class="paddingall">
    <timeline-event ng-repeat="event in events" side="{{side}}">
        <timeline-badge class="{{event.badgeClass}}  timeline-hidden" ng-class="{timelinebadge:event.activityName == ' 结束 '}" when-visible="animateElementIn" when-not-visible="animateElementOut">
            <i class="glyphicon {{event.badgeIconClass}}"></i>
        </timeline-badge>
        <timeline-title class="{{event.titleClass}} timeline-hidden timepost fz-14" ng-class="{timepostlast:event.activityName == ' 结束 '}" when-visible="animateElementIn" when-not-visible="animateElementOut">
            {{event.title}}
        </timeline-title>
        <timeline-panel class="{{event.badgeClass}} timeline-hidden fz-12" ng-class="{timelinepanellast:event.activityName == ' 结束 '}" when-visible="animateElementIn" when-not-visible="animateElementOut">
            <timeline-heading class="font-color-six">
                <p ng-if="event.when">
                    <small class="fz-12 font-color-gray"><i class="glyphicon glyphicon-time"></i>{{event.when}}</small>
                </p>
                <p ng-class="{telephone:event.title=='处理'}">{{event.content}}</p>
            </timeline-heading>
        </timeline-panel>
    </timeline-event>
</timeline>