Pārlūkot izejas kodu

水位图和仪表盘

jackchen0120 5 gadi atpakaļ
vecāks
revīzija
b7e28fef39

+ 13 - 19
package-lock.json

@@ -3490,11 +3490,6 @@
         }
       }
     },
-    "claygl": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/claygl/-/claygl-1.3.0.tgz",
-      "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
-    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -3788,6 +3783,11 @@
         }
       }
     },
+    "comutils": {
+      "version": "1.1.19",
+      "resolved": "https://registry.npmjs.org/comutils/-/comutils-1.1.19.tgz",
+      "integrity": "sha512-JxXB67juILiwhdLwOsYyjUqwWEhHdObI0EClOPk+JDtEuTbac59s0pxGpfCBnNNQ5JommifmcMGneW/4Cg7YWw=="
+    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -4802,15 +4802,6 @@
         "safer-buffer": "^2.1.0"
       }
     },
-    "echarts-gl": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/echarts-gl/-/echarts-gl-1.1.1.tgz",
-      "integrity": "sha512-cRSTU9H+Ay+qCUFowm+2XcxYqCfi/OLK805NISeJunKgJa5p+7p7tnHZoI0qKebjtHu8VbFSOBk9UvWZ01adng==",
-      "requires": {
-        "claygl": "^1.2.1",
-        "zrender": "^4.0.4"
-      }
-    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -11983,6 +11974,14 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.1.6.tgz",
       "integrity": "sha512-GYhn2ynaZlysZMkFE5oCHRUTqE8BWs/a9YbKpNLi0i7xD6KG1EzDqpHQmv1F5gXjr8kL5iIVS8EOtRaVUEXTqA=="
     },
+    "vue-seamless-scroll": {
+      "version": "1.1.21",
+      "resolved": "https://registry.npmjs.org/vue-seamless-scroll/-/vue-seamless-scroll-1.1.21.tgz",
+      "integrity": "sha512-O6n1Ly4Jw8sKaDuibLUX/QEjXRrMX2uHoqqIBBEM/Nyn8pQZpn2VdJDObBtnAS9F0cD8ExDq0mbZgZX6MXzXqQ==",
+      "requires": {
+        "comutils": "^1.1.9"
+      }
+    },
     "vue-style-loader": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.2.tgz",
@@ -12768,11 +12767,6 @@
           "dev": true
         }
       }
-    },
-    "zrender": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/zrender/-/zrender-4.3.0.tgz",
-      "integrity": "sha512-Dii6j2bDsPkxQayuVf2DXJeruIB/mKVxxcGRZQ9GExiBd4c3w7+oBuvo1O/JGHeFeA1nCmSDVDs/S7yKZG1nrA=="
     }
   }
 }

+ 1 - 1
package.json

@@ -9,9 +9,9 @@
   },
   "dependencies": {
     "core-js": "^3.6.4",
-    "echarts-gl": "^1.1.1",
     "vue": "^2.6.11",
     "vue-router": "^3.1.6",
+    "vue-seamless-scroll": "^1.1.21",
     "vuex": "^3.2.0"
   },
   "devDependencies": {

BIN
public/favicon.ico


+ 2 - 1
public/index.html

@@ -10,7 +10,8 @@
   <body>
     <script src="//cdn.bootcdn.net/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
     <script src="//cdn.bootcdn.net/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
-    <!-- <script src="//www.echartsjs.com/zh/dist/echarts-gl.min.js"></script> -->
+    <script src="//www.echartsjs.com/zh/dist/echarts-gl.min.js"></script>
+    <script src="//www.echartsjs.com/resource/echarts-liquidfill-latest/dist/echarts-liquidfill.min.js"></script>
     <script src="//cdn.bootcdn.net/ajax/libs/axios/0.19.0/axios.min.js"></script>
     <noscript>
       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>

+ 1 - 30
src/assets/styles/base.scss

@@ -96,35 +96,6 @@ html {
 }
  
 /*隐藏*/
-.dn{
+.dn {
   display: none;
 }
-
-
-/*@media (min-width:1024px) {
-	body { font-size: 18px; }
-}
-
-@media (min-width:1100px) {
-	body { font-size: 20px; }
-}
-
-@media (min-width:1280px) {
-	body { font-size: 22px; }
-}
-
-@media (min-width:1366px) {
-	body { font-size: 24px; }
-}
-
-@media (min-width:1440px) {
-	body { font-size: 25px; }
-}
-
-@media (min-width:1680px) {
-	body { font-size: 28px; }
-}
-
-@media (min-width:1920px){
-	body { font-size: 33px; }
-}*/

+ 0 - 3883
src/assets/styles/common.css

@@ -1,3883 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head> 
-  <meta charset="utf-8" /> 
-  <meta http-equiv="Pragma" content="no-cache" /> 
-  <meta http-equiv="Expires" content="0" /> 
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
-  <title>10统计图demo</title> 
-  <meta http-equiv="Pragma" content="no-cache" />
-  <meta http-equiv="Cache-Control" content="no-cache" />
-  <meta http-equiv="Expires" content="0" />
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
-  <meta name="renderer" content="webkit" />
-  <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
-  <link href="../eui/css/theme/coolblue/eui.css" rel="stylesheet" type="text/css" />
-  <script>var $relpath = "../";</script>
-  <script src="../eui/eui.js"></script>
-  <script src="../eui/modules/uibase.js"></script>
-  <link href="../ebibase/user/coolrptshow/css/coolrptshow.css" rel="stylesheet" type="text/css" />
-  <link href="../ebipro/user/coolrptdsn/css/floatdlg.css" rel="stylesheet" type="text/css" />
-  <style type="text/css">
-@charset "utf-8";
-/* CSS Document */
-
-.editorscroll {
-        overflow: hidden !important;
-}
-
-@charset "utf-8";
-
-.nh-container{
-		position: absolute;
-		width: 500px;
-		height: 500px;
-		border: 2px solid rgba(92,255,255,0.1);
-		background: rgba(10,106,255,0.1) url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/nhdemo/wange.png) repeat 50% 50% !important;
-		background-blend-mode: screen;
-		overflow: visible;
-}
-
-.nh-container:before,.nh-container:after{
-		content: "";
-		position: absolute;
-		top: -2px;
-		width: 5px;
-		height: 5px;
-		border-color: #0a6aff;
-		border-style: solid;
-		border-top-width: 2px;
-		border-bottom-width:0;
-}
-
-.nh-container:before{
-		left: -2px;
-		border-left-width: 2px;
-		border-right-width: 0;
-}
-
-.nh-container:after{
-		right: -2px;
-		border-left-width: 0;
-		border-right-width: 2px;
-}
-
-.nh-container .nh-content{
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-}
-
-.nh-container .nh-content:before,.nh-container .nh-content:after{
-		content: "";
-		position: absolute;
-		bottom: -2px;
-		width: 5px;
-		height: 5px;
-		border-color: #0a6aff;
-		border-style: solid;
-		border-top-width: 0;
-		border-bottom-width:2px;
-}
-
-.nh-container .nh-content:before{
-		left: -2px;
-		border-left-width: 2px;
-		border-right-width: 0;
-}
-
-.nh-container .nh-content:after{
-		right: -2px;
-		border-left-width: 0;
-		border-right-width: 2px;
-}
-
-.nh-container .nh-container-title{
-		position: absolute;
-		height: 26px;
-		font-size: 16px;
-		font-family: "Microsoft YaHei UI";
-		color: #00c2ff;
-		line-height: 26px;
-		padding: 0 0 0 20px;
-		left: 10px;
-		right: 10px;
-		top: 10px;
-}
-
-.nh-container .nh-container-title:before{
-		content: "";
-		position: absolute;
-		left: 0;
-		top: 50%;
-		margin-top: -7px;
-		width: 14px;
-		height: 14px;
-		background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/nhdemo/nh-container-title.png) no-repeat 0% 0%;
-}
-
-.nh-container .nh-container-body{
-		position: absolute;
-		top: 40px;
-		left: 0px;
-		right: 0px;
-		bottom: 0px;
-}
-@charset "utf-8";
-/* CSS Document */
-.pd-info {
-  position: absolute;
-  width:100%;
-  height: 100%;
-}
-
-.animated {
-  -webkit-animation-duration: 1s;
-  animation-duration: 1s;
-  -webkit-animation-fill-mode: both;
-  animation-fill-mode: both;
-}
-
-@-webkit-keyframes bounceInUp {
-  from,
-		60%,
-		75%,
-		90%,
-		to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 3000px, 0);
-    transform: translate3d(0, 3000px, 0);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(0, -20px, 0);
-    transform: translate3d(0, -20px, 0);
-  }
-  75% {
-    -webkit-transform: translate3d(0, 10px, 0);
-    transform: translate3d(0, 10px, 0);
-  }
-  90% {
-    -webkit-transform: translate3d(0, -5px, 0);
-    transform: translate3d(0, -5px, 0);
-  }
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@keyframes bounceInUp {
-  from,
-		60%,
-		75%,
-		90%,
-		to {
-    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
-  }
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(0, 3000px, 0);
-    transform: translate3d(0, 3000px, 0);
-  }
-  60% {
-    opacity: 1;
-    -webkit-transform: translate3d(0, -20px, 0);
-    transform: translate3d(0, -20px, 0);
-  }
-  75% {
-    -webkit-transform: translate3d(0, 10px, 0);
-    transform: translate3d(0, 10px, 0);
-  }
-  90% {
-    -webkit-transform: translate3d(0, -5px, 0);
-    transform: translate3d(0, -5px, 0);
-  }
-  to {
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-.bounceInUp {
-  -webkit-animation-name: bounceInUp;
-  animation-name: bounceInUp;
-}
-
-.pd-info .pd-info-center {
-  position: absolute;
-  top: 50%;
-  left:50%;
-  width:100%;
-  height: 100%;
-  transform: translate(-50%,-50%);
-}
-.pdt-container {
-  position: absolute;
-}
-
-.pdt-container > div:nth-child(1) {
-  left: -25px !important;
-}
-.pdt-container .pdt-info {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin-left: -2.5em;
-  transform: translate(0%,-50%);
-  white-space: nowrap;
-}
-.before {
-  margin-right: 6px;
-  display: inline-block;
-  width:12px;
-  height: 12px;
-  border-radius: 50%;
-  box-shadow: 0 0 2em, 0 0 4em, 0 0 6em, 0 0 8em, 0 0 10em, 0 0 0 0.5em rgba(255, 255, 0, 0.1);
-}
-
-.pdt-container .pdt-info > span {
-  font-size: 16px;
-  color: #0072bc;
-  vertical-align: middle;
-}
-.pdt-container .pdt-info > span:nth-child(1) {
-  text-decoration: underline;
-}
-.pdt-container .pdt-info > span:nth-child(1):hover {
-  color: #00aeef;
-}
-.pdt-container .pdt-info > span:nth-child(2) {
-  font-family: Arial;
-}
-
-@charset "utf-8";
-/* CSS Document */
-@charset "utf-8";
-/* CSS Document */
-.lineDom{
-    width:100%;
-    height:100%;
-}
-@charset "utf-8";
-/* CSS Document */
-.precent{
-    width:100%;
-    height:100%;
-}
-.precent .updef {
-    position: absolute;
-    width: 68%;
-    height: 8px;
-    left: 3px;
-    top: 47%;
-    background: rgba(6, 21, 104, 0.5);
-    border-radius: 4px;
-    box-shadow: 0px 0px 10px #066fe2 inset;
-}
-.definfo {
-        position: absolute;
-        top: 50%;
-        transform: translate(0%,-50%);
-        white-space: nowrap;
-        font-size: 14px;
-    }
-    .definfo span:nth-child(1){
-        display: block;
-    width: 45px;
-    height: 45px;
-    line-height: 45px;
-    text-align: center;
-    }
-    .definfo span:nth-child(2){
-        display: block;
-        position: absolute;
-        width: 0px;
-        margin-left: 21px;
-    }
-    .definfo0 span:nth-child(1){
-        background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/hnyj/icon_ls.png) repeat 0 0 !important;
-    }
-    .definfo0 span:nth-child(2){
-        height: 60px;
-        border: 1px dashed #3a962f;
-    }
-    .definfo0{
-        margin-top: -62px;
-        margin-left: 30%;
-    }
-    .definfo1 span:nth-child(1){
-        background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/hnyj/icon_hs.png) repeat 0 0 !important;
-    }
-    .definfo1 span:nth-child(2){
-        height: 81px;
-        border: 1px dashed #fff600;
-    }
-    .definfo1{
-        margin-top: -93px;
-    margin-left: 37%;
-    }
-    .definfo2{
-        margin-top: -92px;
-    margin-left: 23%;
-    }
-    .definfo2 span:nth-child(1){
-        background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/hnyj/icon_cs.png) repeat 0 0 !important;
-    }
-    .definfo2 span:nth-child(2){
-        height: 101px;
-    border: 1px dashed #ff9232;
-    }
-    .definfo3{
-        margin-top: -41px;
-    margin-left: 19%;
-    }
-    .definfo3 span:nth-child(1){
-        background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/hnyj/icon_zs.png) repeat 0 0 !important;
-    }
-    .definfo3 span:nth-child(2){
-        height: 55px;
-    border: 1px dashed #5e50e5;
-    }
-    .definfo4{
-        margin-top: -77px;
-    margin-left: 14%;
-    }
-    .definfo4 span:nth-child(1){
-        background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/hnyj/icon_ml.png) repeat 0 0 !important;
-    }
-    .definfo4 span:nth-child(2){
-        height: 72px;
-    border: 1px dashed #00c172;
-    }
-    .definfo5{
-        margin-top: -43px;
-    margin-left: 42%;
-    }
-    .definfo5 span:nth-child(1){
-        background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/hnyj/icon_sl.png) repeat 0 0 !important;
-    }
-    .definfo5 span:nth-child(2){
-        height: 90px;
-    border: 1px dashed #1342f1;
-    }
-    .definfo6{
-        margin-top: -72px;
-    margin-left: 49%;
-    }
-    .definfo6 span:nth-child(1){
-        background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/hnyj/icon_ql.png) repeat 0 0 !important;
-    }
-    .definfo6 span:nth-child(2){
-        height: 101px;
-    border: 1px dashed #0681fd;
-    }
-    .definfo7{
-        margin-top: -51px;
-        margin-left: 55%;
-    }
-    .definfo7 span:nth-child(1){
-        background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/hnyj/icon_qql.png) repeat 0 0 !important;
-    }
-    .definfo7 span:nth-child(2){
-        height: 46px;
-    border: 1px dashed #2bcbe6;
-    }
-@charset "utf-8";
-/* CSS Document */
-@font-face {
-  font-family: 'DIGITALDREAMFAT';
-  src: url("../vfs/root/products/ebi/sys/coolrpt/coolresource/fonts/DIGITALDREAMFAT.eot");
-  src: url("../vfs/root/products/ebi/sys/coolrpt/coolresource/fonts/DIGITALDREAMFAT.eot") format("embedded-opentype"), url("../vfs/root/products/ebi/sys/coolrpt/coolresource/fonts/DIGITALDREAMFAT.woff2") format("woff2"), url("../vfs/root/products/ebi/sys/coolrpt/coolresource/fonts/DIGITALDREAMFAT.woff") format("woff"), url("../vfs/root/products/ebi/sys/coolrpt/coolresource/fonts/DIGITALDREAMFAT.ttf") format("truetype"), url("../vfs/root/products/ebi/sys/coolrpt/coolresource/fonts/DIGITALDREAMFAT.svg#DIGITALDREAMFAT") format("svg");
-}
-.animated {
-  -webkit-animation-duration: 1s;
-  -moz-animation-duration: 1s;
-    -o-animation-duration: 1s;
-       animation-duration: 1s;
-  -webkit-animation-fill-mode: both;
-  -moz-animation-fill-mode: both;
-    -o-animation-fill-mode: both;
-       animation-fill-mode: both;
-}
-.animated.infinite {
-  -webkit-animation-iteration-count: infinite;
-  -moz-animation-iteration-count: infinite;
-    -o-animation-iteration-count: infinite;
-       animation-iteration-count: infinite;
-}
-.pd-info-left{
-    width:100%;
-    height:100%;
-}
-.y-left {
-  position: absolute;
-  top: 16px;
-  left: 30px;
-  width: 234px;
-  height: 234px;
-}
-.y-left > [class^=info-1] {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  background-repeat: no-repeat;
-  background-position: center center;
-}
-.y-left .info-1-0 {
-  background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-1-0.png);
-  -webkit-animation-duration: 20s;
-     -moz-animation-duration: 20s;
-       -o-animation-duration: 20s;
-          animation-duration: 20s;
-}
-.y-left .info-1-1 {
-  background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-1-1.png);
-  -webkit-animation-duration: 20s;
-     -moz-animation-duration: 20s;
-       -o-animation-duration: 20s;
-          animation-duration: 20s;
-  -webkit-animation-delay: 3s;
-     -moz-animation-delay: 3s;
-       -o-animation-delay: 3s;
-          animation-delay: 3s;
-}
-.y-left .info-1-2 {
-  background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-1-2.png);
-  -webkit-animation-duration: 20s;
-     -moz-animation-duration: 20s;
-       -o-animation-duration: 20s;
-          animation-duration: 20s;
-  -webkit-animation-delay: 8s;
-     -moz-animation-delay: 8s;
-       -o-animation-delay: 8s;
-          animation-delay: 8s;
-}
-.y-left .info-1-3 {
-  background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-1-3.png);
-  -webkit-animation-duration: 10s;
-     -moz-animation-duration: 10s;
-       -o-animation-duration: 10s;
-          animation-duration: 10s;
-  -webkit-animation-delay: 5s;
-     -moz-animation-delay: 5s;
-       -o-animation-delay: 5s;
-          animation-delay: 5s;
-}
-.y-left .info-1-4 {
-  background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-1-4.png);
-  -webkit-animation-duration: 5s;
-     -moz-animation-duration: 5s;
-       -o-animation-duration: 5s;
-          animation-duration: 5s;
-}
-
-@-webkit-keyframes rotate {
-  0% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-@-moz-keyframes rotate {
-  0% {
-    -webkit-transform-origin: center;
-    -moz-transform-origin: center;
-         transform-origin: center;
-    -webkit-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-         transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform-origin: center;
-    -moz-transform-origin: center;
-         transform-origin: center;
-    -webkit-transform: rotate(360deg);
-    -moz-transform: rotate(360deg);
-         transform: rotate(360deg);
-  }
-}
-@-o-keyframes rotate {
-  0% {
-    -webkit-transform-origin: center;
-    -o-transform-origin: center;
-       transform-origin: center;
-    -webkit-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-       transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform-origin: center;
-    -o-transform-origin: center;
-       transform-origin: center;
-    -webkit-transform: rotate(360deg);
-    -o-transform: rotate(360deg);
-       transform: rotate(360deg);
-  }
-}
-@keyframes rotate {
-  0% {
-    -webkit-transform-origin: center;
-    -moz-transform-origin: center;
-      -o-transform-origin: center;
-         transform-origin: center;
-    -webkit-transform: rotate(0deg);
-    -moz-transform: rotate(0deg);
-      -o-transform: rotate(0deg);
-         transform: rotate(0deg);
-  }
-  100% {
-    -webkit-transform-origin: center;
-    -moz-transform-origin: center;
-      -o-transform-origin: center;
-         transform-origin: center;
-    -webkit-transform: rotate(360deg);
-    -moz-transform: rotate(360deg);
-      -o-transform: rotate(360deg);
-         transform: rotate(360deg);
-  }
-}
-.rotate {
-  -webkit-animation-name: rotate;
-  -moz-animation-name: rotate;
-    -o-animation-name: rotate;
-       animation-name: rotate;
-  -webkit-animation-timing-function: linear;
-     -moz-animation-timing-function: linear;
-       -o-animation-timing-function: linear;
-          animation-timing-function: linear;
-}
-
-@-webkit-keyframes rotateF {
-  100% {
-    -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(-360deg);
-    transform: rotate(-360deg);
-  }
-}
-
-@-moz-keyframes rotateF {
-  100% {
-    -webkit-transform-origin: center;
-    -moz-transform-origin: center;
-         transform-origin: center;
-    -webkit-transform: rotate(-360deg);
-    -moz-transform: rotate(-360deg);
-         transform: rotate(-360deg);
-  }
-}
-
-@-o-keyframes rotateF {
-  100% {
-    -webkit-transform-origin: center;
-    -o-transform-origin: center;
-       transform-origin: center;
-    -webkit-transform: rotate(-360deg);
-    -o-transform: rotate(-360deg);
-       transform: rotate(-360deg);
-  }
-}
-
-@keyframes rotateF {
-  100% {
-    -webkit-transform-origin: center;
-    -moz-transform-origin: center;
-      -o-transform-origin: center;
-         transform-origin: center;
-    -webkit-transform: rotate(-360deg);
-    -moz-transform: rotate(-360deg);
-      -o-transform: rotate(-360deg);
-         transform: rotate(-360deg);
-  }
-}
-.rotateF {
-  -webkit-animation-name: rotateF;
-  -moz-animation-name: rotateF;
-    -o-animation-name: rotateF;
-       animation-name: rotateF;
-  -webkit-animation-timing-function: linear;
-     -moz-animation-timing-function: linear;
-       -o-animation-timing-function: linear;
-          animation-timing-function: linear;
-}
-@-webkit-keyframes flashPD {
-  0%,
-		90% {
-    opacity: 1;
-  }
-  92%,98% {
-    opacity: 0;
-  }
-  96%,
-		100% {
-    opacity: 1;
-  }
-}
-@-moz-keyframes flashPD {
-  0%,
-		90% {
-    opacity: 1;
-  }
-  92%,98% {
-    opacity: 0;
-  }
-  96%,
-		100% {
-    opacity: 1;
-  }
-}
-@-o-keyframes flashPD {
-  0%,
-		90% {
-    opacity: 1;
-  }
-  92%,98% {
-    opacity: 0;
-  }
-  96%,
-		100% {
-    opacity: 1;
-  }
-}
-@keyframes flashPD {
-  0%,
-		90% {
-    opacity: 1;
-  }
-  92%,98% {
-    opacity: 0;
-  }
-  96%,
-		100% {
-    opacity: 1;
-  }
-}
-.flashPD {
-  -webkit-animation-name: flashPD;
-  -moz-animation-name: flashPD;
-    -o-animation-name: flashPD;
-       animation-name: flashPD;
-}
-
-.y-number {
-  position: absolute;
-  left: 0;
-  padding-left: 290px;
-  -webkit-animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
-     -moz-animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
-       -o-animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
-          animation-timing-function: cubic-bezier(1, 0, 0.6, 0.6);
-}
-.y-number-1 {
-  -webkit-animation-delay: 1s;
-     -moz-animation-delay: 1s;
-       -o-animation-delay: 1s;
-          animation-delay: 1s;
-  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-line-01.png) no-repeat 180px center;
-  height: 60px;
-  top: 15px;
-}
-.y-number-1 .y-number-bg {
-  -webkit-animation-delay: 2s;
-     -moz-animation-delay: 2s;
-       -o-animation-delay: 2s;
-          animation-delay: 2s;
-  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-bg-01.png) no-repeat 50% 50%;
-}
-.y-number-1 .y-number-icon {
-  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-icon-01.png) no-repeat 50% 50%;
-}
-.y-number-2 {
-  -webkit-animation-delay: 1.25s;
-     -moz-animation-delay: 1.25s;
-       -o-animation-delay: 1.25s;
-          animation-delay: 1.25s;
-  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-line-02.png) no-repeat 180px center;
-  height: 60px;
-  top: 70px;
-  padding-left: 350px;
-}
-.y-number-2 .y-number-bg {
-  -webkit-animation-delay: 2.5s;
-     -moz-animation-delay: 2.5s;
-       -o-animation-delay: 2.5s;
-          animation-delay: 2.5s;
-  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-bg-02.png) no-repeat 50% 50%;
-}
-.y-number-2 .y-number-icon {
-  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-icon-02.png) no-repeat 50% 50%;
-}
-.y-number-3 {
-  -webkit-animation-delay: 1.5s;
-     -moz-animation-delay: 1.5s;
-       -o-animation-delay: 1.5s;
-          animation-delay: 1.5s;
-  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-line-02.png) no-repeat 180px center;
-  height: 60px;
-  top: 135px;
-  padding-left: 350px;
-}
-.y-number-3 .y-number-bg {
-  -webkit-animation-delay: 3s;
-     -moz-animation-delay: 3s;
-       -o-animation-delay: 3s;
-          animation-delay: 3s;
-  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-bg-03.png) no-repeat 50% 50%;
-}
-.y-number-3 .y-number-icon {
-  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-icon-03.png) no-repeat 50% 50%;
-}
-.y-number-4 {
-  -webkit-animation-delay: 1.75s;
-     -moz-animation-delay: 1.75s;
-       -o-animation-delay: 1.75s;
-          animation-delay: 1.75s;
-  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-line-01.png) no-repeat 180px center;
-  height: 60px;
-  top: 190px;
-}
-.y-number-4 .y-number-bg {
-  -webkit-animation-delay: 3.5s;
-     -moz-animation-delay: 3.5s;
-       -o-animation-delay: 3.5s;
-          animation-delay: 3.5s;
-  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-bg-04.png) no-repeat 50% 50%;
-}
-.y-number-4 .y-number-icon {
-  background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/info-left-icon-04.png) no-repeat 50% 50%;
-}
-.y-number .y-number-bg {
-  width: 54px;
-  height: 54px;
-  position: absolute;
-  top: 5px;
-  -webkit-animation-duration: 5s;
-     -moz-animation-duration: 5s;
-       -o-animation-duration: 5s;
-          animation-duration: 5s;
-}
-.y-number .y-number-icon {
-  width: 54px;
-  height: 54px;
-  position: absolute;
-  top: 5px;
-}
-.y-number .y-number-text {
-  display: inline-block;
-  color: #0072bc;
-  font-size: 18px;
-  padding: 10px 0 0 60px;
-}
-.y-number .y-number-text > span {
-  display:block;
-}
-.y-number .y-number-text > span:nth-child(2) {
-  font-size: 22px;
-  color: #00aeef;
-  line-height: 28px;
-  padding: 0;
-}
-@-webkit-keyframes fadeInLeft {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(-50%, 0, 0);
-    transform: translate3d(-50%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@-moz-keyframes fadeInLeft {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(-50%, 0, 0);
-    -moz-transform: translate3d(-50%, 0, 0);
-         transform: translate3d(-50%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-         transform: translate3d(0, 0, 0);
-  }
-}
-@-o-keyframes fadeInLeft {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(-50%, 0, 0);
-    transform: translate3d(-50%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    transform: translate3d(0, 0, 0);
-  }
-}
-@keyframes fadeInLeft {
-  from {
-    opacity: 0;
-    -webkit-transform: translate3d(-50%, 0, 0);
-    -moz-transform: translate3d(-50%, 0, 0);
-         transform: translate3d(-50%, 0, 0);
-  }
-  to {
-    opacity: 1;
-    -webkit-transform: translate3d(0, 0, 0);
-    -moz-transform: translate3d(0, 0, 0);
-         transform: translate3d(0, 0, 0);
-  }
-}
-.fadeInLeft {
-  -webkit-animation-name: fadeInLeft;
-  -moz-animation-name: fadeInLeft;
-    -o-animation-name: fadeInLeft;
-       animation-name: fadeInLeft;
-}
-.odometer.odometer-theme-digital{
-    background: transparent!important;
-}
-@charset "utf-8";
-/* CSS Document */
-@charset "utf-8";
-/* CSS Document */
-#nh_radar{
-    width:100%;
-    height:100%;
-}
-@charset "utf-8";
-/* CSS Document */
-.piechartdom{
-    width:100%;
-    height:100%;
-}
-.svg_dom{
-    width:100%;
-    height:100%;
-    position:absolute;
-    top: 0;
-}
-.cir_arrow{
-    width: 17px;
-    height: 17px;
-    offset-distance: 0%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-}
-.cir_arrow1{
-        background: url("vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZHSF/icon_circle1.png") no-repeat 50% 50%;
-        -webkit-animation: cir_arrow1 5s linear infinite;
-    	animation: cir_arrow1 5s linear infinite;
-    	offset-path: path("m117,210c0,-51.65746 41.61878,-93.5 93,-93.5c51.38122,0 93,41.84254 93,93.5c0,51.65746 -41.61878,93.5 -93,93.5c-51.38122,0 -93,-41.84254 -93,-93.5z");
-}
-.cir_arrow2{
-        background: url("vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZHSF/icon_circle2.png") no-repeat 50% 50%;
-        -webkit-animation: cir_arrow2 5s linear infinite;
-   	 	animation: cir_arrow2 5s linear infinite;
-    	offset-path: path("m134,210c0,-41.71271 34.01105,-75.5 76,-75.5c41.98895,0 76,33.78729 76,75.5c0,41.71271 -34.01105,75.5 -76,75.5c-41.98895,0 -76,-33.78729 -76,-75.5z");
-}
-@keyframes cir_arrow1{
-    0%{
-            offset-distance: 0%;
-    opacity: 1;
-    }
-    100%{
-            offset-distance: 100%;
-    opacity: 1;
-    }
-}
-@keyframes cir_arrow2{
-    0%{
-            offset-distance: 100%;
-    opacity: 1;
-    }
-    100%{
-            offset-distance: 0%;
-    opacity: 1;
-    }
-}
-@charset "utf-8";
-/* CSS Document */
-@charset "utf-8";
-/* CSS Document */
-@charset "utf-8";
-/* CSS Document */
-.chart{
-    width:100%;
-    height:100%;
-}
-.pie{
-    position:absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-}
-.pies{
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-repeat: no-repeat;
-    background-position: center center;
-}
-.pie1{
-    background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/triangle/whcircle.png);
-    animation: mymove 20s linear infinite;
-    -webkit-animation:mymove 20s linear infinite;
-}
-.pie2{
-    background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/triangle/circle2.png);
-    animation: moveto 20s linear infinite;
-    -webkit-animation:moveto 20s linear infinite;
-}
-.pie3{
-    background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/triangle/inner.png);
-}
-.pie4{
-    position:absolute;
-    top: 49%;
-    left: 36%;
-    width: 76px;
-    height: 1px;
-      background: linear-gradient(to right,rgb(31,38,103),rgb(90,250,253),rgb(31,38,103));
-}
-@-webkit-keyframes mymove{
-    0%{
-            -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-    }
-    100%{
-        -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-    }
-}
-@keyframes mymove{
-    0%{
-      -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-    }
-    100%{
-        -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-    }
-}
-@-webkit-keyframes moveto{
-    0%{
-            -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-    }
-    100%{
-        -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-    }
-}
-@keyframes moveto{
-    0%{
-            -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-    }
-    100%{
-        -webkit-transform-origin: center;
-    transform-origin: center;
-    -webkit-transform: rotate(-360deg);
-    transform: rotate(-360deg);
-    }
-}
-@charset "utf-8";
-/* CSS Document */
-.rollLine_main{
-    width:100%;
-    height:100%;
-}
-@charset "utf-8";
-/* CSS Document */
-
-.pd-main{
-      position: absolute;
-      height:100%;
-      width:100%;
-}
-.pd-main [class^=chart] {
-  position: absolute;
-  -webkit-transform-origin: left top;
-     -moz-transform-origin: left top;
-      -ms-transform-origin: left top;
-       -o-transform-origin: left top;
-          transform-origin: left top;
-}
-.pd-main .chart4 {
-  width: 500px;
-  height: 410px;
-    top:55%;
-    left:50%;
-    -webkit-transform:translate(-50%,-50%);
-       -moz-transform:translate(-50%,-50%);
-        -ms-transform:translate(-50%,-50%);
-         -o-transform:translate(-50%,-50%);
-            transform:translate(-50%,-50%);
-}
-
-.compass {
-  width: 100%;
-  height: 100%;
-  -webkit-transform: scale(0.9);
-     -moz-transform: scale(0.9);
-      -ms-transform: scale(0.9);
-       -o-transform: scale(0.9);
-          transform: scale(0.9);
-}
-.compass .compass-bg-1, .compass .compass-bg-2, .compass .compass-bg-3, .compass .compass-bg-4, .compass .compass-bg-5, .compass .compass-bg-6, .compass .compass-bg-7 {
-  position: absolute;
-  bottom: 0px;
-  left: 50%;
-  -webkit-transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
-     -moz-transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
-          transform: rotateX(-80deg) rotateZ(45deg) rotateY(0deg);
-}
-.compass [class^=compass-bg-] {
-  position: absolute;
-  bottom: 0px;
-}
-.compass .compass-bg-1 {
-  margin-left: -250px;
-  bottom: -200px;
-  width: 500px;
-  height: 500px;
-  background: -webkit-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
-  background: -moz-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
-  background: -o-repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
-  background: repeating-radial-gradient(transparent, rgba(0, 138, 174, 0.2));
-  display: none;
-}
-.compass .compass-bg-2 {
-  margin-left: -220px;
-  bottom: -170px;
-  width: 440px;
-  height: 440px;
-  background: -webkit-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
-  background: -moz-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
-  background: -o-repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
-  background: repeating-radial-gradient(transparent, rgba(250, 118, 159, 0.2));
-  display: none;
-}
-.compass .compass-bg-3 {
-  margin-left: -190px;
-  bottom: -140px;
-  width: 380px;
-  height: 380px;
-  background: -webkit-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
-  background: -moz-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
-  background: -o-repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
-  background: repeating-radial-gradient(transparent, rgba(10, 58, 103, 0.2));
-}
-.compass .compass-bg-4 {
-  margin-left: -160px;
-  bottom: -110px;
-  width: 320px;
-  height: 320px;
-  background: -webkit-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
-  background: -moz-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
-  background: -o-repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
-  background: repeating-radial-gradient(transparent, rgba(112, 67, 103, 0.2));
-}
-.compass .compass-bg-5 {
-  margin-left: -130px;
-  bottom: -80px;
-  width: 260px;
-  height: 260px;
-  -webkit-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
-     -moz-box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
-          box-shadow: inset 0 0 10px 10px rgba(44, 183, 190, 0.8);
-}
-.compass .compass-bg-6 {
-  margin-left: -100px;
-  bottom: -50px;
-  width: 200px;
-  height: 200px;
-  background: -webkit-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
-  background: -moz-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
-  background: -o-repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
-  background: repeating-radial-gradient(transparent, rgba(246, 116, 160, 0.2));
-  display: none;
-}
-.compass .compass-bg-7 {
-  margin-left: -70px;
-  bottom: -20px;
-  width: 140px;
-  height: 140px;
-  background: -webkit-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
-  background: -moz-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
-  background: -o-repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
-  background: repeating-radial-gradient(transparent, rgba(102, 97, 70, 0.2));
- -webkit-animation: bgshadow 3s linear infinite;     
- -moz-animation: bgshadow 3s linear infinite;
-  -o-animation: bgshadow 3s linear infinite;
-    animation: bgshadow 3s linear infinite;
-}
-@-webkit-keyframes bgshadow {
-  0%,100% {
-    -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
-            box-shadow: 0 0 0 rgba(255, 255, 255, 0);
-  }
-  50% {
-    -webkit-box-shadow: 0 0 30em white;
-            box-shadow: 0 0 30em white;
-  }
-}
-@-moz-keyframes bgshadow {
-  0%,100% {
-    -moz-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
-         box-shadow: 0 0 0 rgba(255, 255, 255, 0);
-  }
-  50% {
-    -moz-box-shadow: 0 0 30em white;
-         box-shadow: 0 0 30em white;
-  }
-}
-@-o-keyframes bgshadow {
-  0%,100% {
-    box-shadow: 0 0 0 rgba(255, 255, 255, 0);
-  }
-  50% {
-    box-shadow: 0 0 30em white;
-  }
-}
-@keyframes bgshadow {
-  0%,100% {
-    -webkit-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
-       -moz-box-shadow: 0 0 0 rgba(255, 255, 255, 0);
-            box-shadow: 0 0 0 rgba(255, 255, 255, 0);
-  }
-  50% {
-    -webkit-box-shadow: 0 0 30em white;
-       -moz-box-shadow: 0 0 30em white;
-            box-shadow: 0 0 30em white;
-  }
-}
-.compass .compass-bg-c-1 {
-  width: 100%;
-  height: 100%;
-  background: url(../vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/compass-bg-1.png) no-repeat 50% 345px;
-}
-.compass .compass-bg-c-2 {
-  width: 100%;
-  height: 100%;
-  background: url(../vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/compass-bg-2.png) no-repeat 65% 146px;
-  opacity: 0.8;
-  -webkit-animation: fadebg 3s linear infinite;
-  -moz-animation: fadebg 3s linear infinite;
-  -o-animation: fadebg 3s linear infinite;
-     animation: fadebg 3s linear infinite;
-}
-.compass .compass-bg-c-3 {
-  width: 100%;
-  height: 100%;
-  background: url(../vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/compass-bg-3.png) no-repeat 50% 227px;
-}
-.compass .compass-bg-c-4 {
-  width: 100%;
-  height: 100%;
-  background: url(../vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/compass-bg-4.png) no-repeat 50% 63px;
-  -webkit-animation: numberfade 5s linear infinite;
-  -moz-animation: numberfade 5s linear infinite;
-  -o-animation: numberfade 5s linear infinite;
-     animation: numberfade 5s linear infinite;
-
-}
-.compass .compass-title {
-  position: absolute;
-  font-size: 20px;
-  font-weight: bold;
-  width: 100%;
-  bottom: 98px;
-  text-align: center;
-  color: #fff;
-}
-.compass .compass-text {
-  position: absolute;
-  overflow: hidden;
-  left: 50%;
-  margin-left: -60px;
-  font-size: 12px;
-  background-color: rgba(0, 71, 157, 0.4);
-  padding: 5px 10px;
-  color: #00c2ff;
-  -webkit-border-radius: 6px;
-     -moz-border-radius: 6px;
-          border-radius: 6px;
-  line-height: 1.5;
-  -webkit-transform: scale(0.8);
-     -moz-transform: scale(0.8);
-      -ms-transform: scale(0.8);
-       -o-transform: scale(0.8);
-          transform: scale(0.8);
-  display: none;
-}
-@-webkit-keyframes wzgun {
-  0% {
-    bottom: -50px;
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    bottom: 350px;
-    opacity: 0;
-  }
-}
-@-moz-keyframes wzgun {
-  0% {
-    bottom: -50px;
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    bottom: 350px;
-    opacity: 0;
-  }
-}
-@-o-keyframes wzgun {
-  0% {
-    bottom: -50px;
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    bottom: 350px;
-    opacity: 0;
-  }
-}
-@keyframes wzgun {
-  0% {
-    bottom: -50px;
-    opacity: 0;
-  }
-  50% {
-    opacity: 1;
-  }
-  100% {
-    bottom: 350px;
-    opacity: 0;
-  }
-}
-.compass .compass-text span {
-  display: block;
-}
-.compass .compass-text span:nth-child(1) {
-  margin-top: 0px;
-}
-.compass .compass-text span:nth-child(2) {
-  margin-top: 0px;
-}
-.compass .compass-text span:nth-child(3) {
-  margin-top: 0px;
-}
-.compass .compass-text-1 {
-  top: -70px;
-  left: 48px;
-}
-.compass .compass-text-2 {
-  top: -30px;
-  left: 152px;
-}
-.compass .compass-text-3 {
-  top: 0px;
-  left: 250px;
-}
-.compass .compass-text-4 {
-  top: 64px;
-  left: 350px;
-}
-.compass .compass-text-5 {
-  top: 93px;
-  left: 450px;
-}
-.compass .compass-text-6 {
-  color: #d57a31;
-  bottom: -950px;
-  -webkit-animation-delay: 25s;
-     -moz-animation-delay: 25s;
-       -o-animation-delay: 25s;
-          animation-delay: 25s;
-}
-.compass .compass-text-7 {
-  color: #d57a31;
-  bottom: -1150px;
-  -webkit-animation-delay: 30s;
-     -moz-animation-delay: 30s;
-       -o-animation-delay: 30s;
-          animation-delay: 30s;
-}
-.compass .compass-number {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  bottom: 50px;
-}
-.compass .compass-number > div {
-  position: absolute;
-  bottom: 0;
-  width: 55px;
-  height: 0;
-  -webkit-animation: sz 1s linear;
-  -moz-animation: sz 1s linear;
-  -o-animation: sz 1s linear;
-     animation: sz 1s linear;
-  -webkit-animation-fill-mode: forwards;
-     -moz-animation-fill-mode: forwards;
-       -o-animation-fill-mode: forwards;
-          animation-fill-mode: forwards;
-  -webkit-transition: 1s;
-  -o-transition: 1s;
-  -moz-transition: 1s;
-  transition: 1s;
-}
-@-webkit-keyframes sz {
-  0% {
-    height: 0;
-  }
-  100% {
-    height: 70%;
-  }
-}
-@-moz-keyframes sz {
-  0% {
-    height: 0;
-  }
-  100% {
-    height: 70%;
-  }
-}
-@-o-keyframes sz {
-  0% {
-    height: 0;
-  }
-  100% {
-    height: 70%;
-  }
-}
-@keyframes sz {
-  0% {
-    height: 0;
-  }
-  100% {
-    height: 70%;
-  }
-}
-.compass .compass-number > div:after {
-  content: "NO." attr(title);
-  position: absolute;
-  display: inline-block;
-  top: -20px;
-  width: 100%;
-  font-family: "DIGITALDREAMFAT";
-  text-align: center;
-}
-.compass .compass-number > div:before {
-  content: "";
-  position: absolute;
-  height: 100%;
-  border-left: 1px dashed currentColor;
-  height: 500px;
-  top: 55px;
-  left: 50%;
-  margin-left: -1px;
-}
-.compass .compass-number > div > span {
-  display: block;
-  width: 55px;
-  height: 55px;
-  line-height: 55px;
-  text-align: center;
-  padding-bottom: 55px;
-  -webkit-box-shadow: inset 0 0 15px currentColor;
-     -moz-box-shadow: inset 0 0 15px currentColor;
-          box-shadow: inset 0 0 15px currentColor;
-  -webkit-border-radius: 100%;
-     -moz-border-radius: 100%;
-          border-radius: 100%;
-}
-.compass .compass-number > .szscale {
-  -webkit-transform: scale(1.2);
-     -moz-transform: scale(1.2);
-      -ms-transform: scale(1.2);
-       -o-transform: scale(1.2);
-          transform: scale(1.2);
-  -webkit-transform-origin: center bottom;
-     -moz-transform-origin: center bottom;
-      -ms-transform-origin: center bottom;
-       -o-transform-origin: center bottom;
-          transform-origin: center bottom;
-}
-.compass .compass-number > div:nth-child(1) {
-  left: 5%;
-  color: #ff9232;
-  -webkit-animation-delay: 0s;
-     -moz-animation-delay: 0s;
-       -o-animation-delay: 0s;
-          animation-delay: 0s;
-}
-.compass .compass-number > div:nth-child(1):after {
-  -webkit-animation-delay: 0s;
-     -moz-animation-delay: 0s;
-       -o-animation-delay: 0s;
-          animation-delay: 0s;
-}
-.compass .compass-number > div:nth-child(2) {
-  left: 25%;
-  color: #d5c245;
-  -webkit-animation-delay: 0.2s;
-     -moz-animation-delay: 0.2s;
-       -o-animation-delay: 0.2s;
-          animation-delay: 0.2s;
-  bottom: -10%;
-}
-.compass .compass-number > div:nth-child(2):after {
-  -webkit-animation-delay: 2.85s;
-     -moz-animation-delay: 2.85s;
-       -o-animation-delay: 2.85s;
-          animation-delay: 2.85s;
-}
-.compass .compass-number > div:nth-child(3) {
-  left: 45%;
-  color: #01a455;
-  -webkit-animation-delay: 0.4s;
-     -moz-animation-delay: 0.4s;
-       -o-animation-delay: 0.4s;
-          animation-delay: 0.4s;
-  bottom: -20%;
-}
-.compass .compass-number > div:nth-child(3):after {
-  -webkit-animation-delay: 5.7s;
-     -moz-animation-delay: 5.7s;
-       -o-animation-delay: 5.7s;
-          animation-delay: 5.7s;
-}
-.compass .compass-number > div:nth-child(4) {
-  left: 65%;
-  color: #275fcc;
-  -webkit-animation-delay: 0.6s;
-     -moz-animation-delay: 0.6s;
-       -o-animation-delay: 0.6s;
-          animation-delay: 0.6s;
-  bottom: -30%;
-}
-.compass .compass-number > div:nth-child(4):after {
-  -webkit-animation-delay: 8.55s;
-     -moz-animation-delay: 8.55s;
-       -o-animation-delay: 8.55s;
-          animation-delay: 8.55s;
-}
-.compass .compass-number > div:nth-child(5) {
-  left: 85%;
-  color: #275fcc;
-  -webkit-animation-delay: 0.8s;
-     -moz-animation-delay: 0.8s;
-       -o-animation-delay: 0.8s;
-          animation-delay: 0.8s;
-  bottom: -40%;
-}
-.compass .compass-number > div:nth-child(5):after {
-  -webkit-animation-delay: 11.4s;
-     -moz-animation-delay: 11.4s;
-       -o-animation-delay: 11.4s;
-          animation-delay: 11.4s;
-}
-.compass .compass-number > div:nth-child(6) {
-  left: 75%;
-  color: #f674a0;
-  -webkit-animation-delay: 1s;
-     -moz-animation-delay: 1s;
-       -o-animation-delay: 1s;
-          animation-delay: 1s;
-  bottom: -50%;
-}
-.compass .compass-number > div:nth-child(6):after {
-  -webkit-animation-delay: 14.25s;
-     -moz-animation-delay: 14.25s;
-       -o-animation-delay: 14.25s;
-          animation-delay: 14.25s;
-}
-.compass .compass-number > div:nth-child(7) {
-  left: 87.5%;
-  color: #275fcc;
-  -webkit-animation-delay: 1.2s;
-     -moz-animation-delay: 1.2s;
-       -o-animation-delay: 1.2s;
-          animation-delay: 1.2s;
-  bottom: -60%;
-}
-.compass .compass-number > div:nth-child(7):after {
-  -webkit-animation-delay: 17.1s;
-     -moz-animation-delay: 17.1s;
-       -o-animation-delay: 17.1s;
-          animation-delay: 17.1s;
-}
-
-.line-sx .line-fs {
-  width: 14px;
-  height: 100%;
-  background-image: url(../vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/line-fs.png);
-  background-repeat: no-repeat;
-  background-position: 50% 150%;
-  position: absolute;
-  z-index: -1;
-  -webkit-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-  -moz-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-  -o-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-     animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-}
-.line-sx > div:nth-child(2) {
-  height: 90%;
-  -webkit-animation-duration: 2s;
-     -moz-animation-duration: 2s;
-       -o-animation-duration: 2s;
-          animation-duration: 2s;
-  -webkit-animation-delay: 1.5s;
-     -moz-animation-delay: 1.5s;
-       -o-animation-delay: 1.5s;
-          animation-delay: 1.5s;
-  bottom: 0;
-  left: 51px;
-}
-.line-sx > div:nth-child(3) {
-  height: 100%;
-  -webkit-animation-duration: 3s;
-     -moz-animation-duration: 3s;
-       -o-animation-duration: 3s;
-          animation-duration: 3s;
-  -webkit-animation-delay: 0s;
-     -moz-animation-delay: 0s;
-       -o-animation-delay: 0s;
-          animation-delay: 0s;
-  bottom: 32px;
-  left: 89px;
-}
-.line-sx > div:nth-child(4) {
-  height: 100%;
-  -webkit-animation-duration: 2.5s;
-     -moz-animation-duration: 2.5s;
-       -o-animation-duration: 2.5s;
-          animation-duration: 2.5s;
-  -webkit-animation-delay: 1s;
-     -moz-animation-delay: 1s;
-       -o-animation-delay: 1s;
-          animation-delay: 1s;
-  bottom: 3px;
-  left: 179px;
-  -webkit-filter: hue-rotate(180deg);
-          filter: hue-rotate(180deg);
-}
-.line-sx > div:nth-child(5) {
-  height: 90%;
-  -webkit-animation-duration: 2s;
-     -moz-animation-duration: 2s;
-       -o-animation-duration: 2s;
-          animation-duration: 2s;
-  -webkit-animation-delay: 2s;
-     -moz-animation-delay: 2s;
-       -o-animation-delay: 2s;
-          animation-delay: 2s;
-  bottom: 42px;
-  left: 229px;
-}
-.line-sx > div:nth-child(6) {
-  height: 100%;
-  -webkit-animation-duration: 2.5s;
-     -moz-animation-duration: 2.5s;
-       -o-animation-duration: 2.5s;
-          animation-duration: 2.5s;
-  -webkit-animation-delay: 0.5s;
-     -moz-animation-delay: 0.5s;
-       -o-animation-delay: 0.5s;
-          animation-delay: 0.5s;
-  bottom: 11px;
-  right: 48px;
-}
-.line-sx > div:nth-child(7) {
-  height: 90%;
-  -webkit-animation-duration: 3s;
-     -moz-animation-duration: 3s;
-       -o-animation-duration: 3s;
-          animation-duration: 3s;
-  -webkit-animation-delay: 2.5s;
-     -moz-animation-delay: 2.5s;
-       -o-animation-delay: 2.5s;
-          animation-delay: 2.5s;
-  bottom: -22px;
-  right: 174px;
-  -webkit-filter: hue-rotate(180deg);
-          filter: hue-rotate(180deg);
-}
-.line-sx > div:nth-child(8) {
-  height: 90%;
-  -webkit-animation-duration: 3s;
-     -moz-animation-duration: 3s;
-       -o-animation-duration: 3s;
-          animation-duration: 3s;
-  -webkit-animation-delay: 1.5s;
-     -moz-animation-delay: 1.5s;
-       -o-animation-delay: 1.5s;
-          animation-delay: 1.5s;
-  bottom: -22px;
-  right: 100px;
-}
-.line-sx > div:nth-child(9) {
-  height: 100%;
-  -webkit-animation-duration: 2.5s;
-     -moz-animation-duration: 2.5s;
-       -o-animation-duration: 2.5s;
-          animation-duration: 2.5s;
-  -webkit-animation-delay: 2s;
-     -moz-animation-delay: 2s;
-       -o-animation-delay: 2s;
-          animation-delay: 2s;
-  bottom: -10px;
-  right: 220px;
-}
-.line-sx > div:nth-child(10) {
-  height: 95%;
-  -webkit-animation-duration: 2s;
-     -moz-animation-duration: 2s;
-       -o-animation-duration: 2s;
-          animation-duration: 2s;
-  -webkit-animation-delay: 1s;
-     -moz-animation-delay: 1s;
-       -o-animation-delay: 1s;
-          animation-delay: 1s;
-  bottom: -41px;
-  right: 182px;
-}
-
-@-webkit-keyframes fs {
-  0% {
-    background-position: 50% 150%;
-  }
-  50% {
-    background-position: 50% -132%;
-  }
-  100% {
-    background-position: 50% -264%;
-    opacity: 0;
-  }
-}
-
-@-moz-keyframes fs {
-  0% {
-    background-position: 50% 150%;
-  }
-  50% {
-    background-position: 50% -132%;
-  }
-  100% {
-    background-position: 50% -264%;
-    opacity: 0;
-  }
-}
-
-@-o-keyframes fs {
-  0% {
-    background-position: 50% 150%;
-  }
-  50% {
-    background-position: 50% -132%;
-  }
-  100% {
-    background-position: 50% -264%;
-    opacity: 0;
-  }
-}
-
-@keyframes fs {
-  0% {
-    background-position: 50% 150%;
-  }
-  50% {
-    background-position: 50% -132%;
-  }
-  100% {
-    background-position: 50% -264%;
-    opacity: 0;
-  }
-}
-
-.show {
-  display: block !important;
-}
-
-@charset "utf-8";
-/* CSS Document */
-.person{
-    position: absolute;
-    top: 0;
-    width: 100%;
-    height: 100%;
-}
-.pers{
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    background-repeat: no-repeat;
-    background-position: center center;
-    
-}
-.person1{
-    background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/triangle/online.png);
-    transform: rotateX(64deg) rotateZ(0deg);
-    top: 16%;
-}
-.person2{
-        background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/triangle/cir-2.png);
-    animation: mmove 10s linear infinite;
-    -webkit-animation: mmove 10s linear infinite;
-    transform: rotateX(64deg);
-    top: 16%;
-}
-.person3{
-        background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/triangle/person-1.png);
-        top: 5%;
-}
-@-webkit-keyframes mmove{
-    0%{
-                transform: rotateX(-64deg) rotateZ(360deg);
-    }
-    100%{
-            transform: rotateX(-64deg) rotateZ(0deg);
-    }
-}
-@keyframes mmove{
-    0%{
-      transform: rotateX(-64deg) rotateZ(360deg);
-    }
-    100%{
-        transform: rotateX(-64deg) rotateZ(0deg);
-    }
-}
-.svgs{
-    width:270px;
-    height:260px;
-    margin: auto;
-    top: 0;
-    position: absolute;
-    right: 0;
-    left: 0;
-    bottom: 0;
-}
-.text{
-    position: absolute;
-    width:50px;
-    height:50px;
-    background-image: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/triangle/cir-1.png);
-    background-repeat: no-repeat;
-    background-position: center center;
-    color: rgb(114,198,230);
-        text-align: center;
-}
-.per1{
-    top: 215px;
-    left: 50px;
-}
-.per2{
-        top: 113px;
-    left: 3px;
-}
-.per3{
-        top: 45px;
-    left: 35px;
-}
-.per4{
-        left: 120px;
-}
-.per5{
-        top: 45px;
-    left: 190px;
-}
-.per6{
-        top: 105px;
-    left: 210px;
-}
-.per7{
-        top: 215px;
-    left: 180px;
-}
-.text span:nth-child(1){
-    display:block;
-    width: 52px;
-    margin-top: 10px;
-    line-height: 12px;
-    transform: scale(0.85);
-    height: 22px;
-}
-.text span:nth-child(2){
-font-size: 14px;
-    font-weight: bold;
-}
-@charset "utf-8";
-/* CSS Document */
-.chartdom{
-    width:100%;
-    height:100%;
-}
-.icon_img{
-    width:100%;
-     height:100%;
-    background:url("vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZHSF/icon_nq.png") no-repeat center;
-    position: absolute;
-    left: 0;
-    top: 0;
-    animation: move1 5s linear infinite;
-    -webkit-animation: move1 5s linear infinite;
-}
-.icon_img1{
-    width:100%;
-     height:100%;
-    background:url("vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZHSF/icon_wq.png") no-repeat center;
-    position: absolute;
-    left: 0;
-    top: 0;
-    animation: move2 15s linear infinite;
-    -webkit-animation: move2 15s linear infinite;
-}
-.icon_img2{
-    width:100%;
-     height:100%;
-    background:url("vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZHSF/icon_zjq.png") no-repeat center;
-    position: absolute;
-    left: 0;
-    top: 0;
-    animation: move3 15s linear infinite;
-    -webkit-animation: move3 15s linear infinite;
-}
-@keyframes move2{
-    0%{
-            transform: rotate(0deg);
-    }
-    100%{
-        transform: rotate(360deg);
-    }
-}
-@keyframes move3{
-    0%{
-            transform: rotate(360deg);
-    }
-    100%{
-        transform: rotate(0deg);
-    }
-}
-
-@charset "utf-8";
-/* CSS Document */
-.cirdom{
-    width:100%;
-    height:100%;
-}
-.back_chart{
-    width:100%;
-    height:100%;
-    position:absolute;
-    left:0;
-    top:0;
-    background:url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZHSF/back_chart.png) no-repeat center;
-}
-.arrow_cir{
-    width: 8px;
-    height: 8px;
-    offset-distance: 0%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-}
-.arrow_cir1{
-        background: url("vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZHSF/icon_04.png") no-repeat 50% 50%;
-        -webkit-animation: arrow_cir1 5s linear infinite;
-    	animation: arrow_cir1 5s linear infinite;
-    	offset-path: path("m3,75c0,-39.77901 32.22099,-72 72,-72c39.77901,0 72,32.22099 72,72c0,39.77901 -32.22099,72 -72,72c-39.77901,0 -72,-32.22099 -72,-72z");
-}
-.arrow_cir2{
-        background: url("vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZHSF/icon_05.png") no-repeat 50% 50%;
-        -webkit-animation: arrow_cir2 5s linear infinite;
-    	animation: arrow_cir2 5s linear infinite;
-    	offset-path: path("m3,75c0,-39.77901 32.22099,-72 72,-72c39.77901,0 72,32.22099 72,72c0,39.77901 -32.22099,72 -72,72c-39.77901,0 -72,-32.22099 -72,-72z");
-}
-@keyframes arrow_cir1{
-    0%{
-            offset-distance: 40%;
-    opacity: 1;
-    }
-    100%{
-            offset-distance: 140%;
-    opacity: 1;
-    }
-}
-@keyframes arrow_cir2{
-    0%{
-            offset-distance: 0%;
-    opacity: 1;
-    }
-    100%{
-            offset-distance: 100%;
-    opacity: 1;
-    }
-}
-@charset "utf-8";
-/* CSS Document */
-@charset "utf-8";
-/* CSS Document */
-.pd-main-left {
-  position: relative;
-  width: 310px;
-  height: 335px;
-}
-.pd-main-left .yun-container {
-  width: 100%;
-  height: 100%;
-  background: url(../vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/pd-main-left-bg-2.png) no-repeat 50% 50%;
-}
-.pd-main-left .yun-container .yun-tree {
-  width: 100%;
-  height: 100%;
-  background: url(../vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/pd-main-left-bg-tree.png) no-repeat 50% bottom;
-  mix-blend-mode: screen;
-}
-.pd-main-left .yun-container .line-fs {
-  width: 14px;
-  height: 100%;
-  background-image: url(../vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/ZWY/line-fs.png);
-  background-repeat: no-repeat;
-  background-position: 50% 150%;
-  position: absolute;
-  z-index: -1;
-  -webkit-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-     -moz-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-       -o-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-          animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
-}
-@-webkit-keyframes fs {
-  0% {
-    background-position: 50% 150%;
-  }
-  50% {
-    background-position: 50% -132%;
-  }
-  100% {
-    background-position: 50% -264%;
-    opacity: 0;
-  }
-}
-@-moz-keyframes fs {
-  0% {
-    background-position: 50% 150%;
-  }
-  50% {
-    background-position: 50% -132%;
-  }
-  100% {
-    background-position: 50% -264%;
-    opacity: 0;
-  }
-}
-@-o-keyframes fs {
-  0% {
-    background-position: 50% 150%;
-  }
-  50% {
-    background-position: 50% -132%;
-  }
-  100% {
-    background-position: 50% -264%;
-    opacity: 0;
-  }
-}
-@keyframes fs {
-  0% {
-    background-position: 50% 150%;
-  }
-  50% {
-    background-position: 50% -132%;
-  }
-  100% {
-    background-position: 50% -264%;
-    opacity: 0;
-  }
-}
-.pd-main-left .yun-container > div:nth-child(2) {
-  height: 90%;
-  -webkit-animation-duration: 2s;
-     -moz-animation-duration: 2s;
-       -o-animation-duration: 2s;
-          animation-duration: 2s;
-  -webkit-animation-delay: 1.5s;
-     -moz-animation-delay: 1.5s;
-       -o-animation-delay: 1.5s;
-          animation-delay: 1.5s;
-  bottom: 0;
-  left: 51px;
-}
-.pd-main-left .yun-container > div:nth-child(3) {
-  height: 100%;
-  -webkit-animation-duration: 3s;
-     -moz-animation-duration: 3s;
-       -o-animation-duration: 3s;
-          animation-duration: 3s;
-  -webkit-animation-delay: 0s;
-     -moz-animation-delay: 0s;
-       -o-animation-delay: 0s;
-          animation-delay: 0s;
-  bottom: 32px;
-  left: 89px;
-}
-.pd-main-left .yun-container > div:nth-child(4) {
-  height: 100%;
-  -webkit-animation-duration: 2.5s;
-     -moz-animation-duration: 2.5s;
-       -o-animation-duration: 2.5s;
-          animation-duration: 2.5s;
-  -webkit-animation-delay: 1s;
-     -moz-animation-delay: 1s;
-       -o-animation-delay: 1s;
-          animation-delay: 1s;
-  bottom: 3px;
-  left: 179px;
-  -webkit-filter: hue-rotate(180deg);
-          filter: hue-rotate(180deg);
-}
-.pd-main-left .yun-container > div:nth-child(5) {
-  height: 90%;
-  -webkit-animation-duration: 2s;
-     -moz-animation-duration: 2s;
-       -o-animation-duration: 2s;
-          animation-duration: 2s;
-  -webkit-animation-delay: 2s;
-     -moz-animation-delay: 2s;
-       -o-animation-delay: 2s;
-          animation-delay: 2s;
-  bottom: 42px;
-  left: 229px;
-}
-.pd-main-left .yun-container > div:nth-child(6) {
-  height: 100%;
-  -webkit-animation-duration: 2.5s;
-     -moz-animation-duration: 2.5s;
-       -o-animation-duration: 2.5s;
-          animation-duration: 2.5s;
-  -webkit-animation-delay: 0.5s;
-     -moz-animation-delay: 0.5s;
-       -o-animation-delay: 0.5s;
-          animation-delay: 0.5s;
-  bottom: 11px;
-  right: 48px;
-}
-.pd-main-left .yun-container > div:nth-child(7) {
-  height: 90%;
-  -webkit-animation-duration: 3s;
-     -moz-animation-duration: 3s;
-       -o-animation-duration: 3s;
-          animation-duration: 3s;
-  -webkit-animation-delay: 2.5s;
-     -moz-animation-delay: 2.5s;
-       -o-animation-delay: 2.5s;
-          animation-delay: 2.5s;
-  bottom: -22px;
-  right: 174px;
-  -webkit-filter: hue-rotate(180deg);
-          filter: hue-rotate(180deg);
-}
-.pd-main-left .yun-container > div:nth-child(8) {
-  height: 90%;
-  -webkit-animation-duration: 3s;
-     -moz-animation-duration: 3s;
-       -o-animation-duration: 3s;
-          animation-duration: 3s;
-  -webkit-animation-delay: 1.5s;
-     -moz-animation-delay: 1.5s;
-       -o-animation-delay: 1.5s;
-          animation-delay: 1.5s;
-  bottom: -22px;
-  right: 100px;
-}
-.pd-main-left .yun-container > div:nth-child(9) {
-  height: 100%;
-  -webkit-animation-duration: 2.5s;
-     -moz-animation-duration: 2.5s;
-       -o-animation-duration: 2.5s;
-          animation-duration: 2.5s;
-  -webkit-animation-delay: 2s;
-     -moz-animation-delay: 2s;
-       -o-animation-delay: 2s;
-          animation-delay: 2s;
-  bottom: -10px;
-  right: 220px;
-}
-.pd-main-left .yun-container > div:nth-child(10) {
-  height: 95%;
-  -webkit-animation-duration: 2s;
-     -moz-animation-duration: 2s;
-       -o-animation-duration: 2s;
-          animation-duration: 2s;
-  -webkit-animation-delay: 1s;
-     -moz-animation-delay: 1s;
-       -o-animation-delay: 1s;
-          animation-delay: 1s;
-  bottom: -41px;
-  right: 182px;
-}
-.pd-main-left .yun-text {
-  position: absolute;
-  width: 318px;
-  height: 195px;
-  top: 0;
-  left: 50%;
-  margin-left: -161px;
-  z-index: 2;
-}
-.pd-main-left .yun-text div {
-  position: absolute;
-  white-space: nowrap;
-  overflow: hidden;
-  -o-text-overflow: ellipsis;
-     text-overflow: ellipsis;
-  width: 70px;
-  height: 36px;
-  line-height: 36px;
-  word-wrap: break-word;
-  word-break: break-all;
-  opacity: 0.5;
-  color: #00f6ff;
-}
- .pd-main-left .yun-text div:nth-child(1) {
-  top: 84px;
-  left: 26px;
-}
-.pd-main-left .yun-text div:nth-child(2) {
-  top: 13px;
-  left: 157px;
-}
-.pd-main-left .yun-text div:nth-child(3) {
-  top: 105px;
-  left: 35px;
-}
-.pd-main-left .yun-text div:nth-child(4) {
-  top: 38px;
-  left: 89px;
-}
-.pd-main-left .yun-text div:nth-child(5) {
-  top: 43px;
-  left: 178px;
-}
-.pd-main-left .yun-text div:nth-child(6) {
-  top: 76px;
-  left: 227px;
-}
- .pd-main-left .yun-text div:nth-child(7) {
-  top: 63px;
-  left: 66px;
-}
-.pd-main-left .yun-text div:nth-child(8) {
-  top: 156px;
-  left: 43px;
-}
-.pd-main-left .yun-text div:nth-child(9) {
-  top: 130px;
-  left: 16px;
-}
-.pd-main-left .yun-text div:nth-child(10) {
-  top: 93px;
-  left: 128px;
-}
-.pd-main-left .yun-text div:nth-child(11) {
-  top: 106px;
-  left: 241px;
-}
-.pd-main-left .yun-text div:nth-child(12) {
-  top: 121px;
-  left: 112px;
-}
-.pd-main-left .yun-text div:nth-child(13) {
-  top: 67px;
-  left: 153px;
-}
-.pd-main-left .yun-text div:nth-child(14) {
-  top: 157px;
-  left: 207px;
-}
-.pd-main-left .yun-text div:nth-child(15) {
-  top: 132px;
-  left: 206px;
-}
-.pd-main-left .yun-text div:nth-child(16) {
-  top: 150px;
-  left: 117px;
-}
-.pd-main-left .yun-text div span {
-  font-size: 12px;
-  cursor: pointer;
-}
-.pd-main-left .yun-text .span-flash {
-  color: #00f6ff;
-  font-size: 14px;
-  -webkit-animation-name: yun-flash;
-     -moz-animation-name: yun-flash;
-       -o-animation-name: yun-flash;
-          animation-name: yun-flash;
-  -webkit-animation-duration: 1s;
-     -moz-animation-duration: 1s;
-       -o-animation-duration: 1s;
-          animation-duration: 1s;
-  -webkit-animation-iteration-count: 1;
-     -moz-animation-iteration-count: 1;
-       -o-animation-iteration-count: 1;
-          animation-iteration-count: 1;
-}
-@-webkit-keyframes yun-flash {
-  from,50%,
-  to {
-    opacity: 1;
-  }
-  25%,75% {
-    opacity: 0;
-  }
-}
-@-moz-keyframes yun-flash {
-  from,50%,
-  to {
-    opacity: 1;
-  }
-  25%,75% {
-    opacity: 0;
-  }
-}
-@-o-keyframes yun-flash {
-  from,50%,
-  to {
-    opacity: 1;
-  }
-  25%,75% {
-    opacity: 0;
-  }
-}
-@keyframes yun-flash {
-  from,50%,
-  to {
-    opacity: 1;
-  }
-  25%,75% {
-    opacity: 0;
-  }
-}
-.bubble-8 {
-  color: #2da4c0;
-  -webkit-box-shadow: inset 0 0 20px #28358b, 0 0 5px #28358b, 0 0 10px #28358b;
-     -moz-box-shadow: inset 0 0 20px #28358b, 0 0 5px #28358b, 0 0 10px #28358b;
-          box-shadow: inset 0 0 20px #28358b, 0 0 5px #28358b, 0 0 10px #28358b;
-}
-@charset "utf-8";
-/* CSS Document */
-.bar-tooltip-hd{
-    color:#cd9d5b;
-}
-.bar-tooltip {
-    padding: 10px 13px;
-    border: 1px dotted #cab06f;
-    box-shadow: inset 0px 0px 6px 2px rgba(103, 59, 23, 0.3);
-}
-.bar-hide{
-    display:none;
-}
-.bar_charts{
-    width:100%;
-    height:100%;
-}
-.bar_img{
-    width:100%;
-    height:100%;
-    position:absolute;
-    bottom:0;
-   background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/fmjr/bk_circle.png) no-repeat center 97%;
-    background-size: 100%;
-    filter: hue-rotate(180deg);
-}
-.bar_img1{
-    width:100%;
-    height:100%;
-    position:absolute;
-    bottom:30%;
-   background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/fmjr/bk_circle1.png) no-repeat center 97%;
-    background-size: 75%;
-    filter: hue-rotate(180deg);
-}
-.bar_img2{
-    width:100%;
-    height:100%;
-    position:absolute;
-    bottom:60%;
-   background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/fmjr/bk_circle2.png) no-repeat center 97%;
-    background-size: 50%;
-    filter: hue-rotate(180deg);
-}
-@charset "utf-8";
-/* CSS Document */
-#bar_area{
-    width:100%;
-    height:100%;
-}
-@charset "utf-8";
-/* CSS Document */
-.nodetext{
-    position: absolute;
-    left: 50%;
-    top: 51%;
-    margin-left: -9px;
-    -webkit-transform: translate(0%,-60%);
-       -moz-transform: translate(0%,-60%);
-        -ms-transform: translate(0%,-60%);
-         -o-transform: translate(0%,-60%);
-            transform: translate(0%,-60%);
-    color:rgb(22,103,206);
-    font-size:12px;
-}
-.text0{
-    border-right: 2px rgba(29,122,248,0.54) solid;
-    border-bottom: 2px rgba(29,122,248,0.54) solid;
-    width: 70px;
-    height: 50px;
-    margin-left: -110px;
-    margin-top: 25px;
-}
-.text1{
-    border-right: 2px rgba(29,122,248,0.54) solid;
-    border-bottom: 2px rgb(134,92,255) solid;
-    width: 30px;
-    height: 80px;
-        margin-left: -50px;
-    margin-top: 44px;
-        -webkit-border-image: -webkit-gradient( linear, left top, left bottom, from(rgba(29,122,248,0.54)), to(rgb(134,92,255))) 2 2;
-        -webkit-border-image: -webkit-linear-gradient( rgba(29,122,248,0.54), rgb(134,92,255)) 2 2;
-           -moz-border-image: -moz-linear-gradient( rgba(29,122,248,0.54), rgb(134,92,255)) 2 2;
-             -o-border-image: -o-linear-gradient( rgba(29,122,248,0.54), rgb(134,92,255)) 2 2;
-                border-image: -webkit-gradient( linear, left top, left bottom, from(rgba(29,122,248,0.54)), to(rgb(134,92,255))) 2 2;
-                border-image: linear-gradient( rgba(29,122,248,0.54), rgb(134,92,255)) 2 2;
-}
-.text2{
-        border-right: 2px rgba(29,122,248,0.54) solid;
-    width: 30px;
-    height: 93px;
-       margin-top: 53px;
-    margin-left: -31px;
-      -webkit-border-image: -webkit-gradient( linear, left top, left bottom, from(rgb(10,106,255)), color-stop(rgba(112,107,189,0.54)),to(rgb(214,108,123))) 2 2;
-      -webkit-border-image: -webkit-linear-gradient( rgb(10,106,255), rgba(112,107,189,0.54),rgb(214,108,123)) 2 2;
-         -moz-border-image: -moz-linear-gradient( rgb(10,106,255), rgba(112,107,189,0.54),rgb(214,108,123)) 2 2;
-           -o-border-image: -o-linear-gradient( rgb(10,106,255), rgba(112,107,189,0.54),rgb(214,108,123)) 2 2;
-              border-image: -webkit-gradient( linear, left top, left bottom, from(rgb(10,106,255)), color-stop(rgba(112,107,189,0.54)),to(rgb(214,108,123))) 2 2;
-              border-image: linear-gradient( rgb(10,106,255), rgba(112,107,189,0.54),rgb(214,108,123)) 2 2;
-}
-.text3{
-    border-left: 2px rgba(29,122,248,0.54) solid;
-    border-bottom: 2px rgba(29,122,248,0.54) solid;
-    width: 30px;
-    height: 80px;
-    margin-left: 18px;
-    margin-top: 44px;
-    -webkit-border-image: -webkit-gradient( linear, left top, left bottom, from(rgba(29,122,248,0.54)), color-stop(rgba(136,135,162,0.5)),to(rgb(249,161,77))) 2 2;
-    -webkit-border-image: -webkit-linear-gradient( rgba(29,122,248,0.54), rgba(136,135,162,0.5),rgb(249,161,77)) 2 2;
-       -moz-border-image: -moz-linear-gradient( rgba(29,122,248,0.54), rgba(136,135,162,0.5),rgb(249,161,77)) 2 2;
-         -o-border-image: -o-linear-gradient( rgba(29,122,248,0.54), rgba(136,135,162,0.5),rgb(249,161,77)) 2 2;
-            border-image: -webkit-gradient( linear, left top, left bottom, from(rgba(29,122,248,0.54)), color-stop(rgba(136,135,162,0.5)),to(rgb(249,161,77))) 2 2;
-            border-image: linear-gradient( rgba(29,122,248,0.54), rgba(136,135,162,0.5),rgb(249,161,77)) 2 2;
-}
-.text4{
-    border-left: 2px rgba(29,122,248,0.54) solid;
-    border-bottom: 2px rgba(29,122,248,0.54) solid;
-    width: 70px;
-    height: 50px;
-    margin-left: 40px;
-    margin-top: 25px;
-    -webkit-border-image: -webkit-gradient( linear, left top, left bottom, from(rgba(29,122,248,0.54)), color-stop(rgba(51,181,255,0.64)),to(rgb(92,255,255))) 2 2;
-    -webkit-border-image: -webkit-linear-gradient( rgba(29,122,248,0.54), rgba(51,181,255,0.64),rgb(92,255,255)) 2 2;
-       -moz-border-image: -moz-linear-gradient( rgba(29,122,248,0.54), rgba(51,181,255,0.64),rgb(92,255,255)) 2 2;
-         -o-border-image: -o-linear-gradient( rgba(29,122,248,0.54), rgba(51,181,255,0.64),rgb(92,255,255)) 2 2;
-            border-image: -webkit-gradient( linear, left top, left bottom, from(rgba(29,122,248,0.54)), color-stop(rgba(51,181,255,0.64)),to(rgb(92,255,255))) 2 2;
-            border-image: linear-gradient( rgba(29,122,248,0.54), rgba(51,181,255,0.64),rgb(92,255,255)) 2 2;
-}
-.text0 span{
-    position: absolute;
-    margin-top: 50px;
-}
-.text1 span{
-     position: absolute;
-    margin-left: -50px;
-    margin-top: 83px;
-}
-.text2 span{
-    position: absolute;
-    display: block;
-    width: 330px;
-    margin-left: 8px;
-    margin-top: 100px;
-}
-.text3 span{
-     position: absolute;
-    display: block;
-    width: 330px;
-    margin-left: 6px;
-    margin-top: 83px;
-}
-.text4 span{
-    position: absolute;
-    display: block;
-    width: 330px;
-    margin-left: 10px;
-    margin-top: 50px;
-}
-.text0:before{
-        content: '';
-    position: absolute;
-    width: 5px;
-    height: 5px;
-    margin-top: 47px;
-    -webkit-border-radius: 100%;
-       -moz-border-radius: 100%;
-            border-radius: 100%;
-    background: rgb(47,138,240);
-}
-.text1:before{
-        content: '';
-    position: absolute;
-    width: 5px;
-    height: 5px;
-    margin-top: 77px;
-    -webkit-border-radius: 100%;
-       -moz-border-radius: 100%;
-            border-radius: 100%;
-    background: rgb(117,94,255);
-}
-.text2:before{
-        content: '';
-    position: absolute;
-    width: 5px;
-    height: 5px;
-  margin-top: 92px;
-    margin-left: 26px;
-    -webkit-border-radius: 100%;
-       -moz-border-radius: 100%;
-            border-radius: 100%;
-    background: rgb(197,73,89);
-}
-.text3:before{
-        content: '';
-    position: absolute;
-    width: 5px;
-    height: 5px;
-        margin-top: 77px;
-    margin-left: 27px;
-    -webkit-border-radius: 100%;
-       -moz-border-radius: 100%;
-            border-radius: 100%;
-    background: rgb(230,137,50);
-}
-.text4:before{
-        content: '';
-    position: absolute;
-    width: 5px;
-    height: 5px;
-      margin-top: 47px;
-    margin-left: 63px;
-    -webkit-border-radius: 100%;
-       -moz-border-radius: 100%;
-            border-radius: 100%;
-    background:rgb(56,208,231);
-}
-@charset "utf-8";
-/* CSS Document */
-.precent{
-    width:100%;
-    height:100%;
-}
-.preinfo{
-    position: absolute;
-    left: 63%;
-    top: 50%;
-    margin-left: -2.5em;
-    -webkit-transform: translate(0%,-50%);
-       -moz-transform: translate(0%,-50%);
-        -ms-transform: translate(0%,-50%);
-         -o-transform: translate(0%,-50%);
-            transform: translate(0%,-50%);
-    white-space: nowrap;
-    font-size:13px;
-}
-.preinfo span:nth-child(1) {
-    margin-right: 10px;
-}
-.preinfos {
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    width: 1px;
-    height: 58px;
-    background-color: rgb(99, 139, 176);
-    -webkit-transform-origin: 50% 0;
-       -moz-transform-origin: 50% 0;
-        -ms-transform-origin: 50% 0;
-         -o-transform-origin: 50% 0;
-            transform-origin: 50% 0;
-}
-.preinfos span:nth-child(1){
-    width:8px;
-    height:8px;
-    -webkit-border-radius:100%;
-       -moz-border-radius:100%;
-            border-radius:100%;
-    position:absolute;
-    left: -3px;
-    top: 50%;
-}
-.preinfos span:nth-child(2){
-    width: 0;
-    height: 0;
-    border-width: 12px 5px 5px 5px;
-    border-style: solid;
-    position: absolute;
-    left: -5px;
-    top: 100%;
-}
-@charset "utf-8";
-/* CSS Document */
-.first {
-            list-style-type: none;
-    left: 240px;
-    top: 100px;
-    width: 240px;
-    height: 240px;
-    position: absolute;
-    transform-style: preserve-3d;
-    transform: rotateX(70deg) rotateZ(45deg);
-            perspective: 2000px;
-            perspective-origin: 50% 100%;
-         animation: trigle_down1 1s linear;
-    -webkit-animation: trigle_down1 1s linear; 
-        }
-@keyframes trigle_down1{
-    0%{
-        top:-250px;
-    }
-    100%{
-        top:80px
-    }
-}
-        .first li {
-            width: 100%;
-            height: 100%;
-            line-height: 200px;
-            position: absolute;
-            background-image: linear-gradient(#45fed4 1%,rgba(0,96,220,1));
-    		opacity: 0.8;
-        }
-        .first li:nth-child(1) {
-            transform: rotateX(0deg) translateZ(-35px) scale(0.79);
-        }
-        .first li:nth-child(2) {
-             transform:translateZ(-100px) translateY(170px) rotateX(-70deg);
-             height: 70px;
-            line-height: 70px;
-            transform-origin: 0 100%;
-            clip-path: polygon(25px 0%,calc(100% - 25px) 0%,100% 100%,0% 100%);
-         }
-        .first li:nth-child(3) {
-            transform: rotateX(-180deg) translateZ(100px);
-        }
-        .first li:nth-child(4) {
-            height: 70px;
-            line-height: 70px;
-            transform-origin: 0 100%;
-            transform: translateZ(-100px) translateY(-70px) rotateX(-110deg);
-            clip-path: polygon(25px 0%,calc(100% - 25px) 0%,100% 100%,0% 100%);
-        }
-        .first li:nth-child(5) {
-            width: 70px;
-            transform-origin: 100% 100%;
-            transform: translateZ(-100px) translateX(-70px) rotateY(110deg);
-            clip-path: polygon(0% 25px,100% 0%,100% 100%,0% calc(100% - 25px));
-        }
-        .first li:nth-child(6) {
-            width: 70px;
-            transform-origin: 100% 100%;
-            transform:translateZ(-100px) translateX(170px) rotateY(70deg);
-            clip-path: polygon(0% 25px,100% 0%,100% 100%,0% calc(100% - 25px));
-                background-image: linear-gradient(to left, rgba(0,96,220,1),#45fed4);
-        }
-
-.seconed {
-                list-style-type: none;
-                    left: 261px;
-                    top: 65px;
-                    width: 200px;
-                    height: 195px;
-                text-align: center;
-                position: absolute;
-                transform-style: preserve-3d;
-                transform: rotateX(70deg) rotateZ(45deg);
-                perspective: 2000px;
-                perspective-origin: 50% 100%;
-              animation: trigle_down2 2s linear;
-    -webkit-animation: trigle_down2 2s linear; 
-        }
-@keyframes trigle_down2{
-    0%{
-        top:-300px;
-    }
-    50%{
-        top:-300px;
-    }
-    100%{
-        top:45px
-    }
-}
-        .seconed li {
-           width: 100%;
-        height: 100%;
-        position: absolute;
-        background-image: linear-gradient(rgba(58,200,255,0.8) 25%,#616cff);
-    	opacity: 0.8;
-        }
-        .seconed li:nth-child(1) {
-            transform: rotateX(0deg) translateZ(-48px) scale(0.8);
-        }
-        .seconed li:nth-child(2) {
-             transform:translateZ(-100px) translateY(140px) rotateX(-70deg);
-             height: 55px;
-            line-height: 55px;
-            transform-origin: 0 100%;
-            clip-path: polygon(18px 0%,calc(100% - 18px) 0%,100% 100%,0% 100%);
-         }
-        .seconed li:nth-child(3) {
-            transform: rotateX(-180deg) translateZ(100px);
-        }
-        .seconed li:nth-child(4) {
-            height: 55px;
-            line-height: 55px;
-            transform-origin: 0 100%;
-            transform: translateZ(-100px) translateY(-55px) rotateX(-110deg);
-            clip-path: polygon(18px 0%,calc(100% - 18px) 0%,100% 100%,0% 100%);
-        }
-        .seconed li:nth-child(5) {
-            width: 55px;
-            transform-origin: 100% 100%;
-            transform: translateZ(-100px) translateX(-55px) rotateY(110deg);
-            clip-path: polygon(0% 18px,100% 0%,100% 100%,0% calc(100% - 18px));
-        }
-        .seconed li:nth-child(6) {
-            width: 55px;
-            transform-origin: 100% 100%;
-            transform:translateZ(-100px) translateX(145px) rotateY(70deg);
-            clip-path: polygon(0% 18px,100% 0%,100% 100%,0% calc(100% - 18px));
-        }
-
-.third {
-                list-style-type: none;
-                left: 292px;
-                top: 20px;
-                width: 140px;
-                height: 140px;
-                text-align: center;
-                position: absolute;
-                transform-style: preserve-3d;
-                transform: rotateX(70deg) rotateZ(45deg);
-                perspective: 2000px;
-                perspective-origin: 50% 100%;
-     	animation: trigle_down3 3s linear;
-   	 -webkit-animation: trigle_down3 3s linear; 
-        }
-@keyframes trigle_down3{
-    0%{
-        top:-250px;
-    }
-    66.66%{
-        top:-250px;
-    }
-    100%{
-        top:0px
-    }
-}
-        .third li {
-           width: 100%;
-        height: 100%;
-        position: absolute;
-         background-image: linear-gradient(#f1e04f 5%,rgba(253,156,48,0.8));
-    opacity: 0.7;
-        }
-        .third li:nth-child(1) {
-            transform: rotateX(0deg) translateZ(-48px) scale(0.75);
-        }
-        .third li:nth-child(2) {
-             transform:translateZ(-100px) translateY(85px) rotateX(-70deg);
-             height: 55px;
-            line-height: 55px;
-            transform-origin: 0 100%;
-            clip-path: polygon(18px 0%,calc(100% - 18px) 0%,100% 100%,0% 100%);
-         }
-        .third li:nth-child(3) {
-            transform: rotateX(-180deg) translateZ(100px);
-        }
-        .third li:nth-child(4) {
-            height: 55px;
-            line-height: 55px;
-            transform-origin: 0 100%;
-            transform: translateZ(-100px) translateY(-55px) rotateX(-110deg);
-            clip-path: polygon(18px 0%,calc(100% - 18px) 0%,100% 100%,0% 100%);
-        }
-        .third li:nth-child(5) {
-            width: 55px;
-            transform-origin: 100% 100%;
-            transform: translateZ(-100px) translateX(-55px) rotateY(110deg);
-            clip-path: polygon(0% 18px,100% 0%,100% 100%,0% calc(100% - 18px));
-        }
-        .third li:nth-child(6) {
-            width: 55px;
-            transform-origin: 100% 100%;
-            transform:translateZ(-100px) translateX(85px) rotateY(70deg);
-            clip-path: polygon(0% 18px,100% 0%,100% 100%,0% calc(100% - 18px));
-        }
-
-.four {
-                list-style-type: none;
-                    left: 310px;
-                top: -8px;
-                width: 105px;
-                height: 106px;
-                text-align: center;
-                position: absolute;
-                transform-style: preserve-3d;
-                transform: rotateX(70deg) rotateZ(45deg);
-                perspective: 2000px;
-                perspective-origin: 50% 100%;
-    animation: trigle_down4 4s linear;
-   	 -webkit-animation: trigle_down4 4s linear; 
-        }
-@keyframes trigle_down4{
-    0%{
-        top:-250px;
-    }
-    75%{
-        top:-250px;
-    }
-    100%{
-        top:-28px
-    }
-}
-
-        .four li {
-           width: 100%;
-        height: 100%;
-        position: absolute;
-         background-image: linear-gradient(rgba(112,245,100,0.8) 9%,#dbfe73);
-    opacity: 0.7;
-        }
-        .four li:nth-child(1) {
-            display:none;
-            transform: rotateX(0deg) translateZ(-48px) scale(0.75);
-        }
-        .four li:nth-child(2) {
-             transform:translateZ(-100px) translateY(-48px) rotateX(-70deg);
-             height: 152px;
-            transform-origin: 0 100%;
-            clip-path: polygon(50% 0%,50% 0%,100% 100%,0% 100%);
-         }
-        .four li:nth-child(3) {
-            transform: rotateX(-180deg) translateZ(100px);
-        }
-        .four li:nth-child(4) {
-            height: 150px;
-            transform-origin: 0 100%;
-            transform: translateZ(-100px) translateY(-150px) rotateX(-110deg);
-            clip-path: polygon(50% 0%,50% 0%,100% 100%,0% 100%);
-        }
-        .four li:nth-child(5) {
-            width: 150px;
-            transform-origin: 100% 100%;
-            transform: translateZ(-100px) translateX(-150px) rotateY(110deg);
-            clip-path: polygon(0% 50%,100% 0%,100% 100%,0% 50%);
-        }
-        .four li:nth-child(6) {
-            width: 152px;
-            transform-origin: 100% 100%;
-            transform:translateZ(-100px) translateX(-48px) rotateY(70deg);
-            clip-path: polygon(0% 50%,100% 0%,100% 100%,0% 50%);
-        }
-
-.trigle .back_img{   
-    position: absolute;
-    top: 195px;
-    width: 100%;
-    height: 300px;
-    background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/AHWS/image/icon_db02.png) no-repeat center;
-    transform: rotateX(0deg);
-    background-size: 80% 84%;
-}
-.trigle .back_img1{   
-        position: absolute;
-    left: 0;
-    top: 18%;
-    width: 100%;
-    height: 100%;
-    background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/AHWS/image/icon_db03.png) no-repeat center;
-    transform: rotateX(65deg);
-    background-size: 62%;
-    animation: trigle_move 10s linear infinite;
-    -webkit-animation: trigle_move 10s linear infinite;
-}
-@keyframes trigle_move{
-    0%{
-        transform :   rotateX(65deg) rotateZ(360deg);
-    }
-    100%{
-         transform :   rotateX(65deg) rotateZ(0deg);
-    }
-    
-}
-.trigle .back_img2{   
-       position: absolute;
-    top: 190px;
-    width: 100%;
-    height: 300px;
-    background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/AHWS/image/icon_db04.png) no-repeat center;
-    transform: rotateX(66deg);
-    background-size: 39%;
-    animation: trigle_move1 10s linear infinite;
-    -webkit-animation: trigle_move1 10s linear infinite;
-}
-@keyframes trigle_move1{
-    0%{
-        transform :   rotateX(66deg) rotateZ(0deg);
-    }
-    100%{
-         transform :   rotateX(66deg) rotateZ(360deg);
-    }
-    
-}
-.trigle .back_img3{   
-         position: absolute;
-    top: 247px;
-    width: 100%;
-    height: 300px;
-    background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/AHWS/image/icon_db01.png) no-repeat center;
-    transform: rotateX(50deg);
-    background-size: 65% 100%;
-}
-.trigle .detail {
-    width: 240px;
-    height: 60px;
-    position: absolute;
-}
-.trigle .detail.detail_1 {
-    left: 2px;
-    top: 245px;
-}
-.trigle .detail.detail_2 {
-    left: 430px;
-    top: 194px;
-    width:290px;
-}
-.trigle .detail.detail_3 {
-    left: 67px;
-    top: 117px;
-}
-.trigle .detail.detail_4 {
-    left: 379px;
-    top: 60px;
-}
-.arrow.arrow_1 {
-    width: 20px;
-    height: 1px;
-    background: #01ddb2;
-    transform: rotate(30deg);
-    display: inline-block;
-    margin-top: 40px;
-}
-.trigle .arrow.arrow_1:before {
-    content: '';
-    width: 50px;
-    height: 1px;
-    background: #01ddb2;
-    display: inline-block;
-    transform: rotate(-30deg);
-    position: absolute;
-    left: 17px;
-    top: -13px;
-}
-.trigle .arrow.arrow_1:after {
-    content: '';
-    width: 5px;
-    height: 5px;
-    background: #01ddb2;
-    display: inline-block;
-    border-radius: 50%;
-    position: absolute;
-    top: -2px;
-    box-shadow: 0px 0px 5px 1px #01ddb2;
-    left: -2px;
-}
-.arrow_contain {
-    width: 80px;
-    height: 100%;
-    display: inline-block;
-}
-.arrow_contain.arrow_contain1, .arrow_contain.arrow_contain3{
-    float: right;
-}
-.detail_txt {
-    display: inline-block;
-}
-.detail_txt {
-    width: calc(100% - 80px);
-    height: 100%;
-}
-.detail_txt .precent_txt{
-    width: 50px;
-    height: 50px;
-    display: inline-block;
-    border-radius: 50%;
-      margin: 5px;
-}
-.detail_txt .precent_txt.precent_txt1 {
-    background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/AHWS/image/icon_xfq04.png) no-repeat center;
-}
-.detail_txt .precent_txt.precent_txt2 {
-    background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/AHWS/image/icon_xfq03.png) no-repeat center;
-}
-.detail_txt .precent_txt.precent_txt3 {
-    background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/AHWS/image/icon_xfq01.png) no-repeat center;
-}
-.detail_txt .precent_txt.precent_txt4 {
-    background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/AHWS/image/icon_xfq02.png) no-repeat center;
-}
-.detail_txt .txt_right {
-    padding: 10px 0;
-    display: inline-block;
-    float: right;
-    height: 60px;
-    width: calc(100% - 65px);
-}
-.detail_txt .txt_right .f_div {
-    color: #2bb5ff;
-    font-size: 16px;
-}
-.detail_txt .txt_right .s_div {
-    font-size: 16px;
-    font-weight: bold;
-}
-.detail_txt .txt_right1 .s_div1 {
-    color: #01ddb2;
-}
-.detail_txt .txt_right .s_div2 {
-    color: #5d83ff;
-}
-.detail_txt .txt_right .s_div3 {
-    color: #e59138;
-}
-.detail_txt .txt_right .s_div4 {
-    color: #77f364;
-}
-.arrow.arrow_3 {
-    width: 20px;
-    height: 1px;
-    background: #ff9232;
-    transform: rotate(30deg);
-    display: inline-block;
-    margin-top: 40px;
-}
-.trigle .arrow.arrow_3:before {
-    content: '';
-    width: 50px;
-    height: 1px;
-    background: #ff9232;
-    display: inline-block;
-    transform: rotate(-30deg);
-    position: absolute;
-    left: 17px;
-    top: -13px;
-}
-.trigle .arrow.arrow_3:after {
-    content: '';
-    width: 5px;
-    height: 5px;
-    background: #ff9232;
-    display: inline-block;
-    border-radius: 50%;
-    position: absolute;
-    top: -2px;
-    box-shadow: 0px 0px 5px 1px #ff9232;
-    left: -2px;
-}
-.detail_txt.detail_txt2,.detail_txt.detail_txt4 {
-    float: right;
-}
-.arrow_contain.arrow_contain2 ,.arrow_contain.arrow_contain4{
-    float: left;
-}
-span.arrow.arrow_2 {
-    width: 20px;
-    height: 1px;
-    background: #5f75ff;
-    transform: rotate(-30deg);
-    display: inline-block;
-    margin-top: 40px;
-    float: right;
-}
-span.arrow.arrow_2:before {
-    content: '';
-    width: 50px;
-    height: 1px;
-    background: #5f75ff;
-    display: inline-block;
-    transform: rotate(30deg);
-    position: absolute;
-    left: -47px;
-    top: -13px;
-}
-.trigle .arrow.arrow_2:after {
-    content: '';
-    width: 5px;
-    height: 5px;
-    background: #5f75ff;
-    display: inline-block;
-    border-radius: 50%;
-    position: absolute;
-    top: -2px;
-    box-shadow: 0px 0px 5px 1px #5f75ff;
-    left: 17px;
-}
-span.arrow.arrow_4 {
-    width: 20px;
-    height: 1px;
-    background: #77f364;
-    transform: rotate(-30deg);
-    display: inline-block;
-    margin-top: 40px;
-    float: right;
-}
-span.arrow.arrow_4:before {
-    content: '';
-    width: 50px;
-    height: 1px;
-    background: #77f364;
-    display: inline-block;
-    transform: rotate(30deg);
-    position: absolute;
-    left: -47px;
-    top: -13px;
-}
-.trigle .arrow.arrow_4:after {
-    content: '';
-    width: 5px;
-    height: 5px;
-    background: #77f364;
-    display: inline-block;
-    border-radius: 50%;
-    position: absolute;
-    top: -2px;
-    box-shadow: 0px 0px 5px 1px #77f364;
-    left: 17px;
-}
-.txt_right .f_div.aharrow_up:before {
-    content: '';
-    background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/AHWS/image/icon_jt01.png) no-repeat center;
-    width: 12px;
-    height: 18px;
-    display: block;
-    float: right;
-}
-.txt_right .f_div.aharrow_down:before {
-    content: '';
-    background: url(vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/AHWS/image/icon_jt02.png) no-repeat center;
-    width: 12px;
-    height: 18px;
-    display: block;
-    float: right;
-}
-.chartsdom{
-    width:100%;
-    height:100%;
-}
-.arrow_contain.arrow_contain1 {
-    animation : clip_line 2s linear;
-    -webkit-animation: clip_line 2s linear; 
-}
-@keyframes clip_line{
-    0%{
-        clip-path: polygon(100% 0, 100% 0% ,100% 0, 100% 0);
-    }
-    50%{
-          clip-path: polygon(100% 0, 100% 0% ,100% 0, 100% 0);
-    }
-    75%{
-          clip-path: polygon(50% 0, 100% 0% ,100% 100%, 50% 100%);
-    }
-    100%{
-         clip-path: polygon(0% 0, 100% 0% ,100% 100%, 0% 100%);
-    }
-}
-.detail_txt.detail_txt1 {
-    animation : opacity_path 3s linear;
-    -webkit-animation: opacity_path 3s linear; 
-}
-@keyframes opacity_path{
-    0%{
-        opacity:0;
-    }
-    66.7%{
-          opacity:0;
-    }
-    100%{
-        opacity:1;
-    }
-}
-.arrow_contain.arrow_contain2 {
-    animation : clip_line2 3s linear;
-    -webkit-animation: clip_line2 3s linear; 
-}
-@keyframes clip_line2{
-    0%{
-        clip-path: polygon(0% 0, 0% 0% ,0% 0, 0% 0);
-    }
-    66.66%{
-          clip-path: polygon(0% 0, 0% 0% ,0% 0, 0% 0);
-    }
-    83%{
-          clip-path: polygon(0% 0, 50% 0% ,50% 50%, 0% 50%);
-    }
-    100%{
-         clip-path: polygon(0% 0, 100% 0% ,100% 100%, 0% 100%);
-    }
-}
-.detail_txt.detail_txt2 {
-    animation : opacity_path2 4s linear;
-    -webkit-animation: opacity_path2 4s linear; 
-}
-@keyframes opacity_path2{
-    0%{
-        opacity:0;
-    }
-    75%{
-          opacity:0;
-    }
-    100%{
-        opacity:1;
-    }
-}
-.arrow_contain.arrow_contain3 {
-    animation : clip_line3 4s linear;
-    -webkit-animation: clip_line3 4s linear; 
-}
-@keyframes clip_line3{
-    0%{
-        clip-path: polygon(100% 0, 100% 0% ,100% 0, 100% 0);
-    }
-    75%{
-          clip-path: polygon(100% 0, 100% 0% ,100% 0, 100% 0);
-    }
-    93%{
-          clip-path: polygon(50% 0, 100% 0% ,100% 100%, 50% 100%);
-    }
-    100%{
-         clip-path: polygon(0% 0, 100% 0% ,100% 100%, 0% 100%);
-    }
-}
-
-.detail_txt.detail_txt3 {
-    animation : opacity_path3 5s linear;
-    -webkit-animation: opacity_path3 5s linear; 
-}
-@keyframes opacity_path3{
-    0%{
-        opacity:0;
-    }
-    80%{
-          opacity:0;
-    }
-    100%{
-        opacity:1;
-    }
-}
-.arrow_contain.arrow_contain4 {
-    animation : clip_line4 5s linear;
-    -webkit-animation: clip_line4 5s linear; 
-}
-@keyframes clip_line4{
-    0%{
-        clip-path: polygon(0% 0, 0% 0% ,0% 0, 0% 0);
-    }
-    70%{
-          clip-path: polygon(0% 0, 0% 0% ,0% 0, 0% 0);
-    }
-    85%{
-          clip-path: polygon(0% 0, 50% 0% ,50% 50%, 0% 50%);
-    }
-    100%{
-         clip-path: polygon(0% 0, 100% 0% ,100% 100%, 0% 100%);
-    }
-}
-.detail_txt.detail_txt4 {
-    animation : opacity_path4 6s linear;
-    -webkit-animation: opacity_path4 6s linear; 
-}
-@keyframes opacity_path4{
-    0%{
-        opacity:0;
-    }
-    83.33%{
-          opacity:0;
-    }
-    100%{
-        opacity:1;
-    }
-}
-</style>
- </head> 
- <body>
-  <div class="editorscroll "> 
-   <div id="editor" style="background-repeat: no-repeat; overflow: auto; transform-origin: 0px 0px 0px; background-image: url(&quot;vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/nhdemo/mf/bj.jpg&quot;); background-size: contain; background-position: 50% 0px; background-color: rgb(0, 0, 0); min-width: auto; width: 1920px; min-height: auto; height: 1080px;"> 
-    <script src="vfs/root/products/ebi/sys/coolrpt/coolresource/js/echarts.js?time=123456654321">
-		</script> 
-    <div class="defelement" droppable="true" wid="elem" style="background-repeat: no-repeat; left: 0px; top: 0px; width: 100%; height: 80px; background-color: transparent; background-image: url(&quot;vfs/root/products/ebi/sys/picture/shubohui/kpchar_top.png&quot;); border: none; background-position: 65% 0px;"> 
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH17" wid="CHtmlWidgetLLSRQ11" style=";left:50px;top:110px;width:500px;height:550px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div id="HHH12" wid="CHtmlWidgetZWYWWPHB64" class="widgetobj_container " style=";left:0px;top:0px;width:100%;height:100%"> 
-        <div class="pd-main"> 
-         <div id="chart4" class="chart4"> 
-          <div class="compass"> 
-           <div class="compass-bg-1"></div> 
-           <div class="compass-bg-2"></div> 
-           <div class="compass-bg-3"></div> 
-           <div class="compass-bg-4"></div> 
-           <div class="compass-bg-5"></div> 
-           <div class="compass-bg-6"></div> 
-           <div class="compass-bg-7"></div> 
-           <div class="compass-bg-c-1"></div> 
-           <div class="compass-bg-c-2"></div> 
-           <div class="compass-bg-c-3"></div> 
-           <div class="compass-bg-c-4"></div> 
-           <div class="compass-text compass-text-1"></div> 
-           <div class="compass-text compass-text-2"></div> 
-           <div class="compass-text compass-text-3"></div> 
-           <div class="compass-text compass-text-4"></div> 
-           <div class="compass-text compass-text-5"></div> 
-           <div class="compass-number"> 
-            <div title="1" class="rank-1">
-             <span></span>
-            </div> 
-            <div title="2" class="rank-2">
-             <span></span>
-            </div> 
-            <div title="3" class="rank-3">
-             <span></span>
-            </div> 
-            <div title="4" class="rank-4">
-             <span></span>
-            </div> 
-            <div title="5" class="rank-5">
-             <span></span>
-            </div> 
-           </div> 
-           <div class="line-sx"> 
-            <div class="line-fs"></div> 
-            <div class="line-fs"></div> 
-            <div class="line-fs"></div> 
-            <div class="line-fs"></div> 
-            <div class="line-fs"></div> 
-            <div class="line-fs"></div> 
-            <div class="line-fs"></div> 
-            <div class="line-fs"></div> 
-            <div class="line-fs"></div> 
-           </div> 
-          </div> 
-         </div> 
-        </div>  
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH18" wid="CHtmlWidgetLLSRQ16" style=";left:975px;top:690px;width:895px;height:400px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div style="background-color:rgba(0,0,0,0);;left:0px;top:0px;width:100%;height:100%" id="HHH10" wid="CHtmlWidgetZWYFGZZ48" class="widgetobj_container "> 
-        <div id="bar" style="width:100%;height:100%;"> 
-        </div>  
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH19" wid="CHtmlWidgetLLSRQ94" style=";left:50px;top:690px;width:895px;height:400px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div style="width:400px;height:300px;left:0px;top:0px;width:100%;height:95%" id="HHH39" wid="4b6a86af23d9494a9f4a7d427f44652d23" class="widgetobj_container ">  
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH23" wid="CHtmlWidgetLLSRQ77" style=";left:512px;top:1120px;width:432px;height:400px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div style="width:240px;height:240px;left:0px;top:0px;width:100%;height:100%" id="HHH11" wid="CHtmlWidgetXZJBBT42" class="widgetobj_container "> 
-        <div class="pie"> 
-         <div class="pies pie1"></div> 
-         <div class="pies pie2"></div> 
-         <div class="pies pie3"></div> 
-         <div class="pie4"></div> 
-        </div> 
-        <div class="chart"></div>  
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH20" wid="CHtmlWidgetLLSRQ91" style=";left:1370px;top:110px;width:500px;height:550px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div style="width:560px;height:500px;;left:0px;top:0px;width:100%;height:90%" id="HHH13" wid="CHtmlWidgetZWYGGXZPM56" class="widgetobj_container ">  
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH48" wid="CHtmlWidgetLLSRQ56" style=";left:50px;top:1120px;width:432px;height:400px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div style="width:420px;height:240px;left:23px;top:15px;width:90%;height:90%" id="HHH27" wid="46d787dc7c7f4a118b9c59da0ce89c3486" class="widgetobj_container "> 
-        <div class="precent"></div>  
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH50" wid="CHtmlWidgetLLSRQ23" style=";left:1436px;top:1120px;width:432px;height:400px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div style="width:243px;height:236px;left:0px;top:0px;width:100%;height:100%" id="HHH41" wid="CHtmlWidgetDKDJBBBT40" class="widgetobj_container ">  
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH51" wid="CHtmlWidgetLLSRQ19" style=";left:974px;top:1120px;width:432px;height:400px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div id="HHH45" wid="CHtmlWidgetZWYHXBT60" class="widgetobj_container " style=";left:0px;top:0px;width:100%;height:100%"> 
-        <div class="pd-info animated bounceInUp"> 
-         <div class="pd-info-center pdt-container"></div> 
-        </div>  
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH52" wid="CHtmlWidgetLLSRQ70" style=";left:50px;top:1548px;width:586px;height:400px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div id="HHH36" wid="0f98ee2c55ca4b8dbdbf0d1986e57a311" class="widgetobj_container " style=";left:0px;top:0px;width:100%;height:420px"> 
-        <div class="lineDom"> 
-        </div>  
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH53" wid="CHtmlWidgetLLSRQ44" style=";left:1282px;top:1548px;width:586px;height:400px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div style="background-color:rgba(255,255,255,.0);;left:0px;top:0px;width:100%;height:100%" id="HHH54" wid="e1e5124249d3497fa814cdaeff76ba4818" class="widgetobj_container "> 
-        <div class="rollLine_main" id="rollLine"> 
-        </div>  
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH49" wid="CHtmlWidgetLLSRQ39" style=";left:666px;top:1548px;width:586px;height:400px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div id="HHH56" wid="033f08ec73264ddd95ddf0926938fe4e48" class="widgetobj_container " style=";left:0px;top:0px;width:95%;height:95%">  
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div class="widgetobj_container trigle" style="width:800px;height:500px;;left:600px;top:150px;width:720px;height:500px" id="HHH24" wid="e577fd81261947a5a1487b69e713d2a121"> 
-     <div class="back_img3"></div> 
-     <div class="back_img"></div> 
-     <div class="back_img1"></div> 
-     <div class="back_img2"></div> 
-     <ul class="first"> 
-      <li></li>
-      <li></li>
-      <li></li> 
-      <li></li>
-      <li></li>
-      <li></li> 
-     </ul> 
-     <ul class="seconed"> 
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li> 
-     </ul> 
-     <ul class="third"> 
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li> 
-     </ul> 
-     <ul class="four"> 
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li>
-      <li></li> 
-     </ul> 
-     <div class="detail detail_1"> 
-      <div class="detail_txt detail_txt1"> 
-       <span class="precent_txt precent_txt1"> 
-        <div class="chartsdom"></div> </span> 
-       <div class="txt_right txt_right1"> 
-        <span> 
-         <div class="f_div">
-          注册护士
-         </div> 
-         <div class="s_div s_div1">
-          872人
-         </div> </span> 
-       </div> 
-      </div> 
-      <div class="arrow_contain arrow_contain1"> 
-       <span class="arrow arrow_1"></span> 
-      </div> 
-     </div> 
-     <div class="detail detail_2"> 
-      <div class="detail_txt detail_txt2"> 
-       <span class="precent_txt precent_txt2"> 
-        <div class="chartsdom"></div> </span> 
-       <div class="txt_right txt_right2"> 
-        <span> 
-         <div class="f_div">
-          注册护士
-         </div> 
-         <div class="s_div s_div2">
-          872人
-         </div> </span> 
-       </div> 
-      </div> 
-      <div class="arrow_contain arrow_contain2"> 
-       <span class="arrow arrow_2"></span> 
-      </div> 
-     </div> 
-     <div class="detail detail_3"> 
-      <div class="detail_txt detail_txt3"> 
-       <span class="precent_txt precent_txt3"> 
-        <div class="chartsdom"></div> </span> 
-       <div class="txt_right txt_right3"> 
-        <span> 
-         <div class="f_div">
-          注册护士
-         </div> 
-         <div class="s_div s_div3">
-          872人
-         </div> </span> 
-       </div> 
-      </div> 
-      <div class="arrow_contain arrow_contain3"> 
-       <span class="arrow arrow_3"></span> 
-      </div> 
-     </div> 
-     <div class="detail detail_4"> 
-      <div class="detail_txt detail_txt4"> 
-       <span class="precent_txt precent_txt4"> 
-        <div class="chartsdom"></div> </span> 
-       <div class="txt_right txt_right4"> 
-        <span> 
-         <div class="f_div">
-          注册护士
-         </div> 
-         <div class="s_div s_div4">
-          872人
-         </div> </span> 
-       </div> 
-      </div> 
-      <div class="arrow_contain arrow_contain4"> 
-       <span class="arrow arrow_4"></span> 
-      </div> 
-     </div>  
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH55" wid="CHtmlWidgetLLSRQ38" style=";left:50px;top:1978px;width:432px;height:400px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div style="width:270px;height:260px;left:0px;top:0px;width:100%;height:100%" id="HHH58" wid="CHtmlWidgetRXZBT67" class="widgetobj_container "> 
-        <div class="person"> 
-         <div class="pers person1"></div> 
-         <div class="pers person2"></div> 
-         <div class="pers person3"></div> 
-        </div> 
-        <div class="svgs"> 
-         <svg width="244" height="264" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
-          <defs> 
-           <lineargradient id="linear" x1="0%" y1="0%" x2="0%" y2="100%"> 
-            <stop offset="0%" style="stop-color:#0a6aff;stop-opacity:0.47" /> 
-            <stop offset="40%" style="stop-color:#5cffff;stop-opacity:1" /> 
-            <stop offset="100%" style="stop-color:#0a6aff;stop-opacity:1" /> 
-           </lineargradient> 
-           <marker id="arrow" markerwidth="10" markerheight="10" refx="0" refy="3" orient="auto" markerunits="strokeWidth"> 
-            <path d="M0,0 L0,6 L9,3 z" fill="rgb(11,108,255)" /> 
-           </marker> 
-          </defs> 
-          <path d="M134 86C136 86 80 85 77 208" fill="none" stroke="url(#linear)" stroke-opacity="1" marker-end="url(#arrow)" /> 
-          <path d="M136 86C138 86 212 88 204 208" fill="none" stroke="url(#linear)" stroke-opacity="1" marker-end="url(#arrow)" /> 
-          <path d="M136 84C138 84 195 84 206 116" fill="none" stroke="url(#linear)" stroke-opacity="1" marker-end="url(#arrow)" /> 
-          <path d="M134 84C136 84 81 82 58 123" fill="none" stroke="url(#linear)" stroke-opacity="1" marker-end="url(#arrow)" /> 
-          <path d="M132 86C134 86 120 68 93 67" fill="none" stroke="url(#linear)" stroke-opacity="1" marker-end="url(#arrow)" /> 
-          <path d="M134 86C136 86 132 78 134 74C136 69 150 52 150 52" fill="none" stroke="url(#linear)" stroke-opacity="1" marker-end="url(#arrow)" /> 
-          <path d="M134 85C136 85 146 65 183 65" fill="none" fill-opacity="0" stroke="url(#linear)" marker-end="url(#arrow)" /> 
-         </svg> 
-        </div> 
-        <div class="svgs"> 
-         <div class="text per1">
-          <span></span>
-          <span></span>人
-         </div> 
-         <div class="text per2">
-          <span></span>
-          <span></span>人
-         </div> 
-         <div class="text per3">
-          <span></span>
-          <span></span>人
-         </div> 
-         <div class="text per4">
-          <span></span>
-          <span></span>人
-         </div> 
-         <div class="text per5">
-          <span></span>
-          <span></span>人
-         </div> 
-         <div class="text per6">
-          <span></span>
-          <span></span>人
-         </div> 
-         <div class="text per7">
-          <span></span>
-          <span></span>人
-         </div> 
-        </div>  
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div style="width:350px;height:250px;left:644px;top:2409px;width:620px;height:400px" id="HHH63" wid="a25abe1190874b298eef90e59a7ec88c83" class="widgetobj_container "> 
-     <div class="bar_img"></div> 
-     <div class="bar_img1"></div> 
-     <div class="bar_img2"></div> 
-     <div class="bar_charts"></div>  
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH71" wid="CHtmlWidgetLLSRQ12" style=";left:512px;top:1978px;width:432px;height:400px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div style="width:310px;height:335px;left:55px;top:0px;width:80%;height:100%" id="HHH59" wid="23410f59a0ff498f888c21aeeafcef8c25" class="widgetobj_container "> 
-        <div class="pd-main-left"> 
-         <div class="yun-container"> 
-          <div class="yun-tree"></div> 
-          <div class="line-fs"></div> 
-          <div class="line-fs"></div> 
-          <div class="line-fs"></div> 
-          <div class="line-fs"></div> 
-          <div class="line-fs"></div> 
-          <div class="line-fs"></div> 
-          <div class="line-fs"></div> 
-          <div class="line-fs"></div> 
-          <div class="line-fs"></div> 
-         </div> 
-         <div id="yunText" class="yun-text"> 
-          <div id="yunText-1"></div> 
-          <div id="yunText-2"></div> 
-          <div id="yunText-3"></div> 
-          <div id="yunText-4"></div> 
-          <div id="yunText-5"></div> 
-          <div id="yunText-6"></div> 
-          <div id="yunText-7"></div> 
-          <div id="yunText-8"></div> 
-          <div id="yunText-9"></div> 
-          <div id="yunText-10"></div> 
-          <div id="yunText-11"></div> 
-          <div id="yunText-12"></div> 
-          <div id="yunText-13"></div> 
-          <div id="yunText-14"></div> 
-          <div id="yunText-15"></div> 
-          <div id="yunText-16"></div> 
-         </div> 
-        </div>  
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH72" wid="CHtmlWidgetLLSRQ63" style=";left:974px;top:1978px;width:432px;height:400px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div style="background-color:rgba(0,0,0,0);;left:0px;top:0px;width:100%;height:100%" id="HHH99" wid="CHtmlWidgetLIGHTBARAREA26" class="widgetobj_container "> 
-        <div id="bar_area"> 
-        </div>  
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH73" wid="CHtmlWidgetLLSRQ60" style=";left:1436px;top:1978px;width:432px;height:400px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div style="background-color:rgba(0,0,0,0);left:0px;top:0px;width:100%;height:100%" id="HHH44" wid="CHtmlWidgetZWYLDT40" class="widgetobj_container "> 
-        <div id="nh_radar"> 
-        </div>  
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH74" wid="CHtmlWidgetLLSRQ59" style=";left:50px;top:2408px;width:560px;height:400px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div style="width:620px;height:263px;left:0px;top:35px;width:100%;height:80%" id="HHH46" wid="CHtmlWidgetZWYYXZLB90" class="widgetobj_container "> 
-        <div class="pd-info-left"> 
-         <div class="y-left"> 
-          <div class="info-1-0 animated infinite rotateF"></div> 
-          <div class="info-1-1 animated infinite rotateF"></div> 
-          <div class="info-1-2 animated infinite rotate"></div> 
-          <div class="info-1-3 animated infinite rotate"></div> 
-          <div class="info-1-4 animated infinite flashPD"></div> 
-         </div> 
-         <div class="y-number y-number-1 animated fadeInLeft"> 
-          <div class="y-number-bg animated infinite rotate"></div> 
-          <div class="y-number-icon"></div> 
-          <div class="y-number-text"> 
-           <span></span> 
-           <span id="number1"></span> 
-          </div> 
-         </div> 
-         <div class="y-number y-number-2 animated fadeInLeft"> 
-          <div class="y-number-bg animated infinite rotateF"></div> 
-          <div class="y-number-icon"></div> 
-          <div class="y-number-text"> 
-           <span></span> 
-           <span id="number2"></span> 
-          </div> 
-         </div> 
-         <div class="y-number y-number-3 animated fadeInLeft"> 
-          <div class="y-number-bg animated infinite rotateF"></div> 
-          <div class="y-number-icon"></div> 
-          <div class="y-number-text"> 
-           <span></span> 
-           <span id="number3"></span> 
-          </div> 
-         </div> 
-         <div class="y-number y-number-4 animated fadeInLeft"> 
-          <div class="y-number-bg animated infinite rotate"></div> 
-          <div class="y-number-icon"></div> 
-          <div class="y-number-text"> 
-           <span></span> 
-           <span id="number4"></span> 
-          </div> 
-         </div> 
-        </div>  
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH75" wid="CHtmlWidgetLLSRQ76" style=";left:1306px;top:2408px;width:560px;height:400px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div style="width:450px;height:360px;left:0px;top:0px;width:100%;height:100%" id="HHH35" wid="ae00bb3272714c3083c2198032a7a96079" class="widgetobj_container ">  
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH76" wid="CHtmlWidgetLLSRQ30" style=";left:512px;top:2838px;width:432px;height:400px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div style="width:150px;height:150px;left:125px;top:94px;width:150px;height:150px" id="HHH80" wid="77e6ea8e1d3b4795aa1a30136190c79839" class="widgetobj_container "> 
-        <div class="back_chart"> 
-         <svg width="100%" height="100%" viewbox="0 0 150 150" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
-          <path id="svg_2" d="m3,75c0,-39.77901 32.22099,-72 72,-72c39.77901,0 72,32.22099 72,72c0,39.77901 -32.22099,72 -72,72c-39.77901,0 -72,-32.22099 -72,-72z" stroke="#2de6af" fill-opacity="null" fill="none" /> 
-         </svg> 
-        </div> 
-        <div class="cirdom"></div> 
-        <div class="arrow_cir arrow_cir1"></div> 
-        <div class="arrow_cir arrow_cir2"></div>  
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH77" wid="CHtmlWidgetLLSRQ72" style=";left:1436px;top:2837px;width:432px;height:400px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div class="defelement" droppable="true" wid="elem" style="background-repeat: no-repeat; background-color: transparent; height: 420px; border: none; top: -40px; left: 6px; width: 420px;"> 
-        <div style="width:420px;height:420px;left:0px;top:0px;width:420px;height:420px" id="HHH85" wid="e57a5e2e2bf04c669ffc6fdfeaa36cc660" class="widgetobj_container "> 
-         <div class="piechartdom"></div> 
-         <div class="svg_dom"> 
-          <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
-           <path id="svg_2" d="m117,210c0,-51.65746 41.61878,-93.5 93,-93.5c51.38122,0 93,41.84254 93,93.5c0,51.65746 -41.61878,93.5 -93,93.5c-51.38122,0 -93,-41.84254 -93,-93.5z" stroke="#bfbfbf" fill="none" stroke-dasharray="3,3" xmlns="http://www.w3.org/2000/svg" /> 
-           <path id="svg_3" d="m134,210c0,-41.71271 34.01105,-75.5 76,-75.5c41.98895,0 76,33.78729 76,75.5c0,41.71271 -34.01105,75.5 -76,75.5c-41.98895,0 -76,-33.78729 -76,-75.5z" stroke="#bfbfbf" fill="none" stroke-dasharray="3,3" xmlns="http://www.w3.org/2000/svg" /> 
-          </svg> 
-         </div> 
-         <div class="cir_arrow cir_arrow1"></div> 
-         <div class="cir_arrow cir_arrow2"></div>  
-        </div> 
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH78" wid="CHtmlWidgetLLSRQ20" style=";left:974px;top:2838px;width:432px;height:400px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div style="width:270px;height:200px;left:0px;top:0px;width:100%;height:100%" id="HHH38" wid="39f7dc05da2d4b1086e16242a4ff81b463" class="widgetobj_container "> 
-        <div class="icon_img"></div> 
-        <div class="icon_img1"></div> 
-        <div class="icon_img2"></div> 
-        <div class="chartdom"></div>  
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div class="widgetobj_container nh-container" id="HHH79" wid="CHtmlWidgetLLSRQ42" style=";left:50px;top:2838px;width:432px;height:400px"> 
-     <div class="nh-content"> 
-      <div class="nh-container-title"></div> 
-      <div class="nh-container-body"> 
-       <div style="width:400px;height:400px;left:0px;top:0px;width:100%;height:100%" id="HHH34" wid="CHtmlWidgetZWYGGHXPD95" class="widgetobj_container "> 
-        <div class="precent"></div>  
-       </div> 
-      </div> 
-     </div>   
-    </div> 
-    <div class="defelement" droppable="true" wid="elem" style="width: 300px; background-repeat: no-repeat; left: 54px; top: 3253px; border: none; background-color: transparent; height: 100px;"> 
-    </div> 
-   </div> 
-   <div class="defelement" id="closeImg" style="border: currentColor; border-image: none; top: 10px; width: 40px; height: 42px; right: 20px; cursor: pointer; background-image: url(&quot;vfs/root/products/ebi/sys/picture/关闭按钮1.png&quot;); background-repeat: no-repeat; background-color: transparent;" wid="elem" droppable="true"> 
-   </div>  
-  </div>
- </body>
- <head>
-  <script src="../eui/modules/ecommonctrls.js"></script>
-  <script src="../eui/modules/ecombobox.js"></script>
-  <script src="../eui/modules/etree.js"></script>
-  <script src="../eui/modules/edialog.js"></script>
-  <script src="../eui/modules/efloathint.js"></script>
-  <script src="../eui/third/jquery-1.9.1.min.js"></script>
-  <script src="../ebibase/user/coolrptshow/coolcalcreq.js"></script>
-  <script src="../ebibase/user/coolrptshow/minishowmgr.js"></script>
-  <script src="../ebibase/user/coolrptshow/coolrptshow.js"></script>
-  <script src="../ebibase/user/coolrptshow/widgetresult/cwidgetresult.js"></script>
-  <script src="../ebibase/user/coolrptshow/widgetresult/cwidgetresultgrid.js"></script>
-  <script src="../ebibase/user/coolrptshow/widgetresult/cwidgetresultchart.js"></script>
-  <script src="../ebibase/user/coolrptshow/widgetresult/cwidgetresultminichart.js"></script>
-  <script src="../emapmgr/ditu/echarts45.js"></script>
-  <script src="../ebibase/user/coolrptshow/widgetresult/cwidgetresultmap.js"></script>
-  <script src="../ebibase/user/coolrptshow/widgetresult/cwidgetresulthtml.js"></script>
-  <script src="../ebipro/user/coolrptdsn/dlg/floatdlg.js"></script>
-  <script id="vardefine">
-var g_rptid ="EANA$2$4$1$7a22a8c202ba402bb05b0c450493a445$0ca1259fa8ed410599d3915b9d23e26a.coolrpt";
-var g_watermark ="0";
-var g_hasmacroinhtml ="false";
-var g_cwids ="";
-var $relpath ="/abi/";
-var g_userid ="demo";
-var g_htmlmacro_hasrefresult ="false";
-var g_isResultNew ="true";
-var g_srcrptid ="null";
-var g_username ="ESENSOFT";
-var g_resid ="EANA$2$4$2$7a22a8c202ba402bb05b0c450493a445$092e8c31b1ba4833a23365f962bfb063.coolrpt";
-var g_threadid ="EANA$2$4$2$7a22a8c202ba402bb05b0c450493a445$2343278.coolrpt";
-var g_treeinfo ="%5B%22div%22%2C%22div%22%2C%7B%22HHH17%22%3A%5B%22HHH12%22%5D%2C%22iscallback%22%3Afalse%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH18%22%3A%5B%22HHH10%22%5D%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH19%22%3A%5B%22HHH39%22%5D%7D%2C%7B%22HHH23%22%3A%5B%22HHH11%22%5D%2C%22iscallback%22%3Afalse%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH20%22%3A%5B%22HHH13%22%5D%7D%2C%7B%22HHH48%22%3A%5B%22HHH27%22%5D%2C%22iscallback%22%3Afalse%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH50%22%3A%5B%22HHH41%22%5D%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH51%22%3A%5B%22HHH45%22%5D%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH52%22%3A%5B%22HHH36%22%5D%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH53%22%3A%5B%22HHH54%22%5D%7D%2C%7B%22HHH49%22%3A%5B%22HHH56%22%5D%2C%22iscallback%22%3Afalse%7D%2C%22HHH24%22%2C%7B%22HHH55%22%3A%5B%22HHH58%22%5D%2C%22iscallback%22%3Afalse%7D%2C%22HHH63%22%2C%7B%22iscallback%22%3Afalse%2C%22HHH71%22%3A%5B%22HHH59%22%5D%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH72%22%3A%5B%22HHH99%22%5D%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH73%22%3A%5B%22HHH44%22%5D%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH74%22%3A%5B%22HHH46%22%5D%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH75%22%3A%5B%22HHH35%22%5D%7D%2C%7B%22iscallback%22%3Afalse%2C%22HHH76%22%3A%5B%22HHH80%22%5D%7D%2C%7B%22HHH77%22%3A%5B%7B%22div%22%3A%5B%22HHH85%22%5D%2C%22iscallback%22%3Afalse%7D%5D%2C%22iscallback%22%3Afalse%7D%2C%7B%22HHH78%22%3A%5B%22HHH38%22%5D%2C%22iscallback%22%3Afalse%7D%2C%7B%22HHH79%22%3A%5B%22HHH34%22%5D%2C%22iscallback%22%3Afalse%7D%2C%22div%22%5D";
-</script>
-  <script id="page.js">
-// JavaScript Document
-
-//缩放
-+function(){
-    //关闭按钮
-$("#closeImg").click(function(){
-     window.close();
-});  
-    
-    var bodydom = document.body;
-    var editordom = document.getElementById("editor");
-	var defwidth = 1920;
-    var defheight = 1080;
-	var xScale = bodydom.clientWidth/ defwidth;
-    var yScale = bodydom.clientHeight/defheight;
-    editordom.style.cssText += ";transform: scale(" + xScale + "," + yScale + ")";
-
-$(window).resize(function () {
-       xScale = bodydom.clientWidth/ defwidth;
-        yScale = bodydom.clientHeight/defheight;
-        editordom.style.cssText += ";transform: scale(" + xScale + "," + yScale + ")";
-   })
-}();
-</script>
-  <script src="../ebibase/user/coolrptshow/initmain.js"></script>
- </head>
- <body></body>
-</html>

+ 0 - 2
src/components/bar3d/index.vue

@@ -15,8 +15,6 @@
 </template>
 
 <script>
-import 'echarts-gl'
-
 export default {
   name: "bar3d",
   data() {

+ 94 - 5
src/components/gauge/index.vue

@@ -22,18 +22,107 @@ export default {
   name: "gauge",
   data() {
     return {
-      
-      
+      option: null,
+      timer: null
     }
   },
   mounted() {
-    
+    this.getEchart();
   },
   methods: {
-    
+    getEchart() {
+      let myChart = echarts.init(document.getElementById('chart_gauge'));
+      this.option = {
+        tooltip: {
+          formatter: '{a} <br/>{c} {b}'
+        },
+         series: [{
+            name: '速度',
+            type: 'gauge',
+            min: 0,
+            max: 220,
+            splitNumber: 11,
+            // radius: '50%',
+            axisLine: {            // 坐标轴线
+              lineStyle: {       // 属性lineStyle控制线条样式
+                color: [[0.09, 'lime'], [0.82, '#1e90ff'], [1, '#ff4500']],
+                width: 3,
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 10
+              }
+            },
+            axisLabel: {            // 坐标轴小标记
+              fontWeight: 'bolder',
+              color: '#fff',
+              shadowColor: '#fff', //默认透明
+              shadowBlur: 10
+            },
+            axisTick: {            // 坐标轴小标记
+                length: 15,        // 属性length控制线长
+                lineStyle: {       // 属性lineStyle控制线条样式
+                  color: 'auto',
+                  shadowColor: '#fff', //默认透明
+                  shadowBlur: 10
+                }
+            },
+            splitLine: {           // 分隔线
+              length: 25,         // 属性length控制线长
+              lineStyle: {       // 属性lineStyle(详见lineStyle)控制线条样式
+                width: 3,
+                color: '#fff',
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 10
+              }
+            },
+            pointer: {           // 分隔线
+              shadowColor: '#fff', //默认透明
+              shadowBlur: 5
+            },
+            title: {
+              textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
+                fontWeight: 'bolder',
+                fontSize: 20,
+                fontStyle: 'italic',
+                color: '#fff',
+                shadowColor: '#fff', //默认透明
+                shadowBlur: 10
+              }
+            },
+            detail: {
+              // backgroundColor: 'rgba(30,144,255,0.8)',
+              // borderWidth: 1,
+              // borderColor: '#fff',
+              // shadowColor: '#fff', //默认透明
+              // shadowBlur: 5,
+              offsetCenter: [0, '50%'],       // x, y,单位px
+              textStyle: {       // 其余属性默认使用全局文本样式,详见TEXTSTYLE
+                fontWeight: 'bolder',
+                fontSize: 25,
+                color: '#fff'
+              }
+            },
+            data: [{
+              value: 40, 
+              name: 'km/h'
+            }]
+        }]
+      }
+
+
+      myChart.setOption(this.option, true);
+
+      window.addEventListener('resize', () => {
+        myChart.resize();
+      });
+
+      this.timer = setInterval(() => {
+        this.option.series[0].data[0].value = (Math.random()*100).toFixed(2) - 0;
+        myChart.setOption(this.option, true);
+      },2000);
+    }
   },
   beforeDestroy() {
-    
+    clearInterval(this.timer);
   }
 };
 </script>

+ 2 - 2
src/components/index.js

@@ -7,7 +7,7 @@
 import bgAnimation from './bgAnimation' // 登录界面背景图动画
 import modal from './modal' // 自定义全局模态框
 import sinan from './sinan' // 司南排名图
-import rimian from './rimian' // 日冕排名图
+import seamless from './seamless' // 新闻无缝滚动
 import pyramid from './pyramid' // 金字塔数据图
 import scrollArc from './scrollArc' // 滚动弧形线
 import szBar from './szBar' // 双轴柱状图
@@ -34,7 +34,7 @@ const components = {
   bgAnimation,
   modal,
   sinan,
-  rimian,
+  seamless,
   pyramid,
   scrollArc,
   szBar,

+ 0 - 46
src/components/rimian/index.vue

@@ -1,46 +0,0 @@
-<!--
- 描述: 日冕排名图
- 作者: Jack Chen
- 日期: 2020-04-18
--->
-
-<template>
-  <div class="wrap-container sn-container"> 
-    <div class="sn-content"> 
-      <div class="sn-title">日冕排名图</div> 
-      <div class="sn-body"> 
-        <div class="wrap-container"> 
-          <div class="chartsdom" id="chart_rm"></div> 
-        </div> 
-      </div> 
-    </div>   
-  </div>
-</template>
-
-<script>
-export default {
-  name: "rimian",
-  data() {
-    return {
-      
-      
-    }
-  },
-  mounted() {
-    
-  },
-  methods: {
-    
-  },
-  beforeDestroy() {
-    
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.sn-container {
-  left: 1370px;
-  top: 110px;
-}
-</style>

+ 201 - 0
src/components/seamless/index.vue

@@ -0,0 +1,201 @@
+<!--
+ 描述: 新闻无缝滚动
+ 作者: Jack Chen
+ 日期: 2020-04-18
+-->
+
+<template>
+  <div class="wrap-container sn-container"> 
+    <div class="sn-content"> 
+      <div class="sn-title">新闻无缝滚动</div> 
+      <div class="sn-body"> 
+        <div class="wrap-container">
+
+          <div class="table">
+            <table border="0" cellpadding="0" cellspacing="0" class="table-header">
+              <tbody>
+                <tr>
+                  <td width="60%">
+                    <span>标 题</span>
+                  </td>
+                  <td width="20%">
+                    <span>日 期</span>
+                  </td>
+                  <td width="20%">
+                    <span>热 度</span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+
+            <vue-seamless-scroll :data="listData" class="seamless-warp" :class-option="optionSetting">
+              <table border="0" cellpadding="0" cellspacing="0" class="item">
+                <tbody>
+                  <tr v-for="(item, index) in listData" :key="index">
+                    <td width="100%" class="title">
+                      <span :class="{colorRed: item.hot > 4999}">{{ item.title }}</span>
+                    </td>
+                    <td width="20%">
+                      <span>{{ item.date }}</span>
+                    </td>
+                    <td width="20%">
+                      <span :class="{colorRed: item.hot > 4999, colorOrange: item.hot < 10}">{{ item.hot }}</span>
+                    </td>
+                  </tr>
+                </tbody>
+            </table>
+            </vue-seamless-scroll>
+          </div>
+
+        </div> 
+      </div> 
+    </div>   
+  </div>
+</template>
+
+<script>
+import vueSeamlessScroll from 'vue-seamless-scroll'
+
+export default {
+  name: "seamless",
+  components: {
+    vueSeamlessScroll
+  },
+  data() {
+    return {
+     listData: [{
+        title: '钱花哪了?一图带你读懂年轻人的消费观',
+        date: '2020-05-05',
+        hot: 2306
+     }, {
+        title: '“五一”假期前三天国内旅游收入超350亿元',
+        date: '2020-05-02',
+        hot: 5689
+     }, {
+        title: '滴滴、美团、哈啰多赛道交战,本地生活会是终局?',
+        date: '2020-05-02',
+        hot: 9
+     }, {
+        title: '“互联网+文化”逆势上行文娱消费,云端真精彩',
+        date: '2020-04-25',
+        hot: 288
+     }, {
+        title: '乐观主义还是悲观主义?巴菲特事实上是个现实主义者!',
+        date: '2020-04-21',
+        hot: 158
+     }, {
+        title: 'B站的后浪,会把爱优腾拍在沙滩上吗?',
+        date: '2020-04-20',
+        hot: 889
+     }, {
+        title: '华为是如何做投资的:先给两个亿订单 一年送上市',
+        date: '2020-04-01',
+        hot: 5800
+     }, {
+        title: '马斯克:特斯拉股价太高了,我要卖豪宅',
+        date: '2020-03-25',
+        hot: 6
+     }, {
+        title: '人民日报海外版:云模式巧解“就业难”',
+        date: '2020-03-16',
+        hot: 88
+     }, {
+        title: '刚刚港股"崩了":狂跌近1000点!发生什么?',
+        date: '2020-03-12',
+        hot: 88
+     }, {
+        title: '个人健康信息码国家标准发布',
+        date: '2020-02-28',
+        hot: 5
+     }, {
+        title: '传软银国际裁员约10% 拉美基金两名管理合伙人离职',
+        date: '2020-02-15',
+        hot: 258
+     }, {
+        title: '27.5万个岗位:事业单位、人工智能等热门专场招聘',
+        date: '2020-02-10',
+        hot: 198
+     }, {
+        title: '一季度电子商务发展势头迅猛 农村电商突破1300万家',
+        date: '2020-02-08',
+        hot: 19
+     }]
+    }
+  },
+  computed: {
+  optionSetting () {
+      return {
+        step: 0.5, // 数值越大速度滚动越快
+        limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
+        hoverStop: true, // 是否开启鼠标悬停stop
+        direction: 1, // 0向下 1向上 2向左 3向右
+        // autoPlay: false,
+        openWatch: true, // 开启数据实时监控刷新dom
+        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
+        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
+        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
+      }
+    }
+  },  
+  mounted() {
+    
+  },
+  methods: {
+    
+  },
+  beforeDestroy() {
+    
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.sn-container {
+  left: 1370px;
+  top: 110px;
+  %table-style {
+    width: 100%;
+    height: 35px;
+    table-layout: fixed;
+    tr {
+      td {
+        padding: 10px 5px;
+        text-align: center;
+        background-color: transparent;
+        white-space: nowrap;
+        overflow: hidden;
+        color: #E2E5FF;
+        font-size: 14px;
+      }
+    }
+  }
+  .table {
+    .table-header {
+      @extend %table-style;
+    }
+    .seamless-warp {
+      height: 400px;
+      overflow: hidden;
+      visibility: visible;
+      .colorRed {
+        color: #FF4669;
+      }
+      .colorOrange {
+        color: #FFC956;
+      }
+      .item {
+        height: auto;
+        @extend %table-style;
+        tr {
+          td {
+            &.title {
+              text-overflow: ellipsis;
+              display: inline-block;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

+ 35 - 3
src/components/waterPolo/index.vue

@@ -18,19 +18,47 @@
 </template>
 
 <script>
+
+
 export default {
   name: "waterPolo",
   data() {
     return {
-      
+      option: null
       
     }
   },
   mounted() {
-    
+    this.getEchart();
   },
   methods: {
-    
+    getEchart() {
+      let myChart = echarts.init(document.getElementById('chart_polo'));
+      this.option = {
+        series: [{
+          type: 'liquidFill',
+          data: [0.45],
+          radius: '70%', 
+          color: ['#00b9f5'],
+          backgroundStyle: {
+            color: 'rgba(0, 0, 0, 0.5)',
+            borderColor: '#007bff',
+            borderWidth: 3,
+            shadowColor: 'rgba(0, 123, 225, 0.4)',
+            shadowBlur: 20
+          },
+          outline: {
+            show: false,
+          }, 
+        }]
+      }
+
+      myChart.setOption(this.option, true);
+
+      window.addEventListener('resize', () => {
+        myChart.resize();
+      });
+    }
   },
   beforeDestroy() {
     
@@ -44,5 +72,9 @@ export default {
   top: 2838px;
   width: 432px;
   height: 400px;
+  .chartsdom {
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>

+ 0 - 6
src/main.js

@@ -19,12 +19,6 @@ Vue.config.productionTip = false
 // Vue.prototype.$Axios = Axios
 Vue.prototype.$Toast = Toast
 
-// $(window).resize(() => {
-//   let width = 1920; // 设计图尺寸
-//   let vW = document.documentElement.clientWidth; // 窗口宽度
-//   let rem = vW * 100 / width; 
-//   document.documentElement.style.fontSize = rem + 'px';
-// });
 
 new Vue({
   router,

+ 1 - 1
src/views/Home.vue

@@ -10,7 +10,7 @@
       <div class="top"></div>
       
       <sinan />
-      <rimian />
+      <seamless />
       <pyramid />
 
       <scrollArc />