Merge branch 'product' of git.mes123.com:zhouyx/mes-ui into product

layouts/basic-layout/product.vue

 <template>
   <Layout class="product-layout">
     <Header>
-      <span class="menu">
-        <a class="home">
+      <a class="menu">
+        <span class="home">
           <Icon type="ios-keypad" />
           <div class="top_menu_box">
-            
-            <ul class="top_menu">
-              <li v-for="(item,i) in filterSider">
-                <ul class="row_ul">
-                  <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>
-                </ul>
-              </li>
-            </ul>
+            <table class="t_table_box">
+              <tr v-for="(item,i) in filterSider">
+                <td class="t_title">
+                  <b class="title"
+                  >{{item.title}}</b>
+                </td>
+                <td>
+                  <ul class="table_row_ul">
+                    <li v-for="(li,j) in item.children">
+                      <a @click="goPage(li)">{{li.title}}</a>
+                    </li>
+                  </ul>
+                </td>
+              </tr>
+            </table>
+
           </div>
-          
-        </a>
       </span>
+        </a>
       <i-header-breadcrumb v-if="showBreadcrumb && !headerMenu && !isMobile" ref="breadcrumb" />
       <i-header-search v-if="showSearch && !headerMenu && !isMobile && !showBreadcrumb" />
       <div class="header_right">
@@ -268,7 +270,10 @@ export default {
           this.keepAlivePush(pageName);
         }
       });
-    }
+    },
+    goPage(u) {
+      this.$router.push(u.path)
+    },
   },
   mounted() {
     document.addEventListener("scroll", this.handleScroll, { passive: true });
@@ -282,7 +287,6 @@ export default {
 };
 </script>
 <style lang="less">
-
 .product-layout {
   .ivu-layout-header {
     height: 50px;
@@ -292,10 +296,7 @@ export default {
       margin: 0 10px;
       display: block;
       float: left;
-      // position: absolute;
-      // top: 10px;
-      // left: 10px;
-      width: 60px;
+      width: 100px;
       height: 60px;
       .home {
         position: relative;
@@ -307,114 +308,89 @@ export default {
         color: white;
         line-height: 30px;
         text-align: center;
-        
-        -webkit-transition: width 0.5s, height 0.5s, -webkit-transform 0.5s;/* Safari */
+        -webkit-transition: width 0.5s, height 0.5s, -webkit-transform 0.5s; /* Safari */
         transition: width 0.5s, height 0.5s, transform 0.5s;
-        i{
-           -webkit-transition: font-size 0.5s, margin 0.5s, -webkit-transform 0.5s;/* Safari */
+        i {
+          -webkit-transition: font-size 0.5s, margin 0.5s, -webkit-transform 0.5s; /* Safari */
           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%;
+        left: 56%;
+        top: 57%;
         min-width: 1084px;
         min-height: 300px;
+        box-shadow: 0px 5px 17px 5px rgba(0,0,0,0.28);
         background: #f5f6fa;
-        -webkit-transition: display 0.5s, -webkit-transform 0.5s;/* Safari */
-        transition: display 0.5s, transform 0.5s;
-      }
-      .top_menu {
-        border-radius: 4px;
-        color: #2680eb;
-        list-style: none;
-        text-align: left;
-        li:first-of-type{
-          border-top-left-radius: 5px;
-          border-top-right-radius: 5px;
-          ul:first-of-type{
+        .t_table_box{
+          border-collapse:collapse;
+          border-radius: 5px;
+          tr:first-of-type {
             border-top-right-radius: 5px;
-            b:first-of-type{
+            td:first-of-type {
               border-top-left-radius: 5px;
             }
           }
-        }
-        li {
-          width: 100%;
-          display: block;
-          // float: left;
-          // height: 47px;
-          line-height: 46px;
-          border-bottom: 1px solid #ccc;
-          ul {
-              width: 100%;
-              list-style: none;
-            li {
-              display: inline-block;
-              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;
+          tr:last-of-type {
+            border-bottom-right-radius: 5px;
+            td:first-of-type {
+              border-bottom-left-radius: 5px;
+            }
+          }
+          tr{
+            height: 40px;
+            line-height: 40px;
+            td{
+              padding: 5px 10px;
+              .table_row_ul{
+                list-style: none;
+                border-bottom: 1px solid #E0E0E0;
+                text-align: left;
+                li{
+                  list-style: none;
+                  display: inline-block;
+                  a {
+                    float: left;
+                    padding: 0px 10px;
+                    margin: 0 6px;
+                  }
+                  a:hover {
+                    background: #2680eb;
                     color: white;
                     border-radius: 4px;
+                  }
                 }
+              }
             }
-            .title {
-              display: inline-block;
-              background: #515a6e;
-              width: 104px;
-              color: white;
-              text-align: center;
-              margin: 0 10px 0 0;
-            }
-            .title:hover{
-              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;
+          }
+          .t_title{
+            min-width: 120px;
+            background: #515a6e;
+            .title{
+              padding: 5px 10px;
+              font-size: 16px;
             }
           }
         }
       }
-      .home:hover{
+    }
+      .menu:hover .home {
         margin-top: 10px;
         height: 60px;
         width: 60px;
         z-index: 88888;
       }
-      .home:hover .top_menu_box {
+      .menu:hover .home .top_menu_box {
         display: block;
       }
-      .home:hover i{
+      .menu:hover .home i {
         font-size: 33px;
         margin: 13px 0 0;
       }
-    }
     .ivu-breadcrumb {
       height: 50px;
       line-height: 50px;
@@ -429,10 +405,9 @@ export default {
       color: white;
       height: 50px;
       line-height: 50px;
-      // background: #343b4a!important;
     }
     .i-layout-header-trigger:hover {
-        background: #343b4a;
+      background: #343b4a;
     }
     .ivu-tooltip {
       color: white;