.warp { width: 100%; display: flex; flex-wrap: wrap; position: relative; } .group-box { display: flex; flex-direction: column; align-items: center; width: 199rpx; justify-content: center; padding: 10rpx; background: #d7e9e548; border-radius: 10rpx; margin: 10rpx 10rpx; } .group-item { display: flex; flex-direction: column; align-items: center; width: 199rpx; justify-content: center; background: #d7e9e548; border-radius: 10rpx; margin: 10rpx 10rpx; position: relative; padding: 10rpx 0; } .history-icon { position: absolute; right: 0rpx; top: 0rpx; } .item-con { display: flex; flex-direction: column; align-items: center; // margin-left: 15rpx; width: 100%; } .item-title { width: 100%; font-size: 24rpx; color: #2a2a2a; margin-top: 10rpx; text-align: center; /* white-space: nowrap; overflow: hidden; text-overflow: ellipsis; */ } image { width: 40rpx; height: 40rpx; } .item-num { font-size: 36rpx; color: #282828; font-weight: bold; max-width: 90%; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .item-unit { color: #cccccc; font-size: 16rpx; padding-left: 10rpx; } .padding-top-30 { padding-top: 30rpx; } .padding-bottom-30 { padding-bottom: 30rpx; }