| | |
| | | // 整体内边距 |
| | | $layoutPadding: 12px; |
| | | // 上边固定高 |
| | | $topBlockHeight: 100px; |
| | | $topBlockHeight: 90px; |
| | | // 左侧头部数据高度 |
| | | $leftHeaderHeight: 8%; |
| | | // 左侧公共右边距 |
| | |
| | | // 右侧布局块高度 |
| | | $rightBlockHeight: calc(100vh - 120px); |
| | | // 左下上边距 |
| | | $leftBottomMarginTop: 40px; |
| | | $leftBottomMarginTop: 30px; |
| | | // 左下左侧区域宽 |
| | | $leftBottomLeftWidth: 37%; |
| | | // 左下右侧区域宽 |
| | |
| | | background-image: url("/cockpit-bg.jpg"); |
| | | background-position-x: center; |
| | | background-repeat: no-repeat; |
| | | background-position: center center; |
| | | background-attachment: fixed; |
| | | background-size: cover; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | |
| | | width: 100%; |
| | | text-align: center; |
| | | position: absolute; |
| | | top: 10px; |
| | | top: 0px; |
| | | font-size: 32px; |
| | | color: #01f5fe; |
| | | font-weight: 700; |
| | |
| | | .left-bottom-right-block { |
| | | width: $leftBottomRightWidth; |
| | | height: 100%; |
| | | padding-right:20px; |
| | | padding-right: 20px; |
| | | .right-bottom-top-block { |
| | | height: 60%; |
| | | } |
| | |
| | | borderWidth: 5, |
| | | borderRadius: 4, |
| | | formatter: function (params) { |
| | | return `{a|${params.name}} {b|${params.value + "%"}}`; |
| | | let label = |
| | | params.name.length > 5 |
| | | ? `${params.name.slice(0, 4)}...` |
| | | : params.name; |
| | | return `{a|${label}} {b|${params.value + "%"}}`; |
| | | }, |
| | | rich: { |
| | | a: { |
| | |
| | | labelLine: { |
| | | show: true, |
| | | length: 4, |
| | | length2: 80, |
| | | length2: 70, |
| | | lineStyle: { |
| | | color: "#dcb018", |
| | | }, |
| | |
| | | <style scoped lang="scss"> |
| | | .bar-chart { |
| | | width: 100%; |
| | | height: calc(100% - 20px); |
| | | height: calc(100% - 10px); |
| | | padding: 20px 0 0; |
| | | |
| | | .bar-contents { |