@font-face { font-family: digifaw; src: url(./digifaw.ttf); } body{ width: 1920px; height: 1080px; background-image: url("../images/project/bg.png"); margin: 0 auto; } .line1 { overflow: hidden; text-overflow: ellipsis; display: box; display: -webkit-box; line-clamp: 1; box-orient: vertical; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: break-all; } .nav-header{ width: 1920px; height: 60px; margin: 0 auto; /*margin-top: 10px;*/ background-image: url("../images/project/header.png"); position: relative; } .nav-title,.nav-desc{ text-align: center; color: #FFFFFF; font-weight: bold; } .nav-title{ font-size: 26px; padding-top: 13px; } .nav-desc{ font-size: 22px; } .main{ margin: 0 auto; margin-top: 10px; width: 1920px; height: 1010px; overflow: hidden; position: relative; } .main-left1{ position: absolute; z-index: 10; width: 483px; height: 227px; top: 0; left: 0; background-image: url("../images/project/leftbg1.png"); } .main-left1 .user-box{ width: 115px; height: auto; overflow: hidden; text-align: center; position: relative; padding: 15px 0; float: left; } #waste-count{ width: 100%; height: 200px; /*border: 1px solid #ffffff;*/ } .main-left1 .user-box img{ width: 100px; height: 100px; } .main-left1 .user-box-nums{ color: #A9E5FE; font-size: 14px; } .main-left1 .user-box-title{ color: #FFFFFF; font-size: 14px; } .main-left1 .user-box-header{ position: absolute; z-index: 10; top: 46px; left: 0; width: 100%; height: auto; } .main-left2{ position: absolute; z-index: 10; width: 483px; height: 277px; top: 214px; left: 0; background-image: url("../images/project/leftbg2.png"); color: #ffffff; } .main-left3{ position: absolute; z-index: 10; width: 483px; height: 274px; top: 479px; left: 0; background-image: url("../images/project/leftbg3.png"); } .main-left3 .box-yhyj-chart{ height: 220px; /*border: 1px solid #ffffff;*/ } .main-left4{ position: absolute; z-index: 10; width: 483px; height: 274px; bottom: 0; left: 0; background-image: url("../images/project/leftbg3.png"); } .main-left4 .box-bx-chart{ height: 220px; /*border: 1px solid #ffffff;*/ } .main-middle1{ position: absolute; z-index: 10; width: 948px; height: 476px; top: 0; left: 490px; } .main-middle1 .middle-box{ position: relative; width: 100%; height: 100%; } .main-middle1 .middle-box .middle-box-img{ width: 100%; height: 100%; } .main-middle1 .middle-box-title{ position: absolute; z-index: 10; width: 100%; height: 42px; line-height: 42px; color: #ffffff; font-size: 28px; top: 0; left: 0; text-align: center; background-image: url("../images/project/middle1.png"); } .main-middle1 .order-box{ position: absolute; z-index: 10; width: 409px; height: 138px; top: 200px; left: 300px; overflow: hidden; } .main-middle1 .order-box .order-box-box{ position: relative; width: 100%; height: 100%; } .main-middle1 .order-box .order-box-pos{ position: absolute; z-index: 10; width: 240px; height: 50px; top: 20px; left: 120px; } .main-middle1 .order-box .order-box-pos .order-box-list{ width: 80px; height: 50px; line-height: 25px; float: left; text-align: center; font-size: 14px; color: #ffffff; } .order-box-list-num{ color: #0EF9B3; font-size: 20px; } .main-middle2{ position: absolute; z-index: 10; width: 967px; height: 539px; top: 477px; left: 480px; background-image: url("../images/project/middlebg2.png"); } .main-middle2 .task-box{ width: 483px; height: 274px; /*border: 1px solid #ffffff;*/ float: left; } .main-middle2 .bottom-box{ width: 100%; height: 255px; /*border: 1px solid #ffffff;*/ float: left; } .main-middle2 .task-box .task-box-title{ color: #ffffff; font-size: 18px; padding-top: 12px; padding-left: 50px; } .main-middle2 .hot-chart{ /*border: 1px solid #ffffff;*/ height: 245px; } .main-middle2 .yscount-box{ position: relative; width: 160px; padding: 0 5px; text-align: center; overflow: hidden; float: left; color: #00CAFF; } .main-middle2 .yscount-box image{ width: 98px; height: 97px; } .main-middle2 .yscount-box .yscount-box-title{ font-size: 14px; } .main-middle2 .yscount-box .yscount-box-des{ position: absolute; z-index: 10; width: 100%; top: 71px; left: 0; font-size: 12px; } .main-middle2 .yscount-box .yscount-box-nums{ position: absolute; z-index: 10; width: 100%; top: 31px; left: 0; color: #00FAA8; font-size: 22px; } .main-right1{ position: absolute; z-index: 10; width: 483px; height: 495px; top: 0; right: 0; background-image: url("../images/project/rightbg1.png"); } .main-right2{ position: absolute; z-index: 10; width: 483px; height: 271px; bottom: 271px; right: 0; background-image: url("../images/project/rightbg2.png"); } .main-right3{ position: absolute; z-index: 10; width: 483px; height: 271px; bottom: 0; right: 0; } .patrol-box{ width: 160px; height: 90px; padding: 3px 5px; overflow: hidden; float: left; text-align: center; } .patrol-box .patrol-box-list{ width: 100%; height: 100%; background-color: rgba(69, 117, 230, 0.2); box-shadow: 0 0 5px #91A9FF; } .patrol-box .patrol-box-list img{ width: 150px; height: 60px; border: 1px solid #ffffff; } .patrol-box .patrol-box-list div{ line-height: 26px; height: 26px; color: #ffffff; font-size: 12px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .box{ width: 100%; height: 100%; padding: 0 10px; position: relative; } .box-title{ width: 100%; height: 34px; line-height: 50px; padding: 0 40px; color: #ffffff; font-size: 18px; } /*表格*/ .table2 { color: #ffffff; width: 98%; border: 0; table-layout:fixed ; margin: 0 auto; } .table2 th,td { text-align: center; height: 42px; line-height: 42px; font-size: 14px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } .table2 thead tr{ background: rgba(8,36,56,0.58); font-size: 14px; } .table2 tbody tr:nth-child(odd){ border-collapse:separate; border-spacing:0px 10px; background: #20387B; } .table2 tbody tr:nth-child(even){ background: #152F77; } .table2 .table-color2{ color: #0FC2DD; } .table2 .table-color3{ color: #49E9A0; }