| | |
| | | * { |
| | | margin: 0; |
| | | overflow: hidden; |
| | | } |
| | | html,body { |
| | | height: 100%; |
| | |
| | | width: 100%; |
| | | height: 23% ; |
| | | position: absolute; |
| | | bottom: 2.5%; |
| | | bottom: 3.2%; |
| | | } |
| | | |
| | | /*=============== SCROLL BAR ===============*/ |
| | |
| | | |
| | | /* 控制开关 */ |
| | | .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%; |
| | |
| | | } |
| | | .states { |
| | | background-image: url(../images/line.png); |
| | | margin-bottom:54px; |
| | | /*margin-bottom:54px;*/ |
| | | } |
| | | .button { |
| | | margin-left: 5%; |
| | |
| | | /* 站点 */ |
| | | .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: 100px; |
| | | left: -150px; |
| | | width: 2205px; |
| | | scale: 0.7; |
| | | } |
| | | .main-part .lane { |
| | | margin-top: 30px; |
| | | position: relative; |
| | | } |
| | | /* 钢架号 */ |
| | | .row-no { |
| | | float: left; |
| | | font-size: 14px; |
| | | font-weight: bold; |
| | | margin-left: 8px; |
| | | } |
| | | |
| | | /* 库位组 */ |
| | | .stock-group { |
| | | width: 100%; |
| | | } |
| | | .stock-group .item { |
| | | width: 30px; |
| | | width: 35px; |
| | | height: 35px; |
| | | float: left; |
| | | border-top: 1px solid rgb(194,76,65); |
| | | border-bottom: 1px solid rgb(194,76,65); |
| | |
| | | cursor: inherit; |
| | | color: rgb(194,76,65); |
| | | } |
| | | .stock-group .item:last-child { |
| | | .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: 35px; |
| | | 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: 35px; |
| | | height: 35px; |
| | | background-image: url(../images/sxcar.png); |
| | | background-size: 100% 100%; |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | text-shadow: 2px 2px 4px #000000; |
| | | color: red; |
| | | font-size: 18px; |
| | | } |