.classModel { width: 750rpx; height: 110rpx; // #ifndef APP-NVUE display: flex; // #endif // #ifdef APP-NVUE flex-direction: row; // #endif justify-content: space-around; margin-bottom: 20rpx; .classModel-bg { width: 210rpx; height: 90rpx; background-color: #3F4141; border-radius: 60rpx; box-shadow: 3px 3px 2px rgba(174, 230, 93, 1); .classModel-img { width: 175rpx; height: 75rpx; } } } .tab-nav { display: flex; justify-content: center; padding: 20rpx 0; background: #161616; .tab-item { padding: 0 30rpx; color: #808080; font-size: 28rpx; &.active { color: #ffffff; font-weight: bold; } } } .hot-topics { padding: 20rpx; background: #28292D; margin: 20rpx; border-radius: 16rpx; .hot-topics-header { margin-bottom: 20rpx; .hot-topics-title { font-size: 32rpx; font-weight: bold; color: #ffffff; } } .hot-topics-swiper { height: 400rpx; // Adjust this value based on your content } .hot-topics-list { padding: 10rpx 0; } .topic-item { display: flex; align-items: center; padding: 15rpx 0; .topic-index { width: 40rpx; color: #808080; text-align: center; flex-shrink: 0; } .topic-content { flex: 1; width: 0; /* 重要:确保flex子项不会超过容器宽度 */ overflow: hidden; .topic-title-row { display: flex; align-items: center; width: 100%; .topic-title { color: #ffffff; font-size: 28rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; width: 0; /* 重要:确保flex子项不会超过容器宽度 */ } .hot-tag { margin-left: 10rpx; padding: 4rpx 10rpx; background: #FF4B4B; color: #ffffff; font-size: 20rpx; border-radius: 8rpx; flex-shrink: 0; } } .topic-participants { font-size: 24rpx; color: #808080; margin-top: 6rpx; } } } .indicator-dots { display: flex; justify-content: center; margin-top: 20rpx; .dot { width: 12rpx; height: 12rpx; border-radius: 50%; background: #808080; margin: 0 6rpx; &.active { background: #ffffff; } } } } .follow-list { padding: 20rpx; background: #161616; margin: 0rpx; border-radius: 0rpx; .works-list { display: flex; flex-wrap: wrap; padding: 10rpx; .work-item { width: 48%; margin: 1%; margin-bottom: 20rpx; .work-image { width: 100%; aspect-ratio: 1; border-radius: 12rpx; } .work-title { font-size: 28rpx; color: #ffffff; margin-top: 10rpx; padding: 0 10rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } .no-data { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60rpx 0; text { color: #808080; font-size: 28rpx; } } } .no-data { text-align: center; padding: 40rpx 0; color: #808080; font-size: 28rpx; } .news-list { padding: 20rpx; background: #161616; .news-grid { display: flex; flex-wrap: wrap; justify-content: space-between; .news-item { width: 48%; margin-bottom: 30rpx; background: #28292D; border-radius: 12rpx; overflow: hidden; .news-image { width: 100%; aspect-ratio: 1; height: auto; border-radius: 12rpx 12rpx 0 0; } .news-title { font-size: 28rpx; color: #ffffff; padding: 15rpx; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 60rpx; line-height: 60rpx; } .news-footer { display: flex; justify-content: space-between; align-items: center; padding: 0 15rpx 15rpx; .news-author { font-size: 24rpx; color: #808080; max-width: 60%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .news-views { display: flex; align-items: center; font-size: 24rpx; color: #808080; .view-icon { width: 26rpx; height: 18rpx; margin-right: 6rpx; } } } } } } .float-btn { position: fixed; right: 30rpx; bottom: 120rpx; width: 100rpx; height: 100rpx; background-color: #FFFFFF; border-radius: 50%; display: flex; justify-content: center; align-items: center; box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); z-index: 999; .float-btn-icon { width: 40rpx; height: 40rpx; } } .blankHeight { width: 500rpx; height: 500rpx; }