资质证书

src/views/pms/qhse/certificate.vue

@@ -251,23 +251,18 @@
       </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
+      class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg p-3 min-w-0 flex gap-4 justify-between">
+      <div
+        class="bg-[#fef0f0] text-[#f57979] px-3 flex-1 flex items-center justify-center text-center py-2 text-sm rounded-md"
+        ><el-icon class="stats-card__icon" :size="28"> <Icon icon="ep:info-filled" /> </el-icon
+        >证书已过期红色预警</div
+      >
+      <div
+        class="bg-[#fdf6ec] flex-1 text-[#e6a23c] text-center flex items-center px-3 py-2 text-sm rounded-md"
+        ><el-icon class="stats-card__icon" :size="28"> <Icon icon="ep:bell-filled" /> </el-icon
+        >证书60天橙色预警</div
+      >
     </div>
   </div>
 

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

@@ -1,6 +1,6 @@
 <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-8px-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-20px-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))]">
     <DeptTreeSelect
       class="row-span-4"
       :top-id="rootDeptId"
@@ -11,73 +11,52 @@
       request-api="getSimpleDeptList"
       @node-click="handleDeptNodeClick" />
 
-    <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-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-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="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
+        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 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 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
-          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
+        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>
@@ -233,6 +212,20 @@
           @pagination="getList" />
       </div>
     </div>
+
+    <div
+      class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg p-3 min-w-0 flex gap-4 justify-between">
+      <div
+        class="bg-[#fef0f0] text-[#f57979] px-3 flex-1 flex items-center justify-center text-center py-2 text-sm rounded-md"
+        ><el-icon class="stats-card__icon" :size="28"> <Icon icon="ep:info-filled" /> </el-icon
+        >证书已过期红色预警</div
+      >
+      <div
+        class="bg-[#fdf6ec] flex-1 text-[#e6a23c] text-center flex items-center justify-center px-3 py-2 text-sm rounded-md"
+        ><el-icon class="stats-card__icon" :size="28"> <Icon icon="ep:bell-filled" /> </el-icon
+        >证书60天橙色预警</div
+      >
+    </div>
   </div>
 
   <!-- 新增/编辑证书对话框 -->

src/views/pms/qhse/index.vue

@@ -193,22 +193,18 @@
       </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="台账90天橙色预警"
-        type="warning"
-        show-icon
-        :closable="false"
-        style="margin-top: 5px">
-        <template #icon>
-          <Bell />
-        </template>
-      </el-alert>
+    <div
+      class="bg-white dark:bg-[#1d1e1f] shadow rounded-lg p-3 min-w-0 flex gap-4 justify-between">
+      <div
+        class="bg-[#fef0f0] text-[#f57979] px-3 flex-1 flex items-center justify-center text-center py-2 text-sm rounded-md">
+        <el-icon class="stats-card__icon" :size="28"> <Icon icon="ep:info-filled" /> </el-icon
+        >台账已过期红色预警</div
+      >
+      <div
+        class="bg-[#fdf6ec] flex-1 text-[#e6a23c] flex items-center justify-center text-center px-3 py-2 text-sm rounded-md"
+        ><el-icon class="stats-card__icon" :size="28"> <Icon icon="ep:bell-filled" /> </el-icon
+        >台账90天橙色预警</div
+      >
     </div>
   </div>