#app {
    width: 100vw;
    height: 100vh;
    background: url('./assets/bg.png') no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    font-family: PingFangSC-Medium, PingFang SC;
}



.header {
    width: 100vw;
    padding-top: 3.25vh;
    padding-left: 1.67vw;
    padding-right: 1.37vw;
    box-sizing: border-box;
    display: flex;
    // justify-content: space-between;
    align-items: center;

    .title {
        width: 66.67vw;
        height: 4.22vh;
        background: url('./assets/header.png') no-repeat top center;
        background-size: 100% 100%;
        margin-left: 4.9vw;
        margin-right: 6.72vw;
        font-size: 0.4rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #FFFFFF;
        text-align: center;
        line-height: 4.22vh;
    }

    .logo {
        width: 9.37vw;
        height: 5.4vh;
        background: url('./assets/logo.png') no-repeat;
        background-size: contain;
    }

    .date {
        color: #ffffff;
        font-size: 0.2rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #2EA4D4;
        
    }
}


.content {
    margin-left: 1.98vw;
    margin-top: 5.09vh;
    display: flex;
    // align-items: center;
}

.column1 {
    .row1 {
        
    }
    .row2 {
        margin-top: 2.22vh;
    }

    .row3 {
        margin-top: 2.22vh;
        position: relative;
        .echarts {
            .echarts1 {
                width: 100vw;
                .columnar {
                    width: 100%;
                    margin-bottom: 2.2vh;
                    margin-top: 1.9vh;
                    .label {
                        font-size: 0.16rem;
                        font-weight: 400;
                        color: #FFFFFF;
                        margin-bottom: 1.9vh;
                        width: 0.5vw;
                    }
                    .month {
                        width: 100%;
                        display: flex;
                        .label {
                            width: 3vw;
                        }
                    }
                    .year {
                        width: 100%;
                        display: flex;
                        .label {
                            width: 3vw;
                        }
                            
                    }
                    .columnar-perture{
                        margin-bottom: 1.7vh;
                        margin-left: 0.5vw;
                        margin-top: -0.5vh;
                        .columnar-perture-box {
                            display: flex;
                            align-items: center;
                            color: #FFFFFF;
                            font-size: 0.2rem;
                            height: 0.92vh;
                            margin-top: 0.6vh;
                            margin-bottom: 0.46vh;
                            .top-line {
                                height: 0.92vh;
                                background: #009DEF;
                                // margin-bottom: 0.2vh;
                            }
                            .bottom-line {
                                width: 12.00vw;
                                height: 0.92vh;
                                background: #FF0382;
                            }
                            .price {
                                width: 3vw;
                                font-size: 0.175rem;
                                font-weight: 400;
                                color: #09ACEA;
                                margin-left: 0.5vw; 
                                margin-top: -0.1vh;
                                display: flex;
                            }
                        }
                        
                    }
                
                }
                .tip {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    position: absolute;
                    bottom: -3vh;
                }
            }
        }
    }
    .shop {
        font-size: 0.15 rem;
        font-weight: 500;
        color: #09ACEA;
        margin-top: 1.5vh;
    }
    .echarts {
        width: 18.2vw;
        height: 16vh;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .echarts1 {
            width: 8.1vw;
            height: 16vh;
            position: relative;
            .money {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: #ffffff;
                font-weight: bold;
                font-size: 0.22rem;
                div {
                    text-align: center;
                }
            }
      
        }
    }
}



.column2 {
    width: 51.61vw;

    .row1 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: 27vh;
        .total-sell {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            .title {
                width: 19.89vw;
                height: 5.27vh;
                background: url('./assets//text-bg.png') no-repeat;
                background-size: 100% 100%;
                font-size: 0.275rem;
                font-weight: 500;
                color: #FFFFFF;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0;
            }
            .total-count {
                font-size: 1.25rem;
                font-weight: 600;
                color: #E1FBFF;
                span {
                    font-size: 0.2rem;
                    margin-left: 0.1rem;
                }
            }
        }
    }

    .row2 {
        margin-top: -2vh;
        height: 33.4vh;
        position: relative;
        .header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           width: 51.61vw;
            .label {
                font-size: 0.15rem;
                font-weight: 500;
                color: #FFFFFF;
                margin-bottom: 1vh;
                // position: absolute;
                // bottom: -3vh;
            }
            .tip {
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }
        }
        .echarts {
            width: 100%;
            height: 25.12vh;
        }
    }
    .row3 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 2vw;
        height: 27vh;
        box-sizing: border-box;
        .echarts {
            width: 22vw;
            height: 20vh;
        }
        .Label {
            display: flex;
            justify-content: flex-start;
            align-self: start;
            position: absolute;
            bottom: 2vh;
        }
        .echarts2 {
            width: 18vw;
            height: 18vh;
            position: relative;
            
            .echarts2-box {
                width: 16vw;
                height: 20vh;
                margin-left: 3.8vw;
            }
            .label2 {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 2vh;
            }
        }
    }
}

.column3 {
    .row1 {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        position: relative;
        .price {
            font-size: 0.375rem;
            font-weight: 600;
            color: #FFFFFF;
            span {
                font-size: 0.275rem;
                font-weight: 600;
                color: #FFFFFF;
            }
        }
        .rate {
            // margin-left: 2.3vw;
            margin-top: -1.5vh;
            position: absolute;
            right: 1vw;
            .rate-count {
                text-align: center;
                .rate-cate {
                    color: #FFFFFF;
                    font-size: 0.225rem;
                }
                .up-text {
                    color: rgb(2, 163, 184);
                }
                .arrow-img {
                    width: 0.5vw;
                    height: 1vh;
                    margin-left: 0.5vw;
                }
            }
            .line-img {
                width: 8.1vw;
                height: 10.37vh;
            }
        }
    }
    .row3 {
        // margin-top: 2.2vh;
        margin-bottom: 2vh;
    }
    .empty {
        width: 1px;
        height: 2.2vh;
    }
}