opti: 修改首页样式

client/components/Header/Header.js

@@ -11,12 +11,16 @@ import Srch from './Search/Search'
 const { Header } = Layout;
 
 const MenuUser = (props) => (
-  <Menu>
-    <Menu.Item key="0">
-      <Link to={`/user/profile/${props.uid}`} onClick={props.relieveLink}><Icon type="user" />{ props.user }</Link>
+  <Menu
+  style={{
+    "boxShadow":"0 1px 6px rgba(0, 0, 0, 0.3)"
+  }}
+  >
+    <Menu.Item key="0" style={{"fontSize": ".14rem"}}>
+      <Link to={`/user/profile/${props.uid}`} onClick={props.relieveLink}><Icon type="user"/>个人中心</Link>
     </Menu.Item>
-    <Menu.Item key="1">
-      <a onClick={props.logout}>退出</a>
+    <Menu.Item key="1" style={{"fontSize": ".14rem"}}>
+      <a onClick={props.logout}><Icon type="logout" />退出</a>
     </Menu.Item>
   </Menu>
 );
@@ -34,17 +38,19 @@ const ToolUser = (props)=> (
       <Srch groupList={props.groupList}/>
     </li>
     <li className="toolbar-li">
-      <Dropdown overlay={
-        <MenuUser
-          user={props.user}
-          msg={props.msg}
-          uid={props.uid}
-          relieveLink={props.relieveLink}
-          logout={props.logout}
-        />
+      <Dropdown
+        placement = "bottomRight"
+        overlay={
+          <MenuUser
+            user={props.user}
+            msg={props.msg}
+            uid={props.uid}
+            relieveLink={props.relieveLink}
+            logout={props.logout}
+          />
       }>
         <a className="dropdown-link">
-          <Icon type="user"/>
+          <Icon type="solution" />
         </a>
       </Dropdown>
     </li>
@@ -119,40 +125,48 @@ class HeaderCom extends Component {
   }
   render () {
     const { login, user, msg, uid, curKey } = this.props;
+    const headerStyle = {
+      'background': 'url(./image/bg-img.jpg) no-repeat center',
+      'backgroundSize':'cover'
+    }
     return (
-      <acticle className="header-box">
-        <Layout className="layout">
-          <Header>
-            <div className="content">
-              <div className="logo">
-                <Link to="/" onClick={this.relieveLink}>YAPI</Link>
-              </div>
-              <Menu
-                mode="horizontal"
-                className="nav-toolbar"
-                theme="dark"
-                style={{ lineHeight : '.64rem'}}
-                onClick={this.linkTo}
-                selectedKeys={[curKey]}
-              >
-                <Menu.Item key="/group">
-                  <Link to="/group">项目广场</Link>
-                </Menu.Item>
-              </Menu>
-              <div className="user-toolbar">
-                {login?
-                  <ToolUser
-                    user = { user }
-                    msg = { msg }
-                    uid = { uid }
-                    relieveLink = { this.relieveLink }
-                    logout = { this.logout }
-                  />
-                  :""}
-              </div>
+      <acticle className={`header-box`} style={headerStyle}>
+        <Header style={{
+          background: "linear-gradient(to bottom,rgba(64,64,64,1),rgba(64,64,64,0.8))"
+        }}>
+          <div className="content">
+            <div className="logo">
+              <Link to="/" onClick={this.relieveLink}>YAPI</Link>
             </div>
-          </Header>
-        </Layout>
+            <Menu
+              mode="horizontal"
+              className="nav-toolbar"
+              theme="dark"
+              style={{
+                lineHeight : '.64rem',
+                backgroundColor:"transparent",
+                borderColor:"transparent"
+              }}
+              onClick={this.linkTo}
+              selectedKeys={[curKey]}
+            >
+              <Menu.Item key="/group">
+                <Link to="/group">项目广场</Link>
+              </Menu.Item>
+            </Menu>
+            <div className="user-toolbar">
+              {login?
+                <ToolUser
+                  user = { user }
+                  msg = { msg }
+                  uid = { uid }
+                  relieveLink = { this.relieveLink }
+                  logout = { this.logout }
+                />
+                :""}
+            </div>
+          </div>
+        </Header>
       </acticle>
     )
   }

client/components/Header/Header.scss

@@ -5,10 +5,18 @@ $color-blue-deeper: #34495E;
 $color-grey-deep : #929aac;
 $color-black-light : #404040;
 /* .header-box.css */
+
+//.light{
+//  background-color: #f7fafc;
+//  color: $color-blue;
+//}
+//.dark {
+//  background-color: $color-black-light;
+//  color: $color-white;
+//}
 .header-box {
   display: block;
   font-size: 0.14rem;
-  color: $color-white;
   z-index: 99;
   // 内容宽度
   .content {
@@ -17,7 +25,6 @@ $color-black-light : #404040;
     zoom: 1;
     overflow: hidden;
   }
-
   .logo {
     font-size: .3rem;
     float: left;
@@ -51,7 +58,7 @@ $color-black-light : #404040;
       }
       float: left;
       margin: 0 0 0 .12rem;
-      font-size: .14rem;
+      font-size: .2rem;
       cursor: pointer;
       color: $color-white;
       &:not(:last-child){
@@ -75,11 +82,7 @@ $color-black-light : #404040;
       i{
         margin-right: .03rem;
       }
-      .dropdown-link{
-        i{
-          font-size: .2rem;
-        }
-      }
     }
   }
 }
+

client/containers/Home/Home.js

@@ -13,34 +13,42 @@ import QueueAnim from 'rc-queue-anim';
 
 
 const oneAnim = { y: '+=30', opacity: 0, type: 'from', ease: 'easeOutQuad' };
+const style = {
+  'height':'100%',
+  'width':'100%',
+  'background': 'url(./image/bg-img.jpg) no-repeat center',
+  'backgroundSize':'cover'
+}
 const HomeGuest = (props) => (
   <div>
-    <div className="main-one">
-      <div className="container">
-        <Row>
-          <Col span={24}>
-            <div className="home-des">
-              <p className="title">YAPI</p>
-              <div className="detail">一个高效，易用，可部署的Api管理系统</div>
-            </div>
-          </Col>
-        </Row>
-        <Row>
-          <Col span={8} className="main-one-left">
-            <Login/>
-          </Col>
-          <Col span={16} className="main-one-right">
-            <div className="img-container">
-              <img src="./image/demo-img.png"/>
-            </div>
-          </Col>
-        </Row>
+    <div className="main-one" style = {style}>
+      <div style={{ background: "linear-gradient(to bottom,rgba(64,64,64,0.9),rgba(64,64,64,0.5))"}}>
+        <div className="container">
+          <Row>
+            <Col span={24}>
+              <div className="home-des">
+                <p className="title">YAPI</p>
+                <div className="detail">一个高效，易用，可部署的Api管理系统</div>
+              </div>
+            </Col>
+          </Row>
+          <Row>
+            <Col span={8} className="main-one-left">
+              <Login/>
+            </Col>
+            <Col span={16} className="main-one-right">
+              <div className="img-container">
+                <img src="./image/demo-img.png"/>
+              </div>
+            </Col>
+          </Row>
+        </div>
       </div>
     </div>
     <div className="feat-part">
       <div className="container">
         <OverPack
-          playScale={[0.3,0.1]}
+          playScale={[0.2,0.1]}
         >
           <TweenOne
             key="feat-motion-one"

client/containers/Home/Home.scss

@@ -14,9 +14,11 @@ $color-black-lighter: #404040;
   -webkit-box-orient: vertical;
   background: $color-blue-grey-lighter;
   .main-one{
-    padding: .5rem .5rem 0 .5rem;
+    //padding: .5rem .5rem 0 .5rem;
     //background: radial-gradient(ellipse at center,#45484d 0%,#000 100%);
     .home-des{
+      color: $color-white;
+      padding: .5rem 0 0;
       .title{
         font-size: .6rem;
       }
@@ -25,6 +27,7 @@ $color-black-lighter: #404040;
       }
     }
     .login-form{
+      color: $color-white;
     }
     .img-container{
       margin-bottom: -.2rem;
@@ -40,7 +43,7 @@ $color-black-lighter: #404040;
       margin-top: .2rem;
     }
     .main-one-right{
-      padding-left: .15rem;
+      padding-left: .5rem;
     }
   }
   .user-home{

client/containers/Login/Login.scss

@@ -15,17 +15,19 @@
   margin-bottom: .1rem;
 }
 
-.qsso-breakline {
-  position: relative;
-  text-align: center;
-  margin: .24rem auto;
-  height: 1px;
-  background-color: #bbb;
-  .qsso-breakword {
+.qsso-breakline{
+  display: flex;
+  align-items: center;
+  color: #999;
+  margin: .2rem auto;
+  &:before, &:after{
+    content: "";
     display: inline-block;
-    transform: translateY(-50%);
-    background-color: #f7f7f7;
-    padding: 0 .08rem;
-    color: #999;
+    height: .02rem;
+    flex: 1;
+    border-top: .01rem solid #bbb;
+  }
+  .qsso-breakword{
+    padding: 0 .1rem;
   }
 }