From 2d410989d32380d31ae3fe6d42aa3b3ba9e09d00 Mon Sep 17 00:00:00 2001
From: lrj <owen.stl@gmail.com>
Date: 星期五, 03 十月 2025 22:13:29 +0800
Subject: [PATCH] UI优化和bug修复: 1.调整小程序消息列表图标样式 2.优化web端比赛晋级页面布局 3.修复小程序消息列表日期显示问题

---
 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