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: auto; 
 | 
} 
 | 
/* 堆垛机状态表 */ 
 | 
#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: auto; 
 | 
    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 #f1f1f1; 
 | 
    color: #666; 
 | 
    height: 30px; 
 | 
} 
 | 
#crn-msg-table thead th { 
 | 
    background-color: #fff; 
 | 
    width: 400px; 
 | 
} 
 | 
#crn-msg-table tr:nth-child(odd) { 
 | 
    background: #fff; 
 | 
} 
 | 
#crn-msg-table tr:nth-child(even) { 
 | 
    background: #fff; 
 | 
} 
 | 
  
 | 
/* -------------------- 第三模块 -------------------- */ 
 | 
.crn-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 { 
 | 
    height: 50%; 
 | 
    overflow: hidden; 
 | 
    padding: 20px 0 10px 20px; 
 | 
} 
 | 
.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; 
 | 
} 
 | 
#crn-select .select-container label { 
 | 
    display: inline-block; 
 | 
    padding: 0 20px; 
 | 
    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 { 
 | 
    height: 50%; 
 | 
    overflow: hidden; 
 | 
    padding: 0 20px 10px 20px; 
 | 
} 
 | 
.task-operator fieldset { 
 | 
    padding: 15px 20px 5px 50px; 
 | 
    border-width: 1px; 
 | 
    border-style: solid; 
 | 
    height: 100%; 
 | 
} 
 | 
.task-operator legend { 
 | 
    margin-left: 20px; 
 | 
    padding: 0 10px; 
 | 
    font-size: 16px; 
 | 
    font-weight: 300; 
 | 
} 
 | 
button.item { 
 | 
    border: 1px solid #333; 
 | 
    font-size: 13px; 
 | 
    padding: 1px 1px 1px 1px; 
 | 
    width: 100px; 
 | 
    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; 
 | 
} 
 | 
  
 | 
/* 手动操作遮罩 */ 
 | 
.crn-operation-shade { 
 | 
    position: absolute; 
 | 
    height: 100%; 
 | 
    width: 100%; 
 | 
    z-index: 1000; 
 | 
    text-align: center; 
 | 
    padding: 80px 0; 
 | 
} 
 | 
.crn-operation-shade-span { 
 | 
    font-size: xx-large; 
 | 
    font-weight: bold; 
 | 
    color: red; 
 | 
} 
 | 
  
 | 
/* -------------------- 第四模块 -------------------- */ 
 | 
.crn-output-board { 
 | 
    margin-top: 10px; 
 | 
    height: 23%; 
 | 
    background-color: #fff; 
 | 
    border-radius: 5px; 
 | 
    box-shadow: 0 0 3px rgba(0,0,0,.3); 
 | 
} 
 | 
#crn-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; 
 | 
} 
 |