菜单首页样式调整及头部调整

src/components/PageContent/index.js

@@ -22,7 +22,7 @@ export default (props) => {
           margin: '20px 0',
         }}
       >
-        Copyright © 2021-2031 by 金科环境股份有限公司
+        Copyright   2021-2031 by GreenTech. All Rights Reserved.
       </div>
     </div>
   );

src/components/UserDropdown/index.less

@@ -21,13 +21,6 @@
   margin-left: 10px;
   margin-right: 15px;
 }
-.arrow {
-  background-image: url(@/assets/UserDropdown/arrow.png);
-  background-size: contain;
-  background-repeat: no-repeat;
-  width: 6px;
-  height: 3px;
-}
 .name {
   // margin-left: 8px;
   // margin-right: 30px;
@@ -40,3 +33,30 @@
   text-align: right;
   margin-left: 10px;
 }
+.dropdown {
+  display: flex;
+  flex-direction: column;
+  background: rgba(235, 235, 235, 0.9);
+  background-repeat: no-repeat;
+  margin-top: 20px;
+  a {
+    height: 40px;
+    width: 90%;
+    font-size: 14px;
+    font-weight: 400;
+    color: #5c7288;
+    line-height: 40px;
+    letter-spacing: 1px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.6);
+    text-align: center;
+    margin-left: 5%;
+  }
+  .root {
+    :global {
+      .ant-dropdown {
+        padding-left: 14px;
+        min-width: 102px;
+      }
+    }
+  }
+}

src/components/UserDropdown/index.tsx

@@ -6,22 +6,29 @@ import { LogoutOutlined, UserOutlined } from '@ant-design/icons';
 import styles from './index.less';
 import { useModel } from '@umijs/max';
 
-const items: MenuProps['items'] = [
-  {
-    key: '1',
-    label: <a href="/login">退出登录</a>,
-    icon: <LogoutOutlined />,
-  },
-];
+const RenderDropDown = (menu: any) => {
+  console.log(menu);
+  return <div className={styles.dropdown}>
+    <a key='1'>
+      修改密码
+    </a>
+
+    <a key='2' href='/login'>
+      退出登录
+    </a>
+  </div>
+}
 
 export default function UserDropdown(props: any) {
   const { initialState: { user } } = useModel('@@initialState');
   return (
-    <Dropdown placement="top" menu={{ items }}>
-      <a className={styles.action} onClick={(e) => e.preventDefault()}>
-        <span className={styles.name}>{user?.CName}</span>
-        <div className={styles.userIcon}></div>
-      </a>
-    </Dropdown>
+    <div className={styles.root}>
+      <Dropdown placement="top" dropdownRender={(menu) => RenderDropDown(menu)}>
+        <a className={styles.action} onClick={(e) => e.preventDefault()}>
+          <span className={styles.name}>{user?.CName}</span>
+          <div className={styles.userIcon}></div>
+        </a>
+      </Dropdown>
+    </div>
   );
 }

src/pages/Home/index.less

@@ -1,5 +1,5 @@
 .background {
-  background-image: url(@/assets/UnityMenu/newBackground.jpg);
+  background-image: url(@/assets/UnityMenu/newBackground.png);
   width: 100%;
   height: calc(100vh - 56px);
   overflow-y: auto;
@@ -14,7 +14,6 @@
   align-items: center;
   background-color: #122c63;
 
-
   // align-items: flex-start;
   :global {
     .ant-popover-inner {
@@ -24,8 +23,8 @@
 }
 
 .menu {
-  width: 152px;
-  height: 152px;
+  width: 130px;
+  height: 130px;
   // background: linear-gradient(0deg, #285098, #1d3969);
   // box-shadow: 0px 3px 0.16rem 2px rgba(0, 0, 0, 0.3), 0px 5px 0.39rem 0.1rem rgba(0, 0, 0, 0.1);
   // border-radius: 50%;
@@ -37,57 +36,50 @@
 
 .menuContent {
   height: 100%;
-  width: 1480px;
+  width: 1486px;
   max-height: 100vh;
   overflow-y: hidden;
-  padding-top: 40px;
+  padding-top: 166px;
 }
 
 .menuFriName {
-  font-size: 24px;
   font-family: 'Microsoft YaHei UI';
-  /* Microsoft YaHei UI;*/
-  // font-weight: 400;
-  color: #bae3ff;
-  // line-height: 0.45rem;
-  // text-shadow: 0px 5px 14px rgba(0, 0, 0, 0.35), 0px 3px 12px rgba(0, 0, 0, 0.19);
   cursor: pointer;
   user-select: none;
-  letter-spacing: 2px;
   text-align: center;
   word-break: keep-all;
+  font-size: 16px;
+  font-weight: 400;
+  color: #caf0ff;
+  line-height: 18px;
+  letter-spacing: 1px;
 }
 
 .wrap {
   display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
   align-items: center;
-  background: url("@/assets/floor.png") no-repeat bottom center;
+  background: url('@/assets/floor.png') no-repeat bottom center;
   background-size: contain;
-  margin-bottom: 100px;
-  padding: 0 170px;
-
-  .empty {
-    width: 25%;
-    height: 0;
-    visibility: hidden;
-  }
+  margin-bottom: 106px;
+  padding: 0 68px;
+  display: flex;
+  width: 100%;
 }
 
 .item {
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 25%;
-  height: 220px;
-  margin-bottom: 10px;
+  width: 130px;
+  height: 186px;
+  margin-bottom: 78px;
   user-select: none;
+  margin-left: 170px;
 }
 
 .pic {
-  width: 152px;
-  height: 152px;
+  width: 100%;
+  height: 100%;
   background-size: cover;
   background-repeat: no-repeat;
-}
+}