Página Principal Explorar Ajuda
Registe-se Iniciar Sessão
front
/
AIPlatform
2
0
Fork 0
Ficheiros Problemas 0 Pull Requests 0 Wiki
Browse Source

收起菜单，缺UI

zhouna 5 years atrás
parent
bb97336380
commit
5b4ae221c8
6 changed files with 127 additions and 2 deletions
Split View Show Diff Stats
  1. 29 0
      src/css/index.less
  2. 27 0
      src/css/qcScore.less
  3. 20 1
      src/html/index.html
  4. 18 0
      src/html/qcScore.html
  5. 17 1
      src/js/index.js
  6. 16 0
      src/js/qcScore.js

+ 29 - 0
src/css/index.less
Ver Ficheiro 

@@ -85,6 +85,9 @@
 
   height: 100%;
 
   overflow-y: auto;
 
   padding-top: 15px;
 
+  .slide-btn{
 
+    display: inline-block;
 
+  }
 
   .active{
 
     color: @activeColor;
 
     background: @activeBg;
 
@@ -140,6 +143,32 @@
 
     padding: 10px 0 20px;
 
   }
 
 }
 
+.menu-mini{
 
+  display: none;
 
+  width: 60px;
 
+  &>ul>li{
 
+    width: 100%;
 
+    height: 40px;
 
+    line-height: 40px;
 
+    background: url("../images/icon3.png") center no-repeat;
 
+    & ul{
 
+      display: none;
 
+      left: 60px;
 
+      position: absolute;
 
+      width: 140px;
 
+    }
 
+    &.YH-KZT{
 
+      background: url("../images/icon3.png") center no-repeat;
 
+    }
 
+    &.YH-QBYH-JCGN{
 
+      background: url("../images/icon2.png") center no-repeat;
 
+    }
 
+    &.active{
 
+      background-color: #EEF4FF;
 
+      border-left: 3px #5A8EEE solid;
 
+    }
 
+  }
 
+}
 
 .main{
 
   margin-left:@menuWt;
 
   height: 100%;

+ 27 - 0
src/css/qcScore.less
Ver Ficheiro 

@@ -36,6 +36,7 @@
 
   height: 100%;
 
   float: left;
 
   overflow-y: auto;
 
+  overflow-x: hidden;
 
   border-right: 1px @frameBdColor solid;
 
   .active{
 
     color: @activeColor;
 
@@ -88,6 +89,32 @@
 
     padding: 10px 0 20px;
 
   }
 
 }
 
+.menu-mini{
 
+  display: none;
 
+  width: 60px;
 
+  &>ul>li{
 
+    width: 100%;
 
+    height: 40px;
 
+    line-height: 40px;
 
+    background: url("../images/icon3.png") center no-repeat;
 
+    & ul{
 
+      display: none;
 
+      left: 60px;
 
+      position: absolute;
 
+      width: 140px;
 
+    }
 
+    &.YH-KZT{
 
+      background: url("../images/icon3.png") center no-repeat;
 
+    }
 
+    &.YH-QBYH-JCGN{
 
+      background: url("../images/icon2.png") center no-repeat;
 
+    }
 
+    &.active{
 
+      background-color: #EEF4FF;
 
+      border-left: 3px #5A8EEE solid;
 
+    }
 
+  }
 
+}
 
 .tab-container{
 
   margin-left: @menuWt+10px;
 
   height: 100%;

+ 20 - 1
src/html/index.html
Ver Ficheiro 

@@ -19,6 +19,19 @@
 
         </ul>
 
     </li>
 
 </script>
 
+<script type="text/html" id="miniMenuTmpl">
 
+    {{if subMenuList.length}}
 
+    <li class="list-1 ${code}">
 
+        {{else}}
 
+    <li class="page ${code}" code="${code}">
 
+        {{/if}}
 
+        <ul>
 
+            {{each subMenuList}}
 
+            <li class="page" code="${code}">${name}</li>
 
+            {{/each}}
 
+        </ul>
 
+    </li>
 
+</script>
 
 <body>
 
   <div class="container">
 
       <div class="header clearfix">
 
@@ -36,8 +49,14 @@
 
       </div>
 
       <div class="main-body clearfix">
 
           <div class="menu fl">
 
+              <a href="javescript:void(0);" class="slide-hide">《</a>
 
               <ul></ul>
 
-              <div class="copy-right">©杭州朗通信息技术有限公司</div></div>
 
+              <div class="copy-right">©杭州朗通信息技术有限公司</div>
 
+          </div>
 
+          <div class="menu-mini fl">
 
+              <a href="javescript:void(0);" class="slide-show">》</a>
 
+              <ul></ul>
 
+          </div>
 
           <div class="main" id="mainBox">
 
               <iframe src="./console.html" frameborder="0" id="contentIframe"></iframe>
 
           </div>

+ 18 - 0
src/html/qcScore.html
Ver Ficheiro 

@@ -19,6 +19,19 @@
 
             </ul>
 
         </li>
 
     </script>
 
+    <script type="text/html" id="miniMenuTmpl">
 
+        {{if sonMode.length}}
 
+        <li class="list-1 ${code}">
 
+            {{else}}
 
+        <li class="page ${code}" code="${name}">
 
+            {{/if}}
 
+            <ul>
 
+                {{each sonMode}}
 
+                <li class="page" code="${name.replace(/[^\u4e00-\u9fa5|a-zA-Z0-9]+/g,'')}">${name}</li>
 
+                {{/each}}
 
+            </ul>
 
+        </li>
 
+    </script>
 
     <script type="text/html" id="infoTmpl">
 
         <span>病案号：${fileCode}</span>
 
         <span>姓名：${name}</span>
 
@@ -619,9 +632,14 @@
 
     <p id="loading">加载中，请稍候 ...</p>
 
     <div class="main-part clearfix">
 
         <div class="sub-menu content-ht">
 
+            <a href="javescript:void(0);" class="slide-hide">《</a>
 
             <ul id="subMenu"></ul>
 
             <div class="copy-right">©杭州朗通信息技术有限公司</div>
 
         </div>
 
+        <div class="menu-mini fl">
 
+            <a href="javescript:void(0);" class="slide-show">》</a>
 
+            <ul></ul>
 
+        </div>
 
         <div class="tab-container clearfix">
 
             <div class="flaw-table"></div>
 
             <div class="content-box fl" id="contentInfo"></div>

+ 17 - 1
src/js/index.js
Ver Ficheiro 

@@ -38,6 +38,7 @@ window.userActionHide = userActionHide
 
 function initMenu(data,userInfo){
 
   //菜单数据填充
 
   $("#menuTmpl").tmpl(data).appendTo(".menu ul");
 
+  $("#miniMenuTmpl").tmpl(data).appendTo(".menu-mini ul");
 
   //用户数据填充
 
   $("#userName").text(userInfo.linkman);
 
   //菜单收起展开
 
@@ -53,8 +54,23 @@ function initMenu(data,userInfo){
 
       $(this).removeClass("list-1-show")
 
     }
 
     $(this).find("ul").slideToggle();
 
-    
   });
 
+//收起菜单
 
+  $(".slide-hide").click(function(){
 
+    $(".menu").animate({"width":"45px"},function(){
 
+      $(this).hide();
 
+      $(".menu-mini").show();
 
+    });
 
+    $(".main").animate({"margin-left":"45px"});
 
+  });
 
+  //展开菜单
 
+  $(".slide-show").click(function(){
 
+    $(".menu-mini").hide();
 
+    $(".menu").show().animate({"width":"205px"},function(){
 
+    });
 
+    $(".main").animate({"margin-left":"205px"});
 
+  });
 
+
 
   $(".list-1 li").on("click",function(e){
 
     e.stopPropagation();
 
   });

+ 16 - 0
src/js/qcScore.js
Ver Ficheiro 

@@ -23,6 +23,7 @@ function initMenu(data){
 
   const menu=[{id:0,name:"缺陷总览",parentId: -1,sonMode: []},...(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');
 
@@ -32,6 +33,21 @@ function initMenu(data){
 
   $(".list-1 li").on("click",function(e){
 
     e.stopPropagation();
 
   });
 
+//收起菜单
 
+  $(".slide-hide").click(function(){
 
+    $(".sub-menu").animate({"width":"45px"},function(){
 
+      $(this).hide();
 
+      $(".menu-mini").show();
 
+    });
 
+    $(".tab-container").animate({"margin-left":"45px"});
 
+  });
 
+  //展开菜单
 
+  $(".slide-show").click(function(){
 
+    $(".menu-mini").hide();
 
+    $(".sub-menu").show().animate({"width":"205px"},function(){
 
+    });
 
+    $(".tab-container").animate({"margin-left":"205px"});
 
+  });
 
   //右侧内容切换
 
   $(".page").on("click",function(){
 
     if($(this).attr("code")==="缺陷总览"){