indicatorView.less 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. .indicator-container {
  2. height: 100%;
  3. width: 100%;
  4. .indicator-body {
  5. width: 100%;
  6. height: 100%;
  7. overflow: auto;
  8. flex-flow: row wrap;
  9. // justify-content: center;
  10. align-items: center;
  11. align-content: center;
  12. margin: 0 auto;
  13. .indicator-box {
  14. float: left;
  15. display: table;
  16. border: 1px solid #ececec;
  17. padding: 8px;
  18. margin: 4px;
  19. .row {
  20. display: table-row;
  21. overflow: hidden;
  22. .cell {
  23. display: table-cell;
  24. vertical-align: middle;
  25. .over-wrapper {
  26. overflow: hidden;
  27. white-space: nowrap;
  28. text-overflow: ellipsis;
  29. }
  30. &.c-name {
  31. font-size: 18px;
  32. }
  33. &.c-key {
  34. font-size: 12px;
  35. }
  36. &.c-value {
  37. font-size: 28px;
  38. line-height: 28px;
  39. font-weight: bold;
  40. text-align: center;
  41. color: rgb(33, 83, 212);
  42. }
  43. &.c-extra {
  44. .over-wrapper {
  45. display: table;
  46. table-layout: fixed;
  47. >span {
  48. display: table-cell;
  49. font-size: 12px;
  50. &.til {
  51. white-space: nowrap;
  52. overflow: hidden;
  53. text-overflow: ellipsis;
  54. }
  55. &.val {
  56. text-align: right;
  57. white-space: nowrap;
  58. font-size: 14px;
  59. overflow: hidden;
  60. text-overflow: ellipsis;
  61. }
  62. }
  63. }
  64. }
  65. }
  66. }
  67. .indicator-name {
  68. margin-bottom: 12px;
  69. }
  70. .indicator-value {
  71. padding: 0 36px;
  72. }
  73. }
  74. }
  75. }