style(vimp-tree): 优化线路树组件的标签页样式与文本展示
修改了alarm-tree.vue和camera-tree.vue两个组件,优化NTabs的样式配置,自定义标签尺寸与文本格式,调整内部布局细节
This commit is contained in:
@@ -127,23 +127,42 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => {
|
||||
/>
|
||||
</template>
|
||||
<template v-if="lineTabPanes.length > 1">
|
||||
<NTabs :type="'card'" :placement="'left'" style="height: 100%">
|
||||
<NTabPane v-for="{ lineCode, lineName, alarmTree } in lineTabPanes" :key="lineCode" :name="lineName" :tab="lineName">
|
||||
<NTree
|
||||
block-line
|
||||
block-node
|
||||
show-line
|
||||
virtual-scroll
|
||||
style="height: 100%"
|
||||
:render-label="renderNodeLabel"
|
||||
:render-suffix="renderNodeSuffix"
|
||||
:override-default-node-click-behavior="overrideNodeClickBehavior"
|
||||
:default-expand-all="false"
|
||||
:show-irrelevant-nodes="false"
|
||||
:data="alarmTree"
|
||||
:pattern="searchPattern"
|
||||
:filter="searchFilter"
|
||||
/>
|
||||
<NTabs
|
||||
:type="'card'"
|
||||
:placement="'left'"
|
||||
style="height: 100%"
|
||||
:tab-style="{
|
||||
width: '64px',
|
||||
height: '36px',
|
||||
}"
|
||||
:style="{
|
||||
'--n-bar-color': '#0000',
|
||||
'--n-pane-padding-top': '0',
|
||||
'--n-tab-gap-vertical': '0',
|
||||
// '--n-tab-padding-vertical': '14px 12px'
|
||||
}"
|
||||
>
|
||||
<NTabPane v-for="{ lineCode, lineName, alarmTree } in lineTabPanes" :key="lineCode" :name="lineName">
|
||||
<template #tab>
|
||||
<span style="font-size: 12px">{{ lineName }}</span>
|
||||
</template>
|
||||
<template #default>
|
||||
<NTree
|
||||
block-line
|
||||
block-node
|
||||
show-line
|
||||
virtual-scroll
|
||||
style="height: 100%"
|
||||
:render-label="renderNodeLabel"
|
||||
:render-suffix="renderNodeSuffix"
|
||||
:override-default-node-click-behavior="overrideNodeClickBehavior"
|
||||
:default-expand-all="false"
|
||||
:show-irrelevant-nodes="false"
|
||||
:data="alarmTree"
|
||||
:pattern="searchPattern"
|
||||
:filter="searchFilter"
|
||||
/>
|
||||
</template>
|
||||
</NTabPane>
|
||||
</NTabs>
|
||||
</template>
|
||||
|
||||
@@ -130,23 +130,42 @@ const searchFilter: TreeProps['filter'] = (pattern, node) => {
|
||||
/>
|
||||
</template>
|
||||
<template v-if="lineTabPanes.length > 1">
|
||||
<NTabs :type="'card'" :placement="'left'" style="height: 100%">
|
||||
<NTabPane v-for="{ lineCode, lineName, cameraTree } in lineTabPanes" :key="lineCode" :name="lineName" :tab="lineName">
|
||||
<NTree
|
||||
block-line
|
||||
block-node
|
||||
show-line
|
||||
virtual-scroll
|
||||
style="height: 100%"
|
||||
:render-label="renderNodeLabel"
|
||||
:render-suffix="renderNodeSuffix"
|
||||
:override-default-node-click-behavior="overrideNodeClickBehavior"
|
||||
:default-expand-all="false"
|
||||
:show-irrelevant-nodes="false"
|
||||
:data="cameraTree"
|
||||
:pattern="searchPattern"
|
||||
:filter="searchFilter"
|
||||
/>
|
||||
<NTabs
|
||||
:type="'card'"
|
||||
:placement="'left'"
|
||||
style="height: 100%"
|
||||
:tab-style="{
|
||||
width: '64px',
|
||||
height: '36px',
|
||||
}"
|
||||
:style="{
|
||||
'--n-bar-color': '#0000',
|
||||
'--n-pane-padding-top': '0',
|
||||
'--n-tab-gap-vertical': '0',
|
||||
// '--n-tab-padding-vertical': '14px 12px'
|
||||
}"
|
||||
>
|
||||
<NTabPane v-for="{ lineCode, lineName, cameraTree } in lineTabPanes" :key="lineCode" :name="lineName">
|
||||
<template #tab>
|
||||
<span style="font-size: 12px">{{ lineName }}</span>
|
||||
</template>
|
||||
<template #default>
|
||||
<NTree
|
||||
block-line
|
||||
block-node
|
||||
show-line
|
||||
virtual-scroll
|
||||
style="height: 100%"
|
||||
:render-label="renderNodeLabel"
|
||||
:render-suffix="renderNodeSuffix"
|
||||
:override-default-node-click-behavior="overrideNodeClickBehavior"
|
||||
:default-expand-all="false"
|
||||
:show-irrelevant-nodes="false"
|
||||
:data="cameraTree"
|
||||
:pattern="searchPattern"
|
||||
:filter="searchFilter"
|
||||
/>
|
||||
</template>
|
||||
</NTabPane>
|
||||
</NTabs>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user