事件上报

src/pages/business_environmental_activities/components/EventReport.js

@@ -4,6 +4,7 @@ import {
     PlusOutlined,
 } from '@ant-design/icons';
 import styles from './EventReport.less';
+import statIcon from '../../../assets/business_envmonitoring/生成环保 3D 图标 (1) 1.svg';
 
 const statusMeta = {
     pending: { label: '待处理', ribbon: '#12c48b', action: '立案', actionColor: '#12c48b' },
@@ -94,13 +95,46 @@ const EventReport = () => {
     return (
         <div className={styles.container}>
             <div className={styles.statsRow}>
-                {stats.map((item) => (
+                <div className={`${styles.statCard} ${styles.statCard1}`}>
-                    <div key={item.title} className={styles.statCard}>
+                    <div className={styles.statCardLeft}>
-                        <div className={styles.statTitle}>{item.title}</div>
+                        <div className={styles.statTitle}>{stats[0].title}</div>
-                        <div className={styles.statValue}>{item.value}</div>
+                        <div className={styles.statValue}>{stats[0].value}</div>
-                        <div className={styles.statTime}>{item.time}</div>
+                        <div className={styles.statTime}>{stats[0].time}</div>
                     </div>
-                ))}
+                    <img src={statIcon} alt="事件总数" className={styles.statIcon} />
+                </div>
+                <div className={`${styles.statCard} ${styles.statCard2}`}>
+                    <div className={styles.statCardLeft}>
+                        <div className={styles.statTitle}>{stats[1].title}</div>
+                        <div className={styles.statValue}>{stats[1].value}</div>
+                        <div className={styles.statTime}>{stats[1].time}</div>
+                    </div>
+                    <img src={statIcon} alt="待处理" className={styles.statIcon} />
+                </div>
+                <div className={`${styles.statCard} ${styles.statCard3}`}>
+                    <div className={styles.statCardLeft}>
+                        <div className={styles.statTitle}>{stats[2].title}</div>
+                        <div className={styles.statValue}>{stats[2].value}</div>
+                        <div className={styles.statTime}>{stats[2].time}</div>
+                    </div>
+                    <img src={statIcon} alt="处理中" className={styles.statIcon} />
+                </div>
+                <div className={`${styles.statCard} ${styles.statCard4}`}>
+                    <div className={styles.statCardLeft}>
+                        <div className={styles.statTitle}>{stats[3].title}</div>
+                        <div className={styles.statValue}>{stats[3].value}</div>
+                        <div className={styles.statTime}>{stats[3].time}</div>
+                    </div>
+                    <img src={statIcon} alt="待接收" className={styles.statIcon} />
+                </div>
+                <div className={`${styles.statCard} ${styles.statCard5}`}>
+                    <div className={styles.statCardLeft}>
+                        <div className={styles.statTitle}>{stats[4].title}</div>
+                        <div className={styles.statValue}>{stats[4].value}</div>
+                        <div className={styles.statTime}>{stats[4].time}</div>
+                    </div>
+                    <img src={statIcon} alt="已结束" className={styles.statIcon} />
+                </div>
             </div>
 
             <div className={styles.filterRow}>

src/pages/business_environmental_activities/components/EventReport.less

@@ -1,4 +1,3 @@
-
 .container {
     background: #f6f8fb;
     border-radius: 10px;
@@ -17,13 +16,63 @@
 }
 
 .statCard {
-    background: #fff;
+    background: linear-gradient(0deg, #ffffff, #ffffff);
-    border-radius: 10px;
+    border: 2px solid #fff;
+    border-radius: 2px;
     padding: 12px 16px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.statCard1,
+.statCard2,
+.statCard3,
+.statCard4,
+.statCard5 {
+    border-width: 2px;
+}
+
+.statCard1 {
+    background:
+        linear-gradient(180deg, rgba(69, 150, 255, 0.2) 3.37%, rgba(255, 255, 255, 0) 100%);
+}
+
+.statCard2 {
+    background:
+        linear-gradient(180deg, rgba(76, 255, 88, 0.2) 3.37%, rgba(255, 255, 255, 0) 100%);
+}
+
+.statCard3 {
+    background:
+        linear-gradient(180deg, rgba(69, 150, 255, 0.2) 3.37%, rgba(255, 255, 255, 0) 100%);
+}
+
+
+.statCard4 {
+    background: linear-gradient(180deg, rgba(255, 143, 66, 0.2) 3.37%, rgba(255, 255, 255, 0) 100%);
+
+}
+
+.statCard5 {
+
+    background:
+        linear-gradient(180deg, rgba(255, 69, 96, 0.2) 3.37%, rgba(255, 255, 255, 0) 100%);
+}
+
+.statCardLeft {
     display: flex;
     flex-direction: column;
     gap: 6px;
+    text-align: left;
+}
+
+.statIcon {
+    width: 74px;
+    height: 74px;
+    object-fit: contain;
 }
 
 .statTitle {
@@ -43,22 +92,18 @@
 }
 
 .filterRow {
-    background: #fff;
+    padding: 0px 12px;
-    border-radius: 10px;
-    padding: 10px 12px;
     display: flex;
     align-items: center;
     gap: 14px;
-    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.04);
 }
 
 .reportButton {
-    background: linear-gradient(98deg, #12d49c 0%, #0ec9c9 100%);
+    background: rgba(0, 212, 138, 1);
     border: none;
-    border-radius: 8px;
+    padding: 0 12px;
-    padding: 0 16px;
+    height: 30px;
-    height: 34px;
+
-    box-shadow: 0 6px 14px rgba(18, 212, 156, 0.25);
 }
 
 .filters {
@@ -189,4 +234,4 @@
 
 .secondaryAction {
     color: #3e7aff;
-}
+}