@showtree:~`'showtree'`;
@hidetree:~`'hidetree'`;
@showtable:~`'showtable'`;
@hidetable:~`'hidetable'`;

.main{
    height: 100%;
    display: flex;
    .left{
        width:245px;
        background: #ECEEF3;
        height:100%;
        display: flex;
        .paneltree{
            width:230px;
            background: #ECEEF3;
            height:100%;
        }
        .bar{
            width:15px;
            height:100%;
            background-color: #f0f2f5;
        }
        :global{
            .centerinfo-tree .centerinfo-tree-treenode{
                white-space: nowrap;
            }
            .react-contexify{
                min-width: 120px;
            }
        }
    }
    .middle{
        width:15px;
        height:100%;
        background-color: #f0f2f5;
        position: relative;
        .point{
            display: -webkit-flex;
            display: flex;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-align-items: center;
            align-items: center;
            left: 0;
            right: 0;
            background: #f2f5fc;
            position: absolute;
            top: calc(50% - 40px);
            font-size: 14px;
            width: 12px;
            height: 80px;
            border-radius: 0 12px 12px 0;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            cursor: pointer;
        }
    }
    .right{
        width:calc(100% - 245px);
        height:100%;
        position: relative;
        // padding-left: 20px;
        .actionbar{
            width:15px;
            height:100%;
            position:absolute;
            .point{
                display: -webkit-flex;
                display: flex;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-align-items: center;
                align-items: center;
                left: 0;
                right: 0;
                background: #f2f5fc;
                position: absolute;
                top: calc(50% - 40px);
                font-size: 14px;
                width: 12px;
                height: 80px;
                border-radius: 0 12px 12px 0;
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
                cursor: pointer;
            }
        }
        .catalog{
            height:123px;
            padding:20px 15px;
            .topmessage{
                display: flex;
                align-items: center;
                justify-content: space-between;
                color:#5b5b5b;
                height: 100%;
                .message{
                    width:100%;
                    height:82px;
                    overflow: hidden;
                }
                .count{
                    width:200px;
                    display: flex;
                    color:#5b5b5b;
                    align-items: center;
                    justify-content: center;
                    >img{
                        width: 53px;
                        height: 53px;
                    }
                    .countnum{
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        margin-left: 10px;
                        >div:nth-child(1){
                            box-sizing: border-box
                        }
                        >div:nth-child(2){
                            margin-top: -9px;
                            font-size: 25px;
                            font-weight: bold;
                            box-sizing: border-box
                        }
                    }
                }
            }
        }
        .middle{
            height:15px;
            background-color: #f0f2f5;
            width: 100%;
        }
        .metamain{
            height:calc(100% - 138px);
            overflow: hidden;
            padding-left: 3px;
        }
        :global{
            .centerinfo-table-thead > tr > th {
                padding: 8px 8px !important;
            }
              
            .centerinfo-table-tbody > tr > td  {
                padding: 12px 8px !important;
            }
              
            .centerinfo-table-tbody > .centerinfo-table-measure-row > td  {
                padding: 0px !important;
            }
              
            .centerinfo-table-tbody > tr .centerinfo-table-row-selected > td {
                background: #fff !important;
            }
              
            tr.centerinfo-table-expanded-row > td {
                background: #fff !important;
            }
              
            .centerinfo-table-thead > tr > th {
                background-color: #F2F5FC !important;
            }
        }
    }
    .showtrees{
        width:100%;
        overflow: hidden;
        animation:@showtree .3s ease-in forwards;
    }
    .hidetrees{
        width:0;
        overflow: hidden;
        animation:@hidetree .3s ease-in forwards;
    }
    .showtables{
        width:100%;
        overflow: hidden;
        animation:@showtable .3s ease-in forwards;
    }
    .hidetables{
        width:0;
        overflow: hidden;
        animation:@hidetable .3s ease-in forwards;
    }
    :global{
        @keyframes @showtree {
            0% {
                width:0px
            }
            100% {
                width:245px
            }
        }
        @keyframes @hidetree {
            0% {
                width:245px;
            }
            100% {
                width:0px;
            }
        }
        @keyframes @showtable {
            0% {
                width:calc(100% - 245px);
            }
            100% {
                width:calc(100% - 20px);
            }
        }
        @keyframes @hidetable {
            0% {
                width:calc(100% - 20px);
            }
            100% {
                width:calc(100% - 245px);
            }
        }
    }
}

.lefttreepanel{
    height: 100%;
    background-color: #fff;
    .lefttree{
        border-bottom:1px solid #EFEFEF;
        padding: 0 12px;
        height:45px;
        align-items: center;
        display: flex;
    }
    
    .treebody{
        height: calc(100% - 46px);
        overflow: auto;
        padding:12px;
    }
}

.inputpanel{
    border-bottom:1px solid #EFEFEF;
    padding:12px;
    >div{
        height: 32px;
    }
}

.maintable{
    height:calc(100% - 100px);
    padding:12px
}

.mainpage{
    text-align: center;
}
