样式调整

Web/src/views/StatisticsView.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page-container">
+  <div class="page-container-flex">
     <!-- 顶部导航栏 -->
     <van-nav-bar title="账单统计" placeholder>
       <template #right>
@@ -8,14 +8,14 @@
     </van-nav-bar>
 
     <!-- 月份选择器 固定区域 -->
-    <div class="month-selector">
+    <div class="sticky-header">
       <van-button 
         icon="arrow-left" 
         plain 
         size="small" 
         @click="changeMonth(-1)"
       />
-      <div class="month-text" @click="showMonthPicker = true">
+      <div class="sticky-header-text" @click="showMonthPicker = true">
         {{ currentYear }}年{{ currentMonth }}月
         <van-icon name="arrow-down" />
       </div>
@@ -665,58 +665,14 @@ onActivated(() => {
 </script>
 
 <style scoped>
-.page-container {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  overflow: hidden;
-}
-
-.page-container :deep(.van-nav-bar) {
-  flex-shrink: 0;
-}
-
-.van-pull-refresh {
-  flex: 1;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
 .statistics-content {
   padding: 16px 0 0 0;
 }
 
-/* 月份选择器 - 固定 */
-.month-selector {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 16px;
-  margin: 0 12px;
-  margin-top: 12px;
-  background: #ffffff;
-  border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-}
-
-@media (prefers-color-scheme: dark) {
-  .month-selector {
-    background: #1f1f1f;
-  }
-}
-
-.month-text {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--van-text-color);
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  cursor: pointer;
-  user-select: none;
+:deep(.van-pull-refresh) {
+  flex: 1;
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 /* 月度概览卡片 */