Просмотр исходного кода

fix(admin): ArticleEdit/ActivityEdit 加内滚动容器,修复表单无法下滑

Xiaogang Liao 20 часов назад
Родитель
Сommit
6163c4cf76
2 измененных файлов с 31 добавлено и 0 удалено
  1. 20 0
      cfc-web/src/views/admin/ActivityEdit.vue
  2. 11 0
      cfc-web/src/views/admin/ArticleEdit.vue

+ 20 - 0
cfc-web/src/views/admin/ActivityEdit.vue

@@ -29,6 +29,7 @@
         style="margin-bottom: 16px;"
       />
 
+      <div class="activity-edit-form-wrap">
       <el-form label-width="120px" v-loading="loading" :model="form" :rules="formRules" ref="form">
         <el-form-item label="活动标题" prop="title">
           <el-input v-model="form.title" placeholder="请输入活动标题" :disabled="readonly" />
@@ -143,6 +144,7 @@
           <span style="margin-left:8px;color:#999;font-size:12px;">0表示使用系统默认积分</span>
         </el-form-item>
       </el-form>
+      </div>
     </el-card>
 
     <!-- 创建成功弹窗 -->
@@ -605,4 +607,22 @@ activityId
   max-height: 500px;
   overflow-y: auto;
 }
+
+/* 内滚动容器:利用 el-card__body flex column 让表单区域独立滚动 */
+.activity-edit-form-wrap {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 8px;
+  margin-right: -8px;
+}
+
+/* 内滚动容器:利用 el-card__body flex column 让表单区域独立滚动 */
+.activity-edit-form-wrap {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 8px;
+  margin-right: -8px;
+}
 </style>

+ 11 - 0
cfc-web/src/views/admin/ArticleEdit.vue

@@ -30,6 +30,7 @@
         style="margin-bottom: 16px;"
       />
 
+      <div class="article-edit-form-wrap">
       <el-form :model="form" label-width="120px" v-loading="loading">
         <el-form-item label="标题">
           <el-input v-model="form.title" placeholder="请输入文章标题" maxlength="200" show-word-limit :disabled="readonly" />
@@ -133,6 +134,7 @@
           </el-radio-group>
         </el-form-item>
       </el-form>
+      </div>
     </el-card>
   </div>
 </template>
@@ -1017,4 +1019,13 @@ onError: (file, err, res) => {
     flex-wrap: wrap;
   }
 }
+
+/* 内滚动容器:利用 el-card__body flex column 让表单区域独立滚动 */
+.article-edit-form-wrap {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 8px;
+  margin-right: -8px;
+}
 </style>