展示出主题设置栏目

This commit is contained in:
panmeicheng 2018-11-28 21:53:13 +08:00
parent a47d5ac91a
commit 46b8940f0e
2 changed files with 462 additions and 71 deletions

View File

@ -1,12 +1,12 @@
/**
* 菜单处理
*/
$(function() {
$(function () {
// MetsiMenu
$('#side-menu').metisMenu();
//固定菜单栏
$(function() {
$(function () {
$('.sidebar-collapse').slimScroll({
height: '100%',
railOpacity: 0.9,
@ -15,17 +15,17 @@ $(function() {
});
// 菜单切换
$('.navbar-minimalize').click(function() {
$('.navbar-minimalize').click(function () {
$("body").toggleClass("mini-navbar");
SmoothlyMenu();
});
$('#side-menu>li').click(function() {
$('#side-menu>li').click(function () {
if ($('body').hasClass('mini-navbar')) {
NavToggle();
}
});
$('#side-menu>li li a').click(function() {
$('#side-menu>li li a').click(function () {
if ($(window).width() < 769) {
NavToggle();
}
@ -40,14 +40,83 @@ $(function() {
});
$(window).bind("load resize",
function() {
if ($(this).width() < 769) {
$('body').addClass('mini-navbar');
$('.navbar-static-side').fadeIn();
function localStorageSupport() {
return "localStorage" in window && null !== window.localStorage
}
/*主题框框相关*/
$(document).ready(function () {
function e() {
var e = $("body > #wrapper").height() - 61;
$(".sidebard-panel").css("min-height", e + "px")
}
$("#side-menu").metisMenu(), $(".right-sidebar-toggle").click(function () {
$("#right-sidebar").toggleClass("sidebar-open")
}), $(".sidebar-container").slimScroll({
height: "100%",
railOpacity: .4,
wheelStep: 10
}), $(".open-small-chat").click(function () {
$(this).children().toggleClass("fa-comments").toggleClass("fa-remove"), $(".small-chat-box").toggleClass("active")
}), $(".small-chat-box .content").slimScroll({
height: "234px",
railOpacity: .4
}), $(".check-link").click(function () {
var e = $(this).find("i"), a = $(this).next("span");
return e.toggleClass("fa-check-square").toggleClass("fa-square-o"), a.toggleClass("todo-completed"), !1
}), $(function () {
$(".sidebar-collapse").slimScroll({height: "100%", railOpacity: .9, alwaysVisible: !1})
}), $(".navbar-minimalize").click(function () {
$("body").toggleClass("mini-navbar"), SmoothlyMenu()
}), e(), $(window).bind("load resize click scroll", function () {
$("body").hasClass("body-small") || e()
}), $(window).scroll(function () {
$(window).scrollTop() > 0 && !$("body").hasClass("fixed-nav") ? $("#right-sidebar").addClass("sidebar-top") : $("#right-sidebar").removeClass("sidebar-top")
}), $(".full-height-scroll").slimScroll({height: "100%"}), $("#side-menu>li").click(function () {
$("body").hasClass("mini-navbar") && NavToggle()
}), $("#side-menu>li li a").click(function () {
$(window).width() < 769 && NavToggle()
}), $(".nav-close").click(NavToggle), /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent) && $("#content-main").css("overflow-y", "auto")
})
$(function () {
if ($("#fixednavbar").click(function () {
$("#fixednavbar").is(":checked") ? ($(".navbar-static-top").removeClass("navbar-static-top").addClass("navbar-fixed-top"), $("body").removeClass("boxed-layout"), $("body").addClass("fixed-nav"), $("#boxedlayout").prop("checked", !1), localStorageSupport && localStorage.setItem("boxedlayout", "off"), localStorageSupport && localStorage.setItem("fixednavbar", "on")) : ($(".navbar-fixed-top").removeClass("navbar-fixed-top").addClass("navbar-static-top"), $("body").removeClass("fixed-nav"), localStorageSupport && localStorage.setItem("fixednavbar", "off"))
}),$("#collapsemenu").click(function () {
$("#collapsemenu").is(":checked") ? ($("body").addClass("mini-navbar"), SmoothlyMenu(), localStorageSupport && localStorage.setItem("collapse_menu", "on")) : ($("body").removeClass("mini-navbar"), SmoothlyMenu(), localStorageSupport && localStorage.setItem("collapse_menu", "off"))
}), $("#boxedlayout").click(function () {
$("#boxedlayout").is(":checked") ? ($("body").addClass("boxed-layout"), $("#fixednavbar").prop("checked", !1), $(".navbar-fixed-top").removeClass("navbar-fixed-top").addClass("navbar-static-top"), $("body").removeClass("fixed-nav"), localStorageSupport && localStorage.setItem("fixednavbar", "off"), localStorageSupport && localStorage.setItem("boxedlayout", "on")) : ($("body").removeClass("boxed-layout"), localStorageSupport && localStorage.setItem("boxedlayout", "off"))
}), $(".s-skin-0").click(function () {
return $("body").removeClass("skin-1"), $("body").removeClass("skin-2"), $("body").removeClass("skin-3"), !1
}), $(".s-skin-1").click(function () {
return $("body").removeClass("skin-2"), $("body").removeClass("skin-3"), $("body").addClass("skin-1"), !1
}), $(".s-skin-3").click(function () {
return $("body").removeClass("skin-1"), $("body").removeClass("skin-2"), $("body").addClass("skin-3"), !1
}), localStorageSupport){
var e = localStorage.getItem("collapse_menu"), a = localStorage.getItem("fixednavbar"),
o = localStorage.getItem("boxedlayout");
"on" == e && $("#collapsemenu").prop("checked", "checked"), "on" == a && $("#fixednavbar").prop("checked", "checked"), "on" == o && $("#boxedlayout").prop("checked", "checked")
}
if (localStorageSupport) {//第一次加载 初始化 主题设置
var e = localStorage.getItem("collapse_menu"), a = localStorage.getItem("fixednavbar"),
o = localStorage.getItem("boxedlayout"), l = $("body");
"on" == e && (l.hasClass("body-small") || l.addClass("mini-navbar")),
"on" == a && ($(".navbar-static-top").removeClass("navbar-static-top").addClass("navbar-fixed-top"),
l.addClass("fixed-nav")),
"on" == o && l.addClass("boxed-layout")
}
});
$(window).bind("load resize",
function () {
if ($(this).width() < 769) {
$('body').addClass('mini-navbar');
$('.navbar-static-side').fadeIn();
}
});
function NavToggle() {
$('.navbar-minimalize').trigger('click');
}
@ -55,16 +124,16 @@ function NavToggle() {
function SmoothlyMenu() {
if (!$('body').hasClass('mini-navbar')) {
$('#side-menu').hide();
setTimeout(function() {
$('#side-menu').fadeIn(500);
},
100);
setTimeout(function () {
$('#side-menu').fadeIn(500);
},
100);
} else if ($('body').hasClass('fixed-sidebar')) {
$('#side-menu').hide();
setTimeout(function() {
$('#side-menu').fadeIn(500);
},
300);
setTimeout(function () {
$('#side-menu').fadeIn(500);
},
300);
} else {
$('#side-menu').removeAttr('style');
}
@ -73,11 +142,11 @@ function SmoothlyMenu() {
/**
* iframe处理
*/
$(function() {
$(function () {
//计算元素集合的总宽度
function calSumWidth(elements) {
var width = 0;
$(elements).each(function() {
$(elements).each(function () {
width += $(this).outerWidth(true);
});
return width;
@ -86,7 +155,7 @@ $(function() {
//滚动到指定选项卡
function scrollToTab(element) {
var marginLeftVal = calSumWidth($(element).prevAll()),
marginRightVal = calSumWidth($(element).nextAll());
marginRightVal = calSumWidth($(element).nextAll());
// 可视区域非tab宽度
var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
//可视区域tab宽度
@ -108,9 +177,9 @@ $(function() {
scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
}
$('.page-tabs-content').animate({
marginLeft: 0 - scrollVal + 'px'
},
"fast");
marginLeft: 0 - scrollVal + 'px'
},
"fast");
}
//查看左侧隐藏的选项卡
@ -141,9 +210,9 @@ $(function() {
}
}
$('.page-tabs-content').animate({
marginLeft: 0 - scrollVal + 'px'
},
"fast");
marginLeft: 0 - scrollVal + 'px'
},
"fast");
}
//查看右侧隐藏的选项卡
@ -172,15 +241,15 @@ $(function() {
scrollVal = calSumWidth($(tabElement).prevAll());
if (scrollVal > 0) {
$('.page-tabs-content').animate({
marginLeft: 0 - scrollVal + 'px'
},
"fast");
marginLeft: 0 - scrollVal + 'px'
},
"fast");
}
}
}
//通过遍历给菜单项加上data-index属性
$(".menuItem").each(function(index) {
$(".menuItem").each(function (index) {
if (!$(this).attr('data-index')) {
$(this).attr('data-index', index);
}
@ -189,19 +258,19 @@ $(function() {
function menuItem() {
// 获取标识数据
var dataUrl = $(this).attr('href'),
dataIndex = $(this).data('index'),
menuName = $.trim($(this).text()),
flag = true;
dataIndex = $(this).data('index'),
menuName = $.trim($(this).text()),
flag = true;
if (dataUrl == undefined || $.trim(dataUrl).length == 0) return false;
// 选项卡菜单已存在
$('.menuTab').each(function() {
$('.menuTab').each(function () {
if ($(this).data('id') == dataUrl) {
if (!$(this).hasClass('active')) {
$(this).addClass('active').siblings('.menuTab').removeClass('active');
scrollToTab(this);
// 显示tab对应的内容区
$('.mainContent .RuoYi_iframe').each(function() {
$('.mainContent .RuoYi_iframe').each(function () {
if ($(this).data('id') == dataUrl) {
$(this).show().siblings('.RuoYi_iframe').hide();
return false;
@ -220,13 +289,13 @@ $(function() {
// 添加选项卡对应的iframe
var str1 = '<iframe class="RuoYi_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
$('.mainContent').find('iframe.RuoYi_iframe').hide().parents('.mainContent').append(str1);
$.modal.loading("数据加载中,请稍后...");
$('.mainContent iframe:visible').load(function () {
$.modal.closeLoading();
$.modal.closeLoading();
});
// 添加选项卡
$('.menuTabs .page-tabs-content').append(str);
scrollToTab($('.menuTab.active'));
@ -250,7 +319,7 @@ $(function() {
var activeId = $(this).parents('.menuTab').next('.menuTab:eq(0)').data('id');
$(this).parents('.menuTab').next('.menuTab:eq(0)').addClass('active');
$('.mainContent .RuoYi_iframe').each(function() {
$('.mainContent .RuoYi_iframe').each(function () {
if ($(this).data('id') == activeId) {
$(this).show().siblings('.RuoYi_iframe').hide();
return false;
@ -260,16 +329,16 @@ $(function() {
var marginLeftVal = parseInt($('.page-tabs-content').css('margin-left'));
if (marginLeftVal < 0) {
$('.page-tabs-content').animate({
marginLeft: (marginLeftVal + currentWidth) + 'px'
},
"fast");
marginLeft: (marginLeftVal + currentWidth) + 'px'
},
"fast");
}
// 移除当前选项卡
$(this).parents('.menuTab').remove();
// 移除tab对应的内容区
$('.mainContent .RuoYi_iframe').each(function() {
$('.mainContent .RuoYi_iframe').each(function () {
if ($(this).data('id') == closeTabId) {
$(this).remove();
return false;
@ -281,7 +350,7 @@ $(function() {
if ($(this).parents('.menuTab').prev('.menuTab').size()) {
var activeId = $(this).parents('.menuTab').prev('.menuTab:last').data('id');
$(this).parents('.menuTab').prev('.menuTab:last').addClass('active');
$('.mainContent .RuoYi_iframe').each(function() {
$('.mainContent .RuoYi_iframe').each(function () {
if ($(this).data('id') == activeId) {
$(this).show().siblings('.RuoYi_iframe').hide();
return false;
@ -292,7 +361,7 @@ $(function() {
$(this).parents('.menuTab').remove();
// 移除tab对应的内容区
$('.mainContent .RuoYi_iframe').each(function() {
$('.mainContent .RuoYi_iframe').each(function () {
if ($(this).data('id') == closeTabId) {
$(this).remove();
return false;
@ -306,7 +375,7 @@ $(function() {
$(this).parents('.menuTab').remove();
// 移除相应tab对应的内容区
$('.mainContent .RuoYi_iframe').each(function() {
$('.mainContent .RuoYi_iframe').each(function () {
if ($(this).data('id') == closeTabId) {
$(this).remove();
return false;
@ -321,18 +390,20 @@ $(function() {
//关闭其他选项卡
function closeOtherTabs() {
$('.page-tabs-content').children("[data-id]").not(":first").not(".active").each(function() {
$('.page-tabs-content').children("[data-id]").not(":first").not(".active").each(function () {
$('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').remove();
$(this).remove();
});
$('.page-tabs-content').css("margin-left", "0");
}
$('.tabCloseOther').on('click', closeOtherTabs);
//滚动到已激活的选项卡
function showActiveTab() {
scrollToTab($('.menuTab.active'));
}
$('.tabShowActive').on('click', showActiveTab);
// 点击选项卡菜单
@ -340,7 +411,7 @@ $(function() {
if (!$(this).hasClass('active')) {
var currentId = $(this).data('id');
// 显示tab对应的内容区
$('.mainContent .RuoYi_iframe').each(function() {
$('.mainContent .RuoYi_iframe').each(function () {
if ($(this).data('id') == currentId) {
$(this).show().siblings('.RuoYi_iframe').hide();
return false;
@ -356,17 +427,17 @@ $(function() {
//刷新iframe
function refreshTab() {
var currentId = $('.page-tabs-content').find('.active').attr('data-id');
var target = $('.RuoYi_iframe[data-id="' + currentId + '"]');
var currentId = $('.page-tabs-content').find('.active').attr('data-id');
var target = $('.RuoYi_iframe[data-id="' + currentId + '"]');
var url = target.attr('src');
target.attr('src', url).ready();
}
// 全屏显示
$('#fullScreen').on('click', function () {
$('#wrapper').fullScreen();
$('#wrapper').fullScreen();
});
// 刷新按钮
$('.tabReload').on('click', refreshTab);
@ -378,43 +449,43 @@ $(function() {
// 右移按扭
$('.tabRight').on('click', scrollTabRight);
// 关闭当前
$('.tabCloseCurrent').on('click', function () {
$('.page-tabs-content').find('.active i').trigger("click");
});
// 关闭全部
$('.tabCloseAll').on('click', function() {
$('.page-tabs-content').children("[data-id]").not(":first").each(function() {
$('.tabCloseAll').on('click', function () {
$('.page-tabs-content').children("[data-id]").not(":first").each(function () {
$('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').remove();
$(this).remove();
});
$('.page-tabs-content').children("[data-id]:first").each(function() {
$('.page-tabs-content').children("[data-id]:first").each(function () {
$('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').show();
$(this).addClass("active");
});
$('.page-tabs-content').css("margin-left", "0");
});
// tab全屏显示
$('.tabMaxCurrent').on('click', function () {
$('.page-tabs-content').find('.active').trigger("dblclick");
});
// 关闭全屏
$('#ax_close_max').click(function(){
$('#content-main').toggleClass('max');
$('#ax_close_max').hide();
$('#ax_close_max').click(function () {
$('#content-main').toggleClass('max');
$('#ax_close_max').hide();
})
// 双击选项卡全屏显示
function activeTabMax() {
$('#content-main').toggleClass('max');
$('#ax_close_max').show();
}
$(window).keydown(function(event) {
$(window).keydown(function (event) {
if (event.keyCode == 27) {
$('#content-main').removeClass('max');
$('#ax_close_max').hide();

View File

@ -17,6 +17,13 @@
<link th:href="@{/css/style.css}" rel="stylesheet"/>
<link th:href="@{/ruoyi/css/ry-ui.css?v=3.0.0}" rel="stylesheet"/>
<style type="text/css">
#right-sidebar.sidebar-open {
right: 0
}
#right-sidebar.sidebar-open.sidebar-top {
top: 0;
border-top: none
}
.nav > li:hover .dropdown-menu {display: block;}
#content-main.max { height: calc(100% - 110px); overflow: hidden; width: 100%; height: 100%; left: 0px; position: absolute; top: 0px; z-index: 9998; margin: 0; }
</style>
@ -53,7 +60,7 @@
<li th:each="menu : ${menus}">
<a href="#">
<i class="fa fa fa-bar-chart-o" th:class="${menu.icon}"></i>
<span class="nav-label" th:text="${menu.menuName}">一级菜单</span>
<span class="nav-label" th:text="${menu.menuName}">一级菜单</span>
<span class="fa arrow"></span>
</a>
<ul class="nav nav-second-level collapse">
@ -70,7 +77,7 @@
</div>
</nav>
<!--左侧导航结束-->
<!--右侧部分开始-->
<div id="page-wrapper" class="gray-bg dashbard-1">
<div class="row border-bottom">
@ -93,9 +100,322 @@
</li>
<li><a id="fullScreen"><i class="fa fa-arrows-alt"></i>全屏</a></li>
<li><a th:href="@{logout}"><i class="fa fa-sign-out"></i>退出</a></li>
<li class="dropdown hidden-xs">
<a class="right-sidebar-toggle" aria-expanded="false">
<i class="fa fa-tasks"></i> 主题
</a>
</li>
</ul>
</nav>
</div>
<!--主题按钮打开DIV-->
<div id="right-sidebar">
<div class="sidebar-container">
<ul class="nav nav-tabs navs-3">
<li class="active">
<a data-toggle="tab" href="#tab-1">
<i class="fa fa-gear"></i> 主题
</a>
</li>
<li class=""><a data-toggle="tab" href="#tab-2">
通知
</a>
</li>
<li><a data-toggle="tab" href="#tab-3">
项目进度
</a>
</li>
</ul>
<div class="tab-content">
<div id="tab-1" class="tab-pane active">
<div class="sidebar-title">
<h3> <i class="fa fa-comments-o"></i> 主题设置</h3>
<small><i class="fa fa-tim"></i> 你可以从这里选择和预览主题的布局和样式,这些设置会被保存在本地,下次打开的时候会直接应用这些设置。</small>
</div>
<div class="skin-setttings">
<div class="title">主题设置</div>
<div class="setings-item">
<span>收起左侧菜单</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="collapsemenu" class="onoffswitch-checkbox" id="collapsemenu">
<label class="onoffswitch-label" for="collapsemenu">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="setings-item">
<span>固定顶部</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="fixednavbar" class="onoffswitch-checkbox" id="fixednavbar">
<label class="onoffswitch-label" for="fixednavbar">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="setings-item">
<span>固定宽度</span>
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" name="boxedlayout" class="onoffswitch-checkbox" id="boxedlayout">
<label class="onoffswitch-label" for="boxedlayout">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
<div class="title">皮肤选择</div>
<div class="setings-item default-skin nb">
<span class="skin-name ">
<a href="#" class="s-skin-0">
默认皮肤
</a>
</span>
</div>
<div class="setings-item blue-skin nb">
<span class="skin-name ">
<a href="#" class="s-skin-1">
自定义皮肤,index.js自己实现
</a>
</span>
</div>
</div>
</div>
<div id="tab-2" class="tab-pane">
<div class="sidebar-title">
<h3> <i class="fa fa-comments-o"></i> 最新通知</h3>
<small><i class="fa fa-tim"></i> 您当前有10条未读信息</small>
</div>
<div>
<div class="sidebar-message">
<a href="#">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="img/a1.jpg">
<div class="m-t-xs">
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-warning"></i>
</div>
</div>
<div class="media-body">
据天津日报报道瑞海公司董事长于学伟副董事长董社轩等10人在13日上午已被控制。
<br>
<small class="text-muted">今天 4:21</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="img/a2.jpg">
</div>
<div class="media-body">
HCY48之音乐大魔王会员专属皮肤已上线快来一键换装拥有他宣告你对华晨宇的爱吧
<br>
<small class="text-muted">昨天 2:45</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="img/a3.jpg">
<div class="m-t-xs">
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-warning"></i>
</div>
</div>
<div class="media-body">
写的好!与您分享
<br>
<small class="text-muted">昨天 1:10</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="img/a4.jpg">
</div>
<div class="media-body">
国外极限小子的炼成!这还是亲生的吗!!
<br>
<small class="text-muted">昨天 8:37</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="img/a8.jpg">
</div>
<div class="media-body">
一只流浪狗被收留后,为了减轻主人的负担,坚持自己觅食,甚至......有些东西,可能她比我们更懂。
<br>
<small class="text-muted">今天 4:21</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="img/a7.jpg">
</div>
<div class="media-body">
这哥们的新视频又来了,创意杠杠滴,帅炸了!
<br>
<small class="text-muted">昨天 2:45</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="img/a3.jpg">
<div class="m-t-xs">
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-warning"></i>
<i class="fa fa-star text-warning"></i>
</div>
</div>
<div class="media-body">
最近在补追此剧,特别喜欢这段表白。
<br>
<small class="text-muted">昨天 1:10</small>
</div>
</a>
</div>
<div class="sidebar-message">
<a href="#">
<div class="pull-left text-center">
<img alt="image" class="img-circle message-avatar" src="img/a4.jpg">
</div>
<div class="media-body">
我发起了一个投票 【你认为下午大盘会翻红吗?】
<br>
<small class="text-muted">星期一 8:37</small>
</div>
</a>
</div>
</div>
</div>
<div id="tab-3" class="tab-pane">
<div class="sidebar-title">
<h3> <i class="fa fa-cube"></i> 最新任务</h3>
<small><i class="fa fa-tim"></i> 您当前有14个任务10个已完成</small>
</div>
<ul class="sidebar-list">
<li>
<a href="#">
<div class="small pull-right m-t-xs">9小时以后</div>
<h4>市场调研</h4> 按要求接收教材;
<div class="small">已完成: 22%</div>
<div class="progress progress-mini">
<div style="width: 22%;" class="progress-bar progress-bar-warning"></div>
</div>
<div class="small text-muted m-t-xs">项目截止: 4:00 - 2015.10.01</div>
</a>
</li>
<li>
<a href="#">
<div class="small pull-right m-t-xs">9小时以后</div>
<h4>可行性报告研究报上级批准 </h4> 编写目的编写本项目进度报告的目的在于更好的控制软件开发的时间,对团队成员的 开发进度作出一个合理的比对
<div class="small">已完成: 48%</div>
<div class="progress progress-mini">
<div style="width: 48%;" class="progress-bar"></div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="small pull-right m-t-xs">9小时以后</div>
<h4>立项阶段</h4> 东风商用车公司 采购综合综合查询分析系统项目进度阶段性报告武汉斯迪克科技有限公司
<div class="small">已完成: 14%</div>
<div class="progress progress-mini">
<div style="width: 14%;" class="progress-bar progress-bar-info"></div>
</div>
</a>
</li>
<li>
<a href="#">
<span class="label label-primary pull-right">NEW</span>
<h4>设计阶段</h4>
<!--<div class="small pull-right m-t-xs">9小时以后</div>-->
项目进度报告(Project Progress Report)
<div class="small">已完成: 22%</div>
<div class="small text-muted m-t-xs">项目截止: 4:00 - 2015.10.01</div>
</a>
</li>
<li>
<a href="#">
<div class="small pull-right m-t-xs">9小时以后</div>
<h4>拆迁阶段</h4> 科研项目研究进展报告 项目编号: 项目名称: 项目负责人:
<div class="small">已完成: 22%</div>
<div class="progress progress-mini">
<div style="width: 22%;" class="progress-bar progress-bar-warning"></div>
</div>
<div class="small text-muted m-t-xs">项目截止: 4:00 - 2015.10.01</div>
</a>
</li>
<li>
<a href="#">
<div class="small pull-right m-t-xs">9小时以后</div>
<h4>建设阶段 </h4> 编写目的编写本项目进度报告的目的在于更好的控制软件开发的时间,对团队成员的 开发进度作出一个合理的比对
<div class="small">已完成: 48%</div>
<div class="progress progress-mini">
<div style="width: 48%;" class="progress-bar"></div>
</div>
</a>
</li>
<li>
<a href="#">
<div class="small pull-right m-t-xs">9小时以后</div>
<h4>获证开盘</h4> 编写目的编写本项目进度报告的目的在于更好的控制软件开发的时间,对团队成员的 开发进度作出一个合理的比对
<div class="small">已完成: 14%</div>
<div class="progress progress-mini">
<div style="width: 14%;" class="progress-bar progress-bar-info"></div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--主题按钮打开DIV 结束-->
<div class="row content-tabs">
<button class="roll-nav roll-left tabLeft">
<i class="fa fa-backward"></i>
@ -121,9 +441,9 @@
</div>
<a href="#" class="roll-nav roll-right tabReload"><i class="fa fa-refresh"></i> 刷新</a>
</div>
<a id="ax_close_max" class="ax_close_max" href="#" title="关闭全屏"> <i class="fa fa-times-circle-o"></i> </a>
<div class="row mainContent" id="content-main">
<iframe class="RuoYi_iframe" name="iframe0" width="100%" height="100%" data-id="/system/main"
th:src="@{/system/main}" frameborder="0" seamless></iframe>