.top { width: 90vw; margin: 0 auto; height: 20vw; position: relative; } .heagImg { position: absolute; width: 14vw; height: 14vw; border-radius: 50%; overflow: hidden; top: 3vw; } .name { position: absolute; top: 4vw; left: 17vw; color: #000; font-size: 36rpx; font-weight: bold; } .date { position: absolute; bottom: 4vw; left: 17vw; color: #999; font-size: 24rpx; } .card { width: 80vw; margin: 0 auto; position: relative; background-color: #fff; padding: 3vw; border-radius: 20rpx; } .title { width: 100%; height: 40rpx; line-height: 40rpx; font-size: 28rpx; color: #000; font-weight: bold; } .left{ width: 30vw; height: 30vh; display: inline-block; } .right{ width: 50vw; height: 20vh; display: inline-block; vertical-align: top; } .homeIcon{ width: 12vw; height: 12vw; } .icon2{ width: 8vw; height: 8vw; } .line{ width: 100%; height: 1px; margin: 1vw 0 ; background-color: #0001; } .dot{ position: absolute; top: 50%; left: 2vw; width: 10rpx; height: 10rpx; transform: translateY(-50%); } .num1{ position: absolute; top: 50%; left: 5vw; white-space: nowrap; transform: translateY(-50%); vertical-align: top; font-size: 24rpx; } .num2{ position: absolute; top: 50%; left: 15vw; white-space: nowrap; transform: translateY(-50%); vertical-align: top; font-size: 24rpx; font-weight: bold; } .card-list { width: 86vw; margin: 30rpx auto 0; } .card2 { width: 27vw; margin-right: 2.5vw; background: #ffffff; border-radius: 20rpx; margin-bottom: 30rpx; text-align: center; display: inline-block } .card-list .card2:nth-child(3n){ margin-right: 0; } .card2 .value { margin-top: 40rpx; font-size: 32rpx; color: #000; } .card2 .icon { width: 50rpx; height: 50rpx; margin: 10rpx auto; opacity: 0.5; } .card2 .label { font-size: 26rpx; color: #666; margin-bottom: 20rpx; } .progress { width: 60rpx; height: 8rpx; background: #e6e6e6; border-radius: 4rpx; margin: 0 auto 20rpx auto; } .progress-bar { width: 100%; height: 100%; background: #9cc9ff; border-radius: 4rpx; }