- 「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)]" />
|
||||
</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"
|
||||
:expandAll="!!expandAllMap[String(item.cat.id)]" @on-tree-check="onTreeCheck" />
|
||||
<!-- 「N个应用」计数:绝对定位到整个卡片的右下角(与子组继承复选框同列) -->
|
||||
<span class="cat-count">{{ item.treeData.length }}个应用</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -642,10 +642,7 @@ onMounted(async () => {
|
||||
.cat-card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
/* 角标绝对定位的锚点 */
|
||||
position: relative;
|
||||
/* 底部多留一行:容纳右下角的「N个应用」计数,避免与主行内容重叠 */
|
||||
padding: 8px 12px 26px;
|
||||
padding: 8px 12px;
|
||||
background: #fafafa;
|
||||
border-bottom: 1px solid #e8eaec;
|
||||
cursor: pointer;
|
||||
@@ -676,9 +673,9 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.cat-count {
|
||||
/* 计数下沉到卡片头右下角:脱离主行,避免与「子组继承 / 全部展开」抢主行宽度 */
|
||||
/* 计数贴在整张卡片右下角:与右侧「子组继承」复选框同列,脱离 tree 的文档流 */
|
||||
position: absolute;
|
||||
right: 12px;
|
||||
right: 14px;
|
||||
bottom: 6px;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
@@ -719,8 +716,9 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.cat-card-body {
|
||||
padding: 6px 8px;
|
||||
/* 子组继承复选框的绝对定位锚点:保证所有层级节点的复选框右对齐成一列 */
|
||||
/* 底部多留一行:容纳右下角的「N个应用」计数,避免压住最后一行节点 */
|
||||
padding: 6px 8px 24px;
|
||||
/* 子组继承复选框 / 计数角标的绝对定位锚点:保证两者右对齐成一列 */
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user