Commit 5e735e0a authored by wangjiangze's avatar wangjiangze

菜单样式支持缩放

parent 9370f01e
...@@ -12,29 +12,29 @@ class IndexAction extends CommonAction { ...@@ -12,29 +12,29 @@ class IndexAction extends CommonAction {
if ($a['pid'] == 1){ if ($a['pid'] == 1){
switch($a['title']) switch($a['title'])
{ {
case '系统': case '酒店管理':
$cla = 'fa-cog'; $cla = 'fa-institution';
break; break;
case '网络': case '合作方管理':
$cla = 'fa-sitemap'; $cla = 'fa-handshake-o';
break; break;
case '设备': case '媒资注入':
$cla = 'fa-desktop'; $cla = 'fa-tv';
break; break;
case '业务': case '内容管理':
$cla = 'fa-suitcase'; $cla = 'fa-film';
break; break;
case '调度': case '播控管理':
$cla = 'fa-random'; $cla = 'fa-toggle-on';
break; break;
case '运维': case '监控告警':
$cla = 'fa-tasks'; $cla = 'fa-warning';
break; break;
case '配置': case '日志管理':
$cla = 'fa-gears'; $cla = 'fa-volume-up';
break; break;
case '监控': case '系统配置':
$cla = 'fa-video-camera'; $cla = 'fa-gears';
break; break;
default: default:
$cla = 'fa-cog'; $cla = 'fa-cog';
......
...@@ -57,7 +57,7 @@ body{padding:20px} ...@@ -57,7 +57,7 @@ body{padding:20px}
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<label class="control-label col-sm-5" style="text-align:left" for="multiselect"><font color="red">*</font> 已选择酒店</label> <label class="control-label col-sm-6" style="text-align:left" for="multiselect"><font color="red">*</font> 已选择酒店</label>
<select id="multiselect_to" class="form-control" size="8" multiple="multiple" name="hotel_lists[]" style="height:160px"></select> <select id="multiselect_to" class="form-control" size="8" multiple="multiple" name="hotel_lists[]" style="height:160px"></select>
</div> </div>
</div> </div>
...@@ -97,7 +97,7 @@ body{padding:20px} ...@@ -97,7 +97,7 @@ body{padding:20px}
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<label class="control-label col-sm-5" style="text-align:left" for="multiselectMedia"><font color="red">*</font> 已选择媒资</label> <label class="control-label col-sm-6" style="text-align:left" for="multiselectMedia"><font color="red">*</font> 已选择媒资</label>
<select id="multiselectMedia_to" class="form-control" size="8" multiple="multiple" name="media_lists[]" style="height:160px"></select> <select id="multiselectMedia_to" class="form-control" size="8" multiple="multiple" name="media_lists[]" style="height:160px"></select>
</div> </div>
</div> </div>
......
...@@ -57,7 +57,7 @@ body{padding:20px} ...@@ -57,7 +57,7 @@ body{padding:20px}
<div class="form-group"> <div class="form-group">
<label for="name" class="col-sm-2 control-label"></label> <label for="name" class="col-sm-2 control-label"></label>
<div class="col-sm-4"> <div class="col-sm-4">
<label class="control-label col-sm-3" for="multiselectMedia">未选择</label> <label class="control-label col-sm-5" style="text-align:left" for="multiselectMedia">未选择</label>
<select id="multiselectMedia" class="form-control" size="8" multiple="multiple" style="height:160px"> <select id="multiselectMedia" class="form-control" size="8" multiple="multiple" style="height:160px">
</select> </select>
</div> </div>
...@@ -72,7 +72,7 @@ body{padding:20px} ...@@ -72,7 +72,7 @@ body{padding:20px}
</div> </div>
<div class="col-sm-4"> <div class="col-sm-4">
<label class="control-label col-sm-4" for="multiselectMedia"><font color="red">*</font> 已选择媒资</label> <label class="control-label col-sm-6" style="text-align:left" for="multiselectMedia"><font color="red">*</font> 已选择媒资</label>
<select id="multiselectMedia_to" class="form-control" size="8" multiple="multiple" name="media_lists[]" style="height:160px"></select> <select id="multiselectMedia_to" class="form-control" size="8" multiple="multiple" name="media_lists[]" style="height:160px"></select>
</div> </div>
</div> </div>
......
...@@ -102,7 +102,7 @@ ...@@ -102,7 +102,7 @@
</script> </script>
<style type="text/css"> <style type="text/css">
.fa-cog,.fa-sitemap,.fa-desktop,.fa-suitcase,.fa-random,.fa-tasks,.fa-video-camera,.fa-gears{ vertical-align: middle; padding-bottom: 1px; margin-right: 10px;font-size:16px; color:#e3e3e3} .fa-cog,.fa-institution,.fa-handshake-o,.fa-tv,.fa-film,.fa-toggle-on,.fa-warning,.fa-info,.fa-volume-up,.fa-sitemap,.fa-desktop,.fa-suitcase,.fa-random,.fa-tasks,.fa-video-camera,.fa-gears{ vertical-align: middle; padding-bottom: 1px; margin-right: 10px;font-size:16px; color:#e3e3e3}
.system,.net,.dis,.equ,.bus,.dev,.monitor,.fa-home{ color:#6a6f73; margin: 0 5px;} .system,.net,.dis,.equ,.bus,.dev,.monitor,.fa-home{ color:#6a6f73; margin: 0 5px;}
.fa-home{ font-size: 17px;} .fa-home{ font-size: 17px;}
.fa-tablet{ vertical-align: middle; padding-bottom: 1px; margin-right: 10px;color:#adadad} .fa-tablet{ vertical-align: middle; padding-bottom: 1px; margin-right: 10px;color:#adadad}
...@@ -138,23 +138,24 @@ ...@@ -138,23 +138,24 @@
</div> </div>
</div> </div>
</div> </div>
<div class="nav"> <div class="layui-side layui-bg-black" style="position: fixed; top: 65px; bottom: 0; left: 0; overflow-x: hidden; z-index: 999;">
<ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="index"> <div class="layui-side-scroll">
<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> --> <div title="菜单缩放" class="kit-side-fold" style="width:200px; text-align: center; color: #c2c2c2; background: #4e555b; padding-top: 5px; font-size: 16px; padding-bottom: 5px;"><i class="fa fa-navicon" aria-hidden="true"></i></div>
<volist name="menus" id="vo"> <ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="index">
<li class="layui-nav-item "> <!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
<a href="javascript:;"><span class="fa {$vo.class}"></span>{$vo.title}</a> <volist name="menus" id="vo">
<li class="layui-nav-item " title="{$vo.title}">
<dl class="layui-nav-child"> <a href="javascript:;"><i class="fa {$vo.class}"></i><span>{$vo.title}</span></a>
<volist name="vo['children']" id="sub"> <dl class="layui-nav-child">
<dd><a onclick="openMenu('<span class=manage-dispatching-1></span>{$sub.title}','{$sub.url}')" href="javascript:;"><span></span>{$sub.title}</a></dd> <volist name="vo['children']" id="sub">
</volist> <dd><a onclick="openMenu('<span class=manage-dispatching-1></span>{$sub.title}','{$sub.url}')" href="javascript:;" title="{$sub.title}"><i class="fa fa-caret-right"></i><span>{$sub.title}</span></a></dd>
</volist>
</dl> </dl>
</li> </li>
</volist> </volist>
</ul> </ul>
</div> </div>
</div>
<div class="layui-tab layui-tab-brief " lay-allowClose="true" lay-filter="demo" style="margin: 65px 0 0 200px"> <div class="layui-tab layui-tab-brief " lay-allowClose="true" lay-filter="demo" style="margin: 65px 0 0 200px">
<ul id="tab" class="layui-tab-title" style="min-width: 1000px"> <ul id="tab" class="layui-tab-title" style="min-width: 1000px">
<li lay-id="首页" class="layui-this"><span class="home"></span>首页<a style='display: inherit; margin-left: 4px;margin-right: -4px;color: #757070;font-size: 13px;' href='javascript:;' onclick='location.reload()'><i class='fa fa-repeat'></i></a></li> <li lay-id="首页" class="layui-this"><span class="home"></span>首页<a style='display: inherit; margin-left: 4px;margin-right: -4px;color: #757070;font-size: 13px;' href='javascript:;' onclick='location.reload()'><i class='fa fa-repeat'></i></a></li>
...@@ -392,6 +393,55 @@ ...@@ -392,6 +393,55 @@
//… //…
}); });
var isShow = true; //定义一个标志位
$('.kit-side-fold').click(function(){
//选择出所有的span,并判断是不是hidden
$('.layui-nav-item span').each(function(){
if($(this).is(':hidden')){
$(this).show();
}else{
$(this).hide();
}
});
//判断isshow的状态
if(isShow){
// $('.layui-side.layui-bg-black').width(60); //设置宽度
$(".layui-side.layui-bg-black").animate({'width':'60px'},"fast");
$('.kit-side-fold i').css('margin-right', '70%'); //修改图标的位置
//将footer和body的宽度修改
$('.layui-body').css('left', 60+'px');
$('.layui-footer').css('left', 60+'px');
$('.layui-nav-item i').css('margin-top',15+'px');
// $('.layui-tab.layui-tab-brief').css("margin-left",60+'px');
$(".layui-tab.layui-tab-brief").animate({'margin-left':'60px'},"fast");
//将二级导航栏隐藏
$('dd i').each(function(){
$(this).hide();
});
$("dd span").show();
$("dd a").animate({'padding':'0px'},"fast");
//修改标志位
isShow =false;
}else{
// $('.layui-side.layui-bg-black').width(200);
$(".layui-side.layui-bg-black").animate({'width':'200px'},"fast");
$('.kit-side-fold i').css('margin-right', '10%');
$('.layui-body').css('left', 200+'px');
$('.layui-footer').css('left', 200+'px');
$('.layui-nav-item i').css('margin-top',0+'px');
// $('.layui-tab.layui-tab-brief').css("margin-left",200+'px');
$(".layui-tab.layui-tab-brief").animate({'margin-left':'200px'},"fast");
$('dd i').each(function(){
$(this).show();
});
$("dd span").show();
$("dd a").animate({'padding':'0 20px'},"fast");
isShow =true;
}
});
$("ul .layui-nav-item a").click(function(){
if(isShow==false){
$('.kit-side-fold').trigger("click");
}
});
</script> </script>
\ No newline at end of file
...@@ -56,9 +56,9 @@ a img{ border:0;} ...@@ -56,9 +56,9 @@ a img{ border:0;}
.layui-nav-tree .layui-nav-item a .manage-dispatching{ background-position: 0 -63px;} .layui-nav-tree .layui-nav-item a .manage-dispatching{ background-position: 0 -63px;}
.layui-nav-tree .layui-nav-item a .manage-nameList{background-position: 0 -80px;} .layui-nav-tree .layui-nav-item a .manage-nameList{background-position: 0 -80px;}
.layui-nav-itemed .layui-nav-child a span{background: url(../images/icon-group.png) no-repeat -24px -126px;display: inline-block; width: 6px; height: 9px; vertical-align: middle; margin:0 10px;} .layui-nav-itemed .layui-nav-child a i{/*background: url(../images/icon-group.png) no-repeat -24px -126px;*/display: inline-block; width: 6px; height: 9px; /*vertical-align: middle;*/ margin:0 10px;}
.layui-nav-tree .layui-nav-child dd.layui-this a span,.layui-nav-tree .layui-this a span{background: url(../images/icon-group.png) no-repeat -24px -113px;} .layui-nav-tree .layui-nav-child dd.layui-this a span,.layui-nav-tree .layui-this a span{/*background: url(../images/icon-group.png) no-repeat -24px -113px;*/}
.layui-tab-title{ min-width: 1200px;} .layui-tab-title{ min-width: 1200px;}
.hyperchanne{padding:0px 0px 5px 0; min-width: 800px;} .hyperchanne{padding:0px 0px 5px 0; min-width: 800px;}
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment