提交

css/index.css

@@ -30,7 +30,7 @@ body {
   height: 100vh;
   width: 100%;
   font-weight: 400;
-  background-color: #dfdfdf;
+  background-color: #eceff5;
   overflow: hidden;
   position: relative;
   top: 0;
@@ -89,7 +89,6 @@ body {
 .item_big {
   display: flex;
   justify-content: space-between;
-  background-color: #fff;
 }
 
 .item_big .labelStyle,
@@ -238,7 +237,6 @@ body {
   max-width: 1200px;
   margin: 0 auto;
   height: 100%;
-  background-color: #e9e9eb;
 }
 
 .skeleton .rightBody {
@@ -373,11 +371,9 @@ body {
 
 .skeleton .iframe {
   /* border: 1px solid #000; */
-  background-color: #fff;
   border-radius: 5px;
   /* width: 500px; */
   height: 100%;
-  padding: 3px;
   margin: 0 auto;
 }
 
@@ -400,10 +396,3 @@ body {
   -webkit-animation-delay: 0.8s;
   animation-delay: 0.8s;
 }
-
-/* 页面访问 */
-.pageAccess {
-  padding: 1em;
-  background-color: #fff;
-  overflow-y: scroll;
-}

css/loading.css

@@ -0,0 +1,638 @@
+/* Welcome to Compass.
+ * In this file you should write your main styles. (or centralize your imports)
+ * Import this file using the following HTML or equivalent:
+ * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
+/* line 5, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
+
+/* line 22, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+html {
+  line-height: 1;
+}
+
+/* line 24, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+ol, ul {
+  list-style: none;
+}
+
+/* line 26, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* line 28, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+  vertical-align: middle;
+}
+
+/* line 30, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+q, blockquote {
+  quotes: none;
+}
+/* line 103, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+q:before, q:after, blockquote:before, blockquote:after {
+  content: "";
+  content: none;
+}
+
+/* line 32, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+a img {
+  border: none;
+}
+
+/* line 116, C:/Ruby22-x64/lib/ruby/gems/2.2.0/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
+article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
+  display: block;
+}
+
+/* line 14, ../sass/loading.scss */
+.cpt-loading-mask * {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+/* line 18, ../sass/loading.scss */
+.cpt-loading-mask.column {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+  z-index: 100;
+  -moz-transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+/* line 31, ../sass/loading.scss */
+.cpt-loading-mask.column .div-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 260px;
+  background: rgba(0, 0, 0, 0.6);
+  -moz-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  -moz-transform: translate3d(-50%, -50%, 0);
+  -webkit-transform: translate3d(-50%, -50%, 0);
+  transform: translate3d(-50%, -50%, 0);
+  -moz-border-radius: 12px;
+  -webkit-border-radius: 12px;
+  border-radius: 12px;
+  padding: 16px;
+}
+/* line 42, ../sass/loading.scss */
+.cpt-loading-mask.column .div-loading .loading {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  background: transparent;
+  margin: 0 auto;
+}
+/* line 50, ../sass/loading.scss */
+.cpt-loading-mask.column .div-loading .loading.origin div {
+  width: 80%;
+  height: 80%;
+  position: absolute;
+  left: 10%;
+  top: 10%;
+  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
+  opacity: 1;
+  -moz-animation: load 2.28s linear infinite;
+  -webkit-animation: load 2.28s linear infinite;
+  animation: load 2.28s linear infinite;
+}
+/* line 59, ../sass/loading.scss */
+.cpt-loading-mask.column .div-loading .loading.origin div span {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #FBC9B9;
+  position: absolute;
+  left: 50%;
+  margin-top: -10px;
+  margin-left: -10px;
+}
+/* line 72, ../sass/loading.scss */
+.cpt-loading-mask.column .div-loading .loading.origin div:nth-child(1) {
+  -moz-animation-delay: 0.2s;
+  -webkit-animation-delay: 0.2s;
+  animation-delay: 0.2s;
+}
+/* line 75, ../sass/loading.scss */
+.cpt-loading-mask.column .div-loading .loading.origin div:nth-child(2) {
+  -moz-animation-delay: 0.4s;
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+/* line 78, ../sass/loading.scss */
+.cpt-loading-mask.column .div-loading .loading.origin div:nth-child(3) {
+  -moz-animation-delay: 0.6s;
+  -webkit-animation-delay: 0.6s;
+  animation-delay: 0.6s;
+}
+/* line 81, ../sass/loading.scss */
+.cpt-loading-mask.column .div-loading .loading.origin div:nth-child(4) {
+  -moz-animation-delay: 0.8s;
+  -webkit-animation-delay: 0.8s;
+  animation-delay: 0.8s;
+}
+/* line 84, ../sass/loading.scss */
+.cpt-loading-mask.column .div-loading .loading.origin div:nth-child(5) {
+  -moz-animation-delay: 1s;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+/* line 90, ../sass/loading.scss */
+.cpt-loading-mask.column .div-loading .loading.pic {
+  width: 80px;
+  height: 80px;
+}
+/* line 94, ../sass/loading.scss */
+.cpt-loading-mask.column .div-loading .loading.pic img {
+  width: 100%;
+  height: 100%;
+}
+/* line 101, ../sass/loading.scss */
+.cpt-loading-mask.column .div-loading .loading-title {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  padding: 2px 0;
+  font-size: 16px;
+  margin-bottom: 20px;
+  white-space: nowrap;
+  overflow: hidden;
+  -ms-text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+}
+/* line 112, ../sass/loading.scss */
+.cpt-loading-mask.column .div-loading .loading-discription {
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 12px;
+  margin-top: 20px;
+}
+/* line 123, ../sass/loading.scss */
+.cpt-loading-mask.row {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: transparent;
+  z-index: 100;
+  -moz-transform: translateZ(0);
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+/* line 136, ../sass/loading.scss */
+.cpt-loading-mask.row .div-loading {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 260px;
+  background: rgba(0, 0, 0, 0.6);
+  display: -webkit-flex;
+  display: flex;
+  -webkit-align-items: center;
+  align-items: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+  -moz-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  -moz-transform: translate3d(-50%, -50%, 0);
+  -webkit-transform: translate3d(-50%, -50%, 0);
+  transform: translate3d(-50%, -50%, 0);
+  -moz-border-radius: 12px;
+  -webkit-border-radius: 12px;
+  border-radius: 12px;
+  padding: 15px;
+}
+/* line 151, ../sass/loading.scss */
+.cpt-loading-mask.row .div-loading .loading {
+  position: relative;
+  width: 60px;
+  height: 60px;
+  background: transparent;
+  float: left;
+}
+/* line 160, ../sass/loading.scss */
+.cpt-loading-mask.row .div-loading .loading.origin div {
+  width: 80%;
+  height: 80%;
+  position: absolute;
+  left: 10%;
+  top: 10%;
+  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
+  opacity: 1;
+  -moz-animation: load 2.28s linear infinite;
+  -webkit-animation: load 2.28s linear infinite;
+  animation: load 2.28s linear infinite;
+}
+/* line 169, ../sass/loading.scss */
+.cpt-loading-mask.row .div-loading .loading.origin div span {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #FBC9B9;
+  position: absolute;
+  left: 50%;
+  margin-top: -10px;
+  margin-left: -10px;
+}
+/* line 182, ../sass/loading.scss */
+.cpt-loading-mask.row .div-loading .loading.origin div:nth-child(1) {
+  -moz-animation-delay: 0.2s;
+  -webkit-animation-delay: 0.2s;
+  animation-delay: 0.2s;
+}
+/* line 185, ../sass/loading.scss */
+.cpt-loading-mask.row .div-loading .loading.origin div:nth-child(2) {
+  -moz-animation-delay: 0.4s;
+  -webkit-animation-delay: 0.4s;
+  animation-delay: 0.4s;
+}
+/* line 188, ../sass/loading.scss */
+.cpt-loading-mask.row .div-loading .loading.origin div:nth-child(3) {
+  -moz-animation-delay: 0.6s;
+  -webkit-animation-delay: 0.6s;
+  animation-delay: 0.6s;
+}
+/* line 191, ../sass/loading.scss */
+.cpt-loading-mask.row .div-loading .loading.origin div:nth-child(4) {
+  -moz-animation-delay: 0.8s;
+  -webkit-animation-delay: 0.8s;
+  animation-delay: 0.8s;
+}
+/* line 194, ../sass/loading.scss */
+.cpt-loading-mask.row .div-loading .loading.origin div:nth-child(5) {
+  -moz-animation-delay: 1s;
+  -webkit-animation-delay: 1s;
+  animation-delay: 1s;
+}
+/* line 200, ../sass/loading.scss */
+.cpt-loading-mask.row .div-loading .loading.pic {
+  width: 80px;
+  height: 80px;
+}
+/* line 204, ../sass/loading.scss */
+.cpt-loading-mask.row .div-loading .loading.pic img {
+  width: 100%;
+  height: 100%;
+}
+/* line 211, ../sass/loading.scss */
+.cpt-loading-mask.row .div-loading .loading-title {
+  width: 72%;
+  text-align: center;
+  color: #fff;
+  font-size: 16px;
+  padding: 2px 0;
+  padding-left: 20px;
+  margin-bottom: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  -ms-text-overflow: ellipsis;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+}
+/* line 223, ../sass/loading.scss */
+.cpt-loading-mask.row .div-loading .loading-discription {
+  display: none;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-size: 12px;
+  margin-top: 20px;
+}
+
+/* line 236, ../sass/loading.scss */
+.animated {
+  animation-duration: 0.5s;
+  animation-fill-mode: both;
+}
+
+/* line 241, ../sass/loading.scss */
+.animated.infinite {
+  animation-iteration-count: infinite;
+}
+
+@-webkit-keyframes fadeInNoTransform {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes fadeInNoTransform {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+/* line 256, ../sass/loading.scss */
+.fadeInNoTransform {
+  -webkit-animation-name: fadeInNoTransform;
+  animation-name: fadeInNoTransform;
+}
+
+@-webkit-keyframes fadeOutNoTransform {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes fadeOutNoTransform {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+/* line 269, ../sass/loading.scss */
+.fadeOutNoTransform {
+  -webkit-animation-name: fadeOutNoTransform;
+  animation-name: fadeOutNoTransform;
+}
+
+@-webkit-keyframes load {
+  0% {
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  10% {
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+  50% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
+    opacity: 1;
+    -moz-transform: rotate(160deg);
+    -ms-transform: rotate(160deg);
+    -webkit-transform: rotate(160deg);
+    transform: rotate(160deg);
+  }
+  62% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+    opacity: 0;
+  }
+  65% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+    opacity: 0;
+    -moz-transform: rotate(200deg);
+    -ms-transform: rotate(200deg);
+    -webkit-transform: rotate(200deg);
+    transform: rotate(200deg);
+  }
+  90% {
+    -moz-transform: rotate(340deg);
+    -ms-transform: rotate(340deg);
+    -webkit-transform: rotate(340deg);
+    transform: rotate(340deg);
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-moz-keyframes load {
+  0% {
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  10% {
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+  50% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
+    opacity: 1;
+    -moz-transform: rotate(160deg);
+    -ms-transform: rotate(160deg);
+    -webkit-transform: rotate(160deg);
+    transform: rotate(160deg);
+  }
+  62% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+    opacity: 0;
+  }
+  65% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+    opacity: 0;
+    -moz-transform: rotate(200deg);
+    -ms-transform: rotate(200deg);
+    -webkit-transform: rotate(200deg);
+    transform: rotate(200deg);
+  }
+  90% {
+    -moz-transform: rotate(340deg);
+    -ms-transform: rotate(340deg);
+    -webkit-transform: rotate(340deg);
+    transform: rotate(340deg);
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-ms-keyframes load {
+  0% {
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  10% {
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+  50% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
+    opacity: 1;
+    -moz-transform: rotate(160deg);
+    -ms-transform: rotate(160deg);
+    -webkit-transform: rotate(160deg);
+    transform: rotate(160deg);
+  }
+  62% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+    opacity: 0;
+  }
+  65% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+    opacity: 0;
+    -moz-transform: rotate(200deg);
+    -ms-transform: rotate(200deg);
+    -webkit-transform: rotate(200deg);
+    transform: rotate(200deg);
+  }
+  90% {
+    -moz-transform: rotate(340deg);
+    -ms-transform: rotate(340deg);
+    -webkit-transform: rotate(340deg);
+    transform: rotate(340deg);
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes load {
+  0% {
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  10% {
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+  50% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
+    opacity: 1;
+    -moz-transform: rotate(160deg);
+    -ms-transform: rotate(160deg);
+    -webkit-transform: rotate(160deg);
+    transform: rotate(160deg);
+  }
+  62% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+    opacity: 0;
+  }
+  65% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+    opacity: 0;
+    -moz-transform: rotate(200deg);
+    -ms-transform: rotate(200deg);
+    -webkit-transform: rotate(200deg);
+    transform: rotate(200deg);
+  }
+  90% {
+    -moz-transform: rotate(340deg);
+    -ms-transform: rotate(340deg);
+    -webkit-transform: rotate(340deg);
+    transform: rotate(340deg);
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes load {
+  0% {
+    -moz-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  10% {
+    -moz-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+  50% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
+    opacity: 1;
+    -moz-transform: rotate(160deg);
+    -ms-transform: rotate(160deg);
+    -webkit-transform: rotate(160deg);
+    transform: rotate(160deg);
+  }
+  62% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+    opacity: 0;
+  }
+  65% {
+    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
+    opacity: 0;
+    -moz-transform: rotate(200deg);
+    -ms-transform: rotate(200deg);
+    -webkit-transform: rotate(200deg);
+    transform: rotate(200deg);
+  }
+  90% {
+    -moz-transform: rotate(340deg);
+    -ms-transform: rotate(340deg);
+    -webkit-transform: rotate(340deg);
+    transform: rotate(340deg);
+  }
+  100% {
+    -moz-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

item.html

@@ -7,17 +7,24 @@
     <title></title>
     <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css" />
     <link rel="stylesheet" href="./bootstrap/css/bootstrap-theme.min.css" />
+    <link rel="stylesheet" href="./css/loading.css">
     <link rel="stylesheet" href="./css/index.css" />
     <script src="./js/jquery.js"></script>
     <script src="./js/f2.min.js"></script>
     <script src="./bootstrap/js/bootstrap.min.js"></script>
     <style>
+        .pageAccess {
+            padding-right: 5px;
+            overflow-y: scroll;
+        }
+
         .pageAccess .row {
-            padding-left: 15px;
+            width: 100%;
+            margin: 0;
         }
 
-        .pageAccess .col-md-6 {
-            padding-left: 0;
+        .pageAccess .panel {
+            margin-bottom: 5px;
         }
 
         .totalNum {
@@ -46,14 +53,116 @@
             background-color: #333;
         }
 
-        .keyTotle,
-        .valTotle {
+        .numTotle {
+            /* height: 30px;
+            line-height: 30px; */
+            text-align: center;
+            box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
+            margin: 10px 0;
+            padding: 23px 0 18px 0;
+            position: relative;
+        }
+
+        .colflex::after {
+            content: " ";
+            top: 45px;
+            display: block;
+            position: absolute;
+            width: 1px;
             height: 30px;
-            line-height: 30px;
+            background: #EAEAEA;
+        }
+
+        .numTitle {
+            font-size: 24px;
+            height: 1em;
+            color: #1A89B3;
+            font-weight: bold;
+        }
+
+        .numValue {
+            margin-top: 8px;
+            font-size: 12px;
+            color: #919191;
+        }
+
+        .flex {
+            margin: 10px 0;
+            display: flex;
+            padding-top: 23px;
+            padding-bottom: 18px;
+            box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.2);
+        }
+
+        .colflex {
+            flex: 1;
+        }
+
+        .flex .numTotle {
+            box-shadow: none;
+        }
+
+        .colflex .numTotle {
+            margin: 0;
+            padding: 0;
+        }
+
+        .panel-default>.panel-heading {
+            background: #fff;
+            border-bottom: none;
+
+            font-size: 14px;
+            font-family: Adobe Heiti Std;
+            font-weight: normal;
+            color: #1A89B3;
+            position: relative;
+        }
+
+        .panel-heading::after {
+            content: " ";
+            left: 0;
+            top: 8px;
+            display: block;
+            position: absolute;
+            width: 3px;
+            height: 25px;
+            background: #1A89B3;
+        }
+
+        .table-bg {
+            margin: 17px;
+        }
+
+        .table-head {
+            background-color: #ECEFF5;
+            color: #3B3B3B;
+            border-bottom: none;
+        }
+
+        .paging {
+            display: flex;
+            align-items: center;
+        }
+
+        .paging div {
+            border: 1px solid rgb(211, 211, 211);
+            padding: 10px;
+            border-radius: 10px;
+            cursor: pointer;
+            margin: 0 10px;
+            font-size: 14px;
+        }
+
+        .paging div.disable {
+            color: #fff;
+            cursor: not-allowed;
+            background-color: rgb(211, 211, 211);
         }
 
-        .keyTotle {
-            text-align: right;
+        .paging div.active {
+            border: none;
+            background-color: rgb(78, 216, 250);
+            color: #fff;
         }
     </style>
 </head>
@@ -61,69 +170,86 @@
 <body class="pageAccess">
     <div class="panel panel-default total">
         <div class="panel-heading">传播数据</div>
-
     </div>
     <div class="row">
-        <div class="col-md-6">
+        <div class="col-xs-8" style="padding: 0;">
             <div class="panel panel-default">
                 <div class="panel-heading">传播量趋势</div>
                 <canvas id="container" style="width: 100%;height: 100%;" class=""></canvas>
             </div>
         </div>
-        <div class="col-md-6">
+        <div class="col-xs-4" style="padding-right: 0;padding-left: 5px;">
             <div class="panel panel-default">
-                <div class="panel-heading ">
-                    <div class="row">
-                        <div class="col-xs-6" style="padding-left: 0;">部门传播量排行</div>
-                        <div class="col-xs-6" style="text-align: right;">
-                            <div class="btn-group btn-group-xs " role="group">
-                                <div class="btn btn-default typeclick ALL">全部</div>
-                                <div class="btn btn-default typeclick MONTH">月</div>
-                                <div class="btn btn-default typeclick WEEK">周</div>
-                            </div>
-                        </div>
+                <div class="panel-heading">传播平台占比</div>
+                <canvas id="piechart" style="width: 100%;height: 100%;" class=""></canvas>
+            </div>
+        </div>
+    </div>
+    <div class="panel panel-default">
+        <div class="panel-heading ">
+            <div class="row">
+                <div class="col-xs-6" style="padding-left: 0;">部门传播量排行</div>
+                <div class="col-xs-6" style="text-align: right;">
+                    <div class="btn-group btn-group-xs " role="group">
+                        <div class="btn btn-default typeclick ALL">全部</div>
+                        <div class="btn btn-default typeclick MONTH">月</div>
+                        <div class="btn btn-default typeclick WEEK">周</div>
                     </div>
                 </div>
-                <canvas id="barChart" style="width: 100%;height: 70vw;" class=""></canvas>
             </div>
         </div>
-        <div class="col-md-6">
-            <div class="panel panel-default">
-                <div class="panel-heading">任务统计</div>
-                <table class="table table-striped">
-                    <thead>
-                        <tr>
-                            <td>话题</td>
-                            <td>传播量</td>
-                        </tr>
-                    </thead>
-                    <tbody class="summary">
-                    </tbody>
-                </table>
-            </div>
+        <canvas id="barChart" style="width: 100%;height: 70vw;" class=""></canvas>
+    </div>
+    <div class="panel panel-default">
+        <div class="panel-heading">任务统计</div>
+        <div class="table-bg">
+            <table class="table">
+                <thead class="table-head">
+                    <tr>
+                        <td>话题</td>
+                        <td>传播量</td>
+                    </tr>
+                </thead>
+                <tbody class="summary">
+                </tbody>
+            </table>
         </div>
-        <div class="col-md-6">
-            <div class="panel panel-default">
-                <div class="panel-heading">任务统计</div>
-                <table class="table table-striped">
-                    <thead>
-                        <tr>
-                            <td>部门</td>
-                            <td>账号</td>
-                            <td>平台</td>
-                            <td>时间</td>
-                        </tr>
-                    </thead>
-                    <tbody class="summary1">
-                    </tbody>
-                </table>
+    </div>
+    <div class="panel panel-default">
+        <div class="panel-heading">
+            任务统计
+            <div class="dropdown" style="float: right;color: #2e2e2e;margin-right: 100px;">
+                <div id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                    全部
+                    <span class="caret"></span>
+                </div>
+                <ul class="dropdown-menu" aria-labelledby="dLabel">
+                </ul>
             </div>
         </div>
+        <div class="table-bg">
+            <table class="table">
+                <thead class="table-head">
+                    <tr>
+                        <td>部门</td>
+                        <td>账号</td>
+                        <td>平台</td>
+                        <td>时间</td>
+                    </tr>
+                </thead>
+                <tbody class="summary1">
+                </tbody>
+            </table>
+            <div class="paging"></div>
+        </div>
     </div>
 </body>
 <script src="./js/base.js"></script>
+<script src="./js/page.js"></script>
+<script src="./js/loading.js"></script>
 <script>
-    let linechart = null, barchart = null, type = "ALL";
+    let linechart = null, barchart = null, piechart = null, type = "ALL";
+    let page = 1, pageSize = 10, paging = null;
     let searchObj = getsearch();
     function line1(li) {
         if (linechart) linechart.destroy();
@@ -182,6 +308,63 @@
         linechart.render();
     }
 
+    function pie1(li) {
+        if (piechart) piechart.destroy();
+        piechart = new F2.Chart({
+            id: 'piechart',
+            pixelRatio: window.devicePixelRatio,
+            height: 325
+        });
+        let lis = [];
+        for (let i = 0; i < li.length; i++) {
+            const v = li[i];
+            if (!v.readCount || v.readCount <= 0) continue;
+            lis.push(v);
+        }
+
+        piechart.source(lis, {
+            readCount: {
+                formatter: function formatter(val) {
+                    return val + '%';
+                }
+            }
+        });
+        piechart.tooltip(false);
+        piechart.legend(false);
+        piechart.coord('polar', {
+            transposed: true,
+            innerRadius: 0.7,
+            radius: 0.85
+        });
+        // 配置文本饼图
+        piechart.pieLabel && piechart.pieLabel({
+            sidePadding: 75,
+            label1: function label1(data) {
+                return {
+                    text: data.platform,
+                    fill: '#808080'
+                };
+            },
+            label2: function label2(data) {
+                return {
+                    fill: '#000000',
+                    text: formatnum(data.readCount),
+                    fontWeight: 500,
+                    fill: '#808080',
+                    fontSize: 10
+                };
+            }
+        });
+        piechart.axis(false);
+        piechart.interval()
+            .position('a*readCount')
+            .color('platform', ['#1890FF', '#13C2C2', '#2FC25B', '#FACC14', '#F04864', '#8543E0', '#3436C7', '#223273'])
+            .adjust('stack');
+
+        piechart.render();
+
+    }
+
     function bar1(li) {
         if (barchart) barchart.destroy();
         barchart = new F2.Chart({
@@ -256,13 +439,24 @@
         }).then(data => {
             const li = (data || []).sort((a, b) => {
                 return b.readTotal - a.readTotal
-            });
+            }), obj = {}, list = [];
+
             for (let i = 0; i < li.length; i += 2) {
                 const v = li[i];
                 let tr = $("<tr></tr>");
                 tr.append($(`<td>${v.depName}</td><td>${formatnum(v.readTotal)}</td>`));
-                $(".summary").append(tr)
+                $(".summary").append(tr);
+                (v.list || []).map(p => {
+                    if (obj[p.platform]) {
+                        list[obj[p.platform]].readCount += Number(p.readCount || 0);
+                        list[obj[p.platform]].publishCount += Number(p.publishCount || 0);
+                    } else {
+                        obj[p.platform] = list.length;
+                        list.push({ readCount: p.readCount, publishCount: p.publishCount, platform: p.platform, a: '1' })
+                    }
+                })
             }
+            pie1(list)
         })
     }
 
@@ -284,12 +478,15 @@
                 }
             }
             let keys = Object.keys(k);
-            let d = $("<div class='row'></div>");
+            let d = $("<div class='row'></div>"), s = $("<div class='col-xs-10 '></div>"), n = $("<div class='flex'></div>");
+            let c = ['#FB6161', '#EC72DC', '#F98E53', '#49BED0', '#4BCA8B']
             for (let i = 0; i < keys.length; i++) {
                 const v = keys[i];
-                if (v === '总传播量') d.append($("<div class='col-xs-3 keyTotle'>" + v + "</div><div class='col-xs-9 valTotle'>" + formatnum(k[v]) + "</div>"));
-                else d.append($("<div class='col-xs-3 keyTotle'>" + v + "</div><div class='col-xs-3 valTotle'>" + formatnum(k[v]) + "</div>"))
+                if (v === '总传播量') d.append($("<div class='col-xs-2' style='padding-right: 0'><div class='numTotle'><div class='numTitle'>" + formatnum(k[v]) + "</div><div class='numValue'>" + v + "</div></div></div>"));
+                else n.append($("<div class='colflex'><div class='numTotle'><div class='numTitle' style='color: " + c[i - 1] + "'>" + formatnum(k[v]) + "</div><div class='numValue'>" + v + "</div></div></div>"));
             }
+            s.append(n)
+            d.append(s)
             $('.total').append(d);
         })
     }
@@ -308,22 +505,51 @@
     }
 
     function getdetail() {
+        console.log('--',$('body').loading)
+        $('body').loading({
+            loadingWidth: 240,
+            title: '请稍等!',
+            name: 'test',
+            discription: '',
+            direction: 'column',
+            type: 'origin',
+            // originBg:'#71EA71',
+            originDivWidth: 40,
+            originDivHeight: 40,
+            originWidth: 6,
+            originHeight: 6,
+            smallLoading: false,
+            loadingMaskBg: 'rgba(0,0,0,0.2)'
+        });
         require('POST', {
             url: "/topic/detail",
             data: {
                 depRange: "ALL",
+                page,
+                pageSize,
                 title: searchObj.topic
             }
         }).then(data => {
             const li = (data.data || []).sort((a, b) => {
                 return b.readTotal - a.readTotal
             });
-            for (let i = 0; i < li.length; i += 2) {
+            $(".summary1").html("");
+            for (let i = 0; i < li.length; i++) {
                 const v = li[i];
                 let tr = $("<tr></tr>");
                 tr.append($(`<td>${v.depName}</td><td>${v.name}</td><td>${v.platform}</td><td>${v.publishTime}</td>`));
                 $(".summary1").append(tr)
             }
+            removeLoading('test')
+            if (paging) return
+            paging = new Paging({
+                total: data.total,
+                pageChange(p) {
+                    console.log(p)
+                    page = p;
+                    getdetail()
+                }
+            })
         })
     }
 
@@ -342,6 +568,7 @@
 
         $('.' + type).addClass("btn-primary")
 
+
         gethistory();
         getoverview();
         getread();

js/loading.js

@@ -0,0 +1,162 @@
+//未曾遗忘的青春
+//github  https://github.com/IFmiss/loading
+//显示Loading
+(function($){
+	$.fn.loading = function(options){
+		var $this = $(this);
+		var _this = this;
+		return this.each(function(){
+		    var loadingPosition ='';
+		    var defaultProp = {
+		    	direction: 				'column',												//方向，column纵向   row 横向
+				animateIn: 	 			'fadeInNoTransform',    								//进入类型
+				title:                  '请稍等...',      										//显示什么内容
+				name: 					'loadingName', 											//loading的data-name的属性值  用于删除loading需要的参数
+				type: 			        'origin', 			  									//pic   origin  
+				discription: 			'这是一个描述', 										//loading的描述
+				titleColor: 			'rgba(255,255,255,0.7)',								//title文本颜色
+				discColor: 				'rgba(255,255,255,0.7)',								//disc文本颜色
+				loadingWidth:           260,                									//中间的背景宽度width
+				loadingBg:        		'rgba(0, 0, 0, 0.6)',  									//中间的背景色
+				borderRadius:     		12,                 									//中间的背景色的borderRadius
+				loadingMaskBg:    		'transparent',          								//背景遮罩层颜色
+				zIndex:           		1000001,              									//层级
+
+				// 这是圆形旋转的loading样式  
+				originDivWidth:        	60,           											//loadingDiv的width
+				originDivHeight:       	60,           											//loadingDiv的Height
+
+				originWidth:      		8,                  									//小圆点width
+				originHeight:     		8,                  									//小圆点Height
+				originBg:         		'#fefefe',              								//小圆点背景色
+				smallLoading:     		false,                  								//显示小的loading
+
+				// 这是图片的样式   (pic)
+				imgSrc: 				'http://www.daiwei.org/index/images/logo/dw.png',    	//默认的图片地址
+				imgDivWidth: 			80,           											//imgDiv的width
+				imgDivHeight: 			80,           											//imgDiv的Height
+
+				flexCenter: 	 		false, 													//是否用flex布局让loading-div垂直水平居中
+				flexDirection: 			'row',													//row column  flex的方向   横向 和 纵向				
+				mustRelative: 			false, 													//$this是否规定relative
+		    };
+
+
+		    var opt = $.extend(defaultProp,options || {});
+
+		    //根据用户是针对body还是元素  设置对应的定位方式
+		    if($this.selector == 'body'){
+		    	$('body,html').css({
+		    		overflow:'hidden',
+		    	});
+		    	loadingPosition = 'fixed';
+		    }else if(opt.mustRelative){
+		    	$this.css({
+			    	position:'fixed',
+			    });
+			    loadingPosition = 'fixed';
+		    }else{
+		    	loadingPosition = 'fixed';
+		    }
+
+		    defaultProp._showOriginLoading = function(){
+		    	var smallLoadingMargin = opt.smallLoading ? 0 : '-10px';
+		    	if(opt.direction == 'row'){smallLoadingMargin='-6px'}
+
+		    	//悬浮层
+		      	_this.cpt_loading_mask = $('<div class="cpt-loading-mask animated '+opt.animateIn+' '+opt.direction+'" data-name="'+opt.name+'"></div>').css({
+			        'background':opt.loadingMaskBg,
+			        'z-index':opt.zIndex,
+			        'position':loadingPosition,
+				}).appendTo($this);
+
+		      	//中间的显示层
+				_this.div_loading = $('<div class="div-loading"></div>').css({
+			        'background':opt.loadingBg,
+			        'width':opt.loadingWidth,
+			        'height':opt.loadingHeight,
+			        '-webkit-border-radius':opt.borderRadius,
+			        '-moz-border-radius':opt.borderRadius,
+			        'border-radius':opt.borderRadius,
+		      	}).appendTo(_this.cpt_loading_mask);
+
+				if(opt.flexCenter){
+					_this.div_loading.css({
+						"display": "-webkit-flex",
+						"display": "flex",
+						"-webkit-flex-direction":opt.flexDirection,
+						"flex-direction":opt.flexDirection,
+						"-webkit-align-items": "center",
+						"align-items": "center",
+						"-webkit-justify-content": "center",
+						"justify-content":"center",
+					});
+				}
+
+				//loading标题
+	        	_this.loading_title = $('<p class="loading-title txt-textOneRow"></p>').css({
+	        		color:opt.titleColor,
+	        	}).html(opt.title).appendTo(_this.div_loading);
+
+	        	//loading中间的内容  可以是图片或者转动的小圆球
+		     	_this.loading = $('<div class="loading '+opt.type+'"></div>').css({
+			        'width':opt.originDivWidth,
+			        'height':opt.originDivHeight,
+		      	}).appendTo(_this.div_loading);
+
+		     	//描述
+	        	_this.loading_discription = $('<p class="loading-discription txt-textOneRow"></p>').css({
+	        		color:opt.discColor,
+	        	}).html(opt.discription).appendTo(_this.div_loading);
+
+	        	if(opt.type == 'origin'){
+	        		_this.loadingOrigin = $('<div class="div-loadingOrigin"><span></span></div><div class="div-loadingOrigin"><span></span></div><div class="div_loadingOrigin"><span></span></div><div class="div_loadingOrigin"><span></span></div><div class="div_loadingOrigin"><span></span></div>').appendTo(_this.loading);
+			      	_this.loadingOrigin.children().css({
+				        "margin-top":smallLoadingMargin,
+				        "margin-left":smallLoadingMargin,
+				        "width":opt.originWidth,
+				        "height":opt.originHeight,
+				        "background":opt.originBg,
+			      	});
+	        	}	
+
+	        	if(opt.type == 'pic'){
+	        		_this.loadingPic = $('<img src="'+opt.imgSrc+'" alt="loading" />').appendTo(_this.loading);
+	        	}	      
+
+
+		      	//关闭事件冒泡  和默认的事件
+			    _this.cpt_loading_mask.on('touchstart touchend touchmove click',function(e){
+					e.stopPropagation();
+					e.preventDefault();
+			    });
+		    };
+		    defaultProp._createLoading = function(){
+		    	//不能生成两个loading data-name 一样的loading
+		    	if($(".cpt-loading-mask[data-name="+opt.name+"]").length > 0){
+		    		// console.error('loading mask cant has same date-name('+opt.name+'), you cant set "date-name" prop when you create it');
+		    		return
+		    	}
+				
+				defaultProp._showOriginLoading();
+		    };
+		    defaultProp._createLoading();
+		});
+	}
+
+})(jQuery)
+
+//关闭Loading
+function removeLoading(loadingName){
+	var loadingName = loadingName || '';
+	$('body,html').css({
+		overflow:'auto',
+	});
+
+	if(loadingName == ''){
+		$(".cpt-loading-mask").remove();
+	}else{
+		var name = loadingName || 'loadingName';
+		$(".cpt-loading-mask[data-name="+name+"]").remove();		
+	}
+}

js/page.js

@@ -0,0 +1,105 @@
+function Paging(options) {
+    let defaultValue = {
+        total: 0,
+        current: 1,
+        firstText: '首页',
+        prevText: '上一页',
+        nextText: '下一页',
+        lastText: '尾页',
+        PageSize: 10,
+        PageNum: 5,
+        container: document.getElementsByClassName('paging')[0]
+    }
+
+    this.options = Object.assign({}, defaultValue, options);
+    this.show();
+    this.PageClick()
+}
+
+Paging.prototype.show = function () {
+    let disable = "";
+    let PageTotalNum = this.getPageTotalNum();
+    this.options.container.innerHTML = "";
+    if(this.options.current === 1){
+        disable = 'disable'
+    }
+    this.createElement('first ' + disable, this.options.firstText);
+    this.createElement('prev ' + disable, this.options.prevText);
+
+    this.createNumElement();
+
+    disable = ""
+    if(this.options.current === PageTotalNum){
+        disable = 'disable'
+    }
+    this.createElement('next ' + disable, this.options.nextText);
+    this.createElement('last ' + disable, this.options.lastText);
+
+    let span = document.createElement('span');
+    let i = `<i>${this.options.current}</i> /<i>${PageTotalNum}</i>`;
+    span.innerHTML = i;
+    this.options.container.appendChild(span)
+}
+
+Paging.prototype.createNumElement = function() {
+    let min = this.options.current - Math.floor(this.options.PageNum / 2);
+    if(min < 1) {
+        min = 1;
+    }
+    let max = min + this.options.PageNum - 1;
+    let PageTotalNum = this.getPageTotalNum();
+    if (max > PageTotalNum){
+        max = PageTotalNum;
+    }
+    let active = "";
+    for(let i = min; i <= max; i ++) {
+        if(this.options.current === i) {
+            active = 'active';
+        }else{
+            active = '';
+        }
+        this.createElement('pagingDiv ' + active, i);
+    }
+}
+
+Paging.prototype.createElement = function(specialStyle, content) {
+    let oDiv = document.createElement('div');
+    oDiv.className = specialStyle;
+    oDiv.innerText = content;
+    this.options.container.appendChild(oDiv);
+}
+
+Paging.prototype.getPageTotalNum = function() {
+    return Math.ceil(this.options.total / this.options.PageSize)
+}
+
+Paging.prototype.PageClick = function() {
+    let _this = this;
+    let PageTotalNum = this.getPageTotalNum();
+    this.options.container.addEventListener('click', function(e) {
+        if(e.target.classList.contains('first')){
+            _this.toPage(1);
+        } else if (e.target.classList.contains('prev')) {
+            _this.toPage(_this.options.current - 1);
+        } else if (e.target.classList.contains('next')) {
+            _this.toPage(_this.options.current + 1);
+        } else if (e.target.classList.contains('last')) {
+            _this.toPage(PageTotalNum);
+        } else if(e.target.classList.contains('pagingDiv')){
+            _this.toPage(+e.target.innerText);
+        }
+    })
+}
+
+Paging.prototype.toPage = function (page){
+    let PageTotalNum = this.getPageTotalNum();
+    if(page < 1) {
+        page = 1;
+    }
+    if(page > PageTotalNum){
+        page = PageTotalNum;
+    }
+    this.options.current = page;
+    this.options.pageChange && this.options.pageChange(page);
+    this.show()
+}