diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue index b08c6f7..cf2e14a 100644 --- a/src/views/HomePage.vue +++ b/src/views/HomePage.vue @@ -46,7 +46,7 @@ @click="openTool(tool.url)" >
- {{ tool.icon }} + {{ tool.icon }}

{{ tool.name }}

@@ -109,6 +109,16 @@ export default { }, methods: { + // 根据图标文字长度返回字体大小class + getIconSizeClass(icon) { + if (!icon) return 'icon-size-default' + const length = icon.length + if (length === 1) return 'icon-size-1' + if (length === 2) return 'icon-size-2' + if (length === 3) return 'icon-size-3' + return 'icon-size-4' // 4个字或更多 + }, + // 辅助方法 getCategoriesInSuper(superCategoryId) { return this.categories.filter(c => c.superCategoryId === superCategoryId) @@ -716,12 +726,53 @@ export default { flex-shrink: 0; margin-right: 16px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); + overflow: hidden; + padding: 4px; .icon-text { - font-size: 24px; font-weight: bold; color: @white-color; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); + line-height: 1.3; + text-align: center; + word-wrap: break-word; + word-break: break-all; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + max-width: 100%; + padding: 0 2px; + + // 1个字:大字体 + &.icon-size-1 { + font-size: 28px; + line-height: 1; + } + + // 2个字:中等字体 + &.icon-size-2 { + font-size: 24px; + line-height: 1.2; + } + + // 3个字:较小字体 + &.icon-size-3 { + font-size: 20px; + line-height: 1.2; + } + + // 4个字或更多:小字体,2行显示 + &.icon-size-4 { + font-size: 18px; + line-height: 1.3; + } + + // 默认大小 + &.icon-size-default { + font-size: 22px; + line-height: 1.3; + } } } diff --git a/src/views/ManagePage.vue b/src/views/ManagePage.vue index 33400a8..ccfc0a6 100644 --- a/src/views/ManagePage.vue +++ b/src/views/ManagePage.vue @@ -227,7 +227,7 @@ :title="colorOption.name" > - {{ toolForm.icon }} + {{ toolForm.icon }}
@@ -381,6 +381,16 @@ export default { }, methods: { + // 根据图标文字长度返回字体大小class + getIconSizeClass(icon) { + if (!icon) return 'icon-size-default' + const length = icon.length + if (length === 1) return 'icon-size-1' + if (length === 2) return 'icon-size-2' + if (length === 3) return 'icon-size-3' + return 'icon-size-4' // 4个字或更多 + }, + // 消息提示 showMessage(text, type = 'success') { this.message = { show: true, text, type } @@ -1509,12 +1519,18 @@ export default { display: flex; align-items: center; justify-content: center; - font-size: 16px; + font-size: 14px; color: white; font-weight: bold; flex-shrink: 0; cursor: pointer; transition: all 0.2s ease; + line-height: 1; // 设置行高为1,确保垂直居中 + + span { + display: block; + text-align: center; + } &:hover { transform: scale(1.1); @@ -1738,13 +1754,53 @@ button { font-size: 20px; font-weight: bold; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); + line-height: 1; } .icon-preview { color: white; - font-size: 24px; font-weight: bold; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); + line-height: 1.3; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; + text-align: center; + word-wrap: break-word; + word-break: break-all; + max-width: 100%; + padding: 0 2px; + + // 1个字:大字体 + &.icon-size-1 { + font-size: 28px; + line-height: 1; + } + + // 2个字:中等字体 + &.icon-size-2 { + font-size: 24px; + line-height: 1.2; + } + + // 3个字:较小字体 + &.icon-size-3 { + font-size: 20px; + line-height: 1.3; + } + + // 4个字或更多:最小字体,2行显示 + &.icon-size-4 { + font-size: 18px; + line-height: 1.3; + } + + // 默认 + &.icon-size-default { + font-size: 22px; + line-height: 1.2; + } } } }