.preload-issue-item { width: 100%; background: #fff; box-sizing: border-box; border-radius: 16rpx; padding: 0 24rpx; overflow: hidden; margin-bottom: 20rpx; } .preload-issue-item .header { height: 52rpx; margin-bottom: 10rpx; margin-top: 20rpx; border-radius: 8rpx; background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); animation: loading 1.4s ease infinite; background-size: 400% 100%; } .preload-issue-item .content { width: 100%; height: 120rpx; border-radius: 8rpx; background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); animation: loading 1.4s ease infinite; background-size: 400% 100%; } .preload-issue-item .image-list { display:grid; grid-template-columns: repeat(auto-fit, minmax(214rpx, 1fr)); grid-gap: 10rpx; height: 160rpx; margin-top: 20rpx; } .preload-issue-item .image-list .image-list-item { width: 100%; height: 100%; border-radius: 16rpx; overflow: hidden; background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); animation: loading 1.4s ease infinite; background-size: 400% 100%; } .preload-issue-item .type { height: 20rpx; margin-top: 10rpx; margin-bottom: 10rpx; border-radius: 2rpx; width: 50%; background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); animation: loading 1.4s ease infinite; background-size: 400% 100%; } .preload-issue-item .hot-remark { width: 100%; height: 120rpx; border-radius: 8rpx; background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); animation: loading 1.4s ease infinite; background-size: 400% 100%; } .preload-issue-item .altitude { width:100%; height: 30rpx; margin: 10rpx 0; border-radius: 2rpx; background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); animation: loading 1.4s ease infinite; background-size: 400% 100%; margin-bottom: 35rpx; } @keyframes loading { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }