| 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: 28%; | 
| } | 
| /* 左 */ | 
| .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: 35%; | 
|     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: 26%; | 
|     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: 73%; | 
|     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: 10%; | 
|     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; | 
| } |