fix: 统计分析，账单统计页面界面问题修复。

src/pages/statistic/bill/creditBillAnalysis/index.vue

@@ -118,11 +118,12 @@
     </view>
   </view>
       </u-sticky>
+      
+  <!-- 筛选面板 -->
   <u-transition :show="filterPanel" mode="fade">
     <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
       <view class="filter-panel-content">
-             
+        <view class="filter-title">账单时间</view>
-              <view class="select-header">账单时间</view>
         <view class="selcet-content" style="padding: 0 24rpx">
           <u-input
             :disabled="true"
@@ -151,9 +152,19 @@
         </view>
       </view>
       <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
+        <view class="btn-reset" @click="resetQuery()">
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+          <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+          <text>重置</text>
         </view>
+        <view class="btn-confirm" @click="searchSubmit()">
+          <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+          <text>确定</text>
+        </view>
+      </view>
+    </view>
+  </u-transition>
+  
+  <!-- 日期选择器 -->
   <u-datetime-picker
     :closeOnClickOverlay="true"
     :show="timeShow"
@@ -163,8 +174,6 @@
     @cancel="openOrCloseDate"
     @confirm="confirm"
   ></u-datetime-picker>
-          </view>
-        </u-transition>
   
   <!-- 曲线图展示 -->
   <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -759,12 +768,13 @@ page {
         color: #667eea;
       }
     }
+  }
   
   .filter-panel {
     width: 100%;
     position: absolute;
     left: 0;
-      top: 96rpx;
+    top: 180rpx;
     background-color: rgba(0, 0, 0, 0.5);
     z-index: 999;
 
@@ -797,22 +807,32 @@ page {
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-start;
+        gap: 16rpx;
 
         .state-item {
-            width: 210rpx;
+          padding: 0 32rpx;
-            height: 72rpx;
+          height: 68rpx;
-            border: 1rpx solid rgba(0, 0, 0, 0.25);
+          border: 2rpx solid #e8edf3;
-            border-radius: 72rpx;
+          border-radius: 34rpx;
           text-align: center;
-            line-height: 72rpx;
+          line-height: 68rpx;
-            margin: 0 20rpx 20rpx 0;
           font-size: 28rpx;
-            color: #000000;
+          color: #666666;
+          transition: all 0.3s ease;
+          background: #ffffff;
+          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+          
+          &:active {
+            transform: scale(0.95);
+          }
         }
 
         .active {
-            background-color: rgba(222, 241, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border: 1rpx solid rgba(22, 119, 255, 1);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
@@ -823,6 +843,48 @@ page {
       padding: 24rpx 30rpx;
       background-color: #fff;
       box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      
+      .btn-reset,
+      .btn-confirm {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8rpx;
+        height: 88rpx;
+        border-radius: 12rpx;
+        font-size: 30rpx;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        
+        &:active {
+          transform: scale(0.98);
+          opacity: 0.9;
+        }
+        
+        text {
+          line-height: 1;
+        }
+      }
+      
+      .btn-reset {
+        flex: 1;
+        background: #f5f7fa;
+        border: 2rpx solid #dcdfe6;
+        
+        text {
+          color: #606266;
+        }
+      }
+      
+      .btn-confirm {
+        flex: 1;
+        background: #667eea;
+        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+        border: none;
+        
+        text {
+          color: #ffffff;
+        }
       }
     }
   }

src/pages/statistic/bill/creditInstallmentAnalysis/index.vue

@@ -128,10 +128,10 @@
     </view>
   </view>
       </u-sticky>
+  
   <u-transition :show="filterPanel" mode="fade">
     <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
       <view class="filter-panel-content">
-             
         <view class="filter-title">还款日期</view>
         <view class="selcet-content" style="padding: 0 24rpx">
           <u-input
@@ -161,9 +161,19 @@
         </view>
       </view>
       <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
+        <view class="btn-reset" @click="resetQuery()">
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+          <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+          <text>重置</text>
         </view>
+        <view class="btn-confirm" @click="searchSubmit()">
+          <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+          <text>确定</text>
+        </view>
+      </view>
+    </view>
+  </u-transition>
+  
+  <!-- 日期选择器 -->
   <u-datetime-picker
     :closeOnClickOverlay="true"
     :show="timeShow"
@@ -174,8 +184,6 @@
     @cancel="openOrCloseDate"
     @confirm="confirm"
   ></u-datetime-picker>
-          </view>
-        </u-transition>
   
   <!-- 曲线图展示 -->
   <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -775,17 +783,20 @@ page {
         color: #667eea;
       }
     }
+  }
 
   .filter-panel {
     width: 100%;
     position: absolute;
     left: 0;
-      top: 96rpx;
+    top: 180rpx;
     background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
 
     .filter-panel-content {
-        background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
         color: #2c3e50;
@@ -811,31 +822,84 @@ page {
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-start;
+        gap: 16rpx;
 
         .state-item {
-            width: 210rpx;
+          padding: 0 32rpx;
-            height: 72rpx;
+          height: 68rpx;
-            border: 1rpx solid rgba(0, 0, 0, 0.25);
+          border: 2rpx solid #e8edf3;
-            border-radius: 72rpx;
+          border-radius: 34rpx;
           text-align: center;
-            line-height: 72rpx;
+          line-height: 68rpx;
-            margin: 0 20rpx 20rpx 0;
           font-size: 28rpx;
-            color: #000000;
+          color: #666666;
+          transition: all 0.3s ease;
+          background: #ffffff;
+          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+          
+          &:active {
+            transform: scale(0.95);
+          }
         }
 
         .active {
-            background-color: rgba(222, 241, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border: 1rpx solid rgba(22, 119, 255, 1);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
       box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      
+      .btn-reset,
+      .btn-confirm {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8rpx;
+        height: 88rpx;
+        border-radius: 12rpx;
+        font-size: 30rpx;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        
+        &:active {
+          transform: scale(0.98);
+          opacity: 0.9;
+        }
+        
+        text {
+          line-height: 1;
+        }
+      }
+      
+      .btn-reset {
+        flex: 1;
+        background: #f5f7fa;
+        border: 2rpx solid #dcdfe6;
+        
+        text {
+          color: #606266;
+        }
+      }
+      
+      .btn-confirm {
+        flex: 1;
+        background: #667eea;
+        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+        border: none;
+        
+        text {
+          color: #ffffff;
+        }
       }
     }
   }

src/pages/statistic/bill/creditInstallmentSettledAnalysis/index.vue

@@ -92,7 +92,6 @@
   <u-transition :show="filterPanel" mode="fade">
     <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
       <view class="filter-panel-content">
-             
         <view class="filter-title">分期时间</view>
         <view class="selcet-content" style="padding: 0 24rpx">
           <u-input
@@ -122,9 +121,19 @@
         </view>
       </view>
       <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
+        <view class="btn-reset" @click="resetQuery()">
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+          <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+          <text>重置</text>
         </view>
+        <view class="btn-confirm" @click="searchSubmit()">
+          <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+          <text>确定</text>
+        </view>
+      </view>
+    </view>
+  </u-transition>
+  
+  <!-- 日期选择器 -->
   <u-datetime-picker
     :closeOnClickOverlay="true"
     :show="timeShow"
@@ -134,8 +143,6 @@
     @cancel="openOrCloseDate"
     @confirm="confirm"
   ></u-datetime-picker>
-          </view>
-        </u-transition>
   
   <!-- 曲线图展示 -->
   <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -729,17 +736,20 @@ page {
         color: #667eea;
       }
     }
+  }
 
   .filter-panel {
     width: 100%;
     position: absolute;
     left: 0;
-      top: 96rpx;
+    top: 180rpx;
     background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
 
     .filter-panel-content {
-        background-color: #ffff;
+      background-color: #ffffff;
       padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
       .filter-title {
         color: #2c3e50;
@@ -765,31 +775,84 @@ page {
         display: flex;
         flex-wrap: wrap;
         justify-content: flex-start;
+        gap: 16rpx;
 
         .state-item {
-            width: 210rpx;
+          padding: 0 32rpx;
-            height: 72rpx;
+          height: 68rpx;
-            border: 1rpx solid rgba(0, 0, 0, 0.25);
+          border: 2rpx solid #e8edf3;
-            border-radius: 72rpx;
+          border-radius: 34rpx;
           text-align: center;
-            line-height: 72rpx;
+          line-height: 68rpx;
-            margin: 0 20rpx 20rpx 0;
           font-size: 28rpx;
-            color: #000000;
+          color: #666666;
+          transition: all 0.3s ease;
+          background: #ffffff;
+          box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+          
+          &:active {
+            transform: scale(0.95);
+          }
         }
 
         .active {
-            background-color: rgba(222, 241, 255, 1);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border: 1rpx solid rgba(22, 119, 255, 1);
+          border: 2rpx solid transparent;
+          color: #ffffff;
+          box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+          font-weight: 600;
         }
       }
     }
 
     .btn-box {
       display: flex;
+      gap: 20rpx;
       padding: 24rpx 30rpx;
       background-color: #fff;
       box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+      
+      .btn-reset,
+      .btn-confirm {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8rpx;
+        height: 88rpx;
+        border-radius: 12rpx;
+        font-size: 30rpx;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        
+        &:active {
+          transform: scale(0.98);
+          opacity: 0.9;
+        }
+        
+        text {
+          line-height: 1;
+        }
+      }
+      
+      .btn-reset {
+        flex: 1;
+        background: #f5f7fa;
+        border: 2rpx solid #dcdfe6;
+        
+        text {
+          color: #606266;
+        }
+      }
+      
+      .btn-confirm {
+        flex: 1;
+        background: #667eea;
+        box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+        border: none;
+        
+        text {
+          color: #ffffff;
+        }
       }
     }
   }

src/pages/statistic/bill/creditRecordAnalysis/index.vue

@@ -176,9 +176,19 @@
             </view>
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
+              <view class="btn-reset" @click="resetQuery()">
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
               </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
+            </view>
+          </view>
+        </u-transition>
+        
+        <!-- 日期选择器 -->
         <u-datetime-picker
           :closeOnClickOverlay="true"
           :show="timeShow"
@@ -189,8 +199,6 @@
           @cancel="openOrCloseDate"
           @confirm="confirm"
         ></u-datetime-picker>
-          </view>
-        </u-transition>
   
   <!-- 曲线图展示 -->
   <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -728,6 +736,7 @@ page {
         line-height: 1;
       }
     }
+  }
 
   .filter-panel {
       width: 100%;
@@ -735,10 +744,12 @@ page {
       left: 0;
       top: 96rpx;
       background-color: rgba(0, 0, 0, 0.5);
+      z-index: 999;
   
       .filter-panel-content {
-        background-color: #ffff;
+        background-color: #ffffff;
         padding: 0 30rpx 30rpx;
+        border-radius: 16rpx 16rpx 0 0;
   
         .filter-title {
           color: #2c3e50;
@@ -786,9 +797,50 @@ page {
   
       .btn-box {
         display: flex;
+        gap: 20rpx;
         padding: 24rpx 30rpx;
         background-color: #fff;
         box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+        
+        .btn-reset,
+        .btn-confirm {
+          flex: 1;
+          height: 80rpx;
+          border-radius: 12rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8rpx;
+          transition: all 0.3s ease;
+          
+          text {
+            font-size: 28rpx;
+            font-weight: 500;
+            line-height: 1;
+          }
+          
+          &:active {
+            transform: scale(0.98);
+            opacity: 0.8;
+          }
+        }
+        
+        .btn-reset {
+          background: #f5f7fa;
+          border: 2rpx solid #dcdfe6;
+          
+          text {
+            color: #606266;
+          }
+        }
+        
+        .btn-confirm {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+          
+          text {
+            color: #ffffff;
+          }
         }
       }
   }

src/pages/statistic/bill/futuresAnalysis/index.vue

@@ -93,8 +93,7 @@
   <u-transition :show="filterPanel" mode="fade">
     <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
       <view class="filter-panel-content">
-             
+        <view class="filter-title">统计日期</view>
-              <view class="select-header">统计日期</view>
         <view class="selcet-content" style="padding: 0 24rpx">
           <u-input
             :disabled="true"
@@ -123,9 +122,19 @@
         </view>
       </view>
       <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
+        <view class="btn-reset" @click="resetQuery()">
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+          <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+          <text>重置</text>
         </view>
+        <view class="btn-confirm" @click="searchSubmit()">
+          <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+          <text>确定</text>
+        </view>
+      </view>
+    </view>
+  </u-transition>
+        
+        <!-- 日期选择器 -->
         <u-datetime-picker
           :closeOnClickOverlay="true"
           :show="timeShow"
@@ -135,8 +144,6 @@
           @cancel="openOrCloseDate"
           @confirm="confirm"
         ></u-datetime-picker>
-          </view>
-        </u-transition>
   
   <!-- 曲线图展示 -->
   <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -756,13 +763,15 @@ page {
         color: #667eea;
       }
     }
+  }
 
   .filter-panel {
       width: 100%;
       position: absolute;
       left: 0;
-      top: 96rpx;
+      top: 180rpx;
       background-color: rgba(0, 0, 0, 0.5);
+      z-index: 999;
   
       .filter-panel-content {
         background-color: #ffffff;
@@ -793,22 +802,32 @@ page {
           display: flex;
           flex-wrap: wrap;
           justify-content: flex-start;
+          gap: 16rpx;
   
           .state-item {
-            width: 210rpx;
+            padding: 0 32rpx;
-            height: 72rpx;
+            height: 68rpx;
-            border: 1rpx solid rgba(0, 0, 0, 0.25);
+            border: 2rpx solid #e8edf3;
-            border-radius: 72rpx;
+            border-radius: 34rpx;
             text-align: center;
-            line-height: 72rpx;
+            line-height: 68rpx;
-            margin: 0 20rpx 20rpx 0;
             font-size: 28rpx;
-            color: #000000;
+            color: #666666;
+            transition: all 0.3s ease;
+            background: #ffffff;
+            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+            
+            &:active {
+              transform: scale(0.95);
+            }
           }
   
           .active {
-            background-color: rgba(222, 241, 255, 1);
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border: 1rpx solid rgba(22, 119, 255, 1);
+            border: 2rpx solid transparent;
+            color: #ffffff;
+            box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+            font-weight: 600;
           }
         }
       }
@@ -819,6 +838,48 @@ page {
         padding: 24rpx 30rpx;
         background-color: #fff;
         box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+        
+        .btn-reset,
+        .btn-confirm {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8rpx;
+          height: 88rpx;
+          border-radius: 12rpx;
+          font-size: 30rpx;
+          font-weight: 600;
+          transition: all 0.3s ease;
+          
+          &:active {
+            transform: scale(0.98);
+            opacity: 0.9;
+          }
+          
+          text {
+            line-height: 1;
+          }
+        }
+        
+        .btn-reset {
+          flex: 1;
+          background: #f5f7fa;
+          border: 2rpx solid #dcdfe6;
+          
+          text {
+            color: #606266;
+          }
+        }
+        
+        .btn-confirm {
+          flex: 1;
+          background: #667eea;
+          box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+          border: none;
+          
+          text {
+            color: #ffffff;
+          }
         }
       }
     }

src/pages/statistic/bill/investAnalysis/index.vue

@@ -98,8 +98,7 @@
   <u-transition :show="filterPanel" mode="fade">
     <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
       <view class="filter-panel-content">
-             
+        <view class="filter-title">统计日期</view>
-              <view class="select-header">统计日期</view>
         <view class="selcet-content" style="padding: 0 24rpx">
           <u-input
             :disabled="true"
@@ -128,9 +127,19 @@
         </view>
       </view>
       <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
+        <view class="btn-reset" @click="resetQuery()">
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+          <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+          <text>重置</text>
         </view>
+        <view class="btn-confirm" @click="searchSubmit()">
+          <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+          <text>确定</text>
+        </view>
+      </view>
+    </view>
+  </u-transition>
+        
+        <!-- 日期选择器 -->
         <u-datetime-picker
           :closeOnClickOverlay="true"
           :show="timeShow"
@@ -140,8 +149,6 @@
           @cancel="openOrCloseDate"
           @confirm="confirm"
         ></u-datetime-picker>
-          </view>
-        </u-transition>
   
   <!-- 曲线图展示 -->
   <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -754,6 +761,7 @@ page {
         color: #667eea;
       }
     }
+  }
 
   .filter-panel {
       width: 100%;
@@ -761,6 +769,7 @@ page {
       left: 0;
       top: 96rpx;
       background-color: rgba(0, 0, 0, 0.5);
+      z-index: 999;
   
       .filter-panel-content {
         background-color: #ffffff;
@@ -791,22 +800,32 @@ page {
           display: flex;
           flex-wrap: wrap;
           justify-content: flex-start;
+          gap: 16rpx;
   
           .state-item {
-            width: 210rpx;
+            padding: 0 32rpx;
-            height: 72rpx;
+            height: 68rpx;
-            border: 1rpx solid rgba(0, 0, 0, 0.25);
+            border: 2rpx solid #e8edf3;
-            border-radius: 72rpx;
+            border-radius: 34rpx;
             text-align: center;
-            line-height: 72rpx;
+            line-height: 68rpx;
-            margin: 0 20rpx 20rpx 0;
             font-size: 28rpx;
-            color: #000000;
+            color: #666666;
+            transition: all 0.3s ease;
+            background: #ffffff;
+            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+            
+            &:active {
+              transform: scale(0.95);
+            }
           }
   
           .active {
-            background-color: rgba(222, 241, 255, 1);
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border: 1rpx solid rgba(22, 119, 255, 1);
+            border: 2rpx solid transparent;
+            color: #ffffff;
+            box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+            font-weight: 600;
           }
         }
       }
@@ -817,6 +836,48 @@ page {
         padding: 24rpx 30rpx;
         background-color: #fff;
         box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+        
+        .btn-reset,
+        .btn-confirm {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8rpx;
+          height: 88rpx;
+          border-radius: 12rpx;
+          font-size: 30rpx;
+          font-weight: 600;
+          transition: all 0.3s ease;
+          
+          &:active {
+            transform: scale(0.98);
+            opacity: 0.9;
+          }
+          
+          text {
+            line-height: 1;
+          }
+        }
+        
+        .btn-reset {
+          flex: 1;
+          background: #f5f7fa;
+          border: 2rpx solid #dcdfe6;
+          
+          text {
+            color: #606266;
+          }
+        }
+        
+        .btn-confirm {
+          flex: 1;
+          background: #667eea;
+          box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+          border: none;
+          
+          text {
+            color: #ffffff;
+          }
         }
       }
     }

src/pages/statistic/bill/onlineLendAnalysis/index.vue

@@ -133,8 +133,7 @@
   <u-transition :show="filterPanel" mode="fade">
     <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
       <view class="filter-panel-content">
-             
+        <view class="filter-title">还款日期</view>
-              <view class="select-header">还款日期</view>
         <view class="selcet-content" style="padding: 0 24rpx">
           <u-input
             :disabled="true"
@@ -163,9 +162,19 @@
         </view>
       </view>
       <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
+        <view class="btn-reset" @click="resetQuery()">
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+          <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+          <text>重置</text>
         </view>
+        <view class="btn-confirm" @click="searchSubmit()">
+          <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+          <text>确定</text>
+        </view>
+      </view>
+    </view>
+  </u-transition>
+        
+        <!-- 日期选择器 -->
         <u-datetime-picker
           :closeOnClickOverlay="true"
           :show="timeShow"
@@ -176,8 +185,6 @@
           @cancel="openOrCloseDate"
           @confirm="confirm"
         ></u-datetime-picker>
-          </view>
-        </u-transition>
   
   <!-- 曲线图展示 -->
   <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -779,13 +786,15 @@ page {
         color: #667eea;
       }
     }
+  }
 
   .filter-panel {
       width: 100%;
       position: absolute;
       left: 0;
-      top: 96rpx;
+      top: 180rpx;
       background-color: rgba(0, 0, 0, 0.5);
+      z-index: 999;
   
       .filter-panel-content {
         background-color: #ffffff;
@@ -816,22 +825,32 @@ page {
           display: flex;
           flex-wrap: wrap;
           justify-content: flex-start;
+          gap: 16rpx;
   
           .state-item {
-            width: 210rpx;
+            padding: 0 32rpx;
-            height: 72rpx;
+            height: 68rpx;
-            border: 1rpx solid rgba(0, 0, 0, 0.25);
+            border: 2rpx solid #e8edf3;
-            border-radius: 72rpx;
+            border-radius: 34rpx;
             text-align: center;
-            line-height: 72rpx;
+            line-height: 68rpx;
-            margin: 0 20rpx 20rpx 0;
             font-size: 28rpx;
-            color: #000000;
+            color: #666666;
+            transition: all 0.3s ease;
+            background: #ffffff;
+            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+            
+            &:active {
+              transform: scale(0.95);
+            }
           }
   
           .active {
-            background-color: rgba(222, 241, 255, 1);
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border: 1rpx solid rgba(22, 119, 255, 1);
+            border: 2rpx solid transparent;
+            color: #ffffff;
+            box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+            font-weight: 600;
           }
         }
       }
@@ -842,6 +861,48 @@ page {
         padding: 24rpx 30rpx;
         background-color: #fff;
         box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+        
+        .btn-reset,
+        .btn-confirm {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8rpx;
+          height: 88rpx;
+          border-radius: 12rpx;
+          font-size: 30rpx;
+          font-weight: 600;
+          transition: all 0.3s ease;
+          
+          &:active {
+            transform: scale(0.98);
+            opacity: 0.9;
+          }
+          
+          text {
+            line-height: 1;
+          }
+        }
+        
+        .btn-reset {
+          flex: 1;
+          background: #f5f7fa;
+          border: 2rpx solid #dcdfe6;
+          
+          text {
+            color: #606266;
+          }
+        }
+        
+        .btn-confirm {
+          flex: 1;
+          background: #667eea;
+          box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+          border: none;
+          
+          text {
+            color: #ffffff;
+          }
         }
       }
   }

src/pages/statistic/bill/onlineLendSettledAnalysis/index.vue

@@ -123,9 +123,19 @@
             </view>
             </view>
             <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
+              <view class="btn-reset" @click="resetQuery()">
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+                <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+                <text>重置</text>
               </view>
+              <view class="btn-confirm" @click="searchSubmit()">
+                <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+                <text>确定</text>
+              </view>
+            </view>
+          </view>
+        </u-transition>
+        
+        <!-- 日期选择器 -->
         <u-datetime-picker
           :closeOnClickOverlay="true"
           :show="timeShow"
@@ -135,8 +145,6 @@
           @cancel="openOrCloseDate"
           @confirm="confirm"
         ></u-datetime-picker>
-          </view>
-        </u-transition>
   
   <!-- 曲线图展示 -->
   <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -727,17 +735,20 @@ page {
         line-height: 1;
       }
     }
+  }
 
   .filter-panel {
       width: 100%;
       position: absolute;
       left: 0;
-      top: 96rpx;
+      top: 180rpx;
       background-color: rgba(0, 0, 0, 0.5);
+      z-index: 999;
   
       .filter-panel-content {
-        background-color: #ffff;
+        background-color: #ffffff;
         padding: 0 30rpx 30rpx;
+        border-radius: 16rpx 16rpx 0 0;
   
         .filter-title {
           color: #2c3e50;
@@ -785,9 +796,50 @@ page {
   
       .btn-box {
         display: flex;
+        gap: 20rpx;
         padding: 24rpx 30rpx;
         background-color: #fff;
         box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+        
+        .btn-reset,
+        .btn-confirm {
+          flex: 1;
+          height: 80rpx;
+          border-radius: 12rpx;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8rpx;
+          transition: all 0.3s ease;
+          
+          text {
+            font-size: 28rpx;
+            font-weight: 500;
+            line-height: 1;
+          }
+          
+          &:active {
+            transform: scale(0.98);
+            opacity: 0.8;
+          }
+        }
+        
+        .btn-reset {
+          background: #f5f7fa;
+          border: 2rpx solid #dcdfe6;
+          
+          text {
+            color: #606266;
+          }
+        }
+        
+        .btn-confirm {
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+          
+          text {
+            color: #ffffff;
+          }
         }
       }
     }

src/pages/statistic/bill/stocksAnalysis/index.vue

@@ -93,8 +93,7 @@
   <u-transition :show="filterPanel" mode="fade">
     <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
       <view class="filter-panel-content">
-             
+        <view class="filter-title">统计日期</view>
-              <view class="select-header">统计日期</view>
         <view class="selcet-content" style="padding: 0 24rpx">
           <u-input
             :disabled="true"
@@ -123,9 +122,19 @@
         </view>
       </view>
       <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
+        <view class="btn-reset" @click="resetQuery()">
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+          <uni-icons type="reload" size="16" color="#909399"></uni-icons>
+          <text>重置</text>
         </view>
+        <view class="btn-confirm" @click="searchSubmit()">
+          <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
+          <text>确定</text>
+        </view>
+      </view>
+    </view>
+  </u-transition>
+        
+        <!-- 日期选择器 -->
         <u-datetime-picker
           :closeOnClickOverlay="true"
           :show="timeShow"
@@ -135,8 +144,6 @@
           @cancel="openOrCloseDate"
           @confirm="confirm"
         ></u-datetime-picker>
-          </view>
-        </u-transition>
   
   <!-- 曲线图展示 -->
   <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -751,13 +758,15 @@ page {
         color: #667eea;
       }
     }
+  }
 
   .filter-panel {
       width: 100%;
       position: absolute;
       left: 0;
-      top: 96rpx;
+      top: 180rpx;
       background-color: rgba(0, 0, 0, 0.5);
+      z-index: 999;
   
       .filter-panel-content {
         background-color: #ffffff;
@@ -788,22 +797,32 @@ page {
           display: flex;
           flex-wrap: wrap;
           justify-content: flex-start;
+          gap: 16rpx;
   
           .state-item {
-            width: 210rpx;
+            padding: 0 32rpx;
-            height: 72rpx;
+            height: 68rpx;
-            border: 1rpx solid rgba(0, 0, 0, 0.25);
+            border: 2rpx solid #e8edf3;
-            border-radius: 72rpx;
+            border-radius: 34rpx;
             text-align: center;
-            line-height: 72rpx;
+            line-height: 68rpx;
-            margin: 0 20rpx 20rpx 0;
             font-size: 28rpx;
-            color: #000000;
+            color: #666666;
+            transition: all 0.3s ease;
+            background: #ffffff;
+            box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
+            
+            &:active {
+              transform: scale(0.95);
+            }
           }
   
           .active {
-            background-color: rgba(222, 241, 255, 1);
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border: 1rpx solid rgba(22, 119, 255, 1);
+            border: 2rpx solid transparent;
+            color: #ffffff;
+            box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
+            font-weight: 600;
           }
         }
       }
@@ -814,6 +833,48 @@ page {
         padding: 24rpx 30rpx;
         background-color: #fff;
         box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+        
+        .btn-reset,
+        .btn-confirm {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8rpx;
+          height: 88rpx;
+          border-radius: 12rpx;
+          font-size: 30rpx;
+          font-weight: 600;
+          transition: all 0.3s ease;
+          
+          &:active {
+            transform: scale(0.98);
+            opacity: 0.9;
+          }
+          
+          text {
+            line-height: 1;
+          }
+        }
+        
+        .btn-reset {
+          flex: 1;
+          background: #f5f7fa;
+          border: 2rpx solid #dcdfe6;
+          
+          text {
+            color: #606266;
+          }
+        }
+        
+        .btn-confirm {
+          flex: 1;
+          background: #667eea;
+          box-shadow: 0 2rpx 8rpx rgba(102, 126, 234, 0.2);
+          border: none;
+          
+          text {
+            color: #ffffff;
+          }
         }
       }
   }