body { background-color: #6CA7A8; } .button-window { float: left; width: 100%; height: 100%; padding: 10px; background-color: #6CA7A8; border-radius: 5px; box-shadow: 0 0 3px rgba(0 0 0 .3); } /* -------------------- 第一模块 -------------------- */ .log-board { background-color: #fff; border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,.3); height: 25%; } /* 左 */ .command-log { float: left; height: 100%; width: 20%; text-align: center; } .command-log h2 { padding: 10px; } .shuttle-command-item { padding: 4px 0; margin-top: 5px; } .shuttle-command-item label { font-size: 20px; font-weight: bold; vertical-align: middle; } .demoBtn { vertical-align: middle; /*width: 30%;*/ height: 30px; left: 0; top: 0; padding: 5px 15px; text-shadow: inherit; font-size: 15px; margin-left: 5px; margin-right: 5px; display: inline-block; background-color: #FF5722; border: none; color: #FFF; box-shadow: 1px 1px 5px #B6B6B6; border-radius: 3px; cursor: pointer; } .demoBtn:hover { opacity: 0.8 } .demoBtn:focus { outline: 0; } /* 右 */ .shuttle-state { float: left; height: 100%; width: 80%; overflow: auto; } /* 穿梭车状态表 */ #shuttle-state-table { font-size: 12px; border-collapse: collapse; margin: 0 auto; text-align: center; } #shuttle-state-table td, #shuttle-state-table th { border: 1px solid #cad9ea; color: #666; height: 25px; } #shuttle-state-table thead th { background-color: #CCE8EB; width: 300px; } #shuttle-state-table tr:nth-child(odd) { background: #fff; } #shuttle-state-table tr:nth-child(even) { background: #F5FAFA; } /* -------------------- 第二模块 -------------------- */ .shuttle-msg { /*overflow: auto;*/ margin-top: 10px; height: 23%; background-color: #fff; border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,.3); } /* 堆垛机状态信息表 */ #shuttle-msg-table { font-size: 12px; border-collapse: collapse; margin: 0 auto; text-align: center; } #shuttle-msg-table td, #shuttle-msg-table th { border: 1px solid #f1f1f1; color: #666; height: 30px; } #shuttle-msg-table thead th { background-color: #fff; width: 400px; } #shuttle-msg-table tr:nth-child(odd) { background: #fff; } #shuttle-msg-table tr:nth-child(even) { background: #fff; } /* -------------------- 第三模块 -------------------- */ .shuttle-operation { position: relative; margin-top: 10px; height: 25%; background-color: #fff; border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,.3); } /* 任务设备选择框 */ .task-select { width: 13%; height: 100%; overflow: hidden; display: inline-block; padding: 20px 0 10px 20px; /*clear: right;*/ } .operator-item { display: inline-block; height: 100%; text-align: center; position: relative; vertical-align: middle; padding: 0 20px; } .operator-item .select-title { display: inline-block; position: absolute; top: -11px; left: 50%; transform: translate(-50%, 0); background-color: #fff; color: #2e95d3; font-size: 12px; border: 1px solid #8d8d8d; border-radius: 5px; padding: 5px; z-index: 999; } .operator-item .select-container { padding: 30px 0; height: 100%; border: 1px solid #8d8d8d; border-radius: 5px; } #shuttle-select .select-container label { display: block; padding: 5px 40px; vertical-align: middle; margin-top:-2px; margin-bottom:1px; } .select-container input { display: inline-block; font-size: 12px; vertical-align: middle; margin-top:-2px; margin-bottom:1px; } .select-container-item { display: inline-block; padding: 0 10px; } .select-container-item input { height: 20px; border: 1px solid #8D8D8D; border-radius: 3px; width: 80px; outline: none; } /* 任务作业选择框 */ .task-operator { width: 86%; height: 100%; overflow: hidden; padding: 5px 0 10px 20px; display: inline-block; margin-right: 10px; } .task-operator fieldset { padding: 15px 20px 5px 50px; /*border-width: 1px;*/ /*border-style: solid;*/ height: 100%; border: 1px solid #8d8d8d; border-radius: 5px; } .task-operator legend { background-color: #fff; color: #2e95d3; font-size: 12px; border: 1px solid #8d8d8d; border-radius: 5px; padding: 5px; z-index: 999; } button.item { margin-top: 5px; border: 1px solid #333; font-size: 13px; padding: 1px 1px 1px 1px; width: 110px; height: 40px; outline: none; cursor: pointer; color: #333; background-color: transparent; margin-right: 5px; border-radius: 5px; } button.item:hover { background-color: #333; color: #fff; } /* 手动操作遮罩 */ .shuttle-operation-shade { position: absolute; height: 100%; width: 100%; z-index: 1000; text-align: center; padding: 80px 0; } .shuttle-operation-shade-span { font-size: xx-large; font-weight: bold; color: red; } /* -------------------- 第四模块 -------------------- */ .shuttle-output-board { margin-top: 10px; height: 20%; background-color: #fff; border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,.3); } #shuttle-output { border-left: none; border-right: none; border-top: 1px solid #9d9d9d; border-bottom: 1px solid #333; width: 100%; height: 100%; overflow: auto; resize:none; color: #666; } /* 详情弹出层 */ #shuttle-detl { padding: 30px 10px 0 25px; overflow: hidden; } #shuttle-detl form { overflow: hidden; } .form-item { margin-bottom: 10px; } .form-label { display: inline-block; width: 70px; text-align: right; } .form-input { display: inline-block; padding-left: 15px; } .form-input input { outline-style: none ; border: 1px solid #ccc; border-radius: 3px; padding: 5px 8px; width: 150px; height: 30px; font-size: 14px; font-weight: bolder; } .form-input input:focus{ border-color: #66afe9; outline: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6) } .form-button-container { text-align: center; } .form-button { margin: 10px 10px; width: 50px; height: 30px; color:white; background-color:cornflowerblue; border-radius: 3px; border-width: 0; outline: none; font-size: 15px; text-align: center; cursor: pointer; } .form-button:hover { opacity: 0.7; }