Kaynağa Gözat

fix(admin): 修复商品编辑页内容显示不全无法滑动问题

- 将 .product-edit、.product-edit > .el-card 和 .el-card__body 调整为 flex 布局
- el-card__body 增加 overflow: hidden,配合 .product-edit-form-wrap 的 overflow-y: auto 实现内部滚动
- 移除重复的 el-card__body 样式定义,保持 header 固定
- 与 Layout/admin-tokens 的 .admin-page 弹性约束保持一致
iwt 1 gün önce
ebeveyn
işleme
ae1064c37c
1 değiştirilmiş dosya ile 17 ekleme ve 16 silme
  1. 17 16
      cfc-web/src/views/admin/ProductEdit.vue

+ 17 - 16
cfc-web/src/views/admin/ProductEdit.vue

@@ -1170,17 +1170,24 @@ async loadGiftRule(productId) {
 <style scoped>
 .product-edit {
   padding: 20px;
-  display: block;
-  min-height: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 .product-edit > .el-card {
-  display: block;
-  min-height: auto;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 .product-edit > .el-card /deep/ .el-card__body {
-  display: block;
-  min-height: auto;
-  overflow: visible;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+  padding: 24px;
 }
 .cover-uploader {
   display: flex;
@@ -1263,6 +1270,8 @@ async loadGiftRule(productId) {
 }
 .product-edit .el-card {
   width: 100%;
+  flex: 1;
+  min-height: 0;
 }
 .product-edit .el-form {
   width: 100%;
@@ -1365,12 +1374,6 @@ async loadGiftRule(productId) {
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
 }
 /* 表单滚动容器:卡片锁定可视高度,表单区内部滚动(解决长表单无法下翻) */
-.product-edit /deep/ .el-card__body {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  padding: 24px;
-}
 .product-edit-form-wrap {
   flex: 1;
   min-height: 0;
@@ -1380,9 +1383,7 @@ async loadGiftRule(productId) {
 }
 .product-edit /deep/ .el-card__header {
   padding: 20px 24px;
-}
-.product-edit /deep/ .el-card__body {
-  padding: 24px;
+  flex-shrink: 0;
 }
 .product-edit /deep/ .admin-page-title {
   font-size: 20px;