菜单样式优化

layouts/basic-layout/product.vue

@@ -9,32 +9,36 @@
             <table class="t_table_box">
               <tr>
                 <td class="t_title">
-                  <a class="a_goIndex">
-                    <b class="title">首页</b>
-                  </a>
+                  <div class="title">
+                    <Icon type="ios-home" />
+                    <b>首页</b>
+                  </div>
                 </td>
                 <td>
                   <ul class="table_row_ul">
                     <li>
-                      <a class="a_goIndex" @click="goIndex">首页一</a>
+                      <div @click="goIndex">首页一</div>
                     </li>
                     <li>
-                      <a class="a_goIndex" @click="goIndexTwo">首页二</a>
+                      <div @click="goIndexTwo">首页二</div>
                     </li>
                   </ul>
                 </td>
               </tr>
               <tr v-for="(item,i) in filterSider" :key="i">
                 <td class="t_title">
-                  <b class="title">{{item.title}}</b>
+                  <div class="title">
+                    <Icon :type="item.icon" />
+                    <b>{{item.title}}</b>
+                  </div>
                 </td>
                 <td>
                   <ul class="table_row_ul">
-                    <li v-for="(li,i) in item.children" :key="i">
-                      <a
+                    <li v-for="(li,i) in item.children" :key="i" style="margin-bottom:-6px">
+                      <div
                         @click="goPage(item,li)"
                         :class="{'active': li.id === isActive}"
-                      >{{li.title}}</a>
+                      >{{li.title}}</div>
                     </li>
                   </ul>
                 </td>
@@ -457,17 +461,19 @@ export default {
         }
       }
       .top_menu_box {
+        padding: 13px 20px 18px 0;
         display: none;
         border-radius: 5px;
         position: absolute;
         z-index: 99999;
-        left: 56%;
-        top: 57%;
-        // min-width: 1084px;
-        min-width: 777px;
-        min-height: 300px;
-        box-shadow: 0px 5px 17px 5px rgba(0, 0, 0, 0.28);
-        background: #f5f6fa;
+        left: 20%;
+        top: 58%;
+        background-image: url("../../assets/images/home/menu.png");
+        background-size: 100% 100%;
+        min-width: 1030px;
+        min-height: 320px;
+        // box-shadow: 0px 5px 17px 5px rgba(0, 0, 0, 0.28);
+        // background: #f5f6fa;
         .t_table_box {
           border-collapse: collapse;
           border-radius: 5px;
@@ -485,30 +491,33 @@ export default {
           }
           tr {
             td {
-              padding: 9px 10px 0px;
+              padding: 8px 10px 3px 10px;
               .table_row_ul {
                 list-style: none;
-                border-bottom: 1px solid #e0e0e0;
+                border-bottom: 1px solid #172c5d;
                 text-align: left;
+
                 li {
                   list-style: none;
                   display: inline-block;
-                  a {
+                  min-width: 140px;
+                  div {
                     float: left;
                     padding: 0px 10px;
-                    line-height: 30px;
-                    margin: 0px 6px;
+
+                    //  line-height: 20px;
+                    // margin: 0px 6px;
                     border-radius: 4px;
                   }
-                  a:hover {
+                  div:hover {
                     background: #2680eb;
                     color: white;
                   }
-                  a:visited {
+                  div:visited {
                     background: #2680eb;
                     color: white;
                   }
-                  a.active {
+                  div.active {
                     background: #2680eb;
                     color: white;
                   }
@@ -518,12 +527,14 @@ export default {
           }
           .t_title {
             min-width: 150px;
+            text-align: left;
             background: #515a6e;
-            .a_goIndex {
-              color: #fff;
+            padding-left: 15px;
+            .ivu-icon {
+              font-size: 14px;
             }
             .title {
-              padding: 5px 10px;
+              margin-top: -10px;
             }
           }
         }
@@ -531,15 +542,15 @@ export default {
     }
     .menu:hover .home {
       margin-top: 10px;
-      height: 60px;
-      width: 60px;
+      height: 50px;
+      width: 50px;
       z-index: 88888;
     }
     .menu:hover .home .top_menu_box {
       display: block;
     }
     .menu:hover .home i {
-      font-size: 33px;
+      font-size: 25px;
       margin: 13px 0 0;
     }
     .ivu-breadcrumb {