LargeScreenVisualization/viewdata-master/7new_index/css/index.css

.main .unit {
    position : absolute;
    z-index  : 999;
    top      : 3%;
    left     : 13%;
    font-size: 0.6vw;
    color: rgba(255,255,255,.2);
}

.dataGet,
.dataStorage,
.gettingDate,
.dataClean,
.dataSave,
.dataDesensitization {
    width: 100%;
    height: 90%;
    /* border       : 1px solid #ccc; */
    /* padding      : 10px; */

    color        : #383F4E;
    /* margin-top: -10%; */
}

.gettingDate {
    margin-top: -10%;height: 90%;
}

.textBox {
    width: 100%;
}

.textBox .pieText,
.pieText2 {
    position     : absolute;
    color        : #fff;
    font-size    : 0.6vw;
    left         : 18%;
    /* margin-top: 20%; */
}

.textBox .pieText {
    top: 48%;
}

.textBox .pieText2 {
    top: 91%;
}

.textBox .pieText .text2 {
    margin-left: 4.8vw;
}

.textBox .pieText2 .text2 {
    margin-left: 4.6vw;
}

.centerTop {
    position: relative;
    width: 100%;
    height: 13%;
    border: 1px solid #27E5E9;
    /* padding-left: 5%; */
}
.centerTop .leftTime {
    float: left;
    width: 30%;
    height: 100%;
    line-height: 100%;
    color: #C3CADA;
    font-size: 0.8vw;
    
}
.centerTop .leftTime .year {
    position: absolute;
    top: 38%;
    left: 5%;
}
.centerTop .leftTime .hour {
    position: absolute;
    top: 55%;
    left: 7%;
}
.centerTop .number{
    /* position: relative; */
    float: left;
    width: 80%;
    height: 100%;
    color: #0DFAFC;
    font-size: 1.2vw;
    /* text-align: center; */
}
.centerTop .number .numBox span {
    margin-left: 2%;
    margin-top: 9%;
    display: inline-block;
    width: 6%;
    height: 35%;
    text-align: center;
    border: 1px solid #0755A2;
    background-color: #0A4253;
}
.centerTop .number .numBox i {
    position: relative;
    top: 10%;
    left: 1%;
}
.centerBottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 32.3%;
    /* border: 1px solid #6077AD; */
}
.centerBottom .dataTransmissionTitle {
    position: relative;
    display: flex;
    align-items:center;
    width: 95%;
    height: 13%;
    margin-left: 2.5%;
    margin-top: .7vw;
    background-color: #223B5A;
    color: #11F9FD;
}
.centerBottom .dataTransmissionTitle .first {
    /* float: left; */
    text-align: center;
    /* display: inline-block; */
    /* width: 14%; */
    /* height: 100%; */
    /* background-color: red; */
    font-size: .7vw;
    margin-left: .7vw;
}
.dataTransmissionTitle .rightContent {
    margin-left: 1vw;
}
.centerBottom .dataTransmissionTitle .centertTitle{
    position: absolute;
    font-size: .4vw;
}
.centerBottom .dataTransmissionTitle .centertTitleTop{
    top: .3vw;
}
.centerBottom .dataTransmissionTitle .centertTitleBottom{
    top: 1.3vw;
}
.centertTitle .point {
    position: absolute;
    left: .8vw;
    top: .15vw;
    display: inline-block;
    width: .2vw;
    height: .2vw;
    background-color: #0EFAFC;
}
.squareBox {
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin-left: .5vw; */
    float: left;
    width: 1.7vw;
    height: 1.7vw;
    background-color: #1F2C3F;
}
.squareBox .transformBox {
    display: inline-block;
    width: .3vw;
    height: .3vw;
    border: 3px solid #0EFAFC;
    /* background-color: #11F9FD; */
    transform:rotate(45deg);
    -ms-transform:rotate(45deg); 	
    -moz-transform:rotate(45deg); 	
    -webkit-transform:rotate(45deg);
    -o-transform:rotate(45deg);
}
.dataTransmissionTitle .rightName {
    font-size: 1vw;
    margin-left: 2vw;
}
.centerBottom .insideText {
    margin: .3vw 0 .3vw 2.5%;
    font-size: .4vw;
    color: #0EFAFC;
}
.centerBottom .lightBox {
    margin-left: 2.5%;
    width: 95%;
    height: 3%;
    /* background-color: red; */
}
.lightBox .shortLine {
    float: left;
    margin-right: .2vw;
    display: inline-block;
    width: 11%;
    height: 100%;
    background-color: #0EFCFF;
}
.lightBox .longLine {
    float: right;
    width: 40%;
    height: 100%;
    border: 1px solid #0EFCFF;
}
.centerBottom .bottomBox {
    width: 95%;
    height: 52%;
    background-color: #1F2C3F;
    margin-left: 2.5%;
    margin-top: .3vw;
    color: #0EFAFC;
    font-size: .8vw;
}
.bottomBox .code {
    margin-left: 1.5vw;
    margin-right: 1.5vw;
    width: 100%;
    height: 100%;
    /* overflow: scroll; */
    /* overflow-x:hidden; */
    /* word-wrap:break-word; */
}
.circleBox {
    /* position: relative; */
}
.circleBox .bigCircle {
    position: relative;
    left:10%;
    top: 10%;
    display: inline-block;
    width: 1vw;
    height: 1vw;
    border-radius: 50%;
    border: 1px solid #0EFAFC;
}
.circleBox .bigCircle2{
    left: 5.02%;
    top: 30%;
}
.circleBox .smallCircle {
    position: absolute;
    left: 26%;
    top: 26%;
    display: inline-block;
    width: .3vw;
    height: .3vw;
    border-radius: 50%;
    border: 1px solid #EB1B55;
}
.circleBox .smallCircle2{
    border: 1px solid #0EFAFC;
}
/* 我的 */
.service {
    overflow     : hidden;
    margin       : .6vw 1vw;
    padding      : .3vw 0;
    border-bottom: 1px solid #0efcff;
}

.service span {
    font-size: .6vw;
    color    : #0efcff;
}

.service-data {
    overflow: hidden;
    margin  : .6vw 1vw;
    padding : .3vw 0;
}

.service-data .img-box {
    width : 4vw;
    height: 4vw;
}

.service-data .img-box img {
    width : 100%;
    height: 100%;
}

.service-data span {
    font-size : .6vw;
    color     : #0efcff;
    margin-top: .2vw;
}

.service-data .right ul li {
    float     : right;
    color     : #0efcff;
    font-size : .6vw;
    padding   : .4vw;
    text-align: center;
}

.service-data .right ul li p {
    margin: .5vw 0;
}

.centerBox .earthBox {
    background     : url(../img/earth.png) no-repeat;
    background-size: 100% 100%;
    width          : 100%;
    height         : 51.3%;
    position       : relative;
    margin-top: 2%;
}

.centerBox .earthBox .lineImg {
    position: absolute;
    left    : 25%;
    top     : 12%;
    width   : 60%;
    height  : 60%;
}

.centerBox .earthBox .img-item {
    position: absolute;
    width   : 22%;
    height  : 2.5vw;
    font-size: .6vw;
}
.centerBox .earthBox .img-item img{
    width: 100%;
    height: 100%;
}
.centerBox .earthBox .img-item span{
    position: absolute;
    left: 3.2vw;
    top: .8vw;
    color: #0efcff;
    cursor: pointer ;
}
.centerBox .earthBox .pc1 {
    left: 8vw;
    top : 14vw;
}

.centerBox .earthBox .pc2 {
    left: 13vw;
    top : 17vw;
}

.centerBox .earthBox .pc3 {
    left: 2vw;
    top : 10vw;
}

.centerBox .earthBox .pc4 {
    left: 21vw;
    top : 17vw;
}
.centerBox .earthBox .pc5 {
    left: 18vw;
    top : 13vw;
}
.centerBox .earthBox .pc6 {
    left: 10vw;
    top : 10vw;
}
.centerBox .earthBox .pc7 {
    left: 7vw;
    top : 6vw;
}
.centerBox .earthBox .pc8 {
    left: 4.5vw;
    top : 2vw;
}