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/activity/detail.wxss |  549 +++++++++++++-----------------------------------------
 1 files changed, 135 insertions(+), 414 deletions(-)

diff --git a/wx/pages/activity/detail.wxss b/wx/pages/activity/detail.wxss
index 9393e64..a286c07 100644
--- a/wx/pages/activity/detail.wxss
+++ b/wx/pages/activity/detail.wxss
@@ -1,449 +1,170 @@
 /* pages/activity/detail.wxss */
-
-/* 濯掍綋鍖哄煙鏍峰紡 */
-.media-section {
-  position: relative;
-  margin-bottom: 20rpx;
+.container {
+  background-color: #f4f5f7;
+  min-height: 100vh;
+  padding-bottom: 180rpx; /* 涓哄簳閮ㄦ寜閽暀鍑虹┖闂� */
 }
 
-.media-swiper {
-  height: 500rpx;
-}
-
-.media-image {
-  width: 100%;
-  height: 100%;
-}
-
-.video-wrapper {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-.video-poster {
-  width: 100%;
-  height: 100%;
-}
-
-.video-play-btn {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 120rpx;
-  height: 120rpx;
-  background: rgba(0, 0, 0, 0.7);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #ffffff;
-  font-size: 48rpx;
-}
-
-.status-badge {
-  position: absolute;
-  top: 30rpx;
-  right: 30rpx;
-  padding: 12rpx 24rpx;
-  background: rgba(0, 0, 0, 0.8);
-  color: #ffffff;
-  border-radius: 30rpx;
-  font-size: 24rpx;
-  font-weight: bold;
-}
-
-/* 鍩烘湰淇℃伅鏍峰紡 */
-.info-section {
-  margin-bottom: 20rpx;
-}
-
-.activity-title {
-  font-size: 40rpx;
-  font-weight: bold;
-  color: #333333;
-  margin-bottom: 20rpx;
-  line-height: 1.4;
-}
-
-.activity-desc {
-  font-size: 28rpx;
-  color: #666666;
-  line-height: 1.6;
-  margin-bottom: 30rpx;
-}
-
-/* 鏃堕棿淇℃伅鏍峰紡 */
-.time-info {
-  margin-bottom: 30rpx;
-}
-
-.time-item {
-  display: flex;
-  margin-bottom: 16rpx;
-  font-size: 26rpx;
-}
-
-.time-label {
-  color: #999999;
-  min-width: 140rpx;
-  margin-right: 20rpx;
-}
-
-.time-value {
-  color: #333333;
-  flex: 1;
-  font-weight: 500;
-}
-
-/* 鍦扮偣淇℃伅鏍峰紡 */
-.location-info {
-  margin-bottom: 30rpx;
-  padding: 24rpx;
-  background: #f8f9fa;
-  border-radius: 12rpx;
-  border-left: 6rpx solid #1976d2;
-}
-
-.location-label {
-  font-size: 26rpx;
-  color: #1976d2;
-  font-weight: bold;
-  margin-bottom: 12rpx;
-}
-
-.location-value {
-  font-size: 28rpx;
-  color: #333333;
-  line-height: 1.5;
-}
-
-.address {
-  display: block;
-  color: #666666;
-  font-size: 24rpx;
-  margin-top: 8rpx;
-}
-
-/* 鎶ュ悕杩涘害鏍峰紡 */
-.registration-progress {
-  margin-bottom: 30rpx;
-}
-
-.progress-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16rpx;
-}
-
-.progress-label {
-  font-size: 26rpx;
-  color: #333333;
-  font-weight: 500;
-}
-
-.progress-count {
-  font-size: 26rpx;
-  color: #1976d2;
-  font-weight: bold;
-}
-
-.progress-bar {
-  height: 12rpx;
-  background: #e0e0e0;
-  border-radius: 6rpx;
-  overflow: hidden;
-  margin-bottom: 12rpx;
-}
-
-.progress-fill {
-  height: 100%;
-  background: linear-gradient(90deg, #1976d2, #42a5f5);
-  border-radius: 6rpx;
-  transition: width 0.3s ease;
-}
-
-.progress-percent {
+.loading-wrapper, .error-wrapper {
+  padding-top: 200rpx;
   text-align: center;
-  font-size: 24rpx;
-  color: #1976d2;
-  font-weight: bold;
+  color: #999;
 }
 
-/* 鏍囩鏍峰紡 */
-.tags {
-  margin-bottom: 20rpx;
+.banner-swiper {
+  width: 100%;
+  height: 400rpx;
+  background-color: #e9ecef;
 }
 
-.tag {
-  display: inline-block;
-  padding: 8rpx 20rpx;
-  background: #e3f2fd;
-  color: #1976d2;
-  border-radius: 24rpx;
-  font-size: 22rpx;
-  margin-right: 16rpx;
-  margin-bottom: 12rpx;
+.banner-image {
+  width: 100%;
+  height: 100%;
 }
 
-/* 鍐呭鍖哄煙鏍峰紡 */
-.content-section,
-.requirements-section,
-.prizes-section,
-.rules-section,
-.organizer-section {
-  margin-bottom: 20rpx;
+.content-wrapper {
+  padding: 32rpx;
+}
+
+.section-card {
+  background-color: #fff;
+  border-radius: 16rpx;
+  padding: 32rpx;
+  margin-bottom: 32rpx;
 }
 
 .section-title {
-  font-size: 32rpx;
-  font-weight: bold;
-  color: #333333;
+  font-size: 36rpx;
+  font-weight: 700;
+  color: #1f2937;
+  margin-bottom: 32rpx;
 }
 
-.content-text,
-.requirements-text,
-.prizes-text,
-.rules-text {
-  font-size: 28rpx;
-  color: #333333;
-  line-height: 1.8;
+.main-title {
+  font-size: 40rpx;
+  margin-bottom: 24rpx;
 }
 
-/* 涓诲姙鏂逛俊鎭牱寮� */
-.organizer-item {
+.info-grid {
   display: flex;
-  margin-bottom: 20rpx;
-  font-size: 26rpx;
+  flex-direction: column;
 }
 
-.organizer-label {
-  color: #999999;
-  min-width: 140rpx;
-  margin-right: 20rpx;
-}
-
-.organizer-value {
-  color: #333333;
-  flex: 1;
-}
-
-.contact-phone {
-  color: #1976d2;
-  text-decoration: underline;
-}
-
-/* 搴曢儴鎿嶄綔鏍忔牱寮� */
-.bottom-actions {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: #ffffff;
-  border-top: 1rpx solid #f0f0f0;
-  padding: 20rpx;
+.info-row {
   display: flex;
-  align-items: center;
   justify-content: space-between;
-  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);
-  z-index: 100;
-}
-
-.action-left {
-  flex: 0 0 auto;
-}
-
-.share-btn {
-  display: flex;
-  flex-direction: column;
   align-items: center;
-  padding: 12rpx 20rpx;
-  color: #666666;
-}
-
-.share-icon {
-  font-size: 32rpx;
-  margin-bottom: 4rpx;
-}
-
-.share-text {
-  font-size: 20rpx;
-}
-
-.action-right {
-  flex: 1;
-  margin-left: 20rpx;
-}
-
-.register-btn,
-.status-btn,
-.disabled-btn {
-  width: 100%;
-  padding: 24rpx 0;
-  font-size: 32rpx;
-  font-weight: bold;
-  border-radius: 12rpx;
-  text-align: center;
-}
-
-/* 閫氱敤鎸夐挳鏍峰紡 */
-.btn {
-  width: 100%;
-  padding: 24rpx 0;
-  font-size: 32rpx;
-  font-weight: bold;
-  border-radius: 12rpx;
-  text-align: center;
-  transition: all 0.3s ease;
-}
-
-/* 涓昏鎸夐挳鏍峰紡 - 鍙互鎶ュ悕 */
-.btn-primary {
-  background: linear-gradient(90deg, #1976d2, #42a5f5);
-  color: #ffffff;
-  box-shadow: 0 4rpx 12rpx rgba(25, 118, 210, 0.3);
-}
-
-.btn-primary:active {
-  transform: translateY(2rpx);
-  box-shadow: 0 2rpx 8rpx rgba(25, 118, 210, 0.3);
-}
-
-/* 娆¤鎸夐挳鏍峰紡 - 宸叉姤鍚嶇瓑鐘舵�� */
-.btn-secondary {
-  background: #f5f5f5;
-  color: #666666;
-  border: 2rpx solid #e0e0e0;
-}
-
-.btn-secondary:active {
-  background: #eeeeee;
-}
-
-/* 绂佺敤鎸夐挳鏍峰紡 - 鎶ュ悕宸茬粨鏉熴�佷汉鏁板凡婊＄瓑 */
-.btn-disabled {
-  background: #f5f5f5 !important;
-  color: #cccccc !important;
-  cursor: not-allowed;
-  box-shadow: none !important;
-  border: 2rpx solid #f0f0f0;
-}
-
-.btn-disabled:active {
-  transform: none !important;
-  box-shadow: none !important;
-}
-
-/* 淇濇寔鍘熸湁鏍峰紡鍏煎鎬� */
-.register-btn {
-  background: linear-gradient(90deg, #1976d2, #42a5f5);
-  color: #ffffff;
-  box-shadow: 0 4rpx 12rpx rgba(25, 118, 210, 0.3);
-}
-
-.status-btn {
-  background: #f5f5f5;
-  color: #666666;
-  border: 2rpx solid #e0e0e0;
-}
-
-.disabled-btn {
-  background: #f5f5f5;
-  color: #cccccc;
-  cursor: not-allowed;
-}
-
-/* 鍔犺浇鐘舵�佹牱寮� */
-.loading-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 120rpx 0;
-}
-
-.loading-text {
-  margin-top: 20rpx;
   font-size: 28rpx;
-  color: #999999;
+  padding: 28rpx 0;
+  border-bottom: 1rpx solid #f0f0f0;
+}
+.info-row:first-child {
+  padding-top: 0;
+}
+.info-row:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
 }
 
-/* 瑙嗛棰勮寮圭獥鏍峰紡 */
-.media-preview-modal {
+.info-label {
+  color: #6b7280;
+}
+
+.info-value {
+  color: #1f2937;
+  font-weight: 500;
+}
+
+/* 鏃堕棿杞� */
+.timeline {
+  position: relative;
+  padding-left: 40rpx;
+  border-left: 2rpx solid #e5e7eb;
+}
+
+.timeline-item {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  padding-bottom: 48rpx;
+}
+
+.timeline-item:last-child {
+  padding-bottom: 0;
+}
+
+.timeline-icon {
+  position: absolute;
+  left: -21rpx; /* (40rpx - 2rpx)/2 */
+  top: 4rpx;
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+
+.icon-calendar-bg {
+  width: 40rpx;
+  height: 40rpx;
+  background-color: #e0e7ff;
+  border-radius: 50%;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+  background-size: 24rpx 24rpx;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.timeline-content {
+  padding-left: 32rpx;
+}
+
+.stage-name {
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #1f2937;
+  margin-bottom: 8rpx;
+}
+
+.stage-date {
+  font-size: 26rpx;
+  color: #6b7280;
+}
+
+.description-content {
+  font-size: 28rpx;
+  color: #374151;
+  line-height: 1.6;
+  white-space: pre-wrap; /* 淇濈暀鎹㈣鍜岀┖鏍� */
+}
+
+/* 搴曢儴鎿嶄綔鏍� */
+.footer-actions {
   position: fixed;
-  top: 0;
+  bottom: 0;
   left: 0;
   right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.9);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
+  background-color: #fff;
+  padding: 24rpx 32rpx;
+  padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
+  padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
+  border-top: 1rpx solid #e5e7eb;
+  box-shadow: 0 -2rpx 10rpx rgba(0,0,0,0.05);
 }
 
-.modal-content {
-  position: relative;
-  width: 90%;
-  max-width: 600rpx;
-}
-
-.preview-video {
-  width: 100%;
-  height: auto;
-  border-radius: 12rpx;
-}
-
-.close-btn {
-  position: absolute;
-  top: -80rpx;
-  right: 0;
-  width: 60rpx;
-  height: 60rpx;
-  background: rgba(255, 255, 255, 0.2);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #ffffff;
+.register-btn {
+  background-color: #007aff;
+  color: #fff;
   font-size: 32rpx;
-  font-weight: bold;
+  font-weight: 600;
+  border-radius: 999rpx;
+  height: 96rpx;
+  line-height: 96rpx;
+  text-align: center;
+  border: none;
 }
 
-/* 椤甸潰搴曢儴鐣欑櫧锛岄伩鍏嶈搴曢儴鎿嶄綔鏍忛伄鎸� */
-.container {
-  padding-bottom: 140rpx;
-}
-
-/* 鍝嶅簲寮忛�傞厤 */
-@media screen and (max-width: 375px) {
-  .media-swiper {
-    height: 450rpx;
-  }
-  
-  .activity-title {
-    font-size: 36rpx;
-  }
-  
-  .bottom-actions {
-    padding: 16rpx;
-  }
-  
-  .register-btn,
-  .status-btn,
-  .disabled-btn {
-    padding: 20rpx 0;
-    font-size: 28rpx;
-  }
-}
-
-@media screen and (min-width: 414px) {
-  .media-swiper {
-    height: 550rpx;
-  }
-  
-  .activity-title {
-    font-size: 44rpx;
-  }
+.register-btn:active {
+  background-color: #0056b3;
 }
\ No newline at end of file

--
Gitblit v1.8.0