qhse看板证书穿透

src/views/pms/fiveDailyReportSummary/index.vue

@@ -31,7 +31,7 @@ const summaryCards = [
     key: 'cumulativeMixSand',
     label: '加砂',
     unit: '方',
-    icon: 'i-material-symbols-grain-outline-rounded',
+    icon: 'i-material-symbols-auto-mode-rounded',
     decimals: 0
   },
   {
@@ -45,7 +45,7 @@ const summaryCards = [
     key: 'utilizationRate',
     label: '设备利用率',
     unit: '%',
-    icon: 'i-material-symbols-monitoring-outline-rounded',
+    icon: 'i-material-symbols-build-outline-rounded',
     decimals: 2
   }
 ]
@@ -199,7 +199,7 @@ watch(
 
 <template>
   <div
-    class="grid grid-cols-[auto_minmax(0,1fr)] grid-rows-[104px_auto_1fr] gap-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))] overflow-hidden">
+    class="grid grid-cols-[auto_1fr] grid-rows-[48px_44px_1fr] gap-3 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
     <DeptTreeSelect
       v-model="query.deptId"
       :top-id="388"
@@ -208,29 +208,10 @@ watch(
       class="row-span-3"
       @node-click="handleDeptNodeClick" />
 
-    <div class="summary-cards min-w-0" v-loading="summaryLoading">
-      <article
-        v-for="card in summaryCards"
-        :key="card.key"
-        class="summary-card bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-5 py-4 min-w-0">
-        <div class="summary-card__icon" :class="card.icon"></div>
-        <div class="min-w-0">
-          <div class="summary-card__label">{{ card.label }}({{ card.unit }})</div>
-          <count-to
-            class="summary-card__value"
-            :start-val="0"
-            :end-val="cardStatistics[card.key]"
-            :decimals="card.decimals || 0">
-            <span class="summary-card__placeholder">--</span>
-          </count-to>
-        </div>
-      </article>
-    </div>
-
     <el-form
       size="small"
       label-width="auto"
-      class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 pt-4 pb-4 flex items-center flex-wrap min-w-0">
+      class="bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-8 pt-3 pb-4 flex items-center flex-wrap min-w-0">
       <div class="flex items-center gap-2 flex-wrap">
         <el-form-item label="创建时间">
           <el-date-picker
@@ -255,6 +236,25 @@ watch(
       </div>
     </el-form>
 
+    <div class="summary-cards min-w-0" v-loading="summaryLoading">
+      <article
+        v-for="card in summaryCards"
+        :key="card.key"
+        class="summary-card bg-white dark:bg-[#1d1e1f] rounded-lg shadow px-5 py-8 min-w-0">
+        <div class="summary-card__icon" :class="card.icon"></div>
+        <div class="min-w-0">
+          <div class="summary-card__label">{{ card.label }}({{ card.unit }})</div>
+          <count-to
+            class="summary-card__value"
+            :start-val="0"
+            :end-val="cardStatistics[card.key]"
+            :decimals="card.decimals || 0">
+            <span class="summary-card__placeholder">--</span>
+          </count-to>
+        </div>
+      </article>
+    </div>
+
     <div class="summary-content min-h-0 min-w-0 overflow-hidden">
       <div class="summary-content__header">
         <h3 class="summary-content__title">{{ currentDeptName }}日报汇总</h3>
@@ -321,15 +321,15 @@ watch(
   overflow: hidden;
 }
 
-.summary-card::after {
+/* .summary-card::after {
   content: '';
   position: absolute;
   inset: auto -32px -32px auto;
-  width: 96px;
-  height: 96px;
+  width: 66px;
+  height: 66px;
   border-radius: 999px;
   background: linear-gradient(135deg, rgb(59 130 246 / 0.14), rgb(16 185 129 / 0.08));
-}
+} */
 
 .summary-card__icon {
   position: relative;
@@ -377,6 +377,7 @@ watch(
   display: flex;
   flex-direction: column;
   gap: 12px;
+  margin-top: 20px;
 }
 
 .summary-content__header {