.outter-controller{ position:fixed; right:-50px; top:50%; height:140px; width:50px; border-radius:10px 0 0 10px; margin-top:-70px; padding:13px 0; background: -webkit-linear-gradient(#01417f,#021e46); background: -o-linear-gradient(#01417f,#021e46); background: -moz-linear-gradient(#01417f,#021e46); background: linear-gradient(#01417f,#021e46); display:flex; flex-direction:column; justify-content:space-around; align-items:center; cursor:pointer; transition: right 0.5s; -moz-transition: right 0.5s;; /* Firefox 4 */ -webkit-transition: right 0.5s;; /* Safari 和 Chrome */ -o-transition: right 0.5s;; /* Opera */ } .tit{ position:absolute; left:-20px; width:20px; height:100%; top:0; } .extra-icon img{ width:35px; } .extra-container{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.3); overflow: hidden; z-index: 999; display: none; } #lightcontroller,#foodLinecontroller{ position: absolute; width: 1200px; height: 850px; left: 50%; top: 70px; background-color: #021429; border-radius: 10px; margin-left: -600px; box-shadow: 0px -10px 5px 0px rgba(255,255,255,0.1), -10px 0px 5px 0px rgba(255,255,255,0.1), 10px 0px 10px 0px rgba(255,255,255,0.1), 0px 10px 10px 0px rgba(255,255,255,0.1); } .open-box-head { height: 50px; line-height: 50px; width: 100%; text-align: center; position: relative; color: #ccf5f9; font-size: 22px; letter-spacing: 0.1em; } .open-box-head:after { content: ''; position: absolute; bottom: 0px; left: 5%; height: 2px; width: 90%; background: linear-gradient(to right, rgba(11,82,224,0), #0b52e0, rgba(11,82,224,0)); } .open-box-body{ display:flex; width:100%; height:calc(100% - 50px) } .lightbuild-choose,.foodLinebuild-choose { width: 240px; position: relative; display: flex; flex-direction: column; align-items: start; justify-content: flex-start; color: #fff; padding-left: 30px; height: 100%; border-right: 2px solid #335bcc; } .areabuild-name.active { color: #335bcc; } .areabuild-name { font-size: 22px; height: 50px; line-height: 50px; cursor: pointer; width: 100%; } .light-container,.foodLine-container{ width:calc(100% - 240px); height:100%; } .container-head-info{ min-width:300px; margin-left:20px; margin-top:10px; border-radius:15px 0 0 15px; padding-left:20px; background:linear-gradient(to right, rgba(255,2,2,0.8), rgba(255,161,161,0.3)); color:#fff; height:30px; line-height:30px; } .light-list,.foodLine-list{ width:100%; display:none; flex-wrap:wrap; justify-content:space-between; padding:0 20px 20px; } .light-list.active,.foodLine-list.active{ display:flex; } .light-box,.foodLine-box{ width:45%; height:420px; margin-top:10px; } .light-box{ height:220px; } /* .light-box{ height:310px; } */ .light-head,.foodLine-head{ width:100%; height:30px; } .light-name,.foodLine-name{ height: 100%; width: 87px; font-size: 1em; display: flex; align-items: center; justify-content: center; color:#fff; position: relative; background: -webkit-linear-gradient(#01417f,#021e46); background: -o-linear-gradient(#01417f,#021e46); background: -moz-linear-gradient(#01417f,#021e46); background: linear-gradient(#01417f,#021e46); } .light-name:before,.foodLine-name:before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 5px solid #010a19; border-right: 5px solid transparent; } .light-name:after,.foodLine-name:after { content: ''; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 5px solid #010a19; border-left: 5px solid transparent; } .light-content,.foodLine-content{ width:100%; height:calc(100% - 30px); background: #021e46; border-radius:0 10px 10px 10px; padding:10px; } .relation-romms{ width:100%; font-size:14px; color:#fff; margin-bottom:10px; } .foodLineStatus{ color:#fff; font-size:14px; margin-bottom:10px; } .auto-mode{ color:#2196f3; margin-right:10px; } .handle-mode{ color:#8bc34a; margin-right:10px; } .foodLine-stop{ color:#f44336; margin-right:10px; } .foodLine-run{ color:#4caf50; margin-right:10px; } .foodLine-error{ color:#ff9800; margin-right:10px; } .foodLine-full{ color:#00bcd4 } .foodLine-null{ color:#9e9e9e } .light-awayset,.foodLine-awayset{ font-size:14px; color:#fff; margin-bottom:10px; } .foodLineright-item{ margin-left:30px; } .foodLineright-item>input { width: 60px; text-align: center; height: 20px; border: 1px solid #335bcc; border-radius: 4px; outline: none; background-color: transparent; color: #fff; margin-right:5px; } .timer-table{ width:100%; position:relative; } .clear-btn{ padding:3px 10px; background-color:#607d8b; color:#fff; font-size:14px; right:20px; top:56px; position:absolute; border-radius:5px; cursor:pointer; } .clear-btn:hover{ background-color:#3e5967 } .timer-name{ color:#fff; font-size:14px; } .timer-dataTable td>input{ width: 120px; text-align: center; height: 24px; border: 1px solid #335bcc; border-radius: 4px; outline: none; background-color: transparent; color: #fff; margin:0 10px; } .timer-dataTable tr td { border: 1px solid #0b52e0; height: 30px; line-height: 30px; text-align: center; color:#fff } .timer-dataTable tr td:first-child{ width:30px; } .lightsave-btns,.foodLinesave-btns{ width:100%; display:flex; justify-content:center; margin-top:15px; } .btn-savesert{ padding:3px 10px; background-color:#2196f3; color:#fff; font-size:14px; border-radius:5px; cursor:pointer; } .btn-savesert:hover{ background-color:#1a75bd }