Foshan4A4.0/src/views/gateway/interface-add/serverconfiguration/serverconfiguration.scss

.bf-serverconfiguration{
    // width: 98.7%;
    height: 540px;
    background: #FFFFFF;
    box-shadow: 0px 6px 7px 0px rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    margin-top: 24px;
    >.serverconfiguration_header{
        width: 100%;
        height: 88px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        padding: 0 32px 0 32px;
        >.left{
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            >p{
                font-size: 24px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #303133;
                margin-top: 0;
                margin-bottom: 0;
            }
        }
        >.right{
            width: 50%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            >.relation_server{
                height: 32px;
                // border: 1px solid #E4E8F0;
                // border-radius: 16px;
                // padding: 0 23px 0 23px;
                // font-size: 16px;
                // font-family: Microsoft YaHei;
                // font-weight: bold;
                // color: #303133;
                // display: flex;
                // align-items: center;
                // justify-content: center;
                // cursor: pointer;
                margin-right: 16px;
            }
            >.add_server{
                height: 32px;
                // border: 1px solid #E4E8F0;
                // border-radius: 16px;
                // padding: 0 23px 0 23px;
                // font-size: 16px;
                // font-family: Microsoft YaHei;
                // font-weight: bold;
                // color: #303133;
                // display: flex;
                // align-items: center;
                // justify-content: center;
                // cursor: pointer;
            }
        }
    }
    >.listheader{
        width: 100%;
        height: 64px;
        border-radius: 8px;
        padding: 0 32px 0 32px;
        >ul{
            width: 100%;
            height: 100%;
            display: flex;
            background: #4A678E;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
            >li{
                width: 25%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: flex-start;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #FFFFFF;
                padding-left: 47px;
            }
        }
    }
    >.content{
        width: 100%;
        height: 320px;
        padding: 0 32px 0 32px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        >.el-scrollbar{
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
            >.el-scrollbar__wrap{
                overflow-x: hidden;
                ul{
                    width: 100%;
                    height: 64px;
                    display: flex;
                    margin: 0;
                    >li{
                        width: 25%;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: flex-start;
                        font-size: 16px;
                        font-family: Microsoft YaHei;
                        font-weight: 400;
                        color: #303133;
                        padding-left: 47px;
                        >.edit{
                            // padding: 0 16px 0 16px;
                            height: 32px;
                            // background: #303133;
                            // border-radius: 16px;
                            // display: flex;
                            // align-items: center;
                            // justify-content: center;
                            // font-size: 16px;
                            // font-family: Microsoft YaHei;
                            // font-weight: 400;
                            // color: #FFFFFF;
                            margin-right: 41px;
                            // cursor: pointer;
                        }
                        >.deleter{
                            // padding: 0 16px 0 16px;
                            height: 32px;
                            // border: 1px solid #F56C6C;
                            // border-radius: 16px;
                            // display: flex;
                            // align-items: center;
                            // justify-content: center;
                            // font-size: 16px;
                            // font-family: Microsoft YaHei;
                            // font-weight: 400;
                            // color: #F56C6C;
                            // cursor: pointer;
                        }
                    }
                }
                ul:nth-child(odd){
                    background: #f6f7fb;
                }
                ul:nth-child(even){
                    background: #E3E8EF;
                }
            }
        }
    }
}