遮罩

<div class="shadow" v-if="loading">
    <div class="spinner">
        <div class="spinner-container container1">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container2">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
        <div class="spinner-container container3">
            <div class="circle1"></div>
            <div class="circle2"></div>
            <div class="circle3"></div>
            <div class="circle4"></div>
        </div>
    </div>
</div>

@charset "utf-8";
@font-face{font-family:'Lets-go-Digital';src:url('../fonts/Lets-go-Digital.TTF')}
@font-face {
    font-family: SourceHanSansCN;
    src: url('../fonts/SourceHanSans-CN-Regular.eot');
    src: url('../fonts/SourceHanSans-CN-Regular.eot?#iefix') format('embedded-opentype'),
    url("../fonts/SourceHanSans-CN-Regular.ttf") format("truetype"),
    url("../fonts/SourceHanSans-CN-Regular.woff") format("woff"),
    url("../fonts/SourceHanSans-CN-Regular.svg") format("svg");
    font-weight: normal;
    font-style: normal;
}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td,img{border:medium none;margin:0;padding:0}
body,button,input,select,textarea{font:12px/1.5 SourceHanSansCN, '微软雅黑',tahoma,Srial,helvetica,sans-serif;color:#fff}
h1,h2,h3,h4,h5,h6{font-size:100%;color:#fff;font-weight:normal;text-align:center;font-family:'SourceHanSansCN',Arial,Helvetica,sans-serif}
em{font-style:normal}
ul,ol{list-style:none}
a{text-decoration:none;color:#333}
a:hover{text-decoration:none}
img{border:0}
table{border-collapse:collapse;border-spacing:0;font-style:normal}
-webkit-scrollbar{display:none}

.clear{clear:both}
.cont{width:1920px;height:1080px;position:absolute;top:0;left:0;background:url('../images/background.png') no-repeat;background-size:100% 100%;overflow: hidden;}
/*.time{z-index:9999;opacity:.55;font-size:19px;color:#06f7e4;width:75px;position:absolute;left:1842px;top:28px;font-family:'Lets-go-Digital'}*/
/*.date{z-index:9999;opacity:.55;font-size:19px;color:#06f7e4;width:95px;position:absolute;left:1823px;top:11px;font-family:'Lets-go-Digital'}*/
.time{z-index: 9999;opacity: .55;font-size: 19px;color: #06f7e4;width: 80px;height: 24px;padding: 0;position: relative;left: 95%;text-align: center;top: 3%;font-family: 'Lets-go-Digital';margin: 0;}
.date{z-index: 9999;opacity: .55;font-size: 19px;color: #06f7e4;width: 98px;text-align: center;position: relative;left:94.5%;top: -1%;font-family: 'Lets-go-Digital';}
.title{width:1920px;height:70px;position:absolute;top:15px;left:0;background:url('../images/title-bg.png') no-repeat top center}
.title h1{display:inline-block;font-size:36px;width:480px;text-align:center;position:absolute;left:720px;top:5px;background-image:-webkit-linear-gradient(left,#58a3e9 0,#01fce4 50%,#58a3e9 100%);-webkit-background-clip:text;color:transparent;background-size:200% 100%;animation:flowlight 4s linear infinite;font-weight:bold;letter-spacing:5px;}
.title img{display:inline-block;float:left;margin-left:5px}
.title span{display:inline-block;float:right;text-align:center;font-size:16px;color:#00fcff;margin-right:10px}
@keyframes flowlight{0%{background-position:0 0}
    100%{background-position:-200% 0}
}
.home{width: 80px;height: 40px;background: url('../images/home-button.png') no-repeat;background-size:100% 100%;position: absolute;right:0;top:60px;margin-right:-30px;opacity: 0.4;}
.home:hover{animation:home 0.3s ease-in-out forwards ;}
@keyframes home {
    from { margin-right:-30px;opacity:0.2;}
    to { margin-right:0px;opacity:1;}
}


/* Sidebar Start */
.sidebar-top{width: 110px;height: 45px;position: absolute;right:0;top:98px;background:url('../images/sidebar-top-bg-nor.png') no-repeat;background-size: 100% 100%;opacity:0.4;cursor: pointer;}
.sidebar-top p{font-size:14px;line-height:40px;text-indent:14px;z-index:200;}
.sidebar-top:hover,.sidebar-top.active{opacity:1;background:url('../images/sidebar-top-bg-pre.png') no-repeat;background-size: 100% 100%;}
.sidebar-top:hover p,.sidebar-top.active p{font-weight: bold;font-size:16px;}

.sidebar{width:110px;height:350px;position: absolute;right:0;top:145px;z-index:100;opacity:0.5;}
.sidebar:hover,.sidebar.active{opacity:1;}
.sidebar::after{content:"";width:110px;height:28px;background:url('../images/sidebar-bg-title.png') no-repeat;background-size: 100% 100%;position: absolute;top:-28px;}
.sidebar::before{content:"";width:110px;height:350px;background:url('../images/sidebar-bg-cont-1.png') no-repeat;background-size: 100% 100%;position: absolute;top:0;opacity:1;}

.sidebar-2{height:260px;top:760px;}
.sidebar-3{height:170px;top:550px;}
.sidebar-2::before{content:"";width:110px;height:260px;background:url('../images/sidebar-bg-cont-2.png') no-repeat;background-size: 100% 100%;position: absolute;top:0;opacity:0.6;}
.sidebar-3::before{content:"";width:110px;height:170px;background:url('../images/sidebar-bg-cont-3.png') no-repeat;background-size: 100% 100%;position: absolute;top:0;opacity:0.6;}
.sidebar>div{width:100%;height:98%;overflow-y: scroll;overflow-x: hidden;margin-top:10px;}
.sidebar-2>div{height:96%;}
.sidebar-3>div{height:85%;}

.sidebar>p{position: absolute;font-size:20px;right:10px;top:-24px;}
.sidebar>div::-webkit-scrollbar{display: none;}
.sidebar a{display: block;width:99px;height:50px;background: url('../images/sidebar-button-nor.png') no-repeat;background-size:100% 100%;float: right;font-size:18px;color:rgba(86,215,243,0.8);line-height:45px;text-indent:10px;margin-right:-30px;opacity:0.6;}
.sidebar a.active{background: url('../images/sidebar-button-pre.png') no-repeat;background-size:100% 100%;font-size:24px;font-weight:bold;text-shadow:3px 3px 3px rgba(0,0,0,0.5);margin-right:0;opacity:1;}
.sidebar a:hover{animation:sidebar 0.3s ease-in-out forwards ;}
.sidebar a.active:hover{animation:none;}

@keyframes sidebar {
    from { margin-right:-30px;opacity:0.6;}
    to { margin-right:0;opacity:0.8;background:url('../images/sidebar-button-pre.png') no-repeat;background-size:100% 100%;font-weight: bold}
}
/* Sidebar End */

/* Chart */
.top-left{width: 486px;height:367px;position: absolute;top:186px;left:25px;}
.top-right{width: 1264px;height: 453px;position: absolute;top:100px;left:533px;}
.bottom{width: 1774px;height: 453px;position: absolute;top:580px;left:25px;}
.top-left h3,.top-right h3,.bottom h3{font-size:20px;color:#00fcff;text-shadow:2px 2px  #000;display:block;margin-left:40px;margin-top:-8px;text-align:left;letter-spacing:1px;z-index:100;position: absolute;}
.top-left embed,.top-right embed,.bottom embed{transform:scale(1.44);transform-origin:top left;position: absolute;}

.top-left .chart,.top-right .chart,.bottom .chart{width:100%;height:calc(100% - 20px);}
.top-left-tit{width:490px;height:90px;position: absolute;top:85px;left:25px;}
.top-left-tit::before{content:"";width: 100%;height:100%;background: url('../images/top-left-tit-bg.png') no-repeat;background-size:100% 100%;position: absolute;top:0;left:0;opacity: 0.5;}
.top-left-tit>div{width:28%;display: inline-block;height:90px;text-align: center;}
.top-left-tit>div:nth-of-type(1){float: left;margin-left:13.7%;}
.top-left-tit>div:nth-of-type(2){float: right;margin-right:13.7%;}
.top-left-tit>div p{line-height:24px;margin-top:10px;font-size:14px;}
.top-left-tit>div span{width: 118px;height: 40px;border-radius:5px;border:1px solid #00b0ff;display: block;font-size:22px;margin:0 auto;line-height:40px;animation:top-tit-num-1 0.8s ease-in-out infinite alternate;}
.top-left-tit>div span.error{border:1px solid #ab2449;animation:top-tit-num-2 0.8s ease-in-out infinite alternate;color:#d7315e;}

@keyframes top-tit-num-1 {
    from { box-shadow: inset 0px 0px 15px rgba(105,199,253,0.5);}
    to { box-shadow: inset 0px 0px 5px rgba(105,199,253,0.1); }
}
@keyframes top-tit-num-2 {
    from { box-shadow: inset 0px 0px 15px rgba(171,36,73,1);}
    to { box-shadow: inset 0px 0px 5px rgba(171,36,73,0.6); }
}

/* 加载动画 */
.shadow{
    width:100vw;
    height:100vh;
    background:rgba(0,0,0,0.3);
    position: absolute;
    top:0;
    left:0;
    z-index: 999;
}
.spinner {
    margin: 300px auto;
    width: 50px;
    height: 50px;
    position: relative;
}

.container1 > div, .container2 > div, .container3 > div {
    width: 10px;
    height: 10px;
    background-color: rgba(255,255,255,0.6);

    border-radius: 100%;
    position: absolute;
    -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
    animation: bouncedelay 1.2s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.spinner .spinner-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.container2 {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.container3 {
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}

.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.container3 .circle1 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.container1 .circle2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.container2 .circle2 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.container3 .circle2 {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.container1 .circle3 {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.container2 .circle3 {
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.container3 .circle3 {
    -webkit-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.container1 .circle4 {
    -webkit-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.container2 .circle4 {
    -webkit-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.container3 .circle4 {
    -webkit-animation-delay: -0.1s;
    animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
    0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
    } 40% {
          transform: scale(1.0);
          -webkit-transform: scale(1.0);
      }
}

@media screen and (max-width:1367px){
    .time{z-index: 9999;opacity: .55;font-size: 14px;color: #06f7e4;width: 53px;height: 24px;padding: 0;position: relative;left: 1300px;text-align: center;top: 20px;font-family: 'Lets-go-Digital';margin: 0;}
    .date{z-index: 9999;opacity: .55;font-size: 14px;color: #06f7e4;width: 72px;text-align: center;position: relative;left: 1292px;top: -20px;font-family: 'Lets-go-Digital';}
    .cont{width:1366px;height:768px}
    .title{width:100%;height:49px;background-size:100% 100%;margin-top:-10px}
    .title h1{font-size:21px;width:336px;left:515px;margin-top:5px}
    .logo{transform:scale(0.7,0.7);transform-origin:0 0}
    .title span{font-size:13px;font-weight:bold}
    /* Sidebar Start */
    .home{width:56px;height: 28px;margin-right:-20px;top:45px;}
    @keyframes home {
        from { margin-right:-20px;opacity:0.2;}
        to { margin-right:0px;opacity:1;}
    }
    .sidebar-top{width: 77px;height:32px;top:76px;opacity:0.4;}
    .sidebar-top p{font-size:12px;line-height:28px;text-indent:9px;}
    .sidebar-top:hover p,.sidebar-top.active p{font-size:14px;}

    .sidebar{width:77px;height:287px;position: absolute;right:0;top:110px;z-index:100;opacity:0.5;}
    .sidebar:hover,.sidebar.active{opacity:1;}
    .sidebar::after{content:"";width:77px;height:24px;top:-23px;}
    .sidebar::before{content:"";width:77px;height:287px;}

    .sidebar-2{height:147px;top:440px;}
    .sidebar-3{height:84px;top:636px;}
    .sidebar-2::before{content:"";width:77px;height:147px;}
    .sidebar-3::before{content:"";width:77px;height:84px;}


    .sidebar>p{font-size:14px;right:10px;top:-18px;}
    .sidebar a{display: block;width:70px;height:35px;font-size:14px;line-height:30px;text-indent:8px;margin-right:-18px;opacity:0.6;}
    .sidebar a.active{background: url('../images/sidebar-button-pre.png') no-repeat;background-size:100% 100%;font-size:16px;font-weight:bold;text-shadow:3px 3px 3px rgba(0,0,0,0.5);margin-right:-5px;opacity:1;}
    .sidebar a:hover{animation:sidebar 0.3s ease-in-out forwards ;}
    .sidebar a.active:hover{animation:none;}

    @keyframes sidebar {
        from { margin-right:-18px;opacity:0.6;}
        to { margin-right:-5px;opacity:0.8;background:url('../images/sidebar-button-pre.png') no-repeat;background-size:100% 100%;}
    }
    /* Sidebar End */
    /* Chart */
    .top-left{width:344px;height:260px;top:141px;left:30px;}
    .top-right{width: 895px;height:321px;top:80px;left:390px;}
    .bottom{width: 1256px;height: 321px;top:420px;left:30px;}

    .top-left h3,.top-right h3,.bottom h3{font-size:14px;text-shadow:none;margin-left:30px;margin-top:-4px;}
    .top-left embed,.top-right embed,.bottom embed{transform:scale(1.02);transform-origin:top left;position: absolute;}
    .top-left .chart,.top-right .chart,.bottom .chart{height:calc(100% - 12px);}

    .top-left-tit{width:350px;height:70px;top:55px;left:25px;}

    .top-left-tit>div{width:29%;display: inline-block;height:90px;text-align: center;}
    .top-left-tit>div:nth-of-type(1){margin-left:12.8%;}
    .top-left-tit>div:nth-of-type(2){margin-right:12.8%;}
    .top-left-tit>div p{line-height:16px;margin-top:10px;font-size:12px;margin-bottom:3px;}
    .top-left-tit>div span{width: 84px;height:28px;border-radius:5px;font-size:15px;margin:0 auto;line-height:28px;}
    .top-left-tit>div span.error{border:1px solid #ab2449;animation:top-tit-num-2 0.8s ease-in-out infinite alternate;color:#d7315e;}

}