479 lines
9.3 KiB
CSS
479 lines
9.3 KiB
CSS
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
#wrap {
|
|
height: 52.5rem;
|
|
width: 100rem;
|
|
padding: 1.5789rem 1.04rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
|
|
.side_center {
|
|
width: calc(100% - 47.28rem);
|
|
}
|
|
|
|
.side_right,
|
|
.side_left {
|
|
width: 23.64rem;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.plate {
|
|
width: 23.64rem;
|
|
height: 15.88rem;
|
|
background-image: url(../images/v1/item.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
#wrap .plate>.plate-title {
|
|
color: #00FFFF;
|
|
font-size: 0.9474rem;
|
|
width: 100%;
|
|
line-height: 1.6842rem;
|
|
text-align: center;
|
|
height: 1.6842rem;
|
|
background-image: url(../images/v1/09titlebg.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
|
|
|
|
@font-face {
|
|
font-family: 'DIN';
|
|
/* src: url(../font/font.ttf); */
|
|
/* src: url(../font//DINCond-RegularAlternate.otf); */
|
|
src: url(../font/dinfont.ttf);
|
|
}
|
|
|
|
html,
|
|
body {
|
|
background-image: url(../images/v1/bj\ 2.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.header-navs {
|
|
width: 100rem;
|
|
height: 3.75rem;
|
|
background-image: url(../images/v1/07headbj.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 1.0526rem;
|
|
}
|
|
|
|
.header-navs>h2 {
|
|
color: #00FFFF;
|
|
font-size: 1.979rem;
|
|
}
|
|
|
|
.header-navs>.nav {
|
|
height: 100%;
|
|
width: 33.85rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.header-navs>.nav>.nav-site {
|
|
flex: 1;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 天气 */
|
|
.header-navs>.nav>.nav-site>p {
|
|
color: #1AB1FF;
|
|
font-size: 0.6316rem;
|
|
}
|
|
|
|
.header-navs>.nav>.nav-site>p>span {
|
|
margin-right: 0.5263rem;
|
|
}
|
|
|
|
.header-navs>.nav>.nav-site>p>.tianqi {
|
|
padding-left: 1.2632rem;
|
|
background-image: url(../images/v1/01icon1.png);
|
|
background-repeat: no-repeat;
|
|
background-position: left center;
|
|
background-size: 0.9474rem;
|
|
}
|
|
|
|
/* 左边导航 */
|
|
.header-navs>.nav>.nav-site_left>.nav-bar {
|
|
text-align: center;
|
|
line-height: 1.6842rem;
|
|
width: 8.4211rem;
|
|
height: 1.6842rem;
|
|
background-image: url(../images/v1/06navbj1.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #1AB1FF;
|
|
font-size: 0.9474rem;
|
|
}
|
|
|
|
/* 设置 */
|
|
.header-navs>.nav>.nav-site_sitting {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.header-navs>.nav>.nav-site_sitting>.btn {
|
|
padding-left: 1.0526rem;
|
|
margin-right: 1.0526rem;
|
|
color: #1AB1FF;
|
|
font-size: 0.6316rem;
|
|
background-repeat: no-repeat;
|
|
background-position: left center;
|
|
background-size: 0.9474rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.header-navs>.nav>.nav-site_sitting>.btn1 {
|
|
background-image: url(../images/v1/02icon.png);
|
|
}
|
|
|
|
.header-navs>.nav>.nav-site_sitting>.btn2 {
|
|
background-image: url(../images/v1/03icon.png);
|
|
}
|
|
|
|
.header-navs>.nav>.nav-site_sitting>.btn3 {
|
|
background-image: url(../images/v1/04icon.png);
|
|
}
|
|
|
|
.header-navs>.nav>.nav-site_sitting>.btn4 {
|
|
background-image: url(../images/v1/05icon.png);
|
|
}
|
|
|
|
.header-navs>.nav>.nav-site_sitting>.btn5 {
|
|
background-image: url(../images/v1/06icon.png);
|
|
}
|
|
|
|
/* 右边导航 */
|
|
.header-navs>.nav>.nav-site_right {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.header-navs>.nav>.nav-site_right>.nav-bar {
|
|
text-align: center;
|
|
line-height: 1.6842rem;
|
|
width: 8.4211rem;
|
|
height: 1.6842rem;
|
|
background-image: url(../images/v1/06navbj2.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #1AB1FF;
|
|
font-size: 0.9474rem;
|
|
}
|
|
|
|
|
|
/* 人员统计 */
|
|
.people {
|
|
display: flex;
|
|
flex-direction: row;
|
|
padding-top: 1.8947rem;
|
|
padding-left: 1.8947rem;
|
|
}
|
|
|
|
.people>.people-nums {
|
|
width: 11rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.people>.people-nums>.people-nums_dot {
|
|
height: 3.6842rem;
|
|
background-image: url(../images/v1/10bk.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.people>.people-nums>.people-nums_dot>.label {
|
|
color: #1AB1FF;
|
|
font-size: 0.8421rem;
|
|
text-align: center;
|
|
line-height: 0.8421rem;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.people>.people-nums>.people-nums_dot>.val {
|
|
font-size: 1.3684rem;
|
|
color: #1AB1FF;
|
|
line-height: 3.6842rem;
|
|
text-align: right;
|
|
padding-right: 1.0526rem;
|
|
}
|
|
|
|
.people>.people-nums>.people-nums_dot>.val>span {
|
|
font-size: 0.7368rem;
|
|
margin-left: 0.4211rem;
|
|
}
|
|
|
|
.people>.people-map {
|
|
width: calc(100% - 11rem);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#onGuardMap {
|
|
width: 6rem;
|
|
height: 6rem;
|
|
}
|
|
|
|
/* 风险管控 */
|
|
.risk {
|
|
height: calc(100% - 1.6842rem);
|
|
}
|
|
|
|
#riskMap {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/*作业许可统计 */
|
|
.jobLicensesMap {
|
|
height: calc(100% - 1.6842rem);
|
|
}
|
|
|
|
#jobLicensesMap {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 安全统计 */
|
|
.safe {
|
|
height: calc(100% - 1.6842rem);
|
|
padding: 0 1.7895rem;
|
|
}
|
|
|
|
.safe>.safe-label {
|
|
padding-top: 1.4737rem;
|
|
font-size: 0.8421rem;
|
|
color: #7ECEF7;
|
|
}
|
|
|
|
.safe>.safe-num {
|
|
padding: 0 1.0526rem;
|
|
font-family: 'DIN';
|
|
margin-top: 1.4737rem;
|
|
font-size: 1.5789rem;
|
|
color: #7ECEF7;
|
|
text-align: center;
|
|
letter-spacing: 0.8421rem;
|
|
background-image: url(../images/v1/11aqbj.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.safe>.safe-boxs {
|
|
margin-top: 2.2632rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.safe>.safe-boxs>.safe-box {
|
|
height: 4.7895rem;
|
|
width: 9.2632rem;
|
|
background-image: url(../images/v1/12bk.png);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.safe>.safe-boxs>.safe-box>.safe-box_label {
|
|
color: #6CEFF1;
|
|
font-size: 1.4737rem;
|
|
}
|
|
|
|
.safe>.safe-boxs>.safe-box>.safe-box_label>span {
|
|
margin-left: 0.5263rem;
|
|
color: #1AB1FF;
|
|
font-size: 0.3158rem;
|
|
}
|
|
|
|
.safe>.safe-boxs>.safe-box>.safe-box_val {
|
|
color: #1AB1FF;
|
|
font-size: 0.7368rem;
|
|
/* margin-top: 0.5263rem; */
|
|
}
|
|
|
|
.safe>.safe-boxs>.safe-box>.orange {
|
|
color: #FFB260;
|
|
}
|
|
|
|
/* 安全隐患分析 */
|
|
.safetyAnalysisMap {
|
|
height: calc(100% - 1.6842rem);
|
|
}
|
|
|
|
#safetyAnalysisMap {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 质量统计 */
|
|
.quality {
|
|
height: calc(100% - 1.6842rem);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding-top: 0.8947rem;
|
|
}
|
|
|
|
.quality>.quality-top {
|
|
width: 13.1579rem;
|
|
height: 4.0526rem;
|
|
background-image: url(../images//v1/13bk.png);
|
|
background-position: left center;
|
|
background-repeat: no-repeat;
|
|
background-size: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding-right: 1.0526rem;
|
|
}
|
|
|
|
.quality>.quality-top>.quality-top_label {
|
|
font-size: 0.8421rem;
|
|
color: #1AB1FF;
|
|
}
|
|
|
|
.quality>.quality-top>.quality-top_val {
|
|
font-size: 1.4737rem;
|
|
color: #6CEFF1;
|
|
}
|
|
|
|
.quality>.quality-top>.quality-top_val>span {
|
|
color: #1AB1FF;
|
|
font-size: 0.7368rem;
|
|
margin-left: 0.4211rem;
|
|
}
|
|
|
|
.quality>.qualityMap {
|
|
width: 100%;
|
|
margin-top: 1.0526rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.quality>.qualityMap>div {
|
|
height: 7.6316rem;
|
|
width: 50%;
|
|
}
|
|
|
|
/* 居中样式 */
|
|
.plate1 {
|
|
margin-top: 2.4211rem;
|
|
padding: 0 1.1579rem;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.plate1>.item {
|
|
width: 9.0526rem;
|
|
height: 5.7895rem;
|
|
background-image: url(../images/v1/15bj.png);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.plate1>.item>.item-label {
|
|
height: 1.2632rem;
|
|
text-align: center;
|
|
line-height: 1.2632rem;
|
|
font-size: 0.7368rem;
|
|
color: #1AB1FF;
|
|
}
|
|
|
|
.plate1>.item>.item-num {
|
|
font-family: 'DIN';
|
|
text-align: center;
|
|
color: #00FFFF;
|
|
font-size: 1.5789rem;
|
|
}
|
|
|
|
/* 居中地图 */
|
|
.plate2 {
|
|
margin-top: 2.3684rem;
|
|
width: 100%;
|
|
padding: 0 1.1579rem;
|
|
position: relative;
|
|
}
|
|
|
|
.plate2>.changMap {
|
|
line-height: 2.3684rem;
|
|
text-align: center;
|
|
position: absolute;
|
|
right: 1.0526rem;
|
|
color: #00FFFF;
|
|
font-size: 0.8421rem;
|
|
width: 8.5789rem;
|
|
height: 2.3684rem;
|
|
cursor:pointer;
|
|
background-image: url(../images/v1/16bk.png);
|
|
}
|
|
|
|
.plate2>.changMap>span {
|
|
display: inline-block;
|
|
height: 0.7895rem;
|
|
width: 0.8947rem;
|
|
background-image: url(../images/v1/17change.png);
|
|
}
|
|
|
|
.plate2>.map {
|
|
padding-top: 2.1053rem;
|
|
width: 100%;
|
|
height: 38.9474rem;
|
|
|
|
}
|
|
|
|
#map {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.imgbg {
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 100% 100%;
|
|
}
|