<template>
    <section class="homeRTBoardtop">
        <div class="top"><strong>信息化先行一步，朝着智能化的方向发展</strong><i><img src="~@/assets/images/RTImgs/boardiconbgb.png"></i></div>
        <div class="listBoardUL">
            <li>
                <span><i></i><em>项目总数</em></span>
                <span><strong>141</strong></span>
            </li>
            <li class="lineright secondwidth">
                <span><i class="iconBlue"></i><em>2022年度总投资（万元）</em></span>
                <span><strong>81019.21</strong></span>                
            </li>
            <li>
                <span><i class="icongreen"></i><em>集团总部项目</em></span>
                <span><strong class="txtgreen">46</strong></span>
            </li>
            <li class="lineright">
                <span><i class="iconred"></i><em>子公司项目</em></span>
                <span><strong class="txtred">95</strong></span>
            </li>
            <li>
                <span><i class="iconyellow"></i><em>新建项目</em></span>
                <span><strong class="txtyellow">91</strong></span>
            </li>
            <li>
                <span><i class="icongreen"></i><em>续建项目</em></span>
                <span><strong class="txtgreen">50</strong></span>
            </li>
        </div>
    </section>
</template>
<script>
export default {
    
}
</script>
<style lang="scss">
.homeRTBoardtop{
    background: #FFFFFF;
    box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    height: 193px;
    .top{
        height: 81px;
        background: #0F71FF;
        border-radius: 8px 8px 0px 0px;
        display: flex;
        align-items: center;
        position: relative;
        i{
            position: absolute;
            right: 0;
            top: 9px;
        }
        strong{
            font-weight: 500;
            color: #FFFFFF;
            font-size: 24px;
            margin-left:24px;
        }
    }
    .listBoardUL{
        display: flex;
        li{
            display: flex;
            flex-direction: column;
            width: 16%;
            margin-left:2%;   
            // margin-right: 5%;
            margin-top:24px;   
            &.lineright{
                border-right: 1px solid rgba(0,0,0,0.06);
            }
            &.secondwidth{
                width: 20%;
            }
            span{
                text-align: left; 
                margin-bottom: 4px;
                display: flex;
                align-items: center;
                i{margin-left:-10px;margin-right:10px;width: 6px; height:6px;background: #fff;border-radius: 50%;}
                em{font-size: 14px;color: #000;opacity: 0.65;}
                strong{color: #0F71FF;font-size: 30px;font-weight: normal;margin-left:5px;}
                .iconBlue{background: #0F71FF;}
                .icongreen{background: #52C41A;}
                .iconred{background: #F5222D;}
                .iconyellow{background: #FF7946;}
                .txtgreen{color:#52C41A;}
                .txtred{color:#F5222D;}
                .txtyellow{color:#FF7946;}
            }

            
        }
    }
}    
</style>