page { background: #f7f7f7; } .statistics-container { padding: 20rpx; box-sizing: border-box; } .user-info { background: #FFFFFF; border-radius: 20rpx; padding: 30rpx; } .user-info .name { font-size: 32rpx; font-weight: bold; color: #333333; margin-bottom: 30rpx; } .user-info .address { font-size: 28rpx; font-weight: 400; color: #666666; padding-bottom: 30rpx; margin-bottom: 30rpx; border-bottom: 1px solid #EAEAEA; } .user-info .text { font-size: 30rpx; font-weight: 500; color: #333333; line-height: 46rpx; } .user-info .time { font-size: 26rpx; font-weight: 400; color: #C1C1C1; } .card { background: #fff; border-radius: 20rpx; padding: 30rpx; margin-top: 20rpx; } .card .title { font-size: 34rpx; font-weight: bold; color: #333333; display: flex; align-items: center; margin-left: -30rpx; margin-bottom: 39rpx; position: relative; } .card .title:before { content: ''; display: block; width: 10rpx; height: 28rpx; background: #3A80E7; border-radius: 4rpx; margin-right: 20rpx; } .num-list { display: flex; width: 100%; justify-content: space-between; position: relative; } .num-list .num-item { } .num-list .num-item:after { content: ''; display: block; position: absolute; right: 0; top: calc(50% - 45rpx); width: 1rpx; height: 90rpx; background: #C1C1C1; opacity: 0.66; } .num-list .num-item:nth-of-type(1):after { left: 27%; } .num-list .num-item:nth-of-type(2):after { left: 64%; } .num-list .num-item:last-child:after { display: none; } .num-list .num-item .txt { font-size: 28rpx; font-weight: 500; color: #999999; margin-bottom: 30rpx; } .num-list .num-item .num { font-size: 42rpx; font-weight: bold; color: #333333; } .tag { display: inline-block; line-height: 40rpx; height: 40rpx; border-radius: 20rpx; font-size: 26rpx; font-weight: 500; padding: 0 20rpx; margin-right: 30rpx; } .blue { background: rgba(79, 148, 255, 0.14); color: #4F94FF; } .orange { background: rgba(255, 120, 60, 0.14); color: #FF783C; } .green { background: rgba(4, 184, 173, 0.14); color: #04B8AD; } .red { color: #FA1919; background: rgba(255, 48, 27, 0.14); } .log-item { border-bottom: 1px solid #EAEAEA; padding: 30rpx 0; } .log-item .user { display: flex; align-items: center; } .log-item .tag { margin-right: 17px; } .log-item .icon { width: 48rpx; height: 48rpx; } .log-item .name { font-size: 32rpx; font-weight: 500; color: #333333; } .log-item .date { font-size: 28rpx; font-weight: 500; color: #C1C1C1; margin-top: 17rpx; } .log-item { display: flex; justify-content: space-between; align-items: center; }