- 「N个应用」从卡片头移入 cat-card-body 末尾,绝对定位到整卡右下角 - .cat-count 的 right 与子组继承复选框同值 14px,上下对齐成一列 - cat-card-body 底部 padding 加到 24px 腾出计数位置;卡片头 padding 恢复 8px 12px
This commit is contained in:
+8
-10
@@ -45,12 +45,12 @@
|
|||||||
<Switch size="small" v-model="expandAllMap[String(item.cat.id)]" />
|
<Switch size="small" v-model="expandAllMap[String(item.cat.id)]" />
|
||||||
</span>
|
</span>
|
||||||
<span class="inherit-cap" title="勾选后子组继承本次授权,不勾选仅本组生效">子组继承</span>
|
<span class="inherit-cap" title="勾选后子组继承本次授权,不勾选仅本组生效">子组继承</span>
|
||||||
<!-- 「N个应用」计数:绝对定位到卡片头右下角,不参与主行排布 -->
|
|
||||||
<span class="cat-count">{{ item.treeData.length }}个应用</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div v-show="!collapsedMap[String(item.cat.id)]" class="cat-card-body">
|
<div v-show="!collapsedMap[String(item.cat.id)]" class="cat-card-body">
|
||||||
<MyTree :treeData="item.treeData" :setting="treeSetting" :autoClick="false" :isCheck="true"
|
<MyTree :treeData="item.treeData" :setting="treeSetting" :autoClick="false" :isCheck="true"
|
||||||
:expandAll="!!expandAllMap[String(item.cat.id)]" @on-tree-check="onTreeCheck" />
|
:expandAll="!!expandAllMap[String(item.cat.id)]" @on-tree-check="onTreeCheck" />
|
||||||
|
<!-- 「N个应用」计数:绝对定位到整个卡片的右下角(与子组继承复选框同列) -->
|
||||||
|
<span class="cat-count">{{ item.treeData.length }}个应用</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -642,10 +642,7 @@ onMounted(async () => {
|
|||||||
.cat-card-header {
|
.cat-card-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
/* 角标绝对定位的锚点 */
|
padding: 8px 12px;
|
||||||
position: relative;
|
|
||||||
/* 底部多留一行:容纳右下角的「N个应用」计数,避免与主行内容重叠 */
|
|
||||||
padding: 8px 12px 26px;
|
|
||||||
background: #fafafa;
|
background: #fafafa;
|
||||||
border-bottom: 1px solid #e8eaec;
|
border-bottom: 1px solid #e8eaec;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@@ -676,9 +673,9 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cat-count {
|
.cat-count {
|
||||||
/* 计数下沉到卡片头右下角:脱离主行,避免与「子组继承 / 全部展开」抢主行宽度 */
|
/* 计数贴在整张卡片右下角:与右侧「子组继承」复选框同列,脱离 tree 的文档流 */
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 12px;
|
right: 14px;
|
||||||
bottom: 6px;
|
bottom: 6px;
|
||||||
color: #999;
|
color: #999;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
@@ -719,8 +716,9 @@ onMounted(async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.cat-card-body {
|
.cat-card-body {
|
||||||
padding: 6px 8px;
|
/* 底部多留一行:容纳右下角的「N个应用」计数,避免压住最后一行节点 */
|
||||||
/* 子组继承复选框的绝对定位锚点:保证所有层级节点的复选框右对齐成一列 */
|
padding: 6px 8px 24px;
|
||||||
|
/* 子组继承复选框 / 计数角标的绝对定位锚点:保证两者右对齐成一列 */
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user