html{
    height: 100% !important;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    background-color: #F1F8FF;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
}
.contain{
    height: 100%;
    padding: .4rem;
    box-sizing: border-box;
    overflow: auto;
}
.total_data{
    display: flex;
    width: 100%;
    margin: .2rem 0;
    justify-content: space-between;
}
.total_data div{
    border-radius: 8px;
}
.total_data .icon{
    display: flex;
    width: 24%;
    margin: 0 .2rem 0 0;
    background-color: rgba(255, 255, 255, 1);
    border: none;
    -moz-box-shadow: 0px 0px 20px rgba(215, 215, 215, 1);
    -webkit-box-shadow: 0px 0px 20px rgb(215 215 215);
    box-shadow: 0px 0px 20px rgb(215 215 215);
    box-sizing: border-box;
    padding: .2rem;
}
.total_data .icon img{
    position: absolute;
    left:50%;
    top:50%;
    /*  相对于自身像左上移动50%，即40px  */
    transform:translate(-50%,-50%);
}
.total_data div .textData{
    display: inline-block;
    font-size: .2rem;
    margin: 0 0.4rem;
}
.total_data div .icon_Reserve{
    padding:18% 0 18% 0;
    width: 36%;
    position: relative;
    display: inline-block;
    background: linear-gradient(270deg, rgba(98, 156, 244, 1) 0%, rgba(0, 110, 255, 1) 100%);
}
.total_data div .icon_Recharge{
    padding:18% 0 18% 0;
    width: 36%;
    position: relative;
    display: inline-block;
    background: linear-gradient(270deg, rgba(202, 249, 130, 1) 0%, rgba(46, 212, 119, 1) 100%);
}
.total_data div .icon_Consumption{
    padding:18% 0 18% 0;
    width: 36%;
    position: relative;
    display: inline-block;
    background: linear-gradient(270deg, rgba(250, 205, 145, 1) 1%, rgba(255, 145, 56, 1) 100%)
}
.total_data div .icon_Bind{
    padding:18% 0 18% 0;
    width: 36%;
    position: relative;
    display: inline-block;
    background: linear-gradient(270deg, rgba(194, 128, 255, 1) 0%, rgba(132, 0, 255, 1) 100%);
    margin-right: 0;
}
.data-graph1{
     overflow: hidden;
     height: 60%;
     margin-top: .4rem;
     padding: .2rem;
     background-color: rgba(255, 255, 255, 1) !important;
     border: none;
     border-radius: 8px;
     -moz-box-shadow: 0px 0px 20px rgba(215, 215, 215, 1);
     -webkit-box-shadow: 0px 0px 20px rgb(215 215 215);
     box-shadow: 0px 0px 20px rgb(215 215 215);
 }
.data-graph2{
    overflow: hidden;
    display: inline-block;
    width: 70%;
    height: 100%;
    padding: .2rem;
    background-color: rgba(255, 255, 255, 1) !important;
    border: none;
    border-radius: 8px;
    -moz-box-shadow: 0px 0px 20px rgba(215, 215, 215, 1);
    -webkit-box-shadow: 0px 0px 20px rgb(215 215 215);
    box-shadow: 0px 0px 20px rgb(215 215 215);
}
.data-graph3{
    overflow: hidden;
    display: inline-block;
    width: 23%;
    height: 100%;
    padding: .2rem;
    background-color: rgba(255, 255, 255, 1) !important;
    border: none;
    border-radius: 8px;
    -moz-box-shadow: 0px 0px 20px rgba(215, 215, 215, 1);
    -webkit-box-shadow: 0px 0px 20px rgb(215 215 215);
    box-shadow: 0px 0px 20px rgb(215 215 215);
}
.rankTable{
    display: flex;
    justify-content: space-between;
    font-size: .2rem;
    width: 70%;
    margin: 0 auto;
    position: relative;
    padding: .18rem;
}
.rankTable:after{
    content: "";
    width: 100%;
    height: .5px;
    background: #F2F2F2;
    top: 100%;
    left: 0;
    position: absolute;
}
.rankTable .tableRanking{
    line-height: .4rem;
 }
.rankTable .tableName{
    line-height: .4rem;
}
.rankTable .tableNum{
    line-height: .4rem;
}
.circle{
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 0.5rem;
    text-align: center;
    line-height: .4rem;
    color: white;
    font-weight: 700;
}
.color1{
    background: linear-gradient(270deg, rgba(255,158,167, 0.3) 0%, rgba(255,99,101, 1) 100%);
}
.color2{
    background: linear-gradient(270deg, rgba(175,249,135, 0.3) 0%, rgba(0,219,128, 1) 100%);
}
.color3{
    background: linear-gradient(270deg, rgba(255,200,138, 0.3) 0%, rgba(255,145,51, 1) 100%);
}
.color4{
    background: linear-gradient(270deg, rgba(213,213,213, 0.3) 0%, rgba(172,172,172, 1) 100%);
}
