修改ui

src/components/TabsContent/index.less

@@ -1,18 +1,20 @@
 .tabsTitle {
   display: flex;
   align-items: center;
-  height: 24px;
+  height: 116px;
   margin-bottom: 10px;
   :nth-child(1) {
-    border-right: 1px solid black;
+    border-right: 1px solid #979797;
   }
   :last-child {
     border-right: none;
   }
 }
 .tabsItem {
-  padding: 0 20px;
+  padding: 0 40px;
+  color: #4a4a4a;
+  font-size: 36px;
 }
 .active {
-  color: #5093e3;
+  color: #4a90e2;
 }

src/pages/MessageCenter/index.js

@@ -7,7 +7,8 @@ import { Button } from 'antd';
 import dayjs from 'dayjs';
 import { useState } from 'react';
 import styles from './index.less';
-const icon = require('@/assets/air-conditioner.png');
+const icon1 = require('@/assets/message/work.png');
+const icon2 = require('@/assets/message/check.png');
 
 const MessageCenter = () => {
   const { projectId } = useParams();
@@ -37,16 +38,20 @@ const MessageCenter = () => {
       : '';
     return (
       <div className={`card-box ${styles.itemContent}`}>
-        <img style={{ width: '30px', height: '30px' }} src={icon} />
+        <img className={styles.img} src={tab == '1' ? icon1 : icon2} />
         <div>
-          <div style={{ marginBottom: '30px' }}>{item.MsgBady}</div>
+          <div className={styles.text}>{item.MsgBady}</div>
           <div>{time}</div>
         </div>
         <div className={styles.right}>
           <div
             className={item?.ReadStatus ? styles.redPoint : styles.nonePoint}
           />
-          <Button type="primary" onClick={handlerSeeClick}>
+          <Button
+            className={styles.btn}
+            type="primary"
+            onClick={handlerSeeClick}
+          >
             查看
           </Button>
         </div>

src/pages/MessageCenter/index.less

@@ -1,5 +1,5 @@
 .itemContent {
-  padding: 10px;
+  padding: 38px 40px 26px;
   display: flex;
   justify-content: space-between;
   .right {
@@ -9,20 +9,43 @@
     align-items: end;
     .redPoint {
       background-color: red;
-      width: 10px;
-      height: 10px;
-      border-radius: 5px;
+      width: 18px;
+      height: 18px;
+      border-radius: 9px;
     }
     .nonePoint {
       width: 10px;
       height: 10px;
     }
   }
+  .img {
+    width: 42px;
+    height: 44px;
+  }
+  .text {
+    font-size: 38px;
+    color: #000000;
+    line-height: 54px;
+    margin-bottom: 28px;
+  }
+  .time {
+    font-size: 30px;
+    color: #4a4a4a;
+    line-height: 40px;
+  }
+  .btn {
+    width: 140px;
+    height: 60px;
+    font-size: 30px;
+    color: #ffffff;
+    line-height: 40px;
+  }
 }
 .allRead {
   position: absolute;
-  top: 20px;
+  top: 68px;
   line-height: 24px;
-  right: 60px;
+  right: 104px;
+  font-size: 32px;
   cursor: pointer;
 }

src/pages/SafetyManagement/index.js

@@ -45,9 +45,10 @@ const DeviceManager = () => {
   } = useRequest(() => queryMonitorOnlineCount(projectId));
 
   useEffect(() => {
-    if (data?.list && tab == '2') UnityAction.sendMsg('doorData', data?.list);
+    if (data?.list && tab == '2')
+      UnityAction.sendMsg('doorData', JSON.stringify(data?.list));
     if (dataVList?.list && tab == '1')
-      UnityAction.sendMsg('camData', dataVList?.list);
+      UnityAction.sendMsg('camData', JSON.stringify(dataVList?.list));
   }, [data, dataVList]);
 
   const handleTabChange = (tab) => {
@@ -98,73 +99,41 @@ const DeviceManager = () => {
 const Video = ({ projectId, data, dataOnline, loading }) => {
   const renderRed = (item) => {
     return (
-      <div style={{ display: 'flex', alignItems: 'center' }}>
+      <div className={styles.cardItem}>
         <div
-          style={{
-            backgroundColor: item.Online ? '#12ceb3' : 'red',
-            width: '10px',
-            height: '10px',
-            borderRadius: '5px',
-            marginRight: '10px',
-          }}
+          className={item.Online ? styles.onlinePoint : styles.outlinePoint}
         />
-        <span>{item.Name}</span>
+        <span className={styles.name}>{item.Name}</span>
       </div>
     );
   };
   return (
-    <Space direction="vertical" className={styles.sparePart}>
+    <Space direction="vertical" size={16} className={styles.sparePart}>
       <div className={`card-box ${styles.titleContent}`}>
-        <img className={styles.img} src={img} />
-        <div>
-          <div className={styles.num}>{dataOnline?.total || 0}</div>
-          <div>在库数量（个）</div>
+        <div className={styles.titleLeft}>
+          <img className={styles.img} src={img} />
+          <div className={styles.textCon}>
+            <div className={styles.num}>{dataOnline?.total || 0}</div>
+            <div>在库数量（个）</div>
+          </div>
         </div>
         <div>
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              marginBottom: '20px',
-            }}
-          >
-            <div
-              style={{
-                backgroundColor: '#12ceb3',
-                width: '10px',
-                height: '10px',
-                borderRadius: '5px',
-                marginRight: '10px',
-              }}
-            />
+          <div className={styles.lTextCon1}>
+            <div className={styles.onlinePoint} />
             <span>在线：{dataOnline?.online || 0}</span>
           </div>
-          <div style={{ display: 'flex', alignItems: 'center' }}>
-            <div
-              style={{
-                backgroundColor: 'gray',
-                width: '10px',
-                height: '10px',
-                borderRadius: '5px',
-                marginRight: '10px',
-              }}
-            />
+          <div className={styles.lTextCon2}>
+            <div className={styles.outlinePoint} />
             <span>离线：{dataOnline?.offline || 0}</span>
           </div>
         </div>
       </div>
 
-      <Space direction="vertical" className={styles.sparePart}>
-        {data?.map((item, idx) => (
-          <div
-            key={`video_${idx}`}
-            className="card-box"
-            style={{ padding: '10px' }}
-          >
-            {renderRed(item)}
-          </div>
-        ))}
-      </Space>
+      {data?.map((item, idx) => (
+        <div key={`video_${idx}`} className="card-box">
+          {renderRed(item)}
+        </div>
+      ))}
     </Space>
   );
 };
@@ -177,36 +146,21 @@ const Door = ({ data, dataOver, loading, projectId }) => {
 
   const renderRed = (item) => {
     return (
-      <div style={{ display: 'flex', alignItems: 'center' }}>
+      <div className={styles.cardItem}>
         <div
-          style={{
-            backgroundColor: item?.status ? '#12ceb3' : 'red',
-            width: '10px',
-            height: '10px',
-            borderRadius: '5px',
-            marginRight: '10px',
-          }}
+          className={item?.status ? styles.onlinePoint : styles.outlinePoint}
         />
-        <span>{item?.name}</span>
+        <span className={styles.name}>{item?.name}</span>
       </div>
     );
   };
   return (
-    <div>
-      <div
-        style={{
-          display: 'flex',
-          justifyContent: 'space-between',
-          marginBottom: '10px',
-        }}
-      >
-        <div className="card-box" style={{ width: '49%', padding: '10px' }}>
-          <div
-            className={styles.titleTwoContent}
-            style={{ width: '100%', marginBottom: '10px' }}
-          >
+    <Space direction="vertical" size={16} className={styles.doorPart}>
+      <div className={styles.titleContent}>
+        <div className={`card-box ${styles.cardLeft}`}>
+          <div className={styles.up}>
             <img className={styles.img} src={img} />
-            <div>
+            <div className={styles.textCon}>
               <div className={styles.num}>{dataOver?.total}</div>
               <div>在库数量（个）</div>
             </div>
@@ -296,7 +250,7 @@ const Door = ({ data, dataOver, loading, projectId }) => {
           </div>
         ))}
       </Space>
-    </div>
+    </Space>
   );
 };
 

src/pages/SafetyManagement/index.less

@@ -2,38 +2,101 @@
   position: absolute;
   right: 0;
 }
-.titleContent {
-  position: relative;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-}
-.titleTwoContent {
-  position: relative;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  width: 49%;
-}
+
 .img {
-  width: 30%;
+  width: 136px;
+  height: 130px;
+  margin-right: 20px;
 }
 .num {
   color: #ffc400;
   font-size: 36px;
   margin-bottom: 20px;
 }
+.onlinePoint {
+  background-color: #12ceb3;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  margin-right: 10px;
+}
+.outlinePoint {
+  background-color: #9b9b9b;
+  width: 10px;
+  height: 10px;
+  border-radius: 5px;
+  margin-right: 10px;
+}
 .rightIcon {
   position: absolute;
   right: 20px;
   top: 20px;
 }
+.cardItem {
+  display: flex;
+  padding: 40px 44px 32px;
+  align-items: center;
+  .name {
+    font-size: 28px;
+    color: #4a4a4a;
+  }
+}
 .sparePart {
   width: 100%;
-  .cardItem {
+  .titleContent {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 48px 212px 28px 104px;
+    .titleLeft {
+      display: flex;
+      .textCon {
+        text-align: center;
+        margin: auto;
+      }
+    }
+    .lTextCon2 {
+      display: flex;
+      align-items: center;
+    }
+    .lTextCon1 {
+      .lTextCon2;
+      margin-bottom: 32px;
+    }
+  }
+}
+.doorPart {
+  width: 100%;
+  .titleContent {
     display: flex;
-    padding: 10px;
     justify-content: space-between;
+    .cardLeft {
+      width: 49%;
+      .up {
+        display: flex;
+        margin-top: 32px;
+        margin-left: 48px;
+        .img {
+          width: 136px;
+          height: 130px;
+          margin-right: 40px;
+        }
+        .textCon {
+          text-align: center;
+          margin: auto;
+        }
+      }
+    }
+  }
+  .titleTwoContent {
+    position: relative;
+    display: flex;
+    justify-content: space-around;
     align-items: center;
+    width: 49%;
+    .titleLeft {
+      display: flex;
+    }
   }
 }