|
|
@@ -0,0 +1,3883 @@
|
|
|
+<!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("vfs/root/products/ebi/sys/coolrpt/coolresource/imgs/nhdemo/mf/bj.jpg"); 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("vfs/root/products/ebi/sys/picture/shubohui/kpchar_top.png"); 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("vfs/root/products/ebi/sys/picture/关闭按钮1.png"); 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>
|
john
