修改样式

src/pages/Controller/index.less

@@ -17,6 +17,7 @@
   }
   .right {
     display: flex;
+    align-items: flex-start;
     flex-direction: column;
     justify-content: space-around;
   }

src/pages/DeviceManager/index.js

@@ -245,12 +245,32 @@ const Device = ({ projectId }) => {
   return (
     <div className={`content-tab ${styles.sparePart}`}>
       <Spin spinning={loadingDevice}>
-        <div className={styles.titleContent}>
+        {/* <div className={styles.titleContent}>
           <img className={styles.img} src={deviceIcon} />
           <div>
             <div className="value-number">{allData?.total}</div>
             <div className={styles.text}>设备总数（个）</div>
           </div>
+        </div> */}
+        <div className={styles.top}>
+          <div className={styles.left}>
+            <img
+              className={styles.img}
+              src={require('@/assets/air-conditioner.png')}
+            />
+            <div>
+              <div className="value-number">{allData?.total}</div>
+              设备总数（个）
+            </div>
+          </div>
+          <div className={styles.right}>
+            <div>
+              <i className={styles.icon}></i>正常：{allData?.total}
+            </div>
+            <div>
+              <i className={`${styles.icon} ${styles.offline}`}></i>异常：{0}
+            </div>
+          </div>
         </div>
         <Space className={styles.btns} size={28}>
           <div

src/pages/DeviceManager/index.less

@@ -15,6 +15,45 @@
   border-radius: 0.12rem;
   background: linear-gradient(to right, #4279e5, #372cc9);
 }
+.top {
+  display: flex;
+  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%;
+    display: flex;
+    align-items: center;
+  }
+  .img {
+    width: 1.5rem;
+    margin-right: 0.46rem;
+  }
+  .right {
+    display: flex;
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: space-around;
+  }
+  .icon {
+    width: 0.2rem;
+    height: 0.2rem;
+    // border-radius: 50%;
+    display: inline-block;
+    background-color: #12ceb3;
+    margin-right: 0.44rem;
+    vertical-align: middle;
+    &.error {
+      background-color: #fe5850;
+    }
+    &.offline {
+      background-color: #9b9b9b;
+    }
+  }
+}
 .titleContent {
   position: relative;
   display: flex;