style(expert): 接单大厅附近组局卡片与暖色主题细节优化

pwuniapp/pages/expert/hall.vue

@@ -111,7 +111,10 @@
     <!-- 附近组局（招募中的组局，大神可报名参加） -->
     <view class="nearby-activities-section" v-if="nearbyActivities.length > 0">
       <view class="nearby-activity-head">
-        <text class="nearby-activity-title">附近组局（可报名）</text>
+        <view class="head-left">
+          <text class="nearby-activity-title">附近组局（可报名）</text>
+          <text class="nearby-activity-count">{{ nearbyActivities.length }}个招募中</text>
+        </view>
         <text class="nearby-activity-more" @click="goActivityHall">查看全部 ›</text>
       </view>
       <view
@@ -122,7 +125,7 @@
       >
         <view class="na-row">
           <text class="na-title">{{ act.title }}</text>
-          <text class="na-fee">{{ act.payType === 'PROJECT' ? '房主请客' : `人均 ¥${act.perPersonFee}` }}</text>
+          <text class="na-fee" :class="{ 'fee-project': act.payType === 'PROJECT' }">{{ act.payType === 'PROJECT' ? '房主请客' : `人均 ¥${act.perPersonFee}` }}</text>
         </view>
         <text class="na-meta">{{ act.startTime || '时间待定' }} · {{ act.location || '地点待定' }} · {{ act.currentParticipants }}/{{ act.maxParticipants }} 人</text>
       </view>
@@ -1469,20 +1472,85 @@ const copyOrderNo = () => {
       }
     }
 
-    .dispatch-list .dispatch-card {
+    .dispatch-list {
-      background: #FFFFFF;
+      .hall-empty {
-      border-color: #E7E5E4;
+        background: #FFFFFF;
-      box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
+        border: 1rpx dashed #E7E5E4;
+        box-shadow: 0 4rpx 16rpx rgba(28, 25, 23, 0.03);
 
-      .order-title {
+        .hall-empty-title {
-        color: #292524;
+          color: #44403C;
+        }
+
+        .hall-empty-desc {
+          color: #A8A29E;
+        }
       }
-      .remark-box {
+
-        background: #F5F5F4;
+      .dispatch-card {
-        .remark-text { color: #44403C; }
+        background: #FFFFFF;
+        border-color: #E7E5E4;
+        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
+
+        .order-title {
+          color: #292524;
+        }
+        .remark-box {
+          background: #F5F5F4;
+          .remark-text { color: #44403C; }
+        }
+        .card-action-bar {
+          border-top-color: #F5F5F4;
+        }
       }
-      .card-action-bar {
+    }
-        border-top-color: #F5F5F4;
+
+    .nearby-activities-section {
+      background: #FFFFFF;
+      border-color: #F0ECE4;
+      box-shadow: 0 12rpx 28rpx rgba(28, 25, 23, 0.05);
+
+      .nearby-activity-title {
+        color: #1C1917;
+      }
+
+      .nearby-activity-count {
+        color: #059669;
+        background: #ECFDF5;
+        border-color: #A7F3D0;
+      }
+
+      .nearby-activity-more {
+        color: #059669;
+      }
+
+      .nearby-activity-card {
+        background: #FAF8F5;
+        border-color: #F0ECE4;
+
+        &:active {
+          background: #F5EFE6;
+        }
+
+        .na-title {
+          color: #1C1917;
+        }
+
+        .na-fee {
+          color: #059669;
+          background: #ECFDF5;
+          border-color: #A7F3D0;
+
+          &.fee-project {
+            color: #D97706;
+            background: #FEF3C7;
+            border-color: #FDE68A;
+          }
+        }
+
+        .na-meta {
+          color: #78716C;
+        }
       }
     }
 
@@ -1581,63 +1649,114 @@ const copyOrderNo = () => {
   }
 }
 
-/* 附近组局（招募中） */
+/* 附近组局（招募中）基础样式（默认暗黑主题） */
 .nearby-activities-section {
   margin-top: 28rpx;
   padding: 24rpx;
   border-radius: 24rpx;
-  background: #151D30;
+  background: linear-gradient(180deg, rgba(22, 31, 51, 0.96) 0%, rgba(13, 20, 36, 0.98) 100%);
   border: 1rpx solid rgba(255, 255, 255, 0.08);
+  box-shadow: 0 12rpx 30rpx rgba(0, 0, 0, 0.2);
 
   .nearby-activity-head {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: 12rpx;
+    margin-bottom: 16rpx;
+    padding: 0 4rpx;
+
+    .head-left {
+      display: flex;
+      align-items: center;
+      gap: 12rpx;
+    }
   }
 
   .nearby-activity-title {
     font-size: 28rpx;
-    font-weight: 600;
+    font-weight: 700;
     color: #F8FAFC;
+    letter-spacing: 0.3rpx;
+  }
+
+  .nearby-activity-count {
+    font-size: 20rpx;
+    color: #34D399;
+    background: rgba(16, 185, 129, 0.14);
+    border: 1rpx solid rgba(16, 185, 129, 0.25);
+    padding: 2rpx 10rpx;
+    border-radius: 8rpx;
+    font-weight: 500;
   }
 
   .nearby-activity-more {
-    font-size: 22rpx;
+    font-size: 24rpx;
     color: #10B981;
+    font-weight: 500;
   }
 
   .nearby-activity-card {
-    padding: 18rpx 0;
+    padding: 20rpx 22rpx;
-    border-top: 1rpx solid rgba(255, 255, 255, 0.06);
+    margin-top: 14rpx;
+    border-radius: 18rpx;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1rpx solid rgba(255, 255, 255, 0.06);
+    box-sizing: border-box;
+    transition: all 0.2s ease;
 
     &:first-of-type {
-      border-top: none;
+      margin-top: 0;
+    }
+
+    &:active {
+      transform: scale(0.985);
+      background: rgba(255, 255, 255, 0.07);
     }
 
     .na-row {
       display: flex;
       justify-content: space-between;
-      gap: 12rpx;
+      align-items: center;
+      gap: 16rpx;
     }
 
     .na-title {
       flex: 1;
-      font-size: 26rpx;
+      font-size: 28rpx;
       font-weight: 600;
-      color: #E2E8F0;
+      color: #F1F5F9;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     .na-fee {
-      font-size: 24rpx;
+      font-size: 22rpx;
-      color: #10B981;
+      font-weight: 700;
+      padding: 4rpx 14rpx;
+      border-radius: 8rpx;
+      white-space: nowrap;
+      flex-shrink: 0;
+      color: #34D399;
+      background: rgba(16, 185, 129, 0.14);
+      border: 1rpx solid rgba(16, 185, 129, 0.25);
+
+      &.fee-project {
+        color: #FBBF24;
+        background: rgba(245, 158, 11, 0.14);
+        border-color: rgba(245, 158, 11, 0.25);
+      }
     }
 
     .na-meta {
       display: block;
-      margin-top: 8rpx;
+      margin-top: 10rpx;
       font-size: 22rpx;
       color: #94A3B8;
+      line-height: 1.4;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
   }
 }
@@ -1738,12 +1857,6 @@ const copyOrderNo = () => {
       box-shadow: 0 8rpx 20rpx rgba(16, 185, 129, 0.26);
     }
   }
-
-  .nearby-activity-card {
-    background: rgba(15, 22, 38, 0.78);
-    border: 1rpx solid var(--hairline);
-    border-radius: 22rpx;
-  }
 }
 
 .hall-container.theme-warm {
@@ -1796,32 +1909,92 @@ const copyOrderNo = () => {
     }
   }
 
-  .dispatch-list .dispatch-card {
+  .dispatch-list {
+    .hall-empty {
+      background: #FFFFFF;
+      border: 1rpx dashed #E7E5E4;
+      box-shadow: 0 4rpx 16rpx rgba(28, 25, 23, 0.03);
+
+      .hall-empty-title {
+        color: #44403C;
+      }
+
+      .hall-empty-desc {
+        color: #A8A29E;
+      }
+    }
+
+    .dispatch-card {
+      background: #FFFFFF;
+      border-color: #F0ECE4;
+      box-shadow: 0 12rpx 28rpx rgba(28, 25, 23, 0.05);
+
+      .order-title {
+        color: #1C1917;
+      }
+
+      .remark-box {
+        background: #FAF8F4;
+        border-color: #F0ECE4;
+
+        .remark-text {
+          color: #57534E;
+        }
+      }
+
+      .card-action-bar {
+        border-top-color: #F5F2EC;
+      }
+    }
+  }
+
+  .nearby-activities-section {
     background: #FFFFFF;
     border-color: #F0ECE4;
     box-shadow: 0 12rpx 28rpx rgba(28, 25, 23, 0.05);
 
-    .order-title {
+    .nearby-activity-title {
       color: #1C1917;
     }
 
-    .remark-box {
+    .nearby-activity-count {
-      background: #FAF8F4;
+      color: #059669;
+      background: #ECFDF5;
+      border-color: #A7F3D0;
+    }
+
+    .nearby-activity-more {
+      color: #059669;
+    }
+
+    .nearby-activity-card {
+      background: #FAF8F5;
       border-color: #F0ECE4;
 
-      .remark-text {
+      &:active {
-        color: #57534E;
+        background: #F5EFE6;
+      }
+
+      .na-title {
+        color: #1C1917;
+      }
+
+      .na-fee {
+        color: #059669;
+        background: #ECFDF5;
+        border-color: #A7F3D0;
+
+        &.fee-project {
+          color: #D97706;
+          background: #FEF3C7;
+          border-color: #FDE68A;
+        }
+      }
+
+      .na-meta {
+        color: #78716C;
       }
     }
-
-    .card-action-bar {
-      border-top-color: #F5F2EC;
-    }
-  }
-
-  .nearby-activity-card {
-    background: #FFFFFF;
-    border-color: #F0ECE4;
   }
 }