首页调整

src/global.less

@@ -69,7 +69,7 @@
 
 /* 滚动条 */
 ::-webkit-scrollbar-track-piece {
-  background-color:#ededed;
+  background-color:#fff;
 }
 
 ::-webkit-scrollbar {
@@ -122,11 +122,6 @@
   color: #fff !important;
 }
 
-.ant-menu-horizontal .ant-menu-submenu-title .anticon {
-  margin-right: 0 !important;
-  font-size: 18px !important;
-}
-
 .ant-layout-sider .ant-menu-item:after {
   border: 0 !important;
 }

src/layout/index.js

@@ -2,6 +2,7 @@ import React, { useState, Fragment } from "react";
 import { Link } from 'react-router-dom';
 import { Layout, Menu, Icon, message, Avatar } from 'antd';
 import { connect } from 'react-redux';
+import classnames from 'classnames';
 
 import { ContextPath, Open } from '../util';
 
@@ -11,12 +12,14 @@ import './index.less';
 import { dispatchLatest } from "../model";
 
 import logo from '../assets/logo.png';
+import logoHome from '../assets/logo_home.png';
 
 const { Header, Sider, Content } = Layout;
 const { SubMenu } = Menu;
 
-const _Logout = ({session, location}) => session ?
-    <Menu className={"ml-auto layout-menu"} mode="horizontal" theme="light"
+const _Logout = ({session, isHome, location}) => session ?
+
+    <Menu className={ classnames('logout-menu', isHome?'':'ml-auto') } mode="horizontal" theme="light"
       onClick={null}>
       <SubMenu
         title={
@@ -111,22 +114,22 @@ export const HomeLayout = function ({ content, location }) {
   const subMenus = GetSubMenu(routes);
   return <Layout style={{ minHeight: '100vh' }}>
 
-    <Header style={{}} className={'bg-primary d-flex home-header'}>
+    <Header style={{}} className={'bg-white d-flex home-header'}>
       <div className="mr-3">
-      <img src={logo}
+      <img src={logoHome}
          alt="" style={{ maxHeight: '2rem' }} />
       </div>
       <Menu
-        mode="horizontal" theme={'dark'}
+        mode="horizontal"
         selectedKeys={[location.pathname]}
-        style={{ lineHeight: '64px', width: '500px'}}>
+        style={{ lineHeight: '64px'}}>
         {subMenus}
       </Menu>
 
-      <Logout />
+      <Logout isHome={true} />
     </Header>
 
-    <Layout style={{ backgroundColor: '#1f2531' }}> 
+    <Layout style={{ backgroundColor: '#eee' }}> 
       {content} 
     </Layout>
 

src/layout/index.less

@@ -26,13 +26,41 @@
     }
   }
 
-  .layout-menu {
+  .layout-menu, .logout-menu {
     i, span {
       color: #fff;
     }
   }
 }
 
+.home-header {
+
+  justify-content: space-between ;
+
+  &.ant-layout-header {
+    padding: 0 60px;
+  }
+
+  .layout-menu, .logout-menu {
+    i, span {
+      color: #000;
+    }
+
+    &:hover {
+      i, span {
+        color: #249aec;
+      }
+    }
+  }
+
+  .logout-menu {
+    .anticon-user {
+      margin-right: 0 !important;
+      font-size: 18px !important;
+    }
+  }
+}
+
 .manage-sider-logo {
   display: flex;
   align-items: center;

src/view/Home/Home.less

 @import '~antd/es/style/themes/default.less';
 
 .home-container {
+
+
   .home-search {
-    width: 1920px;
-    height: 700px;
-    background: url('../../assets/home/1.png');
+    width: 100%;
+    height: calc(100vh - 64px - 143px);
 
     .ant-input-lg {
-      height: 50px;
-      line-height: 50px;
+      height: 40px;
+      line-height: 40px;
     }
     
     .ant-btn-lg {
-      height: 50px;
-      font-size: 30px;
+      height: 40px;
+      font-size: 20px;
+      background-color: #f4c660;
+      border-color: #f4c660;
     }
   }
 
@@ -22,23 +25,30 @@
     height: 100%;
   }
 
-  p {
-    margin-bottom: 1rem;
-  }
-
   .home-menu {
+
+    background-color: #fff;
+    font-size: 20px;
+    color: #249aec;
+
     img {
-      width: 4rem;
-      height: 4rem;
-      transition: all 0.1s linear;
-      &:hover {
-        transform: scale(1.1, 1.1);
-      }
+      width: 43px;
+      height: 43px;
     }
 
     span, a {
-      line-height: 4rem;
+      line-height: 40px;
+      color: #249aec;
     }
+
+    &:hover {
+      background-color: #f4c660;
+
+      span, a {
+        color: #fff;
+      }
+    }
+
   }
 
   .home-grid-outter {
@@ -53,50 +63,4 @@
       }
     }
   }
-
-  @media (max-width: @screen-sm-max) {
-    .comet {
-      display: none;
-    }
-  }
-
-  @media (max-width: 1366px) {
-    .home-search { 
-      background-position-x: -450px;
-      background-position-y: -100px;
-      height: 600px;
-      .comet{
-        left: -450px;
-        top: -100px;
-      }
-    }
-
-    .home-grid-outter {
-      height: 950px;
-      .home-grid {
-        transform: scale(0.7);
-        transform-origin: top left;
-      }
-    }
-  }
-
-  @media (min-width: @screen-xxl-min) {
-    .home-search { 
-      background-position-x: 0px;
-      background-position-y: 0px;
-      height: 700px;
-    }
-    .comet{
-      left: 0px;
-      top: 0px;
-    }
-
-    .home-grid-outter {
-      height: 1350px;
-      .home-grid {
-        left: -100px;
-        transform: scale(1);
-      }
-    }
-  }
 }

src/view/Metadata/index.jsx

@@ -13,7 +13,7 @@ export default class Metadata extends Component {
           <iframe
             title="元数据"
             src="/center-home/meta"
-            style={{ width: '100%', height: '741px', border: 0 }}
+            style={{ width: '100%', height: 'calc(100vh - 168px - 48px - 5px)', border: 0 }}
           />
         </Card>
       </PageHeaderWrapper>