|  |  | 
 |  |  | html { | 
 |  |  |     height: 100%; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | body { | 
 |  |  |     height: 100%; | 
 |  |  |     background-color: #f1f1f1; | 
 |  |  |     border-radius: 5px; | 
 |  |  |     box-shadow: 0 0 3px rgba(0,0,0,.3); | 
 |  |  |     padding: 10px; | 
 |  |  | } | 
 |  |  | /* 头部 */ | 
 |  |  |  | 
 |  |  | /* ------------------------------------ 头部 ------------------------------------*/ | 
 |  |  | header { | 
 |  |  |     border-radius: 5px; | 
 |  |  |     box-shadow: 0 0 3px rgba(0,0,0,.3); | 
 |  |  |     background-color: #fff; | 
 |  |  |     height: 20%; | 
 |  |  |     border: 1px solid red; | 
 |  |  | } | 
 |  |  | /* 主体 */ | 
 |  |  | main { | 
 |  |  |     height: 80%; | 
 |  |  |     opacity: 0.8; | 
 |  |  |     position: relative; | 
 |  |  | } | 
 |  |  | /* 分割线 */ | 
 |  |  | .header-hr { | 
 |  |  |     border-radius: 5px; | 
 |  |  |     border: 1px solid #777; | 
 |  |  |     width: 80%; | 
 |  |  |     position: absolute; | 
 |  |  |     bottom: 0; | 
 |  |  | } | 
 |  |  | /* 系统运行状态 */ | 
 |  |  | .system-state { | 
 |  |  |     float: left; | 
 |  |  |     width: 10%; | 
 |  |  |     height: 100%; | 
 |  |  |     padding: 20px; | 
 |  |  |     text-align: center; | 
 |  |  |     color: #2d6aff; | 
 |  |  | } | 
 |  |  | #system-icon { | 
 |  |  |     display: inline-block; | 
 |  |  |     width: 70%; | 
 |  |  |     height: 70%; | 
 |  |  |     background-repeat: no-repeat; | 
 |  |  |     background-size:100% 100%; | 
 |  |  |     background-position: top center; | 
 |  |  |     cursor: pointer; | 
 |  |  | } | 
 |  |  | .system-icon-open { | 
 |  |  |     background-image: url("../image/stop48.png"); | 
 |  |  | } | 
 |  |  | .system-icon-close { | 
 |  |  |     background-image: url("../image/start48.png"); | 
 |  |  | } | 
 |  |  |  | 
 |  |  | #system-run-desc { | 
 |  |  |     font-size: large; | 
 |  |  |     display: inline-block; | 
 |  |  |     padding-top: 10px; | 
 |  |  |     font-weight: bold; | 
 |  |  |     overflow: hidden; | 
 |  |  |     text-overflow:ellipsis; | 
 |  |  |     white-space: nowrap; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | /* 状态显示 */ | 
 |  |  | .data-window { | 
 |  |  |     padding-top: 20px; | 
 |  |  |     float: left; | 
 |  |  |     width: 70%; | 
 |  |  |     text-align: center; | 
 |  |  | } | 
 |  |  | .data-window h1 { | 
 |  |  |     font-size: 3em; | 
 |  |  |     margin: 0; | 
 |  |  |     letter-spacing: 1px; | 
 |  |  |     font-weight: inherit; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | /* 颜色提示 */ | 
 |  |  | .tips { | 
 |  |  |     position: absolute; | 
 |  |  |     bottom: 7%; | 
 |  |  |     left: 10%; | 
 |  |  | } | 
 |  |  | .tips-item { | 
 |  |  |     margin-bottom: 0; | 
 |  |  |     font-size: 0; | 
 |  |  |     text-align: left; | 
 |  |  | } | 
 |  |  | .tips-item label { | 
 |  |  |     display: inline-block; | 
 |  |  |     width: 130px; | 
 |  |  |     text-align: right; | 
 |  |  |     font-size: xx-small; | 
 |  |  | } | 
 |  |  | .item-group { | 
 |  |  |     display: inline-block; | 
 |  |  | } | 
 |  |  | .item-group span { | 
 |  |  |     font-size: xx-small; | 
 |  |  |     padding: 0 10px; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | /* ------------------------------------ 主体 ------------------------------------*/ | 
 |  |  | main { | 
 |  |  |     margin-top: 8px; | 
 |  |  |     border-radius: 5px; | 
 |  |  |     box-shadow: 0 0 3px rgba(0,0,0,.3); | 
 |  |  |     background-color: #fff; | 
 |  |  |     height: 75.8%; | 
 |  |  |     position: relative; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | /* ------------------ 输送线总成 ------------------ */ | 
 |  |  | .site-row { | 
 |  |  |     position: absolute; | 
 |  |  |     top: 122px; | 
 |  |  | } | 
 |  |  | /* 输送线第一列 */ | 
 |  |  | .site-row-1 { | 
 |  |  |     left: 100px; | 
 |  |  | } | 
 |  |  | .site-row-1 .site { | 
 |  |  |     width: 100px; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | /* 站点 */ | 
 |  |  | .site { | 
 |  |  |     color: #333; | 
 |  |  |     height: 20px; | 
 |  |  |     border: 1px solid #fff; | 
 |  |  |     cursor: pointer; | 
 |  |  |     width: 50px; | 
 |  |  |     text-align: center; | 
 |  |  |     background-color: #21ff3a; | 
 |  |  |     font-size: 13px; | 
 |  |  | } | 
 |  |  | /* 无效站点(必须在site下面) */ | 
 |  |  | .site-none { | 
 |  |  |     border: none; | 
 |  |  |     background-color: transparent; | 
 |  |  |     cursor: default; | 
 |  |  | } | 
 |  |  | /* 自动 */ | 
 |  |  | .site-auto { | 
 |  |  |     background-color: rgb(42,253,47); | 
 |  |  | } | 
 |  |  | /* 非自动/收到 */ | 
 |  |  | .site-unauto { | 
 |  |  |     background-color: #aaaaaa; | 
 |  |  | } | 
 |  |  | /* 自动+有物+ID */ | 
 |  |  | .site-auto-run-id { | 
 |  |  |     background-color: red; | 
 |  |  | } | 
 |  |  | /* 自动+有物 */ | 
 |  |  | .site-auto-run { | 
 |  |  |     background-color: #fc29f8; | 
 |  |  | } | 
 |  |  | /* 自动+有物+ID */ | 
 |  |  | .site-auto-id { | 
 |  |  |     background-color: yellow; | 
 |  |  | } | 
 |  |  |  | 
 |  |  |  | 
 |  |  | /* ------------------ 货架总成 ------------------ */ | 
 |  |  | .main-part { | 
 |  |  |     position: absolute; | 
 |  |  |     top: 100px; | 
 |  |  |     left: 200px; | 
 |  |  | } | 
 |  |  | .main-part .lane { | 
 |  |  |     /*margin-bottom: 30px;*/ | 
 |  |  | } | 
 |  |  | /* 排号 */ | 
 |  |  | .row-no { | 
 |  |  |     margin-left: 50px; | 
 |  |  |     font-weight: bolder; | 
 |  |  |     margin-left: 80px; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | /* 库位组 */ | 
 |  |  | 
 |  |  |     border-left: 1px solid #333!important; | 
 |  |  |     border-right: 1px solid #333!important; | 
 |  |  |     border-right: none; | 
 |  |  |     cursor: inherit; | 
 |  |  | } | 
 |  |  | .stock-group .item:last-child { | 
 |  |  |     /*border-right: 1px solid #333!important;*/ | 
 |  |  | 
 |  |  |     clear: both; | 
 |  |  | } | 
 |  |  | .stock-group .site { | 
 |  |  |     width: 80px; | 
 |  |  |     float: left; | 
 |  |  | } | 
 |  |  | button.item { | 
 |  |  |     font-size: 13px; | 
 |  |  |     padding: 1px 1px 1px 1px; | 
 |  |  |     width: 20px; | 
 |  |  |     width: 30px; | 
 |  |  |     height: 20px; | 
 |  |  |     outline: none; | 
 |  |  |     cursor: pointer; | 
 |  |  | 
 |  |  |  | 
 |  |  | /* 堆垛机 */ | 
 |  |  | .machine { | 
 |  |  |     margin-left: 30px; | 
 |  |  |     position: relative; | 
 |  |  |     background-color: #fff; | 
 |  |  |     height: 20px; | 
 |  |  |     width: 80px; | 
 |  |  | 
 |  |  |     cursor: pointer; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | /* 入库 */ | 
 |  |  | .machine-pakin { | 
 |  |  |     background-image: url("../image/Crane_store.png"); | 
 |  |  | } | 
 |  |  | /* 出库 */ | 
 |  |  | .machine-pakout { | 
 |  |  |     background-image: url("../image/Crane_retrieve.png"); | 
 |  |  | } | 
 |  |  | /* 库到库 */ | 
 |  |  | .machine-stock-move { | 
 |  |  |     background-image: url("../image/Crane_loctoloc.png"); | 
 |  |  | } | 
 |  |  | /* 站到站 */ | 
 |  |  | .machine-site-move { | 
 |  |  |     background-image: url("../image/Crane_stntostn.png"); | 
 |  |  | } | 
 |  |  | /* p to p */ | 
 |  |  | .machine-p-move { | 
 |  |  |     background-image: url("../image/Crane_hptoohp.png"); | 
 |  |  | } | 
 |  |  | /* 异常 */ | 
 |  |  | .machine-error { | 
 |  |  |     background-image: url("../image/Crane_error.png"); | 
 |  |  | } | 
 |  |  | /* 自动 */ | 
 |  |  | .machine-auto { | 
 |  |  |     background-image: url("../image/Crane_auto.png"); | 
 |  |  | } | 
 |  |  | /* 非自动/收到 */ | 
 |  |  | .machine-un-auto { | 
 |  |  |     background-image: url("../image/Crane_manual.png"); | 
 |  |  | } | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  | /* 入库 */ | 
 |  |  | .machine-put-flag { | 
 |  |  |     background-color: #90d0f3; | 
 |  |  | } | 
 |  |  | /* 出库 */ | 
 |  |  | .machine-take-flag { | 
 |  |  |     background-color: yellow; | 
 |  |  | } | 
 |  |  | /* 库到库 */ | 
 |  |  | .machine-stock-move-flag { | 
 |  |  |     background-color: #0c24fb; | 
 |  |  |     color: #fff; | 
 |  |  | } | 
 |  |  | /* 站到站 */ | 
 |  |  | .machine-site-move-flag { | 
 |  |  |     background-color: #faa328; | 
 |  |  | } | 
 |  |  | /* PToP */ | 
 |  |  | .machine-p-move-flag { | 
 |  |  |     background-color: #128014; | 
 |  |  |     color: #fff; | 
 |  |  | } | 
 |  |  | /* 异常 */ | 
 |  |  | .machine-error-flag { | 
 |  |  |     background-color: red; | 
 |  |  | } | 
 |  |  | /* 自动 */ | 
 |  |  | .machine-auto-flag { | 
 |  |  |     background-color: rgb(42,253,47); | 
 |  |  | } | 
 |  |  | /* 非自动/收到 */ | 
 |  |  | .machine-unauto-flag { | 
 |  |  |     background-color: #aaaaaa; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | /* 堆垛机轨道 */ | 
 |  |  | .pathway { | 
 |  |  |     margin-left: 30px; | 
 |  |  |     border: 1px solid #333; | 
 |  |  |     position: absolute; | 
 |  |  |     background-color:#333!important; | 
 |  |  |     color: #333 !important; | 
 |  |  |     width: 100%; | 
 |  |  |     width: 95%; | 
 |  |  |     margin-top: 10px; | 
 |  |  |     z-index: -1; | 
 |  |  | } | 
 |  |  |  | 
 |  |  |  | 
 |  |  | /* 输送线相关 */ | 
 |  |  | .site:hover { | 
 |  |  |     opacity: 0.7; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | /* 入库口 */ | 
 |  |  | .cargo-put { | 
 |  |  |     /*transform: rotateY(180deg);*/ | 
 |  |  |     top: 160px; | 
 |  |  |     left: 43px; | 
 |  |  |     position: absolute; | 
 |  |  |     width: 50px; | 
 |  |  |     height: 40px; | 
 |  |  |     background-image: url("../image/fork_r.png"); | 
 |  |  |     background-repeat: no-repeat; | 
 |  |  |     background-size:100% 100%; | 
 |  |  |     background-position: top center; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | /* 扫码器 */ | 
 |  |  | .code-decoder { | 
 |  |  |     position: absolute; | 
 |  |  |     width: 30px; | 
 |  |  |     height: 30px; | 
 |  |  |     background-image: url("../image/bscanner.png"); | 
 |  |  |     background-repeat: no-repeat; | 
 |  |  |     background-size:100% 60%; | 
 |  |  |     background-position: top center; | 
 |  |  | } | 
 |  |  | /* 扫码器文字 */ | 
 |  |  | .code-decoder-data { | 
 |  |  |     font-size: small; | 
 |  |  |     display: inline-block; | 
 |  |  |     /*transform: scale(0.90);*/ | 
 |  |  | } | 
 |  |  | /* 扫码器1 */ | 
 |  |  | #code-decoder-1 { | 
 |  |  |     top: 144px; | 
 |  |  |     left: 100px; | 
 |  |  | } | 
 |  |  | /* 扫码器数据1 */ | 
 |  |  | #code-decoder-data-1 { | 
 |  |  |     font-size: xx-small; | 
 |  |  |     margin-left: 35px; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | /* 扫码器1 */ | 
 |  |  | #code-decoder-2 { | 
 |  |  |     top: 204px; | 
 |  |  |     left: 100px; | 
 |  |  | } | 
 |  |  | /* 扫码器数据1 */ | 
 |  |  | #code-decoder-data-2 { | 
 |  |  |     font-size: xx-small; | 
 |  |  |     margin-left: 35px; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | /* 弹窗 */ | 
 |  |  | form .form-item { | 
 |  |  |     display: inline-block; | 
 |  |  |     padding-top: 10px; | 
 |  |  |     padding-left: 5px; | 
 |  |  | } | 
 |  |  | form .form-item-label { | 
 |  |  |     float: left; | 
 |  |  |     text-align: right; | 
 |  |  |     padding: 1px 6px; | 
 |  |  |     display: inline-block; | 
 |  |  |     vertical-align: middle; | 
 |  |  | } | 
 |  |  | form .form-item-input { | 
 |  |  |     display: inline-block; | 
 |  |  |     float: left; | 
 |  |  |     vertical-align: middle; | 
 |  |  | } | 
 |  |  | form .form-item-input input { | 
 |  |  |     height: 1.5rem; | 
 |  |  |     padding-left: 0.5rem; | 
 |  |  | } | 
 |  |  |  |