home.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179
  1. html, body {
  2. font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "黑体", Arial, sans-serif;
  3. height: 100%;
  4. background-color: #1C1C20;
  5. }
  6. ul {
  7. list-style: none;
  8. margin: 0;
  9. padding: 0;
  10. }
  11. .flex-container {
  12. display: flex;
  13. flex-direction: column;
  14. flex-wrap: wrap;
  15. height: 100%;
  16. width: 100%;
  17. section {
  18. box-sizing: border-box;
  19. padding: 3px 2px;
  20. color: #eeeeee;
  21. div.wrapper {
  22. width: 100%;
  23. height: 100%;
  24. background-color: #23262d;
  25. #chartA, #chartB, #chartC {
  26. flex: 1;
  27. //border: 1px solid orange;
  28. }
  29. }
  30. ;
  31. }
  32. }
  33. .secA {
  34. width: 30%;
  35. height: 33.3%;
  36. }
  37. .secB {
  38. width: 30%;
  39. height: 33.3%;
  40. }
  41. .secC {
  42. width: 30%;
  43. height: 33.3%;
  44. }
  45. .secD {
  46. width: 70%;
  47. height: 75%;
  48. .triggerMap{
  49. display: block;
  50. color: #ccc;
  51. font-size: 14px;
  52. top: 11px;
  53. position: absolute;
  54. right: 9px;
  55. padding: 3px;
  56. border: 1px solid;
  57. cursor: pointer;
  58. }
  59. .mapGif{
  60. overflow: hidden;
  61. }
  62. }
  63. .secE {
  64. width: 70%;
  65. height: 25%;
  66. }
  67. .title {
  68. font-weight: 600;
  69. font-size: large;
  70. padding: 8px;
  71. color: #ffe;
  72. word-spacing: 8px;
  73. letter-spacing: 2px;
  74. li {
  75. margin-right: 5px;
  76. color: #4a6893;
  77. cursor: pointer;
  78. }
  79. li.active {
  80. color: #fff;
  81. }
  82. }
  83. #headline {
  84. padding: 3px;
  85. background-color: #0055a6;
  86. color: #ffffff;
  87. text-align: center;
  88. font-weight: bolder;
  89. font-size: x-large;
  90. }
  91. .example {
  92. width: 100%;
  93. margin: 0 auto;
  94. height: 100%;
  95. .frame {
  96. margin: 0 auto;
  97. width: 100%;
  98. height: 100%;
  99. overflow: hidden;
  100. text-shadow: none;
  101. ul {
  102. list-style: none;
  103. margin: 0;
  104. padding: 0;
  105. height: 100%;
  106. color: #ffffff;
  107. li {
  108. float: left;
  109. width: 180px;
  110. height: 100%;
  111. margin: 0 1px 0 0;
  112. background: #eee;
  113. text-align: center;
  114. cursor: pointer;
  115. justify-content: center;
  116. display: flex;
  117. flex-direction: column;
  118. flex-wrap: wrap;
  119. &:nth-child(odd) {
  120. background-color: #23262d;
  121. }
  122. &:nth-child(even) {
  123. background-color: #3f4656;
  124. }
  125. &.active {
  126. color: #fff;
  127. border: 1px solid cyan;
  128. background-color: #3A577f;
  129. }
  130. div.cellName {
  131. height: 50px;
  132. line-height: 50px;
  133. width: 100%;
  134. font-size: larger;
  135. font-weight: bold;
  136. span {
  137. color: red;
  138. }
  139. }
  140. dl {
  141. height: 75px;
  142. -webkit-margin-before: 0;
  143. -webkit-margin-after: 0;
  144. dt, dd {
  145. padding-top: 3px;
  146. padding-bottom: 3px;
  147. }
  148. dt {
  149. text-align: right;
  150. padding-right: 3px;
  151. }
  152. dd {
  153. text-align: left;
  154. padding-left: 3px;
  155. }
  156. }
  157. }
  158. }
  159. }
  160. }