修改门禁样式

src/pages/SafetyManagement/index.js

@@ -162,81 +162,58 @@ const Door = ({ data, dataOver, loading, projectId }) => {
             <img className={styles.img} src={img} />
             <div className={styles.textCon}>
               <div className={styles.num}>{dataOver?.total}</div>
-              <div>在库数量（个）</div>
+              <div className={styles.text}>门禁数量（个）</div>
             </div>
           </div>
-          <div style={{ display: 'flex', justifyContent: 'space-around' }}>
-            <div style={{ display: 'flex', alignItems: 'center' }}>
-              <div
-                style={{
-                  backgroundColor: '#12ceb3',
-                  width: '10px',
-                  height: '10px',
-                  borderRadius: '5px',
-                  marginRight: '10px',
-                }}
-              />
-              <span>在线：{dataOver?.online}</span>
+          <div className={styles.bottom}>
+            <div className={styles.lTextCon2}>
+              <div className={styles.onlinePoint} />
+              <span className={styles.text}>在线：{dataOver?.online}</span>
             </div>
-            <div style={{ display: 'flex', alignItems: 'center' }}>
-              <div
-                style={{
-                  backgroundColor: 'gray',
-                  width: '10px',
-                  height: '10px',
-                  borderRadius: '5px',
-                  marginRight: '10px',
-                }}
-              />
-              <span>离线：{dataOver?.offline}</span>
+            <div className={styles.lTextCon2}>
+              <div className={styles.outlinePoint} />
+              <span className={styles.text}>离线：{dataOver?.offline}</span>
             </div>
           </div>
         </div>
-        <div className={`card-box ${styles.titleTwoContent}`}>
+        <div className={`card-box ${styles.cardRight}`}>
           <div
             style={{
               display: 'flex',
-              flexDirection: 'column',
-              height: '100%',
-              justifyContent: 'space-around',
+              alignItems: 'center',
             }}
           >
             <div
               style={{
-                display: 'flex',
-                alignItems: 'center',
+                backgroundColor: '#4a90e2',
+                width: '10px',
+                height: '10px',
+                borderRadius: '5px',
+                marginRight: '10px',
               }}
-            >
-              <div
-                style={{
-                  backgroundColor: '#4a90e2',
-                  width: '10px',
-                  height: '10px',
-                  borderRadius: '5px',
-                  marginRight: '10px',
-                }}
-              />
-              <span>今日进厂人数：{2}</span>
-            </div>
+            />
+            <span>今日进厂人数：{2}</span>
+          </div>
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
             <div
               style={{
-                display: 'flex',
-                alignItems: 'center',
+                backgroundColor: '#f5a623',
+                width: '10px',
+                height: '10px',
+                borderRadius: '5px',
+                marginRight: '10px',
               }}
-            >
-              <div
-                style={{
-                  backgroundColor: '#f5a623',
-                  width: '10px',
-                  height: '10px',
-                  borderRadius: '5px',
-                  marginRight: '10px',
-                }}
-              />
-              <span>今日出厂人数：{2}</span>
-            </div>
-            <Button onClick={handleClick}>门禁日志</Button>
+            />
+            <span>今日出厂人数：{2}</span>
           </div>
+          <Button className={styles.btn} onClick={handleClick}>
+            门禁日志
+          </Button>
         </div>
       </div>
       <Space direction="vertical" className={styles.sparePart}>

src/pages/SafetyManagement/index.less

@@ -41,6 +41,10 @@
     color: #4a4a4a;
   }
 }
+.lTextCon2 {
+  display: flex;
+  align-items: center;
+}
 .sparePart {
   width: 100%;
   .titleContent {
@@ -56,10 +60,6 @@
         margin: auto;
       }
     }
-    .lTextCon2 {
-      display: flex;
-      align-items: center;
-    }
     .lTextCon1 {
       .lTextCon2;
       margin-bottom: 32px;
@@ -75,28 +75,46 @@
       width: 49%;
       .up {
         display: flex;
+        align-items: center;
         margin-top: 32px;
         margin-left: 48px;
         .img {
           width: 136px;
           height: 130px;
           margin-right: 40px;
+          margin-bottom: 28px;
         }
         .textCon {
           text-align: center;
-          margin: auto;
         }
       }
+      .bottom {
+        display: flex;
+        margin-bottom: 6px;
+        justify-content: space-around;
+      }
     }
-  }
-  .titleTwoContent {
-    position: relative;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    width: 49%;
-    .titleLeft {
+    .cardRight {
+      width: 49%;
       display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      padding: 28px 114px 32px 112px;
+      .btn {
+        width: 157px;
+        height: 55px;
+        background: rgba(222, 237, 255, 0.91);
+        border-radius: 6px;
+        padding: 8px 26px;
+        font-size: 28px;
+        color: #329bfe;
+        line-height: 38px;
+      }
     }
   }
+  .text {
+    font-size: 28px;
+    color: #4a4a4a;
+    line-height: 38px;
+  }
 }