From 0f578a43f0c7baa2eb9ae678f38d2dfe7815bd0c Mon Sep 17 00:00:00 2001
From: yangsy <ysy@ittc.sh.cn>
Date: Wed, 26 Nov 2025 11:33:47 +0800
Subject: [PATCH] style(station-card)

---
 src/components/station-page/station-card.vue | 48 ++++++--------------
 1 file changed, 13 insertions(+), 35 deletions(-)

diff --git a/src/components/station-page/station-card.vue b/src/components/station-page/station-card.vue
index 8eda40c..6b85faa 100644
--- a/src/components/station-page/station-card.vue
+++ b/src/components/station-page/station-card.vue
@@ -110,15 +110,15 @@ const theme = useThemeVars();
 </script>
 
 <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>
       <NTooltip v-if="station.ip" trigger="click">
         <template #trigger>
-          <span class="font-medium">{{ station.name }}</span>
+          <span style="font-size: medium">{{ station.name }}</span>
         </template>
         <span>{{ station.ip }}</span>
       </NTooltip>
-      <span v-else class="font-medium">{{ station.name }}</span>
+      <span v-else style="font-size: medium">{{ station.name }}</span>
     </template>
     <template #header-extra>
       <NFlex :size="4">
@@ -134,18 +134,18 @@ const theme = useThemeVars();
     </template>
 
     <template #default>
-      <NFlex vertical :size="6" class="metrics" :style="{ opacity: station.online ? '1' : '0.5' }">
-        <NFlex vertical :size="4" class="metric-item">
-          <NFlex justify="end" align="center" class="metric-line">
-            <span class="font-small">{{ deviceCount }} 台设备</span>
+      <NFlex vertical :size="6" :style="{ opacity: station.online ? '1' : '0.5' }">
+        <NFlex vertical :size="4">
+          <NFlex justify="end" align="center">
+            <span>{{ deviceCount }} 台设备</span>
             <NButton quaternary size="tiny" :focusable="false" @click="openOfflineDeviceTreeModal">
               <NIcon :component="EllipsisOutlined" />
             </NButton>
           </NFlex>
-          <NFlex justify="end" align="center" class="metric-line">
-            <span class="font-small">
+          <NFlex justify="end" align="center">
+            <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>
             <NButton quaternary size="tiny" :focusable="false" style="visibility: hidden">
@@ -154,9 +154,9 @@ const theme = useThemeVars();
           </NFlex>
         </NFlex>
 
-        <NFlex justify="end" align="center" class="metric-item">
+        <NFlex justify="end" align="center">
           <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">
               <NIcon :component="EllipsisOutlined" />
             </NButton>
@@ -167,26 +167,4 @@ const theme = useThemeVars();
   </NCard>
 </template>
 
-<style scoped lang="scss">
-.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>
+<style scoped lang="scss"></style>