.news-module { width: 100%; background: #f7f7f7; border-radius: 16rpx; box-sizing: border-box; } .classify-tab { width: 100%; height: 90rpx; border-bottom: 1rpx solid #eaeaea; background-color: #fff; padding: 0rpx 20rpx; box-sizing: border-box; } ::-webkit-scrollbar{ width: 0; height: 0; color: transparent; display:none; } .classify-tab .tab-list { width: auto; min-width: 100%; height: 90rpx; display: flex; } .tab-list .item { height: 90rpx; color: #ababab; font-size: 30rpx; margin: 0 20rpx; line-height: 90rpx; flex-shrink: 0; position: relative; width: 150rpx; text-align: center; } .tab-list .item.select { color: #FF4848; font-size: 32rpx; font-weight: bold; } .tab-list .item:first-child { margin-left: 0; } .tab-list .item:last-child { margin-right: 0; } .classify-tab .tab-list .item .select-bar { width: 30rpx; height: 8rpx; border-radius: 4rpx; background: #FF4848; position: absolute; bottom: 0; left: 0; } .news-list { width: 100%; } .news-list .preload-item { width: 100%; padding: 30rpx 0; display: flex; align-items: center; justify-content: space-between; } .news-list .preload-item + .preload-item { border-top: 1rpx solid #eaeaea; } .news-list .preload-item .left { width: calc(100% - 260rpx); height: 170rpx; display: flex; flex-direction: column; justify-content: space-between; } .news-list .preload-item .left .top .title { height: 30rpx; width: 100%; border-radius: 2rpx; background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); animation: loading 1.4s ease infinite; background-size: 400% 100%; margin-top:10rpx; } .news-list .preload-item .left .top .time { border-radius: 6rpx; background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); animation: loading 1.4s ease infinite; background-size: 400% 100%; height: 20rpx; width: 30%; margin-top: 10rpx; } .news-list .preload-item .left .bottom { height: 20rpx; width: 50%; border-radius: 2rpx; background: linear-gradient(90deg, #f2f2f2 25%, #e6e6e6 37%, #f2f2f2 63%); animation: loading 1.4s ease infinite; background-size: 400% 100%; } .news-list .preload-item .right { width: 240rpx; height: 170rpx; 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%; } /* type-3 start */ .type-3 .list-item { width: 100%; padding: 40rpx 28rpx; margin-top: 16rpx; background: #fff; box-sizing: border-box; } .type-3 .list-item .name { font-size: 34rpx; font-weight: 500; color: rgba(51, 51, 51, 1); line-height: 50rpx; } .type-3 .list-item .info { margin-top: 15rpx; font-size: 28rpx; font-family: PingFang SC; font-weight: 500; color: rgba(153, 153, 153, 1); } .type-3 .list-item .info .text { line-height: 46rpx; overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 30rpx; } /* type-3 end */ @keyframes loading { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }