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;}
......
File added
No preview for this file type
File deleted
File deleted
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