.project-item { display: flex; align-items: center; width: 100vw; background-color: #ffffff; border-bottom: 1px solid#F4F4F4; box-sizing: border-box; .chart { margin: 0 30rpx; width: 100rpx; flex-shrink: 0; .circle { width: 100rpx; height: 100rpx; position: relative; border-radius: 50%; box-shadow: inset 0 0 0 8rpx var(--assist); .ab { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } &_left { border: 8rpx solid #ccc; border-radius: 50%; clip: rect(0, 50rpx, 100rpx, 0); } &_right { border: 8rpx solid #ccc; border-radius: 50%; clip: rect(0, 100rpx, 100rpx, 50rpx); } &_text { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 16rpx; font-family: PingFang SC-Regular, PingFang SC; color: #666666; .name { margin-bottom: 6rpx; } } } } .main { flex: 1; box-sizing: border-box; padding: 20rpx 0; .label { display: flex; height: 42rpx; .title { flex: 1; width: 0; font-size: 30rpx; font-family: PingFang SC-Regular, PingFang SC; color: #333333; margin-right: 20rpx; } .state { flex-shrink: 0; width: 132rpx; height: 40rpx; line-height: 40rpx; background: #52C41A; border-radius: 20rpx 0px 0px 20rpx; font-size: 24rpx; font-family: PingFang SC-Regular, PingFang SC; color: #FFFFFF; text-align: center; } } .replenish { display: flex; min-height: 34rpx; font-size: 24rpx; font-family: PingFang SC-Regular, PingFang SC; color: #333333; margin-top: 8rpx; word-break: break-all; white-space: pre-wrap; } } } .line-1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }