byte-sailing-new/src/views/process/processApproval.vue

<template>
    <div class="processApproval">
        <div class="left-card">
            <div class="commons-title title">
                流程标题
            </div>
            <div class="">
                <p>流程内容</p>
                <p>流程内容</p>
                <p>流程内容</p>
                <p>流程内容</p>
                <p>流程内容</p>
                <p>流程内容</p>
                <p>流程内容</p>
                <p>流程内容</p>
            </div>
        </div>
        <div class="right-card">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="审批记录" name="first">
                    <ul class="flow-chart">
                        <li>
                            <div class="left-icon">
                                <i class="iconfont icon-iconm_daick"></i>
                                <i class="iconfont icon-iconm_daohzj  right-btm-status"></i>
                            </div>
                            <div class="right-conetnt">
                                <div class="name">
                                    发起人:张三
                                    <span>2022-11-11 00:00:00</span>
                                </div>
                                
                                <div class="remark">
                                    <div class="label">
                                        发起审批
                                        
                                    </div>
                                    1231231231231321231
                                </div>
                            </div>
                            <div class="line"></div>
                        </li>
                        <li>
                            <div class="left-icon">
                                <i class="iconfont icon-iconm_daick"></i>
                                <i class="iconfont icon-iconm_daohzj right-btm-status"></i>
                            </div>
                            <div class="right-conetnt">
                                <div class="name">
                                    发起人:张三
                                    <span>2022-11-11 00:00:00</span>
                                </div>
                                
                                <div class="remark">
                                    <div class="label">
                                        发起审批
                                    </div>
                                    
                                    <div>啊圣诞快乐家里快速打击啊老师的煎熬老师的煎熬上来看大家速度快垃圾上单绿卡数据的卡拉数据的卡拉设计的拉开时间</div>
                                </div>
                            </div>
                            <div class="line"></div>
                        </li>
                        <li>
                            <div class="left-icon">
                                <i class="iconfont icon-iconm_daick"></i>
                                <i class="iconfont icon-iconm_daohzj right-btm-status"></i>
                            </div>
                            <div class="right-conetnt">
                                <div class="name">
                                    发起人:张三
                                    <span>2022-11-11 00:00:00</span>
                                </div>
                                
                                <div class="remark">
                                    <div class="label">
                                        发起审批
                                    </div>
                                    
                                    <div>啊圣诞快乐家里快速打击啊老师的煎熬老师的煎熬上来看大家速度快垃圾上单绿卡数据的卡拉数据的卡拉设计的拉开时间</div>
                                </div>
                            </div>
                            <div class="line"></div>
                        </li>
                        <li>
                            <div class="left-icon">
                                <i class="iconfont icon-iconm_daick"></i>
                                <i class="iconfont icon-iconm_daohzj right-btm-status"></i>
                            </div>
                            <div class="right-conetnt">
                                <div class="name">
                                    发起人:张三
                                    <span>2022-11-11 00:00:00</span>
                                </div>
                                
                                <div class="remark">
                                    <div class="label">
                                        发起审批
                                    </div>
                                    
                                    <div>啊圣诞快乐家里快速打击啊老师的煎熬老师的煎熬上来看大家速度快垃圾上单绿卡数据的卡拉数据的卡拉设计的拉开时间</div>
                                </div>
                            </div>
                            <div class="line"></div>
                        </li>
                        <li>
                            <div class="left-icon">
                                <i class="iconfont icon-iconm_daick"></i>
                                <i class="iconfont icon-iconm_daohzj right-btm-status"></i>
                            </div>
                            <div class="right-conetnt">
                                <div class="name">
                                    发起人:张三
                                    <span>2022-11-11 00:00:00</span>
                                </div>
                                
                                <div class="remark">
                                    <div class="label">
                                        发起审批
                                    </div>
                                    
                                    <div>啊圣诞快乐家里快速打击啊老师的煎熬老师的煎熬上来看大家速度快垃圾上单绿卡数据的卡拉数据的卡拉设计的拉开时间</div>
                                </div>
                            </div>
                            <div class="line"></div>
                        </li>
                    </ul>
                </el-tab-pane>
                <el-tab-pane label="决策辅助" name="second">决策辅助</el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.processApproval {
    display: flex;
    justify-content: space-between;
    margin-top:20px;
    padding: 0 20px;
    .left-card{
        background: #FFF;
        border-radius: 4px;
        padding: 20px;
        flex:1;
        margin-right: 20px;
    }
    .right-card{
        background: #FFF;
        border-radius: 4px;
        padding: 0 20px 20px;
        width: 600px;
        box-sizing: border-box;
        .flow-chart{
            padding: 0;
            margin: 0;
            li{
                margin: 0;
                padding: 0 0 20px;
                list-style: none;
                display: flex;
                justify-content: space-between;
                position: relative;
                .right-conetnt{
                    flex: 1;
                    .name{
                        font-size: 12px;
                        color:#333;
                        margin-bottom: 10px;
                        span{
                            color: #999;
                            float: right;
                        }
                    }
                    .remark{
                        padding: 10px;
                        color: #666666;
                        font-size: 12px;
                        background: #f1f1f1;
                        border-radius: 2px;
                        .label{
                            color: #39C55A;
                            margin-bottom: 10px;
                        }
                    }
                }
                .left-icon{
                    width: 40px;
                    height: 40px;
                    text-align: center;
                    line-height: 40px;
                    background: #0084FF;
                    border-radius: 10px;
                    color: #fff;
                    font-size: 20px;
                    position: relative;
                    margin-right:27px ;
                    z-index: 2;
                    .right-btm-status{
                        position: absolute;
                        bottom: 0px;
                        right: -10px;
                        height: 20px;
                        width: 20px;
                        line-height: 16px;
                        border-radius: 10px;
                        background: #39C55A;
                        border:2px solid #fff;
                        font-size: 12px;
                        box-sizing: border-box;
                    }
                }
            }
            li::before{
                content: '';
                position: absolute;
                top: 0;
                left: 20px;
                width: 2px;
                height: 100%;
                background: #ddd;
                z-index: 1;
            }
            li:last-child::before{
                display: none;
            }
            
        }
    }
}
</style>
<script setup>
import { ref, reactive, computed, watch, onMounted, onUnmounted, nextTick, defineEmits, defineExpose } from 'vue'
const activeName = ref('first')
const handleClick = (tab, event) => {
    console.log(tab, event);
}
</script>