@keyframes arrowAnimate{
    from{
        width: 0px;
    }to{
        width: 100%;
    }
}

.nine-grids-wrap{
    width: 100%;
    height: 100%;
    display: inline-block;
    .relative-wrap{
        width: 80%;
        height: 84%;
        margin-top: 8%;
        margin-bottom: 8%;
        margin-left: 10%;
        position: relative;
        .x-axis{
            display: inline-block;
            position: absolute;
            width: 100%;
            bottom: -2px;
            .relative-wrap{
                width: 100%;
                display: inline-block;
                height: 100%;
                margin: 0;
                position: relative;
                border:1px solid rgba(228,235,240,0.6);
                .font-arrow{
                    transform: rotate(90deg);
                    font-size: 12px;
                    color: rgba(228,235,240,0.6);
                    display: inline-block;
                    position: absolute;
                    right: -3px;
                    top: -6px;
                }
                .low{
                    font-size:12px;
                    color:#c2cbd1;
                    position: absolute;
                    left: -30px;
                    margin-top: 5px;
                }
                .high{
                    font-size:12px;
                    color:#c2cbd1;
                    position: absolute;
                    right: 0;
                    margin-top: 5px;
                }
                
                .dimention{
                    font-size:12px;
                    color:#8f9ca6;
                    position: absolute;
                    width: 100%;
                    margin-top: 5px;
                }
                
            }
        }
        .y-axis{
            display: inline-block;
            position: absolute;
            height: 100%;
            left: -2px;
            top: -2px;
            .relative-wrap{
                width: 100%;
                display: inline-block;
                height: 100%;
                position: relative;
                border:1px solid rgba(228,235,240,0.6);
                .font-arrow{
                    font-size: 14px;
                    color: rgba(228,235,240,0.6);
                    display: inline-block;
                    position: absolute;
                    right: -7px;
                    top: -6px;
                }
                .high{
                    font-size:12px;
                    color:#c2cbd1;
                    position: absolute;
                    right: 4px;
                    margin-right: 5px;
                }
                
                .dimention{
                    font-size:12px;
                    color:#8f9ca6;
                    position: absolute;
                    left: -21px;
                    margin-top: 5px;
                    text-align: center;
                    line-height: 100%;
                    height: 100%;
                    margin-right: 10px;
                    top: 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    .dimention-text{
                        display: inline-block;
                        vertical-align: middle;
                    }
                }
                
            }
        }
        .grids-wrap{
            height: calc(100% - 10px);
            top: 5px;
            position: absolute;
            width: calc(100% - 20px);
            left: 10px;
            line-height: 0px;
            .a-grid{
                min-width: 65px;
                min-height: 65px;
                display: inline-block;
                text-align: center;
                background-color: #ebf1f5;
                border: 1px solid #fff;
                position: relative;
                .grid-inner{
                    // display: inline-block;
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    left: 0;
                    // padding-top: 10px;
                    .time-wrap{
                        margin-top: 25px;
                        z-index: 1;
                        position: absolute;
                        width: 100%;
                    }
                    .no-time{
                        margin-top: 0px !important;
                    }
                    .time{
                        display: block;
                        font-size:12px;
                        color:#919ea8;
                        line-height:12px;
                        text-align:center;
                    }
                    .no-data{
                        opacity:0.6;
                        background:#c2cbd1;
                        display: inline-block;
                        border-radius:100%;
                        text-align: center;
                    }
                    .font-nine-grid-default{
                        color: #fff;
                    }
                    .cover{
                        background-color: #fff;
                        opacity: 0.3;
                        z-index: 999999;
                        border-radius: 50%;
                        position: absolute;
                        display: inline-block;
                    }
                    .avatar-img-wrap{
                        z-index: 99999;
                        position: absolute;
                        left: 0;
                        right: 0;
                    }
                    .time-predict {
                        .time{
                            color: #c2cbd1
                        }
                    }
                }
                .grid-inner-now{
                    .no-data{
                        opacity:0.9;
                        background:#c2cbd1;
                        display: inline-block;
                        border-radius:100%;
                        text-align: center;
                    }
                    .time-now{
                        color:#0a131a;
                        font-family: "PingFangSC-Medium","Microsoft YaHei"; 
                    }
                    .up-avatar{
                        box-shadow:0 0 10px 0 rgba(0,0,0,0.30);
                    }
                    .time-wrap{
                        margin-top: 35px;
                        z-index: 1;
                        position: absolute;
                        width: 100%;
                    }
                    .no-time{
                        margin-top: 0px !important;
                    }
                }
            }
        }
        .draw-arrow{
            position: absolute;
        }
        .arrow-wrap{
            display: inline-block;
            position: absolute;
            width: 100%;
            height: 100%;
            .svg-wrap{
                position: absolute;
                width: 100%;
                height: 100%;
                .svg-box{
                    width: 100%;
                    height: 100%;
                    position: relative;
                    left: 0;
                    top: 0;
                    pointer-events: none;
                }
            }
            
            .arrow-self{
                display: inline-block;
                width: 100%;
                height: 100%;
                position: absolute;
                text-align: center;
                .arrow-self-in{
                    display: inline-block;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    animation: arrowAnimate 0.5s ease;
                }
            }
        }
    }
}