TBtools-顶部导航优化

htmldev/TBTools/src/views/main-navbar.vue

@@ -1,6 +1,6 @@
 <template>
   <nav class="site-navbar">
-    <div class="site-navbar clearfix">
+    <div class="site-navbar__body clearfix">
       <ul class="TT-nav">
         <li>
           <router-link :to="{name: 'home'}">
@@ -12,58 +12,58 @@
         </li>
         <li>
           <el-dropdown :show-timeout="0" placement="bottom" style="cursor: pointer;">
-            <span class="el-dropdown-link">生意参谋工具</span>
+            <span class="el-dropdown-link">淘宝工具</span>
             <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item v-for="item in toolsNav0" :key="item.name">
-                <router-link :to="{name: item.name}">{{ item.meta.title }}</router-link>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </li>
+              <div class="TT-tool-nav">
+                <ul class="nav-list">
+                  <li class="title">
+                    <h4>生意参谋工具</h4>
+                  </li>
+                  <li v-for="item in toolsNav0" :key="item.name">
+                    <router-link :to="{name: item.name}">{{ item.meta.title }}</router-link>
+                  </li>
+                </ul>
+                <ul class="nav-list">
+                  <li class="title">
+                    <h4>验号&淘客查询</h4>
+                  </li>
+                  <li v-for="item in toolsNav1" :key="item.name">
+                    <router-link :to="{name: item.name}">{{ item.meta.title }}</router-link>
+                  </li>
+                </ul>
 
-        <li>
-          <el-dropdown :show-timeout="0" placement="bottom" style="cursor: pointer;">
-            <span class="el-dropdown-link">验号&淘客查询</span>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item v-for="item in toolsNav1" :key="item.name">
-                <router-link :to="{name: item.name}">{{ item.meta.title }}</router-link>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </li>
+                <ul class="nav-list">
+                  <li class="title">
+                    <h4>运营工具</h4>
+                  </li>
+                  <li v-for="item in toolsNav2" :key="item.name">
+                    <router-link :to="{name: item.name}">{{ item.meta.title }}</router-link>
+                  </li>
+                </ul>
 
-        <li>
-          <el-dropdown :show-timeout="0" placement="bottom" style="cursor: pointer;">
-            <span class="el-dropdown-link">运营工具</span>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item v-for="item in toolsNav2" :key="item.name">
-                <router-link :to="{name: item.name}">{{ item.meta.title }}</router-link>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </li>
 
-        <li>
-          <el-dropdown :show-timeout="0" placement="bottom" style="cursor: pointer;">
-            <span class="el-dropdown-link">sku监控</span>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item v-for="item in toolsNav3" :key="item.name">
-                <router-link :to="{name: item.name}">{{ item.meta.title }}</router-link>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-        </li>
+                <ul class="nav-list">
+                  <li class="title">
+                    <h4>sku监控</h4>
+                  </li>
+                  <li v-for="item in toolsNav3" :key="item.name">
+                    <router-link :to="{name: item.name}">{{ item.meta.title }}</router-link>
+                  </li>
+                </ul>
 
-        <li>
-          <el-dropdown :show-timeout="0" placement="bottom" style="cursor: pointer;">
-            <span class="el-dropdown-link">淘宝详情页工具</span>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item v-for="item in toolsRoutes" :key="item.name">
-                <router-link :to="{name: item.name}">{{ item.meta.title }}</router-link>
-              </el-dropdown-item>
+                <ul class="nav-list">
+                  <li class="title">
+                    <h4>淘宝详情页工具</h4>
+                  </li>
+                  <li v-for="item in toolsRoutes" :key="item.name">
+                    <router-link :to="{name: item.name}">{{ item.meta.title }}</router-link>
+                  </li>
+                </ul>
+              </div>
             </el-dropdown-menu>
           </el-dropdown>
         </li>
+
         <li>
           <router-link :to="{name: 'mall'}">礼品商城</router-link>
         </li>
@@ -160,6 +160,13 @@ export default {
   padding: 0 3%;
   background: #fff;
 
+  .site-navbar__body {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+  }
+
   .TT-nav {
     flex: 1;
     display: flex;
@@ -180,6 +187,38 @@ export default {
   }
 }
 
+.TT-tool-nav {
+  display: flex;
+  padding: 10px 20px 40px;
+
+  .nav-list {
+    margin-left: 20px;
+
+    &:nth-of-type(1) {
+      margin-left: 0;
+    }
+  }
+
+  .title {
+    h4 {
+      text-align: center;
+      color: #409EFF;
+    }
+  }
+
+  li {
+    margin-top: 20px;
+
+    &:nth-of-type(2) {
+      margin-top: 20px;
+    }
+
+    a {
+      display: block;
+    }
+  }
+}
+
 .el-dropdown-link {
   font-size: 16px;
   color: #666;
@@ -190,6 +229,11 @@ a {
   font-size: 16px;
   color: #666;
   text-decoration: none;
+
+  &:hover {
+    color: #409EFF;
+    text-decoration: underline;
+  }
 }
 
 .btn-login,