侧栏测试no.1 up

app/public/css/main.css

@@ -87,7 +87,7 @@ font-size: .875rem;
 }
 .custom-control-warning-input:checked ~ .custom-control-warning-label::before{
   border-color:#da9500 ;
-  background-color:#da9500 
+  background-color:#da9500
 }
 .custom-control-warning-label{
   color:#da9500;
@@ -195,23 +195,23 @@ input.nospin[type="number"]{-moz-appearance:textfield;}
 /*滚动条*/
 /* 滚动条 */
 /*水平滚动条的样式*/
-/*::-webkit-scrollbar-thumb:horizontal { 
+/*::-webkit-scrollbar-thumb:horizontal {
 	width: 5px;
 	background-color: #e9ecef;
 	-webkit-border-radius: 0;
 }*/
 /*滚动条的背景颜色,滚动条的圆角宽度*/
 /*::-webkit-scrollbar-track-piece {
-	background-color: #efefef; 
-	-webkit-border-radius: 0; 
+	background-color: #efefef;
+	-webkit-border-radius: 0;
 }*/
 /*滚动条的宽度,滚动条的高度*/
 /*::-webkit-scrollbar {
-	width: 14px; 
-	height: 14px; 
+	width: 14px;
+	height: 14px;
 }*/
 /*垂直滚动条的样式*/
-/*::-webkit-scrollbar-thumb:vertical { 
+/*::-webkit-scrollbar-thumb:vertical {
 	height: 50px;
 	background-color: #e9ecef;
 	-webkit-border-radius: 0;
@@ -220,7 +220,7 @@ input.nospin[type="number"]{-moz-appearance:textfield;}
 	border: 1px solid #ced4da;
 }*/
 /*滚动条的hover样式*/
-/*::-webkit-scrollbar-thumb:hover { 
+/*::-webkit-scrollbar-thumb:hover {
 	height: 50px;
 	background-color: #ced4da;
 	-webkit-border-radius: 0;
@@ -538,7 +538,7 @@ input.nospin[type="number"]{-moz-appearance:textfield;}
     box-sizing: border-box;
 }
 .panel-sidebar .scrollbar-auto {
-    height: calc(100vh - 100px);
+    height: calc(100vh - 50px);
     width: 100%;
     overflow-y: auto;
     position: static;
@@ -874,7 +874,7 @@ input.nospin[type="number"]{-moz-appearance:textfield;}
   font-size: 14px
 }
 .bd-toc {
-  
+
     position: sticky;
     top:3rem;
     height: calc(100vh - 10rem);
@@ -1032,7 +1032,7 @@ body{
   line-height: 30px;
 }
 .panel-title > .title-main .btn.pull-right {
-    margin: 5px 0 0 0 
+    margin: 5px 0 0 0
 }
 .panel-content{
   padding-top:35px;
@@ -1251,7 +1251,7 @@ a.maintain-icon .fa{
     }
 }
 
-a.maintain-icon:hover .fa{ 
+a.maintain-icon:hover .fa{
     animation-iteration-count:0
 }
 /*审批列表*/
@@ -1374,10 +1374,10 @@ overflow-y: auto;
   position: relative;
 }
 .circle{
-  width: 62px; 
+  width: 62px;
   height: 62px;
   border-radius: 50%;
-  background: none; 
+  background: none;
   border: 4px solid #D7B014;
 }
 .circle-num{
@@ -1918,8 +1918,8 @@ overflow-y: auto;
   font-size: 36px;
 }
 .list-text-vertical{
-  overflow:hidden; 
-  text-overflow:ellipsis; 
+  overflow:hidden;
+  text-overflow:ellipsis;
   white-space:nowrap;
 }
 .about-text i{
@@ -1943,12 +1943,12 @@ overflow-y: auto;
 }
 /*@media (min-width: 768px){
   .weixin-erweima img{
-    width:90%; 
+    width:90%;
     height:auto;
   }
 }*/
 .weixin-erweima img{
-  width:75%; 
+  width:75%;
   height:auto;
 }
 .weixin-erweima span{
@@ -2017,4 +2017,4 @@ animation:shake 1s .2s ease both;}
 }
 .card-gk-active .card-gk-bottom{
   display: inline-block;
-}
+}

app/public/js/sub_menu.js

@@ -47,6 +47,7 @@
             }
         });
         miniMenu.mouseenter(function () {
+            miniMenu.find('.side-switch i').addClass('fa-indent text-primary').removeClass('fa-bars');
             $(setting.miniMenuList).show();
 
             miniHint.popover('hide');
@@ -55,7 +56,38 @@
             }
         });
         miniMenu.mouseleave(function () {
+            miniMenu.find('.side-switch i').addClass('fa-bars').removeClass('fa-indent text-primary');
             $(setting.miniMenuList).hide();
         });
+        let timeMake = false;
+        $(setting.menu).find('.side-show').mouseenter(function () {
+            $(setting.menu).find('.side-fold').show();
+            timeMake = false;
+        });
+
+        $(setting.menu).find('.side-show').mouseleave(function () {
+            timeMake = true;
+            setTimeout(function () {
+                if (timeMake) {
+                    $(setting.menu).find('.side-fold').hide();
+                }
+            }, 500);
+
+        });
+
+        $(setting.menu).find('.side-fold').mouseenter(function () {
+            timeMake = false;
+            $(this).css('width', '15px');
+        });
+
+        $(setting.menu).find('.side-fold').mouseleave(function () {
+            timeMake = true;
+            setTimeout(function () {
+                if (timeMake) {
+                    $(setting.menu).find('.side-fold').hide();
+                }
+            }, 500);
+            $(this).css('width', '6px');
+        })
     }
-})(jQuery);
+})(jQuery);

app/view/tender/tender_sub_menu.ejs

@@ -82,6 +82,9 @@
             </ul>
         </div>
         <% } %>
-        <div class="side-fold"><a href="javascript: void(0)" data-toggle="tooltip" data-placement="top" data-original-title="折叠侧栏" id="to-mini-menu"><i class="fa fa-upload fa-rotate-270"></i></a></div>
+    </div>
+    <div class="side-show" style="position: absolute;z-index:8;right:0;top: 0;width: 15px;height: calc(100vh);"></div>
+    <div class="side-fold" style="display:none;z-index:9;border-radius:2px;right:0;bottom:50%;width:6px;height:60px;line-height:60px;text-align:center;cursor:pointer;background-color: #2E6BE5;color: #fff" data-toggle="tooltip" data-placement="top" data-original-title="折叠侧栏" id="to-mini-menu">
+        <i class="fa fa-angle-left" style="font-size: 20px;vertical-align: text-bottom"></i>
     </div>
 </div>

app/view/tender/tender_sub_mini_menu.ejs

@@ -1,8 +1,9 @@
 <!--折起的菜单-->
 <div class="min-side" id="sub-mini-menu" style="display: none;">
-    <div id="sub-mini-hint" class="side-switch" data-container="body" data-toggle="popover" data-placement="bottom" data-content="这里打开收起的菜单栏"></div>
-    <div class="side-switch">
-        <i class="fa fa-bars"></i>
+    <!--<div id="sub-mini-hint" class="side-switch" data-container="body" data-toggle="popover" data-placement="bottom" data-content="这里打开收起的菜单栏"></div>-->
+    <div class="side-switch" data-toggle="tooltip" data-placement="left" data-original-title="这里打开收起的菜单栏">
+        <i class="fa fa-bars mt-2"></i>
+        <!--<i class="fa fa-indent mt-2 text-primary"></i>-->
     </div>
     <div class="side-menu" id="mini-menu-list" style="display: none">
         <div class="nav-box">