diff --git a/src/common/header.vue b/src/common/header.vue
index 21edcc5..4184009 100644
--- a/src/common/header.vue
+++ b/src/common/header.vue
@@ -1,15 +1,33 @@
 <template>
   <div class="box">
     <header class="w">
-      <div>
-        <router-link to="/">首页</router-link>
-        <router-link :to="loginRouter" style="color: #f10215">{{name}}</router-link>
-        <router-link to="order">我的订单</router-link>
-        <router-link to="goods">进入商城</router-link>
-        <router-link class="shop" to="/cart">
-          <img src="/static/svg/shop.svg" alt="">
-          <span style="padding-right: 4px;">购物车 </span><span> (0)</span>
-        </router-link>
+      <div class="w-box">
+        <div class="nav-logo">
+          <h1>
+            <router-link to="/" title="锤子科技官网">Smartisan</router-link>
+          </h1>
+        </div>
+        <div class="right-box">
+          <div class="nav-list">
+            <router-link to="goods">全部商品</router-link>
+            <router-link to="/">坚果 Pro</router-link>
+            <router-link to="/"> Smartisan M1 / M1L </router-link>
+            <router-link to="/"> Smartisan OS </router-link>
+            <router-link to="/">欢喜云</router-link>
+            <router-link to="/">应用下载</router-link>
+            <router-link to="/">官方论坛</router-link>
+          </div>
+          <div class="nav-aside">
+            <div class="user">
+              <router-link to="user">个人中心</router-link>
+            </div>
+            <div class="shop">
+              <router-link to="shop"></router-link>
+              <span class="cart-num"><i>7</i></span>
+            </div>
+          </div>
+        </div>
+
       </div>
     </header>
   </div>
@@ -41,35 +59,168 @@
 <style lang="scss" rel="stylesheet/scss" scoped>
   @import "../assets/style/theme";
 
-  .shop {
-    display: flex;
-    align-items: center;
-    padding: 0 5px;
-    img {
-      margin-right: 4px;
-      margin-top: -4px;
-    }
-  }
-
   .box {
+    background: #1a1a1a;
+    background-image: -webkit-linear-gradient(#000, #121212);
+    background-image: linear-gradient(#000, #121212);
     width: 100%;
-    background: $head-col;
+    &:after {
+      border-top: 1px solid #232323;
+      border-top: 1px solid hsla(0, 0%, 100%, .06);
+      border-bottom: 1px solid #000;
+      border-bottom: 1px solid rgba(0, 0, 0, .4);
+      content: " ";
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: -1px;
+    }
   }
 
   header {
-    height: 30px;
-    color: $c9;
-    > div {
-      display: flex;
-      justify-content: flex-end;
+    height: 100px;
+    z-index: 30;
+    position: relative;
+  }
+
+  .w-box {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
+    position: relative;
+    h1 {
       height: 100%;
+      display: flex;
+      align-items: center;
+      > a {
+        background: url(/static/images/global-logo-red@2x.85550cd7bec73c98adacee227ba6a8a0.png) no-repeat 50%;
+        background-size: cover;
+        display: block;
+        height: 40px;
+        width: 50px;
+        text-indent: -9999px;
+        background-position: 0 0;
+
+      }
+    }
+    .nav-list {
+      display: flex;
+      justify-content: center;
+      align-items: center;
       a {
-        color: $c9;
-        line-height: 30px;
+        color: #c8c8c8;
+        display: block;
+        font-size: 14px;
+        padding: 0 25px;
+        &:hover {
+          color: #fff;
+        }
+      }
+    }
+    .nav-aside {
+      position: relative;
+      &:before {
+        background: #333;
+        background: hsla(0, 0%, 100%, .2);
+        content: " ";
+        height: 13px;
+        width: 1px;
+        overflow: hidden;
+        position: absolute;
+        top: 4px;
+        left: 0;
+      }
+    }
+    .right-box {
+      display: flex;
+    }
+    .nav-aside {
+      display: flex;
+    }
+    .user {
+      margin-left: 41px;
+      width: 36px;
+      position: relative;
+      &:hover {
+        a:before {
+          content: " ";
+          background-position: -5px 0;
+        }
+      }
+      a {
+        position: relative;
+        width: 36px;
+        height: 20px;
+        display: block;
+        text-indent: -9999px;
+        &:before {
+          content: " ";
+          position: absolute;
+          left: 8px;
+          width: 20px;
+          top: 0;
+          height: 20px;
+          background: url(/static/images/account-icon@2x.32d87deb02b3d1c3cc5bcff0c26314ac.png) -5px 0;
+          background-size: 240px 107px;
+          background-position: -155px 0;
+          transition: none;
+        }
 
       }
-      a + a {
-        margin-left: 10px;
+    }
+    .shop {
+      position: relative;
+      float: left;
+      margin-left: 21px;
+      width: 61px;
+      &:hover {
+        a:before {
+          content: " ";
+          background-position: 0 -22px;
+        }
+      }
+      a {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        display: block;
+        right: 0;
+        z-index: 1;
+        &:before {
+          display: block;
+          height: 100%;
+          content: " ";
+          width: 30px;
+          background: url(/static/images/account-icon@2x.32d87deb02b3d1c3cc5bcff0c26314ac.png) 0 -22px;
+          background-size: 240px 107px;
+          background-position: -150px -22px;
+        }
+      }
+      .cart-num {
+        position: relative;
+        display: block;
+        margin-left: 31px;
+        margin-top: -1px;
+        min-width: 30px;
+        text-indent: 0;
+        line-height: 20px;
+        > i {
+          background: #eb746b;
+          background-image: -webkit-linear-gradient(#eb746b, #e25147);
+          background-image: linear-gradient(#eb746b, #e25147);
+          box-shadow: inset 0 0 1px hsla(0, 0%, 100%, .15), 0 1px 2px hsla(0, 0%, 100%, .15);
+          text-align: center;
+          font-style: normal;
+          display: inline-block;
+          width: 20px;
+          height: 20px;
+          line-height: 20px;
+          border-radius: 10px;
+          color: #fff;
+          font-size: 12px;
+        }
       }
     }
   }
diff --git a/src/page/index.vue b/src/page/index.vue
index 4ad74cc..e879c09 100644
--- a/src/page/index.vue
+++ b/src/page/index.vue
@@ -2,14 +2,14 @@
   <div>
     <y-header></y-header>
     <!--logo搜索块-->
-    <div class="logo-box">
-      <div class="w pr">
-        <!--<div class="pa logo"><a href="/" style="display: block;height: 100%"></a></div>-->
-        <div class="search">
-          <y-search></y-search>
-        </div>
-      </div>
-    </div>
+    <!--<div class="logo-box">-->
+      <!--<div class="w pr">-->
+        <!--&lt;!&ndash;<div class="pa logo"><a href="/" style="display: block;height: 100%"></a></div>&ndash;&gt;-->
+        <!--<div class="search">-->
+          <!--<y-search></y-search>-->
+        <!--</div>-->
+      <!--</div>-->
+    <!--</div>-->
     <router-view></router-view>
     <y-footer></y-footer>
   </div>