样式处理

src/components/user-center/DeviceList.vue

@@ -3,9 +3,10 @@
     <div
       v-for="device in devices"
       :key="device.id"
-      class="h-[76px] rounded-3xl border-2 p-4 text-[10px]"
+      @click="delDevice(device)"
+      class="relative h-[76px] rounded-[25px] border-2 p-4 text-[10px]"
     >
-      <div class="flex items-center gap-3">
+      <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"
@@ -17,12 +18,13 @@
           </span>
         </div>
       </div>
+      <X :size="16" class="absolute top-[5px] right-[10px] text-[12px]" />
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { Laptop, Smartphone, Tablet, Monitor, Cpu, HelpCircle } from 'lucide-vue-next'
+import { Laptop, Smartphone, Tablet, Monitor, Cpu, HelpCircle, X } from 'lucide-vue-next'
 
 interface Device {
   id: string
@@ -35,6 +37,10 @@ defineProps<{
   devices: Device[]
 }>()
 
+function delDevice(item) {
+  console.log('Device removed', item)
+}
+
 interface DeviceTypeInfo {
   type: string
   icon: string

src/components/user-center/PaymentMethod.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="bg-[#A8FF53] px-6 pt-7 font-sans text-black">
+    <div class="bg-[#A8FF53] px-6 font-sans text-black">
       <h2 class="mb-1 text-center text-2xl font-bold">选择付款方式</h2>
 
       <div class="flex flex-col gap-4 pt-[43px]">

src/components/user-center/PlanCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="px-6 pt-7 font-sans">
+  <div class="px-6 font-sans">
     <h2 class="mb-1 text-center text-2xl font-bold">套餐选择</h2>
     <p class="mb-4 text-center text-sm font-[100] text-gray-600">*所有套餐均不限流量不限速度</p>