优化

hdApp/src/admin/birthday/board.vue

@@ -16,7 +16,7 @@
           <view class="date-filter-icon">
             <view class="date-filter-icon-line"></view>
           </view>
-          <text class="date-filter-text">{{ period === 'custom' ? startDate + ' 至 ' + endDate : '时间区间' }}</text>
+          <text class="date-filter-text">{{ period === 'custom' ? '已选' : '时间' }}</text>
           <!-- <text class="date-filter-hint">{{ period === 'custom' ? '重选' : '选择日期' }}</text> -->
           <view class="date-filter-arrow"></view>
         </view>
@@ -28,7 +28,7 @@
           @click="changePeriod(p.value)"
         >{{ p.name }}</view>
       </view>
-      <scroll-view scroll-x class="status-tabs">
+      <view class="status-tabs">
         <view
           v-for="tab in statusTabs"
           :key="tab.key"
@@ -39,7 +39,7 @@
           <text>{{ tab.name }}</text>
           <text class="tab-num">{{ counts[tab.key] || 0 }}</text>
         </view>
-      </scroll-view>
+      </view>
     </view>
 
     <view class="list-wrap">
@@ -60,7 +60,6 @@
               :src="memberBadgeSrc(item.member)"
               mode="aspectFit"
             />
-            <text v-if="item.memberName" class="level-name">{{ item.memberName }}</text>
           </view>
           <view class="info-row">
             <view class="info-lines">
@@ -203,7 +202,7 @@ export default {
         { name: '待领取', key: 'pendingClaim', value: 2 },
         { name: '已领取', key: 'collected', value: 4 },
         { name: '未填写', key: 'noBirthday', value: 0 },
-        { name: '超时放弃', key: 'expired', value: 5 }
+        { name: '已放弃', key: 'expired', value: 5 }
       ],
       counts: {},
       collectSubmitting: false,
@@ -465,14 +464,19 @@ export default {
   gap: 12upx;
 }
 .green-btn {
-  padding: 12upx 22upx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 80upx;
+  padding: 0 28upx;
   background: linear-gradient(135deg, #19d471, #08b955);
   color: #fff;
-  font-size: 26upx;
+  font-size: 28upx;
   border-radius: 8upx;
 }
 .green-btn.outline {
-  padding: 10upx 22upx;
+  min-height: 80upx;
+  padding: 0 28upx;
   background: #fff;
   color: #08b955;
   border: 1upx solid #08b955;
@@ -483,11 +487,11 @@ export default {
   position: relative;
 }
 .search-inp {
-  height: 64upx;
+  height: 80upx;
   background: #f1f3f2;
-  border-radius: 32upx;
+  border-radius: 40upx;
   padding: 0 72upx 0 24upx;
-  font-size: 26upx;
+  font-size: 28upx;
 }
 .search-clear {
   position: absolute;
@@ -510,25 +514,34 @@ export default {
 }
 .filter-row {
   display: flex;
-  align-items: center;
+  align-items: stretch;
   margin-top: 20upx;
-  flex-wrap: wrap;
+}
+.filter-row > view:not(:first-child) {
+  margin-left: 10upx;
 }
 .date-filter-trigger {
+  flex: 1;
+  min-width: 0;
   display: flex;
+  flex-direction: row;
   align-items: center;
-  height: 52upx;
-  padding: 0 18upx;
-  margin-right: 12upx;
-  margin-bottom: 10upx;
+  justify-content: center;
+  height: 68upx;
+  padding: 0 12upx;
+  box-sizing: border-box;
   background: #f0fbf5;
   border: 1upx solid #08b955;
-  border-radius: 28upx;
+  border-radius: 34upx;
   box-shadow: 0 4upx 12upx rgba(8, 185, 85, 0.12);
 }
 .date-filter-icon {
-  width: 24upx;
-  height: 24upx;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28upx;
+  height: 28upx;
   margin-right: 8upx;
   border: 2upx solid #08b955;
   border-radius: 5upx;
@@ -552,12 +565,15 @@ export default {
   right: 4upx;
 }
 .date-filter-icon-line {
+  width: 14upx;
   height: 2upx;
-  margin-top: 7upx;
+  margin-top: 4upx;
   background: #08b955;
 }
 .date-filter-text {
-  font-size: 24upx;
+  flex-shrink: 0;
+  line-height: 26upx;
+  font-size: 26upx;
   color: #08b955;
   font-weight: 500;
 }
@@ -567,18 +583,25 @@ export default {
   color: #6abf8e;
 }
 .date-filter-arrow {
+  flex-shrink: 0;
+  align-self: center;
   width: 12upx;
   height: 12upx;
-  margin-left: 8upx;
+  margin-left: 6upx;
   border-top: 2upx solid #08b955;
   border-right: 2upx solid #08b955;
-  transform: rotate(45deg);
+  transform: rotate(45deg) translateY(-1upx);
 }
 .pill {
-  padding: 8upx 20upx;
-  margin-right: 12upx;
-  font-size: 24upx;
-  border-radius: 24upx;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 68upx;
+  padding: 0 8upx;
+  font-size: 26upx;
+  border-radius: 34upx;
   background: #e8f8ef;
   color: #333;
 }
@@ -617,16 +640,19 @@ export default {
   color: #999;
 }
 .status-tabs {
-  white-space: nowrap;
+  display: flex;
+  align-items: stretch;
   margin-top: 16upx;
   padding-bottom: 12upx;
 }
 .status-tab {
-  display: inline-flex;
+  flex: 1;
+  display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 12upx 20upx;
-  font-size: 24upx;
+  justify-content: center;
+  padding: 14upx 4upx;
+  font-size: 28upx;
   color: #666;
 }
 .status-tab.active {
@@ -634,8 +660,8 @@ export default {
   font-weight: 600;
 }
 .tab-num {
-  font-size: 22upx;
-  margin-top: 4upx;
+  font-size: 26upx;
+  margin-top: 6upx;
 }
 .list-wrap {
   padding: 16upx 24upx;
@@ -681,13 +707,6 @@ export default {
   width: 40upx;
   height: 40upx;
 }
-.level-name {
-  font-size: 22upx;
-  color: #08b955;
-  background: #e8f8ef;
-  padding: 2upx 10upx;
-  border-radius: 8upx;
-}
 .info-row {
   display: flex;
   align-items: flex-start;