首次提交（未完成）

css/bootstrap-theme.css

@@ -0,0 +1,596 @@
+/*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2017 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+/*!
+ * Generated using the Bootstrap Customizer (http://v3.bootcss.com/customize/?id=85a1c64e530c6508a9e35b8c3dddca06)
+ * Config saved to config.json and https://gist.github.com/85a1c64e530c6508a9e35b8c3dddca06
+ */
+/*!
+ * Bootstrap v3.3.7 (http://getbootstrap.com)
+ * Copyright 2011-2016 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+.btn-default,
+.btn-primary,
+.btn-success,
+.btn-info,
+.btn-warning,
+.btn-danger {
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+.btn-default:active,
+.btn-primary:active,
+.btn-success:active,
+.btn-info:active,
+.btn-warning:active,
+.btn-danger:active,
+.btn-default.active,
+.btn-primary.active,
+.btn-success.active,
+.btn-info.active,
+.btn-warning.active,
+.btn-danger.active {
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
+.btn-default.disabled,
+.btn-primary.disabled,
+.btn-success.disabled,
+.btn-info.disabled,
+.btn-warning.disabled,
+.btn-danger.disabled,
+.btn-default[disabled],
+.btn-primary[disabled],
+.btn-success[disabled],
+.btn-info[disabled],
+.btn-warning[disabled],
+.btn-danger[disabled],
+fieldset[disabled] .btn-default,
+fieldset[disabled] .btn-primary,
+fieldset[disabled] .btn-success,
+fieldset[disabled] .btn-info,
+fieldset[disabled] .btn-warning,
+fieldset[disabled] .btn-danger {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.btn-default .badge,
+.btn-primary .badge,
+.btn-success .badge,
+.btn-info .badge,
+.btn-warning .badge,
+.btn-danger .badge {
+  text-shadow: none;
+}
+.btn:active,
+.btn.active {
+  background-image: none;
+}
+.btn-default {
+  background-image: -webkit-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);
+  background-image: -o-linear-gradient(top, #ffffff 0%, #e0e0e0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e0e0e0));
+  background-image: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #dbdbdb;
+  text-shadow: 0 1px 0 #fff;
+  border-color: #ccc;
+}
+.btn-default:hover,
+.btn-default:focus {
+  background-color: #e0e0e0;
+  background-position: 0 -15px;
+}
+.btn-default:active,
+.btn-default.active {
+  background-color: #e0e0e0;
+  border-color: #dbdbdb;
+}
+.btn-default.disabled,
+.btn-default[disabled],
+fieldset[disabled] .btn-default,
+.btn-default.disabled:hover,
+.btn-default[disabled]:hover,
+fieldset[disabled] .btn-default:hover,
+.btn-default.disabled:focus,
+.btn-default[disabled]:focus,
+fieldset[disabled] .btn-default:focus,
+.btn-default.disabled.focus,
+.btn-default[disabled].focus,
+fieldset[disabled] .btn-default.focus,
+.btn-default.disabled:active,
+.btn-default[disabled]:active,
+fieldset[disabled] .btn-default:active,
+.btn-default.disabled.active,
+.btn-default[disabled].active,
+fieldset[disabled] .btn-default.active {
+  background-color: #e0e0e0;
+  background-image: none;
+}
+.btn-primary {
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #265a88 100%);
+  background-image: -o-linear-gradient(top, #337ab7 0%, #265a88 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#265a88));
+  background-image: linear-gradient(to bottom, #337ab7 0%, #265a88 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #245580;
+}
+.btn-primary:hover,
+.btn-primary:focus {
+  background-color: #265a88;
+  background-position: 0 -15px;
+}
+.btn-primary:active,
+.btn-primary.active {
+  background-color: #265a88;
+  border-color: #245580;
+}
+.btn-primary.disabled,
+.btn-primary[disabled],
+fieldset[disabled] .btn-primary,
+.btn-primary.disabled:hover,
+.btn-primary[disabled]:hover,
+fieldset[disabled] .btn-primary:hover,
+.btn-primary.disabled:focus,
+.btn-primary[disabled]:focus,
+fieldset[disabled] .btn-primary:focus,
+.btn-primary.disabled.focus,
+.btn-primary[disabled].focus,
+fieldset[disabled] .btn-primary.focus,
+.btn-primary.disabled:active,
+.btn-primary[disabled]:active,
+fieldset[disabled] .btn-primary:active,
+.btn-primary.disabled.active,
+.btn-primary[disabled].active,
+fieldset[disabled] .btn-primary.active {
+  background-color: #265a88;
+  background-image: none;
+}
+.btn-success {
+  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
+  background-image: -o-linear-gradient(top, #5cb85c 0%, #419641 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#419641));
+  background-image: linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #3e8f3e;
+}
+.btn-success:hover,
+.btn-success:focus {
+  background-color: #419641;
+  background-position: 0 -15px;
+}
+.btn-success:active,
+.btn-success.active {
+  background-color: #419641;
+  border-color: #3e8f3e;
+}
+.btn-success.disabled,
+.btn-success[disabled],
+fieldset[disabled] .btn-success,
+.btn-success.disabled:hover,
+.btn-success[disabled]:hover,
+fieldset[disabled] .btn-success:hover,
+.btn-success.disabled:focus,
+.btn-success[disabled]:focus,
+fieldset[disabled] .btn-success:focus,
+.btn-success.disabled.focus,
+.btn-success[disabled].focus,
+fieldset[disabled] .btn-success.focus,
+.btn-success.disabled:active,
+.btn-success[disabled]:active,
+fieldset[disabled] .btn-success:active,
+.btn-success.disabled.active,
+.btn-success[disabled].active,
+fieldset[disabled] .btn-success.active {
+  background-color: #419641;
+  background-image: none;
+}
+.btn-info {
+  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
+  background-image: -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2));
+  background-image: linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #28a4c9;
+}
+.btn-info:hover,
+.btn-info:focus {
+  background-color: #2aabd2;
+  background-position: 0 -15px;
+}
+.btn-info:active,
+.btn-info.active {
+  background-color: #2aabd2;
+  border-color: #28a4c9;
+}
+.btn-info.disabled,
+.btn-info[disabled],
+fieldset[disabled] .btn-info,
+.btn-info.disabled:hover,
+.btn-info[disabled]:hover,
+fieldset[disabled] .btn-info:hover,
+.btn-info.disabled:focus,
+.btn-info[disabled]:focus,
+fieldset[disabled] .btn-info:focus,
+.btn-info.disabled.focus,
+.btn-info[disabled].focus,
+fieldset[disabled] .btn-info.focus,
+.btn-info.disabled:active,
+.btn-info[disabled]:active,
+fieldset[disabled] .btn-info:active,
+.btn-info.disabled.active,
+.btn-info[disabled].active,
+fieldset[disabled] .btn-info.active {
+  background-color: #2aabd2;
+  background-image: none;
+}
+.btn-warning {
+  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
+  background-image: -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eb9316));
+  background-image: linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #e38d13;
+}
+.btn-warning:hover,
+.btn-warning:focus {
+  background-color: #eb9316;
+  background-position: 0 -15px;
+}
+.btn-warning:active,
+.btn-warning.active {
+  background-color: #eb9316;
+  border-color: #e38d13;
+}
+.btn-warning.disabled,
+.btn-warning[disabled],
+fieldset[disabled] .btn-warning,
+.btn-warning.disabled:hover,
+.btn-warning[disabled]:hover,
+fieldset[disabled] .btn-warning:hover,
+.btn-warning.disabled:focus,
+.btn-warning[disabled]:focus,
+fieldset[disabled] .btn-warning:focus,
+.btn-warning.disabled.focus,
+.btn-warning[disabled].focus,
+fieldset[disabled] .btn-warning.focus,
+.btn-warning.disabled:active,
+.btn-warning[disabled]:active,
+fieldset[disabled] .btn-warning:active,
+.btn-warning.disabled.active,
+.btn-warning[disabled].active,
+fieldset[disabled] .btn-warning.active {
+  background-color: #eb9316;
+  background-image: none;
+}
+.btn-danger {
+  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
+  background-image: -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c12e2a));
+  background-image: linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  background-repeat: repeat-x;
+  border-color: #b92c28;
+}
+.btn-danger:hover,
+.btn-danger:focus {
+  background-color: #c12e2a;
+  background-position: 0 -15px;
+}
+.btn-danger:active,
+.btn-danger.active {
+  background-color: #c12e2a;
+  border-color: #b92c28;
+}
+.btn-danger.disabled,
+.btn-danger[disabled],
+fieldset[disabled] .btn-danger,
+.btn-danger.disabled:hover,
+.btn-danger[disabled]:hover,
+fieldset[disabled] .btn-danger:hover,
+.btn-danger.disabled:focus,
+.btn-danger[disabled]:focus,
+fieldset[disabled] .btn-danger:focus,
+.btn-danger.disabled.focus,
+.btn-danger[disabled].focus,
+fieldset[disabled] .btn-danger.focus,
+.btn-danger.disabled:active,
+.btn-danger[disabled]:active,
+fieldset[disabled] .btn-danger:active,
+.btn-danger.disabled.active,
+.btn-danger[disabled].active,
+fieldset[disabled] .btn-danger.active {
+  background-color: #c12e2a;
+  background-image: none;
+}
+.thumbnail,
+.img-thumbnail {
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+}
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
+  background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
+  background-color: #e8e8e8;
+}
+.dropdown-menu > .active > a,
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+  background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+  background-color: #2e6da4;
+}
+.navbar-default {
+  background-image: -webkit-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
+  background-image: -o-linear-gradient(top, #ffffff 0%, #f8f8f8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f8f8f8));
+  background-image: linear-gradient(to bottom, #ffffff 0%, #f8f8f8 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 5px rgba(0, 0, 0, 0.075);
+}
+.navbar-default .navbar-nav > .open > a,
+.navbar-default .navbar-nav > .active > a {
+  background-image: -webkit-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
+  background-image: -o-linear-gradient(top, #dbdbdb 0%, #e2e2e2 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dbdbdb), to(#e2e2e2));
+  background-image: linear-gradient(to bottom, #dbdbdb 0%, #e2e2e2 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0);
+  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.075);
+}
+.navbar-brand,
+.navbar-nav > li > a {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
+}
+.navbar-inverse {
+  background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222222 100%);
+  background-image: -o-linear-gradient(top, #3c3c3c 0%, #222222 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222222));
+  background-image: linear-gradient(to bottom, #3c3c3c 0%, #222222 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  border-radius: 4px;
+}
+.navbar-inverse .navbar-nav > .open > a,
+.navbar-inverse .navbar-nav > .active > a {
+  background-image: -webkit-linear-gradient(top, #080808 0%, #0f0f0f 100%);
+  background-image: -o-linear-gradient(top, #080808 0%, #0f0f0f 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#080808), to(#0f0f0f));
+  background-image: linear-gradient(to bottom, #080808 0%, #0f0f0f 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);
+  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
+  box-shadow: inset 0 3px 9px rgba(0, 0, 0, 0.25);
+}
+.navbar-inverse .navbar-brand,
+.navbar-inverse .navbar-nav > li > a {
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.navbar-static-top,
+.navbar-fixed-top,
+.navbar-fixed-bottom {
+  border-radius: 0;
+}
+@media (max-width: 767px) {
+  .navbar .navbar-nav .open .dropdown-menu > .active > a,
+  .navbar .navbar-nav .open .dropdown-menu > .active > a:hover,
+  .navbar .navbar-nav .open .dropdown-menu > .active > a:focus {
+    color: #fff;
+    background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+    background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+  }
+}
+.alert {
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.alert-success {
+  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
+  background-image: -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
+  background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
+  border-color: #b2dba1;
+}
+.alert-info {
+  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
+  background-image: -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0));
+  background-image: linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
+  border-color: #9acfea;
+}
+.alert-warning {
+  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
+  background-image: -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0));
+  background-image: linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
+  border-color: #f5e79e;
+}
+.alert-danger {
+  background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
+  background-image: -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3));
+  background-image: linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
+  border-color: #dca7a7;
+}
+.progress {
+  background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
+  background-image: -o-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5));
+  background-image: linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
+}
+.progress-bar {
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #286090 100%);
+  background-image: -o-linear-gradient(top, #337ab7 0%, #286090 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#286090));
+  background-image: linear-gradient(to bottom, #337ab7 0%, #286090 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);
+}
+.progress-bar-success {
+  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
+  background-image: -o-linear-gradient(top, #5cb85c 0%, #449d44 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44));
+  background-image: linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
+}
+.progress-bar-info {
+  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
+  background-image: -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#31b0d5));
+  background-image: linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
+}
+.progress-bar-warning {
+  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
+  background-image: -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f));
+  background-image: linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
+}
+.progress-bar-danger {
+  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
+  background-image: -o-linear-gradient(top, #d9534f 0%, #c9302c 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c));
+  background-image: linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
+}
+.progress-bar-striped {
+  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
+}
+.list-group {
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
+}
+.list-group-item.active,
+.list-group-item.active:hover,
+.list-group-item.active:focus {
+  text-shadow: 0 -1px 0 #286090;
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2b669a 100%);
+  background-image: -o-linear-gradient(top, #337ab7 0%, #2b669a 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2b669a));
+  background-image: linear-gradient(to bottom, #337ab7 0%, #2b669a 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);
+  border-color: #2b669a;
+}
+.list-group-item.active .badge,
+.list-group-item.active:hover .badge,
+.list-group-item.active:focus .badge {
+  text-shadow: none;
+}
+.panel {
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+.panel-default > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
+  background-image: linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
+}
+.panel-primary > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image: -o-linear-gradient(top, #337ab7 0%, #2e6da4 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#337ab7), to(#2e6da4));
+  background-image: linear-gradient(to bottom, #337ab7 0%, #2e6da4 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);
+}
+.panel-success > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
+  background-image: -o-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#d0e9c6));
+  background-image: linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
+}
+.panel-info > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
+  background-image: -o-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#c4e3f3));
+  background-image: linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
+}
+.panel-warning > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
+  background-image: -o-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#faf2cc));
+  background-image: linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
+}
+.panel-danger > .panel-heading {
+  background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
+  background-image: -o-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#ebcccc));
+  background-image: linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
+}
+.well {
+  background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
+  background-image: -o-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
+  background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#f5f5f5));
+  background-image: linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
+  border-color: #dcdcdc;
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.1);
+}

css/fixedheadertable.css

@@ -0,0 +1,99 @@
+/*!
+* jquery.fixedHeaderTable. The jQuery fixedHeaderTable plugin
+*
+* Copyright (c) 2011 Mark Malek
+* http://fixedheadertable.com
+*
+* Licensed under MIT
+* http://www.opensource.org/licenses/mit-license.php
+* 
+* http://docs.jquery.com/Plugins/Authoring
+* jQuery authoring guidelines
+*
+* Launch  : October 2009
+* Version : 1.3
+* Released: May 9th, 2011
+*
+* 
+* all CSS sizing (width,height) is done in pixels (px)
+*/
+
+/* @group Reset */
+
+.fht-table,
+.fht-table thead,
+.fht-table tfoot,
+.fht-table tbody,
+.fht-table tr,
+.fht-table th,
+.fht-table td {
+  margin: 0;
+	padding: 0;
+	vertical-align:middle;
+	}
+.fht-table {
+	}
+.fht-table-wrapper,
+.fht-table-wrapper .fht-thead,
+.fht-table-wrapper .fht-tfoot,
+.fht-table-wrapper .fht-fixed-column .fht-tbody,
+.fht-table-wrapper .fht-fixed-body .fht-tbody,
+.fht-table-wrapper .fht-tbody {
+	overflow: hidden;
+
+	position: relative;
+	}
+
+	.fht-table-wrapper .fht-fixed-body .fht-tbody,
+	.fht-table-wrapper .fht-tbody {
+
+	    overflow: auto;
+		}
+
+		.fht-table-wrapper .fht-table .fht-cell {
+
+			overflow: hidden;
+		    height: 1px;
+			}
+	
+	.fht-table-wrapper .fht-fixed-column,
+	.fht-table-wrapper .fht-fixed-body {
+	    top: 0;
+	    left: 0;
+	    position: absolute;
+	    }
+	    
+	.fht-table-wrapper .fht-fixed-column {
+	    z-index: 1;
+	    }
+
+.fancyTable td, .fancyTable th {
+	border: 1px solid #d4d4d4;
+	padding:3px;
+	white-space:nowrap;
+	}
+	.fancyTable td{
+	min-width:60px
+
+	}
+.fancyTable tbody tr th {
+	background-color: #fff;
+	}
+.fancyTable tbody tr td {
+	background-color: #fff;
+	}
+.fancyTable tbody tr.odd td{
+	background: #fff
+	}
+.fancyTable tbody tr th{
+	font-weight: 600;
+	background: #fff
+	}
+.fancyTable thead tr th,
+.fancyTable thead tr td,
+.fancyTable tfoot tr th, 
+.fancyTable tfoot tr td {
+	background: #fff;
+	font-weight: bold;
+	color:#444;
+	}

css/icomoon/Read Me.txt

@@ -0,0 +1,5 @@
+Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
+
+You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
+
+You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu > Manage Projects) to retrieve your icon selection.

css/icomoon/demo-files/demo.css

@@ -0,0 +1,157 @@
+body {
+	padding: 0;
+	margin: 0;
+	font-family: sans-serif;
+	font-size: 1em;
+	line-height: 1.5;
+	color: #555;
+	background: #fff;
+}
+h1 {
+	font-size: 1.5em;
+	font-weight: normal;
+}
+small {
+	font-size: .66666667em;
+}
+a {
+	color: #e74c3c;
+	text-decoration: none;
+}
+a:hover, a:focus {
+	box-shadow: 0 1px #e74c3c;
+}
+.bshadow0, input {
+	box-shadow: inset 0 -2px #e7e7e7;
+}
+input:hover {
+	box-shadow: inset 0 -2px #ccc;
+}
+input, fieldset {
+	font-size: 1em;
+	margin: 0;
+	padding: 0;
+	border: 0;
+}
+input {
+	color: inherit;
+	line-height: 1.5;
+	height: 1.5em;
+	padding: .25em 0;
+}
+input:focus {
+	outline: none;
+	box-shadow: inset 0 -2px #449fdb;
+}
+.glyph {
+	font-size: 16px;
+	width: 15em;
+	padding-bottom: 1em;
+	margin-right: 4em;
+	margin-bottom: 1em;
+	float: left;
+	overflow: hidden;
+}
+.liga {
+	width: 80%;
+	width: calc(100% - 2.5em);
+}
+.talign-right {
+	text-align: right;
+}
+.talign-center {
+	text-align: center;
+}
+.bgc1 {
+	background: #f1f1f1;
+}
+.fgc1 {
+	color: #999;
+}
+.fgc0 {
+	color: #000;
+}
+p {
+	margin-top: 1em;
+	margin-bottom: 1em;
+}
+.mvm {
+	margin-top: .75em;
+	margin-bottom: .75em;
+}
+.mtn {
+	margin-top: 0;
+}
+.mtl, .mal {
+	margin-top: 1.5em;
+}
+.mbl, .mal {
+	margin-bottom: 1.5em;
+}
+.mal, .mhl {
+	margin-left: 1.5em;
+	margin-right: 1.5em;
+}
+.mhmm {
+	margin-left: 1em;
+	margin-right: 1em;
+}
+.mls {
+	margin-left: .25em;
+}
+.ptl {
+	padding-top: 1.5em;
+}
+.pbs, .pvs {
+	padding-bottom: .25em;
+}
+.pvs, .pts {
+	padding-top: .25em;
+}
+.clearfix {
+	zoom: 1;
+}
+.unit {
+	float: left;
+}
+.unitRight {
+	float: right;
+}
+.size1of2 {
+	width: 50%;
+}
+.size1of1 {
+	width: 100%;
+}
+.clearfix:before, .clearfix:after {
+	content: " ";
+	display: table;
+}
+.clearfix:after {
+	clear: both;
+}
+.hidden-true {
+	display: none;
+}
+.textbox0 {
+	width: 3em;
+	background: #f1f1f1;
+	padding: .25em .5em;
+	line-height: 1.5;
+	height: 1.5em;
+}
+#testDrive {
+	padding-top: 24px;
+}
+.fs0 {
+	font-size: 16px;
+}
+.fs1 {
+	font-size: 32px;
+}
+.fs2 {
+	font-size: 32px;
+}
+.fs3 {
+	font-size: 32px;
+}

css/icomoon/demo-files/demo.js

@@ -0,0 +1,30 @@
+if (!('boxShadow' in document.body.style)) {
+	document.body.setAttribute('class', 'noBoxShadow');
+}
+
+document.body.addEventListener("click", function(e) {
+	var target = e.target;
+	if (target.tagName === "INPUT" &&
+		target.getAttribute('class').indexOf('liga') === -1) {
+		target.select();
+	}
+});
+
+(function() {
+	var fontSize = document.getElementById('fontSize'),
+		testDrive = document.getElementById('testDrive'),
+		testText = document.getElementById('testText');
+	function updateTest() {
+		testDrive.innerHTML = testText.value || String.fromCharCode(160);
+		if (window.icomoonLiga) {
+			window.icomoonLiga(testDrive);
+		}
+	}
+	function updateSize() {
+		testDrive.style.fontSize = fontSize.value + 'px';
+	}
+	fontSize.addEventListener('change', updateSize, false);
+	testText.addEventListener('input', updateTest, false);
+	testText.addEventListener('change', updateTest, false);
+	updateSize();
+}());

css/icomoon/demo.html

@@ -0,0 +1,578 @@
+<!doctype html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>IcoMoon Demo</title>
+	<meta name="description" content="An Icon Font Generated By IcoMoon.io">
+	<meta name="viewport" content="width=device-width">
+	<link rel="stylesheet" href="demo-files/demo.css">
+	<link rel="stylesheet" href="style.css"></head>
+<body>
+	<div class="bgc1 clearfix">
+		<h1 class="mhmm mvm"><span class="fgc1">Font Name:</span> icomoon <small class="fgc1">(Glyphs:&nbsp;41)</small></h1>
+	</div>
+	<div class="clearfix mhl ptl">
+		<h1 class="mvm mtn bshadow fgc1">Grid Size: Unknown</h1>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni42"></span><span class="mls"> icon-uni42</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="43" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x43;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni43"></span><span class="mls"> icon-uni43</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="44" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x44;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni47"></span><span class="mls"> icon-uni47</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="47" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x47;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni4D"></span><span class="mls"> icon-uni4D</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="4d" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x4d;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni4E"></span><span class="mls"> icon-uni4E</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="4e" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x4e;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni4F"></span><span class="mls"> icon-uni4F</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="4f" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x4f;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni50"></span><span class="mls"> icon-uni50</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="50" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x50;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni52"></span><span class="mls"> icon-uni52</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="52" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x52;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni53"></span><span class="mls"> icon-uni53</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="53" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x53;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni54"></span><span class="mls"> icon-uni54</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="54" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x54;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni55"></span><span class="mls"> icon-uni55</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="55" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x55;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni56"></span><span class="mls"> icon-uni56</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="56" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x56;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni57"></span><span class="mls"> icon-uni57</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="57" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x57;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni58"></span><span class="mls"> icon-uni58</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="58" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x58;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni59"></span><span class="mls"> icon-uni59</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="59" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x59;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni5A"></span><span class="mls"> icon-uni5A</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="5a" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x5a;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni61"></span><span class="mls"> icon-uni61</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="61" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x61;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni62"></span><span class="mls"> icon-uni62</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="62" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x62;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni63"></span><span class="mls"> icon-uni63</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="63" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x63;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni64"></span><span class="mls"> icon-uni64</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="64" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x64;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni65"></span><span class="mls"> icon-uni65</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="65" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x65;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni66"></span><span class="mls"> icon-uni66</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="66" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x66;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni67"></span><span class="mls"> icon-uni67</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="67" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x67;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni68"></span><span class="mls"> icon-uni68</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="68" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x68;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni69"></span><span class="mls"> icon-uni69</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="69" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x69;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni6A"></span><span class="mls"> icon-uni6A</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="6a" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x6a;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni6B"></span><span class="mls"> icon-uni6B</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="6b" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x6b;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni6C"></span><span class="mls"> icon-uni6C</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="6c" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x6c;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni6D"></span><span class="mls"> icon-uni6D</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="6d" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x6d;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni6F"></span><span class="mls"> icon-uni6F</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="6f" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x6f;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni70"></span><span class="mls"> icon-uni70</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="70" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x70;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni71"></span><span class="mls"> icon-uni71</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="71" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x71;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni72"></span><span class="mls"> icon-uni72</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="72" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x72;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni73"></span><span class="mls"> icon-uni73</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="73" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x73;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni74"></span><span class="mls"> icon-uni74</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="74" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x74;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs1">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-uni75"></span><span class="mls"> icon-uni75</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="75" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x75;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+	</div>
+	<div class="clearfix mhl ptl">
+		<h1 class="mvm mtn bshadow fgc1">Grid Size: 16</h1>
+		<div class="glyph fs2">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-window"></span><span class="mls"> icon-window</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="49" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x49;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs2">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-monitor"></span><span class="mls"> icon-monitor</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="48" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x48;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+	</div>
+	<div class="clearfix mhl ptl">
+		<h1 class="mvm mtn bshadow fgc1">Grid Size: 32</h1>
+		<div class="glyph fs3">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-upload"></span><span class="mls"> icon-upload</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="42" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x42;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs3">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-inbox"></span><span class="mls"> icon-inbox</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="41" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x41;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+		<div class="glyph fs3">
+			<div class="clearfix bshadow0 pbs">
+				<span class="icon-chart"></span><span class="mls"> icon-chart</span>
+			</div>
+			<fieldset class="fs0 size1of1 clearfix hidden-false">
+				<input type="text" readonly value="45" class="unit size1of2" />
+				<input type="text" maxlength="1" readonly value="&#x45;" class="unitRight size1of2 talign-right" />
+			</fieldset>
+			<div class="fs0 bshadow0 clearfix hidden-true">
+				<span class="unit pvs fgc1">liga: </span>
+				<input type="text" readonly value="" class="liga unitRight" />
+			</div>
+		</div>
+	</div>
+
+	<!--[if gt IE 8]><!-->
+	<div class="mhl clearfix mbl">
+		<h1>Font Test Drive</h1>
+		<label>
+			Font Size: <input id="fontSize" type="number" class="textbox0 mbm"
+			min="8" value="48" />
+			px
+		</label>
+		<input id="testText" type="text" class="phl size1of1 mvl"
+		placeholder="Type some text to test..." value=""/>
+		</label>
+		<div id="testDrive" class="icon-">&nbsp;
+		</div>
+	</div>
+	<!--<![endif]-->
+	<div class="bgc1 clearfix">
+		<p class="mhl">Generated by <a href="http://icomoon.io/app">IcoMoon</a></p>
+	</div>
+
+	<script src="demo-files/demo.js"></script>
+</body>
+</html>

css/icomoon/style.css

@@ -0,0 +1,148 @@
+@font-face {
+	font-family: 'icomoon';
+	src:url('fonts/icomoon.eot?miflbf');
+	src:url('fonts/icomoon.eot?#iefixmiflbf') format('embedded-opentype'),
+		url('fonts/icomoon.woff?miflbf') format('woff'),
+		url('fonts/icomoon.ttf?miflbf') format('truetype'),
+		url('fonts/icomoon.svg?miflbf#icomoon') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+	font-family: 'icomoon';
+	speak: none;
+	font-style: normal;
+	font-weight: normal;
+	font-variant: normal;
+	text-transform: none;
+	line-height: 1;
+
+	/* Better Font Rendering =========== */
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.icon-uni42:before {
+	content: "\43";
+}
+.icon-uni43:before {
+	content: "\44";
+}
+.icon-uni47:before {
+	content: "\47";
+}
+.icon-uni4D:before {
+	content: "\4d";
+}
+.icon-uni4E:before {
+	content: "\4e";
+}
+.icon-uni4F:before {
+	content: "\4f";
+}
+.icon-uni50:before {
+	content: "\50";
+}
+.icon-uni52:before {
+	content: "\52";
+}
+.icon-uni53:before {
+	content: "\53";
+}
+.icon-uni54:before {
+	content: "\54";
+}
+.icon-uni55:before {
+	content: "\55";
+}
+.icon-uni56:before {
+	content: "\56";
+}
+.icon-uni57:before {
+	content: "\57";
+}
+.icon-uni58:before {
+	content: "\58";
+}
+.icon-uni59:before {
+	content: "\59";
+}
+.icon-uni5A:before {
+	content: "\5a";
+}
+.icon-uni61:before {
+	content: "\61";
+}
+.icon-uni62:before {
+	content: "\62";
+}
+.icon-uni63:before {
+	content: "\63";
+}
+.icon-uni64:before {
+	content: "\64";
+}
+.icon-uni65:before {
+	content: "\65";
+}
+.icon-uni66:before {
+	content: "\66";
+}
+.icon-uni67:before {
+	content: "\67";
+}
+.icon-uni68:before {
+	content: "\68";
+}
+.icon-uni69:before {
+	content: "\69";
+}
+.icon-uni6A:before {
+	content: "\6a";
+}
+.icon-uni6B:before {
+	content: "\6b";
+}
+.icon-uni6C:before {
+	content: "\6c";
+}
+.icon-uni6D:before {
+	content: "\6d";
+}
+.icon-uni6F:before {
+	content: "\6f";
+}
+.icon-uni70:before {
+	content: "\70";
+}
+.icon-uni71:before {
+	content: "\71";
+}
+.icon-uni72:before {
+	content: "\72";
+}
+.icon-uni73:before {
+	content: "\73";
+}
+.icon-uni74:before {
+	content: "\74";
+}
+.icon-uni75:before {
+	content: "\75";
+}
+.icon-window:before {
+	content: "\49";
+}
+.icon-monitor:before {
+	content: "\48";
+}
+.icon-upload:before {
+	content: "\42";
+}
+.icon-inbox:before {
+	content: "\41";
+}
+.icon-chart:before {
+	content: "\45";
+}

css/index.css

@@ -0,0 +1,179 @@
+@charset "utf-8";
+@font-face {
+  font-family: 'icomoon';
+  src:url('fonts/icomoon.eot');
+  src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.woff') format('woff'),
+    url('fonts/icomoon.ttf') format('truetype'),
+    url('fonts/icomoon.svg#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+[data-icon]:before {
+  font-family: 'icomoon';
+  content: attr(data-icon);
+  speak: none;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  vertical-align:middle
+}
+ul, ol, li{
+  line-height:normal;
+  list-style-image:none;
+  list-style-position:outside;
+  list-style-type:none;
+  margin:0
+}
+dl {
+  margin:0
+}
+dd {
+  margin-left:0
+}
+body{
+  font: 12px/1.5 tahoma,arial,'Hiragino Sans GB',"微软雅黑",sans-serif;
+}a {
+  outline:none;
+} 
+
+a {
+  color: #0088cc;
+  text-decoration: none;
+}
+a:hover,
+a:focus {
+  color: #005580;
+  text-decoration:none;
+}
+.taC,td.taC,th.taC{text-align: center;}
+.taR,td.taR,th.taR{text-align:right;}
+.fL{float:left}
+.fR{float:right}
+.width960{
+  width:960px;
+  margin:0 auto;
+}
+.colRed {color:#f70000}
+.colOrange {color:#ed8b00}
+.colYel {color:#d9a601}
+.colGreen{color:#17ab0c}
+.colGray{color:#999}
+.colBlue{color:#3172d9}
+.indexNav {
+  height:45px;
+  background:#CFD37A;
+  position:fixed;
+  top:0;
+  width:100%;
+  padding:10px 0;
+  z-index: 99
+}
+.indexNav .inav {
+  margin:0 0 0 20px;
+}
+.indexNav .inav li {
+  float:left;
+  margin:0 20px 0 0;
+  line-height: 40px
+}
+.indexNav .inav li a{
+  color:#fff;
+  border:1px solid #CFD37A;
+  padding:2px 6px;
+}
+.indexNav .inav li a:hover{
+  color:#f5f5f5;
+  text-decoration: none;
+}
+.indexNav .inav li.active a{
+  border:1px solid #fff;
+  border-radius: 3px;
+}
+.indexNav .inav li.mlogo a{
+  padding:0;
+}
+.indexNav .inav li.mlogo.active a{
+  border:1px solid #CFD37A;
+  padding:0;
+}
+.indexNav .menBtn {
+  text-align: right;
+}
+.indexNav .menBtn li{
+  display: inline-block;
+}
+.indexNav .menBtn a{
+  background: transparent;
+  color: #fff;
+  border: 1px solid #fff;
+  padding: 3px 12px;
+  border-radius: 5px;
+}
+.indexNav .menBtn a:hover{
+  text-decoration: none;
+  background:none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
+}
+.indexNav .menBtn a.login{
+  color:#bdc15f;
+  background:#fff;
+}
+.indexNav .menBtn a.login:hover{
+  background: none repeat scroll 0 0 #f5f6e4
+}
+.warpIndex .topBanner{
+  background:#CFD37A;
+  text-align: center;
+  margin-top:65px;
+  position: relative;
+  vertical-align: middle;
+}
+.topBanner img{
+  position: absolute;
+  bottom:0;
+  left:50%;
+  margin:0 0 0 -480px;
+  z-index: 0
+}
+.warpIndex .topBanner .width960{
+  padding:15% 0 0 0;
+  z-index:0
+}
+.warpIndex .topBanner h1{
+  z-index: 1;
+  position: relative;
+  color:#fff;
+  font-weight: normal;
+  font-size:52px;
+  margin-bottom:20px;
+}
+.warpIndex .topBanner p{
+  z-index: 1;
+  position: relative;
+  color:#fff;
+  font-size:22px;
+  margin:0 0 30px 0;
+  line-height: 34px;
+  display: block
+}
+.warpIndex .topBanner p a{
+  color:#fff;
+  padding:12px 24px;
+  border:1px solid #fff;
+  border-radius: 5px;
+  font-size:16px;
+  margin:10px;
+} 
+.warpIndex .topBanner p a:hover{
+  text-decoration: none;
+  background:none repeat scroll 0 0 rgba(255, 255, 255, 0.1);
+}
+.warpIndex .topBanner p a.login{
+  background: #fff;
+  color:#bdc15f;
+}
+.warpIndex .topBanner p a.login:hover{
+  background: none repeat scroll 0 0 #f5f6e4
+}

css/style.css

@@ -0,0 +1,417 @@
+@charset "utf-8";
+@font-face {
+  font-family: 'icomoon';
+  src:url('fonts/icomoon.eot');
+  src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.woff') format('woff'),
+    url('fonts/icomoon.ttf') format('truetype'),
+    url('fonts/icomoon.svg#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+[data-icon]:before {
+  font-family: 'icomoon';
+  content: attr(data-icon);
+  speak: none;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  -webkit-font-smoothing: antialiased;
+  vertical-align:middle
+}
+ul, ol, li{
+  line-height:normal;
+  list-style-image:none;
+  list-style-position:outside;
+  list-style-type:none;
+  margin:0
+}
+dl {
+  margin:0
+}
+dd {
+  margin-left:0
+}
+body{
+  font-size:62.5%;
+}
+html, form, fieldset, a, ul, ol, li, div, legend, label,
+br, input, button, textarea, h1, h2, h3, h4, h5,em{
+  padding: 0;
+  margin: 0;
+  font-weight: normal;
+  font-style: normal;
+  font-family:"微软雅黑","Tahoma";
+  vertical-align: baseline;
+  text-align:justify;
+  word-wrap:break-word;
+  text-justify:inter-ideograph
+}
+body{text-align:center}
+a {
+  outline:none;
+} 
+
+a {
+  color: #0088cc;
+  text-decoration: none;
+}
+a:hover,
+a:focus {
+  color: #005580;
+  text-decoration:none;
+}
+.taC,td.taC,th.taC{text-align: center;}
+.taR,td.taR,th.taR{text-align:right;}
+.fL{float:left}
+.fR{float:right}
+.width960{
+  width:960px;
+  margin:0 auto;
+}
+.colRed {color:#f70000}
+.colOrange {color:#ed8b00}
+.colYel {color:#d9a601}
+.colGreen{color:#17ab0c}
+.colGray{color:#999}
+.colBlue{color:#3172d9}
+.wrapHeader{
+  height:4rem;
+  background:url(headerBg.jpg) repeat-x 0 0;
+}
+.headerTop{
+  height:0.4rem;
+  background:#CFD37A;
+}
+.wrapForm{
+  margin:0 auto;
+}
+.wrapForm .headerTitle{
+  padding:4rem 0 2rem 0;
+  font-size: 3.2rem;
+  text-align: center;
+}
+.formCon{
+  margin:0 1rem;
+}
+.formCon label{
+  margin:0.5rem 0;
+  font-size: 1.6rem;
+}
+.formCon input{
+  width:100%;
+  padding:0;
+  height:4rem;
+  line-height: 4rem;
+  text-indent: 0.5rem;
+}
+.formCon button{
+  margin:1rem 0 1rem 0;
+  width:100%;
+  height:4rem;
+  line-height: 3.2rem;
+}
+.wrapTop{
+  height:4rem;
+  background:url(headerBg.jpg) repeat-x 0 0;
+}
+.wrapTop .mainLogo{
+  width:20rem;
+  height:4rem;
+  line-height: 4rem;
+  background:url(logo.png) no-repeat 0 0;
+}
+.wrapTop .userInfo{
+  padding:0 1rem;
+  font-size: 1.8rem;
+  color:#fff;
+}
+.wrapTop #dropdownMenu{
+  position:absolute;
+  left:-11rem;
+}
+.wrapTop #dropdownMenu a{
+  color:#333;
+}
+.wrapTop .userInfo{
+  padding:1rem 1rem 0 1rem;
+}
+.wrapTop .userInfo a{
+  color:#fff;
+}
+.wrapTop .userInfo .topImg{
+  padding:0 0 0 1rem;
+}
+.mainNav{
+  margin:0 1rem;
+}
+.mainNav ul li{
+  padding:1rem 0;
+  border-bottom:1px solid #ddd; 
+}
+.mainNav .projectImg{
+  margin:0 1.5rem 0 0;
+  width:5rem;
+  height:5rem;
+  background:#f0f0f0;
+  border-radius: 5px;
+  text-align: center;
+}
+.navIcon{
+  line-height: 4.3rem;
+  font-size: 3.2rem;
+  color:#333;
+}
+.projectRight{
+  margin:0 0 0 6.5rem;
+}
+.projectRight h4{
+  padding:0.8rem 0 0.3rem 0;
+  color:#333;
+}
+.projectRight p{
+  padding:0.3rem 0;
+  color:#333;
+}
+.mainNav ul li{
+  position:relative;
+}
+.badge{
+  position:absolute;
+  left:3.2rem;
+  top:1.3rem;
+}
+.headerLeft{
+  padding:0.7rem 0 0 1rem;
+  font-size: 2rem;
+}
+.headerLeft a{
+  color:#fff;
+}
+.wrapContent .projectFrom{
+  padding:1.5rem;
+}
+.wrapContent .project h3{
+  padding:1.5rem;
+}
+.project ul li{
+  background:#f7f7f7;
+  padding:0 1.5rem;
+  margin-bottom: 2rem;
+  border-top: 1px solid #eaeaea;
+  border-bottom: 1px solid #eaeaea;
+}
+.project ul li a{
+  color:#333;
+}
+.project ul li p{
+  font-size: 1.4rem;
+}
+.project ul li .title{
+  padding:1rem 0 1rem 0;
+  font-size: 2rem;
+  color:#0088cc;
+}
+.wrapNav ul li{
+  width:50%;
+}
+.wrapNav ul li a{
+  width:100%;
+  font-size: 1.6rem;
+  text-align: center;
+  padding:10px 0;
+}
+.wrapNavR ul li{
+  width:33.3333% !important;
+}
+.wrapContent .proSection{
+  padding:1.5rem;
+}
+.wrapGraphic ul li{
+  float:left;
+  font-size: 1.2rem;
+  margin:1.5rem 0 1.5rem 1.8rem;
+}
+.graphic{
+  width:1rem;
+  height:1rem;
+  border-radius: 0.2rem;
+  display:inline-block;
+}
+.graphicGreen{
+  background:#31c514;
+}
+.graphicBlue{
+  background:#1480c5;
+}
+.graphicGray{
+  background:#adadad;
+}
+.graphicRed{
+  background:#ff0042;
+}
+.projectSeList ul li{
+  margin-bottom: 2rem;
+}
+.projectSection{
+  background:#f7f7f7;
+  font-size: 1.4rem;
+  padding:1rem 1.5rem;
+  border-top: 1px solid #eaeaea;
+  border-bottom: 1px solid #eaeaea;
+}
+.projectSection .title{
+  padding:1rem 0 1rem 0;
+  font-size: 2rem;
+}
+.projectList .openPro{
+  width:100%;
+  background:#e4e4e4;
+  color:#333;
+  padding:0.5rem 0;
+  text-align: center;
+  font-size: 1.4rem;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+  cursor: pointer;
+}
+.projectList .projectDetail{
+  position:relative;
+  margin:1.5rem;
+  font-size: 1.4rem;
+  color:#333;
+  border-bottom: 1px solid #ddd;
+}
+.projectDetail .title{
+  padding:0 0 1rem 0;
+  font-size: 1.6rem;
+  color:#0088cc;
+}
+.projectDetail p{
+  color:#333;
+}
+.projectDetail .trialTip{
+  position:absolute;
+  right:2rem;
+  top:2rem;
+}
+.projectDetailNot{
+  display:none;
+}
+.openProNot{
+  display:none;
+}
+.mT2{
+  margin:2rem 0 0 0;
+}
+.progress-gary, .progress .progress-gary {
+    background-color: #bbb;
+    background-image: -moz-linear-gradient(top, #ccc, #bbb);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ccc), to(#bbb));
+    background-image: -webkit-linear-gradient(top, #ccc, #bbb);
+    background-image: -o-linear-gradient(top, #ccc, #bbb);
+    background-image: linear-gradient(to bottom, #ccc, #bbb);
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccc', endColorstr='#bbb', GradientType=0);
+}
+.projectTable{
+  font-size: 1.4rem;
+  margin-bottom: 2.5rem;
+  border-top: 1px solid #ddd;
+  border-bottom: 1px solid #ddd;
+}
+.projectTable dt{
+  padding:1rem;
+  background:#f0f0f0;
+}
+.projectTable dd b{
+  font-size: 1.6rem;
+}
+.projectTable .table{
+  margin:0;
+}
+.project .filesList ul li{
+  margin:2rem 0 0 0;
+  padding:1rem 1.5rem;
+}
+.filesList .filesListTitle{
+  font-size: 1.8rem;
+  padding:0 0 1rem 0;
+  color:#0088cc;
+}
+.filesDetail{
+  margin:0 1rem;
+  font-size: 1.4rem;
+}
+.filesDetail dt{
+  padding:1.5rem 0;
+  border-bottom: 1px solid #ddd;
+}
+.filesDetail dd{
+  padding:1rem 0;
+  border-bottom: 1px solid #ddd;
+}
+.btnOrange{
+  background:#ed8b00;
+  color:#fff;
+  border:1px solid #ed8b00;
+}
+.btnOrange:hover,.btnOrange:focus,.btnOrange:active{
+  background:#ed8b00;
+  color:#fff;
+  border:1px solid #ed8b00;
+}
+.approvalList{
+  margin-bottom: 4.5rem;
+}
+.approvalList ul li{
+  font-size: 1.4rem;
+  padding:1rem;
+  border-bottom: 1px solid #ddd;
+}
+.approvalList .approvalView{
+  padding:1rem 0 0 0;
+}
+.approvalList .approvalImg img{
+  margin:0 1rem 0 0;
+  border:2px solid #ddd;
+  border-radius: 3px;
+}
+.pass{border-color: #009d0e !important;}
+.wait{border-color: #ff9900 !important;}
+.pa2ss{border-color: #999 !important;}
+.unpass{border-color: #f00 !important;}
+.approvalImg .fR{
+  margin-top: 1rem;
+}
+.bottomToolsbar{
+  position:fixed;
+  bottom:0;
+  width:100%;
+  height:3.5rem;
+}
+.bottomToolsbar ul li{
+  float:left;
+  width:50%;
+  height:3.5rem;
+  line-height: 3.5rem;
+  text-align: center;
+}
+.bottomToolsbar ul li button{
+  width:100%;
+  text-align:center;
+  border:none;
+}
+.bottomView{
+  width:100%;
+  background:#fff;
+  display:none;
+}
+.bottomView form{
+  margin:1rem; 
+}
+.bottomView form label{
+  font-size: 1.4rem;
+  margin-bottom: 0.5rem;
+}

index.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+    <script src=js/bootstrap.js></script> 
+    <script src=js/global.js></script>
+</head>
+<body>
+    <div class="wrapTop">
+        <div class="userInfo fR">
+            <div class="dropdown">
+                <div class="dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <span class="glyphicon glyphicon-option-vertical topImg"></span>
+                </div>
+                <ul class="dropdown-menu" id="dropdownMenu" aria-labelledby="dropdownMenu1">
+                    <li><a href="#">张三</a></li>
+                    <li><a href="#">退出</a></li>
+                </ul>
+            </div>
+        </div>
+        <h1 title="纵横计量支付" class="mainLogo"></h1>
+    </div>
+    <div class="wrapContent">
+        <div class="mainNav">
+            <ul>
+                <li class="clearfix">
+                    <a href="w-project.html" class="focus">
+                        <div class="projectImg fL"><b data-icon="A" aria-hidden="true" class="navIcon"></b></div>
+                        <div class="projectRight">
+                            <h4>项目管理</h4>
+                            <p>这些是您创建的项目</p>
+                        </div>
+                    </a>
+                </li>
+                <li class="clearfix">
+                    <a href="r-project.html" class="focus">
+                        <div class="projectImg fL"><b data-icon="C" aria-hidden="true" class="navIcon"></b><span class="badge">3</span></div>
+                        <div class="projectRight">
+                            <h4>审批项目</h4>
+                            <p>这些是您审批的项目</p>
+                        </div>
+                    </a>
+                </li>
+                <li class="clearfix">
+                    <a href="s-project.html" class="focus">
+                        <div class="projectImg fL"><b data-icon="B" aria-hidden="true" class="navIcon"></b></div>
+                        <div class="projectRight">
+                            <h4>编制项目</h4>
+                            <p>这是来自您软件编制的项目</p>
+                        </div>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</body>

js/bootstrap-scrollspy.js

@@ -0,0 +1,162 @@
+/* =============================================================
+ * bootstrap-scrollspy.js v2.3.2
+ * http://twitter.github.com/bootstrap/javascript.html#scrollspy
+ * =============================================================
+ * Copyright 2012 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============================================================== */
+
+
+!function ($) {
+
+  "use strict"; // jshint ;_;
+
+
+ /* SCROLLSPY CLASS DEFINITION
+  * ========================== */
+
+  function ScrollSpy(element, options) {
+    var process = $.proxy(this.process, this)
+      , $element = $(element).is('body') ? $(window) : $(element)
+      , href
+    this.options = $.extend({}, $.fn.scrollspy.defaults, options)
+    this.$scrollElement = $element.on('scroll.scroll-spy.data-api', process)
+    this.selector = (this.options.target
+      || ((href = $(element).attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')) //strip for ie7
+      || '') + ' .inav li > a'
+    this.$body = $('body')
+    this.refresh()
+    this.process()
+  }
+
+  ScrollSpy.prototype = {
+
+      constructor: ScrollSpy
+
+    , refresh: function () {
+        var self = this
+          , $targets
+
+        this.offsets = $([])
+        this.targets = $([])
+
+        $targets = this.$body
+          .find(this.selector)
+          .map(function () {
+            var $el = $(this)
+              , href = $el.data('target') || $el.attr('href')
+              , $href = /^#\w/.test(href) && $(href)
+            return ( $href
+              && $href.length
+              && [[ $href.position().top + (!$.isWindow(self.$scrollElement.get(0)) && self.$scrollElement.scrollTop()), href ]] ) || null
+          })
+          .sort(function (a, b) { return a[0] - b[0] })
+          .each(function () {
+            self.offsets.push(this[0])
+            self.targets.push(this[1])
+          })
+      }
+
+    , process: function () {
+        var scrollTop = this.$scrollElement.scrollTop() + this.options.offset
+          , scrollHeight = this.$scrollElement[0].scrollHeight || this.$body[0].scrollHeight
+          , maxScroll = scrollHeight - this.$scrollElement.height()
+          , offsets = this.offsets
+          , targets = this.targets
+          , activeTarget = this.activeTarget
+          , i
+
+        if (scrollTop >= maxScroll) {
+          return activeTarget != (i = targets.last()[0])
+            && this.activate ( i )
+        }
+
+        for (i = offsets.length; i--;) {
+          activeTarget != targets[i]
+            && scrollTop >= offsets[i]
+            && (!offsets[i + 1] || scrollTop <= offsets[i + 1])
+            && this.activate( targets[i] )
+        }
+      }
+
+    , activate: function (target) {
+        var active
+          , selector
+
+        this.activeTarget = target
+
+        $(this.selector)
+          .parent('.active')
+          .removeClass('active')
+
+        selector = this.selector
+          + '[data-target="' + target + '"],'
+          + this.selector + '[href="' + target + '"]'
+
+        active = $(selector)
+          .parent('li')
+          .addClass('active')
+
+        if (active.parent('.dropdown-menu').length)  {
+          active = active.closest('li.dropdown').addClass('active')
+        }
+
+        active.trigger('activate')
+      }
+
+  }
+
+
+ /* SCROLLSPY PLUGIN DEFINITION
+  * =========================== */
+
+  var old = $.fn.scrollspy
+
+  $.fn.scrollspy = function (option) {
+    return this.each(function () {
+      var $this = $(this)
+        , data = $this.data('scrollspy')
+        , options = typeof option == 'object' && option
+      if (!data) $this.data('scrollspy', (data = new ScrollSpy(this, options)))
+      if (typeof option == 'string') data[option]()
+    })
+  }
+
+  $.fn.scrollspy.Constructor = ScrollSpy
+
+  $.fn.scrollspy.defaults = {
+    offset: 10
+  }
+
+
+ /* SCROLLSPY NO CONFLICT
+  * ===================== */
+
+  $.fn.scrollspy.noConflict = function () {
+    $.fn.scrollspy = old
+    return this
+  }
+
+
+ /* SCROLLSPY DATA-API
+  * ================== */
+
+  $(window).on('load', function () {
+    $('[data-spy="scroll"]').each(function () {
+      var $spy = $(this)
+      $spy.scrollspy($spy.data())
+    })
+  })
+
+}(window.jQuery);

js/global.js

@@ -0,0 +1,20 @@
+$(function(){
+  $(function () {
+    $('[data-toggle="tooltip"]').tooltip()
+  });
+  $('.dropdown-toggle').dropdown();
+
+  $(".openPro").click(function(){
+    if($(".projectDetailNot").css("display")=="none"){
+      $(this).text("隐藏所有标段");
+      $(this).siblings(".projectDetailNot").slideDown();
+    }else{
+      $(this).text("展开所有标段");
+      $(this).siblings(".projectDetailNot").slideUp();
+    }
+  });
+  // $(".submit").click(function(){
+  //   $(".bottomView").show();
+  // });
+});
+

js/jquery.fixedheadertable.js

@@ -0,0 +1,706 @@
+/*!
+ * jquery.fixedHeaderTable. The jQuery fixedHeaderTable plugin
+ *
+ * Copyright (c) 2013 Mark Malek
+ * http://fixedheadertable.com
+ *
+ * Licensed under MIT
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * http://docs.jquery.com/Plugins/Authoring
+ * jQuery authoring guidelines
+ *
+ * Launch  : October 2009
+ * Version : 1.3
+ * Released: May 9th, 2011
+ *
+ *
+ * all CSS sizing (width,height) is done in pixels (px)
+ */
+
+(function ($) {
+
+  $.fn.fixedHeaderTable = function (method) {
+
+    // plugin's default options
+    var defaults = {
+      width:          '100%',
+      height:         '100%',
+      themeClass:     'fht-default',
+      borderCollapse:  true,
+      fixedColumns:    0, // fixed first columns
+      fixedColumn:     false, // For backward-compatibility
+      sortable:        false,
+      autoShow:        true, // hide table after its created
+      footer:          false, // show footer
+      cloneHeadToFoot: false, // clone head and use as footer
+      autoResize:      false, // resize table if its parent wrapper changes size
+      create:          null // callback after plugin completes
+    };
+
+    var settings = {};
+
+    // public methods
+    var methods = {
+      init: function (options) {
+        settings = $.extend({}, defaults, options);
+
+        // iterate through all the DOM elements we are attaching the plugin to
+        return this.each(function () {
+          var $self = $(this); // reference the jQuery version of the current DOM element
+
+          if (helpers._isTable($self)) {
+            methods.setup.apply(this, Array.prototype.slice.call(arguments, 1));
+            $.isFunction(settings.create) && settings.create.call(this);
+          } else {
+            $.error('Invalid table mark-up');
+          }
+        });
+      },
+
+      /*
+       * Setup table structure for fixed headers and optional footer
+       */
+      setup: function () {
+        var $self       = $(this),
+            self        = this,
+            $thead      = $self.find('thead'),
+            $tfoot      = $self.find('tfoot'),
+            tfootHeight = 0,
+            $wrapper,
+            $divHead,
+            $divBody,
+            $fixedBody,
+            widthMinusScrollbar;
+
+        settings.originalTable = $(this).clone();
+        settings.includePadding = helpers._isPaddingIncludedWithWidth();
+        settings.scrollbarOffset = helpers._getScrollbarWidth();
+        settings.themeClassName = settings.themeClass;
+
+        if (settings.width.search('%') > -1) {
+            widthMinusScrollbar = $self.parent().width() - settings.scrollbarOffset;
+        } else {
+            widthMinusScrollbar = settings.width - settings.scrollbarOffset;
+        }
+
+        $self.css({
+          width: widthMinusScrollbar
+        });
+
+
+        if (!$self.closest('.fht-table-wrapper').length) {
+          $self.addClass('fht-table');
+          $self.wrap('<div class="fht-table-wrapper"></div>');
+        }
+
+        $wrapper = $self.closest('.fht-table-wrapper');
+
+        if(settings.fixedColumn == true && settings.fixedColumns <= 0) {
+          settings.fixedColumns = 1;
+        }
+
+        if (settings.fixedColumns > 0 && $wrapper.find('.fht-fixed-column').length == 0) {
+          $self.wrap('<div class="fht-fixed-body"></div>');
+
+          $('<div class="fht-fixed-column"></div>').prependTo($wrapper);
+
+          $fixedBody    = $wrapper.find('.fht-fixed-body');
+        }
+
+        $wrapper.css({
+          width: settings.width,
+          height: settings.height
+        })
+          .addClass(settings.themeClassName);
+
+        if (!$self.hasClass('fht-table-init')) {
+          $self.wrap('<div class="fht-tbody"></div>');
+        }
+
+        $divBody = $self.closest('.fht-tbody');
+
+        var tableProps = helpers._getTableProps($self);
+
+        helpers._setupClone($divBody, tableProps.tbody);
+
+        if (!$self.hasClass('fht-table-init')) {
+          if (settings.fixedColumns > 0) {
+            $divHead = $('<div class="fht-thead"><table class="fht-table"></table></div>').prependTo($fixedBody);
+          } else {
+            $divHead = $('<div class="fht-thead"><table class="fht-table"></table></div>').prependTo($wrapper);
+          }
+
+          $divHead.find('table.fht-table')
+            .addClass(settings.originalTable.attr('class'))
+            .attr('style', settings.originalTable.attr('style'));
+
+          $thead.clone().appendTo($divHead.find('table'));
+        } else {
+          $divHead = $wrapper.find('div.fht-thead');
+        }
+
+        helpers._setupClone($divHead, tableProps.thead);
+
+        $self.css({
+          'margin-top': -$divHead.outerHeight(true)
+        });
+
+        /*
+         * Check for footer
+         * Setup footer if present
+         */
+        if (settings.footer == true) {
+          helpers._setupTableFooter($self, self, tableProps);
+
+          if (!$tfoot.length) {
+            $tfoot = $wrapper.find('div.fht-tfoot table');
+          }
+
+          tfootHeight = $tfoot.outerHeight(true);
+        }
+
+        var tbodyHeight = $wrapper.height() - $thead.outerHeight(true) - tfootHeight - tableProps.border;
+
+        $divBody.css({
+          'height': tbodyHeight
+        });
+
+        $self.addClass('fht-table-init');
+
+        if (typeof(settings.altClass) !== 'undefined') {
+          methods.altRows.apply(self);
+        }
+
+        if (settings.fixedColumns > 0) {
+          helpers._setupFixedColumn($self, self, tableProps);
+        }
+
+        if (!settings.autoShow) {
+          $wrapper.hide();
+        }
+
+        helpers._bindScroll($divBody, tableProps);
+
+        return self;
+      },
+
+      /*
+       * Resize the table
+       * Incomplete - not implemented yet
+       */
+      resize: function() {
+        var self  = this;
+        return self;
+      },
+
+      /*
+       * Add CSS class to alternating rows
+       */
+      altRows: function(arg1) {
+        var $self = $(this),
+        altClass  = (typeof(arg1) !== 'undefined') ? arg1 : settings.altClass;
+
+        $self.closest('.fht-table-wrapper')
+          .find('tbody tr:odd:not(:hidden)')
+          .addClass(altClass);
+      },
+
+      /*
+       * Show a hidden fixedHeaderTable table
+       */
+      show: function(arg1, arg2, arg3) {
+        var $self   = $(this),
+            self      = this,
+            $wrapper  = $self.closest('.fht-table-wrapper');
+
+        // User provided show duration without a specific effect
+        if (typeof(arg1) !== 'undefined' && typeof(arg1) === 'number') {
+          $wrapper.show(arg1, function() {
+            $.isFunction(arg2) && arg2.call(this);
+          });
+
+          return self;
+
+        } else if (typeof(arg1) !== 'undefined' && typeof(arg1) === 'string' &&
+          typeof(arg2) !== 'undefined' && typeof(arg2) === 'number') {
+          // User provided show duration with an effect
+
+          $wrapper.show(arg1, arg2, function() {
+            $.isFunction(arg3) && arg3.call(this);
+          });
+
+          return self;
+
+        }
+
+        $self.closest('.fht-table-wrapper')
+          .show();
+        $.isFunction(arg1) && arg1.call(this);
+
+        return self;
+      },
+
+      /*
+       * Hide a fixedHeaderTable table
+       */
+      hide: function(arg1, arg2, arg3) {
+        var $self     = $(this),
+            self    = this,
+            $wrapper  = $self.closest('.fht-table-wrapper');
+
+        // User provided show duration without a specific effect
+        if (typeof(arg1) !== 'undefined' && typeof(arg1) === 'number') {
+          $wrapper.hide(arg1, function() {
+            $.isFunction(arg3) && arg3.call(this);
+          });
+
+          return self;
+        } else if (typeof(arg1) !== 'undefined' && typeof(arg1) === 'string' &&
+          typeof(arg2) !== 'undefined' && typeof(arg2) === 'number') {
+
+          $wrapper.hide(arg1, arg2, function() {
+            $.isFunction(arg3) && arg3.call(this);
+          });
+
+          return self;
+        }
+
+        $self.closest('.fht-table-wrapper')
+          .hide();
+
+        $.isFunction(arg3) && arg3.call(this);
+
+
+
+        return self;
+      },
+
+      /*
+       * Destory fixedHeaderTable and return table to original state
+       */
+      destroy: function() {
+        var $self    = $(this),
+            self     = this,
+            $wrapper = $self.closest('.fht-table-wrapper');
+
+        $self.insertBefore($wrapper)
+          .removeAttr('style')
+          .append($wrapper.find('tfoot'))
+          .removeClass('fht-table fht-table-init')
+          .find('.fht-cell')
+          .remove();
+
+        $wrapper.remove();
+
+        return self;
+      }
+
+    };
+
+    // private methods
+    var helpers = {
+
+      /*
+       * return boolean
+       * True if a thead and tbody exist.
+       */
+      _isTable: function($obj) {
+        var $self = $obj,
+            hasTable = $self.is('table'),
+            hasThead = $self.find('thead').length > 0,
+            hasTbody = $self.find('tbody').length > 0;
+
+        if (hasTable && hasThead && hasTbody) {
+          return true;
+        }
+
+        return false;
+
+      },
+
+      /*
+       * return void
+       * bind scroll event
+       */
+      _bindScroll: function($obj) {
+        var $self = $obj,
+            $wrapper = $self.closest('.fht-table-wrapper'),
+            $thead = $self.siblings('.fht-thead'),
+            $tfoot = $self.siblings('.fht-tfoot');
+
+        $self.bind('scroll', function() {
+          if (settings.fixedColumns > 0) {
+            var $fixedColumns = $wrapper.find('.fht-fixed-column');
+
+            $fixedColumns.find('.fht-tbody table')
+              .css({
+                  'margin-top': -$self.scrollTop()
+              });
+          }
+
+          $thead.find('table')
+            .css({
+              'margin-left': -this.scrollLeft
+            });
+
+          if (settings.footer || settings.cloneHeadToFoot) {
+            $tfoot.find('table')
+              .css({
+                'margin-left': -this.scrollLeft
+              });
+          }
+        });
+      },
+
+      /*
+       * return void
+       */
+      _fixHeightWithCss: function ($obj, tableProps) {
+        if (settings.includePadding) {
+          $obj.css({
+            'height': $obj.height() + tableProps.border
+          });
+        } else {
+          $obj.css({
+            'height': $obj.parent().height() + tableProps.border
+          });
+        }
+      },
+
+      /*
+       * return void
+       */
+      _fixWidthWithCss: function($obj, tableProps, width) {
+        if (settings.includePadding) {
+          $obj.each(function() {
+            $(this).css({
+              'width': width == undefined ? $(this).width() + tableProps.border : width + tableProps.border
+            });
+          });
+        } else {
+          $obj.each(function() {
+            $(this).css({
+              'width': width == undefined ? $(this).parent().width() + tableProps.border : width + tableProps.border
+            });
+          });
+        }
+
+      },
+
+      /*
+       * return void
+       */
+      _setupFixedColumn: function ($obj, obj, tableProps) {
+        var $self             = $obj,
+            $wrapper          = $self.closest('.fht-table-wrapper'),
+            $fixedBody        = $wrapper.find('.fht-fixed-body'),
+            $fixedColumn      = $wrapper.find('.fht-fixed-column'),
+            $thead            = $('<div class="fht-thead"><table class="fht-table"><thead><tr></tr></thead></table></div>'),
+            $tbody            = $('<div class="fht-tbody"><table class="fht-table"><tbody></tbody></table></div>'),
+            $tfoot            = $('<div class="fht-tfoot"><table class="fht-table"><tfoot><tr></tr></tfoot></table></div>'),
+            fixedBodyWidth    = $wrapper.width(),
+            fixedBodyHeight   = $fixedBody.find('.fht-tbody').height() - settings.scrollbarOffset,
+            $firstThChildren,
+            $firstTdChildren,
+            fixedColumnWidth,
+            $newRow,
+            firstTdChildrenSelector;
+
+        $thead.find('table.fht-table').addClass(settings.originalTable.attr('class'));
+        $tbody.find('table.fht-table').addClass(settings.originalTable.attr('class'));
+        $tfoot.find('table.fht-table').addClass(settings.originalTable.attr('class'));
+
+        $firstThChildren = $fixedBody.find('.fht-thead thead tr > *:lt(' + settings.fixedColumns + ')');
+        fixedColumnWidth = settings.fixedColumns * tableProps.border;
+        $firstThChildren.each(function() {
+          fixedColumnWidth += $(this).outerWidth(true);
+        });
+
+        // Fix cell heights
+        helpers._fixHeightWithCss($firstThChildren, tableProps);
+        helpers._fixWidthWithCss($firstThChildren, tableProps);
+
+        var tdWidths = [];
+        $firstThChildren.each(function() {
+          tdWidths.push($(this).width());
+        });
+
+        firstTdChildrenSelector = 'tbody tr > *:not(:nth-child(n+' + (settings.fixedColumns + 1) + '))';
+        $firstTdChildren = $fixedBody.find(firstTdChildrenSelector)
+          .each(function(index) {
+            helpers._fixHeightWithCss($(this), tableProps);
+            helpers._fixWidthWithCss($(this), tableProps, tdWidths[index % settings.fixedColumns] );
+          });
+
+        // clone header
+        $thead.appendTo($fixedColumn)
+          .find('tr')
+          .append($firstThChildren.clone());
+
+        $tbody.appendTo($fixedColumn)
+          .css({
+            'margin-top': -1,
+            'height': fixedBodyHeight + tableProps.border
+          });
+
+        $firstTdChildren.each(function(index) {
+          if (index % settings.fixedColumns == 0) {
+            $newRow = $('<tr></tr>').appendTo($tbody.find('tbody'));
+
+            if (settings.altClass && $(this).parent().hasClass(settings.altClass)) {
+              $newRow.addClass(settings.altClass);
+            }
+          }
+
+          $(this).clone()
+            .appendTo($newRow);
+        });
+
+        // set width of fixed column wrapper
+        $fixedColumn.css({
+          'height': 0,
+          'width': fixedColumnWidth
+        });
+
+
+        // bind mousewheel events
+        var maxTop = $fixedColumn.find('.fht-tbody .fht-table').height() - $fixedColumn.find('.fht-tbody').height();
+        $fixedColumn.find('.fht-tbody .fht-table').bind('mousewheel', function(event, delta, deltaX, deltaY) {
+          if (deltaY == 0) {
+            return;
+          }
+          var top = parseInt($(this).css('marginTop'), 10) + (deltaY > 0 ? 120 : -120);
+          if (top > 0) {
+            top = 0;
+          }
+          if (top < -maxTop) {
+            top = -maxTop;
+          }
+          $(this).css('marginTop', top);
+          $fixedBody.find('.fht-tbody').scrollTop(-top).scroll();
+          return false;
+        });
+
+
+        // set width of body table wrapper
+        $fixedBody.css({
+          'width': fixedBodyWidth
+        });
+
+        // setup clone footer with fixed column
+        if (settings.footer == true || settings.cloneHeadToFoot == true) {
+          var $firstTdFootChild = $fixedBody.find('.fht-tfoot tr > *:lt(' + settings.fixedColumns + ')'),
+              footwidth;
+
+          helpers._fixHeightWithCss($firstTdFootChild, tableProps);
+          $tfoot.appendTo($fixedColumn)
+            .find('tr')
+            .append($firstTdFootChild.clone());
+          // Set (view width) of $tfoot div to width of table (this accounts for footers with a colspan)
+          footwidth = $tfoot.find('table').innerWidth();
+          $tfoot.css({
+            'top': settings.scrollbarOffset,
+            'width': footwidth
+          });
+        }
+      },
+
+      /*
+       * return void
+       */
+      _setupTableFooter: function ($obj, obj, tableProps) {
+        var $self     = $obj,
+            $wrapper  = $self.closest('.fht-table-wrapper'),
+            $tfoot    = $self.find('tfoot'),
+            $divFoot  = $wrapper.find('div.fht-tfoot');
+
+        if (!$divFoot.length) {
+          if (settings.fixedColumns > 0) {
+            $divFoot = $('<div class="fht-tfoot"><table class="fht-table"></table></div>').appendTo($wrapper.find('.fht-fixed-body'));
+          } else {
+            $divFoot = $('<div class="fht-tfoot"><table class="fht-table"></table></div>').appendTo($wrapper);
+          }
+        }
+        $divFoot.find('table.fht-table').addClass(settings.originalTable.attr('class'));
+
+        switch (true) {
+          case !$tfoot.length && settings.cloneHeadToFoot == true && settings.footer == true:
+
+            var $divHead = $wrapper.find('div.fht-thead');
+
+            $divFoot.empty();
+            $divHead.find('table')
+              .clone()
+              .appendTo($divFoot);
+
+            break;
+          case $tfoot.length && settings.cloneHeadToFoot == false && settings.footer == true:
+
+            $divFoot.find('table')
+              .append($tfoot)
+              .css({
+                'margin-top': -tableProps.border
+              });
+
+            helpers._setupClone($divFoot, tableProps.tfoot);
+
+            break;
+        }
+
+      },
+
+      /*
+       * return object
+       * Widths of each thead cell and tbody cell for the first rows.
+       * Used in fixing widths for the fixed header and optional footer.
+       */
+      _getTableProps: function($obj) {
+        var tableProp = {
+              thead: {},
+              tbody: {},
+              tfoot: {},
+              border: 0
+            },
+            borderCollapse = 1;
+
+        if (settings.borderCollapse == true) {
+          borderCollapse = 2;
+        }
+
+        tableProp.border = ($obj.find('th:first-child').outerWidth() - $obj.find('th:first-child').innerWidth()) / borderCollapse;
+
+        $obj.find('thead tr:first-child > *').each(function(index) {
+          tableProp.thead[index] = $(this).width() + tableProp.border;
+        });
+
+        $obj.find('tfoot tr:first-child > *').each(function(index) {
+          tableProp.tfoot[index] = $(this).width() + tableProp.border;
+        });
+
+        $obj.find('tbody tr:first-child > *').each(function(index) {
+          tableProp.tbody[index] = $(this).width() + tableProp.border;
+        });
+
+        return tableProp;
+      },
+
+      /*
+       * return void
+       * Fix widths of each cell in the first row of obj.
+       */
+      _setupClone: function($obj, cellArray) {
+        var $self    = $obj,
+            selector = ($self.find('thead').length) ?
+              'thead tr:first-child > *' :
+              ($self.find('tfoot').length) ?
+              'tfoot tr:first-child > *' :
+              'tbody tr:first-child > *',
+            $cell;
+
+        $self.find(selector).each(function(index) {
+          $cell = ($(this).find('div.fht-cell').length) ? $(this).find('div.fht-cell') : $('<div class="fht-cell"></div>').appendTo($(this));
+
+          $cell.css({
+            'width': parseInt(cellArray[index], 10)
+          });
+
+          /*
+           * Fixed Header and Footer should extend the full width
+           * to align with the scrollbar of the body
+           */
+          if (!$(this).closest('.fht-tbody').length && $(this).is(':last-child') && !$(this).closest('.fht-fixed-column').length) {
+            var padding = Math.max((($(this).innerWidth() - $(this).width()) / 2), settings.scrollbarOffset);
+            $(this).css({
+              'padding-right': parseInt($(this).css('padding-right')) + padding + 'px'
+            });
+          }
+        });
+      },
+
+      /*
+       * return boolean
+       * Determine how the browser calculates fixed widths with padding for tables
+       * true if width = padding + width
+       * false if width = width
+       */
+      _isPaddingIncludedWithWidth: function() {
+        var $obj = $('<table class="fht-table"><tr><td style="padding: 10px; font-size: 10px;">test</td></tr></table>'),
+            defaultHeight,
+            newHeight;
+
+        $obj.addClass(settings.originalTable.attr('class'));
+        $obj.appendTo('body');
+
+        defaultHeight = $obj.find('td').height();
+
+        $obj.find('td')
+          .css('height', $obj.find('tr').height());
+
+        newHeight = $obj.find('td').height();
+        $obj.remove();
+
+        if (defaultHeight != newHeight) {
+          return true;
+        } else {
+          return false;
+        }
+
+      },
+
+      /*
+       * return int
+       * get the width of the browsers scroll bar
+       */
+      _getScrollbarWidth: function() {
+        var scrollbarWidth = 0;
+
+        if (!scrollbarWidth) {
+          if (/msie/.test(navigator.userAgent.toLowerCase())) {
+            var $textarea1 = $('<textarea cols="10" rows="2"></textarea>')
+                  .css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body'),
+                $textarea2 = $('<textarea cols="10" rows="2" style="overflow: hidden;"></textarea>')
+                  .css({ position: 'absolute', top: -1000, left: -1000 }).appendTo('body');
+
+            scrollbarWidth = $textarea1.width() - $textarea2.width() + 2; // + 2 for border offset
+            $textarea1.add($textarea2).remove();
+          } else {
+            var $div = $('<div />')
+                  .css({ width: 100, height: 100, overflow: 'auto', position: 'absolute', top: -1000, left: -1000 })
+                  .prependTo('body').append('<div />').find('div')
+                  .css({ width: '100%', height: 200 });
+
+            scrollbarWidth = 100 - $div.width();
+            $div.parent().remove();
+          }
+        }
+
+        return scrollbarWidth;
+      }
+
+    };
+
+
+    // if a method as the given argument exists
+    if (methods[method]) {
+
+      // call the respective method
+      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
+
+      // if an object is given as method OR nothing is given as argument
+    } else if (typeof method === 'object' || !method) {
+
+      // call the initialization method
+      return methods.init.apply(this, arguments);
+
+      // otherwise
+    } else {
+
+      // trigger an error
+      $.error('Method "' +  method + '" does not exist in fixedHeaderTable plugin!');
+
+    }
+
+  };
+
+})(jQuery);

js/jquery.tablesorter.js

@@ -0,0 +1,808 @@
+/*
+ * 
+ * TableSorter 2.0 - Client-side table sorting with ease!
+ * Version 2.0
+ * @requires jQuery v1.1.3
+ * 
+ * Copyright (c) 2007 Christian Bach
+ * Examples and docs at: http://tablesorter.com
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ * 
+ */
+/**
+ *
+ * @description Create a sortable table with multi-column sorting capabilitys
+ * 
+ * @example $('#table').tablesorter();
+ * @desc Create a simple tablesorter interface.
+ *
+ * @example $('#table').tablesorter({ sortList:[[0,0],[1,0]] });
+ * @desc Create a tablesorter interface and sort on the first and secound column in ascending order.
+ * 
+ * @example $('#table').tablesorter({ headers: { 0: { sorter: false}, 1: {sorter: false} } });
+ * @desc Create a tablesorter interface and disableing the first and secound column headers.
+ * 
+ * @example $('#table').tablesorter({ 0: {sorter:"integer"}, 1: {sorter:"currency"} });
+ * @desc Create a tablesorter interface and set a column parser for the first and secound column.
+ * 
+ * 
+ * @param Object settings An object literal containing key/value pairs to provide optional settings.
+ * 
+ * @option String cssHeader (optional) 			A string of the class name to be appended to sortable tr elements in the thead of the table. 
+ * 												Default value: "header"
+ * 
+ * @option String cssAsc (optional) 			A string of the class name to be appended to sortable tr elements in the thead on a ascending sort. 
+ * 												Default value: "headerSortUp"
+ * 
+ * @option String cssDesc (optional) 			A string of the class name to be appended to sortable tr elements in the thead on a descending sort. 
+ * 												Default value: "headerSortDown"
+ * 
+ * @option String sortInitialOrder (optional) 	A string of the inital sorting order can be asc or desc. 
+ * 												Default value: "asc"
+ * 
+ * @option String sortMultisortKey (optional) 	A string of the multi-column sort key. 
+ * 												Default value: "shiftKey"
+ * 
+ * @option String textExtraction (optional) 	A string of the text-extraction method to use. 
+ * 												For complex html structures inside td cell set this option to "complex", 
+ * 												on large tables the complex option can be slow. 
+ * 												Default value: "simple"
+ * 
+ * @option Object headers (optional) 			An array containing the forces sorting rules. 
+ * 												This option let's you specify a default sorting rule. 
+ * 												Default value: null
+ * 
+ * @option Array sortList (optional) 			An array containing the forces sorting rules. 
+ * 												This option let's you specify a default sorting rule. 
+ * 												Default value: null
+ * 
+ * @option Array sortForce (optional) 			An array containing the forces sorting rules. 
+ * 												This option let's you specify a default sorting rule. 
+ * 												Default value: null
+ *  
+ * 
+ * @option Boolean widthFixed (optional) 		Boolean flag indicating if tablesorter should apply fixed widths to the table columns.
+ * 												This is usefull when using the pager companion plugin.
+ * 												This options requires the dimension jquery plugin.
+ * 												Default value: false
+ *
+ * @option Boolean cancelSelection (optional) 	Boolean flag indicating if tablesorter should cancel selection of the table headers text.
+ * 												Default value: true
+ * 
+ * @type jQuery
+ *
+ * @name tablesorter
+ * 
+ * @cat Plugins/Tablesorter
+ * 
+ * @author Christian Bach/christian.bach@polyester.se
+ */
+
+(function($) {
+	$.extend({
+		tablesorter: new function() {
+			
+			var parsers = [], widgets = [];
+			
+			this.defaults = {
+				cssHeader: "header",
+				cssAsc: "headerSortUp",
+				cssDesc: "headerSortDown",
+				sortInitialOrder: "asc",
+				sortMultiSortKey: "shiftKey",
+				sortForce: null,
+				textExtraction: "simple",
+				parsers: {}, 
+				widgets: [],		
+				widgetZebra: {css: ["even","odd"]},
+				headers: {},
+				widthFixed: false,
+				cancelSelection: true,
+				sortList: [],
+				headerList: [],
+				dateFormat: "us",
+				debug: false
+			};
+			
+			/* debuging utils */
+			function benchmark(label,stamp) {
+				log(label + "," + (new Date().getTime() - stamp.getTime()) + "ms");
+			}
+			
+			function log(s) {
+				if (typeof console != "undefined" && typeof console.debug != "undefined") {
+					console.log(s);
+				} else {
+					alert(s);
+				}
+			}
+						
+			/* parsers utils */
+			function buildParserCache(table,$headers) {
+				
+				if(table.config.debug) { var parsersDebug = ""; }
+				
+				var list = [], cells = table.tBodies[0].rows[0].cells, l = cells.length;
+				
+				for (var i=0;i < l; i++) {
+					var p = false;
+					
+					if($.meta && ($($headers[i]).data() && $($headers[i]).data().sorter)  ) {
+					
+						p = getParserById($($headers[i]).data().sorter);	
+					
+					} else if((table.config.headers[i] && table.config.headers[i].sorter)) {
+
+						p = getParserById(table.config.headers[i].sorter);
+					}
+					if(!p) {
+						p = detectParserForColumn(table.config,cells[i]);
+					}
+
+					if(table.config.debug) { parsersDebug += "column:" + i + " parser:" +p.id + "\n"; }
+
+					list.push(p);
+				}
+
+				if(table.config.debug) { log(parsersDebug); }
+
+				return list;
+			};
+			
+			function detectParserForColumn(config,node) {
+				var l = parsers.length;
+				for(var i=1; i < l; i++) {
+					if(parsers[i].is($.trim(getElementText(config,node)))) {
+						return parsers[i];
+					}
+				}
+				
+				// 0 is always the generic parser (text)
+				return parsers[0];
+			}
+			
+			function getParserById(name) {
+				var l = parsers.length;
+				for(var i=0; i < l; i++) {
+					if(parsers[i].id.toLowerCase() == name.toLowerCase()) {	
+						return parsers[i];
+					}
+				}
+				return false;
+			}
+			
+			/* utils */
+			function buildCache(table) {
+				
+				if(table.config.debug) { var cacheTime = new Date(); }
+				
+				var totalRows = (table.tBodies[0] && table.tBodies[0].rows.length) || 0,
+					totalCells = table.tBodies[0].rows[0].cells.length,
+					parsers = table.config.parsers, 
+					cache = {row: [], normalized: []};
+				
+					for (var i=0;i < totalRows; ++i) {
+					
+						/** Add the table data to main data array */
+						var c = table.tBodies[0].rows[i], cols = [];
+					
+						cache.row.push($(c));
+						
+						for(var j=0; j < totalCells; ++j) {
+							cols.push(parsers[j].format(getElementText(table.config,c.cells[j]),table,c.cells[j]));	
+						}
+												
+						cols.push(i); // add position for rowCache
+						cache.normalized.push(cols);
+						cols = null;
+					};
+				
+				if(table.config.debug) { benchmark("Building cache for " + totalRows + " rows:", cacheTime); }
+				
+				return cache;
+			};
+			
+			function getElementText(config,node) {
+				
+				if(!node) return "";
+								
+				var t = "";
+				
+				
+				if(typeof(config.textExtraction) == "function") {
+					t = config.textExtraction(node);
+				} else if(config.textExtraction == "complex") { 
+					t = $(node).text();
+				} else {
+					if(node.childNodes[0] && node.childNodes[0].hasChildNodes()) {
+						t = node.childNodes[0].innerHTML;
+					} else {
+						t = node.innerHTML;
+					}
+				}
+				return t;
+			}
+			
+			function appendToTable(table,cache) {
+				
+				if(table.config.debug) {var appendTime = new Date()}
+				
+				var c = cache, 
+					r = c.row, 
+					n= c.normalized, 
+					totalRows = n.length, 
+					checkCell = (n[0].length-1), 
+					tableBody = $("tbody:first",table).empty();
+					rows = [];
+				
+				for (var i=0;i < totalRows; i++) {
+					 	rows.push(r[n[i][checkCell]]);
+						if(table.config.appender == null) {
+							tableBody.append(r[n[i][checkCell]]);
+						}
+				}	
+
+				if(table.config.appender != null) {
+					table.config.appender(table,rows);	
+				}
+				
+				rows = null;
+				
+				//apply table widgets
+				applyWidget(table);
+				
+				if(table.config.debug) { benchmark("Rebuilt table:", appendTime); }
+			
+			};
+			
+			function buildHeaders(table) {
+				
+				if(table.config.debug) { var time = new Date(); }
+				
+				var meta = ($.meta) ? true : false, tableHeadersRows = [];
+			
+				for(var i = 0; i < table.tHead.rows.length; i++) { tableHeadersRows[i]=0; };
+				
+				$tableHeaders = $(checkCellColSpan(table, tableHeadersRows, 0,table.tHead.rows[0].cells.length));
+		
+				$tableHeaders.each(function(index) {
+							
+					this.count = 0;
+					this.column = index;
+					this.order = formatSortingOrder(table.config.sortInitialOrder);
+					
+					if(checkHeaderMetadata(this) || checkHeaderOptions(table,index)) this.sortDisabled = true;
+					
+					if(!this.sortDisabled) {
+						$(this).addClass(table.config.cssHeader);
+					}
+					
+					// add cell to headerList
+					table.config.headerList[index]= this;
+				});
+				
+				if(table.config.debug) { benchmark("Built headers:", time); log($tableHeaders); }
+				
+				return $tableHeaders;
+				
+			};
+						
+		   	function checkCellColSpan(table, headerArr, row) {
+                var arr = [], r = table.tHead.rows, c = r[row].cells;
+				
+				for(var i=headerArr[row]; i < c.length; i++) {
+					var cell = c[i];
+					
+					if ( cell.colSpan > 1) { 
+						arr = arr.concat(checkCellColSpan(table, headerArr,row+cell.rowSpan));
+					} else  {
+						if(table.tHead.length == 1 || (cell.rowSpan > 1 || !r[row+1])) {
+							arr.push(cell);
+						}
+						headerArr[row] = (i+row);
+					}
+				}
+				return arr;
+			};
+			
+			function checkHeaderMetadata(cell) {
+				if(($.meta) && ($(cell).data().sorter === false)) { return true; };
+				return false;
+			}
+			
+			function checkHeaderOptions(table,i) {	
+				if((table.config.headers[i]) && (table.config.headers[i].sorter === false)) { return true; };
+				return false;
+			}
+			
+			function applyWidget(table) {
+				var c = table.config.widgets;
+				var l = c.length;
+				for(var i=0; i < l; i++) {
+					
+					getWidgetById(c[i]).format(table);
+				}
+				
+			}
+			
+			function getWidgetById(name) {
+				var l = widgets.length;
+				for(var i=0; i < l; i++) {
+					if(widgets[i].id.toLowerCase() == name.toLowerCase() ) {
+						return widgets[i]; 
+					}
+				}
+			};
+			
+			function formatSortingOrder(v) {
+				
+				if(typeof(v) != "Number") {
+					i = (v.toLowerCase() == "desc") ? 1 : 0;
+				} else {
+					i = (v == (0 || 1)) ? v : 0;
+				}
+				return i;
+			}
+			
+			function isValueInArray(v, a) {
+				var l = a.length;
+				for(var i=0; i < l; i++) {
+					if(a[i][0] == v) {
+						return true;	
+					}
+				}
+				return false;
+			}
+				
+			function setHeadersCss(table,$headers, list, css) {
+				// remove all header information
+				$headers.removeClass(css[0]).removeClass(css[1]);
+				
+				var h = [];
+				$headers.each(function(offset) {
+						if(!this.sortDisabled) {
+							h[this.column] = $(this);					
+						}
+				});
+
+				var l = list.length; 
+				for(var i=0; i < l; i++) {
+					h[list[i][0]].addClass(css[list[i][1]]);
+				}
+			}
+			
+			function fixColumnWidth(table,$headers) {
+				var c = table.config;
+				if(c.widthFixed) {
+					var colgroup = $('<colgroup>');
+					$("tbody:first tr:first td",table).each(function() {
+						
+						colgroup.append($('<col>').css('width',$(this).width()));
+					
+					});
+					$(table).prepend(colgroup);
+				};
+			}
+			
+			function updateHeaderSortCount(table,sortList) {
+				var c = table.config, l = sortList.length;
+				for(var i=0; i < l; i++) {
+					var s = sortList[i], o = c.headerList[s[0]];
+					o.count = s[1];
+					o.count++;
+				}
+			}
+			
+			/* sorting methods */
+			function multisort(table,sortList,cache) {
+				
+				if(table.config.debug) { var sortTime = new Date(); }
+				
+				var dynamicExp = "var sortWrapper = function(a,b) {", l = sortList.length;
+					
+				for(var i=0; i < l; i++) {
+					
+					var c = sortList[i][0];
+					var order = sortList[i][1];
+					var s = (getCachedSortType(table.config.parsers,c) == "text") ? ((order == 0) ? "sortText" : "sortTextDesc") : ((order == 0) ? "sortNumeric" : "sortNumericDesc");
+					
+					var e = "e" + i;
+					
+					dynamicExp += "var " + e + " = " + s + "(a[" + c + "],b[" + c + "]); ";
+					dynamicExp += "if(" + e + ") { return " + e + "; } ";
+					dynamicExp += "else { ";
+				}
+					
+				for(var i=0; i < l; i++) {
+					dynamicExp += "}; ";
+				}
+				
+				dynamicExp += "return 0; ";	
+				dynamicExp += "}; ";	
+				
+				eval(dynamicExp);
+				
+				cache.normalized.sort(sortWrapper);
+				
+				if(table.config.debug) { benchmark("Sorting on " + sortList.toString() + " and dir " + order+ " time:", sortTime); }
+				
+				return cache;
+			};
+			
+			function sortText(a,b) {
+				return ((a < b) ? -1 : ((a > b) ? 1 : 0));
+			};
+			
+			function sortTextDesc(a,b) {
+				return ((b < a) ? -1 : ((b > a) ? 1 : 0));
+			};	
+			
+	 		function sortNumeric(a,b) {
+				return a-b;
+			};
+			
+			function sortNumericDesc(a,b) {
+				return b-a;
+			};
+			
+			function getCachedSortType(parsers,i) {
+				return parsers[i].type;
+			};
+			
+			/* public methods */
+			this.construct = function(settings) {
+
+				return this.each(function() {
+					
+					
+					
+					
+					var $this, $document,$headers, cache, config, shiftDown = 0, sortOrder;
+					
+					this.config = {};
+					
+					config = $.extend(this.config, $.tablesorter.defaults, settings);
+					
+					if(!this.tHead || !this.tBodies) return true;
+					
+					// store common expression for speed					
+					$this = $(this);
+					
+					// build headers
+					$headers = buildHeaders(this);
+					
+					// try to auto detect column type, and store in tables config
+					this.config.parsers = buildParserCache(this,$headers);
+					
+					
+					// build the cache for the tbody cells
+					cache = buildCache(this);
+					
+					// get the css class names, could be done else where.
+					var sortCSS = [config.cssDesc,config.cssAsc];
+					
+					// fixate columns if the users supplies the fixedWidth option
+					fixColumnWidth(this);
+					
+					// apply event handling to headers
+					// this is to big, perhaps break it out?
+					$headers.click(function(e) {
+						if(!this.sortDisabled) {
+							// store exp, for speed
+							var $cell = $(this);
+	
+							// get current column index
+							var i = this.column;
+							
+							// get current column sort order
+							this.order = this.count++ % 2;
+							
+							
+							
+							// user only whants to sort on one column
+							if(!e[config.sortMultiSortKey]) {
+								
+								// flush the sort list
+								config.sortList = [];
+								
+								if(config.sortForce != null) {
+									var a = config.sortForce; 
+									for(var j=0; j < a.length; j++) { 	
+										config.sortList.push(a[j]);	
+									}
+								}
+								
+								// add column to sort list
+								config.sortList.push([i,this.order]);
+							
+							// multi column sorting	
+							} else {
+								// the user has clicked on an all ready sortet column.
+								if(isValueInArray(i,config.sortList)) {	 
+									
+									// revers the sorting direction for all tables.
+									for(var j=0; j < config.sortList.length; j++) {
+										var s = config.sortList[j], o = config.headerList[s[0]];
+										if(s[0] == i) {
+											o.count = s[1];
+											o.count++;
+											s[1] = o.count % 2;
+										}
+									}	
+								} else {
+									// add column to sort list array
+									config.sortList.push([i,this.order]);
+								}
+							};
+							
+							//set css for headers
+							setHeadersCss($this[0],$headers,config.sortList,sortCSS);
+							
+							// sort the table and append it to the dom
+							appendToTable($this[0],multisort($this[0],config.sortList,cache));
+							
+							// stop normal event by returning false
+							return false;
+						}
+					// cancel selection	
+					}).mousedown(function() {
+						if(config.cancelSelection) {
+							this.onselectstart = function() {return false};
+							//alert(this.onselectstart);
+							return false;
+						}
+					});
+					
+					// apply easy methods that trigger binded events
+					$this.bind("update",function() {
+						
+						// rebuild the cache map
+						cache = buildCache(this);
+						
+					}).bind("sorton",function(e,list) {
+						
+						// update and store the sortlist
+						var sortList = config.sortList = list;
+						
+						// update header count index
+						updateHeaderSortCount(this,sortList);
+						
+						//set css for headers
+						setHeadersCss(this,$headers,sortList,sortCSS);
+						
+						// sort the table and append it to the dom
+						appendToTable(this,multisort(this,sortList,cache));
+						
+					}).bind("appendCache",function() {
+						
+						appendToTable(this,cache);
+					
+					}).bind("applyWidgetId",function(e,id) {
+						
+						getWidgetById(id).format(this);
+						
+					});
+					
+					if($.meta && ($(this).data() && $(this).data().sortlist)) {
+						config.sortList = $(this).data().sortlist;
+					}
+					// if user has supplied a sort list to constructor.
+					if(config.sortList.length > 0) {
+						$this.trigger("sorton",[config.sortList]);	
+					}
+					
+					// apply widgets
+					applyWidget(this);
+				});
+			};
+			
+			this.addParser = function(parser) {
+				var l = parsers.length, a = true;
+				for(var i=0; i < l; i++) {
+					if(parsers[i].id.toLowerCase() == parser.id.toLowerCase()) {
+						a = false;
+					}
+				}
+				if(a) { parsers.push(parser); };
+			};
+			
+			this.addWidget = function(widget) {
+				widgets.push(widget);
+			};
+			
+			this.formatFloat = function(s) {
+
+				var i = parseFloat(s);
+				return (isNaN(i)) ? 0 : i;
+			};
+			this.formatInt = function(s) {
+				var i = parseInt(s);
+				return (isNaN(i)) ? 0 : i;
+			};
+			
+		}
+	});
+	
+	// extend plugin scope
+	$.fn.extend({
+        tablesorter: $.tablesorter.construct
+	});
+	
+	// add default parsers
+	$.tablesorter.addParser({
+		id: "text",
+		is: function(s) {
+			return true;
+		},
+		format: function(s) {
+			return $.trim(s.toLowerCase());
+		},
+		type: "text"
+	});
+	
+	$.tablesorter.addParser({
+		id: "integer",
+		is: function(s) {
+			return s.match(new RegExp(/^\d+$/));
+		},
+		format: function(s) {
+			return $.tablesorter.formatInt(s);
+		},
+		type: "numeric"
+	});
+	
+	$.tablesorter.addParser({
+		id: "currency",
+		is: function(s) {
+			return /^[£$€?.]/.test(s);
+		},
+		format: function(s) {
+			return $.tablesorter.formatFloat(s.replace(new RegExp(/[^0-9.]/g),""));
+		},
+		type: "numeric"
+	});
+	
+	$.tablesorter.addParser({
+		id: "integer",
+		is: function(s) {
+			return /^\d+$/.test(s);
+		},
+		format: function(s) {
+			return $.tablesorter.formatFloat(s);
+		},
+		type: "numeric"
+	});
+	
+	$.tablesorter.addParser({
+		id: "floating",
+		is: function(s) {
+			return s.match(new RegExp(/^(\+|-)?[0-9]+\.[0-9]+((E|e)(\+|-)?[0-9]+)?$/));
+		},
+		format: function(s) {
+			return $.tablesorter.formatFloat(s.replace(new RegExp(/,/),""));
+		},
+		type: "numeric"
+	});
+	
+	$.tablesorter.addParser({
+		id: "ipAddress",
+		is: function(s) {
+			return /^\d{2,3}[\.]\d{2,3}[\.]\d{2,3}[\.]\d{2,3}$/.test(s);
+		},
+		format: function(s) {
+			var a = s.split(".");
+			var r = "";
+			for (var i = 0, item; item = a[i]; i++) {
+			   if(item.length == 2) {
+					r += "0" + item;
+			   } else {
+					r += item;
+			   }
+			}
+			return $.tablesorter.formatFloat(s);
+		},
+		type: "numeric"
+	});
+	
+	$.tablesorter.addParser({
+		id: "url",
+		is: function(s) {
+			return /^(https?|ftp|file):\/\/$/.test(s);
+		},
+		format: function(s) {
+			return jQuery.trim(s.replace(new RegExp(/(https?|ftp|file):\/\//),''));
+		},
+		type: "text"
+	});
+	
+	$.tablesorter.addParser({
+		id: "isoDate",
+		is: function(s) {
+			return /^\d{4}[\/-]\d{1,2}[\/-]\d{1,2}$/.test(s);
+		},
+		format: function(s) {
+			return $.tablesorter.formatFloat((s != "") ? new Date(s.replace(new RegExp(/-/g),"/")).getTime() : "0");
+		},
+		type: "numeric"
+	});
+	
+	$.tablesorter.addParser({
+		id: "percent",
+		is: function(s) {
+			return /^\d{1,3}%$/.test(s);
+		},
+		format: function(s) {
+			return $.tablesorter.formatFloat(s.replace(new RegExp(/%/g),""));
+		},
+		type: "numeric"
+	});
+	
+	$.tablesorter.addParser({
+		id: "usLongDate",
+		is: function(s) {
+			return /^[A-Za-z]{3,10}\.? [0-9]{1,2}, ([0-9]{4}|\'?[0-9]{2}) (([0-2]?[0-9]:[0-5][0-9])|([0-1]?[0-9]:[0-5][0-9]\s(AM|PM)))$/.test(s);
+		},
+		format: function(s) {
+			return $.tablesorter.formatFloat(new Date(s).getTime());
+		},
+		type: "numeric"
+	});
+	
+	$.tablesorter.addParser({
+		id: "shortDate",
+		is: function(s) {
+			return /\d{1,2}[\/-]\d{1,2}[\/-]\d{2,4}/.test(s);
+		},
+		format: function(s,table) {
+			var c = table.config;
+			s = s.replace(new RegExp(/-/g),"/");
+			if(c.dateFormat == "us") {
+				/** reformat the string in ISO format */
+				s = s.replace(new RegExp(/(\d{1,2})[\/-](\d{1,2})[\/-](\d{4})/), "$3/$1/$2");
+			} else if(c.dateFormat == "uk") {
+				/** reformat the string in ISO format */
+				s = s.replace(new RegExp(/(\d{1,2})[\/-](\d{1,2})[\/-](\d{4})/), "$3/$2/$1");
+			} else if(c.dateFormat == "dd/mm/yy" || c.dateFormat == "dd-mm-yy") {
+				s = s.replace(new RegExp(/(\d{1,2})[\/-](\d{1,2})[\/-](\d{2})/), "$1/$2/$3");	
+			}
+			return $.tablesorter.formatFloat(new Date(s).getTime());
+		},
+		type: "numeric"
+	});
+	
+	$.tablesorter.addParser({
+	    id: "time",
+	    is: function(s) {
+	        return /^(([0-2]?[0-9]:[0-5][0-9])|([0-1]?[0-9]:[0-5][0-9]\s(am|pm)))$/.test(s);
+	    },
+	    format: function(s) {
+	        return $.tablesorter.formatFloat(new Date("2000/01/01 " + s).getTime());
+	    },
+	  type: "numeric"
+	});
+	
+	
+	$.tablesorter.addParser({
+	    id: "metadata",
+	    is: function(s) {
+	        return false;
+	    },
+	    format: function(s,table,cell) {
+			var c = table.config, p = (!c.parserMetadataName) ? 'sortValue' : c.parserMetadataName;
+	        return $(cell).data()[p];
+	    },
+	  type: "numeric"
+	});
+	
+	// add default widgets
+	$.tablesorter.addWidget({
+		id: "zebra",
+		format: function(table) {
+			$("> tbody:first/tr:visible:even",table).removeClass(table.config.widgetZebra.css[1]).addClass(table.config.widgetZebra.css[0]);
+			$("> tbody:first/tr:visible:odd",table).removeClass(table.config.widgetZebra.css[0]).addClass(table.config.widgetZebra.css[1]);
+		}
+	});
+	
+})(jQuery);

login.html

@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+</head>
+<body>
+    <div class="wrapHeader"></div>
+    <div class="headerTop"></div>
+    <div class="wrapForm">
+        <h1 class="headerTitle">投资控制云端</h1>
+        <form class="formCon">
+            <div class="form-group">
+                <label for="user">用户名</label>
+                <input type="text" class="form-control" id="user" placeholder="请输入用户名">
+            </div>
+            <div class="form-group">
+                <label for="password">密码</label>
+                <input type="password" class="form-control" id="password" placeholder="请输入密码">
+            </div>
+            <button type="submit" class="btn btn-primary">登录</button>
+            <div class="alert alert-danger text-center">
+                <span data-icon="t" aria-hidden="true"></span> 帐号不存在，请检查输入是否有误
+            </div>
+            <div class="alert alert-danger text-center">
+                <span data-icon="t" aria-hidden="true"></span> 帐号或密码错误
+            </div>
+        </form>
+    </div>
+</body>

r-project-section-detail.html

@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+    <script src=js/bootstrap.js></script> 
+    <script src=js/global.js></script>
+    <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
+</head>
+<body>
+    <div class="wrapTop">
+        <div class="userInfo fR">
+            <div class="dropdown">
+                <div class="dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <span class="glyphicon glyphicon-option-vertical topImg"></span>
+                </div>
+                <ul class="dropdown-menu" id="dropdownMenu" aria-labelledby="dropdownMenu1">
+                    <li><a href="#">修改项目名称</a></li>
+                    <li><a href="#">项目分享</a></li>
+                </ul>
+            </div>
+        </div>
+        <div class="headerLeft fL">
+            <a href="r-project-section.html">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <b>GZ-HJDQ-JL-001</b>
+            </a>
+        </div>
+    </div>
+    <div class="wrapContent">
+        <div class="wrapNav wrapNavR">
+            <ul class="nav nav-tabs">
+                <li role="presentation" class="active"><a href="r-project-section-detail.html">标段概况</a></li>
+                <li role="presentation"><a href="r-project-section-files.html">附件</a></li>
+                <li role="presentation"><a href="r-project-section-measure.html">审批</a></li>
+            </ul>
+        </div>        
+        <div class="project">
+            <div class="proSection">
+                <!--图表4-->
+                <div id="chartContainer4" style="height: 300px; width: 100%;">
+                </div>
+                <!--图表5-->
+                <div id="chartContainer5" style="height: 300px; width: 100%;">
+                </div>
+            </div>
+            <div class="projectSeList">
+                <dl class="projectTable">
+                  <dt>第七期（上报：2015-09-09；通过：2015-09-13</dt>
+                  <dd>
+                    <table class="table table-hover">
+                      <tr>
+                        <td>
+                          <p>本期合同计量</p>
+                          <b>￥5,000,000.00</b>
+                        </td>
+                        <td>
+                          <p>本期数量变更计量</p>
+                          <b>￥233,453,000.00</b>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <p>截止上期累计完成</p>
+                          <b>￥5,000,000.00</b>
+                        </td>
+                        <td>
+                          <p>本期完成计量</p>
+                          <b>￥233,453,000.00</b>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <p>累计完成计量</p>
+                          <b>￥233,453,000.00</b>
+                        </td>
+                        <td></td>
+                      </tr>
+                    </table>
+                  </dd>
+                </dl>
+                <dl class="projectTable">
+                  <dt>第六期（上报：2015-09-09；通过：2015-09-13</dt>
+                  <dd>
+                    <table class="table table-hover">
+                      <tr>
+                        <td>
+                          <p>本期合同计量</p>
+                          <b>￥5,000,000.00</b>
+                        </td>
+                        <td>
+                          <p>本期数量变更计量</p>
+                          <b>￥233,453,000.00</b>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <p>截止上期累计完成</p>
+                          <b>￥5,000,000.00</b>
+                        </td>
+                        <td>
+                          <p>本期完成计量</p>
+                          <b>￥233,453,000.00</b>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <p>累计完成计量</p>
+                          <b>￥233,453,000.00</b>
+                        </td>
+                        <td></td>
+                      </tr>
+                    </table>
+                  </dd>
+                </dl>
+            </div>
+        </div>
+    </div>
+
+    <script type="text/javascript">
+        // 路径配置
+        require.config({
+            paths:{ 
+                'echarts' : 'http://echarts.baidu.com/build/echarts'
+            }
+        });
+        
+        // 使用
+        require(
+            [
+                'echarts',
+                'echarts/chart/pie', // 使用柱状图就加载bar模块，按需加载
+                'echarts/chart/bar'
+            ],
+            function(ec) {
+                //4 标段期数计量进度//
+                var myChart = ec.init(document.getElementById('chartContainer4'));   
+                var option = {
+                  color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
+                          '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
+                          '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
+                          '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],                  
+    tooltip : {
+        trigger: 'axis'
+    },
+    calculable : true,
+    legend: {
+        data:['本期合同计量','本期数量变更计量','截至上期累计完成','本期完成计量','完成度']
+    },
+    xAxis : [
+        {
+            type : 'category',
+            splitLine : {show : true},
+            data : ['第一期','第二期','第三期','第四期','第五期','第六期','第七期']
+        }
+    ],
+    yAxis : [
+        {
+            type : 'value',
+            position: 'left',
+            splitArea : {show : true}
+        },
+        {
+            type : 'value',
+            name:'完成度',
+            axisLabel : {
+                formatter: '{value} %'
+            },
+            position: 'right',
+            splitArea : {show : true}
+        }
+    ],
+    series : [
+        {
+            name:'本期合同计量',
+            type:'bar',
+            tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+            stack: '合同',
+            data:[320, 332, 301, 334, 390, 330, 320]
+        },
+        {
+            name:'本期数量变更计量',
+            type:'bar',
+            tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+            stack: '合同',
+            data:[320, -20, 301, 334, 390, 330, 320]
+        },
+        {
+            name:'截至上期累计完成',
+            type:'bar',
+            tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+            stack: '完成',
+            data:[120, 132, 101, 134, 90, 230, 210]
+        },
+        {
+            name:'本期完成计量',
+            type:'bar',
+            tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+            stack: '完成',
+            data:[220, 182, 191, 234, 290, 330, 310]
+        },
+        {
+            name:'完成度',
+            type:'line',
+            tooltip : {trigger: 'axis',formatter: "{b}占总标段<br/>{a}：{c} %"},
+            yAxisIndex: 1,
+            data:[10, 15, 20, 13, 11, 9, 5]
+        },
+    ]
+};
+                    
+                // 为echarts对象加载数据 
+                myChart.setOption(option); 
+                //4 标段期数计量进度//
+                //5 期数组成//
+                // 基于准备好的dom，初始化echarts图表
+                var myChart = ec.init(document.getElementById('chartContainer5'));   
+                var option = {
+                  color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
+                          '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
+                          '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
+                          '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],                   
+                  title : {
+                      text: '期数计量组成',
+                      x:'left'
+                  },
+                  tooltip : {
+                      trigger: 'item',
+                      formatter: "{a} <br/>{b}：{c} 元<br>占标段：{d} %"
+                  },
+                  calculable : true,
+                  series : [
+                      {
+                          name:'标段计量分布',
+                          type:'pie',
+                          radius : '40%',
+                          center: ['45%', 155],
+                          data:[
+                              {value:27814964.00, name:'第一期'},
+                              {value:41043186.10, name:'第二期'},
+                              {value:42917475.00, name:'第三期'},
+                              {value:27634982.00, name:'第四期'},
+                              {value:27634982.00, name:'第五期'},
+                              {value:27634982.00, name:'第六期'},
+                              {value:27634982.00, name:'第七期'}
+                          ]
+                      }
+                  ]
+                };
+                // 为echarts对象加载数据 
+                myChart.setOption(option); 
+                //5 期数组成//
+            }
+        );
+    </script>
+
+</body>

r-project-section-files-detail.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+    <script src=js/bootstrap.js></script> 
+    <script src=js/global.js></script>
+    <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
+</head>
+<body>
+    <div class="wrapTop">
+        <div class="userInfo fR">
+            <div class="dropdown">
+                <div class="dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <span class="glyphicon glyphicon-option-vertical topImg"></span>
+                </div>
+                <ul class="dropdown-menu" id="dropdownMenu" aria-labelledby="dropdownMenu1">
+                    <li><a href="#">首页</a></li>
+                    <li><a href="#">张三</a></li>
+                </ul>
+            </div>
+            <a href="w-project-add.html"></a>
+        </div>
+        <div class="headerLeft fL">
+            <a href="r-project-section-files.html">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <b>文件详情</b>
+            </a>
+        </div>
+    </div>
+    <div class="wrapContent">        
+      <div class="project">
+        <dl class="filesDetail">
+          <dt>K0+800-K1+000图纸</dt>
+          <dd><b>格式：</b>.jpg</dd>
+          <dd><b>所在类：</b>台帐附件</dd>
+          <dd><b>上传者：</b>陈工</dd>
+          <dd><b>上传时间：</b>  2014-11-20 14:20</dd>
+          <dd><b>备注/描述：</b>内容内容内容内容</dd>
+        </dl>
+      </div>
+    </div>
+</body>

r-project-section-files.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+    <script src=js/bootstrap.js></script> 
+    <script src=js/global.js></script>
+    <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
+</head>
+<body>
+    <div class="wrapTop">
+        <div class="userInfo fR">
+            <div class="dropdown">
+                <div class="dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <span class="glyphicon glyphicon-option-vertical topImg"></span>
+                </div>
+                <ul class="dropdown-menu" id="dropdownMenu" aria-labelledby="dropdownMenu1">
+                    <li><a href="index.html">首页</a></li>
+                    <li><a href="#">张三</a></li>
+                </ul>
+            </div>
+            <a href="w-project-add.html"></a>
+        </div>
+        <div class="headerLeft fL">
+            <a href="r-project-section.html">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <b>GZ-HJDQ-JL-001</b>
+            </a>
+        </div>
+    </div>
+    <div class="wrapContent">
+        <div class="wrapNav wrapNavR">
+            <ul class="nav nav-tabs">
+                <li role="presentation"><a href="r-project-section-detail.html">标段概况</a></li>
+                <li role="presentation" class="active"><a href="r-project-section-files.html">附件</a></li>
+                <li role="presentation"><a href="r-project-section-measure.html">审批</a></li>
+            </ul>
+        </div>        
+        <div class="project">
+            <div class="filesList">
+              <ul>
+                <li>
+                  <a href="r-project-section-files-detail.html">
+                    <div class="filesListTitle"><span class="glyphicon glyphicon-picture"></span>&nbsp;K0+800-K1+000图纸</div>
+                    <div class="filesListCon">
+                      <p><b>节点：</b>203-1-a 挖土方</p>
+                      <p><b>父节点：</b>1-2-2-1 K0+800-K1+000</p>
+                      <p><b>上传者：</b>陈工</p>
+                      <p><b>上传时间：</b>2014-11-20</p>
+                    </div>
+                  </a>
+                </li>
+                <li>
+                  <a href="r-project-section-files-detail.html">
+                    <div class="filesListTitle"><span class="glyphicon glyphicon-picture"></span>&nbsp;K0+800-K1+000图纸</div>
+                    <div class="filesListCon">
+                      <p><b>节点：</b>203-1-a 挖土方</p>
+                      <p><b>父节点：</b>1-2-2-1 K0+800-K1+000</p>
+                      <p><b>上传者：</b>陈工</p>
+                      <p><b>上传时间：</b>2014-11-20</p>
+                    </div>
+                  </a>
+                </li>
+              </ul>
+            </div>
+        </div>
+    </div>
+</body>

r-project-section-measure.html

@@ -0,0 +1,118 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+    <script src=js/bootstrap.js></script> 
+    <script src=js/global.js></script>
+    <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
+</head>
+<body>
+    <div class="wrapTop">
+        <div class="userInfo fR">
+            <div class="dropdown">
+                <div class="dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <span class="glyphicon glyphicon-option-vertical topImg"></span>
+                </div>
+                <ul class="dropdown-menu" id="dropdownMenu" aria-labelledby="dropdownMenu1">
+                    <li><a href="index.html">首页</a></li>
+                    <li><a href="#">张三</a></li>
+                </ul>
+            </div>
+            <a href="w-project-add.html"></a>
+        </div>
+        <div class="headerLeft fL">
+            <a href="r-project-section.html">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <b>GZ-HJDQ-JL-001</b>
+            </a>
+        </div>
+    </div>
+    <div class="wrapContent">
+        <div class="wrapNav wrapNavR">
+            <ul class="nav nav-tabs">
+                <li role="presentation"><a href="r-project-section-detail.html">标段概况</a></li>
+                <li role="presentation"><a href="r-project-section-files.html">附件</a></li>
+                <li role="presentation" class="active"><a href="r-project-section-measure.html">审批</a></li>
+            </ul>
+        </div>        
+        <div class="project">
+          <div class="projectSeList mT2">
+            <dl class="projectTable">
+              <dt>第七期（上报：2015-09-09；通过：2015-09-13</dt>
+              <dd>
+                <table class="table table-hover">
+                  <tr>
+                    <td>
+                      <p>本期合同计量</p>
+                      <b>￥5,000,000.00</b>
+                    </td>
+                    <td>
+                      <p>本期数量变更计量</p>
+                      <b>￥233,453,000.00</b>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <p>截止上期累计完成</p>
+                      <b>￥5,000,000.00</b>
+                    </td>
+                    <td>
+                      <p>本期完成计量</p>
+                      <b>￥233,453,000.00</b>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>
+                      <p>累计完成计量</p>
+                      <b>￥233,453,000.00</b>
+                    </td>
+                    <td></td>
+                  </tr>
+                </table>
+              </dd>
+            </dl>
+          </div>
+        </div>
+        <div class="approvalList">
+          <ul>
+            <li>
+              <div class="approvalImg"><img class="pass" src="images/avatar-1.png">王三<b class="colGreen fR">审批完成（2015-02-02）</b></div>
+              <div class="approvalView">审批意见审批意见审批意见审批意见审批意见,萨大声的,审批意见审批意见审批意见审批意见审批意见</div>
+            </li>
+            <li>
+              <div class="approvalImg"><img class="wait" src="images/avatar-2.png">张三（我）<b class="colOrange fR">审批中</b></div>
+              <div class="approvalView">审批意见审批意见审批意见</div>
+            </li>
+            <li>
+              <div class="approvalImg"><img class="pa2ss" src="images/avatar-3.png">李雷<b class="colGray fR">待审</b></div>
+              <div class="approvalView">审批意见审批意见审批意见审批意见审</div>
+            </li>
+            <li>
+              <div class="approvalImg"><img class="unpass" src="images/avatar-4.png">王五<b class="colRed fR">审批不通过</b></div>
+              <div class="approvalView">审批意见</div>
+            </li>
+          </ul>
+        </div>
+    </div>
+    <div class="bottomToolsbar">
+      <div class="bottomView">
+        <form>
+          <div class="form-group">
+            <label>审批意见</label>
+            <textarea class="form-control" rows="3"></textarea>
+          </div>
+        </form> 
+      </div>
+      <ul>
+        <li><button type="button" class="submit btn-danger">审批不通过</button></li>
+        <li><button type="button" class="submit btn-success">审批通过</button></li>
+      </ul>
+    </div>
+</body>

r-project-section.html

@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+    <script src=js/bootstrap.js></script> 
+    <script src=js/global.js></script>
+    <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
+</head>
+<body>
+    <div class="wrapTop">
+        <div class="userInfo fR">
+            <div class="dropdown">
+                <div class="dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <span class="glyphicon glyphicon-option-vertical topImg"></span>
+                </div>
+                <ul class="dropdown-menu" id="dropdownMenu" aria-labelledby="dropdownMenu1">
+                    <li><a href="#">修改项目名称</a></li>
+                    <li><a href="#">项目分享</a></li>
+                </ul>
+            </div>
+            <a href="r-project-add.html"></a>
+        </div>
+        <div class="headerLeft fL">
+            <a href="r-project.html">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <b>黄金大桥项目</b>
+            </a>
+        </div>
+    </div>
+    <div class="wrapContent">       
+        <div class="wrapGraphic clearfix">
+          <ul>
+            <li>
+              <span class="graphic graphicGreen"></span>
+              截至上期累计完成
+            </li>
+            <li>
+              <span class="graphic graphicBlue"></span>
+              本期完成
+            </li>
+            <li>
+              <span class="graphic graphicGray"></span>
+              本期未完成
+            </li>
+            <li>
+              <span class="graphic graphicRed"></span>
+              未完成
+            </li>
+          </ul>
+        </div>
+        <div class="projectSeList">
+          <ul>
+            <li>
+              <div class="projectSection">
+                <div class="title"><a href="#">土建合同&nbsp;<span class="glyphicon glyphicon-cog"></span></a></div>
+                <p>总价：<b>￥123,122,212.00</b></p>
+                <div class="progress">
+                  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 65%;" data-toggle="tooltip" data-placement="bottom" title="累计完成：￥499,500,000.00">65%</div>
+                  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 35%;" data-toggle="tooltip" data-placement="bottom" title="未完成：￥71,121,121.00">35%</div>
+                </div>
+              </div>
+              <dl class="projectList">
+                <dt class="openPro">展开所有标段</dt>
+                <dd class="projectDetail projectDetailNot">
+                  <a href="r-project-section-detail.html">
+                    <div class="title">GZ-HJDQ-JL-001（点我）</div>
+                    <p><b>计量期数：</b>共5期</p>
+                    <p><b>总价：</b>￥5,000,000.00</p>
+                    <div class="progress">
+                      <div class="progress-bar progress-bar-success" style="width: 45%;" data-placement="bottom" data-toggle="tooltip" data-original-title="截止上期累计完成：￥731,121,121.00">45%</div>
+                      <div class="progress-bar" style="width:25%;" data-placement="bottom" data-toggle="tooltip" data-original-title="本期完成：￥31,121,121.00">25%</div>
+                      <div class="progress-bar progress-gary" style="width:30%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未完成：￥71,121,121.00">30%</div>
+                    </div>
+                    <span class="trialTip colOrange">本期审核中</span>
+                  </a>
+                </dd>
+                <dd class="projectDetail projectDetailNot">
+                  <a href="r-project-section-detail.html">
+                    <div class="title">GZ-HJDQ-JL-002</div>
+                    <p><b>计量期数：</b>共5期</p>
+                    <p><b>总价：</b>￥5,000,000.00</p>
+                    <div class="progress">
+                      <div class="progress-bar progress-bar-success" style="width: 29%;" data-placement="bottom" data-toggle="tooltip" data-original-title="截止上期累计完成：￥731,121,121.00">29%</div>
+                      <div class="progress-bar" style="width:5%;" data-placement="bottom" data-toggle="tooltip" data-original-title="本期完成：￥31,121,121.00">5%</div>
+                      <div class="progress-bar progress-gary" style="width:66%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未完成：￥71,121,121.00">66%</div>
+                    </div>
+                    <span class="trialTip colGreen">本期已完成</span>
+                  </a>
+                </dd>
+                <dd class="projectDetail projectDetailNot">
+                  <a href="r-project-section-detail.html">
+                    <div class="title">GZ-HJDQ-JL-003</div>
+                    <p><b>计量期数：</b>共5期</p>
+                    <p><b>总价：</b>￥5,000,000.00</p>
+                    <div class="progress">
+                      <div class="progress-bar progress-bar-success" style="width: 0%;" data-placement="bottom" data-toggle="tooltip" data-original-title="截止上期累计完成：￥731,121,121.00">0%</div>
+                      <div class="progress-bar" style="width:0%;" data-placement="bottom" data-toggle="tooltip" data-original-title="本期完成：￥31,121,121.00">0%</div>
+                      <div class="progress-bar progress-gary" style="width:0%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未完成：￥71,121,121.00">0%</div>
+                    </div>
+                  </a>
+                  <span class="trialTip colGray"><a href="r-project-section-measure.html" type="button" class="btn btn-default btn-sm btnOrange">开始审批</a></span>
+                </dd>
+              </dl>
+            </li>
+            <li>
+              <div class="projectSection">
+                <div class="title"><a href="#">监理合同目&nbsp;<span class="glyphicon glyphicon-cog"></span></a></div>
+                <p>总价：<b>￥123,122,212.00</b></p>
+                <div class="progress">
+                  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 65%;" data-toggle="tooltip" data-placement="bottom" title="累计完成：￥499,500,000.00">65%</div>
+                  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 35%;" data-toggle="tooltip" data-placement="bottom" title="未完成：￥71,121,121.00">35%</div>
+                </div>
+              </div>
+              <dl class="projectList">
+                <dl class="projectList">
+                <dt class="openPro">展开所有标段</dt>
+                <dd class="projectDetail projectDetailNot">
+                  <a href="r-project-section-detail.html">
+                    <div class="title">GZ-HJDQ-JL-001（点我）</div>
+                    <p><b>计量期数：</b>共5期</p>
+                    <p><b>总价：</b>￥5,000,000.00</p>
+                    <div class="progress">
+                      <div class="progress-bar progress-bar-success" style="width: 45%;" data-placement="bottom" data-toggle="tooltip" data-original-title="截止上期累计完成：￥731,121,121.00">45%</div>
+                      <div class="progress-bar" style="width:25%;" data-placement="bottom" data-toggle="tooltip" data-original-title="本期完成：￥31,121,121.00">25%</div>
+                      <div class="progress-bar progress-gary" style="width:30%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未完成：￥71,121,121.00">30%</div>
+                    </div>
+                    <span class="trialTip colOrange">本期审核中</span>
+                  </a>
+                </dd>
+                <dd class="projectDetail projectDetailNot">
+                  <a href="r-project-section-detail.html">
+                    <div class="title">GZ-HJDQ-JL-002</div>
+                    <p><b>计量期数：</b>共5期</p>
+                    <p><b>总价：</b>￥5,000,000.00</p>
+                    <div class="progress">
+                      <div class="progress-bar progress-bar-success" style="width: 29%;" data-placement="bottom" data-toggle="tooltip" data-original-title="截止上期累计完成：￥731,121,121.00">29%</div>
+                      <div class="progress-bar" style="width:5%;" data-placement="bottom" data-toggle="tooltip" data-original-title="本期完成：￥31,121,121.00">5%</div>
+                      <div class="progress-bar progress-gary" style="width:66%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未完成：￥71,121,121.00">66%</div>
+                    </div>
+                    <span class="trialTip colGreen">本期已完成</span>
+                  </a>
+                </dd>
+                <dd class="projectDetail projectDetailNot">
+                  <a href="r-project-section-detail.html">
+                    <div class="title">GZ-HJDQ-JL-003</div>
+                    <p><b>计量期数：</b>共5期</p>
+                    <p><b>总价：</b>￥5,000,000.00</p>
+                    <div class="progress">
+                      <div class="progress-bar progress-bar-success" style="width: 0%;" data-placement="bottom" data-toggle="tooltip" data-original-title="截止上期累计完成：￥731,121,121.00">0%</div>
+                      <div class="progress-bar" style="width:0%;" data-placement="bottom" data-toggle="tooltip" data-original-title="本期完成：￥31,121,121.00">0%</div>
+                      <div class="progress-bar progress-gary" style="width:0%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未完成：￥71,121,121.00">0%</div>
+                    </div>
+                  </a>
+                  <span class="trialTip colGray"><button type="button" class="btn btn-default btn-sm btnOrange">开始审批</button></span>
+                </dd>
+              </dl>
+            </li>
+          </ul>
+        </div>
+    </div>
+</body>

r-project.html

@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+    <script src=js/bootstrap.js></script> 
+    <script src=js/global.js></script>
+</head>
+<body>
+    <div class="wrapTop">
+        <div class="userInfo fR">
+            <div class="dropdown">
+                <div class="dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <button type="button" class="btn btn-primary btn-xs">排序</button>
+                </div>
+                <ul class="dropdown-menu" id="dropdownMenu" aria-labelledby="dropdownMenu1">
+                    <li><a href="#">创建时间</a></li>
+                    <li><a href="#">最近审批</a></li>
+                    <li><a href="#">进度完成度</a></li>
+                </ul>
+            </div>
+        </div>
+        <div class="headerLeft fL">
+            <a href="index.html">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <b>审批项目</b>
+            </a>
+        </div>
+    </div>
+    <div class="wrapContent">
+        <div class="project">
+            <h3>您审批的项目</h3>
+            <ul>
+                <li class="clearfix">
+                    <a href="r-project-section.html">
+                        <div class="title">黄金大桥项目</div>
+                        <p>2012-07-13<span class="fR trialTip colOrange">有 1 个标段需要审批</span></p>
+                        <div class="detail">
+                            <p data-toggle="tooltip" data-placement="bottom" data-original-title="0号台帐合同：￥499,500,000.00 变更：+￥500,000.00">总价：￥500,000,000.00元 (<span class="colRed">+￥500,000.00</span>)</p>
+                            <div class="progress">
+                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 65%;" data-toggle="tooltip" data-placement="bottom" title="累计完成：￥499,500,000.00">65%</div>
+                                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 35%;" data-toggle="tooltip" data-placement="bottom" title="未完成：￥499,500,000.00">35%</div>
+                            </div>
+                        </div>
+                        
+                    </a>
+                </li>
+                <li class="clearfix">
+                    <a href="r-project-section.html">
+                        <div class="title">XXX公路</div>
+                        <p>2012-07-13</p>
+                        <div class="detail">
+                            <p data-toggle="tooltip" data-placement="bottom" data-original-title="0号台帐合同：￥499,500,000.00 变更：+￥500,000.00">总价：￥500,000,000.00元 (<span class="colGreen">-￥500,000.00</span>)</p>
+                            <div class="progress">
+                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 65%;" data-toggle="tooltip" data-placement="bottom" data-original-title="累计完成：￥499,500,000.00">65%</div>
+                                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 35%;" data-toggle="tooltip" data-placement="bottom" title="未完成：￥499,500,000.00">35%</div>
+                            </div>
+                        </div>
+                    </a>
+                </li>
+                <li class="clearfix">
+                    <a href="r-project-section.html">
+                        <div class="title">XXX桥</div>
+                        <p>2012-07-13</p>
+                        <div class="detail">
+                            <p data-toggle="tooltip" data-placement="bottom" data-original-title="0号台帐合同：￥499,500,000.00 变更：+￥500,000.00">总价：￥500,000,000.00元 (<span class="colRed">+￥500,000.00</span>)</p>
+                            <div class="progress">
+                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 65%;" data-toggle="tooltip" data-placement="bottom" data-original-title="累计完成：￥499,500,000.00">65%</div>
+                                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 35%;" data-toggle="tooltip" data-placement="bottom" title="未完成：￥499,500,000.00">35%</div>
+                            </div>
+                        </div>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</body>

s-project-section-detail.html

@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+    <script src=js/bootstrap.js></script> 
+    <script src=js/global.js></script>
+    <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
+</head>
+<body>
+    <div class="wrapTop">
+        <div class="userInfo fR">
+            <div class="dropdown">
+                <div class="dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <span class="glyphicon glyphicon-option-vertical topImg"></span>
+                </div>
+                <ul class="dropdown-menu" id="dropdownMenu" aria-labelledby="dropdownMenu1">
+                    <li><a href="index.html">首页</a></li>
+                    <li><a href="#">张三</a></li>
+                </ul>
+            </div>
+            <a href="w-project-add.html"></a>
+        </div>
+        <div class="headerLeft fL">
+            <a href="s-project-section.html">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <b>GZ-HJDQ-JL-001</b>
+            </a>
+        </div>
+    </div>
+    <div class="wrapContent">
+        <div class="wrapNav">
+            <ul class="nav nav-tabs">
+                <li role="presentation" class="active"><a href="s-project-section-detail.html">标段概况</a></li>
+                <li role="presentation"><a href="s-project-section-files.html">附件</a></li>
+            </ul>
+        </div>        
+        <div class="project">
+            <div class="proSection">
+                <!--图表4-->
+                <div id="chartContainer4" style="height: 300px; width: 100%;">
+                </div>
+                <!--图表5-->
+                <div id="chartContainer5" style="height: 300px; width: 100%;">
+                </div>
+            </div>
+            <div class="projectSeList">
+                <dl class="projectTable">
+                  <dt>第七期（上报：2015-09-09；通过：2015-09-13</dt>
+                  <dd>
+                    <table class="table table-hover">
+                      <tr>
+                        <td>
+                          <p>本期合同计量</p>
+                          <b>￥5,000,000.00</b>
+                        </td>
+                        <td>
+                          <p>本期数量变更计量</p>
+                          <b>￥233,453,000.00</b>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <p>截止上期累计完成</p>
+                          <b>￥5,000,000.00</b>
+                        </td>
+                        <td>
+                          <p>本期完成计量</p>
+                          <b>￥233,453,000.00</b>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <p>累计完成计量</p>
+                          <b>￥233,453,000.00</b>
+                        </td>
+                        <td></td>
+                      </tr>
+                    </table>
+                  </dd>
+                </dl>
+                <dl class="projectTable">
+                  <dt>第六期（上报：2015-09-09；通过：2015-09-13</dt>
+                  <dd>
+                    <table class="table table-hover">
+                      <tr>
+                        <td>
+                          <p>本期合同计量</p>
+                          <b>￥5,000,000.00</b>
+                        </td>
+                        <td>
+                          <p>本期数量变更计量</p>
+                          <b>￥233,453,000.00</b>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <p>截止上期累计完成</p>
+                          <b>￥5,000,000.00</b>
+                        </td>
+                        <td>
+                          <p>本期完成计量</p>
+                          <b>￥233,453,000.00</b>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <p>累计完成计量</p>
+                          <b>￥233,453,000.00</b>
+                        </td>
+                        <td></td>
+                      </tr>
+                    </table>
+                  </dd>
+                </dl>
+            </div>
+        </div>
+    </div>
+
+    <script type="text/javascript">
+        // 路径配置
+        require.config({
+            paths:{ 
+                'echarts' : 'http://echarts.baidu.com/build/echarts'
+            }
+        });
+        
+        // 使用
+        require(
+            [
+                'echarts',
+                'echarts/chart/pie', // 使用柱状图就加载bar模块，按需加载
+                'echarts/chart/bar'
+            ],
+            function(ec) {
+                //4 标段期数计量进度//
+                var myChart = ec.init(document.getElementById('chartContainer4'));   
+                var option = {
+                  color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
+                          '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
+                          '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
+                          '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],                  
+    tooltip : {
+        trigger: 'axis'
+    },
+    calculable : true,
+    legend: {
+        data:['本期合同计量','本期数量变更计量','截至上期累计完成','本期完成计量','完成度']
+    },
+    xAxis : [
+        {
+            type : 'category',
+            splitLine : {show : true},
+            data : ['第一期','第二期','第三期','第四期','第五期','第六期','第七期']
+        }
+    ],
+    yAxis : [
+        {
+            type : 'value',
+            position: 'left',
+            splitArea : {show : true}
+        },
+        {
+            type : 'value',
+            name:'完成度',
+            axisLabel : {
+                formatter: '{value} %'
+            },
+            position: 'right',
+            splitArea : {show : true}
+        }
+    ],
+    series : [
+        {
+            name:'本期合同计量',
+            type:'bar',
+            tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+            stack: '合同',
+            data:[320, 332, 301, 334, 390, 330, 320]
+        },
+        {
+            name:'本期数量变更计量',
+            type:'bar',
+            tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+            stack: '合同',
+            data:[320, -20, 301, 334, 390, 330, 320]
+        },
+        {
+            name:'截至上期累计完成',
+            type:'bar',
+            tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+            stack: '完成',
+            data:[120, 132, 101, 134, 90, 230, 210]
+        },
+        {
+            name:'本期完成计量',
+            type:'bar',
+            tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+            stack: '完成',
+            data:[220, 182, 191, 234, 290, 330, 310]
+        },
+        {
+            name:'完成度',
+            type:'line',
+            tooltip : {trigger: 'axis',formatter: "{b}占总标段<br/>{a}：{c} %"},
+            yAxisIndex: 1,
+            data:[10, 15, 20, 13, 11, 9, 5]
+        },
+    ]
+};
+                    
+                // 为echarts对象加载数据 
+                myChart.setOption(option); 
+                //4 标段期数计量进度//
+                //5 期数组成//
+                // 基于准备好的dom，初始化echarts图表
+                var myChart = ec.init(document.getElementById('chartContainer5'));   
+                var option = {
+                  color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
+                          '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
+                          '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
+                          '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],                   
+                  title : {
+                      text: '期数计量组成',
+                      x:'left'
+                  },
+                  tooltip : {
+                      trigger: 'item',
+                      formatter: "{a} <br/>{b}：{c} 元<br>占标段：{d} %"
+                  },
+                  calculable : true,
+                  series : [
+                      {
+                          name:'标段计量分布',
+                          type:'pie',
+                          radius : '40%',
+                          center: ['45%', 155],
+                          data:[
+                              {value:27814964.00, name:'第一期'},
+                              {value:41043186.10, name:'第二期'},
+                              {value:42917475.00, name:'第三期'},
+                              {value:27634982.00, name:'第四期'},
+                              {value:27634982.00, name:'第五期'},
+                              {value:27634982.00, name:'第六期'},
+                              {value:27634982.00, name:'第七期'}
+                          ]
+                      }
+                  ]
+                };
+                // 为echarts对象加载数据 
+                myChart.setOption(option); 
+                //5 期数组成//
+            }
+        );
+    </script>
+
+</body>

s-project-section-files-detail.html

@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+    <script src=js/bootstrap.js></script> 
+    <script src=js/global.js></script>
+    <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
+</head>
+<body>
+    <div class="wrapTop">
+        <div class="userInfo fR">
+            <div class="dropdown">
+                <div class="dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <span class="glyphicon glyphicon-option-vertical topImg"></span>
+                </div>
+                <ul class="dropdown-menu" id="dropdownMenu" aria-labelledby="dropdownMenu1">
+                    <li><a href="index.html">首页</a></li>
+                    <li><a href="#">张三</a></li>
+                </ul>
+            </div>
+            <a href="w-project-add.html"></a>
+        </div>
+        <div class="headerLeft fL">
+            <a href="s-project-section-files.html">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <b>文件详情</b>
+            </a>
+        </div>
+    </div>
+    <div class="wrapContent">        
+      <div class="project">
+        <dl class="filesDetail">
+          <dt>K0+800-K1+000图纸</dt>
+          <dd><b>格式：</b>.jpg</dd>
+          <dd><b>所在类：</b>台帐附件</dd>
+          <dd><b>上传者：</b>陈工</dd>
+          <dd><b>上传时间：</b>  2014-11-20 14:20</dd>
+          <dd><b>备注/描述：</b>内容内容内容内容</dd>
+        </dl>
+      </div>
+    </div>
+</body>

s-project-section-files.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+    <script src=js/bootstrap.js></script> 
+    <script src=js/global.js></script>
+    <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
+</head>
+<body>
+    <div class="wrapTop">
+        <div class="userInfo fR">
+            <div class="dropdown">
+                <div class="dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <span class="glyphicon glyphicon-option-vertical topImg"></span>
+                </div>
+                <ul class="dropdown-menu" id="dropdownMenu" aria-labelledby="dropdownMenu1">
+                    <li><a href="index.html">首页</a></li>
+                    <li><a href="#">张三</a></li>
+                </ul>
+            </div>
+            <a href="s-project-add.html"></a>
+        </div>
+        <div class="headerLeft fL">
+            <a href="r-project-section.html">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <b>GZ-HJDQ-JL-001</b>
+            </a>
+        </div>
+    </div>
+    <div class="wrapContent">
+        <div class="wrapNav">
+            <ul class="nav nav-tabs">
+                <li role="presentation"><a href="s-project-section-detail.html">标段概况</a></li>
+                <li role="presentation" class="active"><a href="s-project-section-files.html">附件</a></li>
+            </ul>
+        </div>        
+        <div class="project">
+            <div class="filesList">
+              <ul>
+                <li>
+                  <a href="s-project-section-files-detail.html">
+                    <div class="filesListTitle"><span class="glyphicon glyphicon-picture"></span>&nbsp;K0+800-K1+000图纸</div>
+                    <div class="filesListCon">
+                      <p><b>节点：</b>203-1-a 挖土方</p>
+                      <p><b>父节点：</b>1-2-2-1 K0+800-K1+000</p>
+                      <p><b>上传者：</b>陈工</p>
+                      <p><b>上传时间：</b>2014-11-20</p>
+                    </div>
+                  </a>
+                </li>
+                <li>
+                  <a href="s-project-section-files-detail.html">
+                    <div class="filesListTitle"><span class="glyphicon glyphicon-picture"></span>&nbsp;K0+800-K1+000图纸</div>
+                    <div class="filesListCon">
+                      <p><b>节点：</b>203-1-a 挖土方</p>
+                      <p><b>父节点：</b>1-2-2-1 K0+800-K1+000</p>
+                      <p><b>上传者：</b>陈工</p>
+                      <p><b>上传时间：</b>2014-11-20</p>
+                    </div>
+                  </a>
+                </li>
+              </ul>
+            </div>
+        </div>
+    </div>
+</body>

s-project-section.html

@@ -0,0 +1,270 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+    <script src=js/bootstrap.js></script> 
+    <script src=js/global.js></script>
+    <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
+</head>
+<body>
+    <div class="wrapTop">
+        <!-- <div class="userInfo fR">
+            <div class="dropdown">
+                <div class="dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <span class="glyphicon glyphicon-option-vertical topImg"></span>
+                </div>
+                <ul class="dropdown-menu" id="dropdownMenu" aria-labelledby="dropdownMenu1">
+                    <li><a href="#">修改项目名称</a></li>
+                    <li><a href="#">项目分享</a></li>
+                </ul>
+            </div>
+            <a href="r-project-add.html"></a>
+        </div> -->
+        <div class="headerLeft fL">
+            <a href="s-project.html">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <b>黄金大桥项目</b>
+            </a>
+        </div>
+    </div>
+    <div class="wrapContent">
+      <div class="project">
+        <div class="proSection">
+          <!--图表6-->
+          <div id="chartContainer6" style="height: 300px; width: 100%; background-color: transparent; cursor: default;">
+          </div>
+          <!--图表7-->
+          <div id="chartContainer7" style="height: 300px; width: 100%; background-color: transparent; cursor: default;">
+          </div>
+        </div>
+      </div>
+      <div class="wrapGraphic clearfix">
+        <ul>
+          <li>
+            <span class="graphic graphicGreen"></span>
+            截至上期累计完成
+          </li>
+          <li>
+            <span class="graphic graphicBlue"></span>
+            本期完成
+          </li>
+          <li>
+            <span class="graphic graphicGray"></span>
+            本期未完成
+          </li>
+          <li>
+            <span class="graphic graphicRed"></span>
+            未完成
+          </li>
+        </ul>
+      </div>
+      <div>
+        <dl class="projectList">
+          <dt class="openPro openProNot">展开所有标段</dt>
+          <dd class="projectDetail">
+            <a href="s-project-section-detail.html">
+              <div class="title">GZ-HJDQ-JL-001（点我）</div>
+              <p><b>计量期数：</b>共5期</p>
+              <p><b>总价：</b>￥5,000,000.00</p>
+              <div class="progress">
+                <div class="progress-bar progress-bar-success" style="width: 45%;" data-placement="bottom" data-toggle="tooltip" data-original-title="截止上期累计完成：￥731,121,121.00">45%</div>
+                <div class="progress-bar" style="width:25%;" data-placement="bottom" data-toggle="tooltip" data-original-title="本期完成：￥31,121,121.00">25%</div>
+                <div class="progress-bar progress-gary" style="width:30%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未完成：￥71,121,121.00">30%</div>
+              </div>
+              <span class="trialTip colOrange">本期审核中</span>
+            </a>
+          </dd>
+          <dd class="projectDetail">
+            <a href="s-project-section-detail.html">
+              <div class="title">GZ-HJDQ-JL-002</div>
+              <p><b>计量期数：</b>共5期</p>
+              <p><b>总价：</b>￥5,000,000.00</p>
+              <div class="progress">
+                <div class="progress-bar progress-bar-success" style="width: 29%;" data-placement="bottom" data-toggle="tooltip" data-original-title="截止上期累计完成：￥731,121,121.00">29%</div>
+                <div class="progress-bar" style="width:5%;" data-placement="bottom" data-toggle="tooltip" data-original-title="本期完成：￥31,121,121.00">5%</div>
+                <div class="progress-bar progress-gary" style="width:66%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未完成：￥71,121,121.00">66%</div>
+              </div>
+              <span class="trialTip colGreen">已完成</span>
+            </a>
+          </dd>
+          <dd class="projectDetail">
+            <a href="s-project-section-detail.html">
+              <div class="title">GZ-HJDQ-JL-003</div>
+              <p><b>计量期数：</b>共5期</p>
+              <p><b>总价：</b>￥5,000,000.00</p>
+              <div class="progress">
+                <div class="progress-bar progress-bar-success" style="width: 0%;" data-placement="bottom" data-toggle="tooltip" data-original-title="截止上期累计完成：￥731,121,121.00">0%</div>
+                <div class="progress-bar" style="width:0%;" data-placement="bottom" data-toggle="tooltip" data-original-title="本期完成：￥31,121,121.00">0%</div>
+                <div class="progress-bar progress-gary" style="width:0%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未完成：￥71,121,121.00">0%</div>
+              </div>
+              <span class="trialTip colOrange">本期审核中</span>
+            </a>
+          </dd>
+        </dl>
+      </div>
+    </div>
+
+
+
+    <script type="text/javascript">
+        // 路径配置
+        require.config({
+            paths:{ 
+                'echarts' : 'http://echarts.baidu.com/build/echarts'
+            }
+        });
+        
+        // 使用
+        require(
+            [
+                'echarts',
+                'echarts/chart/pie', // 使用柱状图就加载bar模块，按需加载
+                'echarts/chart/bar'
+            ],
+            function(ec) {
+                //5 期数组成//
+                // 基于准备好的dom，初始化echarts图表
+                var myChart = ec.init(document.getElementById('chartContainer6'));   
+                var option = {
+                  color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
+                          '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
+                          '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
+                          '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],                   
+                  title : {
+                      text: '标段计量分布',
+                      x:'left'
+                  },
+                  tooltip : {
+                      trigger: 'item',
+                      formatter: "{a} <br/>{b}：<br>{c} 元<br>占标段：{d} %"
+                  },
+                  calculable : true,
+                  series : [
+                      {
+                          name:'标段计量分布',
+                          type:'pie',
+                          radius : '40%',
+                          center: ['50%', 155],
+                          data:[
+                              {value:27814964.00, name:'GZ-HJDQ-JL-001'},
+                              {value:41043186.10, name:'GZ-HJDQ-JL-002'},
+                              {value:42917475.00, name:'GZ-HJDQ-JL-003'}
+                          ]
+                      }
+                  ]
+                };
+                // 为echarts对象加载数据 
+                myChart.setOption(option); 
+                //5 期数组成//
+                //6 标段计量分布//
+                // 基于准备好的dom，初始化echarts图表
+                var myChart = ec.init(document.getElementById('chartContainer7'));   
+                var option = {
+                          color:['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
+                          '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
+                          '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
+                          '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],
+                          title : {
+                              text: '标段按月进度'
+                          },
+                          tooltip : {
+                              trigger: 'axis',
+                              formatter: "{b} <br/>{a}：{c} %<br/>{a1}：{c1} %<br/>{a2}：{c2} %"
+                          },
+                          legend: {
+                              data:['GZ-HJDQ-JL-001','GZ-HJDQ-JL-002','GZ-HJDQ-JL-003']
+                          },
+                          toolbox: {
+                              show : true,
+                              feature : {
+                                  magicType : {show: true, type: ['line', 'bar']}
+                              }
+                          },
+    dataZoom : {
+        show : true,
+        realtime: true,
+        start :0,
+        end : 100
+    },
+    xAxis : [
+        {
+                                  type : 'category',
+                                  boundaryGap : false,
+            data : [
+                '2013年2月','3月','4月','5月','6月','7月','8月','9月','10月'
+            ]
+        }
+    ],
+    yAxis : [
+                              {
+                                  type : 'value',
+                                  axisLabel : {
+                                      formatter: '{value} %'
+                                  },
+                                  splitArea : {show : true}
+                              }
+                          ],
+    series : [
+                              {
+                                  name:'GZ-HJDQ-JL-001',
+                                  type:'line',
+                                  itemStyle: {
+                                      normal: {
+                                          lineStyle: {
+                                              shadowColor : 'rgba(0,0,0,0.4)',
+                                              shadowBlur: 5,
+                                              shadowOffsetX: 3,
+                                              shadowOffsetY: 3
+                                          }
+                                      }
+                                  },
+                                  data:[10, 10, 30, 40, 50, 60, 80, 85, 100]
+                              },
+                              {
+                                  name:'GZ-HJDQ-JL-002',
+                                  type:'line',
+                                  itemStyle: {
+                                      normal: {
+                                          lineStyle: {
+                                              shadowColor : 'rgba(0,0,0,0.4)',
+                                              shadowBlur: 5,
+                                              shadowOffsetX: 3,
+                                              shadowOffsetY: 3
+                                          }
+                                      }
+                                  },
+                                  data:[20, 0, 10, 10, 10, 10, 10, 5, 15]
+                              },
+                              {
+                                  name:'GZ-HJDQ-JL-003',
+                                  type:'line',
+                                  itemStyle: {
+                                      normal: {
+                                          lineStyle: {
+                                              shadowColor : 'rgba(0,0,0,0.4)',
+                                              shadowBlur: 5,
+                                              shadowOffsetX: 3,
+                                              shadowOffsetY: 3
+                                          }
+                                      }
+                                  },
+                                  data:[10, 0, 10, 15, 15, 5, 5, 5, 15]
+                              }
+                          ]
+};
+                    
+                    
+                // 为echarts对象加载数据 
+                myChart.setOption(option); 
+                //3 标段计量分布//
+            }
+        );
+    </script>
+</body>

s-project.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+    <script src=js/bootstrap.js></script> 
+    <script src=js/global.js></script>
+</head>
+<body>
+    <div class="wrapTop">
+        <div class="userInfo fR">
+            <div class="dropdown">
+                <div class="dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <button type="button" class="btn btn-primary btn-xs">排序</button>
+                </div>
+                <ul class="dropdown-menu" id="dropdownMenu" aria-labelledby="dropdownMenu1">
+                    <li><a href="#">创建时间</a></li>
+                    <li><a href="#">最近审批</a></li>
+                    <li><a href="#">进度完成度</a></li>
+                </ul>
+            </div>
+        </div>
+        <div class="headerLeft fL">
+            <a href="index.html">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <b>编制项目</b>
+            </a>
+        </div>
+    </div>
+    <div class="wrapContent">
+        <div class="project">
+            <h3>您软件编制的项目</h3>
+            <ul>
+                <li class="clearfix">
+                    <a href="s-project-section.html">
+                        <div class="title">黄金大桥项目<span>（2个标段）</span></div>
+                        <p>业主单位：X至xx公路工程建设办</p>
+                        <p>我的标段：3</p>
+                        <p>2012-07-13</p>
+                        <div class="detail">
+                            <p data-toggle="tooltip" data-placement="bottom" data-original-title="0号台帐合同：￥499,500,000.00 变更：+￥500,000.00">总价：￥500,000,000.00元 (<span class="colRed">+￥500,000.00</span>)</p>
+                            <div class="progress">
+                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 65%;" data-toggle="tooltip" data-placement="bottom" title="累计完成：￥499,500,000.00">65%</div>
+                            </div>
+                        </div>
+                    </a>
+                </li>
+                <li class="clearfix">
+                    <a href="s-project-section.html">
+                        <div class="title">XXX公路</div>
+                        <p>2012-07-13</p>
+                        <div class="detail">
+                            <p data-toggle="tooltip" data-placement="bottom" data-original-title="0号台帐合同：￥499,500,000.00 变更：+￥500,000.00">总价：￥500,000,000.00元 (<span class="colGreen">-￥500,000.00</span>)</p>
+                            <div class="progress">
+                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 65%;" data-toggle="tooltip" data-placement="bottom" data-original-title="累计完成：￥499,500,000.00">65%</div>
+                            </div>
+                        </div>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</body>

w-project-add.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+</head>
+<body>
+    <div class="wrapTop">
+        <div class="userInfo fR">
+            <span class="glyphicon glyphicon-ok topImg"></span>
+        </div>
+        <div class="headerLeft fL">
+            <a href="w-project.html">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <b>添加项目</b>
+            </a>
+        </div>
+    </div>
+    <div class="wrapContent">
+        <div class="projectFrom">
+            <div class="form-group">
+                <input type="text" class="form-control" id="user" placeholder="项目名称">
+            </div>
+        </div>
+    </div>
+</body>

w-project-detail.html

@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+    <script src=js/bootstrap.js></script> 
+    <script src=js/global.js></script>
+    <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
+</head>
+<body>
+    <div class="wrapTop">
+        <div class="userInfo fR">
+            <div class="dropdown">
+                <div class="dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <span class="glyphicon glyphicon-option-vertical topImg"></span>
+                </div>
+                <ul class="dropdown-menu" id="dropdownMenu" aria-labelledby="dropdownMenu1">
+                    <li><a href="w-project-edit.html">修改项目名称</a></li>
+                    <li><a href="#">项目分享</a></li>
+                </ul>
+            </div>
+        </div>
+        <div class="headerLeft fL">
+            <a href="w-project.html">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <b>黄金大桥项目</b>
+            </a>
+        </div>
+    </div>
+    <div class="wrapContent">
+        <div class="wrapNav">
+            <ul class="nav nav-tabs">
+                <li role="presentation" class="active"><a href="w-project-detail.html">项目汇总</a></li>
+                <li role="presentation"><a href="w-project-section.html">标段列表</a></li>
+            </ul>
+        </div>
+        <div class="project">
+            <div class="proSection">
+                <!--图表1-->
+                <div id="chartContainer1" style="height: 300px; width: 100%; background-color: transparent; cursor: default;">
+                </div>
+                <!--图表2-->
+                <div id="chartContainer2" style="height: 300px; width: 100%; background-color: transparent; cursor: default;">
+                </div>
+                <!--图表3-->
+                <div id="chartContainer3" style="height: 300px; width: 100%; background-color: transparent; cursor: default;">
+                </div>
+            </div>
+        </div>
+    </div>
+    <script type="text/javascript">
+        // 路径配置
+        require.config({
+            paths:{ 
+                'echarts' : 'http://echarts.baidu.com/build/echarts'
+            }
+        });
+        
+        // 使用
+        require(
+            [
+                'echarts',
+                'echarts/chart/pie', // 使用柱状图就加载bar模块，按需加载
+                'echarts/chart/bar'
+            ],
+            function(ec) {
+                //1 标段计量分布//
+                // 基于准备好的dom，初始化echarts图表
+                var myChart = ec.init(document.getElementById('chartContainer1'));   
+                var option = {
+                  color: ['#e9af68','#57b7b6','#e4575a','#959eac','#ffa500',
+                          '#d38b70','#8fb7cf','#cd5c5c','#5c616b','#40e0d0',
+                          '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
+                          '#6699FF','#ff6666','#3cb371','#b8860b','#30e0e0'], 
+                  title : {
+                      text: '标段计量分布',
+                      x:'left'
+                  },
+                  tooltip : {
+                      trigger: 'item',
+                      formatter: "{a} <br/>{b}：{c} <br>占总项目：{d} %"
+                  },
+                  legend: {
+                    selectedMode:false,
+                      orient : 'vertical',
+                      x : 'left',
+                      y : 'center',
+                      data:['土建合同','监理合同','设计合同','机电合同']
+                  },
+                  calculable : true,
+                  series : [
+                      {
+                          name:'标段计量分布',
+                          type:'pie',
+                          radius : '60%',
+                          center: ['55%', 175],
+                          data:[
+                              {value:27814964.00, name:'土建合同'},
+                              {value:41043186.10, name:'监理合同'},
+                              {value:42917475.00, name:'设计合同'},
+                              {value:27634982.00, name:'机电合同'}
+                          ]
+                      }
+                  ]
+                };
+                // 为echarts对象加载数据 
+                myChart.setOption(option); 
+                //1 标段计量分布//
+                //2 标段计量进度//
+                var myChart = ec.init(document.getElementById('chartContainer2'));   
+                var option = {
+                  color:["#e9af68","#57b7b6","#e4575a"],
+                  title : {
+                    text: '标段计量进度',
+                    },
+    tooltip : {
+        trigger: 'axis',
+        formatter: "{b}  <br/>{a}：{c}元 <br/>{a1}：{c1}元<br/>{a2}：{c2} %"
+    },
+    legend: {
+        data:['总价','累计完成计量','完成进度百分比']
+    },
+    xAxis : [
+        {
+            type : 'category',
+            data : ['土建合同','监理合同','设计合同','机电合同']
+        }
+    ],
+    yAxis : [
+        {
+            type : 'value',
+            name : '金额',
+            position:'left',
+            axisLabel : {
+                formatter: '{value} 元'
+            },
+            splitArea : {show : true}
+        },
+        {
+            type : 'value',
+            position:'right',
+            max:'100',
+            axisLabel : {
+                formatter: '{value} %'
+            },
+            splitLine : {show : true}
+        }
+    ],
+    series : [
+        {
+            name:'总价',
+            type:'bar',
+            data:[27814964.00,41043186.10, 42917475.00, 27634982.00],
+        },
+        {
+            name:'累计完成计量',
+            type:'bar',
+            data:[20571481.02,28770211.71, 23427801.00, 1708798.00],
+        },
+        {
+            name:'完成进度百分比',
+            type:'line',
+            yAxisIndex: 1,
+            data:[73.95,70,54.58,6.18],
+        }
+    ]
+                };
+                // 为echarts对象加载数据 
+                myChart.setOption(option); 
+                //2 标段计量进度//
+                //3 标段计量分布//
+                // 基于准备好的dom，初始化echarts图表
+                var myChart = ec.init(document.getElementById('chartContainer3'));   
+                var option = {
+                          color:["#e9af68","#57b7b6"],
+                          title : {
+                              text: '项目按月进度'
+                          },
+                          tooltip : {
+                              trigger: 'axis',
+                              formatter: "{b} <br/>{a}：{c} %<br/>{a1}：{c1} %"
+                          },
+                          legend: {
+                              data:['累计完成','本月完成']
+                          },
+                          toolbox: {
+                              show : true,
+                              feature : {
+                                  magicType : {show: true, type: ['line', 'bar']}
+                              }
+                          },
+    dataZoom : {
+        show : true,
+        realtime: true,
+        start : 0,
+        end : 100
+    },
+    xAxis : [
+        {
+                                  type : 'category',
+                                  boundaryGap : false,
+            data : [
+                '2013年2月','3月','4月','5月','6月','7月','8月','9月','10月'
+            ]
+        }
+    ],
+    yAxis : [
+                              {
+                                  type : 'value',
+                                  axisLabel : {
+                                      formatter: '{value} %'
+                                  },
+                                  splitArea : {show : true}
+                              }
+                          ],
+    series : [
+                              {
+                                  name:'累计完成',
+                                  type:'line',
+                                  itemStyle: {
+                                      normal: {
+                                          lineStyle: {
+                                              shadowColor : 'rgba(0,0,0,0.4)',
+                                              shadowBlur: 5,
+                                              shadowOffsetX: 3,
+                                              shadowOffsetY: 3
+                                          }
+                                      }
+                                  },
+                                  data:[10, 10, 30, 40, 50, 60, 80, 85, 100]
+                              },
+                              {
+                                  name:'本月完成',
+                                  type:'line',
+                                  itemStyle: {
+                                      normal: {
+                                          lineStyle: {
+                                              shadowColor : 'rgba(0,0,0,0.4)',
+                                              shadowBlur: 5,
+                                              shadowOffsetX: 3,
+                                              shadowOffsetY: 3
+                                          }
+                                      }
+                                  },
+                                  data:[10, 0, 20, 10, 10, 10, 10, 5, 15]
+                              }
+                          ]
+};
+                    
+                    
+                // 为echarts对象加载数据 
+                myChart.setOption(option); 
+                //3 标段计量分布//
+            }
+        );
+    </script>
+</body>

w-project-edit.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+</head>
+<body>
+    <div class="wrapTop">
+        <div class="userInfo fR">
+            <span class="glyphicon glyphicon-ok topImg"></span>
+        </div>
+        <div class="headerLeft fL">
+            <a href="w-project-detail.html">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <b>修改项目名称</b>
+            </a>
+        </div>
+    </div>
+    <div class="wrapContent">
+        <div class="projectFrom">
+            <div class="form-group">
+                <input type="text" class="form-control" id="user" placeholder="项目名称" value="黄金大桥项目">
+            </div>
+        </div>
+    </div>
+</body>

w-project-section-detail.html

@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+    <script src=js/bootstrap.js></script> 
+    <script src=js/global.js></script>
+    <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
+</head>
+<body>
+    <div class="wrapTop">
+        <div class="userInfo fR">
+            <div class="dropdown">
+                <div class="dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <span class="glyphicon glyphicon-option-vertical topImg"></span>
+                </div>
+                <ul class="dropdown-menu" id="dropdownMenu" aria-labelledby="dropdownMenu1">
+                    <li><a href="#">修改项目名称</a></li>
+                    <li><a href="#">项目分享</a></li>
+                </ul>
+            </div>
+            <a href="w-project-add.html"></a>
+        </div>
+        <div class="headerLeft fL">
+            <a href="w-project-section.html">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <b>GZ-HJDQ-JL-001</b>
+            </a>
+        </div>
+    </div>
+    <div class="wrapContent">
+        <div class="wrapNav">
+            <ul class="nav nav-tabs">
+                <li role="presentation" class="active"><a href="w-project-section-detail.html">标段概况</a></li>
+                <li role="presentation"><a href="w-project-section-files.html">附件</a></li>
+            </ul>
+        </div>        
+        <div class="project">
+            <div class="proSection">
+                <!--图表4-->
+                <div id="chartContainer4" style="height: 300px; width: 100%;">
+                </div>
+                <!--图表5-->
+                <div id="chartContainer5" style="height: 300px; width: 100%;">
+                </div>
+            </div>
+            <div class="projectSeList">
+                <dl class="projectTable">
+                  <dt>第七期（上报：2015-09-09；通过：2015-09-13</dt>
+                  <dd>
+                    <table class="table table-hover">
+                      <tr>
+                        <td>
+                          <p>本期合同计量</p>
+                          <b>￥5,000,000.00</b>
+                        </td>
+                        <td>
+                          <p>本期数量变更计量</p>
+                          <b>￥233,453,000.00</b>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <p>截止上期累计完成</p>
+                          <b>￥5,000,000.00</b>
+                        </td>
+                        <td>
+                          <p>本期完成计量</p>
+                          <b>￥233,453,000.00</b>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <p>累计完成计量</p>
+                          <b>￥233,453,000.00</b>
+                        </td>
+                        <td></td>
+                      </tr>
+                    </table>
+                  </dd>
+                </dl>
+                <dl class="projectTable">
+                  <dt>第六期（上报：2015-09-09；通过：2015-09-13</dt>
+                  <dd>
+                    <table class="table table-hover">
+                      <tr>
+                        <td>
+                          <p>本期合同计量</p>
+                          <b>￥5,000,000.00</b>
+                        </td>
+                        <td>
+                          <p>本期数量变更计量</p>
+                          <b>￥233,453,000.00</b>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <p>截止上期累计完成</p>
+                          <b>￥5,000,000.00</b>
+                        </td>
+                        <td>
+                          <p>本期完成计量</p>
+                          <b>￥233,453,000.00</b>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td>
+                          <p>累计完成计量</p>
+                          <b>￥233,453,000.00</b>
+                        </td>
+                        <td></td>
+                      </tr>
+                    </table>
+                  </dd>
+                </dl>
+            </div>
+        </div>
+    </div>
+
+    <script type="text/javascript">
+        // 路径配置
+        require.config({
+            paths:{ 
+                'echarts' : 'http://echarts.baidu.com/build/echarts'
+            }
+        });
+        
+        // 使用
+        require(
+            [
+                'echarts',
+                'echarts/chart/pie', // 使用柱状图就加载bar模块，按需加载
+                'echarts/chart/bar'
+            ],
+            function(ec) {
+                //4 标段期数计量进度//
+                var myChart = ec.init(document.getElementById('chartContainer4'));   
+                var option = {
+                  color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
+                          '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
+                          '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
+                          '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],                  
+    tooltip : {
+        trigger: 'axis'
+    },
+    calculable : true,
+    legend: {
+        data:['本期合同计量','本期数量变更计量','截至上期累计完成','本期完成计量','完成度']
+    },
+    xAxis : [
+        {
+            type : 'category',
+            splitLine : {show : true},
+            data : ['第一期','第二期','第三期','第四期','第五期','第六期','第七期']
+        }
+    ],
+    yAxis : [
+        {
+            type : 'value',
+            position: 'left',
+            splitArea : {show : true}
+        },
+        {
+            type : 'value',
+            name:'完成度',
+            axisLabel : {
+                formatter: '{value} %'
+            },
+            position: 'right',
+            splitArea : {show : true}
+        }
+    ],
+    series : [
+        {
+            name:'本期合同计量',
+            type:'bar',
+            tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+            stack: '合同',
+            data:[320, 332, 301, 334, 390, 330, 320]
+        },
+        {
+            name:'本期数量变更计量',
+            type:'bar',
+            tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+            stack: '合同',
+            data:[320, -20, 301, 334, 390, 330, 320]
+        },
+        {
+            name:'截至上期累计完成',
+            type:'bar',
+            tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+            stack: '完成',
+            data:[120, 132, 101, 134, 90, 230, 210]
+        },
+        {
+            name:'本期完成计量',
+            type:'bar',
+            tooltip : {trigger: 'item',formatter: "{b}  <br/>{a}：{c}元"},
+            stack: '完成',
+            data:[220, 182, 191, 234, 290, 330, 310]
+        },
+        {
+            name:'完成度',
+            type:'line',
+            tooltip : {trigger: 'axis',formatter: "{b}占总标段<br/>{a}：{c} %"},
+            yAxisIndex: 1,
+            data:[10, 15, 20, 13, 11, 9, 5]
+        },
+    ]
+};
+                    
+                // 为echarts对象加载数据 
+                myChart.setOption(option); 
+                //4 标段期数计量进度//
+                //5 期数组成//
+                // 基于准备好的dom，初始化echarts图表
+                var myChart = ec.init(document.getElementById('chartContainer5'));   
+                var option = {
+                  color: ['#e9af68','#57b7b6','#e4575a','#959eac','#6699FF',
+                          '#d38b70','#8fb7cf','#cd5c5c','#ffa500','#40e0d0',
+                          '#1e90ff','#ff6347','#7b68ee','#00fa9a','#ffd700',
+                          '#5c616b','#ff6666','#3cb371','#b8860b','#30e0e0'],                   
+                  title : {
+                      text: '期数计量组成',
+                      x:'left'
+                  },
+                  tooltip : {
+                      trigger: 'item',
+                      formatter: "{a} <br/>{b}：{c} 元<br>占标段：{d} %"
+                  },
+                  calculable : true,
+                  series : [
+                      {
+                          name:'标段计量分布',
+                          type:'pie',
+                          radius : '40%',
+                          center: ['45%', 155],
+                          data:[
+                              {value:27814964.00, name:'第一期'},
+                              {value:41043186.10, name:'第二期'},
+                              {value:42917475.00, name:'第三期'},
+                              {value:27634982.00, name:'第四期'},
+                              {value:27634982.00, name:'第五期'},
+                              {value:27634982.00, name:'第六期'},
+                              {value:27634982.00, name:'第七期'}
+                          ]
+                      }
+                  ]
+                };
+                // 为echarts对象加载数据 
+                myChart.setOption(option); 
+                //5 期数组成//
+            }
+        );
+    </script>
+
+</body>

w-project-section-files-detail.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+    <script src=js/bootstrap.js></script> 
+    <script src=js/global.js></script>
+    <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
+</head>
+<body>
+    <div class="wrapTop">
+        <div class="userInfo fR">
+            <div class="dropdown">
+                <div class="dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <span class="glyphicon glyphicon-option-vertical topImg"></span>
+                </div>
+                <ul class="dropdown-menu" id="dropdownMenu" aria-labelledby="dropdownMenu1">
+                    <li><a href="index.html">首页</a></li>
+                    <li><a href="#">张三</a></li>
+                </ul>
+            </div>
+        </div>
+        <div class="headerLeft fL">
+            <a href="w-project-section-files.html">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <b>文件详情</b>
+            </a>
+        </div>
+    </div>
+    <div class="wrapContent">        
+      <div class="project">
+        <dl class="filesDetail">
+          <dt>K0+800-K1+000图纸</dt>
+          <dd><b>格式：</b>.jpg</dd>
+          <dd><b>所在类：</b>台帐附件</dd>
+          <dd><b>上传者：</b>陈工</dd>
+          <dd><b>上传时间：</b>  2014-11-20 14:20</dd>
+          <dd><b>备注/描述：</b>内容内容内容内容</dd>
+        </dl>
+      </div>
+    </div>
+</body>

w-project-section-files.html

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+    <script src=js/bootstrap.js></script> 
+    <script src=js/global.js></script>
+    <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
+</head>
+<body>
+    <div class="wrapTop">
+        <div class="userInfo fR">
+            <div class="dropdown">
+                <div class="dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <span class="glyphicon glyphicon-option-vertical topImg"></span>
+                </div>
+                <ul class="dropdown-menu" id="dropdownMenu" aria-labelledby="dropdownMenu1">
+                    <li><a href="#">修改项目名称</a></li>
+                    <li><a href="#">项目分享</a></li>
+                </ul>
+            </div>
+            <a href="w-project-add.html"></a>
+        </div>
+        <div class="headerLeft fL">
+            <a href="w-project-section.html">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <b>GZ-HJDQ-JL-001</b>
+            </a>
+        </div>
+    </div>
+    <div class="wrapContent">
+        <div class="wrapNav">
+            <ul class="nav nav-tabs">
+                <li role="presentation"><a href="w-project-section-detail.html">标段概况</a></li>
+                <li role="presentation" class="active"><a href="w-project-section-files.html">附件</a></li>
+            </ul>
+        </div>        
+        <div class="project">
+            <div class="filesList">
+              <ul>
+                <li>
+                  <a href="w-project-section-files-detail.html">
+                    <div class="filesListTitle"><span class="glyphicon glyphicon-picture"></span>&nbsp;K0+800-K1+000图纸</div>
+                    <div class="filesListCon">
+                      <p><b>节点：</b>203-1-a 挖土方</p>
+                      <p><b>父节点：</b>1-2-2-1 K0+800-K1+000</p>
+                      <p><b>上传者：</b>陈工</p>
+                      <p><b>上传时间：</b>2014-11-20</p>
+                    </div>
+                  </a>
+                </li>
+                <li>
+                  <a href="w-project-section-files-detail.html">
+                    <div class="filesListTitle"><span class="glyphicon glyphicon-picture"></span>&nbsp;K0+800-K1+000图纸</div>
+                    <div class="filesListCon">
+                      <p><b>节点：</b>203-1-a 挖土方</p>
+                      <p><b>父节点：</b>1-2-2-1 K0+800-K1+000</p>
+                      <p><b>上传者：</b>陈工</p>
+                      <p><b>上传时间：</b>2014-11-20</p>
+                    </div>
+                  </a>
+                </li>
+              </ul>
+            </div>
+        </div>
+    </div>
+</body>

w-project-section.html

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+    <script src=js/bootstrap.js></script> 
+    <script src=js/global.js></script>
+    <script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
+</head>
+<body>
+    <div class="wrapTop">
+        <div class="userInfo fR">
+            <div class="dropdown">
+                <div class="dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <span class="glyphicon glyphicon-option-vertical topImg"></span>
+                </div>
+                <ul class="dropdown-menu" id="dropdownMenu" aria-labelledby="dropdownMenu1">
+                    <li><a href="w-project-edit.html">修改项目名称</a></li>
+                    <li><a href="#">项目分享</a></li>
+                </ul>
+            </div>
+            <a href="w-project-add.html"></a>
+        </div>
+        <div class="headerLeft fL">
+            <a href="w-project.html">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <b>黄金大桥项目</b>
+            </a>
+        </div>
+    </div>
+    <div class="wrapContent">
+        <div class="wrapNav">
+            <ul class="nav nav-tabs">
+                <li role="presentation"><a href="w-project-detail.html">项目汇总</a></li>
+                <li role="presentation" class="active"><a href="w-project-section.html">标段列表</a></li>
+            </ul>
+        </div>        
+        <div class="wrapGraphic clearfix">
+          <ul>
+            <li>
+              <span class="graphic graphicGreen"></span>
+              截至上期累计完成
+            </li>
+            <li>
+              <span class="graphic graphicBlue"></span>
+              本期完成
+            </li>
+            <li>
+              <span class="graphic graphicGray"></span>
+              本期未完成
+            </li>
+            <li>
+              <span class="graphic graphicRed"></span>
+              未完成
+            </li>
+          </ul>
+        </div>
+        <div class="projectSeList">
+          <ul>
+            <li>
+              <div class="projectSection">
+                <div class="title"><a href="#">黄金大桥项目&nbsp;<span class="glyphicon glyphicon-cog"></span></a></div>
+                <p>总价：<b>￥123,122,212.00</b></p>
+                <div class="progress">
+                  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 65%;" data-toggle="tooltip" data-placement="bottom" title="累计完成：￥499,500,000.00">65%</div>
+                  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 35%;" data-toggle="tooltip" data-placement="bottom" title="未完成：￥71,121,121.00">35%</div>
+                </div>
+              </div>
+              <dl class="projectList">
+                <dt class="openPro">展开所有标段</dt>
+                <dd class="projectDetail projectDetailNot">
+                  <a href="w-project-section-detail.html">
+                    <div class="title">GZ-HJDQ-JL-001（点我）</div>
+                    <p><b>计量期数：</b>共5期</p>
+                    <p><b>总价：</b>￥5,000,000.00</p>
+                    <div class="progress">
+                      <div class="progress-bar progress-bar-success" style="width: 45%;" data-placement="bottom" data-toggle="tooltip" data-original-title="截止上期累计完成：￥731,121,121.00">45%</div>
+                      <div class="progress-bar" style="width:25%;" data-placement="bottom" data-toggle="tooltip" data-original-title="本期完成：￥31,121,121.00">25%</div>
+                      <div class="progress-bar progress-gary" style="width:30%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未完成：￥71,121,121.00">30%</div>
+                    </div>
+                    <span class="trialTip colOrange">本期审核中</span>
+                  </a>
+                </dd>
+                <dd class="projectDetail projectDetailNot">
+                  <a href="w-project-section-detail.html">
+                    <div class="title">GZ-HJDQ-JL-002</div>
+                    <p><b>计量期数：</b>共5期</p>
+                    <p><b>总价：</b>￥5,000,000.00</p>
+                    <div class="progress">
+                      <div class="progress-bar progress-bar-success" style="width: 29%;" data-placement="bottom" data-toggle="tooltip" data-original-title="截止上期累计完成：￥731,121,121.00">29%</div>
+                      <div class="progress-bar" style="width:5%;" data-placement="bottom" data-toggle="tooltip" data-original-title="本期完成：￥31,121,121.00">5%</div>
+                      <div class="progress-bar progress-gary" style="width:66%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未完成：￥71,121,121.00">66%</div>
+                    </div>
+                    <span class="trialTip colGreen">已完成</span>
+                  </a>
+                </dd>
+                <dd class="projectDetail projectDetailNot">
+                  <a href="w-project-section-detail.html">
+                    <div class="title">GZ-HJDQ-JL-003</div>
+                    <p><b>计量期数：</b>共5期</p>
+                    <p><b>总价：</b>￥5,000,000.00</p>
+                    <div class="progress">
+                      <div class="progress-bar progress-bar-success" style="width: 0%;" data-placement="bottom" data-toggle="tooltip" data-original-title="截止上期累计完成：￥731,121,121.00">0%</div>
+                      <div class="progress-bar" style="width:0%;" data-placement="bottom" data-toggle="tooltip" data-original-title="本期完成：￥31,121,121.00">0%</div>
+                      <div class="progress-bar progress-gary" style="width:0%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未完成：￥71,121,121.00">0%</div>
+                    </div>
+                    <span class="trialTip colGray">未上报</span>
+                  </a>
+                </dd>
+              </dl>
+            </li>
+            <li>
+              <div class="projectSection">
+                <div class="title"><a href="#">监理合同目&nbsp;<span class="glyphicon glyphicon-cog"></span></a></div>
+                <p>总价：<b>￥123,122,212.00</b></p>
+                <div class="progress">
+                  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 65%;" data-toggle="tooltip" data-placement="bottom" title="累计完成：￥499,500,000.00">65%</div>
+                  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 35%;" data-toggle="tooltip" data-placement="bottom" title="未完成：￥71,121,121.00">35%</div>
+                </div>
+              </div>
+              <dl class="projectList">
+                <dt class="openPro">展开所有标段</dt>
+                <dd class="projectDetail projectDetailNot">
+                  <a href="w-project-section-detail.html">
+                    <div class="title">GZ-HJDQ-JL-001（点我）</div>
+                    <p><b>计量期数：</b>共5期</p>
+                    <p><b>总价：</b>￥5,000,000.00</p>
+                    <div class="progress">
+                      <div class="progress-bar progress-bar-success" style="width: 45%;" data-placement="bottom" data-toggle="tooltip" data-original-title="截止上期累计完成：￥731,121,121.00">45%</div>
+                      <div class="progress-bar" style="width:25%;" data-placement="bottom" data-toggle="tooltip" data-original-title="本期完成：￥31,121,121.00">25%</div>
+                      <div class="progress-bar progress-gary" style="width:30%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未完成：￥71,121,121.00">30%</div>
+                    </div>
+                    <span class="trialTip colOrange">本期审核中</span>
+                  </a>
+                </dd>
+                <dd class="projectDetail projectDetailNot">
+                  <a href="w-project-section-detail.html">
+                    <div class="title">GZ-HJDQ-JL-002</div>
+                    <p><b>计量期数：</b>共5期</p>
+                    <p><b>总价：</b>￥5,000,000.00</p>
+                    <div class="progress">
+                      <div class="progress-bar progress-bar-success" style="width: 29%;" data-placement="bottom" data-toggle="tooltip" data-original-title="截止上期累计完成：￥731,121,121.00">29%</div>
+                      <div class="progress-bar" style="width:5%;" data-placement="bottom" data-toggle="tooltip" data-original-title="本期完成：￥31,121,121.00">5%</div>
+                      <div class="progress-bar progress-gary" style="width:66%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未完成：￥71,121,121.00">66%</div>
+                    </div>
+                    <span class="trialTip colGreen">已完成</span>
+                  </a>
+                </dd>
+                <dd class="projectDetail projectDetailNot">
+                  <a href="w-project-section-detail.html">
+                    <div class="title">GZ-HJDQ-JL-003</div>
+                    <p><b>计量期数：</b>共5期</p>
+                    <p><b>总价：</b>￥5,000,000.00</p>
+                    <div class="progress">
+                      <div class="progress-bar progress-bar-success" style="width: 0%;" data-placement="bottom" data-toggle="tooltip" data-original-title="截止上期累计完成：￥731,121,121.00">0%</div>
+                      <div class="progress-bar" style="width:0%;" data-placement="bottom" data-toggle="tooltip" data-original-title="本期完成：￥31,121,121.00">0%</div>
+                      <div class="progress-bar progress-gary" style="width:0%;" data-placement="bottom" data-toggle="tooltip" data-original-title="未完成：￥71,121,121.00">0%</div>
+                    </div>
+                    <span class="trialTip colGray">未上报</span>
+                  </a>
+                </dd>
+              </dl>
+            </li>
+          </ul>
+        </div>
+    </div>
+</body>

w-project.html

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang=zh-cn>
+<head>
+    <meta charset=utf-8>
+    <title>纵横计量支付系统</title>
+    <meta name=description content=计量支付>
+    <meta name=copyright content=smartcost.com.cn>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel=stylesheet href=css/bootstrap.css>
+    <link rel=stylesheet href=css/style.css>
+    <script src=js/jquery-1.9.1.min.js></script>
+    <script src=js/bootstrap.js></script> 
+    <script src=js/global.js></script>
+</head>
+<body>
+    <div class="wrapTop">
+        <div class="userInfo fR">
+            <div class="dropdown fL">
+                <div class="dropdown-toggle" id="dropdownMenu1" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
+                    <button type="button" class="btn btn-primary btn-xs">排序</button>
+                </div>
+                <ul class="dropdown-menu" id="dropdownMenu" aria-labelledby="dropdownMenu1">
+                    <li><a href="#">创建时间</a></li>
+                    <li><a href="#">最近审批</a></li>
+                    <li><a href="#">进度完成度</a></li>
+                </ul>
+            </div>
+            <a href="w-project-add.html"><span class="glyphicon glyphicon-plus topImg"></span></a>      
+        </div>
+        <div class="headerLeft fL">
+            <a href="index.html">
+                <span class="glyphicon glyphicon-chevron-left"></span>
+                <b>项目管理</b>
+            </a>
+        </div>
+    </div>
+    <div class="wrapContent">
+        <div class="project">
+            <h3>您创建的项目</h3>
+            <ul>
+                <li class="clearfix">
+                    <a href="w-project-detail.html">
+                        <div class="title">黄金大桥项目</div>
+                        <p>标段总计：89</p>
+                        <p>2012-07-13</p>
+                        <div class="detail">
+                            <p data-toggle="tooltip" data-placement="bottom" data-original-title="0号台帐合同：￥499,500,000.00 变更：+￥500,000.00">总价：￥500,000,000.00元 (<span class="colRed">+￥500,000.00</span>)</p>
+                            <div class="progress">
+                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 65%;" data-toggle="tooltip" data-placement="bottom" title="累计完成：￥499,500,000.00">65%</div>
+                                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 35%;" data-toggle="tooltip" data-placement="bottom" title="未完成：￥499,500,000.00">35%</div>
+                            </div>
+                        </div>
+                    </a>
+                </li>
+                <li class="clearfix">
+                    <a href="w-project-detail.html">
+                        <div class="title">重庆XX公路</div>
+                        <p>标段总计：89</p>
+                        <p>2012-07-13</p>
+                        <div class="detail">
+                            <p data-toggle="tooltip" data-placement="bottom" data-original-title="0号台帐合同：￥499,500,000.00 变更：+￥500,000.00">总价：￥500,000,000.00元 (<span class="colGreen">-￥500,000.00</span>)</p>
+                            <div class="progress">
+                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 65%;" data-toggle="tooltip" data-placement="bottom" data-original-title="累计完成：￥499,500,000.00">65%</div>
+                                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 35%;" data-toggle="tooltip" data-placement="bottom" title="未完成：￥499,500,000.00">35%</div>
+                            </div>
+                        </div>
+                    </a>
+                </li>
+                <li class="clearfix">
+                    <a href="w-project-detail.html">
+                        <div class="title">黄金大桥项目</div>
+                        <p>标段总计：89</p>
+                        <p>2012-07-13</p>
+                        <div class="detail">
+                            <p data-toggle="tooltip" data-placement="bottom" data-original-title="0号台帐合同：￥499,500,000.00 变更：+￥500,000.00">总价：￥500,000,000.00元 (<span class="colRed">+￥500,000.00</span>)</p>
+                            <div class="progress">
+                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 65%;" data-toggle="tooltip" data-placement="bottom" data-original-title="累计完成：￥499,500,000.00">65%</div>
+                                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 35%;" data-toggle="tooltip" data-placement="bottom" title="未完成：￥499,500,000.00">35%</div>
+                            </div>
+                        </div>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</body>