.hc-datav-main {
    color: white;
    overflow: auto;
    i {
        display: inline-block;
    }
    .hc-datav-bg {
        position: fixed;
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    .hc-datav-header {
        position: relative;
        #datav-header-bg {
            position: relative;
            object-fit: cover;
            width: 100%;
        }
        .header-title {
            position: absolute;
            height: calc(100% - 30px);
            top: 0;
            .name {
                font-size: 32px;
                font-weight: bold;
                cursor: pointer;
                text-shadow: 0 0 10px rgba(255, 255, 255, .5);
                transition: text-shadow .3s;
                &:hover {
                    text-shadow: 3px 2px 8px rgb(52 227 255);
                }
            }
            i {
                margin-right: 10px;
            }
        }
        .hc-datav-search-select {
            position: absolute;
            align-items: center;
            padding: 0 14px;
            bottom: 0;
            .date {
                text-align: right;
                font-size: 14px;
            }
        }
    }
    .hc-datav-total .hc-diy-datav-card {
        .text {
            position: relative;
            margin-left: 2px;
            top: 10px;
        }
    }
    .hc-datav-divider {
        position: relative;
        margin-top: 8px;
        margin-bottom: 8px;
        border: 0.5px dashed #203a69;
    }
    .hc-datav-row-total {
        height: calc(100% - 290px);
        .hc-datav-row-column {
            position: relative;
            border-width: 50px 20px 20px 20px;
            border-style: solid;
            border-image-source: url(/src/assets/images/datav-4.png);
            border-image-slice: 100 50 50 50 fill;
            border-image-width: 50px 20px 20px 20px;
            transition: all linear .1s;
            &.work {

            }
            .title {
                position: absolute;
                color: #21CFFC;
                top: -39px;
                width: 100%;
                font-size: 22px;
                text-align: center;
                font-weight: bold;
            }
            .notes {
                position: relative;
                font-size: 18px;
                color: #0DF4D1;
                margin-top: -16px;
                .red {
                    color: #FE0301;
                }
            }
            .gird-card-box .gird-card {
                border-width: 1px 1px 1px 1px;
                border-style: solid;
                border-image-source: url(/src/assets/images/datav-1.png);
                border-image-slice: 100 100 100 100 fill;
                border-image-width: 20px 20px 20px 20px;
                .upper-num {
                    border-radius: 50%;
                    &.a1 {
                        background: #FFD9C8;
                    }
                    &.a2 {
                        background: #FFD219;
                    }
                    &.a3 {
                        background: #5BD4D9;
                    }
                    &.a4 {
                        background: #FE692A;
                    }
                }
                .content .data {
                    .num {
                        color: #0DF4D1;
                    }
                    .line {
                        margin: 0 2px;
                    }
                    .red {
                        color: #FE0301;
                    }
                }
            }
            .hc-datav-divider {
                margin: 18px 0;
            }
            .hc-datav-table {
                // height: calc(100% - 240px);
                  height: calc(100% - 38px);
                overflow: hidden;
            }
            .hc-datav-table .hc-datav-table-main {
                .el-table.top-table {
                    width: 100%;
                    height: 100%;
                    --el-table-bg-color: transparent;
                    --el-table-border-color: #59647A;
                    --el-table-tr-bg-color: #1e3353;
                    --el-table-text-color: #7fcedd;
                    --el-table-row-hover-bg-color: #0f203a;
                    .el-table__cell {
                        background: #1e3353;
                        color: #7fcedd;
                        font-weight: unset;
                        height: 40px;
                        padding: 0;
                    }
                    .cell {
                        padding: 0;
                        line-height: unset;
                    }
                    .current-row .el-table__cell {
                        background-color: #0a3b87;
                    }
                }
            }
        }
        .hc-datav-row-charts {
            .row-charts {
                background-image: url("~src/assets/images/charts.png");
                background-size: 100%;
                .title-box {
                    position: absolute;
                    font-size: 24px;
                    text-align: left;
                    .num {
                        margin-left: 2px;
                        font-weight: bold;
                    }
                    &.a1 {
                        top: 46px;
                        left: 330px;
                        .num {
                            color: #D222EC;
                        }
                    }
                    &.a2 {
                        top: 102px;
                        left: 0;
                        width: 185px;
                        .num {
                            color: #9933FF;
                        }
                    }
                    &.a3 {
                        top: 110px;
                        left: 350px;
                        text-align: center;
                        .num {
                            color: #32D1E6;
                        }
                    }
                }
            }
        }
        .hc-datav-row-line {
            height: calc(100% - 73px);
            margin-top: 40px;
            border-width: 50px 14px 14px 14px;
            border-style: solid;
            border-image-source: url(/src/assets/images/datav-3.png);
            border-image-slice: 100 80 80 80 fill;
            border-image-width: 30px 20px 20px 20px;
            transition: all linear 0.1s;
            .title {
                position: absolute;
                color: #21CFFC;
                top: -39px;
                width: 100%;
                font-size: 22px;
                text-align: center;
                font-weight: bold;
            }
        }
    }
}
