.handle-progress-item { width: 100%; height: auto; border-left: 1rpx solid #D9E2EA; box-sizing: border-box; padding-left: 30rpx; padding-bottom: 15rpx; position: relative; margin-bottom: 10rpx; } .handle-progress-item .item-type { position: absolute; top: 0; width: 50rpx; height: 40rpx; display: flex; justify-content: center; left: -25rpx; background: #fff; } .handle-progress-item .item-type .issue, .handle-progress-item .item-type .project { width: 46rpx; height: 26rpx; object-fit: cover; position: relative; top: 5rpx; } .handle-progress-item .item-type .point { width: 20rpx; height: 20rpx; border-radius: 50%; background: #c2ced8; position: relative; top: 10rpx; } .handle-progress-item .type { display: flex; align-items: center; } .handle-progress-item .type .type { font-size: 30rpx; color: #909DA7; height: 36rpx; line-height: 36rpx; text-indent: -12rpx; } .handle-progress-item .type .satisfy-image { width: 34rpx; height: 34rpx; object-fit: cover; margin: 0 6rpx 0 6rpx; } .handle-progress-item .type .satisfy-status { font-size: 24rpx; color: #333; } .handle-progress-item .time { font-size: 20rpx; color: #909DA7; height: 30rpx; line-height: 30rpx; } .handle-progress-item .handle-apartment { line-height: 50rpx; font-size: 32rpx; overflow: hidden; } .handle-progress-item .handle-apartment .title { color: #909DA7; width: 160rpx; float:left; } .handle-progress-item .handle-apartment .content { color: #333; width: calc(100% - 160rpx); float:left; } .handle-progress-item .blow-apartment { line-height: 45rpx; font-size: 32rpx; overflow: hidden; } .handle-progress-item .blow-apartment .title { color: #909DA7; width: 200rpx; float:left; } .handle-progress-item .blow-apartment .content { color: #333; width: calc(100% - 200rpx); float:left; } .handle-progress-item .blow-apartment .content .apartment + .apartment { margin-top: 10rpx; } .handle-progress-item .handle-advice { line-height: 45rpx; font-size: 32rpx; overflow: hidden; padding-bottom: 25rpx; border-bottom: 1rpx solid #D9E2EA; } .handle-progress-item .handle-advice .title { color: #909DA7; width: 160rpx; float:left; } .handle-progress-item .handle-advice .content { color: #333; width: calc(100% - 160rpx); float:left; } .handle-progress-item .handle-advice .content .image-list { width: 100%; display: grid; grid-template-columns: repeat(3, 140rpx); grid-gap: 10rpx; grid-template-rows: 100rpx; margin-top: 15rpx; } .handle-progress-item .handle-advice .content .image-list image { width: 100%; height: 100%; object-fit: cover; border-radius: 8rpx; } .handle-progress-item .handle-advice .satisfaction-judgement-title { color: #F40D0D; width: 160rpx; float:left; } .handle-progress-item .handle-advice .satisfaction-judgement-content { color: #F40D0D; width: calc(100% - 160rpx); float:left; } .handle-progress-item .origin-association { line-height: 50rpx; font-size: 32rpx; overflow: hidden; } .handle-progress-item .origin-association .title { color: #909DA7; width: 160rpx; float:left; } .handle-progress-item .origin-association .content { color: #333; width: calc(100% - 160rpx); float:left; } .handle-progress-item .handle-operationer { line-height: 50rpx; font-size: 32rpx; overflow: hidden; } .handle-progress-item .handle-operationer .title { color: #909DA7; width: 130rpx; float:left; } .handle-progress-item .handle-operationer .content { color: #333; width: calc(100% - 130rpx); float:left; } .handle-progress-item .handler-phone { line-height: 45rpx; font-size: 32rpx; overflow: hidden; } .handle-progress-item .handler-phone .title { color: #909DA7; width: 190rpx; float:left; } .handle-progress-item .handler-phone .content { color: #333; width: calc(100% - 190rpx); float:left; }