门禁样式

src/pages/SafetyManagement/index.js

@@ -177,56 +177,24 @@ const Door = ({ data, dataOver, loading, projectId }) => {
           </div>
         </div>
         <div className={`card-box ${styles.cardRight}`}>
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-            }}
-          >
-            <div
-              style={{
-                backgroundColor: '#4a90e2',
-                width: '10px',
-                height: '10px',
-                borderRadius: '5px',
-                marginRight: '10px',
-              }}
-            />
-            <span>今日进厂人数：{2}</span>
+          <div className={styles.textContent}>
+            <div className={styles.in} />
+            <span className={styles.text}>今日进厂人数：{2}</span>
           </div>
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-            }}
-          >
-            <div
-              style={{
-                backgroundColor: '#f5a623',
-                width: '10px',
-                height: '10px',
-                borderRadius: '5px',
-                marginRight: '10px',
-              }}
-            />
-            <span>今日出厂人数：{2}</span>
+          <div className={styles.textContent}>
+            <div className={styles.out} />
+            <span className={styles.text}>今日出厂人数：{2}</span>
           </div>
           <Button className={styles.btn} onClick={handleClick}>
             门禁日志
           </Button>
         </div>
       </div>
-      <Space direction="vertical" className={styles.sparePart}>
-        {data?.map((item, idx) => (
-          <div
-            key={`door_${idx}`}
-            className="card-box"
-            style={{ padding: '10px' }}
-          >
-            {renderRed(item)}
-          </div>
-        ))}
-      </Space>
+      {data?.map((item, idx) => (
+        <div key={`door_${idx}`} className="card-box">
+          {renderRed(item)}
+        </div>
+      ))}
     </Space>
   );
 };

src/pages/SafetyManagement/index.less

@@ -13,19 +13,19 @@
   font-size: 36px;
   margin-bottom: 20px;
 }
+.point {
+  width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  margin-right: 12px;
+}
 .onlinePoint {
+  .point;
   background-color: #12ceb3;
-  width: 10px;
-  height: 10px;
-  border-radius: 5px;
-  margin-right: 10px;
 }
 .outlinePoint {
+  .point;
   background-color: #9b9b9b;
-  width: 10px;
-  height: 10px;
-  border-radius: 5px;
-  margin-right: 10px;
 }
 .rightIcon {
   position: absolute;
@@ -110,6 +110,18 @@
         color: #329bfe;
         line-height: 38px;
       }
+      .in {
+        .point;
+        background-color: #4a90e2;
+      }
+      .out {
+        .point;
+        background-color: #f5a623;
+      }
+      .textContent {
+        display: flex;
+        align-items: center;
+      }
     }
   }
   .text {