.img-group { display: flex; flex-wrap: wrap; font-size: 24rpx; margin-top: 30rpx; } .img-group .img-item { margin: 0 6rpx; width: 150rpx; height: 150rpx; position: relative; box-sizing: border-box; } .img-group .img-item .img { width: 150rpx; height: 150rpx; } .img-group .img-item .progress { position: absolute; left: 16rpx; bottom: 20rpx; width: 120rpx; height: 16rpx; border-radius: 20rpx; border: 2rpx solid #ddd; display: flex; align-items: center; } .img-group .img-item .progress .span { height: 8rpx; width: 0; max-width: 112rpx; border-radius: 12rpx; position: absolute; left: 4rpx; top: 4rpx; background: #f5f5f5; } .img-group .img-item .hide-progress { opacity: 0; } .img-group .img-item .close { width: 32rpx; height: 32rpx; position: absolute; right: -8rpx; top: -8rpx; z-index: 1; } .img-group .img-item .closeImg { height: 100%; width: 100%; font-size: 40rpx; color: #a0a0a0; } .img-group .img-add { display: flex; align-items: center; justify-content: center; flex-direction: column; border: 2rpx dashed #dedede; color: #bcbcbc; } .img-group .img-add .cameraImg { width: 44rpx; height: 44rpx; color: #cdcdcd; margin-bottom: 8rpx; display: flex; justify-content: center; align-items: center; }