From f65132fad6d4779d7a624e72918b2e0cc5676b7f Mon Sep 17 00:00:00 2001
From: pengda <10266652509@qq.com>
Date: Mon, 14 Oct 2024 11:41:34 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E7=A4=BA=E6=A1=86=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
view/templates/admin/formula_list.html | 49 ++++++++++++++++++++++++----------
1 file changed, 35 insertions(+), 14 deletions(-)
diff --git a/view/templates/admin/formula_list.html b/view/templates/admin/formula_list.html
index ca5ecb2..f072a48 100644
--- a/view/templates/admin/formula_list.html
+++ b/view/templates/admin/formula_list.html
@@ -96,7 +96,7 @@
<td>
<div class="formula-item" style="display: flex;flex-wrap: wrap;border-bottom: 1px dashed #ccc;padding-bottom: 10px">
{foreach from=$item.formula item=value}
- <span class="item" style="flex-basis: auto;white-space: nowrap;padding-left:20px">{$value.name}{if $value.desc}（{$value.desc}）{/if} {$value.num_str}</span>
+ <span class="item" style="flex-basis: auto;white-space: nowrap;padding-left:20px;min-width: 100px">{$value.name}{if $value.desc}（{$value.desc}）{/if} {$value.num_str}</span>
{/foreach}
</div>
<p style="padding:15px 20px 0">{$item.method}</p>
@@ -236,23 +236,44 @@
});
}
+ function adjustFlexWidth(container) {
+ const items = container.querySelectorAll('.item');
+ let maxWidth = 0;
+
+ // 获取每个容器内子项的最大宽度
+ items.forEach(item => {
+ const itemWidth = item.offsetWidth;
+ if (itemWidth > maxWidth) {
+ maxWidth = itemWidth;
+ }
+ });
+
+ // 设置所有子项宽度为最大内容宽度
+ items.forEach(item => {
+ item.style.flexBasis = maxWidth + 'px';
+ });
+ }
+
window.onload = function() {
- const formulaitems = document.querySelectorAll('.formula-item');
- formulaitems.forEach(container => {
+ const containers = document.querySelectorAll('.formula-item');
+
+ containers.forEach(container => {
+ const initialWidth = container.offsetWidth;
+
+ // 初始判断是否已换行
const items = container.querySelectorAll('.item');
- let maxWidth = 0;
+ const totalItemsWidth = Array.from(items).reduce((acc, item) => acc + item.offsetWidth, 0);
- // 获取每个 container 内部子项的最大宽度
- items.forEach(item => {
- const itemWidth = item.offsetWidth;
- if (itemWidth > maxWidth) {
- maxWidth = itemWidth;
- }
- });
+ if (totalItemsWidth > initialWidth) {
+ adjustFlexWidth(container); // 换行时计算最大宽度
+ }
- // 设置所有子项宽度为最大内容宽度
- items.forEach(item => {
- item.style.flexBasis = maxWidth + 'px';
+ // 监听窗口大小变化，动态调整
+ window.addEventListener('resize', () => {
+ const newWidth = container.offsetWidth;
+ if (totalItemsWidth > newWidth) {
+ adjustFlexWidth(container); // 换行时更新
+ }
});
});
};
--
1.8.3.1