修改ui

public/rem.js

@@ -6,7 +6,7 @@
   var rootItem, rootStyle;
 
   function refreshRem() {
-    var width = docEl.getBoundingClientRect().height;
+    var width = docEl.getBoundingClientRect().width;
 
     //与淘宝做法不同，直接采用简单的rem换算方法1rem=100px
     var rem = (width * 100) / 2560;

src/pages/Home/index.js

@@ -11,7 +11,6 @@ import styles from './index.less';
 
 const HomePage = (props) => {
   const { projectId } = useParams();
-
   const { data } = useRequest(queryConditionSnapshot, {
     defaultParams: [{ project_id: projectId }],
   });
@@ -259,7 +258,7 @@ const Scada = () => {
     >
       <div className={styles.scada}>
         {data?.map((url) => (
-          <iframe style={{ width: '320px', height: '196px' }} src={url} />
+          <iframe style={{ width: '5.7rem', height: '2.64rem' }} src={url} />
         ))}
         <div className={styles.mask}></div>
       </div>
@@ -269,7 +268,6 @@ const Scada = () => {
 
 // 待办事项
 const Backlog = (props) => {
-  // const { data } = props;
   const { projectId } = useParams();
 
   const { data, loading } = useRequest(getPendingList, {

src/pages/Home/index.less

@@ -177,7 +177,7 @@
   margin-bottom: 0.4rem;
   padding: 0 0.2rem;
   overflow-y: auto;
-  height: 3.2rem;
+  height: 2.6rem;
   color: #3b3b3b;
   .item {
     padding: 0.08rem 0 0.2rem;

src/pages/Menu/index.js

@@ -5,37 +5,46 @@ import styles from './index.less';
 const menuList = [
   {
     name: '首页',
+    icon: require('@/assets/menu/home.png'),
     // path: (projectId) => `/home/${projectId}`,
   },
   {
     name: '工况管理',
+    icon: require('@/assets/menu/working.png'),
     // path: (projectId) => `/smart/work/${projectId}`,
   },
   {
     name: '系统自检',
+    icon: require('@/assets/menu/setting.png'),
     // path: (projectId) => `/self-inspection/${projectId}`,
   },
   {
     name: '智能管控',
+    icon: require('@/assets/menu/ai.png'),
     // path: (projectId) => `/hardware-controller/${projectId}`,
   },
   {
     name: '数字孪生',
+    icon: require('@/assets/menu/number.png'),
   },
   {
     name: '智慧运营',
+    icon: require('@/assets/menu/smart.png'),
     // path: (projectId) => `/smart-ops/${projectId}`,
   },
   {
     name: '安全管理',
+    icon: require('@/assets/menu/safty.png'),
     // path: (projectId) => `/safety/${projectId}`,
   },
   {
     name: '任务管理',
+    icon: require('@/assets/menu/walk.png'),
     // path: (projectId) => `/task-manage/${projectId}`,
   },
   {
     name: '设备管理',
+    icon: require('@/assets/menu/device.png'),
     // path: (projectId) => `/device/${projectId}`,
   },
 ];
@@ -48,19 +57,27 @@ function Menu() {
     UnityAction.sendMsg('menuItem', item.name);
   };
 
+  const handleBackClick = () => {
+    UnityAction.sendMsg('HideMenu');
+  };
+
   return (
-    <div className={styles.menu}>
-      {menuList.map((item) => (
-        <div
-          key={item.name}
-          className={`${styles.menuItem} ${
-            active == item.name ? styles.active : ''
-          }`}
-          onClick={() => handleClick(item)}
-        >
-          {item.name}
-        </div>
-      ))}
+    <div className={styles.main}>
+      <div className={styles.menu}>
+        {menuList.map((item) => (
+          <div
+            key={item.name}
+            className={styles.text}
+            onClick={() => handleClick(item)}
+          >
+            <img className={styles.icon} src={item.icon} />
+            {item.name}
+          </div>
+        ))}
+      </div>
+      <div className={styles.arrowCon} onClick={handleBackClick}>
+        <div className={styles.arrow} />
+      </div>
     </div>
   );
 }

src/pages/Menu/index.less

@@ -1,9 +1,21 @@
+.main {
+  margin-top: calc(100vh - 15.2rem);
+  float: right;
+  width: 3.2rem;
+  height: 15.2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  background: url('@/assets/menu/menu_bg.png') no-repeat center;
+  background-size: 100% 100%;
+}
 .menu {
+  margin-top: 0.6rem;
+  width: 2rem;
+  height: 11.8rem;
   display: flex;
-  align-items: center;
-  width: max-content;
-  overflow-x: auto;
-  height: calc(100vh - 6px);
+  flex-direction: column;
+  overflow-y: auto;
 }
 .menuItem {
   padding: 20px;
@@ -12,11 +24,42 @@
   cursor: pointer;
 
   &.active {
-    color: #4A90E2;
+    color: #4a90e2;
     font-weight: bold;
   }
 }
 
+.icon {
+  margin: 0.44rem auto 0.1rem;
+  width: 0.7rem;
+  height: 0.7rem;
+  display: block;
+}
+icon:first-child {
+  margin-top: 0;
+}
+.arrowCon {
+  width: 2rem;
+  height: 1.6rem;
+  // text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.arrow {
+  width: 0.7rem;
+  height: 0.7rem;
+  background: url('@/assets/menu/arrow.png') no-repeat center;
+  background-size: 100% 100%;
+}
+.text {
+  text-align: center;
+  font-size: 0.28rem;
+  font-family: Source Han Sans, Source Han Sans;
+  font-weight: 500;
+  color: #555555;
+}
+
 :global {
   #root {
     min-height: auto;