头部字体交互

components/default/Header.vue

@@ -33,16 +33,16 @@
                 </li>
               </ul>
             </div>
-            <nuxt-link class="item" :to="'/'" v-show="showHome">商城首页</nuxt-link>
-            <a class="item" href="/user#/index">买家中心</a>
-            <a class="item" @click="toVendor">卖家中心</a>
+            <nuxt-link class="item size-l" :to="'/'" v-show="showHome">商城首页</nuxt-link>
+            <a class="item size-l" href="/user#/index">买家中心</a>
+            <a class="item size-l" @click="toVendor">卖家中心</a>
           </template>
           <template v-else>
-            <a class="item" @click="onLoginClick()">登录</a>
-            <a class="item" @click="onRegisterClick">注册</a>
-            <nuxt-link class="item" :to="'/'">商城首页</nuxt-link>
+            <a class="item size-s" @click="onLoginClick()">登录</a>
+            <a class="item size-s" @click="onRegisterClick">注册</a>
+            <nuxt-link class="item size-l" :to="'/'" v-show="showHome">商城首页</nuxt-link>
           </template>
-          <nuxt-link class="item" to="/help/home">帮助中心</nuxt-link>
+          <nuxt-link class="item size-l" to="/help/home">帮助中心</nuxt-link>
         </div>
       </div>
     </nav>
@@ -166,7 +166,8 @@
     height: 30px;
   }
   .header .navbar .navbar-container .navbar-right >a:hover {
-    font-weight: bold;
+    /*font-weight: bold;*/
+    font-size: 13px;
   }
   .dropdown-menu>li>a{
     padding: 0;
@@ -206,6 +207,7 @@
 
         .item-wrap {
           display: inline-block;
+          padding: 0 1em;
         }
 
         .item {
@@ -213,6 +215,7 @@
           display: inline-block;
           height: $nav-height;
           line-height: $nav-height;
+          vertical-align: middle;
         }
 
         a {
@@ -222,12 +225,20 @@
         .navbar-header {
           float: left;
 
+          &:hover {
+            .navbar-slogan {
+              font-size: 13px;
+            }
+          }
+
           .navbar-logo {
             margin-bottom: 2px;
+            vertical-align: middle;
           }
 
           .navbar-slogan {
             margin-left: $sm-pad;
+            vertical-align: middle;
           }
 
         }
@@ -235,8 +246,15 @@
         .navbar-right {
           float: right;
 
+          .size-l {
+            width: 72px;
+          }
+          .size-s {
+            width: 48px;
+          }
+
           .item {
-            padding: 0 $pad;
+            text-align: center;
           }
 
           .dropdown {