analysis/src/styles/view/datav.scss

.hc-datav-main {
    color: white;
    overflow: auto;
    i {
        display: inline-block;
    }
    .hc-datav-bg {
        position: absolute;
        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;
            justify-content: end;
            padding-right: 14px;
            bottom: 10px;
        }
    }
    .hc-datav-total {
        margin-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;
            .title {
                position: absolute;
                color: #21CFFC;
                top: -39px;
                width: 100%;
                font-size: 22px;
                text-align: center;
                font-weight: bold;
            }
        }
        .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 {

        }
    }
}