1

zhang

2026-01-22 6876084ffc4a01c1eca6a609dec8c176efc59aae

 zy-acs-cv/src/main/webapp/views/monitor/css/monitor.css

@@ -7,10 +7,12 @@
    line-height: 1.5;
    box-sizing: border-box;
}

html{
    height: 100%;
    overflow: hidden;
}

body{
    height: 100%;
}
@@ -29,6 +31,7 @@
    width: 100%;
    z-index: 999;
}

.title{
    position: absolute;
    padding-top: 1px;
@@ -44,6 +47,7 @@
    overflow: hidden;
    text-overflow: ellipsis;
}

.button-left {
    position: absolute;
    margin-left: 21.4%;
@@ -58,6 +62,7 @@
    transform: scaleX(-1);
    filter: FlipH;
}

.button-right {
    position: absolute;
    margin-left: 65.1%;
@@ -67,6 +72,7 @@
    background-image: url('../img/right.png');
    background-size: 100% 100%;
}

.time-tools {
    position: absolute;
    margin-left: 80%;
@@ -80,6 +86,7 @@
.container{
    height: 90%;
}

.container-element-side {
    float: left;
    width: 24%;
@@ -87,6 +94,7 @@
    padding: 1%;
    box-sizing: border-box;
}

.container-side-box {
    position: relative;
    height: 100%;
@@ -102,9 +110,11 @@
    font-size: xx-small;
    color: #999;
}

.introduce {
    height: 30%;
}

.introduce-content {
    text-indent: 2em;
    margin-top: 13px;
@@ -115,19 +125,24 @@
    font-size: x-small;
    opacity: 0.7;
}

/*左中*/
.charge-info {
    height: 60%;
}

.info-header {
    height: 15%;
}

.info-header h6 {
    letter-spacing: 3px;
}

.charge-info-elem {
    height: 20%;
}

.charge-info-elem img {
    display: inline-block;
    height: 100%;
@@ -135,23 +150,27 @@
    vertical-align: middle;
    padding: 10px 25px 10px 5px;
}

.info-detail {
    display: inline-block;
    height: 100%;
    width: 65%;
    vertical-align: middle
}

.real-data {
    width: 100%;
    height: 60%;
    position: relative;
}

.real-data .count {
    position: absolute;
    left: 0%;
    bottom: 0;
    font-size: x-large;
}

.real-data .unit {
    position: absolute;
    right: 0;
@@ -159,12 +178,14 @@
    font-size: x-small;
    opacity: 0.7;
}

.content {
    width: 100%;
    height: 40%;
    font-size: x-small;
    opacity: 0.7;
}

/*左下*/
.footer {
    position: relative;
@@ -172,6 +193,7 @@
    height: 10%;
    text-align: center;
}

.footer span {
    position: absolute;
    left: 18%;
@@ -183,6 +205,7 @@
    text-overflow: ellipsis;
    white-space:nowrap;
}

.footer img {
    position: absolute;
    right: 0;
@@ -190,6 +213,7 @@
    height: 100%;
    width: auto;
}

/* 中 */
.container-element-middle {
    float: left;
@@ -198,6 +222,7 @@
    padding: 1.2% 1% 1.5% 1%;
    box-sizing: border-box;
}

.map-board{
    height: 100%;
    width: 100%;
@@ -214,19 +239,23 @@
    height: 30%;
    margin-bottom: 5%;
}

.line-chart-title {
    height: 30%;
}

.order-report {
    position: relative;
    height: 50%;
}

.order-report .order-report-left {
    letter-spacing: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
}

.order-report .order-report-right {
    letter-spacing: 2px;
    font-size: x-large;
@@ -235,10 +264,12 @@
    right: 0;
    bottom: 0;
}

.order-report-english {
    position: relative;
    height: 50%;
}

.order-report-english .order-report-left {
    letter-spacing: 2px;
    color: #999;
@@ -251,6 +282,7 @@
    left: 0;
    top: 0;
}

.order-report-english .order-report-right {
    font-size: xx-small;
    color: #999;
@@ -262,27 +294,33 @@
    right: 0;
    top: 0;
}

#line-charts {
    height: 70%;
}

/*右中*/
.container-side-box.right-middle {
    height: 50%;
    margin-bottom: 5%;
}

.top-header {
    height: 20%;
}

.income-date {
    position: relative;
    height: 50%;
}

.income-date .income-date-left {
    letter-spacing: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
}

.income-date .income-date-right {
    letter-spacing: 2px;
    font-size: large;
@@ -291,10 +329,12 @@
    right: 0;
    bottom: 0;
}

.income-date-english {
    position: relative;
    height: 50%;
}

.income-date-english .income-date-left {
    letter-spacing: 2px;
    color: #999;
@@ -307,6 +347,7 @@
    left: 0;
    top: 0;
}

.income-date-english .income-date-right {
    font-size: xx-small;
    color: #999;
@@ -322,6 +363,7 @@
.top-main {
    height: 40%;
}

#pie-charts {
    height: 100%;
}
@@ -329,26 +371,32 @@
.top-footer {
    height: 40%;
}

.top-footer-elem {
    float: left;
    width: 33.33%;
    height: 100%;
}

.elem-header {
    height: 60%;
    background-repeat: no-repeat;
    background-position: 45% 50%;
    background-size: 50% auto;
}

#elem-header-first {
    background-image: url("../img/g1.png");
}

#elem-header-second {
    background-image: url("../img/f1.png");
}

#elem-header-third {
    background-image: url("../img/e1.png");
}

.elem-main {
    height: 20%;
    text-align: center;
@@ -356,28 +404,34 @@
    opacity: 0.7;
    padding: 4px 0;
}

.elem-footer {
    height: 20%;
    text-align: center;
    letter-spacing: 2px;
}

/*右下*/
.container-side-box.right-bottom {
    height: 15%;
}

.progress-bar {
    height: 60%;
}

.usage-rate {
    position: relative;
    height: 50%;
}

.usage-rate .usage-rate-left {
    letter-spacing: 2px;
    position: absolute;
    left: 0;
    bottom: 0;
}

.usage-rate .usage-rate-right {
    letter-spacing: 2px;
    font-size: large;
@@ -386,14 +440,17 @@
    right: 0;
    bottom: 0;
}

.usage-rate .usage-rate-right span {
    letter-spacing: 2px;
    font-size: large;
}

.usage-rate-english {
    position: relative;
    height: 50%;
}

.usage-rate-english .usage-rate-left {
    letter-spacing: 2px;
    color: #999;
@@ -406,6 +463,7 @@
    left: 0;
    top: 0;
}

.usage-rate-english .usage-rate-right {
    font-size: xx-small;
    color: #999;
@@ -417,10 +475,12 @@
    right: 0;
    top: 0;
}

.progress-bar-modal {
    height: 30%;
    padding-top: 1%;
}

.bar-container {
    width: 70%;
    height: 100%;
@@ -428,12 +488,14 @@
    vertical-align: middle;
    display: inline-block;
}

.bar-proportion {
    width: 60%;
    height: 100%;
    background-color: #e77b2c;
    position: relative;
}

.bar-proportion span {
    font-size: xx-small;
    position: absolute;
@@ -444,6 +506,7 @@
    -moz-transform:translateY(-50%);     /*兼容-moz-引擎浏览器*/
    opacity: 0.8;
}

.bar-container-count, .bar-container-count span  {
    float: right;
    color: #e77b2c;
@@ -457,6 +520,7 @@
    width: 5px;
    height: 5px;
}

.image-border1 {
    top: 0;
    left: 0;
@@ -464,18 +528,21 @@
    border-top: 2px solid #31c4c4;
    /*transform: scale(0.5)*/
}

.image-border2 {
    top: 0;
    right: 0;
    border-right: 2px solid #31c4c4;
    border-top: 2px solid #31c4c4;
}

.image-border3 {
    bottom: 0;
    left: 0;
    border-bottom: 2px solid #31c4c4;
    border-left: 2px solid #31c4c4;
}

.image-border4 {
    bottom: 0;
    right: 0;
@@ -487,9 +554,11 @@
.anchorBL img{
    display: none;
}

.BMap_cpyCtrl.BMap_noprint.anchorBL {
    display: none;
}

.ec-extension-bmap{
    border-radius:15px;
}
@@ -505,6 +574,7 @@
    z-index: 1;
    display: none;
}

#closeBtn {
    font-size: large;
    float: right;
@@ -515,10 +585,12 @@
    outline: none;
    cursor: pointer;
}

#closeBtn:hover {
    background-color: white;
    color: black;
}

#detail-modal ul {
    position: absolute;
    top: 20%;
@@ -526,14 +598,17 @@
    transform: translate(-50%, 0);
    list-style-type: none;
}

#detail-modal li {
    font-size: large;
    padding: 20px;
}

.animationTop {
    -webkit-animation: animationTop 0.4s;
    animation: animationTop 0.4s;
}

@-webkit-keyframes animationTop {
    from {
        top: -500px;
@@ -544,6 +619,7 @@
        opacity: 1;
    }
}

@keyframes animationTop {
    from {
        top: -500px;
@@ -558,18 +634,23 @@
.item-img {
    background-size: 100% 100%;
}

#img-1 {
    background-image: url(../img/banner/banner1.jpg);
}

#img-2 {
    background-image: url(../img/banner/banner2.jpg);
}

#img-3 {
    background-image: url(../img/banner/banner3.jpg);
}

#img-4 {
    background-image: url(../img/banner/banner4.jpg);
}

#img-5 {
    background-image: url(../img/banner/banner5.jpg);
}