| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* ------------------------------------ 头部 ------------------------------------*/ |
|---|
| | | header { |
|---|
| | | height: 20%; |
|---|
| | | opacity: 0.8; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | /* 分割线 */ |
|---|
| | | .header-hr { |
|---|
| | | border-radius: 5px; |
|---|
| | | border: 1px solid #777; |
|---|
| | | width: 80%; |
|---|
| | | position: absolute; |
|---|
| | | bottom: 0; |
|---|
| | | } |
|---|
| | | /* 系统运行状态 */ |
|---|
| | | .system-state { |
|---|
| | | float: left; |
|---|
| | | margin-left: 30px; |
|---|
| | | margin-top: 30px; |
|---|
| | | text-align: center; |
|---|
| | | color: #2d6aff; |
|---|
| | | } |
|---|
| | | .system-icon { |
|---|
| | | width: 100px; |
|---|
| | | height: 100px; |
|---|
| | | background-image: url("../image/stop48.png"); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size:100% 100%; |
|---|
| | | background-position: top center; |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | .system-state span { |
|---|
| | | display: inline-block; |
|---|
| | | padding-top: 10px; |
|---|
| | | font-weight: bold; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* 状态显示 */ |
|---|
| | | .data-window { |
|---|
| | | padding-top: 20px; |
|---|
| | | float: left; |
|---|
| | | width: 70%; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | .data-window h1 { |
|---|
| | | font-size: 3em; |
|---|
| | | margin: 0; |
|---|
| | | letter-spacing: 1px; |
|---|
| | | font-weight: inherit; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* 颜色提示 */ |
|---|
| | | .tips { |
|---|
| | | position: absolute; |
|---|
| | | bottom: 5%; |
|---|
| | | left: 10%; |
|---|
| | | } |
|---|
| | | .tips-item { |
|---|
| | | margin-bottom: 0; |
|---|
| | | font-size: 0; |
|---|
| | | text-align: left; |
|---|
| | | } |
|---|
| | | .tips-item label { |
|---|
| | | display: inline-block; |
|---|
| | | width: 130px; |
|---|
| | | text-align: right; |
|---|
| | | font-size: xx-small; |
|---|
| | | } |
|---|
| | | .item-group { |
|---|
| | | display: inline-block; |
|---|
| | | } |
|---|
| | | .item-group span { |
|---|
| | | font-size: xx-small; |
|---|
| | | padding: 0 10px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* ------------------------------------ 主体 ------------------------------------*/ |
|---|
| | | main { |
|---|
| | |
|---|
| | | <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script> |
|---|
| | | <script type="text/javascript" src="../static/js/layer/layer.js"></script> |
|---|
| | | <style> |
|---|
| | | header { |
|---|
| | | height: 20%; |
|---|
| | | opacity: 0.8; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | /* 分割线 */ |
|---|
| | | .header-hr { |
|---|
| | | border-radius: 5px; |
|---|
| | | border: 1px solid #777; |
|---|
| | | width: 80%; |
|---|
| | | position: absolute; |
|---|
| | | bottom: 0; |
|---|
| | | } |
|---|
| | | /* 系统运行状态 */ |
|---|
| | | .system-state { |
|---|
| | | float: left; |
|---|
| | | margin-left: 30px; |
|---|
| | | margin-top: 30px; |
|---|
| | | text-align: center; |
|---|
| | | color: #2d6aff; |
|---|
| | | } |
|---|
| | | .system-icon { |
|---|
| | | width: 100px; |
|---|
| | | height: 100px; |
|---|
| | | background-image: url("../static/image/stop48.png"); |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | background-size:100% 100%; |
|---|
| | | background-position: top center; |
|---|
| | | cursor: pointer; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* 状态显示 */ |
|---|
| | | .data-window { |
|---|
| | | float: left; |
|---|
| | | width: 70%; |
|---|
| | | text-align: center; |
|---|
| | | } |
|---|
| | | .data-window h1 { |
|---|
| | | font-size: 3em; |
|---|
| | | margin: 0; |
|---|
| | | letter-spacing: 1px; |
|---|
| | | font-weight: inherit; |
|---|
| | | } |
|---|
| | | |
|---|
| | | /* 颜色提示 */ |
|---|
| | | .tips { |
|---|
| | | position: absolute; |
|---|
| | | bottom: 5%; |
|---|
| | | left: 10%; |
|---|
| | | } |
|---|
| | | .tips-item { |
|---|
| | | margin-bottom: 0; |
|---|
| | | font-size: 0; |
|---|
| | | text-align: left; |
|---|
| | | } |
|---|
| | | .tips-item label { |
|---|
| | | display: inline-block; |
|---|
| | | width: 130px; |
|---|
| | | text-align: right; |
|---|
| | | font-size: xx-small; |
|---|
| | | } |
|---|
| | | .item-group { |
|---|
| | | display: inline-block; |
|---|
| | | } |
|---|
| | | .item-group span { |
|---|
| | | font-size: xx-small; |
|---|
| | | padding: 0 10px; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body> |
|---|
