页面样式统一

Web/src/views/PeriodicRecord.vue

@@ -72,7 +72,7 @@
     </van-pull-refresh>
 
     <!-- 底部新增按钮 -->
-    <div class="bottom-add-button">
+    <div class="bottom-button">
       <van-button 
         type="primary" 
         size="large" 
@@ -92,12 +92,74 @@
       round
       closeable
     >
-      <div class="periodic-form">
-        <div class="form-header">
+      <div class="popup-container">
+        <div class="popup-header-fixed">
           <h3>{{ isEdit ? '编辑周期账单' : '新增周期账单' }}</h3>
         </div>
         
+        <div class="popup-scroll-content">
         <van-form @submit="onSubmit">
+          <van-cell-group inset title="周期设置">
+            <van-field
+              v-model="form.periodicTypeText"
+              is-link
+              readonly
+              name="periodicType"
+              label="周期"
+              placeholder="请选择周期类型"
+              @click="showPeriodicTypePicker = true"
+              :rules="[{ required: true, message: '请选择周期类型' }]"
+            />
+
+            <!-- 每周配置 -->
+            <van-field
+              v-if="form.periodicType === 1"
+              v-model="form.weekdaysText"
+              is-link
+              readonly
+              name="weekdays"
+              label="星期"
+              placeholder="请选择星期几"
+              @click="showWeekdaysPicker = true"
+              :rules="[{ required: true, message: '请选择星期几' }]"
+            />
+
+            <!-- 每月配置 -->
+            <van-field
+              v-if="form.periodicType === 2"
+              v-model="form.monthDaysText"
+              is-link
+              readonly
+              name="monthDays"
+              label="日期"
+              placeholder="请选择每月的日期"
+              @click="showMonthDaysPicker = true"
+              :rules="[{ required: true, message: '请选择日期' }]"
+            />
+
+            <!-- 每季度配置 -->
+            <van-field
+              v-if="form.periodicType === 3"
+              v-model="form.quarterDay"
+              name="quarterDay"
+              label="季度第几天"
+              placeholder="请输入季度开始后第几天"
+              type="number"
+              :rules="[{ required: true, message: '请输入季度开始后第几天' }]"
+            />
+
+            <!-- 每年配置 -->
+            <van-field
+              v-if="form.periodicType === 4"
+              v-model="form.yearDay"
+              name="yearDay"
+              label="年第几天"
+              placeholder="请输入年开始后第几天"
+              type="number"
+              :rules="[{ required: true, message: '请输入年开始后第几天' }]"
+            />
+          </van-cell-group>
+
           <van-cell-group inset title="基本信息">
             <van-field
               v-model="form.reason"
@@ -167,73 +229,13 @@
             </div>
           </van-cell-group>
 
-          <van-cell-group inset title="周期设置">
-            <van-field
-              v-model="form.periodicTypeText"
-              is-link
-              readonly
-              name="periodicType"
-              label="周期"
-              placeholder="请选择周期类型"
-              @click="showPeriodicTypePicker = true"
-              :rules="[{ required: true, message: '请选择周期类型' }]"
-            />
-
-            <!-- 每周配置 -->
-            <van-field
-              v-if="form.periodicType === 1"
-              v-model="form.weekdaysText"
-              is-link
-              readonly
-              name="weekdays"
-              label="星期"
-              placeholder="请选择星期几"
-              @click="showWeekdaysPicker = true"
-              :rules="[{ required: true, message: '请选择星期几' }]"
-            />
-
-            <!-- 每月配置 -->
-            <van-field
-              v-if="form.periodicType === 2"
-              v-model="form.monthDaysText"
-              is-link
-              readonly
-              name="monthDays"
-              label="日期"
-              placeholder="请选择每月的日期"
-              @click="showMonthDaysPicker = true"
-              :rules="[{ required: true, message: '请选择日期' }]"
-            />
-
-            <!-- 每季度配置 -->
-            <van-field
-              v-if="form.periodicType === 3"
-              v-model="form.quarterDay"
-              name="quarterDay"
-              label="季度第几天"
-              placeholder="请输入季度开始后第几天"
-              type="number"
-              :rules="[{ required: true, message: '请输入季度开始后第几天' }]"
-            />
-
-            <!-- 每年配置 -->
-            <van-field
-              v-if="form.periodicType === 4"
-              v-model="form.yearDay"
-              name="yearDay"
-              label="年第几天"
-              placeholder="请输入年开始后第几天"
-              type="number"
-              :rules="[{ required: true, message: '请输入年开始后第几天' }]"
-            />
-          </van-cell-group>
-
           <div style="margin: 16px;">
             <van-button round block type="primary" native-type="submit" :loading="submitting">
               {{ isEdit ? '更新' : '确认添加' }}
             </van-button>
           </div>
         </van-form>
+        </div>
       </div>
     </van-popup>
 
@@ -775,7 +777,7 @@ onMounted(() => {
 }
 
 .periodic-list {
-  /* padding: 16px 0; */
+  padding: 16px 0;
 }
 
 .periodic-item {
@@ -818,31 +820,4 @@ onMounted(() => {
   border-radius: 16px;
 }
 
-.bottom-add-button {
-  position: fixed;
-  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
-  left: 16px;
-  right: 16px;
-  z-index: 100;
-}
-
-.periodic-form {
-  height: 100%;
-  overflow-y: auto;
-}
-
-.form-header {
-  padding: 16px;
-  text-align: center;
-  border-bottom: 1px solid var(--van-border-color);
-}
-
-.form-header h3 {
-  margin: 0;
-  color: var(--van-text-color);
-}
-
-:deep(.van-cell-group) {
-  margin-top: 16px;
-}
 </style>