feat: 大屏卡片位置微调；

src/views/dashboard/components/PeopleDetectedCard/index.vue

@@ -9,10 +9,10 @@
       <div class="matrix-scroll">
         <div class="matrix-grid">
           <div
-            v-for="(item, index) in 15"
+            v-for="(item, index) in props.limit"
             :key="index"
             class="person-icon"
-            :class="{ active: detectedCount > 15 || index < detectedCount }"
+            :class="{ active: detectedCount > props.limit || index < detectedCount }"
           >
             <svg viewBox="0 0 64 64" class="person-svg">
               <circle cx="32" cy="12" r="6" />
@@ -41,10 +41,12 @@ defineOptions({ name: 'PeopleScanGlowCard' })
 
 type Props = {
   detectedCount: number
+  limit?: number // 限制显示的人数
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   detectedCount: 0,
+  limit: 28,
 })
 </script>
 
@@ -140,7 +142,7 @@ withDefaults(defineProps<Props>(), {
 
 .matrix-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
   grid-auto-rows: 30px;
   gap: 10px;
 }

src/views/dashboard/index.vue

@@ -8,13 +8,12 @@
     </div>
     <div class="dashboard-content">
       <div class="block custom-scroll">
-        <div class="data-grid">
+        <div class="data-row">
           <DeviceOnlineRateCard
             :online-count="todayData.onlineCount"
             :device-count="todayData.deviceCount"
           ></DeviceOnlineRateCard>
           <PeopleDetectedCard :detectedCount="todayData.detectedCount"></PeopleDetectedCard>
-          <ElderActivityCard :activity-rate="todayData.activeRate"></ElderActivityCard>
         </div>
         <div class="data-row">
           <ObjectDistributionCard :guardList="todayData.guardList"></ObjectDistributionCard>
@@ -45,6 +44,7 @@
       <div class="block custom-scroll">
         <div class="data-row">
           <DeviceAgeCard :ageList="todayData.ageList"></DeviceAgeCard>
+          <ElderActivityCard :activity-rate="todayData.activeRate"></ElderActivityCard>
         </div>
 
         <div class="data-line">