- 「N个应用」改为绝对定位到卡片头右下角,不再参与主行 flex 排布 - 主行右侧顺序调整:全部展开 → 子组继承(居最右) - 卡片头底部 padding 加到 26px 容纳角标;分类名收缩系数收敛为 flex: 0 1 auto
This commit is contained in:
+17
-16
@@ -38,14 +38,15 @@
|
||||
<Icon class="collapse-icon"
|
||||
:type="collapsedMap[String(item.cat.id)] ? 'ios-arrow-forward' : 'ios-arrow-down'" />
|
||||
<span class="cat-name" :title="item.cat.name">{{ item.cat.name }}</span>
|
||||
<span class="cat-count">{{ item.treeData.length }}个应用</span>
|
||||
<span class="cat-spacer"></span>
|
||||
<span class="inherit-cap" title="勾选后子组继承本次授权,不勾选仅本组生效">子组继承</span>
|
||||
<!-- 开关外层 @click.stop:否则点击会冒泡到卡片头部触发折叠 -->
|
||||
<span class="expand-all" @click.stop>
|
||||
<span class="expand-all-label">全部展开:</span>
|
||||
<Switch size="small" v-model="expandAllMap[String(item.cat.id)]" />
|
||||
</span>
|
||||
<span class="inherit-cap" title="勾选后子组继承本次授权,不勾选仅本组生效">子组继承</span>
|
||||
<!-- 「N个应用」计数:绝对定位到卡片头右下角,不参与主行排布 -->
|
||||
<span class="cat-count">{{ item.treeData.length }}个应用</span>
|
||||
</div>
|
||||
<div v-show="!collapsedMap[String(item.cat.id)]" class="cat-card-body">
|
||||
<MyTree :treeData="item.treeData" :setting="treeSetting" :autoClick="false" :isCheck="true"
|
||||
@@ -641,7 +642,10 @@ onMounted(async () => {
|
||||
.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 {
|
||||
|
||||
Reference in New Issue
Block a user