菜单、布局样式修改

src/css/index.less

@@ -4,15 +4,16 @@
   height: 100%;
 }
 .header{
-  position: fixed;
+  /*position: fixed;*/
   width: 100%;
   height:@headerHt;
   line-height: @headerHt;
-  top:0;
+  font-size: 16px;
+  border-bottom: 1px #E2E5EF solid;
+  /*top:0;
   background:linear-gradient(123deg,rgba(90,142,238,1) 0%,rgba(126,171,255,1) 100%);;
   text-indent: 20px;
-  color: #fff;
-  font-size: 16px;
+  color: #fff;*/
   .login{
     margin-right: 20px;
     height: @headerHt;
@@ -27,7 +28,7 @@
       top:22px;
       width: 10px;
       height: 6px;
-      background: url("../images/icon_wdown.png") no-repeat;
+      background: url("../images/icon_down.png") no-repeat;
     }
     //设置
     .userAction {
@@ -60,8 +61,8 @@
     line-height: 26px;
     margin: 12px 0 0 0;
     background: url("../images/head.png") no-repeat;
-    padding:0 22px 0 15px;
-    color: #fff;
+    padding:0 22px 0 35px;
+    /*color: #fff;*/
     text-decoration: none;
   }
   img{
@@ -70,28 +71,61 @@
   }
   .title span{
     display: inline-block;
-    border-left: 1px #fff solid;
     height: 20px;
     line-height: 20px;
-    color: #fff;
+    color: #333;
+    font-weight: bold;
+    font-size: 15px;
+    text-indent: 20px;
   }
 }
 .main-body{
   height: 100%;
-  margin-top:@headerHt;
+  /*margin-top:@headerHt;*/
 }
 .menu{
   width: @menuWt;
   height: 100%;
+  background: #203463;
   overflow-y: auto;
   padding-top: 15px;
+  position: relative;
+  .logo{
+    margin-bottom: 44px;
+    text-indent: 22px;
+  }
+  &>a{
+    position: absolute;
+    top: 50%;
+    right: 0;
+    z-index: 1;
+  }
+  &>ul>li{
+    padding-left: 28px;
+    background: url("../images/module.png") 16px 12px no-repeat;
+  }
+  .YH-KZT{
+    background: url("../images/home.png") 16px 12px no-repeat;
+  }
+  .YH-ZKK{
+    background: url("../images/module.png") 16px 12px no-repeat;
+  }
+  .YH-QBYH-JCGN{
+    background: url("../images/item.png") 16px 12px no-repeat;
+  }
+  .YH-JCSJWH{
+    background: url("../images/data.png") 16px 10px no-repeat;
+  }
+  .YH-BLZK{
+    background: url("../images/un.png") 16px 11px no-repeat;
+  }
   .slide-btn{
     display: inline-block;
   }
   .active{
-    color: @activeColor;
-    background: @activeBg;
-    border-right: 3px @activeColor solid;
+      color: @activeColor;
+    /*background: @activeBg;
+      border-right: 3px @activeColor solid;*/
   }
   .page:hover{
       color: @activeColor;
@@ -108,6 +142,9 @@
       height: 6px;
       background: url("../images/icon_down.png") no-repeat;
     }
+    p{
+      color: #fff;
+    }
     p:hover {
       color: @activeColor;
     }
@@ -118,19 +155,40 @@
     ul{
       display: none;
       li.page{
-        text-indent: 30px;
+        text-indent: 24px;
+        color: #fff;
+        &.active{
+          color: @activeColor;
+        }
       }
     }
   }
   .list-1-show{
+    background-color: @activeBg;
     &:after{
       background: url("../images/icon_up.png") no-repeat;
     }
+    &.YH-KZT{
+      background: url("../images/home_a.png") @activeBg 16px 12px no-repeat;
+    }
+    &.YH-ZKK{
+      background: url("../images/module_a.png") @activeBg 16px 12px no-repeat;
+    }
+    &.YH-QBYH-JCGN{
+      background: url("../images/item_a.png") @activeBg 16px 12px no-repeat;
+    }
+    &.YH-JCSJWH{
+      background: url("../images/data_a.png") @activeBg 16px 10px no-repeat;
+    }
+    &.YH-BLZK{
+      background: url("../images/un_a.png") @activeBg 16px 11px no-repeat;
+    }
   }
   li{
     line-height: @menuLiHt;
     text-indent: 15px;
     cursor: pointer;
+    color: #fff;
   }
   .copy-right{
     position: fixed;
@@ -146,11 +204,21 @@
 .menu-mini{
   display: none;
   width: 60px;
+  height: 100%;
+  background: #203463;
+  position: relative;
+  &>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;
+    margin-bottom: 10px;
+    background: url("../images/module.png") center no-repeat;
     & ul{
       display: none;
       left: 60px;
@@ -158,10 +226,19 @@
       width: 140px;
     }
     &.YH-KZT{
-      background: url("../images/icon3.png") center no-repeat;
+      background: url("../images/home.png") 16px 12px no-repeat;
+    }
+    &.YH-ZKK{
+      background: url("../images/module.png") 16px 12px no-repeat;
     }
     &.YH-QBYH-JCGN{
-      background: url("../images/icon2.png") center no-repeat;
+      background: url("../images/item.png") 16px 12px no-repeat;
+    }
+    &.YH-JCSJWH{
+      background: url("../images/data.png") 16px 10px no-repeat;
+    }
+    &.YH-BLZK{
+      background: url("../images/un.png") 16px 11px no-repeat;
     }
     &.active{
       background-color: #EEF4FF;
@@ -172,7 +249,7 @@
 .main{
   margin-left:@menuWt;
   height: 100%;
-  border: 10px solid #f5f5f5;
+  /*border: 10px solid #f5f5f5;*/
   iframe {
     width: 100%;
     height: 100%;

src/css/itemManager.less

@@ -1,3 +1,4 @@
+@import "./reset.less";
 .managerContainer{
     width: 100%;
     height: 100%;
@@ -11,17 +12,7 @@
         list-style:none;
     }
     h2{
-        width: 100%;
-        box-sizing: border-box;
-        background-color: #fff;
-        z-index: 20;
-        height: 44px;
-        line-height: 44px;
-        padding: 0 0 0 15px;
-        border-bottom: 1px solid #E2E5EF;
-        font-size: 16px;
-        font-weight: bold;
-        letter-spacing: 1px;
+        .h2;
     }
     .main-body{
         margin: 20px 40px;

src/css/moduleManager.less

@@ -1,18 +1,9 @@
+@import "./reset.less";
 .container{
     width: 100%;
 }
 h2{
-    width: 100%;
-    box-sizing: border-box;
-    background-color: #fff;
-    z-index: 20;
-    height: 44px;
-    line-height: 44px;
-    padding: 0 0 0 15px;
-    border-bottom: 1px solid #E2E5EF;
-    font-size: 16px;
-    font-weight: bold;
-    letter-spacing: 1px;
+    .h2;
 }
 .main-body{
     margin: 20px 40px;

src/css/qcList.less

@@ -1,3 +1,4 @@
+@import "./reset.less";
 .container{
     width: 100%;
     height: 100%;
@@ -7,17 +8,7 @@ ul,li{
     list-style: none;
 }
 h2{
-    width: 100%;
-    box-sizing: border-box;
-    background-color: #fff;
-    z-index: 20;
-    height: 44px;
-    line-height: 44px;
-    padding: 0 0 0 15px;
-    border-bottom: 1px solid #E2E5EF;
-    font-size: 16px;
-    font-weight: bold   ;
-    letter-spacing: 1px;
+    .h2
 }
 .main-body{
     margin: 20px 0;

src/css/reset.less

@@ -94,13 +94,27 @@ textarea {
 @headerHt:50px;   /*logo栏高度*/
 @menuLiHt:40px;   /*菜单项高度*/
 @menuWt:205px;   /*菜单宽度*/
-@activeColor:#5A8EEE;   /*菜单项选中颜色*/
-@activeBg:#EEF4FF;   /*菜单项选中背景*/
+@activeColor:#00A1FF;   /*菜单项选中颜色*/
+@activeBg:#142753;   /*菜单项选中背景*/
 @borderColor:#E2E5EF; /**边框颜色**/
 @frameBdColor:#F0F0F0;/***框架边框颜色**/
 @warnColor:#FF4D4F;  /**重点红色**/
 @thBgColor:#EFF0F9; /**标题背景色**/
 @tableBorderColor:#E2E5EF;  /**表格边框**/
+.h2{
+  width: 100%;
+  /*box-sizing: border-box;*/
+  z-index: 20;
+  color: #51649C;
+  height: 44px;
+  line-height: 44px;
+  /*padding: 0 0 0 15px;*/
+  border-bottom: 10px solid #F5F6FA;
+  font-size: 16px;
+  text-indent: 20px;
+  font-weight: bold;
+  letter-spacing: 1px;
+}
 
 
 /****弹窗样式*****/

src/html/index.html

@@ -8,9 +8,9 @@
 </head>
 <script type="text/html" id="menuTmpl">
     {{if subMenuList.length}}
-        <li class="list-1"><p>${name}</p>
+        <li class="list-1 ${code}"><p>${name}</p>
     {{else}}
-        <li class="page" code="${code}">${name}
+        <li class="page ${code}" code="${code}">${name}
     {{/if}}
         <ul>
             {{each subMenuList}}
@@ -34,30 +34,37 @@
 </script>
 <body>
   <div class="container">
-      <div class="header clearfix">
-          <div class="title fl">
-              <img src="../images/logo.png" alt="logo" />
-              <span>AI病案质控平台</span>
-          </div>
-          <div class="login fr">
-              <a class="setting" id="userName" href="javascript:void(0);">***</a>
-              <ul class="userAction">
-                  <li id="changeWord">修改密码</li>
-                  <li><a class="login-out" href="./login.html">退出</a></li>
-              </ul>
-          </div>
-      </div>
       <div class="main-body clearfix">
           <div class="menu fl">
-              <a href="javescript:void(0);" class="slide-hide">《</a>
+              <div class="logo">
+                  <img src="../images/lantone.png" alt="">
+              </div>
+              <a href="javescript:void(0);" class="slide-hide">
+                  <img src="../images/down.png" alt="">
+              </a>
               <ul></ul>
               <div class="copy-right">©杭州朗通信息技术有限公司</div>
           </div>
           <div class="menu-mini fl">
-              <a href="javescript:void(0);" class="slide-show">》</a>
+              <a href="javescript:void(0);" class="slide-show">
+                  <img src="../images/up.png" alt="">
+              </a>
               <ul></ul>
           </div>
           <div class="main" id="mainBox">
+              <div class="header clearfix">
+                  <div class="title fl">
+                      <!--<img src="../images/logo.png" alt="logo" />-->
+                      <span>AI病案质控平台</span>
+                  </div>
+                  <div class="login fr">
+                      <a class="setting" id="userName" href="javascript:void(0);">***</a>
+                      <ul class="userAction">
+                          <li id="changeWord">修改密码</li>
+                          <li><a class="login-out" href="./login.html">退出</a></li>
+                      </ul>
+                  </div>
+              </div>
               <iframe src="./console.html" frameborder="0" id="contentIframe"></iframe>
           </div>
       </div>

src/html/qcScore.html

@@ -632,12 +632,16 @@
     <p id="loading">加载中，请稍候 ...</p>
     <div class="main-part clearfix">
         <div class="sub-menu content-ht">
-            <a href="javescript:void(0);" class="slide-hide">《</a>
+            <a href="javescript:void(0);" class="slide-show">
+                <img src="../images/up.png" alt="">
+            </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>
+            <a href="javescript:void(0);" class="slide-show">
+                <img src="../images/down.png" alt="">
+            </a>
             <ul></ul>
         </div>
         <div class="tab-container clearfix">