css

public/react/src/modules/user/usersInfo/InfosBanner.js

@@ -32,88 +32,84 @@ class InfosBanner extends Component{
      let {pathname}=this.props.location;
      moduleName=pathname.split("/")[3];
     return(
-      <div className="pr mb60">
-        <img src={banner} style={{width:"100%"}}/>
-        <div className="bannerPanel">
-          <div className="educontent">
-            <div className="clearfix color-white mb20">
-              <p className="myPhoto mr30 fl"><img alt="头像" width='106px' height='106px' src={data && `${getImageUrl('images/'+data.avatar_url)}`}/></p>
-              <div className="fl">
-                <p className="clearfix mt20">
-                  <span className="username task-hide" style={{"maxWidth":'370px'}}>{data && data.name}</span>
-                  {
-                    data && is_current == false && data.identity =="学生" ? "" : <span className="userpost">{data && data.identity}</span>
-                  }
-                </p>
-                <p className="mt20">
-                  <Tooltip placement='bottom' title={ data && data.professional_certification ?"已职业认证":"未职业认证"}>
-                    <i className={ data && data.professional_certification ? "iconfont icon-shenfenzhenghaomaguizheng font-15 user-colorgrey-green mr30 ml2":"iconfont icon-shenfenzhenghaomaguizheng font-15 user-colorgrey-B8 mr30 ml2"}></i>
-                  </Tooltip>
-                  <Tooltip placement='bottom' title={ data && data.authentication ?"已实名认证":"未实名认证"}>
-                    <i className={ data && data.authentication ? "iconfont icon-renzhengshangjia font-15 user-colorgrey-green":"iconfont icon-renzhengshangjia font-15 user-colorgrey-B8"}></i>
-                  </Tooltip>
-                </p>
-              </div>
-              <div className="fr">
-                <div class="fl headtab mt20">
-                  <span>{is_current ? "我":"TA"}的经验值</span>
-                  <a style={{"cursor":"default"}}>{data && data.experience}</a>
-                </div> 
-                <div class="fl headtab mt20 pr leftTransform pl20">
-                  <span>{is_current ? "我":"TA"}的金币</span>
-                  <a style={{"cursor":"default"}}>{data && data.grade}</a>
-                </div> 
+      <div className="bannerPanel mb60">
+        <div className="educontent">
+          <div className="clearfix color-white mb25">
+            <p className="myPhoto mr30 fl"><img alt="头像" width='106px' height='106px' src={data && `${getImageUrl('images/'+data.avatar_url)}`}/></p>
+            <div className="fl">
+              <p className="clearfix mt20">
+                <span className="username task-hide" style={{"maxWidth":'370px'}}>{data && data.name}</span>
                 {
-                  is_current ? 
-                  <span className="fl mt35 ml80">
-                    {
-                      data && data.attendance_signed ? 
-                      <span className="user_default_btn user_grey_btn font-18">已签到</span>
-                      :
-                      <a herf="javascript:void(0);" onClick={this.props.signFor} className="user_default_btn user_yellow_btn fl font-18">签到</a>
-                    }
-                  </span> 
-                  :
-                  <span className="fl mt35 ml80">
-                    <a href={`${this.props.Headertop && this.props.Headertop.old_url}/messages/${login}/message_detail?target_ids=${id}`} className="user_default_btn user_yellow_btn fl font-18">私信</a>
-                  </span>
+                  data && is_current == false && data.identity =="学生" ? "" : <span className="userpost">{data && data.identity}</span>
                 }
-              </div>
+              </p>
+              <p className="mt20">
+                <Tooltip placement='bottom' title={ data && data.professional_certification ?"已职业认证":"未职业认证"}>
+                  <i className={ data && data.professional_certification ? "iconfont icon-shenfenzhenghaomaguizheng font-15 user-colorgrey-green mr30 ml2":"iconfont icon-shenfenzhenghaomaguizheng font-15 user-colorgrey-B8 mr30 ml2"}></i>
+                </Tooltip>
+                <Tooltip placement='bottom' title={ data && data.authentication ?"已实名认证":"未实名认证"}>
+                  <i className={ data && data.authentication ? "iconfont icon-renzhengshangjia font-15 user-colorgrey-green":"iconfont icon-renzhengshangjia font-15 user-colorgrey-B8"}></i>
+                </Tooltip>
+              </p>
             </div>
-            <div className="userNav">
-              <li className={`${moduleName == 'courses' ||moduleName == undefined ? 'active' : '' }`}>
-                <Link
-                  onClick={() => this.setState({moduleName: 'courses'})}
-                  to={`/users/${username}/courses`}>翻转课堂</Link>
-              </li>
-              <li className={`${moduleName == 'shixuns' ? 'active' : '' }`}>
-                <Link
-                  onClick={() => this.setState({moduleName: 'shixuns'})}
-                  to={`/users/${username}/shixuns`}>开发社区</Link>
-              </li>
-              <li className={`${moduleName == 'paths' ? 'active' : '' }`}>
-                <Link 
-                  onClick={() => this.setState({moduleName: 'paths'})}
-                  to={`/users/${username}/paths`}>实践课程</Link>
-              </li>
-              <li className={`${moduleName == 'projects' ? 'active' : '' }`}>
-              <Link
-                  onClick={() => this.setState({moduleName: 'projects'})}
-                  to={`/users/${username}/projects`}>项目</Link>
-              </li>
-
-              <li className={`${moduleName == 'package' ? 'active' : '' }`}>
-                <Link
-                  onClick={() => this.setState({moduleName: 'package'})}
-                  to={`/users/${username}/package`}>众包</Link>
-              </li>
-              <li className={`${moduleName == 'videoes' ? 'active' : '' }`}>
-                <Link
-                  onClick={() => this.setState({moduleName: 'videoes'})}
-                  to={`/users/${username}/videoes`}>视频</Link>
-              </li>
+            <div className="fr">
+              <div class="fl headtab mt20">
+                <span>{is_current ? "我":"TA"}的经验值</span>
+                <a style={{"cursor":"default"}}>{data && data.experience}</a>
+              </div> 
+              <div class="fl headtab mt20 pr leftTransform pl20">
+                <span>{is_current ? "我":"TA"}的金币</span>
+                <a style={{"cursor":"default"}}>{data && data.grade}</a>
+              </div> 
+              {
+                is_current ? 
+                <span className="fl mt35 ml80">
+                  {
+                    data && data.attendance_signed ? 
+                    <span className="user_default_btn user_grey_btn font-18">已签到</span>
+                    :
+                    <a herf="javascript:void(0);" onClick={this.props.signFor} className="user_default_btn user_yellow_btn fl font-18">签到</a>
+                  }
+                </span> 
+                :
+                <span className="fl mt35 ml80">
+                  <a href={`${this.props.Headertop && this.props.Headertop.old_url}/messages/${login}/message_detail?target_ids=${id}`} className="user_default_btn user_yellow_btn fl font-18">私信</a>
+                </span>
+              }
             </div>
           </div>
+          <div className="userNav">
+            <li className={`${moduleName == 'courses' ||moduleName == undefined ? 'active' : '' }`}>
+              <Link
+                onClick={() => this.setState({moduleName: 'courses'})}
+                to={`/users/${username}/courses`}>翻转课堂</Link>
+            </li>
+            <li className={`${moduleName == 'shixuns' ? 'active' : '' }`}>
+              <Link
+                onClick={() => this.setState({moduleName: 'shixuns'})}
+                to={`/users/${username}/shixuns`}>开发社区</Link>
+            </li>
+            <li className={`${moduleName == 'paths' ? 'active' : '' }`}>
+              <Link 
+                onClick={() => this.setState({moduleName: 'paths'})}
+                to={`/users/${username}/paths`}>实践课程</Link>
+            </li>
+            <li className={`${moduleName == 'projects' ? 'active' : '' }`}>
+              <Link
+                onClick={() => this.setState({moduleName: 'projects'})}
+                to={`/users/${username}/projects`}>项目</Link>
+            </li>
+            <li className={`${moduleName == 'package' ? 'active' : '' }`}>
+              <Link
+                onClick={() => this.setState({moduleName: 'package'})}
+                to={`/users/${username}/package`}>众包</Link>
+            </li>
+            <li className={`${moduleName == 'videoes' ? 'active' : '' }`}>
+              <Link
+                onClick={() => this.setState({moduleName: 'videoes'})}
+                to={`/users/${username}/videoes`}>视频</Link>
+            </li>
+          </div>
         </div>
       </div>
     )

public/react/src/modules/user/usersInfo/usersInfo.css

@@ -123,13 +123,14 @@
 
 /* 个人主页头部改版 */
 .bannerPanel{
-  position: absolute;
   width:100%;
   top:0px;
   left:0px;
-  height:100%;
+  height:186px;
   padding-top:25px;
   box-sizing: border-box;
+  background: url('../../../images/account/infobanner.png') no-repeat top center;
+
 }
 .username{
   font-size:26px;
@@ -193,10 +194,9 @@
   height: 54px;
   line-height: 54px;
   background: #fff;
-  box-shadow:3px 5px 11px 1px rgba(230,230,230,0.5);
+  box-shadow:0px 0px 24px 3px rgba(230,230,230,0.5);
   border-radius:7px;
   padding:0px 10px;
-  margin-top:8px;
 }
 .userNav li{
   display: inline-block;