|  |  |  | 
|---|
|  |  |  | html { | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | * { | 
|---|
|  |  |  | margin: 0; | 
|---|
|  |  |  | overflow: hidden; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | body { | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | html,body { | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 头部 */ | 
|---|
|  |  |  | header { | 
|---|
|  |  |  | height: 20%; | 
|---|
|  |  |  | border: 1px solid red; | 
|---|
|  |  |  | #root { | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | background-color: rgb(108,167,168); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 主体 */ | 
|---|
|  |  |  | main { | 
|---|
|  |  |  | height: 80%; | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  | .head { | 
|---|
|  |  |  | height: 10%; | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | color: #FFFFFF; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 排号 */ | 
|---|
|  |  |  | .row-no { | 
|---|
|  |  |  | margin-left: 50px; | 
|---|
|  |  |  | .head-left { | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | width: 20%; | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .head-right { | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | width: 30%; | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | float: right; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .head h1 { | 
|---|
|  |  |  | margin-top: 2%; | 
|---|
|  |  |  | margin-left: 2%; | 
|---|
|  |  |  | font-weight: 400; | 
|---|
|  |  |  | letter-spacing:3px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .head h6 { | 
|---|
|  |  |  | margin-left: 2%; | 
|---|
|  |  |  | font-weight: 400; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | img { | 
|---|
|  |  |  | float: right; | 
|---|
|  |  |  | margin-top: 10px; | 
|---|
|  |  |  | margin-right: 10px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | #body { | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | height: 23%   ; | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | bottom: 2.5%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 控制开关 */ | 
|---|
|  |  |  | .system-state { | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | width: 15%; | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | background-color: rgba(0, 0, 0, 0.3); | 
|---|
|  |  |  | border-radius: 15px; | 
|---|
|  |  |  | margin-left: 1%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 堆垛机状态 */ | 
|---|
|  |  |  | .machine-status { | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | width: 15%; | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | background-color: rgba(0, 0, 0, 0.3); | 
|---|
|  |  |  | border-radius: 15px; | 
|---|
|  |  |  | margin-left: 1%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .state-ss { | 
|---|
|  |  |  | margin-left: 60px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 输送线状态 */ | 
|---|
|  |  |  | .line-status { | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | width: 15%; | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | background-color: rgba(0, 0, 0, 0.3); | 
|---|
|  |  |  | border-radius: 15px; | 
|---|
|  |  |  | margin-left: 1%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .line-ss { | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | float: right; | 
|---|
|  |  |  | height: 15px; | 
|---|
|  |  |  | width: 40px; | 
|---|
|  |  |  | margin-top: 10px; | 
|---|
|  |  |  | margin-right: 15px; | 
|---|
|  |  |  | line-height: 15px; | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | background-color: rgba(5, 5, 5, 0.3); | 
|---|
|  |  |  | color: #ffdd00; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 条码扫描器 */ | 
|---|
|  |  |  | .bar-code { | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | width: 49%; | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | background-color: rgba(0, 0, 0, 0.3); | 
|---|
|  |  |  | border-radius: 15px; | 
|---|
|  |  |  | margin-left: 1%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /*扫码表单*/ | 
|---|
|  |  |  | .tablebox { | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | width: 290px; | 
|---|
|  |  |  | height: 162px; | 
|---|
|  |  |  | margin-left: 1.5%; | 
|---|
|  |  |  | color: white; | 
|---|
|  |  |  | font-size: 14px; | 
|---|
|  |  |  | list-style: none; | 
|---|
|  |  |  | line-height: 27px; | 
|---|
|  |  |  | text-indent: 10px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .table-head { | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | height: 27px; | 
|---|
|  |  |  | background:linear-gradient(to right, rgb(94, 193, 184),rgb(12,71,63)); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .right { | 
|---|
|  |  |  | float: right; | 
|---|
|  |  |  | text-indent: 10px; | 
|---|
|  |  |  | padding-right: 10px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .table-body li { | 
|---|
|  |  |  | background-color: #5D7677; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .table-body li:nth-child(even) { | 
|---|
|  |  |  | background-color: #4A6565; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 控制表头 */ | 
|---|
|  |  |  | .body-head { | 
|---|
|  |  |  | height: 35px; | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | background-image: url(../images/status_bar_1.png); | 
|---|
|  |  |  | background-repeat: no-repeat; | 
|---|
|  |  |  | margin-left: 5%; | 
|---|
|  |  |  | margin-top: 20px; | 
|---|
|  |  |  | text-indent: 25px; | 
|---|
|  |  |  | color: white; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .system-icon-open { | 
|---|
|  |  |  | width: 153px; | 
|---|
|  |  |  | height: 153px; | 
|---|
|  |  |  | background-image: url(../images/start48.png); | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .system-icon-close { | 
|---|
|  |  |  | width: 153px; | 
|---|
|  |  |  | height: 153px; | 
|---|
|  |  |  | background-image: url(../images/stop48.png); | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .switch_r { | 
|---|
|  |  |  | color: #FFFFFF; | 
|---|
|  |  |  | font-size: 14px; | 
|---|
|  |  |  | width: 130px; | 
|---|
|  |  |  | height: 153px; | 
|---|
|  |  |  | float: right; | 
|---|
|  |  |  | padding-top: 30px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | #system-run-desc { | 
|---|
|  |  |  | font-size: 20px; | 
|---|
|  |  |  | margin-top: 15px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .state { | 
|---|
|  |  |  | height: 34px; | 
|---|
|  |  |  | width: 200px; | 
|---|
|  |  |  | background-color: rgba(255,255,255,0.1); | 
|---|
|  |  |  | background-image: url(../images/stacker.png); | 
|---|
|  |  |  | background-repeat: no-repeat; | 
|---|
|  |  |  | border-radius: 17px 0 0 17px; | 
|---|
|  |  |  | padding-left: 50px; | 
|---|
|  |  |  | line-height: 34px; | 
|---|
|  |  |  | margin-bottom: 10px; | 
|---|
|  |  |  | margin-left: 5%; | 
|---|
|  |  |  | color: #FFFFFF; | 
|---|
|  |  |  | font-size: 10px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .states { | 
|---|
|  |  |  | background-image: url(../images/line.png); | 
|---|
|  |  |  | margin-bottom:54px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .button { | 
|---|
|  |  |  | margin-left: 5%; | 
|---|
|  |  |  | font-size: 14px; | 
|---|
|  |  |  | color: #FFFFFF; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 站点 */ | 
|---|
|  |  |  | .site { | 
|---|
|  |  |  | color: #333; | 
|---|
|  |  |  | height: 18px; | 
|---|
|  |  |  | border: 1px solid rgb(108,167,168); | 
|---|
|  |  |  | cursor: pointer; | 
|---|
|  |  |  | width: 50px; | 
|---|
|  |  |  | text-align: center; | 
|---|
|  |  |  | background-color: rgb(120,255,129); | 
|---|
|  |  |  | font-size: 13px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /*空站点*/ | 
|---|
|  |  |  | .site-k { | 
|---|
|  |  |  | border: 1px solid rgb(108,167,168); | 
|---|
|  |  |  | background-color: rgb(108, 167, 168); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 入库 */ | 
|---|
|  |  |  | .machine-put-flag { | 
|---|
|  |  |  | padding: 0 10px; | 
|---|
|  |  |  | background-color: rgb(163,214,242); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 出库 */ | 
|---|
|  |  |  | .machine-take-flag { | 
|---|
|  |  |  | padding: 0 10px; | 
|---|
|  |  |  | background-color: rgb(151,180,0); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 库到库 */ | 
|---|
|  |  |  | .machine-stock-move-flag { | 
|---|
|  |  |  | padding: 0 10px; | 
|---|
|  |  |  | background-color: rgb(58,77,249); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 站到站 */ | 
|---|
|  |  |  | .machine-site-move-flag { | 
|---|
|  |  |  | padding: 0 10px; | 
|---|
|  |  |  | background-color: rgb(240,140,10); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* PToP */ | 
|---|
|  |  |  | .machine-p-move-flag { | 
|---|
|  |  |  | padding: 0 10px; | 
|---|
|  |  |  | background-color: rgb(29,152,23); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 异常 */ | 
|---|
|  |  |  | .machine-error-flag { | 
|---|
|  |  |  | padding: 0 10px; | 
|---|
|  |  |  | background-color: rgb(252,48,48); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 自动 */ | 
|---|
|  |  |  | .machine-auto-flag { | 
|---|
|  |  |  | padding: 0 10px; | 
|---|
|  |  |  | background-color: rgb(132,255,115); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 非自动/手动 */ | 
|---|
|  |  |  | .machine-unauto-flag { | 
|---|
|  |  |  | padding: 0 10px; | 
|---|
|  |  |  | background-color: rgb(184,184,184); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 自动+有物+ID */ | 
|---|
|  |  |  | .site-auto-run-id { | 
|---|
|  |  |  | background-color: rgb(252,48,48); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 自动+有物 */ | 
|---|
|  |  |  | .site-auto-run { | 
|---|
|  |  |  | background-color: rgb(250,81,246); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 自动+ID */ | 
|---|
|  |  |  | .site-auto-id { | 
|---|
|  |  |  | background-color: rgb(196,196,0); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 自动 */ | 
|---|
|  |  |  | .site-auto { | 
|---|
|  |  |  | background-color: rgb(120,255,129); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 非自动/手动 */ | 
|---|
|  |  |  | .site-unauto { | 
|---|
|  |  |  | background-color: rgb(184,184,184); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | #code { | 
|---|
|  |  |  | background-image: url(../images/status_bar_2.png); | 
|---|
|  |  |  | background-repeat: no-repeat; | 
|---|
|  |  |  | margin-left: 2%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* ------------------ 输送线总成 ------------------ */ | 
|---|
|  |  |  | .site-row { | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | top: 122px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 输送线第一列 */ | 
|---|
|  |  |  | .site-row-1 { | 
|---|
|  |  |  | top: 28px; | 
|---|
|  |  |  | left: 1270px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .site-row-1 .site { | 
|---|
|  |  |  | width: 80px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 输送线第二列 */ | 
|---|
|  |  |  | .site-row-2 { | 
|---|
|  |  |  | top: 28px; | 
|---|
|  |  |  | left: 1352px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .site-row-2 .site { | 
|---|
|  |  |  | width: 80px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .site-row-3 { | 
|---|
|  |  |  | top: 28px; | 
|---|
|  |  |  | left: 1434px; | 
|---|
|  |  |  | /*width: 164px;*/ | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .site-row-3 .site { | 
|---|
|  |  |  | width: 80px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .site-row-4 { | 
|---|
|  |  |  | top: 109px; | 
|---|
|  |  |  | left: 1516px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .site-row-4 .site { | 
|---|
|  |  |  | width: 80px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .site-row-5 { | 
|---|
|  |  |  | top: 71px; | 
|---|
|  |  |  | left: 530px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .site-row-5 .site { | 
|---|
|  |  |  | width: 80px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .site-row-6 { | 
|---|
|  |  |  | top: 71px; | 
|---|
|  |  |  | left: 612px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .site-row-6 .site { | 
|---|
|  |  |  | width: 80px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* ------------------ 货架总成 ------------------ */ | 
|---|
|  |  |  | .main-part { | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | top: 20px; | 
|---|
|  |  |  | left: 300px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .main-part .lane { | 
|---|
|  |  |  | margin-top: 30px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 库位组 */ | 
|---|
|  |  |  | .stock-group .item { | 
|---|
|  |  |  | float: left; | 
|---|
|  |  |  | border-top: 1px solid #333!important; | 
|---|
|  |  |  | border-bottom: 1px solid #333!important; | 
|---|
|  |  |  | border-left: 1px solid #333!important; | 
|---|
|  |  |  | border-right: 1px solid #333!important; | 
|---|
|  |  |  | border-right: none; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .stock-group .item:last-child { | 
|---|
|  |  |  | /*border-right: 1px solid #333!important;*/ | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .stock-group::after, .stock-group::before { | 
|---|
|  |  |  | content: ""; | 
|---|
|  |  |  | display: table; | 
|---|
|  |  |  | clear: both; | 
|---|
|  |  |  | 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 .site { | 
|---|
|  |  |  | float: left; | 
|---|
|  |  |  | width: 80px; | 
|---|
|  |  |  | float: left; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | button.item { | 
|---|
|  |  |  | font-size: 13px; | 
|---|
|  |  |  | padding: 1px 1px 1px 1px; | 
|---|
|  |  |  | width: 20px; | 
|---|
|  |  |  | height: 20px; | 
|---|
|  |  |  | outline: none; | 
|---|
|  |  |  | cursor: pointer; | 
|---|
|  |  |  | color: #333; | 
|---|
|  |  |  | background-color: transparent; | 
|---|
|  |  |  | transition: 0.4s; | 
|---|
|  |  |  | .stock-group::after, .stock-group::before { | 
|---|
|  |  |  | content: ""; | 
|---|
|  |  |  | display: table; | 
|---|
|  |  |  | clear: both; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | button.item:hover { | 
|---|
|  |  |  | background-color: #333; | 
|---|
|  |  |  | color: #fff; | 
|---|
|  |  |  | /* 堆垛机轨道 */ | 
|---|
|  |  |  | .pathway { | 
|---|
|  |  |  | margin-left: 30px; | 
|---|
|  |  |  | border: 1px solid #333; | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | background-color:#333!important; | 
|---|
|  |  |  | color: #333 !important; | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | margin-top: 10px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 堆垛机 */ | 
|---|
|  |  |  | .machine { | 
|---|
|  |  |  | background-color: #fff; | 
|---|
|  |  |  | height: 20px; | 
|---|
|  |  |  | width: 80px; | 
|---|
|  |  |  | background-image: url("../image/Crane_auto.png"); | 
|---|
|  |  |  | background-repeat: no-repeat; | 
|---|
|  |  |  | background-size:100% 100%; | 
|---|
|  |  |  | background-position: top center; | 
|---|
|  |  |  | cursor: pointer; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | margin-left: 30px; | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  | background-color: rgb(108,167,168); | 
|---|
|  |  |  | height: 20px; | 
|---|
|  |  |  | width: 80px; | 
|---|
|  |  |  | background-image: url("../images/Crane_auto.png"); | 
|---|
|  |  |  | background-repeat: no-repeat; | 
|---|
|  |  |  | background-size:100% 100%; | 
|---|
|  |  |  | background-position: top center; | 
|---|
|  |  |  | cursor: pointer; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 堆垛机轨道 */ | 
|---|
|  |  |  | .pathway { | 
|---|
|  |  |  | border: 1px solid #333; | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | background-color:#333!important; | 
|---|
|  |  |  | color: #333 !important; | 
|---|
|  |  |  | width: 100%; | 
|---|
|  |  |  | margin-top: 10px; | 
|---|
|  |  |  | z-index: -1; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 入库 */ | 
|---|
|  |  |  | .machine-pakin { | 
|---|
|  |  |  | background-image: url("../images/Crane_store.png"); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 出库 */ | 
|---|
|  |  |  | .machine-pakout { | 
|---|
|  |  |  | background-image: url("../images/Crane_retrieve.png"); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 库到库 */ | 
|---|
|  |  |  | .machine-stock-move { | 
|---|
|  |  |  | background-image: url("../images/Crane_loctoloc.png"); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 站到站 */ | 
|---|
|  |  |  | .machine-site-move { | 
|---|
|  |  |  | background-image: url("../images/Crane_stntostn.png"); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* p to p */ | 
|---|
|  |  |  | .machine-p-move { | 
|---|
|  |  |  | background-image: url("../images/Crane_hptoohp.png"); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 异常 */ | 
|---|
|  |  |  | .machine-error { | 
|---|
|  |  |  | background-image: url("../images/Crane_error.png"); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 自动 */ | 
|---|
|  |  |  | .machine-auto { | 
|---|
|  |  |  | background-image: url("../images/Crane_auto.png"); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 非自动/收到 */ | 
|---|
|  |  |  | .machine-un-auto { | 
|---|
|  |  |  | background-image: url("../images/Crane_manual.png"); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 输送线相关 */ | 
|---|
|  |  |  | .site:hover { | 
|---|
|  |  |  | opacity: 0.7; | 
|---|
|  |  |  | /* 堆垛机弹窗 */ | 
|---|
|  |  |  | #crnWindow { | 
|---|
|  |  |  | width: 291px; | 
|---|
|  |  |  | height: 365px; | 
|---|
|  |  |  | background-image: url(../images/Popup-yellow.png); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | position: fixed; | 
|---|
|  |  |  | color:white; | 
|---|
|  |  |  | left: 50%; | 
|---|
|  |  |  | top: 50%; | 
|---|
|  |  |  | transform: translate(-50%,-50%); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* 输送设备弹窗 */ | 
|---|
|  |  |  | #siteWindow { | 
|---|
|  |  |  | width: 291px; | 
|---|
|  |  |  | height: 336px; | 
|---|
|  |  |  | background-image: url(../images/Popup-green.png); | 
|---|
|  |  |  | position: fixed; | 
|---|
|  |  |  | color:white; | 
|---|
|  |  |  | left: 50%; | 
|---|
|  |  |  | top: 50%; | 
|---|
|  |  |  | transform: translate(-50%,-50%); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | #siteWindow-head { | 
|---|
|  |  |  | width: 291px; | 
|---|
|  |  |  | height: 55px; | 
|---|
|  |  |  | line-height: 55px; | 
|---|
|  |  |  | margin-left: 25px; | 
|---|
|  |  |  | color: #000000; | 
|---|
|  |  |  | font-weight: 700; | 
|---|
|  |  |  | letter-spacing: 2px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | #siteWindow-head .detailed { | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | #siteWindow-head button { | 
|---|
|  |  |  | width: 25px; | 
|---|
|  |  |  | height: 25px; | 
|---|
|  |  |  | padding: 0px; | 
|---|
|  |  |  | border: none; | 
|---|
|  |  |  | border-radius: 25px; | 
|---|
|  |  |  | background-image: url(../images/siteclose.png); | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | float: right; | 
|---|
|  |  |  | margin-top: 15px; | 
|---|
|  |  |  | margin-right: 50px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | #crnWindow-head { | 
|---|
|  |  |  | width: 291px; | 
|---|
|  |  |  | height: 55px; | 
|---|
|  |  |  | line-height: 55px; | 
|---|
|  |  |  | margin-left: 55px; | 
|---|
|  |  |  | color: #000000; | 
|---|
|  |  |  | font-weight: 700; | 
|---|
|  |  |  | letter-spacing: 2px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | #crnWindow-head .detailed { | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | #crnWindow-head button { | 
|---|
|  |  |  | width: 25px; | 
|---|
|  |  |  | height: 25px; | 
|---|
|  |  |  | padding: 0px; | 
|---|
|  |  |  | border: none; | 
|---|
|  |  |  | border-radius: 25px; | 
|---|
|  |  |  | background-image: url(../images/siteclose.png); | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | float: right; | 
|---|
|  |  |  | margin-top: 15px; | 
|---|
|  |  |  | margin-right: 80px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /* 弹窗 */ | 
|---|
|  |  |  | form .form-item { | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | padding-left: 10px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | form .form-item-label { | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | width: 90px; | 
|---|
|  |  |  | font-size: 10px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | form .form-item-input { | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | width: 180px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  | form .form-item-input input { | 
|---|
|  |  |  | background-color: rgba(255,255,255,.3); | 
|---|
|  |  |  | color: #FFFFFF; | 
|---|
|  |  |  | padding: 0; | 
|---|
|  |  |  | border: none; | 
|---|
|  |  |  | border-radius: 2px; | 
|---|
|  |  |  | height: 18px; | 
|---|
|  |  |  | padding-left: 10px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | /* checkbox */ | 
|---|
|  |  |  | form .form-item-checkbox { | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | padding-left: 10px; | 
|---|
|  |  |  | width: 20%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | form .form-item-label-checkbox { | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | width: auto; | 
|---|
|  |  |  | font-size: 14px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | form .form-item-input-checkbox { | 
|---|
|  |  |  | display: inline-block; | 
|---|
|  |  |  | width: auto; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | } | 
|---|