opensource/iot-dc3
3
0
Fork 0
mirror of https://gitee.com/pnoker/iot-dc3.git synced 2026-11-01 18:51:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(toolbar): insert vertical divider between pagination and refresh/sort

Browse Source 
A 1x18px divider separates the pagination sizer dropdown from the
refresh / sort circle buttons so the two control groups read as
distinct clusters instead of running into each other.
This commit is contained in:
pnoker
2026-05-02 00:49:48 +08:00
parent 9e3a803475
commit 5fa44883f5
1 changed files with 12 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/card/tool/ToolCard.vue
+12
View File
@@ -55,6 +55,7 @@
@size-change="onSizeChange"
@current-change="onCurrentChange"
/>
<span class="tool-card-footer-divider" aria-hidden="true" />
<el-tooltip :content="t('common.refresh')" effect="dark" placement="top">
<el-button :icon="Refresh" circle @click="onRefresh" />
</el-tooltip>
@@ -212,6 +213,17 @@
display: flex;
align-items: center;
gap: 8px;
// Vertical divider between the pagination sizer dropdown and the
// refresh / sort circles, so the two groups read as separate
// controls instead of running into each other.
.tool-card-footer-divider {
display: inline-block;
width: 1px;
height: 18px;
margin: 0 4px;
background: var(--el-border-color);
}
}
}