|  |  |  | 
|---|
|  |  |  | 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%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | bottom: 2.5%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | /*=============== 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; | 
|---|
|  |  |  | 
|---|
|  |  |  | 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-child { | 
|---|
|  |  |  | border-right: 1px solid rgb(194,76,65); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .stock-group .site { | 
|---|
|  |  |  | width: 80px; | 
|---|
|  |  |  | float: left; | 
|---|
|  |  |  | 
|---|
|  |  |  | <!-- 货架 + 堆垛机 + 入库站点 --> | 
|---|
|  |  |  | <div class="main-part"> | 
|---|
|  |  |  | <!-- 第一组 --> | 
|---|
|  |  |  | <div class="lane" style="margin-bottom: 3000px"> | 
|---|
|  |  |  | <div class="lane" style="margin-bottom: 280px"> | 
|---|
|  |  |  | <!-- 货架 --> | 
|---|
|  |  |  | <div class="stock-group"> | 
|---|
|  |  |  | <button class="item">1</button> | 
|---|