.dv-home-box {
    height: 100%;
    display: flex;
    position: relative;
    justify-content: start;
    .dv-home-left {
        width: calc(67.72% - 16px);
        .content {
            position: relative;
            height: 100%;
            border: 1px solid rgba(0,255,252,.55);
            .top_menu {
                position: relative;
            }
        }
        .content .top_menu .top_menu_ul {
            display: flex;
            outline: none;
            list-style: none;
            height: 40px;
            padding: 0 30px;
            background-color: rgba(0,255,252,.25);
            border-bottom: 1px solid rgba(0,255,252,.25);
            .top_menu_item {
                position: relative;
                top: 1px;
                height: 35px;
                padding: 0 30px;
                margin: 0;
                width: fit-content;
                text-align: center;
                font-size: 1.1em;
                line-height: 30px;
                cursor: pointer;
                color: #00fffc;
                background-image: url(data:image/png;base64,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);
                background-size: 100% 100%;
                &:after {
                    content: "";
                    position: absolute;
                    right: 20px;
                    bottom: 0;
                    left: 20px;
                    border-bottom: 2px solid #09c;
                    transition: border-color .3s cubic-bezier(.645,.045,.355,1);
                }
                .top_menu_item_title {
                    transition: color .3s;
                }
            }
        }
        .content .top_menu .fullscreen_icon {
            position: absolute;
            right: 10px;
            top: 5px;
            font-size: 1.2em;
            cursor: pointer;
            color: hsla(0,0%,100%,.85);
            .anticon-fullscreen {
                display: inline-block;
                color: inherit;
                font-style: normal;
                line-height: 0;
                text-align: center;
                text-transform: none;
                vertical-align: -.125em;
                text-rendering: optimizeLegibility;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
            }
        }
        .content .content_layout {
            padding: 16px 16px 5px;
            height: calc(100% - 70px);
            .el-container {
                height: 100%;
                .el-aside {
                    background: url(data:image/png;base64,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);
                    background-size: 100% 100%;
                    padding-top: 32px;
                    position: relative;
                    transition: all .2s;
                    .sider_menu {
                        width: 100%;
                        .sider_menu_item {
                            display: flex;
                            flex-flow: row wrap;
                            cursor: pointer;
                            margin-top: 12px;
                            row-gap: 0;
                            transition: background-color .2s;
                            .menu_title {
                                padding: 12px 20px;
                                width: 100%;
                                color: hsla(0,0%,100%,.85);
                                font-size: 1.2em;
                                display: flex;
                                justify-content: flex-start;
                                align-items: center;
                                line-height: 1em;
                                letter-spacing: .1em;
                                transition: color .2s;
                                span {
                                    padding-left: 12px;
                                }
                            }
                            &.active, &:hover {
                                background-color: rgba(0,255,252,.3);
                                .menu_title {
                                    color: #00fffc;
                                }
                            }
                        }
                    }
                    .collapse_icon {
                        position: absolute;
                        height: 80px;
                        right: 0;
                        top: 50%;
                        cursor: pointer;
                        transform: translateY(-50%);
                        img {
                            height: 100%;
                            vertical-align: middle;
                            border-style: none;
                        }
                    }
                }
                .open_icon {
                    position: absolute;
                    height: 80px;
                    left: 0;
                    top: 50%;
                    cursor: pointer;
                    transform: translateY(-50%) rotate(180deg);
                    img {
                        height: 100%;
                        vertical-align: middle;
                        border-style: none;
                    }
                }
                .el-main {
                    flex: auto;
                    width: 0;
                    height: 100%;
                    padding: 0 0 0 16px;
                    overflow-y: auto;
                    .content_top {
                        height: 16px;
                        background-size: 100% 100%;
                        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+sAAAAUCAYAAAD1LKwYAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAXNJREFUeNrs3btKw2Ach+EvVnDwhHsXD4iig1hdFUTwTrxGR3VxsbqIJ6zX4HmQlvgPZuhSrNBDhueBt4FAlmw/krZZytvHCQAAABiGVnQRffV7QZ5qKYux7tYBAADAcGxG9ejkP2N9svgAAAAABitLneJwEy1Gq9Fjv9dOuH0AAAAwVKfRbjRtrAMAAEA1vEfX0Z6xDgAAANVxW27wNWMdAAAAquMs2olmjHUAAACoho/oMto31gEAAKA67lPx72wprRvrAAAAUB3F6/Db0ayxDgAAANXwmf54Hd5YBwAAgNF7iNrRhrEOAAAA1XEebUVz3Sez1ElZnuduDwAAAAxYMbr7cBAdRU/RS9SMnj1ZBwAAgPFYilaiqageLUSHxXljHQAAAMajUR6Lp+rdr8I3jHUAAAAYj/ny+B3ddZ831gEAAGA8XnudN9YBAABgCPJU61mp2ePSK78GDwAAACPW9Uvxy+n3u+vFd9bfygHf+hFgAPd4O7Qy1wyxAAAAAElFTkSuQmCC);
                    }
                }
            }
        }
        .content .footer_container {
            padding: 0 5px;
            .footer {
                height: 16px;
                background-size: 100% 100%;
                background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABNwAAAAcCAYAAAC6a6K3AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA9xJREFUeNrs3UuPFFUYBuDT7STGhZm4GBNdEoMiygyOAoIXTIyJtz/oz3ADJpKICujADIKCUROiLtyw8BZjJGj7fXaDRU+dnq7p9tLheZI3Q1Wdqa6pZvWmTp1eGdwsYU9kPbIc+TGyGbmWBwblngIAAAAATKdXBjezbHu55di7kWsKNwAAAACYXr8Mn2xrs+72AAAAAEA3WbgtV44tuz0AAAAA0M1SGb6z7YGWY7m/9MrvnU9qGioAAAAAd6t8wm2zcmzL7QEAAACAbrJwy9VIT0V+iPwx+vlr5Ge3BwAAAAC6yVVK2/Y/HDkeORH5vutJTSkFAAAA4G7Vz3LsVhq+i5yJvBq5320CAAAAgOn0Jxz7JrIReS1yn1sFAAAAADvrDQaDvzfaVyTdH9kXeTtyY5qTmlIKAAAAwDz1yvWZfn9QVv61a+1PMeZKGS6skE+6Lfl6AQAAAKBu2gJtK3Jv5JXIyTJczRQAAAAAFkavXF+NH4crhy8MysrWXD5niimlTcfLsKQ7VfJJvApTSgEAAACYp1mnlIaJZVsZPnB22yxTUPsdx58e/c7zvmYAAAAAFsRa6VC2zarrE24pC7d8n1vWih+3DfCEGwAAAADzNMMTblm2HaocOx+5OLbvkchLf33kdhcHZeX8jte6i8It5bTSNyJfRz4ZP6hwAwAAAGCedlm4zbNsy6fgLtQ+qDkFdbeFW8pFFN6MXB2l8QEKNwAAAADmZxeFW9eybW/kxdJeto1PO83Xre2rnHuzP8Pf+VvkROSJMmz/AAAAAOD/YFLZtlG2l22PlnrZluObZdtzZULZNigrm0szXvwvkZOR1yM3It+W0vlJOQAAAABotYuZlAcjz1SOZXk2/nq0xyIvVMbn+gWXGtvHIo9Xxm5l2Zb/6M/h7/4p8k4ZtnsP+W8AAAAAwH+ka9mW5VmtbPuo3Fm2HY3sr4zNxRRuv99tlne4jXswciCyx3cLAAAAwBy8desJtyne4da1bMvy7Fhl/NnIZ43tZyNPVsbmeTfmtWgCAAAAAPyjpizcnoo8XTk2Pi005ZoERyvjz0SuNLYnlW2XRue/Y5XSpbY/AAAAAAAWRNeyLWdoHqmM/zBytbGd42pl2+XR+bdZ8p0AAAAAsKC6lm2rkcOV8R9EPm9s57gDlbGfluE73lop3AAAAABYRF3LtrXIoZax+b619yNfNPbluNXKubNsOzfpwhRuAAAAACyaSWVbPnl2eWxfbUGFLNtOR75s7Mtxa5Vz50IK53a6OIUbAAAAAIuka9m2Psq4LNvei3zV2JfnPVg5dy6kcHaaC/xTgAEAMJ/GnNb5CCUAAAAASUVORK5CYII=);
            }
        }
    }
    .dv-home-right {
        width: 32.28%;
        margin-left: 24px;
        .top_line {
            width: 100%;
            height: 16px;
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAkwAAAAUCAYAAAB/JmJwAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAVFJREFUeNrs3btKw2AcxuGvVnDwhLuLB0TRQayuCiJ4J16jo7q4WF3EE9Zr8DyIEv8fydChoXU1zwO/BgJZOr00bdNKxfdRAgBohl50Hn2OekGR2qkVg8lbBwA0xUY0Hx3/ZTCN5xcAgP+ulX7y4TpaiFaih1GvHfP2AQANcxLtRJMGEwDAYG/RVbRrMAEA1LupdtCqwQQAUO802o6mDCYAgMHeo4toz2ACAKh3l/I/B6S0ZjABANTLt+a2ommDCQBgsI805NacwQQAkNJ9lB9/sm4wAQDUO4s2o5n+k/kfwltFUXh7AIB/r3o0yjD70WH0GD1H3ejJJ0wAAKXFaDmaSOUDeueig3zeYAIAKHWqY/50qf+2XMdgAgAozVbHr+i2/7zBBABQeqk7bzABAI1QpHZtlW7NpZd+JQcANF7fL+iWUvldpvwdptdqRPV+BRgAy5M7tPCet5QAAAAASUVORK5CYII=);
            background-size: 100% 100%;
        }
        .row_circle {
            color: hsla(0,0%,100%,.85);
            .circle_item {
                height: 108px;
                background-position: 50%;
                background-size: contain;
                background-repeat: no-repeat;
                display: flex;
                justify-content: center;
                align-items: center;
                div .number {
                    font-weight: bolder;
                    font-size: 1.5em;
                }
            }
            .circle_item_title {
                height: 20px;
                margin-top: 4px;
                text-align: center;
            }
            .circle_item.a {
                background-image: url(data:image/png;base64,[encoded data, 5136 characters]);
            }
            .circle_item.b {
                background-image: url(data:image/png;base64,[encoded data, 5604 characters]);
            }
            .circle_item.c {
                background-image: url(data:image/png;base64,[encoded data, 5156 characters]);
            }
            .circle_item.d {
                background-image: url(data:image/png;base64,[encoded data, 5788 characters]);
            }
        }
        .message_container {
            margin-top: 24px;
            height: calc(100% - 172px);
            border: 1px solid rgba(0,255,252,.55);
            .card_header {
                height: 40px;
                padding: 0 30px;
                display: flex;
                align-items: center;
                max-width: 100%;
                background-color: rgba(0,255,252,.25);
                border-bottom: 1px solid rgba(0,255,252,.25);
                .text_container {
                    display: block;
                    margin-bottom: -14px;
                    height: 35px;
                    padding: 0 30px;
                    width: fit-content;
                    color: hsla(0,0%,100%,.85);
                    text-align: center;
                    font-size: 1.1em;
                    line-height: 30px;
                    cursor: pointer;
                    &.selected {
                        background-image: url(data:image/png;base64,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);
                        background-size: 100% 100%;
                        color: #00fffc;
                    }
                }
            }
            .message_content {
                padding: 8px;
                height: calc(100% - 40px);
                overflow-y: auto;
                .message-item {
                    position: relative;
                    .title_wrapper {
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        .dot {
                            width: 6px;
                            height: 6px;
                            border-radius: 50%;
                            background: rgb(255, 51, 0);
                        }
                        .time {
                            font-size: 1em;
                            margin-left: 10px;
                            color: hsla(0,0%,100%,.85);
                        }
                    }
                    .content_wrapper {
                        margin-left: 16px;
                        font-size: 1em;
                        .content {
                            color: #09c;
                        }
                    }
                }
                .message-item + .message-item {
                    margin-top: 8px;
                }
                .message_empty {
                    margin: 32px 0;
                    color: #00fffc;
                    font-size: 14px;
                    line-height: 1.5715;
                    text-align: center;
                    .empty-imag {
                        height: 40px;
                        margin-bottom: 8px;
                        .empty-img-simple {
                            height: 100%;
                            margin: auto;
                            .empty-img-simple-ellipse {
                                fill: #147484;
                            }
                            .empty-img-simple-g {
                                stroke: rgba(0,255,252,.5);
                            }
                            .empty-img-simple-path {
                                fill: #147484;
                            }
                        }
                    }
                    .empty-description {
                        color: #00fffc;
                    }
                }
            }
        }
    }
}
