skycurtain/ndm-web-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(station-card)

Browse Source
This commit is contained in:
yangsy
2025-11-26 11:33:47 +08:00
parent 68636d13a4
commit 0f578a43f0
1 changed files with 13 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/station-page/station-card.vue
View File

@@ -110,15 +110,15 @@ const theme = useThemeVars();
</script> </script>
<template> <template>
<NCard bordered hoverable size="medium" class="station-card" :header-style="{ padding: `6px` }" :content-style="{ padding: `0px 6px 6px 6px` }"> <NCard bordered hoverable size="medium" :header-style="{ padding: `6px` }" :content-style="{ padding: `0px 6px 6px 6px` }">
<template #header> <template #header>
<NTooltip v-if="station.ip" trigger="click"> <NTooltip v-if="station.ip" trigger="click">
<template #trigger> <template #trigger>
<span class="font-medium">{{ station.name }}</span> <span style="font-size: medium">{{ station.name }}</span>
</template> </template>
<span>{{ station.ip }}</span> <span>{{ station.ip }}</span>
</NTooltip> </NTooltip>
<span v-else class="font-medium">{{ station.name }}</span> <span v-else style="font-size: medium">{{ station.name }}</span>
</template> </template>
<template #header-extra> <template #header-extra>
<NFlex :size="4"> <NFlex :size="4">
@@ -134,18 +134,18 @@ const theme = useThemeVars();
</template> </template>
<template #default> <template #default>
<NFlex vertical :size="6" class="metrics" :style="{ opacity: station.online ? '1' : '0.5' }"> <NFlex vertical :size="6" :style="{ opacity: station.online ? '1' : '0.5' }">
<NFlex vertical :size="4" class="metric-item"> <NFlex vertical :size="4">
<NFlex justify="end" align="center" class="metric-line"> <NFlex justify="end" align="center">
<span class="font-small">{{ deviceCount }} 台设备</span> <span>{{ deviceCount }} 台设备</span>
<NButton quaternary size="tiny" :focusable="false" @click="openOfflineDeviceTreeModal"> <NButton quaternary size="tiny" :focusable="false" @click="openOfflineDeviceTreeModal">
<NIcon :component="EllipsisOutlined" /> <NIcon :component="EllipsisOutlined" />
</NButton> </NButton>
</NFlex> </NFlex>
<NFlex justify="end" align="center" class="metric-line"> <NFlex justify="end" align="center">
<span class="font-small"> <span>
<span :style="{ color: onlineDeviceCount > 0 ? theme.successColor : '' }">在线 {{ onlineDeviceCount }} 台</span> <span :style="{ color: onlineDeviceCount > 0 ? theme.successColor : '' }">在线 {{ onlineDeviceCount }} 台</span>
<NText depth="3" class="sep">·</NText> <NText depth="3">·</NText>
<span :style="{ color: offlineDeviceCount > 0 ? theme.errorColor : '' }">离线 {{ offlineDeviceCount }} 台</span> <span :style="{ color: offlineDeviceCount > 0 ? theme.errorColor : '' }">离线 {{ offlineDeviceCount }} 台</span>
</span> </span>
<NButton quaternary size="tiny" :focusable="false" style="visibility: hidden"> <NButton quaternary size="tiny" :focusable="false" style="visibility: hidden">
@@ -154,9 +154,9 @@ const theme = useThemeVars();
</NFlex> </NFlex>
</NFlex> </NFlex>
<NFlex justify="end" align="center" class="metric-item"> <NFlex justify="end" align="center">
<NFlex align="center" :size="8"> <NFlex align="center" :size="8">
<span class="font-small" :style="{ color: alarmCount > 0 ? theme.warningColor : '' }">今日 {{ alarmCount }} 条告警</span> <span :style="{ color: alarmCount > 0 ? theme.warningColor : '' }">今日 {{ alarmCount }} 条告警</span>
<NButton quaternary size="tiny" :focusable="false" @click="openDeviceAlarmTreeModal"> <NButton quaternary size="tiny" :focusable="false" @click="openDeviceAlarmTreeModal">
<NIcon :component="EllipsisOutlined" /> <NIcon :component="EllipsisOutlined" />
</NButton> </NButton>
@@ -167,26 +167,4 @@ const theme = useThemeVars();
</NCard> </NCard>
</template> </template>
<style scoped lang="scss"> <style scoped lang="scss"></style>
.font-medium {
font-size: medium;
}
.font-small {
font-size: small;
}
.metrics {
padding-top: 4px;
}
.sep {
margin: 0 6px;
font-size: xx-small;
color: v-bind('theme.textColor3');
}
.metric-line .font-small {
white-space: nowrap;
}
</style>