.forum-list-page { min-height: 100vh; background-color: #f8f8f8; position: relative; } /* 顶部栏 */ .header { display: flex; justify-content: space-between; align-items: center; padding: 60rpx 30rpx 20rpx; background-color: #fff; position: sticky; top: 0; z-index: 100; box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); } .title { font-size: 40rpx; font-weight: bold; color: #333; } .add-btn { background-color: #07c160; color: white; font-size: 28rpx; padding: 12rpx 30rpx; line-height: normal; border-radius: 40rpx; margin: 0; } /* 筛选栏 */ .filter-bar { background-color: #fff; padding: 20rpx 30rpx; border-bottom: 1rpx solid #f0f0f0; position: sticky; top: 120rpx; z-index: 99; } .filter-scroll { white-space: nowrap; height: 60rpx; } .filter-list { display: inline-flex; gap: 30rpx; } .filter-item { padding: 0 20rpx; height: 60rpx; line-height: 60rpx; font-size: 28rpx; color: #666; border-radius: 30rpx; transition: all 0.3s; } .filter-item.active { background-color: rgba(7, 193, 96, 0.1); color: #07c160; font-weight: 500; } /* 搜索框 */ .search-container { padding: 20rpx 30rpx; background-color: #fff; position: sticky; top: 200rpx; z-index: 98; } .search-input-wrapper { display: flex; align-items: center; background-color: #f8f8f8; border-radius: 40rpx; padding: 0 30rpx; height: 80rpx; } .search-icon { width: 36rpx; height: 36rpx; margin-right: 20rpx; opacity: 0.5; } .search-input { flex: 1; font-size: 28rpx; height: 80rpx; line-height: 80rpx; } .search-clear { width: 40rpx; height: 40rpx; line-height: 40rpx; text-align: center; font-size: 36rpx; color: #999; border-radius: 50%; background-color: #e0e0e0; } /* 帖子列表容器 */ .post-list-container { height: calc(100vh - 300rpx); padding: 20rpx 0; } /* 空状态 */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 120rpx 30rpx; text-align: center; } .empty-image { width: 300rpx; height: 300rpx; margin-bottom: 40rpx; opacity: 0.6; } .empty-text { font-size: 30rpx; color: #999; margin-bottom: 40rpx; } .empty-btn { background-color: #07c160; color: white; font-size: 28rpx; padding: 20rpx 50rpx; line-height: normal; border-radius: 40rpx; margin: 0; } /* 帖子列表 */ .post-list { padding: 0 30rpx; } .post-item { display: flex; background-color: white; border-radius: 16rpx; padding: 30rpx; margin-bottom: 20rpx; box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05); transition: transform 0.3s, box-shadow 0.3s; } .post-item:active { transform: translateY(-2rpx); box-shadow: 0 6rpx 30rpx rgba(0, 0, 0, 0.1); } /* 左侧状态栏 */ .post-status-side { display: flex; flex-direction: column; align-items: center; margin-right: 30rpx; min-width: 120rpx; } .vote-count, .reply-count, .view-count { display: flex; flex-direction: column; align-items: center; margin-bottom: 20rpx; } .vote-count .vote-number, .reply-count .reply-number, .view-count .view-number { font-size: 28rpx; font-weight: bold; color: #333; margin-bottom: 4rpx; } .vote-count .vote-label, .reply-count .reply-label, .view-count .view-label { font-size: 22rpx; color: #999; } /* 右侧内容区 */ .post-content-main { flex: 1; min-width: 0; } /* 帖子标题和状态 */ .post-header { display: flex; align-items: center; margin-bottom: 16rpx; flex-wrap: wrap; gap: 12rpx; } .post-title { font-size: 32rpx; font-weight: bold; color: #333; line-height: 1.4; flex: 1; min-width: 0; word-break: break-all; } .status-badge { flex-shrink: 0; } .solved-badge { background-color: #07c160; color: white; font-size: 22rpx; padding: 4rpx 12rpx; border-radius: 20rpx; } .hot-badge { background-color: #ff6b6b; color: white; font-size: 22rpx; padding: 4rpx 12rpx; border-radius: 20rpx; } /* 帖子内容摘要 */ .post-summary { font-size: 28rpx; color: #666; line-height: 1.5; margin-bottom: 20rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } /* 帖子元信息 */ .post-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15rpx; flex-wrap: wrap; gap: 15rpx; } .user-info { display: flex; align-items: center; font-size: 24rpx; color: #999; } .user-avatar { width: 40rpx; height: 40rpx; border-radius: 50%; margin-right: 10rpx; } .username { margin-right: 8rpx; } .separator { margin: 0 8rpx; } .post-time { color: #999; } /* 标签 */ .post-tags { display: flex; align-items: center; gap: 10rpx; } .tag { font-size: 22rpx; color: #07c160; background-color: rgba(7, 193, 96, 0.1); padding: 4rpx 12rpx; border-radius: 20rpx; flex-shrink: 0; } .more-tags { font-size: 22rpx; color: #999; margin-left: 4rpx; } /* 最后回复信息 */ .last-reply { font-size: 24rpx; color: #999; padding-top: 15rpx; border-top: 1rpx solid #f0f0f0; } .last-reply-label { color: #666; } .last-reply-user { color: #07c160; margin: 0 5rpx; } /* 加载更多 */ .load-more { padding: 40rpx 0; text-align: center; color: #999; font-size: 28rpx; } .loading-text { color: #999; } .loading-more { display: flex; flex-direction: column; align-items: center; color: #999; } .loading-more .loading-icon { width: 50rpx; height: 50rpx; margin-bottom: 10rpx; } /* 没有更多了 */ .no-more { padding: 40rpx 0; text-align: center; color: #999; font-size: 26rpx; } /* 底部占位 */ .bottom-placeholder { height: 100rpx; } /* 加载提示 */ .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 100rpx 0; color: #999; font-size: 28rpx; } .loading-icon { width: 60rpx; height: 60rpx; margin-bottom: 20rpx; animation: rotate 1s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* 浮动按钮 */ .fab-container { position: fixed; bottom: 60rpx; right: 40rpx; z-index: 1000; } .fab { width: 100rpx; height: 100rpx; background-color: #07c160; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 8rpx 30rpx rgba(7, 193, 96, 0.3); transition: transform 0.3s, box-shadow 0.3s; } .fab:active { transform: scale(0.95); box-shadow: 0 4rpx 20rpx rgba(7, 193, 96, 0.2); } .fab-icon { width: 44rpx; height: 44rpx; } /* 移除按钮边框 */ button::after { border: none; } /* 滚动条样式 */ ::-webkit-scrollbar { width: 0; height: 0; color: transparent; }