<template>
    <div class="model-flow">
        <el-row class="row-1">            
                <div class="card-item">
                    <div class="title-text">算法上传</div>
                    <el-badge :value="0" class="item">
                    <div class="div-img">
                        <img class="img-150" src="./flow/suanfashangchuan.png" />
                    </div>                    
                    </el-badge>
                </div>            
                <div class="line line-right">                  
                </div>            
                <div class="card-item is-active" >
                    <div class="title-text">算子检查</div>
                    <el-badge :value="10" class="item">
                    <div class="div-img">
                    <img class="img-150" src="./flow/suanzijiancha.png" />
                   
                    </div>
                </el-badge>
                </div>
            
                <div class="line line-right">
                </div>
            
                <div class="card-item" >
                    <div class="title-text">编译部署</div>
                    <el-badge :value="0" class="item">
                    <div class="div-img">
                    <img class="img-150" src="./flow/bybs.png" />
                   
                    </div>
                </el-badge>
                </div>
                <div class="line line-right">
                </div>
                <div class="card-item">
                    <div class="title-text">推理评估</div>
                    <el-badge :value="0" class="item">
                    <div class="div-img">
                    <img class="img-150" src="./flow/tlpg.png" />
                    </div>
                </el-badge>
                </div>
            
                <div class="line line-right">
                </div>
            
                <div class="card-item">
                    <div class="title-text">评估报告</div>
                    <el-badge :value="0" class="item">
                    <div class="div-img">
                    <img class="img-150" src="./flow/pgbg.png" />
                    </div>
                </el-badge>
                </div>            

        </el-row>       
        <el-row class="row-3">
            
                <div class="card-item line-top">
                    <el-badge :value="0" class="item">
                    <div class="div-img">
                        <img class="img-120" src="./flow/szgl.png" />                    
                    </div>
                    </el-badge>
                        <div class="title-text">算子管理</div>
                    
                </div>
                <div class="line"></div>
            
                <div class="card-item" >
                </div>
                <div class="line"></div>
                <div class="card-item card-center">
                    <div class="card-center-item">
                        <el-badge :value="0" class="item">
                    <div class="div-img">
                    <img class="img-120" src="./flow/sbgl.png" />
                    </div>
                </el-badge>
                        <div class="title-text">设备管理</div>
                    </div>
                    <div class="card-center-item">
                        <el-badge :value="0" class="item">
                    <div class="div-img">
                    <img class="img-120" src="./flow/gjgl.png" />
                    </div>
                </el-badge>
                    <div class="title-text">工具管理</div>
                    </div>
                </div>
                <div class="line"></div>
                <div class="card-item" ></div>
                <div class="line"></div>
                <div class="card-item  line-top">
                    <el-badge :value="0" class="item">
                    <div class="div-img">
                    <img class="img-120" src="./flow/sjjgl.png" />
                    </div>
                </el-badge>
                        <div class="title-text">数据管理</div>
                    
                </div>


        </el-row>
    </div>
</template>

<script lang='ts' setup>
</script>
<style lang='scss'>
@media screen and (max-width:1440px) {
    .model-flow {
        padding-left:10px;
    }    
}
@media screen and (min-width:1440px) {
    .model-flow {
        padding-left:60px;
    }    
}
.model-flow {
    .row-1 {
        .title-text {
             margin-bottom: 10px;
            }
        .line{
            position: relative;
            width:calc(20% - 120px);
            &::before{
                display: inline-block;
                height: 1px;
                content: " ";
                width:calc(100% - 30px);
                border-top:dotted 2px #3399ff;
                position: relative;
                top:40%;
                left:10px;                
            }
            &::after{
                display: inline-block;
                content:" ";
                background-image: url('./flow/arrow.png');
                width:6px;
                height:6px;
                position: relative;
                top:calc(40% + 2px);
                right:-10px;
            }
        }      
    }
   
    .row-3{
        margin-top:60px;
        .line{
            position: relative;
            width:calc(20% - 120px);
            text-align: center;
            img{
                position: relative;
                top:30px;
            }
        }
        .title-text{
            margin-top:10px;
        }
        .card-center{
            position: relative;
            width:120px;
            .card-center-item{
                position:absolute;
                width: 120px;
                top:24px;
                z-index: 9;
                &:first-child{
                    left: -90px;
                    &::after{
                        display:inline-block;
                        content:" ";
                        background-image: url('./flow/line1.png');
                        width: 72px;
                        height: 40px;
                        position: relative;
                        top:-175px;
                        left:60px;
                    }
                    &::before{
                        display: inline-block;
                        content: " ";
                        height: 25px;
                        width: 2px;
                        border-left:dotted 1px #3399ff;
                        position:absolute;
                        top:-32px;
                        left:60px;
                    }
                }
                &:last-child{
                    left: 90px;
                    &::after{
                        display:inline-block;
                        content:" ";
                        background-image: url('./flow/line2.png');
                        width: 72px;
                        height: 40px;
                        position: relative;
                        top:-175px;
                        left:-10px;
                    }
                    &::before{
                        display: inline-block;
                        content: " ";
                        height: 25px;
                        width: 2px;
                        border-left:dotted 1px #3399ff;
                        position:absolute;
                        top:-32px;
                        left:61px;
                    }
                }
            }
        }
        .card-item{
            &.line-top{
                &::after{
                    display: inline-block;
                    content:" ";
                    border-left:dotted 2px #3399ff;
                    height: 60px;
                    position: relative;
                    top:-170px;
                    left:60px;
                }
                &::before{
                    display: inline-block;
                    content:" ";
                    background-image: url('./flow/arrow.png');
                    transform: rotate(-90deg);
                    width:6px;
                    height:6px;
                    position: relative;
                    top:-61px;
                    left:58px;
                }
            }
        }
    }

    .card-item {
        width: 120px; 
        .el-badge__content{
                display: none;
            }
        &.is-active{
            .div-img{                      
                background: #3399ff;
                box-shadow: var(--el-box-shadow-light);
                &:hover{
                    background: #3399ff88;                    
                }
            }
            .el-badge__content{
                display: inline-block;
            }
        }
        .title-text{
            text-align: center;
            font-weight: bold;
            font-size: 14px;
        }
        .el-badge{
            width: auto;
            display: block;
        }
        .div-img{                      
            background: #fff;
            text-align: center;
            padding:10px 0px 0px;
            border-radius: 8px;           
            &:hover{
                box-shadow: var(--el-box-shadow-light);
            }
            img {
                &.img-150 {
                    width: 80px;
                    height: 44px;
                }
                &.img-120{
                    width: 80px;
                    height: 55px;
                }
            }
        }
    }
}
</style>