Browse Source

```
fix(data-fill): 防止下载按钮容器因内容换行导致布局变化
```

duy 1 month ago
parent
commit
081d3f3006
2 changed files with 11 additions and 3 deletions
  1. 6 2
      src/views/data-fill/components/dataImport.vue
  2. 5 1
      src/views/data-fill/division.vue

+ 6 - 2
src/views/data-fill/components/dataImport.vue

@@ -29,7 +29,8 @@
                     </el-button>
                 </div>
             </div>
-            <div class="mt-2 text-right">
+            <div class="download-btn-container mt-2 text-right">
+                <!-- 添加类名 -->
                 <el-button hc-btn type="primary" :loading="downLoadTemplateLoading" @click="downLoadTemplate">
                     <HcIcon name="download-2" />
                     导入模板
@@ -191,6 +192,9 @@ const downLoadTemplateLoading = ref(false)
 </script>
 
 <style lang='scss' scoped>
-
+.download-btn-container {
+  overflow: hidden; /* 限制溢出,避免尺寸变化导致滚动 */
+  white-space: nowrap; /* 防止按钮内容换行导致高度变化 */
+}
 </style>
 

+ 5 - 1
src/views/data-fill/division.vue

@@ -1094,7 +1094,7 @@
                         </el-button>
                     </div>
                 </div>
-                <div class="mt-2 text-right">
+                <div class="download-btn-container mt-2 text-right">
                     <el-button hc-btn type="primary" :loading="downLoadTemplateLoading" @click="downLoadTemplate">
                         <HcIcon name="download-2" />
                         导入模板
@@ -3096,4 +3096,8 @@ const uploadProgress = ref(false)
 
 <style lang="scss" scoped>
 @import "../../styles/data-fill/division.scss";
+.download-btn-container {
+  overflow: hidden; /* 限制溢出,避免尺寸变化导致滚动 */
+  white-space: nowrap; /* 防止按钮内容换行导致高度变化 */
+}
 </style>