Browse Source

菜单样式,bug修改

zhouna 5 năm trước cách đây
mục cha
commit
9f74a8a923
6 tập tin đã thay đổi với 40 bổ sung41 xóa
  1. 25 30
      src/css/index.less
  2. 5 2
      src/css/qcScore.less
  3. 1 1
      src/css/reset.less
  4. 1 1
      src/html/index.html
  5. 1 1
      src/html/qcScore.html
  6. 7 6
      src/js/index.js

+ 25 - 30
src/css/index.less

@@ -99,6 +99,8 @@
     width: @menuWt;
     height: 100%;
     background: @themeColor;
+    border-right: 1px @themeBorderClr solid;
+    box-sizing: border-box;
     overflow-y: auto;
     padding-top: 15px;
     position: relative;
@@ -113,58 +115,44 @@
       z-index: 1;
     }
     &>ul>li{
-      padding-left: 28px;
+      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;
       &.active{
-        background: url("../images/home_a.png") 16px 10px no-repeat;
+        background: url("../images/home_a.png") @activeBg 16px 10px no-repeat;
       }
     }
     .YH-ZKK,.YH-KSZR{
       background: url("../images/data.png") 16px 10px no-repeat;
-      &.active,&.list-1-show{
-        p{
-          color: @activeColor;
-        }
-        background: url("../images/data_a.png") 16px 10px no-repeat;
+      &.active{
+        background: url("../images/data_a.png") @activeBg 16px 10px no-repeat;
       }
     }
     .YH-JCSJWH{
       background: url("../images/item.png") 16px 13px no-repeat;
-      &.active,&.list-1-show{
-        p{
-          color: @activeColor;
-        }
-        background: url("../images/item_a.png") 16px 13px no-repeat;
+      &.active{
+        background: url("../images/item_a.png") @activeBg 16px 13px no-repeat;
       }
     }
     .YH-BLZK{
       background: url("../images/ba.png") 16px 10px no-repeat;
-      &.active,&.list-1-show{
-        p{
-          color: @activeColor;
-        }
-        background: url("../images/ba_a.png") 16px 10px no-repeat;
+      &.active{
+        background: url("../images/ba_a.png") @activeBg 16px 10px no-repeat;
       }
     }
     .YH-QXGL{
       background: url("../images/qxgl.png") 16px 11px no-repeat;
-      &.active,&.list-1-show{
-        p{
-          color: @activeColor;
-        }
-        background: url("../images/qxgl_a.png") 16px 11px no-repeat;
+      &.active{
+        background: url("../images/qxgl_a.png") @activeBg 16px 11px no-repeat;
       }
     }
     .YH-YCSJJK{
       background: url("../images/un.png") 16px 11px no-repeat;
       &.active,&.list-1-show{
-        p{
-          color: @activeColor;
-        }
-        background: url("../images/un_a.png") 16px 11px no-repeat;
+        background: url("../images/un_a.png") @activeBg 16px 11px no-repeat;
       }
     }
     .slide-btn{
@@ -192,6 +180,7 @@
       }
       p{
         color: #fff;
+        opacity: .9;
       }
       p:hover {
         color: @activeColor;
@@ -203,10 +192,12 @@
       ul{
         display: none;
         li.page{
-          text-indent: 24px;
+          text-indent: 52px;
           color: #fff;
+          opacity: .6;
           &.active{
             color: @activeColor;
+            opacity: 1;
           }
         }
       }
@@ -214,7 +205,8 @@
     .list-1-show{
       background-color: @activeBg;
       &:after{
-        background: url("../images/icon_up.png") no-repeat;
+        transform: rotate(180deg);
+        -webkit-transform: rotate(180deg);
       }
     }
     li{
@@ -228,12 +220,15 @@
       bottom: 0px;
       width: @menuWt;
       text-align: center;
-      font-size:12px;
-      color: #F0F0F0;
       height: 50px;
       line-height: 50px;
       background: @themeColor;
       border-top: 1px @themeBorderClr solid;
+      p{
+        font-size:12px;
+        opacity: .3;
+        color: #fff;
+      }
     }
   }
   .menu-mini{

+ 5 - 2
src/css/qcScore.less

@@ -96,11 +96,14 @@
     bottom: 0px;
     width: @menuWt;
     text-align: center;
-    font-size:12px;
-    color: #F0F0F0;
     background: @themeColor;
     padding: 10px 0 20px;
     border-top: 1px @themeBorderClr solid;
+    p{
+      font-size:12px;
+      color: #fff;
+      opacity: .3;
+    }
   }
 }
 .menu-mini{

+ 1 - 1
src/css/reset.less

@@ -96,7 +96,7 @@ textarea {
 @menuWt:205px;   /*菜单宽度*/
 @themeColor:#203463;    //主题背景色
 @themeFontClr:#fff;   //主题字体色
-@themeBorderClr:#4A5D8E;    //主题边框色
+@themeBorderClr:rgba(74, 93, 142, 0.5);    //主题边框色
 @activeColor:#00A1FF;   /*菜单项选中颜色*/
 @activeBg:#142753;   /*菜单项选中背景*/
 @borderColor:#E2E5EF; /**边框颜色**/

+ 1 - 1
src/html/index.html

@@ -45,7 +45,7 @@
                   <img src="../images/down.png" alt="">
               </a>-->
               <ul></ul>
-              <div class="copy-right">©杭州朗通信息技术有限公司</div>
+              <div class="copy-right"><p>©杭州朗通信息技术有限公司</p></div>
           </div>
           <div class="menu-mini fl">
               <!--<a href="javescript:void(0);" class="slide-show">

+ 1 - 1
src/html/qcScore.html

@@ -637,7 +637,7 @@
                 <img src="../images/up.png" alt="">
             </a>-->
             <ul id="subMenu"></ul>
-            <div class="copy-right">©杭州朗通信息技术有限公司</div>
+            <div class="copy-right"><p>©杭州朗通信息技术有限公司</p></div>
         </div>
         <div class="menu-mini fl">
            <!-- <a href="javescript:void(0);" class="slide-show">

+ 7 - 6
src/js/index.js

@@ -52,17 +52,18 @@ function initMenu(data,userInfo){
   }
   //菜单收起展开
   $(".list-1").on("click",function(){
-    // $(".list-1 .slide-up").removeClass('slide-up');
-    // $(this).toggleClass('slide-up');
+    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");
     const ulShow =  $(this).find("ul").css("display")
     if(ulShow == "none"){
-      //$(this).removeClass("list-1-show")
       $(this).addClass("list-1-show")
-    }/*else{
-      $(this).removeClass("list-1-show")
-    }*/
+    }
     $(this).find("ul").slideToggle();
   });
 //收起菜单