diff --git a/src/views/GroupAuth.vue b/src/views/GroupAuth.vue index 43ad0cd..a7a9ae8 100644 --- a/src/views/GroupAuth.vue +++ b/src/views/GroupAuth.vue @@ -38,14 +38,15 @@ {{ item.cat.name }} - {{ item.treeData.length }}个应用 - 子组继承 全部展开: + 子组继承 + + {{ item.treeData.length }}个应用
{ .cat-card-header { display: flex; align-items: center; - padding: 8px 12px; + /* 角标绝对定位的锚点 */ + position: relative; + /* 底部多留一行:容纳右下角的「N个应用」计数,避免与主行内容重叠 */ + padding: 8px 12px 26px; background: #fafafa; border-bottom: 1px solid #e8eaec; cursor: pointer; @@ -663,9 +667,8 @@ onMounted(async () => { font-size: 13px; color: #333; margin-left: 6px; - /* 卡片是 3 列布局,列宽有限:用超大的收缩系数让分类名先让位(省略号), - 保证右侧「子组继承 / 全部展开」整组不被挤出可视区 */ - flex: 0 999 auto; + /* 「N个应用」计数已绝对定位脱离主行,主行只剩分类名 + 全部展开 + 子组继承 */ + flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; @@ -673,17 +676,17 @@ onMounted(async () => { } .cat-count { + /* 计数下沉到卡片头右下角:脱离主行,避免与「子组继承 / 全部展开」抢主行宽度 */ + position: absolute; + right: 12px; + bottom: 6px; color: #999; font-size: 12px; - margin-left: 8px; - /* 次优先收缩:空间实在不够时先截断数量文案,也不挤走开关 */ - flex: 0 10 auto; - min-width: 0; - overflow: hidden; + line-height: 18px; white-space: nowrap; } -/* 弹性空隙:把右侧「子组继承 | 全部展开」整组推到卡片头右端,与分类名/数量拉开距离 */ +/* 弹性空隙:把「全部展开 / 子组继承」推到卡片头右端,与分类名拉开距离 */ .cat-spacer { flex: 1 1 0; min-width: 0; @@ -693,6 +696,7 @@ onMounted(async () => { font-size: 12px; color: #999; flex-shrink: 0; + margin-left: 10px; padding: 0 6px; line-height: 18px; background: #f0f2f5; @@ -705,10 +709,7 @@ onMounted(async () => { align-items: center; flex-shrink: 0; gap: 4px; - /* 与左侧「子组继承」提示以竖线分隔:否则两个标签相邻会被读成同一个开关的说明 */ - margin-left: 10px; - padding-left: 10px; - border-left: 1px solid #e8eaec; + margin-left: 12px; } .expand-all-label {