From c4938f6f4e839890b032c75c7a57333a6a9157a9 Mon Sep 17 00:00:00 2001
From: peng <peng.com>
Date: 星期四, 06 十一月 2025 17:06:10 +0800
Subject: [PATCH] 添加新闻功能
---
wx/pages/message/message.wxss | 451 ++++++-------------------------------------------------
1 files changed, 55 insertions(+), 396 deletions(-)
diff --git a/wx/pages/message/message.wxss b/wx/pages/message/message.wxss
index 39a508d..bb839f8 100644
--- a/wx/pages/message/message.wxss
+++ b/wx/pages/message/message.wxss
@@ -1,8 +1,13 @@
-/* pages/message/message.wxss */
@import "../../style/icon.wxss";
+
+page {
+ background-color: #f4f5f9;
+}
+
.container {
+ padding: 24rpx;
min-height: 100vh;
- background-color: #f5f5f5;
+ box-sizing: border-box;
}
/* 鍔犺浇鐘舵�� */
@@ -21,17 +26,10 @@
border-top: 4rpx solid #007aff;
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;
}
@@ -41,413 +39,74 @@
100% { transform: rotate(360deg); }
}
-/* 娑堟伅鍐呭 */
-.message-content {
- padding-bottom: 20rpx;
-}
-
-/* 椤堕儴缁熻鍜屾搷浣滄爮 */
-.header-bar {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 20rpx 30rpx;
- 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;
- margin-bottom: 20rpx;
- display: block;
-}
-
-.filter-options {
- display: flex;
- flex-wrap: wrap;
- gap: 20rpx;
-}
-
-.filter-option {
- padding: 12rpx 24rpx;
- background-color: #f8f9fa;
- border-radius: 20rpx;
- font-size: 26rpx;
- 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;
-}
-
-/* 娑堟伅鍒楄〃 */
-.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-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-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- padding: 120rpx 40rpx;
- text-align: center;
+ padding-top: 200rpx;
}
.empty-icon {
font-size: 120rpx;
- margin-bottom: 30rpx;
+ margin-bottom: 24rpx;
opacity: 0.5;
}
-.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%);
+/* 娑堟伅鍒楄〃 */
+.message-list {
+ width: 100%;
+}
+
+.message-card {
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;
+ background-color: #fff;
+ border-radius: 16rpx;
+ padding: 32rpx;
+ margin-bottom: 24rpx;
+ box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
-.refresh-spinner {
- width: 24rpx;
- height: 24rpx;
- border: 3rpx solid rgba(255, 255, 255, 0.3);
- border-top: 3rpx solid #fff;
+.icon-wrapper {
+ width: 60rpx;
+ height: 60rpx;
border-radius: 50%;
- animation: spin 1s linear infinite;
+ background-color: #e6f3ff; /* 娴呰摑鑹茶儗鏅� */
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-right: 24rpx;
+ flex-shrink: 0;
}
-/* 鍝嶅簲寮忛�傞厤 */
-@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;
- }
+.icon-wrapper .icon {
+ font-size: 28rpx;
+ color: #007aff; /* 娣辫摑鑹插浘鏍� */
+}
+
+.text-wrapper {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ flex: 1;
+}
+
+.title {
+ font-size: 30rpx;
+ font-weight: 500;
+ color: #333;
+ margin-bottom: 8rpx;
+ word-break: break-all;
+}
+
+.timestamp {
+ font-size: 24rpx;
+ color: #999;
}
\ No newline at end of file
--
Gitblit v1.8.0