|  |  | 
 |  |  | * { | 
 |  |  |    margin: 0; | 
 |  |  |    overflow: hidden; | 
 |  |  | } | 
 |  |  | html,body { | 
 |  |  |    height: 100%; | 
 |  |  | 
 |  |  |    width: 100%; | 
 |  |  |    height: 100%; | 
 |  |  |    background-color: rgb(108,167,168); | 
 |  |  |    position: relative; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .header { | 
 |  |  |    position: absolute; | 
 |  |  |    height: 10%; | 
 |  |  |    width: 20%; | 
 |  |  |    padding-top: 1%; | 
 |  |  |    padding-left: 1%; | 
 |  |  |    top: 1%; | 
 |  |  |    left: 1%; | 
 |  |  |    color: #FFFFFF; | 
 |  |  | } | 
 |  |  | .header h1 { | 
 |  |  | 
 |  |  |  | 
 |  |  | .main { | 
 |  |  |    overflow-y: scroll; | 
 |  |  |    position: relative; | 
 |  |  |    height: 100%; | 
 |  |  | } | 
 |  |  |  | 
 |  |  |  | 
 |  |  | 
 |  |  |    width: 100%; | 
 |  |  |    height: 23%   ; | 
 |  |  |    position: absolute; | 
 |  |  |    bottom: 2.5%; | 
 |  |  |    bottom: 3.2%; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | /*=============== SCROLL BAR ===============*/ | 
 |  |  | ::-webkit-scrollbar { | 
 |  |  |    width: .6rem; | 
 |  |  |    border-radius: .5rem; | 
 |  |  |    background-color: hsl(228, 8%, 76%); | 
 |  |  | } | 
 |  |  |  | 
 |  |  | ::-webkit-scrollbar-thumb { | 
 |  |  |    background-color: hsl(228, 8%, 64%); | 
 |  |  |    border-radius: .5rem; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | ::-webkit-scrollbar-thumb:hover { | 
 |  |  |    background-color: hsl(228, 8%, 54%); | 
 |  |  | } | 
 |  |  |  | 
 |  |  |  | 
 |  |  | /* 控制开关 */ | 
 |  |  | .system-state { | 
 |  |  |    display: inline-block; | 
 |  |  |    float: left; | 
 |  |  |    width: 15%; | 
 |  |  |    height: 100%; | 
 |  |  |    background-color: rgba(0, 0, 0, 0.3); | 
 |  |  | 
 |  |  | } | 
 |  |  | /* 堆垛机状态 */ | 
 |  |  | .machine-status { | 
 |  |  |    display: inline-block; | 
 |  |  |    float: left; | 
 |  |  |    width: 15%; | 
 |  |  |    height: 100%; | 
 |  |  |    background-color: rgba(0, 0, 0, 0.3); | 
 |  |  | 
 |  |  | } | 
 |  |  | .state-ss { | 
 |  |  |    margin-left: 60px; | 
 |  |  |  | 
 |  |  | } | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  | /* 输送线状态 */ | 
 |  |  | .line-status { | 
 |  |  |    display: inline-block; | 
 |  |  |    float: left; | 
 |  |  |    width: 15%; | 
 |  |  |    height: 100%; | 
 |  |  |    background-color: rgba(0, 0, 0, 0.3); | 
 |  |  | 
 |  |  | /* 条码扫描器 */ | 
 |  |  | .bar-code { | 
 |  |  |    display: inline-block; | 
 |  |  |    width: 49%; | 
 |  |  |    height: 100%; | 
 |  |  |    float: left; | 
 |  |  |    position: fixed; | 
 |  |  |    width: 34%; | 
 |  |  |    height: 23%; | 
 |  |  |    background-color: rgba(0, 0, 0, 0.3); | 
 |  |  |    border-radius: 15px; | 
 |  |  |    margin-left: 1%; | 
 |  |  |    overflow: hidden; | 
 |  |  | } | 
 |  |  | /*扫码表单*/ | 
 |  |  | .tablebox { | 
 |  |  | 
 |  |  |    list-style: none; | 
 |  |  |    line-height: 27px; | 
 |  |  |    text-indent: 10px; | 
 |  |  |    overflow: hidden; | 
 |  |  | } | 
 |  |  | .table-head { | 
 |  |  |    width: 100%; | 
 |  |  | 
 |  |  | /* 站点 */ | 
 |  |  | .site { | 
 |  |  |    color: #333; | 
 |  |  |    height: 18px; | 
 |  |  |    border: 1px solid rgb(108,167,168); | 
 |  |  |    height: 35px; | 
 |  |  |    /*border: 1px solid rgb(108,167,168);*/ | 
 |  |  |    cursor: pointer; | 
 |  |  |    width: 50px; | 
 |  |  |    width: 60px; | 
 |  |  |    text-align: center; | 
 |  |  |    background-color: rgb(120,255,129); | 
 |  |  |    font-size: 13px; | 
 |  |  | 
 |  |  | .site-unauto { | 
 |  |  |    background-color: rgb(184,184,184); | 
 |  |  | } | 
 |  |  | /*空闲*/ | 
 |  |  | .shuttle-idle { | 
 |  |  |    background-color: rgb(120,255,129); | 
 |  |  | } | 
 |  |  | /*作业中*/ | 
 |  |  | .shuttle-working { | 
 |  |  |    background-color: rgb(196,196,0); | 
 |  |  | } | 
 |  |  | /*等待确认*/ | 
 |  |  | .shuttle-waiting { | 
 |  |  |    background-color: rgb(184,184,184); | 
 |  |  | } | 
 |  |  | /*充电中*/ | 
 |  |  | .shuttle-charging { | 
 |  |  |    background-color: rgb(250,81,246); | 
 |  |  | } | 
 |  |  | /*充电任务等待确认*/ | 
 |  |  | .shuttle-charging-waiting { | 
 |  |  |    background-color: rgb(58,77,249); | 
 |  |  | } | 
 |  |  | /*故障修复中*/ | 
 |  |  | .shuttle-fixing { | 
 |  |  |    background-color: rgb(252,48,48); | 
 |  |  | } | 
 |  |  | /*离线*/ | 
 |  |  | .shuttle-offline { | 
 |  |  |    background-color: rgb(0, 0, 0); | 
 |  |  | } | 
 |  |  | /*空闲*/ | 
 |  |  | .lift-idle { | 
 |  |  |    background-color: rgb(120,255,129); | 
 |  |  | } | 
 |  |  | /*作业中*/ | 
 |  |  | .lift-working { | 
 |  |  |    background-color: rgb(196,196,0); | 
 |  |  | } | 
 |  |  | /*等待确认*/ | 
 |  |  | .lift-waiting { | 
 |  |  |    background-color: rgb(184,184,184); | 
 |  |  | } | 
 |  |  | /*离线*/ | 
 |  |  | .lift-offline { | 
 |  |  |    background-color: rgb(0, 0, 0); | 
 |  |  | } | 
 |  |  | #code { | 
 |  |  |    background-image: url(../images/status_bar_2.png); | 
 |  |  |    background-repeat: no-repeat; | 
 |  |  |    margin-left: 2%; | 
 |  |  | } | 
 |  |  |  | 
 |  |  |  | 
 |  |  |  | 
 |  |  | /* ------------------ 输送线总成 ------------------ */ | 
 |  |  | .site-row { | 
 |  |  |    position: absolute; | 
 |  |  |    top: 122px; | 
 |  |  | } | 
 |  |  | /* 输送线第一列 */ | 
 |  |  |  | 
 |  |  | .site-row-title span { | 
 |  |  |    font-size: x-large; | 
 |  |  |    font-weight: bold; | 
 |  |  |    letter-spacing: 2px; | 
 |  |  |    color: #000000; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .site-row-title-1 { | 
 |  |  |    top: 310px; | 
 |  |  |    left: 415px; | 
 |  |  | } | 
 |  |  | .site-row-1 { | 
 |  |  |    top: 205px; | 
 |  |  |    left: 120px; | 
 |  |  |    top: 130px; | 
 |  |  |    left: 801px; | 
 |  |  |    z-index: 9999; | 
 |  |  | } | 
 |  |  | .site-row-1 .site { | 
 |  |  |    width: 80px; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | /* 输送线第二列 */ | 
 |  |  | .site-row-2 { | 
 |  |  |    top: 205px; | 
 |  |  |    left: 202px; | 
 |  |  |    top: 130px; | 
 |  |  |    left: 801px; | 
 |  |  |    z-index: 9999; | 
 |  |  | } | 
 |  |  | .site-row-2 .site { | 
 |  |  |    width: 80px; | 
 |  |  | } | 
 |  |  | .site-row-3 { | 
 |  |  |    top: 205px; | 
 |  |  |    left: 284px; | 
 |  |  |    /*width: 164px;*/ | 
 |  |  |    top: 130px; | 
 |  |  |    left: 801px; | 
 |  |  |    z-index: 9999; | 
 |  |  | } | 
 |  |  | .site-row-3 .site { | 
 |  |  |    width: 80px; | 
 |  |  | } | 
 |  |  | .site-row-4 { | 
 |  |  |    top: 0px; | 
 |  |  |    left: 1000px; | 
 |  |  | } | 
 |  |  | .site-row-4 .site { | 
 |  |  |    width: 80px; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .site-row-title-2 { | 
 |  |  |    top: 280px; | 
 |  |  |    left: 1685px; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .site-row-5 { | 
 |  |  |    top: 71px; | 
 |  |  |    left: 448px; | 
 |  |  |    top: 400px; | 
 |  |  |    left: 1550px; | 
 |  |  | } | 
 |  |  | .site-row-5 .site { | 
 |  |  |    width: 80px; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .site-row-6 { | 
 |  |  |    top: 71px; | 
 |  |  |    left: 530px; | 
 |  |  |    top: 400px; | 
 |  |  |    left: 1632px; | 
 |  |  | } | 
 |  |  | .site-row-6 .site { | 
 |  |  |    width: 80px; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .site-row-7 { | 
 |  |  |    top: 400px; | 
 |  |  |    left: 1714px; | 
 |  |  | } | 
 |  |  | .site-row-7 .site { | 
 |  |  |    width: 80px; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .site-row-8 { | 
 |  |  |    top: 340px; | 
 |  |  |    left: 1796px; | 
 |  |  | } | 
 |  |  | .site-row-8 .site { | 
 |  |  |    width: 80px; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | /* ------------------ 货架总成 ------------------ */ | 
 |  |  | .main-part { | 
 |  |  |    position: absolute; | 
 |  |  |    top: 20px; | 
 |  |  |    left: 612px; | 
 |  |  |    top: -150px; | 
 |  |  |    left: 50px; | 
 |  |  |    transform: scale(0.75); | 
 |  |  | } | 
 |  |  | .main-part .lane { | 
 |  |  |    margin-top: 30px; | 
 |  |  |    position: relative; | 
 |  |  | } | 
 |  |  | /* 钢架号 */ | 
 |  |  | .row-no { | 
 |  |  |    float: left; | 
 |  |  |    font-size: 14px; | 
 |  |  |    font-weight: bold; | 
 |  |  |    margin-left: 8px; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | /* 库位组 */ | 
 |  |  | .stock-group .item { | 
 |  |  |    width: 30px; | 
 |  |  |    width: 70px; | 
 |  |  |    height: 35px; | 
 |  |  |    float: left; | 
 |  |  |    border-top: 1px solid rgb(194,76,65); | 
 |  |  |    border-bottom: 1px solid rgb(194,76,65); | 
 |  |  |    border-left: 1px solid rgb(194,76,65); | 
 |  |  |    border-right: 1px solid rgb(194,76,65); | 
 |  |  |    border-right: none; | 
 |  |  |    cursor: inherit; | 
 |  |  |    color: rgb(194,76,65); | 
 |  |  | } | 
 |  |  | .stock-group .item:last-of-type { | 
 |  |  |    border-right: 1px solid rgb(194,76,65); | 
 |  |  | } | 
 |  |  | .stock-group::after, .stock-group::before { | 
 |  |  |    content: ""; | 
 |  |  |    display: table; | 
 |  |  |    clear: both; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .stock-group .site { | 
 |  |  |    width: 80px; | 
 |  |  |    width: 70px; | 
 |  |  |    float: left; | 
 |  |  |    word-break: break-all; | 
 |  |  |    display: flex; | 
 |  |  |    justify-content: center; | 
 |  |  |    align-items: center; | 
 |  |  | } | 
 |  |  | .stock-group::after, .stock-group::before { | 
 |  |  |    content: ""; | 
 |  |  | 
 |  |  | } | 
 |  |  | /* 堆垛机轨道 */ | 
 |  |  | .pathway { | 
 |  |  |    margin-left: 30px; | 
 |  |  |    border: 1px solid #333; | 
 |  |  |    position: absolute; | 
 |  |  |    margin-left: -80px; | 
 |  |  |    border: 1px solid #333; | 
 |  |  |    background-color:#333!important; | 
 |  |  |    color: #333 !important; | 
 |  |  |    width: 100%; | 
 |  |  |    margin-top: 10px; | 
 |  |  |    width: 105%; | 
 |  |  |    margin-top: 13px; | 
 |  |  | } | 
 |  |  | /* 堆垛机 */ | 
 |  |  | .machine { | 
 |  |  |    margin-left: 30px; | 
 |  |  |    margin-left: -80px; | 
 |  |  |    position: relative; | 
 |  |  |    background-color: rgb(108,167,168); | 
 |  |  |    height: 20px; | 
 |  |  |    height: 26px; | 
 |  |  |    width: 80px; | 
 |  |  |    background-image: url("../images/Crane_auto.png"); | 
 |  |  |    background-repeat: no-repeat; | 
 |  |  |    background-size:100% 100%; | 
 |  |  |    background-position: top center; | 
 |  |  |    background-size: 100% 80%; | 
 |  |  |    background-position: center center; | 
 |  |  |    cursor: pointer; | 
 |  |  | } | 
 |  |  | /* 入库 */ | 
 |  |  | 
 |  |  |    margin-right: 80px; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | /* ------------------ 台车 ------------------ */ | 
 |  |  | /* 轨道 */ | 
 |  |  | .car-track { | 
 |  |  |    position: absolute; | 
 |  |  | } | 
 |  |  | .car-track-across { | 
 |  |  |    position: absolute; | 
 |  |  | } | 
 |  |  | .car-track div { | 
 |  |  |    height: 100%; | 
 |  |  |    display: inline-block; | 
 |  |  |    width: 75%; | 
 |  |  |    border-left: 5px solid #313131; | 
 |  |  |    border-right: 5px solid #313131; | 
 |  |  | } | 
 |  |  | .car-track-across div { | 
 |  |  |    height: 80%; | 
 |  |  |    display: inline-block; | 
 |  |  |    width: 100%; | 
 |  |  |    border-top: 3px solid #313131; | 
 |  |  |    border-bottom: 3px solid #313131; | 
 |  |  | } | 
 |  |  | #car-track-1 { | 
 |  |  |    text-align: center; | 
 |  |  |    width: 70px; | 
 |  |  |    height: 604px; | 
 |  |  |    top: 0; | 
 |  |  |    left: 6px; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | /* 车 */ | 
 |  |  | .car { | 
 |  |  |    position: absolute; | 
 |  |  | } | 
 |  |  |  | 
 |  |  |  | 
 |  |  | /* 弹窗 */ | 
 |  |  | 
 |  |  |    width: auto; | 
 |  |  |  | 
 |  |  | } | 
 |  |  |  | 
 |  |  |  | 
 |  |  | .floorBtn { | 
 |  |  |    position: absolute; | 
 |  |  |    border-radius: 5px; | 
 |  |  |    right: 200px; | 
 |  |  |    width: 90px; | 
 |  |  |    height: 40px; | 
 |  |  |    color: #ffffff; | 
 |  |  |    font-size: 24px; | 
 |  |  |    font-weight: 500; | 
 |  |  |    letter-spacing: 5px; | 
 |  |  |    cursor:pointer; | 
 |  |  |    transition: all 0.3s ease; | 
 |  |  |    font-family: 'Lato', sans-serif; | 
 |  |  |    background: transparent; | 
 |  |  |    box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5), 7px 7px 20px 0px rgba(0, 0, 0, 0.1), | 
 |  |  |    4px 4px 5px 0px rgba(0, 0, 0, 0.1); | 
 |  |  | } | 
 |  |  | /* 16 */ | 
 |  |  | .btn-16 { | 
 |  |  |    border: none; | 
 |  |  |    color: #fff; | 
 |  |  | } | 
 |  |  | .btn-16:after { | 
 |  |  |    position: absolute; | 
 |  |  |    content: ''; | 
 |  |  |    width: 0; | 
 |  |  |    height: 100%; | 
 |  |  |    top: 0; | 
 |  |  |    left: 0; | 
 |  |  |    direction: rtl; | 
 |  |  |    z-index: -1; | 
 |  |  |    box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, | 
 |  |  |    4px 4px 5px 0px #0001; | 
 |  |  |    transition: all 0.3s ease; | 
 |  |  | } | 
 |  |  | .btn-16:hover { | 
 |  |  |    color: #323131; | 
 |  |  | } | 
 |  |  | .btn-16:hover:after { | 
 |  |  |    left: auto; | 
 |  |  |    right: 0; | 
 |  |  |    width: 100%; | 
 |  |  | } | 
 |  |  | .btn-16:active { | 
 |  |  |    top: 2px; | 
 |  |  | } | 
 |  |  | .btn-16-active{ | 
 |  |  |    color: #323131 !important; | 
 |  |  | } | 
 |  |  |  | 
 |  |  | .sxcar{ | 
 |  |  |    width: 70px; | 
 |  |  |    height: 35px; | 
 |  |  |    background-image: url(../images/sxcar.png); | 
 |  |  |    background-size: 100% 100%; | 
 |  |  |    position: absolute; | 
 |  |  |    top: 0; | 
 |  |  |    left: 0; | 
 |  |  | } |