巡检列表页样式修改

src/pages/EqSelfInspection/List/index.js

@@ -2,9 +2,9 @@ import PageContent from '@/components/PageContent';
 import PageTitle from '@/components/PageTitle';
 import { GetTokenFromUrl, UnityAction } from '@/utils/utils';
 import { connect, history, useParams } from '@umijs/max';
-import { Table } from 'antd';
 import dayjs from 'dayjs';
 import { Fragment, useEffect } from 'react';
+import styles from './index.less';
 
 function List(props) {
   const { loading, list, processList = [], dispatch } = props;
@@ -67,8 +67,7 @@ function List(props) {
     ];
   };
 
-  const goToDetail = (record, e) => {
-    e.stopPropagation();
+  const goToDetail = (record) => {
     UnityAction.sendMsg('reportDetail', '');
     history.push(
       `/self-inspection/detail/${projectId}/${
@@ -94,12 +93,31 @@ function List(props) {
     <PageContent closeable={false}>
       <PageTitle returnable>自检记录</PageTitle>
 
-      <Table
-        bordered
-        loading={loading}
-        columns={getColumns()}
-        dataSource={list}
-      />
+      <div className={styles.list}>
+        {list.map((item) => (
+          <div className={styles.item} onClick={() => goToDetail(item)}>
+            {item.Status == 0 ? (
+              <div className={`${styles.status}`}>正常</div>
+            ) : (
+              <div className={`${styles.status} ${styles.statusError}`}>
+                异常
+              </div>
+            )}
+            <div className={styles.info}>
+              <div className={styles.time}>
+                <i></i>自检时间：{dayjs(item.CreatedTime).format('MM-DD HH:mm')}
+              </div>
+              {/* <div className={styles.desc}>
+                <i></i>
+                发现异常
+                <span className={styles.number}>4</span>
+                <span>项</span>
+              </div> */}
+            </div>
+            <div className={styles.btn}></div>
+          </div>
+        ))}
+      </div>
     </PageContent>
   );
 }

src/pages/EqSelfInspection/List/index.less

@@ -1,6 +1,68 @@
-.clickRow {
-  background-color: #225ea8;
-}
-.ant-table-tbody > .clickRow:hover > td {
-  background-color: #225ea8;
+.list {
+  margin-top: 40px;
+  .item {
+    padding: 94px 20px 56px;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 14px;
+    background: #ffffff;
+    box-shadow: 0px 0px 8px 14px rgba(0, 0, 0, 0.03);
+    border-radius: 8px;
+    align-items: center;
+  }
+  .status {
+    width: 100px;
+    height: 100px;
+    font-size: 26px;
+    font-weight: 400;
+    color: #000000;
+    text-align: center;
+    line-height: 100px;
+    background: url('@/assets/circle-success.png') no-repeat center;
+  }
+  .statusError {
+    background-image: url('@/assets/circle-error.png');
+  }
+  .info {
+    flex: 1;
+    padding-left: 100px;
+    i {
+      width: 10px;
+      height: 10px;
+      display: inline-block;
+      vertical-align: middle;
+      border-radius: 50%;
+      margin-right: 10px;
+      background-color: rgba(74, 144, 226, 1);
+    }
+  }
+  .time {
+    font-size: 18px;
+    font-weight: 400;
+    color: #4a4a4a;
+    line-height: 24px;
+  }
+  .desc {
+    font-size: 24px;
+    font-weight: 400;
+    color: #4a4a4a;
+    line-height: 34px;
+    .number {
+      font-size: 40px;
+      font-weight: 500;
+      color: #f5a623;
+      line-height: 56px;
+      margin-left: 8px;
+    }
+
+    span {
+      font-size: 22px;
+      color: #000000;
+    }
+  }
+  .btn {
+    width: 17px;
+    height: 26px;
+    background: url('@/assets/arr-right.png') no-repeat center;
+  }
 }