.handle-progress { width: 100%; margin-bottom: 40rpx; overflow: hidden; } .handle-progress .title { color: #333; font-size: 32rpx; font-weight: bolder; line-height: 88rpx; height: 88rpx; } .handle-progress .progress-content { width: 100%; background: #fff; border-radius: 16rpx; box-sizing: border-box; padding: 30rpx 25rpx 0; position: relative; } .handle-progress .progress-list { width: 100%; } .handle-progress .up-or-down { width: 100%; height: 80rpx; display: flex; justify-content: flex-end; align-items: center; background: #fff; position: absolute; box-sizing: border-box; padding: 0 20rpx; bottom: 0; left: 0; } .handle-progress .up-or-down .tip { color: #3C6CFC; font-size: 28rpx; margin-right: 10rpx; } .handle-progress .up-or-down .sword { width: 20rpx; height: 16rpx; object-fit: cover; } .handle-progress .up-or-down .sword.more { transform: rotate(0deg); transition: transform 0.3s linear; } .handle-progress .up-or-down .sword.less { transform: rotate(180deg); transition: transform 0.3s linear; }