样式统一

Web/src/views/PeriodicRecord.vue

@@ -85,20 +85,12 @@
     </div>
 
     <!-- 新增/编辑弹窗 -->
-    <van-popup 
-      v-model:show="dialogVisible" 
-      position="bottom"
-      :style="{ height: '85%' }"
-      round
-      closeable
+    <PopupContainer
+      v-model="dialogVisible"
+      :title="isEdit ? '编辑周期账单' : '新增周期账单'"
+      height="85%"
     >
-      <div class="popup-container">
-        <div class="popup-header-fixed">
-          <h3>{{ isEdit ? '编辑周期账单' : '新增周期账单' }}</h3>
-        </div>
-        
-        <div class="popup-scroll-content">
-        <van-form @submit="onSubmit">
+      <van-form @submit="onSubmit">
           <van-cell-group inset title="周期设置">
             <van-field
               v-model="form.periodicTypeText"
@@ -235,9 +227,7 @@
             </van-button>
           </div>
         </van-form>
-        </div>
-      </div>
-    </van-popup>
+    </PopupContainer>
 
     <!-- 交易类型选择器 -->
     <van-popup v-model:show="showTypePicker" position="bottom" round>
@@ -299,6 +289,7 @@ import {
   togglePeriodicEnabled
 } from '@/api/transactionPeriodic'
 import { getCategoryList, createCategory } from '@/api/transactionCategory'
+import PopupContainer from '@/components/PopupContainer.vue'
 
 const router = useRouter()
 const navTitle = ref('周期账单')