细节优化

src/components/user-center/DeviceList.vue

@@ -1,25 +1,27 @@
 <template>
-  <div v-if="!devices?.length" class="w-full text-center">暂无绑定设备</div>
-  <div class="grid min-h-[76px] grid-cols-2 gap-3">
-    <div
-      v-for="device in devices"
-      :key="device.id"
-      @click="delDevice(device)"
-      class="relative h-[76px] rounded-[25px] border-2 p-4 text-[10px]"
-    >
-      <div class="flex h-full items-center justify-center gap-3">
-        <component
-          :is="getDeviceTypeInfo(device.user_agent)?.iconComponent"
-          class="h-6 w-6 text-white"
-        />
-        <div class="flex flex-col overflow-hidden">
-          <span class="text-white">设备: {{ getDeviceTypeInfo(device.user_agent)?.type }}</span>
-          <span class="font-mono text-[11px] tracking-tighter uppercase"
-            >SN: {{ device?.identifier?.slice(0, 4) }}{{ device.id }}
-          </span>
+  <div class="device-list-container">
+    <div v-if="!devices?.length" class="w-full text-center">暂无绑定设备</div>
+    <div v-else class="grid min-h-[76px] grid-cols-2 gap-3">
+      <div
+        v-for="device in devices"
+        :key="device.id"
+        @click="delDevice(device)"
+        class="relative h-[76px] rounded-[25px] border-2 p-4 text-[10px]"
+      >
+        <div class="flex h-full items-center justify-center gap-3">
+          <component
+            :is="getDeviceTypeInfo(device.user_agent)?.iconComponent"
+            class="h-6 w-6 text-white"
+          />
+          <div class="flex flex-col overflow-hidden">
+            <span class="text-white">设备: {{ getDeviceTypeInfo(device.user_agent)?.type }}</span>
+            <span class="font-mono text-[11px] tracking-tighter uppercase"
+              >SN: {{ device?.identifier?.slice(0, 4) }}{{ device.id }}
+            </span>
+          </div>
         </div>
+        <X :size="16" class="absolute top-[5px] right-[10px] text-[12px]" />
       </div>
-      <X :size="16" class="absolute top-[5px] right-[10px] text-[12px]" />
     </div>
   </div>
 </template>