order_v2.css 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5. html, body {
  6. width: 100%;
  7. height: 100%;
  8. overflow-y: hidden;
  9. }
  10. body {
  11. background: #121e39;
  12. }
  13. .nav {
  14. width: 100%;
  15. display: flex;
  16. justify-content: center;
  17. padding-top: 5px;
  18. }
  19. .nav .logo-img {
  20. width: 308px;
  21. height: 57px;
  22. position: absolute;
  23. left: 50px;
  24. }
  25. .nav-title {
  26. position: absolute;
  27. text-align: center;
  28. color: white;
  29. font-size: 36px;
  30. }
  31. .org-name {
  32. position: absolute;
  33. top: 65px;
  34. text-align: center;
  35. color: white;
  36. font-size: 24px;
  37. }
  38. .title-line {
  39. width: 100%;
  40. overflow: hidden;
  41. position: absolute;
  42. top: 70px;
  43. }
  44. .date-display {
  45. position: absolute;
  46. right: 50px;
  47. top: 40px;
  48. font-size: 20px;
  49. color: #ffffff;
  50. }
  51. .main {
  52. position: absolute;
  53. display: flex;
  54. flex-direction: column;
  55. top: 130px;
  56. bottom: 0;
  57. width: 100%;
  58. }
  59. .task-order {
  60. display: flex;
  61. /* flex: 1; */
  62. overflow: hidden;
  63. height: 54.5%;
  64. }
  65. .order-analysis {
  66. display: flex;
  67. flex: 1;
  68. }
  69. .chart-container {
  70. flex: 1;
  71. background: rgba(23,49,96,0.7);
  72. margin: 0 15px 15px;
  73. border-radius: 5px;
  74. /* height: 96.5%; */
  75. overflow: hidden;
  76. }
  77. .chart-container-left {
  78. margin: 0 7px 15px 15px;
  79. }
  80. .chart-container-right {
  81. margin: 0 15px 15px 7px;
  82. }
  83. .chart-title-img {
  84. background: #0a3849;
  85. height: 60px;
  86. display: flex;
  87. justify-content: space-between;
  88. align-items: center;
  89. border-radius: 5px 5px 0 0;
  90. }
  91. .chart-title-img img:first-child {
  92. width: 40px;
  93. height: 40px;
  94. }
  95. .icon-title {
  96. color: #fefffe;
  97. flex: 2;
  98. display: inline-block;
  99. line-height: 35px;
  100. padding-left: 5px;
  101. font-size: 36px;
  102. }
  103. .icon-img {
  104. float: right;
  105. padding-right: 15px;
  106. }
  107. .projects-name {
  108. display: flex;
  109. justify-content: center;
  110. flex-direction:column;
  111. height: 92%;
  112. }
  113. .orders-organization {
  114. text-align: center;
  115. margin-top: 25px;
  116. }
  117. .orders-organization .organization-title {
  118. text-align: center;
  119. padding: 0 30px;
  120. height: 30px;
  121. line-height: 30px;
  122. color: #fff;
  123. font-size: 16px;
  124. display: inline-block;
  125. border: 1px solid #32fffa;
  126. border-radius: 5px;
  127. background: #16456b;
  128. }
  129. /*表格*/
  130. .table {
  131. color: #ffffff;
  132. width: 100%;
  133. padding: 10px;
  134. /*height: 100%;*/
  135. }
  136. th,td {
  137. text-align: center;
  138. font-size: 24px;
  139. height: 38px;
  140. }
  141. .table thead tr{
  142. background: #157490;
  143. }
  144. .table tbody tr:nth-child(odd){
  145. background: rgba(25,177,201,0.2);
  146. }
  147. .table tbody tr:nth-child(even){
  148. background: rgba(10,56,73,0.58);
  149. }
  150. .table-task-name, .table-project-name {
  151. overflow: hidden;
  152. text-overflow: ellipsis;
  153. white-space: nowrap;
  154. }
  155. .table-task-name {
  156. max-width: 90px;
  157. }
  158. .table-project-name {
  159. max-width: 310px;
  160. }