body{ background-color: #f2f6fa; } .pageContainer{ max-width: 19.2rem; margin: 0 auto; min-height: 100%; } .pageMain{ display: flex; } .pageConten{ flex: 1; } .totalIntBox{ padding: .24rem .36rem 0 .36rem; display: flex; font-size: .17rem; } .tiTile{ color: #999999; } .tiNumber{ flex: 1; word-break: break-all; color: rgba(79, 73, 222, 1); } .intContainer{ padding: .24rem .36rem; } .intItem{ display: flex; align-items: center; justify-content: space-between; background-color: #FFF; border-radius: .06rem; padding: .24rem; cursor: pointer; margin-bottom: .24rem; gap: .08rem; } .intValItem{ flex: 1; display: flex; align-items: center; justify-content: space-between; flex-direction: column; gap: .08rem; } .valKey{ display: flex; align-items: center; color: #999999; font-size: .16rem; } .valKey .symbol{ display: none; } .valVal{ color: #434343; font-size: .16rem; line-height: 1.4; word-break: break-all; } #loadingIndicator{ flex: 1; text-align: center; font-size: .16rem; color: #999999; padding-bottom: .24rem; } @media (max-width: 1199px) { .intItem{ padding: .14rem; } .intContainer{ padding: .16rem .24rem; } .totalIntBox{ padding-left: .24rem; padding-right: .24rem; } } @media (max-width: 999px) { .intItem{ margin-bottom: .24rem; display: block; } .intValItem{ display: flex; flex-direction: row; justify-content: flex-start; padding: .06rem 0; } .valKey{ font-size: .15rem; } .valKey .symbol{ display: block; } .valVal{ flex: 1; font-size: .15rem; } } @media (max-width: 750px) { .totalIntBox{ padding: .2rem .14rem .04rem .14rem; font-size: .22rem; } .intContainer{ padding: .16rem .14rem; } .valKey{ font-size: .2rem; } .valKey .symbol{ display: block; } .valVal{ flex: 1; font-size: .2rem; } }