diff --git a/src/components/device-page/device-card/camera-card.vue b/src/components/device-page/device-card/camera-card.vue
index 6148405..8ed1506 100644
--- a/src/components/device-page/device-card/camera-card.vue
+++ b/src/components/device-page/device-card/camera-card.vue
@@ -42,10 +42,15 @@ const selectedTab = ref('设备状态');
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
       <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
-        <pre>{{ { ...ndmCamera, lastDiagInfo } }}</pre>
+        <pre class="raw-data">{{ { ...ndmCamera, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>
   </NCard>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.raw-data {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>
diff --git a/src/components/device-page/device-card/decoder-card.vue b/src/components/device-page/device-card/decoder-card.vue
index f0697dd..5dd53af 100644
--- a/src/components/device-page/device-card/decoder-card.vue
+++ b/src/components/device-page/device-card/decoder-card.vue
@@ -59,10 +59,15 @@ const selectedTab = ref('设备状态');
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
       <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
-        <pre>{{ { ...ndmDecoder, lastDiagInfo } }}</pre>
+        <pre class="raw-data">{{ { ...ndmDecoder, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>
   </NCard>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.raw-data {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>
diff --git a/src/components/device-page/device-card/keyboard-card.vue b/src/components/device-page/device-card/keyboard-card.vue
index 24c9740..1ca9a1c 100644
--- a/src/components/device-page/device-card/keyboard-card.vue
+++ b/src/components/device-page/device-card/keyboard-card.vue
@@ -33,10 +33,15 @@ const selectedTab = ref('设备状态');
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
       <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
-        <pre>{{ { ...ndmKeyboard } }}</pre>
+        <pre class="raw-data">{{ { ...ndmKeyboard } }}</pre>
       </NTabPane>
     </NTabs>
   </NCard>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.raw-data {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>
diff --git a/src/components/device-page/device-card/nvr-card.vue b/src/components/device-page/device-card/nvr-card.vue
index 2cef408..2c2a17d 100644
--- a/src/components/device-page/device-card/nvr-card.vue
+++ b/src/components/device-page/device-card/nvr-card.vue
@@ -74,10 +74,15 @@ const selectedTab = ref('设备状态');
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
       <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
-        <pre>{{ { ...ndmNvr, lastDiagInfo } }}</pre>
+        <pre class="raw-data">{{ { ...ndmNvr, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>
   </NCard>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.raw-data {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>
diff --git a/src/components/device-page/device-card/security-box-card.vue b/src/components/device-page/device-card/security-box-card.vue
index 458e0f3..4119548 100644
--- a/src/components/device-page/device-card/security-box-card.vue
+++ b/src/components/device-page/device-card/security-box-card.vue
@@ -70,10 +70,15 @@ const selectedTab = ref('设备状态');
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
       <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
-        <pre>{{ { ...ndmSecurityBox, lastDiagInfo } }}</pre>
+        <pre class="raw-data">{{ { ...ndmSecurityBox, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>
   </NCard>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.raw-data {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>
diff --git a/src/components/device-page/device-card/server-card.vue b/src/components/device-page/device-card/server-card.vue
index 78e9bd7..43114f7 100644
--- a/src/components/device-page/device-card/server-card.vue
+++ b/src/components/device-page/device-card/server-card.vue
@@ -49,10 +49,15 @@ const selectedTab = ref('设备状态');
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
       <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
-        <pre>{{ { ...ndmServer, lastDiagInfo } }}</pre>
+        <pre class="raw-data">{{ { ...ndmServer, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>
   </NCard>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.raw-data {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>
diff --git a/src/components/device-page/device-card/switch-card.vue b/src/components/device-page/device-card/switch-card.vue
index 9214391..36a3ff7 100644
--- a/src/components/device-page/device-card/switch-card.vue
+++ b/src/components/device-page/device-card/switch-card.vue
@@ -51,10 +51,15 @@ const selectedTab = ref('设备状态');
       </NTabPane>
       <!-- <NTabPane name="设备配置" tab="设备配置"></NTabPane> -->
       <NTabPane v-if="userStore.isSuperAdmin" name="原始数据" tab="原始数据">
-        <pre>{{ { ...ndmSwitch, lastDiagInfo } }}</pre>
+        <pre class="raw-data">{{ { ...ndmSwitch, lastDiagInfo } }}</pre>
       </NTabPane>
     </NTabs>
   </NCard>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.raw-data {
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+</style>