body { padding: 10px; background-color: #f1f1f1; } /* 第一模块 */ .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; } .crn-command-item { padding: 20px 0; } .crn-command-item label { font-size: 20px; font-weight: bold; vertical-align: middle; } .crn-command-item span { display: inline-block; width: 20px; height: 20px; background-color: #2e9926; border-radius: 5px; vertical-align: middle; } .crn-command-item input { vertical-align: middle; outline: none; width: 70%; } /* 右 */ .crn-state { float: left; height: 100%; width: 80%; overflow: hidden; } /* 堆垛机状态表 */ #crn-state-table { font-size: 12px; border-collapse: collapse; margin: 0 auto; text-align: center; } #crn-state-table td, #crn-state-table th { border: 1px solid #cad9ea; color: #666; height: 25px; } #crn-state-table thead th { background-color: #CCE8EB; width: 300px; } #crn-state-table tr:nth-child(odd) { background: #fff; } #crn-state-table tr:nth-child(even) { background: #F5FAFA; } /* 第二模块 */ .crn-msg { overflow: hidden; margin-top: 10px; height: 20%; background-color: #fff; border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,.3); } /* 堆垛机状态信息表 */ #crn-msg-table { font-size: 12px; border-collapse: collapse; margin: 0 auto; text-align: center; } #crn-msg-table td, #crn-msg-table th { border: 1px solid #cad9ea; color: #666; height: 25px; } #crn-msg-table thead th { background-color: #CCE8EB; width: 400px; } #crn-msg-table tr:nth-child(odd) { background: #fff; } #crn-msg-table tr:nth-child(even) { background: #F5FAFA; } /* 第三模块 */ .crn-operation { margin-top: 10px; height: 25%; background-color: #fff; border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,.3); } .crn-output { margin-top: 10px; height: 23%; background-color: #fff; border-radius: 5px; box-shadow: 0 0 3px rgba(0,0,0,.3); }