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,7 +38,9 @@ const ToolUser = (props)=> (
       <Srch groupList={props.groupList}/>
     </li>
     <li className="toolbar-li">
-      <Dropdown overlay={
+      <Dropdown
+        placement = "bottomRight"
+        overlay={
           <MenuUser
             user={props.user}
             msg={props.msg}
@@ -44,7 +50,7 @@ const ToolUser = (props)=> (
           />
       }>
         <a className="dropdown-link">
-          <Icon type="user"/>
+          <Icon type="solution" />
         </a>
       </Dropdown>
     </li>
@@ -119,10 +125,15 @@ 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>
+      <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>
@@ -131,7 +142,11 @@ class HeaderCom extends Component {
               mode="horizontal"
               className="nav-toolbar"
               theme="dark"
-                style={{ lineHeight : '.64rem'}}
+              style={{
+                lineHeight : '.64rem',
+                backgroundColor:"transparent",
+                borderColor:"transparent"
+              }}
               onClick={this.linkTo}
               selectedKeys={[curKey]}
             >
@@ -152,7 +167,6 @@ class HeaderCom extends Component {
             </div>
           </div>
         </Header>
-        </Layout>
       </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,9 +13,16 @@ 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="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}>
@@ -37,10 +44,11 @@ const HomeGuest = (props) => (
           </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

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