fix 事件列表

src/views/HomePage/index.scss

@@ -1,31 +1,55 @@
 #map {
-  height: 100%;
+    height: 100%;
 }
-.home-container {
-  height: calc(100vh - 60px);
-  position: relative;
 
-  background: #f6f7fb;
-  .home-content {
-    margin-top: 60px;
-    .incident-item {
-      border-radius: 8px;
-      padding: 15px;
-      box-sizing: border-box;
-      background-color: #fff;
-      margin: 12px 15px;
-      .title {
-        font-size: 16px;
-        color: #333333;
-        line-height: 22px;
-        padding-bottom: 12px;
-      }
-      p {
-        font-size: 14px;
-        color: #666666;
-        line-height: 20px;
-        padding-bottom: 5px;
-      }
+.home-container {
+    height: calc(100vh - 60px);
+    position: relative;
+    background: #f6f7fb;
+    .home-content {
+        margin-top: 60px;
+        .incident-item {
+            border-radius: 8px;
+            padding: 15px;
+            box-sizing: border-box;
+            background-color: #fff;
+            margin: 12px 15px;
+            position: relative;
+            .title {
+                font-size: 16px;
+                color: #0B33A8;
+                line-height: 22px;
+                padding-bottom: 22px;
+                .title-time {
+                    font-size: 12px;
+                    font-family: PingFangSC, PingFangSC-Regular;
+                    font-weight: 400;
+                    float: right;
+                    color: #999999;
+                }
+            }
+            .title::after {
+                content: "";
+                border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+                width: 100%;
+                height: 1px;
+                position: absolute;
+                left: 0;
+                top: 47px;
+            }
+            p {
+                font-size: 14px;
+                color: #666666;
+                line-height: 20px;
+                padding-bottom: 5px;
+                img {
+                    width: 14px;
+                    height: 14px;
+                    vertical-align: middle;
+                    margin-top: -4px;
+                    margin-right: 10px;
+                }
+            }
+        }
     }
-  }
-}
+}

src/views/HomePage/index.tsx

@@ -22,6 +22,15 @@ import {
   List,
 } from 'vant';
 import './index.scss';
+/** @ts-ignore */
+import icon_type from '@/assets/icons/incident/type@2x.png';
+/** @ts-ignore */
+import icon_source from '@/assets/icons/incident/source@2x.png';
+/** @ts-ignore */
+import icon_place from '@/assets/icons/incident/place@2x.png';
+/** @ts-ignore */
+import icon_grade from '@/assets/icons/incident/grade@2x.png';
+
 import { IncidentItem } from '@/api/incident';
 
 const baseIncidentTypeOptions: DropdownItemOption[] = [
@@ -133,7 +142,9 @@ export default defineComponent({
           title="应急处置"
           left-arrow
           fixed
-          onClickRight={() => router.push(`/status/${route.params.status}/report`)}
+          onClickRight={() =>
+            router.push(`/status/${route.params.status}/report`)
+          }
           v-slots={{ right: () => <Icon name="plus" /> }}
           style={{ zIndex: 2 }}
         />
@@ -164,8 +175,12 @@ export default defineComponent({
                   onClick={() => {
                     item.id && handleLinkDetail(item.id);
                   }}>
-                  <div class="title">{item.name}</div>
+                  <div class="title">
+                    {item.name}
+                    <div class="title-time">{item.createTime}</div>
+                  </div>
                   <p>
+                    <img src={icon_type} />
                     事件类型：
                     {
                       commonStore.globalDict['zhdd_incident_type']?.find(
@@ -174,6 +189,7 @@ export default defineComponent({
                     }
                   </p>
                   <p>
+                    <img src={icon_grade} />
                     事件等级：
                     {
                       commonStore.globalDict['zhdd_incident_level']?.find(
@@ -182,9 +198,15 @@ export default defineComponent({
                       )?.dictLabel
                     }
                   </p>
-                  <p>事件时间：{item.createTime}</p>
-                  <p>地点：{item.addr}</p>
-                  <p>事件来源：{item.source}</p>
+                  {/* <p>事件时间：{item.createTime}</p> */}
+                  <p>
+                    <img src={icon_place} />
+                    地点：{item.addr}
+                  </p>
+                  <p>
+                    <img src={icon_source} />
+                    事件来源：{item.source}
+                  </p>
                 </div>
               ))}
             </List>