菜单优化

layouts/basic-layout/product.vue

@@ -4,14 +4,15 @@
       <span class="menu">
         <a class="home">
           <Icon type="ios-keypad" />
-          <div class="top-menu-box">
-            <ul class="top-menu">
+          <div class="top_menu_box">
+            
+            <ul class="top_menu">
               <li v-for="(item,i) in filterSider">
-                <ul>
+                <ul class="row_ul">
                   <li class="title">{{item.title}}</li>
                   <li v-for="(li,j) in item.children">
-                      <a>{{li.title}}</a>                    
-                      </li>
+                    <a >{{li.title}}</a>                    
+                  </li>
                 </ul>
               </li>
             </ul>
@@ -21,7 +22,7 @@
       </span>
       <i-header-breadcrumb v-if="showBreadcrumb && !headerMenu && !isMobile" ref="breadcrumb" />
       <i-header-search v-if="showSearch && !headerMenu && !isMobile && !showBreadcrumb" />
-      <div class="header-right">
+      <div class="header_right">
         <i-header-search
           v-if="(showSearch && isMobile) || (showSearch && (headerMenu || showBreadcrumb))"
         />
@@ -279,6 +280,9 @@ export default {
 };
 </script>
 <style lang="less">
+.i-layout-header-trigger:hover {
+    background: #343b4a!important;
+}
 .product-layout {
   .ivu-layout-header {
     height: 50px;
@@ -311,27 +315,38 @@ export default {
           transition: font-size 0.5s, margin 0.5s, transform 0.5s;
         }
       }
-      .top-menu-box{
+      .top_menu_box{
         display: none;
+        border-radius: 5px;
         position: absolute;
         z-index: 99999;
         left: 70%;
         top: 66%;
-        min-width: 1800px;
+        min-width: 1084px;
         min-height: 300px;
         background: #f5f6fa;
         -webkit-transition: display 0.5s, -webkit-transform 0.5s;/* Safari */
         transition: display 0.5s, transform 0.5s;
       }
-      .top-menu {
+      .top_menu {
         border-radius: 4px;
         color: #2680eb;
         list-style: none;
         text-align: left;
+        li:first-of-type{
+          ul:first-of-type{
+            li:first-of-type{
+              border-top-left-radius: 5px;
+            }
+          }
+        }
         li {
           width: 100%;
           display: block;
-          float: left;
+          // float: left;
+          // height: 47px;
+          line-height: 46px;
+          border-bottom: 1px solid #ccc;
           ul {
               width: 100%;
               list-style: none;
@@ -340,10 +355,12 @@ export default {
               list-style: none;
               margin-right: 10px;
               width: 150px;
+              border: none;
                 a{
                     display: inline-block;
                     padding: 0 10px;
                     height: 30px;
+                    line-height: 30px;
                 }
                 a:hover{
                     background: #2680EB;
@@ -358,7 +375,6 @@ export default {
               color: white;
               text-align: center;
               font-weight: bold;
-                height: 47px;
             }
             .title:hover{
                 color: #ddd;
@@ -372,7 +388,7 @@ export default {
         width: 60px;
         z-index: 88888;
       }
-      .home:hover .top-menu-box {
+      .home:hover .top_menu_box {
         display: block;
       }
       .home:hover i{
@@ -385,7 +401,7 @@ export default {
       line-height: 50px;
     }
   }
-  .header-right {
+  .header_right {
     float: right;
     height: 50px;
     color: white;

layouts/default.vue

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