.right-grid1{ grid-template-columns: 472px 750px auto; grid-template-rows: 1fr; } .right-grid-left1{ grid-template-columns: 1fr; grid-template-rows: repeat(4,1fr); } .right-grid-center1{ grid-template-columns: 1fr; grid-template-rows: 150px auto 210px; } .right-grid-center1{ grid-template-columns: 1fr; grid-template-rows: 150px auto 210px 210px; } .right-grid-right1{ grid-template-columns: 1fr; grid-template-rows: auto 210px 210px; } .right-grid-right-top1{ grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(2,1fr); } #chart-pzjgfb2,#chart-fmzzfb2,#chart-twjc,#chart-sbgz2,#chart-swtj,#chart-ys,#chart-sy,#lxrunning-msg{ height:100%; width:100%; } #chart-ebtw,#chart-ebsc { height:252px; width:528px; } #chart-ttfb2,#chart-yffb2{ height:100%; width:50%; } #lxrunning-msg{ overflow:hidden; padding:0 10px; width:100%; height:201px; } .lx-msg-container{ display:flex; justify-content:flex-start; align-items:start; } .lx-msg-name{ width:80px; text-align:left; font-size:12px; color:#3996dc; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .lx-msg-list{ width:calc(100% - 80px); } .lxmsg-item{ text-align:left; font-size:12px; width:100%; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .mcdata-list{ display: flex; align-items: center; justify-content: space-around; width:100%; } .build-map{ width:100%; height:100%; display:flex; align-items:center; overflow:hidden; background-size: 100%; position:relative; } #diagonal { border: 0px none; top: 0px; left: 0; position: absolute; padding: 0px; opacity: 1; } .build-map.mc1{ background-image: url(../images/ajmc.jpg); } .build-map.mc2{ background-image: url(../images/qdhmc.jpg); } .build-map.mc3{ background-image: url(../images/htmc.jpg); } .build-map img{ width:100%; position: absolute; left: 0; top: 0; opacity: 0 } .center-two-chart{ display:flex; align-items:center; justify-content:space-between; width:100%; height:100%; } .center-two-chart .chart-left{ width:calc(50% - 5px); height:100%; border: 0.5px solid #3e68c0; box-shadow: 0px 0px 4px rgba(65,110,204,1) inset; padding: 14px 8px 8px; } .chart-left .content-container { border: 0.5px solid #6076ae; border-top: 2px solid #6076ae; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; background-color: rgba(113,138,149,0.1); } .chart-none-title{ height:100%; flex:1; display:flex; flex-direction:column; } .chart-new-title{ height:2em; font-size:0.8em; color:#ccf5f9; line-height:2em; padding-left:1em; } #chart-wdsdaq2,#chart-nh2{ width:100%; height:calc(100% - 2em); } .build-wrapper{ width:100%; height:100%; overflow:hidden; /* padding:2px; */ } ul.build-container{ height: 100%; white-space: nowrap; display: inline-block; padding:2px; } ul.build-container>li{ padding:0 11px; height: 100%; display: inline-block; } .single ul>li.active>.build-contain:before{ content:''; height:100%; width:100%; position:absolute; left:-2px; top:-2px; border: 2px solid #0efcfe; } ul.build-container>li>.build-contain{ cursor: pointer; height: 100%; width: 225px; flex-direction: column; border: 0.5px solid #6076ae; border-top: 2px solid #6076ae; position: relative; } ul.build-container>li .leftbar{ width: 65px; padding-top: 6%; height: 100%; float: left; } li .leftbar>.row-num{ padding: 0 20px 0px; font-size: 1em; text-align: center; word-wrap: break-word; word-break: break-all; white-space: normal; line-height: 1.2em; color:#ccf5f9; } ul.build-container>li .cont{ height: 100%; width: calc(100% - 65px); display: flex; float:left; flex-direction: column; flex: 1; justify-content: space-around; font-size: 1.2em; align-items: center; padding:5px 0; } ul.build-container>li .cont>.cont-item{ width: 100%; display: flex; align-items: center; justify-content: flex-start; color:#ccf5f9; font-size:0.8em; } li .cont>.cont-item>img{ width:20px; margin-right:10px; } li .cont>.cont-item>.cont-value{ font-size:1em; color:#3996dc; margin-left:10px; } li .cont>.cont-item>.cont-status_t{ font-size:1em; color:#37b13d; margin-left:10px; } li .cont>.cont-item>.cont-status_f{ font-size:1em; color:#c83428; margin-left:10px; } .single1{ height:100%; width:100%; position:relative; } #video-box,#mcwarning-list{ width:100%; height:100%; overflow:hidden; } #video-box{ display:flex; align-items:center; } #mcwarning-list{ display:flex; flex-direction:column; justify-content:space-around; } #video-box video{ width:100%; } #video-box>.video-container{ width:100%; height:100%; } .video-container video{ height:100%; width:100%; } .right-warning-box{ display:flex; flex-direction:column; width:100%; height:78px; } .right-msg-box{ display:flex; flex-direction:column; width:100%; height:78px; } .right-warning-box>.right-warning-item{ display:flex; align-items:center; justify-content:flex-start; color:#ccf5f9; margin-top:6px; width:100%; font-size:0.8em; } .right-warning-box>.right-warning-item>img{ width:20px; margin-right:15px; } .right-warning-box>.right-warning-item span{ width:calc(100% - 35px); overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .right-msg-box>.right-msg-item{ width:100%; font-size:0.8em; display:flex; align-items:center; justify-content:space-between; color:#ccf5f9; margin-top:6px; } .right-msg-box>.right-msg-item>span.right-msg-words{ width:calc(100% - 109px); overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } .right-msg-box>.right-msg-item>span.right-msg-datetime{ margin-left:5px; } .mcfwcl-box{ width:50%; height:100%; } .mcjc-top{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding-bottom: 10px; } .mcjc-top>.mcjc-top-title{ line-height:2em; color:#ccf5f9; font-size:0.8em; } .mcjc-top>.mcjc-top-datetime{ display:flex; align-items:center; justify-content:center; height:2em; font-size:0.8em; color:#ccf5f9; } .mcjc-top>.mcjc-top-datalist{ display:flex; align-items:center; justify-content:center; } .mcjc-top>.mcjc-top-datalist>.mcjc-top-item,.mcjc-top>.mcjc-top-datalist>.mcjc-top-status,.mcjc-top>.mcjc-top-datalist>.mcjc-top-style{ display:flex; align-items:center; justify-content:center; flex-direction:column; } .mcjc-top>.mcjc-top-datalist>.mcjc-top-status{ margin: 0 20px; } .mcjc-top-item>.mcjc-top-itemname{ font-size:0.8em; color:#ccf5f9; line-height:1.8em; } .mcjc-top-status>.mcjc-top-statusvalue{ font-size:0.8em; line-height:1.8em; color:#17b45e; } .mcjc-top-status>.mcjc-top-statusvalue.leave{ color:#dbb244; } .mcjc-top-style>.mcjc-top-stylevalue{ font-size:0.8em; line-height:1.8em; color:#17b45e; } .mcjc-top-style>.mcjc-top-stylevalue.stop{ color:#c83428; } .mcjc-top-style>.mcjc-top-stylevalue.waiting{ color:#dbb244; } .mcjc-top-count{ display:flex; align-items:center; justify-content:space-around; width:100%; } .mcjc-top-count>.mcjc-top-count-part{ width:25%; display:flex; align-items:center; justify-content:center; flex-direction:column; color:#ccf5f9; } .mcjc-top-count>.mcjc-top-count-part .mcjc-top-count-part-value{ color:#3996dc; font-size:1.2em; } .mcjc-top-count>.mcjc-top-count-part .mcjc-top-count-part-line{ width:100%; height:1px; background-color:#449ba4; margin:6px 0; } .mcjc-top-count>.mcjc-top-count-part .mcjc-top-count-part-name{ font-size:0.6em; } /*密码框*/ #passwordConfirm{ position: fixed; text-align: center; top: 50%; left: 50%; margin-left:-250px; width: 500px; display:none; z-index:99; } .webdesigntuts-workshop span { background: #111; background: -webkit-linear-gradient(#1b1b1b, #111); background: -moz-linear-gradient(#1b1b1b, #111); background: -o-linear-gradient(#1b1b1b, #111); background: -ms-linear-gradient(#1b1b1b, #111); background: linear-gradient(#1b1b1b, #111); border: 1px solid #000; border-radius: 5px; box-shadow: inset 0 0 0 1px #272727; display: inline-block; font-size: 0px; margin: 0 auto 0; padding: 20px; z-index: 1; box-shadow: 0px -10px 10px 0px rgba(255,255,255,0.1), -10px 0px 10px 0px rgba(255,255,255,0.1), 10px 0px 10px 0px rgba(255,255,255,0.1), 0px 10px 10px 0px rgba(255,255,255,0.1); } .webdesigntuts-workshop input { background: #222; background: -webkit-linear-gradient(#333, #222); background: -moz-linear-gradient(#333, #222); background: -o-linear-gradient(#333, #222); background: -ms-linear-gradient(#333, #222); background: linear-gradient(#333, #222); border: 1px solid #444; border-radius: 5px 0 0 5px; box-shadow: 0 2px 0 #000; color: #888; display: block; float: left; font-size: 13px; font-weight: 400; height: 40px; margin: 0; padding: 0 10px; text-shadow: 0 -1px 0 #000; width: 200px; z-index: 2; } .webdesigntuts-workshop button { background: #222; background: -webkit-linear-gradient(#333, #222); background: -moz-linear-gradient(#333, #222); background: -o-linear-gradient(#333, #222); background: -ms-linear-gradient(#333, #222); background: linear-gradient(#333, #222); -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -o-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; border: 1px solid #444; border-left-color: #000; border-radius: 0 5px 5px 0; box-shadow: 0 2px 0 #000; color: #fff; display: block; float: left; font-family: 'Cabin', helvetica, arial, sans-serif; font-size: 13px; font-weight: 400; height: 38px; line-height: 38px; margin: 0; padding: 0; position: relative; text-shadow: 0 -1px 0 #000; width: 80px; z-index: 2; letter-spacing: 1px; outline: medium; } .webdesigntuts-workshop input { line-height: 40px; } .webdesigntuts-workshop input::-webkit-input-placeholder { color: #888; } .webdesigntuts-workshop input:focus { -webkit-animation: glow 800ms ease-out infinite alternate; -moz-animation: glow 800ms ease-out infinite alternate; -o-animation: glow 800ms ease-out infinite alternate; -ms-animation: glow 800ms ease-out infinite alternate; animation: glow 800ms ease-out infinite alternate; background: #222922; background: -webkit-linear-gradient(#333933, #222922); background: -moz-linear-gradient(#333933, #222922); background: -o-linear-gradient(#333933, #222922); background: -ms-linear-gradient(#333933, #222922); background: linear-gradient(#333933, #222922); border-color: #264482; box-shadow: 0 0 5px rgba(38,68,130,.2), inset 0 0 5px rgba(38,68,130,.1), 0 2px 0 #000; color: #efe; outline: none; } .webdesigntuts-workshop input:focus::-webkit-input-placeholder { color: #efe; } .webdesigntuts-workshop input:focus:-moz-placeholder { color: #efe; } .webdesigntuts-workshop input:-moz-placeholder { color: #888; } .webdesigntuts-workshop button:hover, .webdesigntuts-workshop button:focus { background: #292929; background: -webkit-linear-gradient(#264482939, #292929); background: -moz-linear-gradient(#264482939, #292929); background: -o-linear-gradient(#264482939, #292929); background: -ms-linear-gradient(#264482939, #292929); background: linear-gradient(#264482939, #292929); color: #608ff1; outline: none; } .webdesigntuts-workshop button:active { background: #292929; background: -webkit-linear-gradient(#264482939, #292929); background: -moz-linear-gradient(#264482939, #292929); background: -o-linear-gradient(#264482939, #292929); background: -ms-linear-gradient(#264482939, #292929); background: linear-gradient(#264482939, #292929); box-shadow: 0 1px 0 #000, inset 1px 0 1px #222; top: 1px; } @-webkit-keyframes glow { 0% { border-color: #264482; box-shadow: 0 0 5px rgba(38,68,130,.2), inset 0 0 5px rgba(38,68,130,.1), 0 2px 0 #000; } 100% { border-color: #709bf3; box-shadow: 0 0 20px rgba(38,68,130,.6), inset 0 0 10px rgba(38,68,130,.4), 0 2px 0 #000; } } @-moz-keyframes glow { 0% { border-color: #264482; box-shadow: 0 0 5px rgba(38,68,130,.2), inset 0 0 5px rgba(38,68,130,.1), 0 2px 0 #000; } 100% { border-color: #709bf3; box-shadow: 0 0 20px rgba(38,68,130,.6), inset 0 0 10px rgba(38,68,130,.4), 0 2px 0 #000; } } @-o-keyframes glow { 0% { border-color: #264482; box-shadow: 0 0 5px rgba(38,68,130,.2), inset 0 0 5px rgba(38,68,130,.1), 0 2px 0 #000; } 100% { border-color: #709bf3; box-shadow: 0 0 20px rgba(38,68,130,.6), inset 0 0 10px rgba(38,68,130,.4), 0 2px 0 #000; } } @-ms-keyframes glow { 0% { border-color: #264482; box-shadow: 0 0 5px rgba(38,68,130,.2), inset 0 0 5px rgba(38,68,130,.1), 0 2px 0 #000; } 100% { border-color: #709bf3; box-shadow: 0 0 20px rgba(38,68,130,.6), inset 0 0 10px rgba(38,68,130,.4), 0 2px 0 #000; } } @keyframes glow { 0% { border-color: #264482; box-shadow: 0 0 5px rgba(38,68,130,.2), inset 0 0 5px rgba(38,68,130,.1), 0 2px 0 #000; } 100% { border-color: #709bf3; box-shadow: 0 0 20px rgba(38,68,130,.6), inset 0 0 10px rgba(38,68,130,.4), 0 2px 0 #000; } } /*料线控制弹窗*/ #lxcontroller-container{ display:none; } #lxcontroller{ position:fixed; width:1600px; height:800px; background-color:#021429; top:50%; left:50%; margin-top:-400px; margin-left:-750px; border-radius:10px; display:flex; z-index:900; color:#fff; } .lxbuild-choose{ width:240px; position:relative; display:flex; flex-direction:column; align-items:start; justify-content:flex-start; color:#fff; padding-top:60px; padding-left:30px; } .lxbuild-choose:after{ content:''; width:2px; height:100%; background-color:#335bcc; position:absolute; right:0; top:0; } .areabuild-name{ font-size:16px; margin-bottom:30px; cursor:pointer; } .areabuild-name.active{ color:#335bcc; } .lx-container{ flex:1; position:relative; display:none; } .lxcontroller-header{ height:60px; line-height:60px; text-align:center; position:relative; font-size:20px; letter-spacing:5px; color:#fff; } .lxcontroller-header:after{ content:''; position:absolute; bottom:0px; left:0; } .lxcontroller-body{ width:1480px; height:680px; } .lxcontroller-body:after{ content:''; display:table; clear:both; } .lxcontroller-box{ display:flex; margin-left:30px; margin-bottom:20px; float:left; } .lxleft-name{ width:100px; padding-top:50px; } .lxright-content{ } .lxright-head{ display:flex; justify-content:space-between; align-items:center; height:50px; font-size:16px; width:320px; } .congtrol-name{ width:150px; text-align:center; } .lx-name{ height:24px; line-height:24px; } .lxright-item{ display:flex; justify-content:space-between; align-items:center; width:320px; position:relative; margin-bottom:15px; } .lxright-item:after{ content:''; width: 0; height: 0; border: 8px solid; position:absolute; left:-20px; top:4px; border-color: transparent transparent transparent #335bcc; } .lxright-item input{ width:150px; text-align:center; height:24px; border:1px solid #335bcc; border-radius:4px; outline:none; background-color:transparent; color:#fff; } .saveBtns{ display:flex; justify-content:center; align-items:center; } .norbtns{ width:120px; height:35px; line-height:35px; text-align:center; color:#fff; border-radius:5px; } .saveIt{ background-color:#335bcc; margin-right:30px; } .cancelIt{ background-color:#ef4229 } .datetimeInput{ position:relative; } /*体温监测弹窗*/ #temp-outwindow{ position:fixed; width:1200px; height:710px; background-color:#021429; top:50%; left:50%; margin-top:-300px; margin-left:-600px; border-radius:10px; display:none; } .temp-outwindow-head{ height:60px; line-height:60px; text-align:center; position:relative; font-size:20px; letter-spacing:5px; color:#fff; } .temp-window-body{ padding:10px; height:340px; width:1200px; overflow:hidden; } .temp-window-body:after{ content:''; clear:both; display:table; } .temp-data-tiem{ display:flex; font-size:14px; float:left; margin-left:25px; margin-bottom: 15px; } .temp-data-name{ width:100px; margin-right:10px; } .checkEb { color:red; } .temp-data-value{ width:50px; } #lxrunning-msg{ padding-right:3px; padding-left: 3px; display:flex; flex-direction:column; align-items:center; justify-content: space-between; } .fgitems-content{ display:flex; flex-direction:column; align-items:center; justify-content: space-between; width:100%; height:32%; background-color:#ddd; border-radius:5px; } .fgitems-head{ display:flex; align-items:center; justify-content:start; width:100%; margin-top:3px; } .fgitems-nums{ width:35px; height:18px; position: relative; line-height: 20px; font-size: 12px; color: #fff; padding-right: 10px; text-align:center; margin-right:10px; margin-left:5px; } .arrow-color1{ background-color:#58b2ef; } .arrow-color2{ background-color:#1fbcaf } .arrow-color3{ background-color:#92d050 } .fgitems-nums:before { content: ''; width: 0px; height: 0px; border-color: transparent #ddd; border-width: 0px 9px 9px 0px; border-style: solid; position: absolute; right: 0; top: 0px; } .fgitems-nums:after { content: ''; width: 0px; height: 0px; border-color: #ddd transparent; border-width: 0px 0px 9px 9px; border-style: solid; position: absolute; right: 0px; bottom: 0px; } .fgitems-name{ font-size:14px; transform : scale(0.9); font-weight:bold; color:#333; font-family:Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif"; } .fgitems-desc{ font-size:12px; transform : scale(0.9); color:#635353; } .fgitems-body{ display:flex; align-items:center; justify-content:center; width:100%; } .fg-items-body-speed{ font-size:12px; transform : scale(0.9); color:#333; } .speed-arrow{ height:2px; width:50px; background-color:#c00000; position:relative; margin-left:10px; } .right-arrow{ width: 0; height: 0; border-width: 6px; border-style: solid; border-color: transparent transparent transparent #c00000; margin-right:4px; } .addspedds{ color:#c00000; font-size:12px; position:absolute; top:-16px; left:0px; width:100%; text-align:center; transform : scale(0.9); } .fgitems-foot{ display:flex; align-items:center; justify-content:start; width:100%; margin-bottom:3px; } .foot-name{ color:#c00000; font-size:14px; font-weight:bold; transform : scale(0.9); } .foot-value{ color:#333; font-size:12px; transform : scale(0.9); }