资质证书

src/views/pms/qhse/credential/index.vue

@@ -1,6 +1,6 @@
-<template>
+<template>
   <div
-    class="qhse-page grid grid-cols-[auto_1fr] grid-rows-[auto_auto_minmax(0,1fr)_auto] gap-3 gap-x-4 h-[calc(100vh-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
+    class="qhse-page grid grid-cols-[auto_1fr] grid-rows-[auto_auto_minmax(0,1fr)_auto] gap-3 gap-x-4 h-[calc(100vh-10px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
     <DeptTreeSelect
       class="row-span-4"
       :top-id="rootDeptId"
@@ -11,52 +11,73 @@
       request-api="getSimpleDeptList"
       @node-click="handleDeptNodeClick" />
 
-    <div class="stats-cards">
-      <div
-        class="stats-card stats-card--expired stats-card--clickable"
-        @click="handleStatCardClick('expired')">
-        <div class="flex items-center gap-2">
-          <Icon icon="ep:info-filled" color="#de3b3b" />
-          <div class="stats-card__label">已过期</div>
-        </div>
-
-        <div class="stats-card__value">
-          <CountTo
-            :duration="2600"
-            :end-val="expired"
-            :start-val="0"
-            class="stats-card__value text-[40px]! pt-10 text-center! text-[#e35656]!" />
-        </div>
+    <div class="min-w-0 space-y-3">
+      <div class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg p-3 min-w-0">
+        <el-alert title="证书已过期红色预警" type="error" show-icon :closable="false">
+          <template #icon>
+            <Bell />
+          </template>
+        </el-alert>
+
+        <el-alert
+          title="证书60天橙色预警"
+          type="warning"
+          show-icon
+          :closable="false"
+          style="margin-top: 5px">
+          <template #icon>
+            <Bell />
+          </template>
+        </el-alert>
       </div>
-      <div
-        class="stats-card stats-card--warn stats-card--clickable"
-        @click="handleStatCardClick('warn')">
-        <div class="flex items-center gap-2">
-          <Icon icon="ep:bell-filled" color="#d97706" />
-          <div class="stats-card__label">60天预警</div>
-        </div>
-        <div class="stats-card__value">
-          <CountTo
-            :duration="2600"
-            :end-val="warn"
-            :start-val="0"
-            class="stats-card__value text-[40px]! pt-10 text-center! text-[#d97706]!" />
+
+      <div class="stats-cards">
+        <div
+          class="stats-card stats-card--expired stats-card--clickable"
+          @click="handleStatCardClick('expired')">
+          <div class="flex items-center gap-2">
+            <Icon icon="ep:info-filled" color="#de3b3b" />
+            <div class="stats-card__label">已过期</div>
+          </div>
+
+          <div class="stats-card__value">
+            <CountTo
+              :duration="2600"
+              :end-val="expired"
+              :start-val="0"
+              class="stats-card__value text-[40px]! pt-10 text-center! text-[#e35656]!" />
+          </div>
         </div>
-      </div>
-      <div
-        class="stats-card stats-card--total stats-card--clickable"
-        @click="handleStatCardClick('total')">
-        <div class="flex items-center gap-2">
-          <Icon icon="eos-icons:counting" color="#2563eb" />
-          <div class="stats-card__label">证书总数</div>
+        <div
+          class="stats-card stats-card--warn stats-card--clickable"
+          @click="handleStatCardClick('warn')">
+          <div class="flex items-center gap-2">
+            <Icon icon="ep:bell-filled" color="#d97706" />
+            <div class="stats-card__label">60天预警</div>
+          </div>
+          <div class="stats-card__value">
+            <CountTo
+              :duration="2600"
+              :end-val="warn"
+              :start-val="0"
+              class="stats-card__value text-[40px]! pt-10 text-center! text-[#d97706]!" />
+          </div>
         </div>
-
-        <div class="stats-card__value">
-          <CountTo
-            :duration="2600"
-            :end-val="totalCert"
-            :start-val="0"
-            class="stats-card__value text-[40px]! pt-10 text-center! text-[#2563eb]!" />
+        <div
+          class="stats-card stats-card--total stats-card--clickable"
+          @click="handleStatCardClick('total')">
+          <div class="flex items-center gap-2">
+            <Icon icon="eos-icons:counting" color="#2563eb" />
+            <div class="stats-card__label">证书总数</div>
+          </div>
+
+          <div class="stats-card__value">
+            <CountTo
+              :duration="2600"
+              :end-val="totalCert"
+              :start-val="0"
+              class="stats-card__value text-[40px]! pt-10 text-center! text-[#2563eb]!" />
+          </div>
         </div>
       </div>
     </div>
@@ -133,7 +154,6 @@
               :show-overflow-tooltip="true"
               :row-style="tableRowStyle"
               :row-class-name="tableRowClassName">
-              >
               <zm-table-column :label="t('monitor.serial')" width="70" align="center">
                 <template #default="scope">
                   {{ scope.$index + 1 }}
@@ -217,25 +237,6 @@
           @pagination="getList" />
       </div>
     </div>
-
-    <div class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg p-3 min-w-0">
-      <el-alert title="证书已过期红色预警" type="error" show-icon :closable="false">
-        <template #icon>
-          <Bell />
-        </template>
-      </el-alert>
-
-      <el-alert
-        title="证书60天橙色预警"
-        type="warning"
-        show-icon
-        :closable="false"
-        style="margin-top: 5px">
-        <template #icon>
-          <Bell />
-        </template>
-      </el-alert>
-    </div>
   </div>
 
   <!-- 新增/编辑证书对话框 -->