菜单展开收起

src/css/index.less

@@ -120,10 +120,15 @@
       right: 0;
       z-index: 1;
     }
-    &>ul>li{
-      text-indent: 42px;
-      background: url("../images/module.png") 16px 12px no-repeat;
-      margin-bottom: 10px;
+    &>ul{
+      overflow-x: hidden;
+      white-space: nowrap;
+      &>li{
+        text-indent: 42px;
+        background: url("../images/module.png") 16px 12px no-repeat;
+        margin-bottom: 10px;
+      }
+
     }
     .YH-KZT,.YH-KZTKS{
       background: url("../images/home.png") 16px 10px no-repeat;
@@ -242,6 +247,13 @@
     height: 100%;
     background: @themeColor;
     position: relative;
+    .logo{
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+      color: #DEE5EF;
+      margin-bottom: 44px;
+    }
     &>a{
       position: absolute;
       top: 50%;
@@ -254,30 +266,79 @@
       line-height: 40px;
       margin-bottom: 10px;
       background: url("../images/module.png") center no-repeat;
+      position: relative;
+      cursor: pointer;
+      &:hover{
+        ul{
+          display: block;
+        }
+      }
       & ul{
         display: none;
         left: 60px;
         position: absolute;
-        width: 140px;
+        width: 186px;
+        background: @themeColor;
+        border-radius:4px;
+        box-shadow:0px 2px 16px -4px rgba(15,28,59,1);
+        margin-left: 3px;
+        &:before{
+          content: "";
+          display: inline-block;
+          width: 8px;
+          height: 32px;
+          background: url("../images/ar.png") no-repeat;
+          position: absolute;
+          left: -8px;
+        }
+        li{
+          height: 40px;
+          line-height: 40px;
+          color: #A5ADBF;
+          text-indent: 30px;
+          border-radius: 4px;
+          &:hover,&.active{
+            background: @activeBg;
+            color: @activeColor;
+          }
+        }
       }
-      &.YH-KZT{
-        background: url("../images/home.png") 16px 12px no-repeat;
+    }
+
+    .YH-KZT,.YH-KZTKS{
+      background: url("../images/home.png") 20px 10px no-repeat;
+      &:hover,&.active{
+        background: url("../images/home_a.png") @activeBg 20px 10px no-repeat;
       }
-      &.YH-ZKK{
-        background: url("../images/module.png") 16px 12px no-repeat;
+    }
+    .YH-ZKK,.YH-KSZR{
+      background: url("../images/data.png") 21px 10px no-repeat;
+      &:hover,&.active{
+        background: url("../images/data_a.png") @activeBg 21px 10px no-repeat;
       }
-      &.YH-QBYH-JCGN{
-        background: url("../images/item.png") 16px 12px no-repeat;
+    }
+    .YH-JCSJWH{
+      background: url("../images/item.png") 22px 13px no-repeat;
+      &:hover,&.active{
+        background: url("../images/item_a.png") @activeBg 22px 13px no-repeat;
       }
-      &.YH-JCSJWH{
-        background: url("../images/data.png") 16px 10px no-repeat;
+    }
+    .YH-BLZK{
+      background: url("../images/ba.png") 23px 10px no-repeat;
+      &:hover,&.active{
+        background: url("../images/ba_a.png") @activeBg 23px 10px no-repeat;
       }
-      &.YH-BLZK{
-        background: url("../images/un.png") 16px 11px no-repeat;
+    }
+    .YH-QXGL{
+      background: url("../images/qxgl.png") 16px 11px no-repeat;
+      &:hover,&.active{
+        background: url("../images/qxgl_a.png") @activeBg 16px 11px no-repeat;
       }
-      &.active{
-        background-color: #EEF4FF;
-        border-left: 3px @activeColor solid;
+    }
+    .YH-YCSJJK{
+      background: url("../images/un.png") 16px 11px no-repeat;
+      &:hover,&.active,&.list-1-show{
+        background: url("../images/un_a.png") @activeBg 16px 11px no-repeat;
       }
     }
   }

src/css/qcScore.less

@@ -48,8 +48,13 @@
     right: 0;
     z-index: 1;
   }
+  &>ul{
+    overflow-x: hidden;
+    white-space: nowrap;
+  }
   &>ul>li{
     color: @fstColor;
+    margin-bottom: 10px;
     &.menu-0{
       background: url("../images/total.png") 20px 9px no-repeat;
       &.active{
@@ -162,26 +167,94 @@
 .menu-mini{
   display: none;
   width: 60px;
+  height: 100%;
+  background: @themeColor;
+  position: relative;
+  .logo{
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    color: #DEE5EF;
+    margin-bottom: 44px;
+  }
+  &>a{
+    position: absolute;
+    top: 50%;
+    right: 0;
+    z-index: 1;
+  }
   &>ul>li{
     width: 100%;
     height: 40px;
     line-height: 40px;
-    background: url("../images/icon3.png") center no-repeat;
+    background: url("../images/module.png") center no-repeat;
+    cursor: pointer;
+    margin-bottom: 10px;
+    &:hover{
+      ul{
+        display: block;
+      }
+    }
     & ul{
       display: none;
       left: 60px;
       position: absolute;
-      width: 140px;
+      width: 186px;
+      background: @themeColor;
+      border-radius:4px;
+      box-shadow:0px 2px 16px -4px rgba(15,28,59,1);
+      margin-left: 3px;
+      z-index: 9;
+      &:before{
+        content: "";
+        display: inline-block;
+        width: 8px;
+        height: 32px;
+        background: url("../images/ar.png") no-repeat;
+        position: absolute;
+        left: -8px;
+      }
+      li{
+        height: 40px;
+        line-height: 40px;
+        color: #A5ADBF;
+        text-indent: 30px;
+        border-radius: 4px;
+        &:hover,&.active{
+          background: @activeBg;
+          color: @activeColor;
+        }
+      }
+    }
+    &.menu-0{
+      background: url("../images/total.png") 20px 9px no-repeat;
+      &:hover,&.active{
+        background: url("../images/total_a.png") @activeBg 20px 9px no-repeat;
+      }
+    }
+    &.menu-6{
+      background: url("../images/index.png") 20px 11px no-repeat;
+      &:hover,&.active{
+        background: url("../images/index_a.png") @activeBg 20px 11px no-repeat;
+      }
     }
-    &.YH-KZT{
-      background: url("../images/icon3.png") center no-repeat;
+    &.menu-1{
+      background: url("../images/inhis.png") 19px 11px no-repeat;
+      &:hover,&.active{
+        background: url("../images/inhis_a.png") @activeBg 19px 11px no-repeat;
+      }
     }
-    &.YH-QBYH-JCGN{
-      background: url("../images/icon2.png") center no-repeat;
+    &.menu-37{
+      background: url("../images/prod.png") 20px 10px no-repeat;
+      &:hover,&.active{
+        background: url("../images/prod_a.png") @activeBg 20px 10px no-repeat;
+      }
     }
-    &.active{
-      background-color: #EEF4FF;
-      border-left: 3px @activeColor solid;
+    &.menu-5{
+      background: url("../images/out.png") 21px 11px no-repeat;
+      &:hover,&.active{
+        background: url("../images/out_a.png") @activeBg 21px 11px no-repeat;
+      }
     }
   }
 }

src/html/index.html

@@ -27,11 +27,13 @@
         {{else}}
     <li class="page ${code}" code="${code}">
         {{/if}}
+        {{if subMenuList.length}}
         <ul>
             {{each subMenuList}}
             <li class="page" code="${code}">${name}</li>
             {{/each}}
         </ul>
+        {{/if}}
     </li>
 </script>
 <body>
@@ -41,16 +43,19 @@
               <div class="logo">
                   <img src="../images/lantone.png" alt="">
               </div>
-              <!--<a href="javescript:void(0);" class="slide-hide">
+              <a href="javescript:void(0);" class="slide-hide">
                   <img src="../images/down.png" alt="">
-              </a>-->
+              </a>
               <ul></ul>
               <div class="copy-right"><p>©杭州朗通信息技术有限公司</p></div>
           </div>
           <div class="menu-mini fl">
-              <!--<a href="javescript:void(0);" class="slide-show">
+              <div class="logo">
+                  朗通
+              </div>
+              <a href="javescript:void(0);" class="slide-show">
                   <img src="../images/up.png" alt="">
-              </a>-->
+              </a>
               <ul></ul>
           </div>
           <div class="main" id="mainBox">

src/html/qcScore.html

@@ -21,15 +21,17 @@
     </script>
     <script type="text/html" id="miniMenuTmpl">
         {{if sonMode.length}}
-        <li class="list-1 ${code}">
+        <li class="list-1  menu-${id}">
             {{else}}
-        <li class="page ${code}" code="${name}">
+        <li class="page  menu-${id}" code="${name}">
             {{/if}}
+            {{if sonMode.length}}
             <ul>
                 {{each sonMode}}
                 <li class="page" code="${name.replace(/[^\u4e00-\u9fa5|a-zA-Z0-9]+/g,'')}">${name}</li>
                 {{/each}}
             </ul>
+            {{/if}}
         </li>
     </script>
     <script type="text/html" id="infoTmpl">
@@ -273,16 +275,19 @@
             <div class="logo">
                 <img src="../images/lantone.png" alt="" style="width: 150px;">
             </div>
-            <!--<a href="javescript:void(0);" class="slide-show">
-                <img src="../images/up.png" alt="">
-            </a>-->
+            <a href="javescript:void(0);" class="slide-show">
+                <img src="../images/down.png" alt="">
+            </a>
             <ul id="subMenu"></ul>
             <div class="copy-right"><p>©杭州朗通信息技术有限公司</p></div>
         </div>
         <div class="menu-mini fl">
-           <!-- <a href="javescript:void(0);" class="slide-show">
-                <img src="../images/down.png" alt="">
-            </a>-->
+            <div class="logo">
+                朗通
+            </div>
+            <a href="javescript:void(0);" class="slide-hide">
+                <img src="../images/up.png" alt="">
+            </a>
             <ul></ul>
         </div>
         <div class="tab-container clearfix">

src/js/index.js

@@ -62,15 +62,15 @@ function initMenu(data,userInfo){
     $(".container").addClass("console-cont");
   }
   //菜单收起展开
-  $(".list-1").on("click",function(){
+  $(".menu .list-1").on("click",function(){
     if($(this).is(".list-1-show")){
       $(this).removeClass("list-1-show")
       $(this).find("ul").slideToggle();
       return;
     }
 
-    $(".list-1-show ul").slideUp();
-    $(".list-1").removeClass("list-1-show");
+    $(".menu .list-1-show ul").slideUp();
+    $(".menu .list-1").removeClass("list-1-show");
     const ulShow =  $(this).find("ul").css("display")
     if(ulShow == "none"){
       $(this).addClass("list-1-show")
@@ -79,11 +79,12 @@ function initMenu(data,userInfo){
   });
 //收起菜单
   $(".slide-hide").click(function(){
-    $(".menu").animate({"width":"45px"},function(){
+
+    $(".menu").animate({"width":"60px"},function(){
       $(this).hide();
       $(".menu-mini").show();
     });
-    $(".main").animate({"margin-left":"45px"});
+    $(".main").animate({"margin-left":"60px"});
   });
   //展开菜单
   $(".slide-show").click(function(){
@@ -93,14 +94,14 @@ function initMenu(data,userInfo){
     $(".main").animate({"margin-left":"205px"});
   });
 
-  $(".list-1 li").on("click",function(e){
+  $(".menu .list-1 li").on("click",function(e){
     e.stopPropagation();
   });
   //右侧页面切换
   $(".page").on("click",function(){
-    $(".menu .active").removeClass('active');
+    $(".menu .active,.menu-mini .active").removeClass('active');
     $(this).addClass("active");
-    $(this).parents(".list-1-show").addClass("active");
+    $(this).parents(".list-1").addClass("active");
     const code = $(this).attr("code");
     let url = './'+pageMap[code];
     if(code === 'YH-BLZK-ZKPFGR'){

src/js/qcScore.js

@@ -26,28 +26,28 @@ function initMenu(data){
   $("#subMenuTmpl").tmpl(menu).appendTo("#subMenu");
   $("#miniMenuTmpl").tmpl(menu).appendTo(".menu-mini ul");
   //菜单收起展开
-  $(".list-1").on("click",function(){
-    $(".list-1 .slide-up").removeClass('slide-up');
+  $(".sub-menu .list-1").on("click",function(){
+    $(".sub-menu .list-1 .slide-up").removeClass('slide-up');
     $(this).toggleClass('slide-up');
     $(this).find("ul").slideToggle();
   });
-  $(".list-1 li").on("click",function(e){
+  $(".sub-menu .list-1 li").on("click",function(e){
     e.stopPropagation();
   });
 //收起菜单
-  $(".slide-hide").click(function(){
-    $(".sub-menu").animate({"width":"45px"},function(){
+  $(".slide-show").click(function(){
+    $(".sub-menu").animate({"width":"60px"},function(){
       $(this).hide();
       $(".menu-mini").show();
     });
-    $(".tab-container").animate({"margin-left":"45px"});
+    $(".tab-container").animate({"margin-left":"60px"});
   });
   //展开菜单
-  $(".slide-show").click(function(){
+  $(".slide-hide").click(function(){
     $(".menu-mini").hide();
-    $(".sub-menu").show().animate({"width":"205px"},function(){
+    $(".sub-menu").show().animate({"width":"220px"},function(){
     });
-    $(".tab-container").animate({"margin-left":"205px"});
+    $(".tab-container").animate({"margin-left":"220px"});
   });
   //右侧内容切换
   $(".page").on("click",function(){
@@ -60,7 +60,7 @@ function initMenu(data){
     }
 
     //选中样式
-    $(".sub-menu .active").removeClass('active');
+    $(".sub-menu .active,.menu-mini .active").removeClass('active');
     $(this).parents(".list-1").addClass("active");
     $(this).addClass("active");
     //显示对应内容