菜单优化

layouts/basic-layout/product.vue

@@ -9,7 +9,9 @@
             <ul class="top_menu">
               <li v-for="(item,i) in filterSider">
                 <ul class="row_ul">
-                  <li class="title">{{item.title}}</li>
+                  <b :class="item.children.length<6 ? 'title' : item.children.length<11 ? 'title02': item.children.length>11 ? 'title03' : '' " >{{item.title}}</b>
+                  <!-- <b class="title02" >{{item.title}}</b> -->
+                  <!-- <li class="title">{{item.title}}</li> -->
                   <li v-for="(li,j) in item.children">
                     <a >{{li.title}}</a>                    
                   </li>
@@ -334,8 +336,11 @@ export default {
         list-style: none;
         text-align: left;
         li:first-of-type{
+          border-top-left-radius: 5px;
+          border-top-right-radius: 5px;
           ul:first-of-type{
-            li:first-of-type{
+            border-top-right-radius: 5px;
+            b:first-of-type{
               border-top-left-radius: 5px;
             }
           }
@@ -374,10 +379,26 @@ export default {
               width: 104px;
               color: white;
               text-align: center;
-              font-weight: bold;
+              margin: 0 10px 0 0;
             }
             .title:hover{
-                color: #ddd;
+              color: #ddd;
+            }
+            .title02{
+              background: #515a6e;
+              width: 104px;
+              color: white;
+              text-align: center;
+              float: left;
+              margin: 0 10px 10px 0;
+            }
+            .title03{
+              background: #515a6e;
+              width: 104px;
+              color: white;
+              text-align: center;
+              float: left;
+              margin: 0 10px 70px 0;
             }
           }
         }

layouts/default.vue

@@ -3,6 +3,7 @@
 </template>
 <script>
 import MainLayout from "./basic-layout";
+// import MainLayout from "./basic-layout/product";
 // 配置
 import Setting from "@/setting";
 // 方法