@charset "utf-8"; /* 系统样式 */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box } *, body { padding: 0px; margin: 0px; color: #fff; font-family: "微软雅黑"; font-size: 12px; } .no-bg{ background: none; } @font-face { font-family: electronicFont; src: url(../font/DS-DIGIT.TTF) } body { background: #000d4a url(../img/bgimg.jpg) fixed center top; background-size: cover; color: #666; font-size: .1rem; } li { list-style-type: none; } table {} i { margin: 0px; padding: 0px; text-indent: 0px; } img { border: none; max-width: 100%; } a { text-decoration: none; color: #fff; } a.active, a:focus { outline: none !important; text-decoration: none; } ol, ul, p, h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0 } a:hover { color: #1efcdf; text-decoration: none !important } .f_left { float: left; } .f_right { float: right; } .m-l-15 { margin-left: 1.1875rem; } .flex-r{ display: flex; flex-direction:row; } /*谷哥滚动条样式*/ ::-webkit-scrollbar { width: 5px; height: 5px; position: absolute } ::-webkit-scrollbar-thumb { background-color: #5bc0de } ::-webkit-scrollbar-track { background-color: #ddd } /* 公共样式 */ .m-t-20 { margin-top: 1.25rem } .container { width: 100%; height: 100% } .height-21{ height: 21rem!important; } .height-40{ height: 40.6rem!important; } /* 头部 */ .header { width: 100%; height: 3.4375rem; background: rgba(0, 80, 154, .3); } .nav { position: absolute; top: 0.4375rem; left: 0.6875rem; z-index: 5; text-align: left; height: 2.5rem } .nav ul li { display: inline-block; float: left; height: 2.5rem; line-height: 2.2rem; padding: 0 0.625rem; border: 1px solid #1f50b3; cursor: pointer; margin-right: 0.875rem; background: rgba(31, 73, 135, .6); } .block-small { width: 0.375rem; height: 0.3125rem; background-color: #1efcdf; opacity: 0.5 } .b-s-l-t { position: absolute; top: 0.25rem; left: 0.0625rem; } .b-s-l-b { position: absolute; bottom: 0.25rem; left: 0.0625rem; } .nav ul li:hover { border: 1px solid #1efcdf; color: #1efcdf; background: rgba(26, 87, 177, .8); } .nav ul li:hover a { color: #1efcdf; } .logo-title { width: 509px; height: 4rem; text-align: center; margin: 0 auto; font-size: 22px; font-weight: bolder; background: url(../img/tit.png) no-repeat 100% center; } .logo-title h6 { display: block; font-size: 22px; height: 3.4375rem; line-height: 3.4375rem; background-image: -webkit-linear-gradient(top, #ffffff, #77aae9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .fast-menu { position: absolute; top: 0; right: 0; } .fast-menu a { margin-top: 0.375rem; display: inline-block; margin-right: 0.3125rem; height: 2.5rem; line-height: 2.5rem; border-bottom: 2px solid #1F50B3; margin-right: 1.25rem; } .fast-menu a:hover { border-bottom: 3px solid #1efcdf } /* 主体 */ .main { width: 100%; height: auto; display: flex; flex-direction: column; padding: 0.6875rem; margin-top: 0.833333rem; } .main-top, .main-btm { width: 100%; height: auto; display: flex; position: relative; } /* echart容器box */ .chart-box { background-color: rgba(20, 31, 59, 0.5); position: relative; box-shadow: rgb(49, 169, 255) 0px 0px 18px inset; border: #1a9edc 1px solid; } /* box四周装饰 */ .chart-block-normal { width: 1rem; height: 1rem; background: url(../img/block.png) no-repeat; position: absolute; display: block; } .chart-block-normal:nth-child(1) { left: 0; top: 0; } .chart-block-normal:nth-child(2) { right: 0; top: 0; background-position: -0.3125rem 0 } .chart-block-normal:nth-child(3) { bottom: 0; background-position: 0 -0.3125rem } .chart-block-normal:nth-child(4) { bottom: 0; right: 0; background-position: -0.3125rem -0.3125rem } /* echart 容器大小规格 */ .chart-small { width: 48%; height: 18.4rem; } .chart-normal { width: 25%; height: 38rem; } .chart-medium { width: 48%; height: 38rem; } .chart-flat { width: 100% ; height: 18.4rem; } .chart-title{ float: left; padding: 5px 10px; color: #23cefd; font-weight: bolder; } .chart-title-level-2{ display: inline-block; color: #23cefd; text-indent: 4em; font-size: 10px; } .charts-con{ width: 100%; display: flex; flex-direction: column; } .row1{ display: flex; width: 100%; } .row2{ width: 50%; } .row3{ width: 40%; } .row4{ width: 60%; } .row5{ width: 30%; } .row6{ width: 70%; } .chart-big {} .chart-tall {} .main-btm-left {} /*总人数*/ .chart-first{ width: 100%; display: flex; flex-direction: column; } .people-count{ width: 100%; display: flex; align-items:center;/*垂直居中*/ justify-content: center; padding:2rem; background: url("../img/count-bg.png") no-repeat bottom; } .count{ font-size: 3rem; padding: .5rem; border: 1px solid #30bef5; border-radius: 1rem; margin: 0 1rem; font-weight: bolder; } .p-t , .p-n{ font-size: 2rem; } /*辅助决策-------->绩效考核*/