修改样式

src/pages/Controller/components/AirConditioner.js

@@ -22,7 +22,7 @@ const Work = (props) => {
 
   return (
     <div>
-      <div className={`card-box ${styles.top}`}>
+      <div className={styles.top}>
         <div className={styles.left}>
           <img
             className={styles.img}
@@ -44,12 +44,14 @@ const Work = (props) => {
         </div>
       </div>
       <Spin spinning={loading}>
-        {data?.list?.map((item) => (
-          <div key={item.id} className={`card-box ${styles.item}`}>
-            <i className={`${styles.icon} ${getIconStatus(item.status)}`}></i>{' '}
-            {item.name}
-          </div>
-        ))}
+        <div className={styles.listContent}>
+          {data?.list?.map((item) => (
+            <div key={item.id} className={`card-box ${styles.item}`}>
+              <i className={`${styles.icon} ${getIconStatus(item.status)}`}></i>
+              {item.name}
+            </div>
+          ))}
+        </div>
       </Spin>
     </div>
   );

src/pages/Controller/components/Light.js

@@ -22,14 +22,14 @@ const Work = (props) => {
 
   return (
     <div>
-      <div className={`card-box ${styles.top}`}>
+      <div className={styles.top}>
         <div className={styles.left}>
           <img
             className={styles.img}
             src={require('@/assets/air-conditioner.png')}
           />
           <div>
-            <div className={styles.number}>{data?.pagination?.total}</div>
+            <div className="value-number">{data?.pagination?.total}</div>
             照明数量
           </div>
         </div>
@@ -44,12 +44,14 @@ const Work = (props) => {
         </div>
       </div>
       <Spin spinning={loading}>
-        {data?.list?.map((item) => (
-          <div key={item.id} className={`card-box ${styles.item}`}>
-            <i className={`${styles.icon} ${getIconStatus(item.status)}`}></i>{' '}
-            {item.name}
-          </div>
-        ))}
+        <div className={styles.listContent}>
+          {data?.list?.map((item) => (
+            <div key={item.id} className={`card-box ${styles.item}`}>
+              <i className={`${styles.icon} ${getIconStatus(item.status)}`}></i>{' '}
+              {item.name}
+            </div>
+          ))}
+        </div>
       </Spin>
     </div>
   );

src/pages/Controller/index.js

@@ -12,19 +12,19 @@ const HardwareController = (props) => {
       <PageTitle>智能管控</PageTitle>
 
       <div
-        className={`card-box ${styles.item}`}
+        className={`card-box ${styles.itemLong}`}
         onClick={() => UnityAction.sendMsg('innerItem', 'scada')}
       >
         工艺监控
       </div>
       <div
-        className={`card-box ${styles.item}`}
+        className={`card-box ${styles.itemLong}`}
         onClick={() => UnityAction.sendMsg('innerItem', 'sensor')}
       >
         感知监控
       </div>
       <div
-        className={`card-box ${styles.item}`}
+        className={`card-box ${styles.itemLong}`}
         onClick={() => UnityAction.sendMsg('innerItem', 'locate')}
       >
         室内定位

src/pages/Controller/index.less

@@ -1,12 +1,13 @@
 .top {
   display: flex;
-  padding: 0.48rem 0.6rem 0.25rem;
+  padding: 0.48rem 1.8rem 0.25rem 0;
   font-family: Source Han Sans, Source Han Sans;
   font-weight: 500;
   color: #615d5d;
   font-size: 0.32rem;
+  justify-content: space-around;
   .left {
-    width: 50%;
+    // width: 50%;
     display: flex;
     align-items: center;
   }
@@ -14,28 +15,29 @@
     width: 1.52rem;
     margin-right: 0.45rem;
   }
-  .number {
-    font-size: 0.8rem;
-    font-family: PangMenZhengDao-3, PangMenZhengDao-3;
-    font-weight: 400;
-    color: #3b3b3b;
-    line-height: 0.62rem;
-    letter-spacing: 0.06rem;
-  }
   .right {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
   }
 }
-.item {
-  padding: 0.4rem 0.6rem;
 
+.listContent {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.itemLong {
+  padding: 0.4rem 0.6rem;
   font-size: 0.32rem;
   margin-top: 0.28rem;
   display: flex;
   align-items: center;
 }
+.item {
+  .itemLong;
+  width: 48%;
+}
 .icon {
   width: 0.2rem;
   height: 0.2rem;

src/pages/SafetyManagement/index.js

@@ -8,7 +8,7 @@ import {
 } from '@/services/safety';
 import { UnityAction } from '@/utils/utils';
 import { useNavigate, useParams, useRequest } from '@umijs/max';
-import { Button, Space, Spin } from 'antd';
+import { Button, Spin } from 'antd';
 import { useEffect, useState } from 'react';
 import styles from './index.less';
 const doorIcon = require('@/assets/deviceManager/doorIcon.png');
@@ -119,7 +119,7 @@ const Video = ({ data, dataOnline, loading }) => {
   return (
     <Spin spinning={loading}>
       <div className="content-tab">
-        <Space direction="vertical" size={16} className={styles.sparePart}>
+        <div className={styles.sparePart}>
           <div className={styles.titleContent}>
             <div className={styles.titleLeft}>
               <img className={styles.img} src={videoIcon} />
@@ -153,7 +153,7 @@ const Video = ({ data, dataOnline, loading }) => {
               </div>
             ))}
           </div>
-        </Space>
+        </div>
       </div>
     </Spin>
   );
@@ -179,7 +179,7 @@ const Door = ({ data, dataOver, loading, projectId }) => {
   return (
     <Spin spinning={loading}>
       <div className="content-tab">
-        <Space direction="vertical" size={16} className={styles.doorPart}>
+        <div className={styles.doorPart}>
           <div className={styles.titleContent}>
             <div className={styles.cardLeft}>
               <div className={styles.up}>
@@ -228,7 +228,7 @@ const Door = ({ data, dataOver, loading, projectId }) => {
               </div>
             ))}
           </div>
-        </Space>
+        </div>
       </div>
     </Spin>
   );

src/pages/SafetyManagement/index.less

@@ -40,7 +40,7 @@
 }
 .listItem {
   width: 48%;
-  margin: 0.29rem 0;
+  margin-bottom: 0.29rem;
 }
 .cardItem {
   display: flex;