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

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

@@ -118,53 +118,62 @@
     </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="select-header">账单时间</view>
+  <!-- 筛选面板 -->
-            <view class="selcet-content" style="padding: 0 24rpx">
+  <u-transition :show="filterPanel" mode="fade">
-              <u-input
+    <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
-                :disabled="true"
+      <view class="filter-panel-content">
-                :disabledColor="'#fff'"
+        <view class="filter-title">账单时间</view>
-                class="dateInput"
+        <view class="selcet-content" style="padding: 0 24rpx">
-                border="surround"
+          <u-input
-                v-model="queryParams.startTime"
+            :disabled="true"
-                placeholder="请选择开始时间"
+            :disabledColor="'#fff'"
-              >
+            class="dateInput"
-                <template v-slot:suffix>
+            border="surround"
-                  <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
+            v-model="queryParams.startTime"
-                </template>
+            placeholder="请选择开始时间"
-              </u-input>
+          >
-              <u-input
+            <template v-slot:suffix>
-                :disabled="true"
+              <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
-                :disabledColor="'#fff'"
+            </template>
-                class="dateInput"
+          </u-input>
-                border="surround"
+          <u-input
-                v-model="queryParams.endTime"
+            :disabled="true"
-                placeholder="请选择结束时间"
+            :disabledColor="'#fff'"
-              >
+            class="dateInput"
-                <template v-slot:suffix>
+            border="surround"
-                  <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
+            v-model="queryParams.endTime"
-                </template>
+            placeholder="请选择结束时间"
-              </u-input>
+          >
-            </view>
+            <template v-slot:suffix>
-            </view>
+              <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
-            <view class="btn-box">
+            </template>
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
+          </u-input>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+        </view>
-            </view>
+      </view>
-            <u-datetime-picker
+      <view class="btn-box">
-              :closeOnClickOverlay="true"
+        <view class="btn-reset" @click="resetQuery()">
-              :show="timeShow"
+          <uni-icons type="reload" size="16" color="#909399"></uni-icons>
-              v-model="time"
+          <text>重置</text>
-              mode="year-month"
+        </view>
-              @close="openOrCloseDate"
+        <view class="btn-confirm" @click="searchSubmit()">
-              @cancel="openOrCloseDate"
+          <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
-              @confirm="confirm"
+          <text>确定</text>
-            ></u-datetime-picker>
+        </view>
-          </view>
+      </view>
-        </u-transition>
+    </view>
+  </u-transition>
+  
+  <!-- 日期选择器 -->
+  <u-datetime-picker
+    :closeOnClickOverlay="true"
+    :show="timeShow"
+    v-model="time"
+    mode="year-month"
+    @close="openOrCloseDate"
+    @cancel="openOrCloseDate"
+    @confirm="confirm"
+  ></u-datetime-picker>
   
   <!-- 曲线图展示 -->
   <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -759,70 +768,123 @@ page {
         color: #667eea;
       }
     }
+  }
   
-    .filter-panel {
+  .filter-panel {
-      width: 100%;
+    width: 100%;
-      position: absolute;
+    position: absolute;
-      left: 0;
+    left: 0;
-      top: 96rpx;
+    top: 180rpx;
-      background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.5);
-      z-index: 999;
+    z-index: 999;
 
-      .filter-panel-content {
+    .filter-panel-content {
-        background-color: #ffffff;
+      background-color: #ffffff;
-        padding: 0 30rpx 30rpx;
+      padding: 0 30rpx 30rpx;
-        border-radius: 16rpx 16rpx 0 0;
+      border-radius: 16rpx 16rpx 0 0;
 
-        .filter-title {
+      .filter-title {
-          color: #2c3e50;
+        color: #2c3e50;
-          font-size: 32rpx;
+        font-size: 32rpx;
-          font-weight: 600;
+        font-weight: 600;
-          padding: 32rpx 0 24rpx 20rpx;
+        padding: 32rpx 0 24rpx 20rpx;
-          position: relative;
+        position: relative;
-          display: flex;
+        display: flex;
-          align-items: center;
+        align-items: center;
         
-          &::before {
+        &::before {
-            content: '';
+          content: '';
-            width: 6rpx;
+          width: 6rpx;
-            height: 32rpx;
+          height: 32rpx;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-radius: 3rpx;
+          border-radius: 3rpx;
-            margin-right: 12rpx;
+          margin-right: 12rpx;
-            flex-shrink: 0;
+          flex-shrink: 0;
-          }
-        }
-  
-        .state-list {
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: flex-start;
-  
-          .state-item {
-            width: 210rpx;
-            height: 72rpx;
-            border: 1rpx solid rgba(0, 0, 0, 0.25);
-            border-radius: 72rpx;
-            text-align: center;
-            line-height: 72rpx;
-            margin: 0 20rpx 20rpx 0;
-            font-size: 28rpx;
-            color: #000000;
-          }
-  
-          .active {
-            background-color: rgba(222, 241, 255, 1);
-            border: 1rpx solid rgba(22, 119, 255, 1);
-          }
         }
       }
 
-      .btn-box {
+      .state-list {
         display: flex;
-        gap: 20rpx;
+        flex-wrap: wrap;
-        padding: 24rpx 30rpx;
+        justify-content: flex-start;
-        background-color: #fff;
+        gap: 16rpx;
-        box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+
+        .state-item {
+          padding: 0 32rpx;
+          height: 68rpx;
+          border: 2rpx solid #e8edf3;
+          border-radius: 34rpx;
+          text-align: center;
+          line-height: 68rpx;
+          font-size: 28rpx;
+          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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          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/creditInstallmentAnalysis/index.vue

@@ -128,54 +128,62 @@
     </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>
+  <u-transition :show="filterPanel" mode="fade">
-            <view class="selcet-content" style="padding: 0 24rpx">
+    <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
-              <u-input
+      <view class="filter-panel-content">
-                :disabled="true"
+        <view class="filter-title">还款日期</view>
-                :disabledColor="'#fff'"
+        <view class="selcet-content" style="padding: 0 24rpx">
-                class="dateInput"
+          <u-input
-                border="surround"
+            :disabled="true"
-                v-model="queryParams.startTime"
+            :disabledColor="'#fff'"
-                placeholder="请选择开始时间"
+            class="dateInput"
-              >
+            border="surround"
-                <template v-slot:suffix>
+            v-model="queryParams.startTime"
-                  <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
+            placeholder="请选择开始时间"
-                </template>
+          >
-              </u-input>
+            <template v-slot:suffix>
-              <u-input
+              <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
-                :disabled="true"
+            </template>
-                :disabledColor="'#fff'"
+          </u-input>
-                class="dateInput"
+          <u-input
-                border="surround"
+            :disabled="true"
-                v-model="queryParams.endTime"
+            :disabledColor="'#fff'"
-                placeholder="请选择结束时间"
+            class="dateInput"
-              >
+            border="surround"
-                <template v-slot:suffix>
+            v-model="queryParams.endTime"
-                  <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
+            placeholder="请选择结束时间"
-                </template>
+          >
-              </u-input>
+            <template v-slot:suffix>
-            </view>
+              <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
-            </view>
+            </template>
-            <view class="btn-box">
+          </u-input>
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
+        </view>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
+      </view>
-            </view>
+      <view class="btn-box">
-            <u-datetime-picker
+        <view class="btn-reset" @click="resetQuery()">
-              :closeOnClickOverlay="true"
+          <uni-icons type="reload" size="16" color="#909399"></uni-icons>
-              :show="timeShow"
+          <text>重置</text>
-              v-model="time"
+        </view>
-              mode="date"
+        <view class="btn-confirm" @click="searchSubmit()">
-              :minDate="-2209017600000"
+          <uni-icons type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
-              @close="openOrCloseDate"
+          <text>确定</text>
-              @cancel="openOrCloseDate"
+        </view>
-              @confirm="confirm"
+      </view>
-            ></u-datetime-picker>
+    </view>
-          </view>
+  </u-transition>
-        </u-transition>
+  
+  <!-- 日期选择器 -->
+  <u-datetime-picker
+    :closeOnClickOverlay="true"
+    :show="timeShow"
+    v-model="time"
+    mode="date"
+    :minDate="-2209017600000"
+    @close="openOrCloseDate"
+    @cancel="openOrCloseDate"
+    @confirm="confirm"
+  ></u-datetime-picker>
   
   <!-- 曲线图展示 -->
   <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -775,67 +783,123 @@ page {
         color: #667eea;
       }
     }
+  }
 
-    .filter-panel {
+  .filter-panel {
-      width: 100%;
+    width: 100%;
-      position: absolute;
+    position: absolute;
-      left: 0;
+    left: 0;
-      top: 96rpx;
+    top: 180rpx;
-      background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
 
-      .filter-panel-content {
+    .filter-panel-content {
-        background-color: #ffff;
+      background-color: #ffffff;
-        padding: 0 30rpx 30rpx;
+      padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
-        .filter-title {
+      .filter-title {
-          color: #2c3e50;
+        color: #2c3e50;
-          font-size: 32rpx;
+        font-size: 32rpx;
-          font-weight: 600;
+        font-weight: 600;
-          padding: 32rpx 0 24rpx 20rpx;
+        padding: 32rpx 0 24rpx 20rpx;
-          position: relative;
+        position: relative;
-          display: flex;
+        display: flex;
-          align-items: center;
+        align-items: center;
         
-          &::before {
+        &::before {
-            content: '';
+          content: '';
-            width: 6rpx;
+          width: 6rpx;
-            height: 32rpx;
+          height: 32rpx;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-radius: 3rpx;
+          border-radius: 3rpx;
-            margin-right: 12rpx;
+          margin-right: 12rpx;
-            flex-shrink: 0;
+          flex-shrink: 0;
-          }
-        }
-  
-        .state-list {
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: flex-start;
-  
-          .state-item {
-            width: 210rpx;
-            height: 72rpx;
-            border: 1rpx solid rgba(0, 0, 0, 0.25);
-            border-radius: 72rpx;
-            text-align: center;
-            line-height: 72rpx;
-            margin: 0 20rpx 20rpx 0;
-            font-size: 28rpx;
-            color: #000000;
-          }
-  
-          .active {
-            background-color: rgba(222, 241, 255, 1);
-            border: 1rpx solid rgba(22, 119, 255, 1);
-          }
         }
       }
 
-      .btn-box {
+      .state-list {
         display: flex;
-        padding: 24rpx 30rpx;
+        flex-wrap: wrap;
-        background-color: #fff;
+        justify-content: flex-start;
-        box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+        gap: 16rpx;
+
+        .state-item {
+          padding: 0 32rpx;
+          height: 68rpx;
+          border: 2rpx solid #e8edf3;
+          border-radius: 34rpx;
+          text-align: center;
+          line-height: 68rpx;
+          font-size: 28rpx;
+          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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          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

@@ -90,52 +90,59 @@
   </u-sticky>
   
   <u-transition :show="filterPanel" mode="fade">
-          <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
+    <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
-            <view class="filter-panel-content">
+      <view class="filter-panel-content">
+        <view class="filter-title">分期时间</view>
+        <view class="selcet-content" style="padding: 0 24rpx">
+          <u-input
+            :disabled="true"
+            :disabledColor="'#fff'"
+            class="dateInput"
+            border="surround"
+            v-model="queryParams.startTime"
+            placeholder="请选择开始时间"
+          >
+            <template v-slot:suffix>
+              <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
+            </template>
+          </u-input>
+          <u-input
+            :disabled="true"
+            :disabledColor="'#fff'"
+            class="dateInput"
+            border="surround"
+            v-model="queryParams.endTime"
+            placeholder="请选择结束时间"
+          >
+            <template v-slot:suffix>
+              <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
+            </template>
+          </u-input>
+        </view>
+      </view>
+      <view class="btn-box">
+        <view class="btn-reset" @click="resetQuery()">
+          <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>
   
-              <view class="filter-title">分期时间</view>
+  <!-- 日期选择器 -->
-            <view class="selcet-content" style="padding: 0 24rpx">
+  <u-datetime-picker
-              <u-input
+    :closeOnClickOverlay="true"
-                :disabled="true"
+    :show="timeShow"
-                :disabledColor="'#fff'"
+    v-model="time"
-                class="dateInput"
+    mode="year-month"
-                border="surround"
+    @close="openOrCloseDate"
-                v-model="queryParams.startTime"
+    @cancel="openOrCloseDate"
-                placeholder="请选择开始时间"
+    @confirm="confirm"
-              >
+  ></u-datetime-picker>
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
-                </template>
-              </u-input>
-              <u-input
-                :disabled="true"
-                :disabledColor="'#fff'"
-                class="dateInput"
-                border="surround"
-                v-model="queryParams.endTime"
-                placeholder="请选择结束时间"
-              >
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
-                </template>
-              </u-input>
-            </view>
-            </view>
-            <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
-            </view>
-            <u-datetime-picker
-              :closeOnClickOverlay="true"
-              :show="timeShow"
-              v-model="time"
-              mode="year-month"
-              @close="openOrCloseDate"
-              @cancel="openOrCloseDate"
-              @confirm="confirm"
-            ></u-datetime-picker>
-          </view>
-        </u-transition>
   
   <!-- 曲线图展示 -->
   <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -729,67 +736,123 @@ page {
         color: #667eea;
       }
     }
+  }
 
-    .filter-panel {
+  .filter-panel {
-      width: 100%;
+    width: 100%;
-      position: absolute;
+    position: absolute;
-      left: 0;
+    left: 0;
-      top: 96rpx;
+    top: 180rpx;
-      background-color: rgba(0, 0, 0, 0.5);
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
 
-      .filter-panel-content {
+    .filter-panel-content {
-        background-color: #ffff;
+      background-color: #ffffff;
-        padding: 0 30rpx 30rpx;
+      padding: 0 30rpx 30rpx;
+      border-radius: 16rpx 16rpx 0 0;
 
-        .filter-title {
+      .filter-title {
-          color: #2c3e50;
+        color: #2c3e50;
-          font-size: 32rpx;
+        font-size: 32rpx;
-          font-weight: 600;
+        font-weight: 600;
-          padding: 32rpx 0 24rpx 20rpx;
+        padding: 32rpx 0 24rpx 20rpx;
-          position: relative;
+        position: relative;
-          display: flex;
+        display: flex;
-          align-items: center;
+        align-items: center;
         
-          &::before {
+        &::before {
-            content: '';
+          content: '';
-            width: 6rpx;
+          width: 6rpx;
-            height: 32rpx;
+          height: 32rpx;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-radius: 3rpx;
+          border-radius: 3rpx;
-            margin-right: 12rpx;
+          margin-right: 12rpx;
-            flex-shrink: 0;
+          flex-shrink: 0;
-          }
-        }
-  
-        .state-list {
-          display: flex;
-          flex-wrap: wrap;
-          justify-content: flex-start;
-  
-          .state-item {
-            width: 210rpx;
-            height: 72rpx;
-            border: 1rpx solid rgba(0, 0, 0, 0.25);
-            border-radius: 72rpx;
-            text-align: center;
-            line-height: 72rpx;
-            margin: 0 20rpx 20rpx 0;
-            font-size: 28rpx;
-            color: #000000;
-          }
-  
-          .active {
-            background-color: rgba(222, 241, 255, 1);
-            border: 1rpx solid rgba(22, 119, 255, 1);
-          }
         }
       }
 
-      .btn-box {
+      .state-list {
         display: flex;
-        padding: 24rpx 30rpx;
+        flex-wrap: wrap;
-        background-color: #fff;
+        justify-content: flex-start;
-        box-shadow: 0rpx -10rpx 20rpx #EEEEEE;
+        gap: 16rpx;
+
+        .state-item {
+          padding: 0 32rpx;
+          height: 68rpx;
+          border: 2rpx solid #e8edf3;
+          border-radius: 34rpx;
+          text-align: center;
+          line-height: 68rpx;
+          font-size: 28rpx;
+          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: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+          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,22 +176,30 @@
             </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>
-            <u-datetime-picker
-              :closeOnClickOverlay="true"
-              :show="timeShow"
-              v-model="time"
-              mode="date"
-              :minDate="-2209017600000"
-              @close="openOrCloseDate"
-              @cancel="openOrCloseDate"
-              @confirm="confirm"
-            ></u-datetime-picker>
           </view>
         </u-transition>
         
+        <!-- 日期选择器 -->
+        <u-datetime-picker
+          :closeOnClickOverlay="true"
+          :show="timeShow"
+          v-model="time"
+          mode="date"
+          :minDate="-2209017600000"
+          @close="openOrCloseDate"
+          @cancel="openOrCloseDate"
+          @confirm="confirm"
+        ></u-datetime-picker>
+  
   <!-- 曲线图展示 -->
   <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
     <qiun-data-charts 
@@ -728,17 +736,20 @@ page {
         line-height: 1;
       }
     }
+  }
 
-    .filter-panel {
+  .filter-panel {
       width: 100%;
       position: absolute;
       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,11 +797,52 @@ 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;
+          }
+        }
       }
-    }
   }
 
   .list-item {

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

@@ -91,52 +91,59 @@
   </u-sticky>
   
   <u-transition :show="filterPanel" mode="fade">
-          <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
+    <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
-            <view class="filter-panel-content">
+      <view class="filter-panel-content">
+        <view class="filter-title">统计日期</view>
+        <view class="selcet-content" style="padding: 0 24rpx">
+          <u-input
+            :disabled="true"
+            :disabledColor="'#fff'"
+            class="dateInput"
+            border="surround"
+            v-model="queryParams.startTime"
+            placeholder="请选择开始时间"
+          >
+            <template v-slot:suffix>
+              <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
+            </template>
+          </u-input>
+          <u-input
+            :disabled="true"
+            :disabledColor="'#fff'"
+            class="dateInput"
+            border="surround"
+            v-model="queryParams.endTime"
+            placeholder="请选择结束时间"
+          >
+            <template v-slot:suffix>
+              <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
+            </template>
+          </u-input>
+        </view>
+      </view>
+      <view class="btn-box">
+        <view class="btn-reset" @click="resetQuery()">
+          <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>
         
-              <view class="select-header">统计日期</view>
+        <!-- 日期选择器 -->
-            <view class="selcet-content" style="padding: 0 24rpx">
+        <u-datetime-picker
-              <u-input
+          :closeOnClickOverlay="true"
-                :disabled="true"
+          :show="timeShow"
-                :disabledColor="'#fff'"
+          v-model="time"
-                class="dateInput"
+          mode="year-month"
-                border="surround"
+          @close="openOrCloseDate"
-                v-model="queryParams.startTime"
+          @cancel="openOrCloseDate"
-                placeholder="请选择开始时间"
+          @confirm="confirm"
-              >
+        ></u-datetime-picker>
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
-                </template>
-              </u-input>
-              <u-input
-                :disabled="true"
-                :disabledColor="'#fff'"
-                class="dateInput"
-                border="surround"
-                v-model="queryParams.endTime"
-                placeholder="请选择结束时间"
-              >
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
-                </template>
-              </u-input>
-            </view>
-            </view>
-            <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
-            </view>
-            <u-datetime-picker
-              :closeOnClickOverlay="true"
-              :show="timeShow"
-              v-model="time"
-              mode="year-month"
-              @close="openOrCloseDate"
-              @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 {
+  .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,9 +838,51 @@ 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;
+          }
+        }
       }
     }
-  }
   
   .list-item {
     margin: 0 24rpx 16rpx;

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

@@ -96,52 +96,59 @@
   </u-sticky>
   
   <u-transition :show="filterPanel" mode="fade">
-          <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
+    <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
-            <view class="filter-panel-content">
+      <view class="filter-panel-content">
+        <view class="filter-title">统计日期</view>
+        <view class="selcet-content" style="padding: 0 24rpx">
+          <u-input
+            :disabled="true"
+            :disabledColor="'#fff'"
+            class="dateInput"
+            border="surround"
+            v-model="queryParams.startTime"
+            placeholder="请选择开始时间"
+          >
+            <template v-slot:suffix>
+              <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
+            </template>
+          </u-input>
+          <u-input
+            :disabled="true"
+            :disabledColor="'#fff'"
+            class="dateInput"
+            border="surround"
+            v-model="queryParams.endTime"
+            placeholder="请选择结束时间"
+          >
+            <template v-slot:suffix>
+              <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
+            </template>
+          </u-input>
+        </view>
+      </view>
+      <view class="btn-box">
+        <view class="btn-reset" @click="resetQuery()">
+          <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>
         
-              <view class="select-header">统计日期</view>
+        <!-- 日期选择器 -->
-            <view class="selcet-content" style="padding: 0 24rpx">
+        <u-datetime-picker
-              <u-input
+          :closeOnClickOverlay="true"
-                :disabled="true"
+          :show="timeShow"
-                :disabledColor="'#fff'"
+          v-model="time"
-                class="dateInput"
+          mode="year-month"
-                border="surround"
+          @close="openOrCloseDate"
-                v-model="queryParams.startTime"
+          @cancel="openOrCloseDate"
-                placeholder="请选择开始时间"
+          @confirm="confirm"
-              >
+        ></u-datetime-picker>
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
-                </template>
-              </u-input>
-              <u-input
-                :disabled="true"
-                :disabledColor="'#fff'"
-                class="dateInput"
-                border="surround"
-                v-model="queryParams.endTime"
-                placeholder="请选择结束时间"
-              >
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
-                </template>
-              </u-input>
-            </view>
-            </view>
-            <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
-            </view>
-            <u-datetime-picker
-              :closeOnClickOverlay="true"
-              :show="timeShow"
-              v-model="time"
-              mode="year-month"
-              @close="openOrCloseDate"
-              @cancel="openOrCloseDate"
-              @confirm="confirm"
-            ></u-datetime-picker>
-          </view>
-        </u-transition>
   
   <!-- 曲线图展示 -->
   <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
@@ -754,13 +761,15 @@ page {
         color: #667eea;
       }
     }
+  }
 
-    .filter-panel {
+  .filter-panel {
       width: 100%;
       position: absolute;
       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,9 +836,51 @@ 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;
+          }
+        }
       }
     }
-  }
   
   .list-item {
     margin: 0 24rpx 16rpx;

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

@@ -131,53 +131,60 @@
   </u-sticky>
   
   <u-transition :show="filterPanel" mode="fade">
-          <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
+    <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
-            <view class="filter-panel-content">
+      <view class="filter-panel-content">
+        <view class="filter-title">还款日期</view>
+        <view class="selcet-content" style="padding: 0 24rpx">
+          <u-input
+            :disabled="true"
+            :disabledColor="'#fff'"
+            class="dateInput"
+            border="surround"
+            v-model="queryParams.startTime"
+            placeholder="请选择开始时间"
+          >
+            <template v-slot:suffix>
+              <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
+            </template>
+          </u-input>
+          <u-input
+            :disabled="true"
+            :disabledColor="'#fff'"
+            class="dateInput"
+            border="surround"
+            v-model="queryParams.endTime"
+            placeholder="请选择结束时间"
+          >
+            <template v-slot:suffix>
+              <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
+            </template>
+          </u-input>
+        </view>
+      </view>
+      <view class="btn-box">
+        <view class="btn-reset" @click="resetQuery()">
+          <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>
         
-              <view class="select-header">还款日期</view>
+        <!-- 日期选择器 -->
-            <view class="selcet-content" style="padding: 0 24rpx">
+        <u-datetime-picker
-              <u-input
+          :closeOnClickOverlay="true"
-                :disabled="true"
+          :show="timeShow"
-                :disabledColor="'#fff'"
+          v-model="time"
-                class="dateInput"
+          mode="date"
-                border="surround"
+          :minDate="-2209017600000"
-                v-model="queryParams.startTime"
+          @close="openOrCloseDate"
-                placeholder="请选择开始时间"
+          @cancel="openOrCloseDate"
-              >
+          @confirm="confirm"
-                <template v-slot:suffix>
+        ></u-datetime-picker>
-                  <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
-                </template>
-              </u-input>
-              <u-input
-                :disabled="true"
-                :disabledColor="'#fff'"
-                class="dateInput"
-                border="surround"
-                v-model="queryParams.endTime"
-                placeholder="请选择结束时间"
-              >
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
-                </template>
-              </u-input>
-            </view>
-            </view>
-            <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
-            </view>
-            <u-datetime-picker
-              :closeOnClickOverlay="true"
-              :show="timeShow"
-              v-model="time"
-              mode="date"
-              :minDate="-2209017600000"
-              @close="openOrCloseDate"
-              @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 {
+  .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,8 +861,50 @@ 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;
+          }
+        }
       }
-    }
   }
 
   .list-item {

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

@@ -123,21 +123,29 @@
             </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>
-            <u-datetime-picker
-              :closeOnClickOverlay="true"
-              :show="timeShow"
-              v-model="time"
-              mode="year-month"
-              @close="openOrCloseDate"
-              @cancel="openOrCloseDate"
-              @confirm="confirm"
-            ></u-datetime-picker>
           </view>
         </u-transition>
         
+        <!-- 日期选择器 -->
+        <u-datetime-picker
+          :closeOnClickOverlay="true"
+          :show="timeShow"
+          v-model="time"
+          mode="year-month"
+          @close="openOrCloseDate"
+          @cancel="openOrCloseDate"
+          @confirm="confirm"
+        ></u-datetime-picker>
+  
   <!-- 曲线图展示 -->
   <view class="chart-container" v-if="listData.length>0 && viewMode === 'line'">
     <qiun-data-charts 
@@ -727,17 +735,20 @@ page {
         line-height: 1;
       }
     }
+  }
 
-    .filter-panel {
+  .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,12 +796,53 @@ 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;
+          }
+        }
       }
     }
-  }
   
   .list-item {
     margin: 0 24rpx 16rpx;

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

@@ -91,52 +91,59 @@
   </u-sticky>
   
   <u-transition :show="filterPanel" mode="fade">
-          <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
+    <view class="filter-panel" :style="{ height: `${windowHeight - 42}px` }">
-            <view class="filter-panel-content">
+      <view class="filter-panel-content">
+        <view class="filter-title">统计日期</view>
+        <view class="selcet-content" style="padding: 0 24rpx">
+          <u-input
+            :disabled="true"
+            :disabledColor="'#fff'"
+            class="dateInput"
+            border="surround"
+            v-model="queryParams.startTime"
+            placeholder="请选择开始时间"
+          >
+            <template v-slot:suffix>
+              <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
+            </template>
+          </u-input>
+          <u-input
+            :disabled="true"
+            :disabledColor="'#fff'"
+            class="dateInput"
+            border="surround"
+            v-model="queryParams.endTime"
+            placeholder="请选择结束时间"
+          >
+            <template v-slot:suffix>
+              <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
+            </template>
+          </u-input>
+        </view>
+      </view>
+      <view class="btn-box">
+        <view class="btn-reset" @click="resetQuery()">
+          <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>
         
-              <view class="select-header">统计日期</view>
+        <!-- 日期选择器 -->
-            <view class="selcet-content" style="padding: 0 24rpx">
+        <u-datetime-picker
-              <u-input
+          :closeOnClickOverlay="true"
-                :disabled="true"
+          :show="timeShow"
-                :disabledColor="'#fff'"
+          v-model="time"
-                class="dateInput"
+          mode="year-month"
-                border="surround"
+          @close="openOrCloseDate"
-                v-model="queryParams.startTime"
+          @cancel="openOrCloseDate"
-                placeholder="请选择开始时间"
+          @confirm="confirm"
-              >
+        ></u-datetime-picker>
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(true)"></u-icon>
-                </template>
-              </u-input>
-              <u-input
-                :disabled="true"
-                :disabledColor="'#fff'"
-                class="dateInput"
-                border="surround"
-                v-model="queryParams.endTime"
-                placeholder="请选择结束时间"
-              >
-                <template v-slot:suffix>
-                  <u-icon name="calendar" @click="openOrCloseDate(false)"></u-icon>
-                </template>
-              </u-input>
-            </view>
-            </view>
-            <view class="btn-box">
-              <u-button text="重置" style="margin-right:20rpx" @click="resetQuery()"></u-button>
-              <u-button type="primary" text="确定" @click="searchSubmit()"></u-button>
-            </view>
-            <u-datetime-picker
-              :closeOnClickOverlay="true"
-              :show="timeShow"
-              v-model="time"
-              mode="year-month"
-              @close="openOrCloseDate"
-              @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 {
+  .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,8 +833,50 @@ 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;
+          }
+        }
       }
-    }
   }
 
   .list-item {