| | |
| | | /* pages/message/message.wxss */ |
| | | @import "../../style/icon.wxss"; |
| | | .container { |
| | | min-height: 100vh; |
| | | background-color: #f5f5f5; |
| | |
| | | width: 40rpx; |
| | | height: 40rpx; |
| | | border: 4rpx solid #e0e0e0; |
| | | border-top: 4rpx solid #007aff; |
| | | border-top: 4rpx solid #1976d2; |
| | | border-radius: 50%; |
| | | animation: spin 1s linear infinite; |
| | | margin-bottom: 20rpx; |
| | | } |
| | | |
| | | .loading-spinner.small { |
| | | width: 30rpx; |
| | | height: 30rpx; |
| | | border-width: 3rpx; |
| | | margin-bottom: 10rpx; |
| | | } |
| | | |
| | | .loading-text { |
| | | margin-top: 20rpx; |
| | | font-size: 28rpx; |
| | | color: #666; |
| | | } |
| | |
| | | |
| | | /* 消息内容 */ |
| | | .message-content { |
| | | padding-bottom: 20rpx; |
| | | padding: 20rpx; |
| | | } |
| | | |
| | | /* 顶部统计和操作栏 */ |
| | | .header-bar { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding: 20rpx 30rpx; |
| | | /* 消息统计 */ |
| | | .message-stats { |
| | | background-color: #fff; |
| | | border-bottom: 1rpx solid #e0e0e0; |
| | | } |
| | | |
| | | .stats-info { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 20rpx; |
| | | } |
| | | |
| | | .total-count { |
| | | font-size: 28rpx; |
| | | color: #333; |
| | | } |
| | | |
| | | .unread-count { |
| | | font-size: 24rpx; |
| | | color: #ff4757; |
| | | background-color: #ffe8ea; |
| | | padding: 4rpx 12rpx; |
| | | border-radius: 12rpx; |
| | | } |
| | | |
| | | .header-actions { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 20rpx; |
| | | } |
| | | |
| | | .filter-btn, |
| | | .select-btn, |
| | | .mark-all-btn { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8rpx; |
| | | padding: 12rpx 20rpx; |
| | | background-color: #f8f9fa; |
| | | border-radius: 20rpx; |
| | | font-size: 24rpx; |
| | | color: #666; |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | .filter-btn.active, |
| | | .select-btn.active { |
| | | background-color: #007aff; |
| | | color: #fff; |
| | | } |
| | | |
| | | .mark-all-btn { |
| | | background-color: #28a745; |
| | | color: #fff; |
| | | } |
| | | |
| | | .filter-icon, |
| | | .select-icon, |
| | | .mark-all-icon { |
| | | font-size: 20rpx; |
| | | } |
| | | |
| | | .filter-text, |
| | | .select-text, |
| | | .mark-all-text { |
| | | font-size: 24rpx; |
| | | } |
| | | |
| | | /* 筛选面板 */ |
| | | .filter-panel { |
| | | background-color: #fff; |
| | | padding: 30rpx; |
| | | border-bottom: 1rpx solid #e0e0e0; |
| | | } |
| | | |
| | | .filter-section { |
| | | margin-bottom: 30rpx; |
| | | } |
| | | |
| | | .filter-section:last-child { |
| | | margin-bottom: 0; |
| | | } |
| | | |
| | | .filter-label { |
| | | font-size: 28rpx; |
| | | color: #333; |
| | | font-weight: 500; |
| | | border-radius: 16rpx; |
| | | padding: 24rpx; |
| | | margin-bottom: 20rpx; |
| | | display: block; |
| | | box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); |
| | | } |
| | | |
| | | .filter-options { |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | gap: 20rpx; |
| | | } |
| | | |
| | | .filter-option { |
| | | padding: 12rpx 24rpx; |
| | | background-color: #f8f9fa; |
| | | border-radius: 20rpx; |
| | | font-size: 26rpx; |
| | | .stats-text { |
| | | font-size: 28rpx; |
| | | color: #666; |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | .filter-option.active { |
| | | background-color: #007aff; |
| | | color: #fff; |
| | | } |
| | | |
| | | /* 选择模式操作栏 */ |
| | | .select-actions { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | padding: 20rpx 30rpx; |
| | | background-color: #fff; |
| | | border-bottom: 1rpx solid #e0e0e0; |
| | | } |
| | | |
| | | .select-all-btn { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8rpx; |
| | | font-size: 26rpx; |
| | | color: #007aff; |
| | | } |
| | | |
| | | .select-all-icon { |
| | | font-size: 24rpx; |
| | | } |
| | | |
| | | .selected-count { |
| | | font-size: 26rpx; |
| | | color: #666; |
| | | } |
| | | |
| | | .batch-actions { |
| | | display: flex; |
| | | gap: 20rpx; |
| | | } |
| | | |
| | | .delete-selected-btn { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8rpx; |
| | | padding: 12rpx 20rpx; |
| | | background-color: #ff4757; |
| | | color: #fff; |
| | | border-radius: 20rpx; |
| | | font-size: 24rpx; |
| | | } |
| | | |
| | | .delete-icon { |
| | | font-size: 20rpx; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | /* 消息列表 */ |
| | | .message-list { |
| | | padding: 0 30rpx; |
| | | } |
| | | |
| | | .message-item { |
| | | display: flex; |
| | | align-items: flex-start; |
| | | padding: 30rpx 0; |
| | | border-bottom: 1rpx solid #e0e0e0; |
| | | background-color: #fff; |
| | | margin-bottom: 20rpx; |
| | | border-radius: 16rpx; |
| | | padding: 30rpx; |
| | | position: relative; |
| | | transition: all 0.3s ease; |
| | | } |
| | | |
| | | .message-item.unread { |
| | | background-color: #f8f9ff; |
| | | border-left: 6rpx solid #007aff; |
| | | } |
| | | |
| | | .message-item.selected { |
| | | background-color: #e3f2fd; |
| | | border: 2rpx solid #007aff; |
| | | } |
| | | |
| | | .message-checkbox { |
| | | margin-right: 20rpx; |
| | | padding-top: 10rpx; |
| | | } |
| | | |
| | | .checkbox-icon { |
| | | font-size: 32rpx; |
| | | color: #007aff; |
| | | } |
| | | |
| | | .message-icon { |
| | | position: relative; |
| | | margin-right: 20rpx; |
| | | padding-top: 10rpx; |
| | | } |
| | | |
| | | .type-icon { |
| | | font-size: 40rpx; |
| | | } |
| | | |
| | | .unread-dot { |
| | | position: absolute; |
| | | top: 5rpx; |
| | | right: -5rpx; |
| | | width: 12rpx; |
| | | height: 12rpx; |
| | | background-color: #ff4757; |
| | | border-radius: 50%; |
| | | } |
| | | |
| | | .message-content-area { |
| | | flex: 1; |
| | | min-width: 0; |
| | | } |
| | | |
| | | .message-header { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: flex-start; |
| | | margin-bottom: 12rpx; |
| | | } |
| | | |
| | | .message-title { |
| | | font-size: 30rpx; |
| | | font-weight: 500; |
| | | color: #333; |
| | | flex: 1; |
| | | margin-right: 20rpx; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | /* 消息项 */ |
| | | .message-item { |
| | | padding: 30rpx 24rpx; |
| | | border-bottom: 1rpx solid #f0f0f0; |
| | | background-color: #fff; |
| | | } |
| | | |
| | | .message-item:last-child { |
| | | border-bottom: none; |
| | | } |
| | | |
| | | .message-content-text { |
| | | font-size: 32rpx; |
| | | color: #333; |
| | | line-height: 1.5; |
| | | margin-bottom: 16rpx; |
| | | word-wrap: break-word; |
| | | } |
| | | |
| | | .message-time { |
| | | font-size: 24rpx; |
| | | color: #999; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | .message-body { |
| | | margin-bottom: 16rpx; |
| | | } |
| | | |
| | | .message-text { |
| | | font-size: 28rpx; |
| | | color: #666; |
| | | line-height: 1.5; |
| | | display: -webkit-box; |
| | | -webkit-box-orient: vertical; |
| | | -webkit-line-clamp: 2; |
| | | overflow: hidden; |
| | | } |
| | | |
| | | .message-footer { |
| | | display: flex; |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | flex-wrap: wrap; |
| | | gap: 10rpx; |
| | | } |
| | | |
| | | .message-type { |
| | | font-size: 22rpx; |
| | | color: #007aff; |
| | | background-color: #e3f2fd; |
| | | padding: 4rpx 12rpx; |
| | | border-radius: 12rpx; |
| | | } |
| | | |
| | | .related-activity { |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 8rpx; |
| | | flex: 1; |
| | | min-width: 0; |
| | | } |
| | | |
| | | .activity-label { |
| | | font-size: 22rpx; |
| | | color: #999; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | .activity-title { |
| | | font-size: 22rpx; |
| | | color: #666; |
| | | overflow: hidden; |
| | | text-overflow: ellipsis; |
| | | white-space: nowrap; |
| | | } |
| | | |
| | | .unread-badge { |
| | | position: absolute; |
| | | top: 20rpx; |
| | | right: 20rpx; |
| | | background-color: #ff4757; |
| | | color: #fff; |
| | | padding: 4rpx 12rpx; |
| | | border-radius: 12rpx; |
| | | font-size: 20rpx; |
| | | } |
| | | |
| | | /* 加载更多 */ |
| | | .loading-more { |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | padding: 40rpx 0; |
| | | } |
| | | |
| | | /* 没有更多数据 */ |
| | | .no-more { |
| | | text-align: center; |
| | | padding: 40rpx 0; |
| | | } |
| | | |
| | | .no-more-text { |
| | | font-size: 26rpx; |
| | | color: #999; |
| | | } |
| | | |
| | |
| | | |
| | | .empty-icon { |
| | | font-size: 120rpx; |
| | | margin-bottom: 30rpx; |
| | | opacity: 0.5; |
| | | margin-bottom: 24rpx; |
| | | } |
| | | |
| | | .empty-title { |
| | | font-size: 32rpx; |
| | | color: #333; |
| | | margin-bottom: 16rpx; |
| | | font-weight: 500; |
| | | } |
| | | |
| | | .empty-desc { |
| | | font-size: 26rpx; |
| | | .empty-text { |
| | | font-size: 28rpx; |
| | | color: #999; |
| | | line-height: 1.5; |
| | | } |
| | | |
| | | /* 刷新提示 */ |
| | | .refresh-tip { |
| | | position: fixed; |
| | | top: 0; |
| | | left: 50%; |
| | | transform: translateX(-50%); |
| | | display: flex; |
| | | align-items: center; |
| | | gap: 16rpx; |
| | | background-color: rgba(0, 0, 0, 0.8); |
| | | color: #fff; |
| | | padding: 20rpx 40rpx; |
| | | border-radius: 0 0 20rpx 20rpx; |
| | | font-size: 26rpx; |
| | | z-index: 1000; |
| | | } |
| | | |
| | | .refresh-spinner { |
| | | width: 24rpx; |
| | | height: 24rpx; |
| | | border: 3rpx solid rgba(255, 255, 255, 0.3); |
| | | border-top: 3rpx solid #fff; |
| | | border-radius: 50%; |
| | | animation: spin 1s linear infinite; |
| | | } |
| | | |
| | | /* 响应式适配 */ |
| | | @media (max-width: 375px) { |
| | | .header-bar { |
| | | padding: 15rpx 20rpx; |
| | | } |
| | | |
| | | .message-item { |
| | | padding: 25rpx 20rpx; |
| | | margin-bottom: 15rpx; |
| | | } |
| | | |
| | | .message-title { |
| | | font-size: 28rpx; |
| | | } |
| | | |
| | | .message-text { |
| | | font-size: 26rpx; |
| | | } |
| | | } |