csa.count.css 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
  1. /**
  2. * 创建者:王成
  3. * 创建日期:2022年9月20日
  4. * 描述:占压分析统计结果展示样式
  5. */
  6. /* 母容器样式 */
  7. .jt-csa-count-result-panel {
  8. position: relative;
  9. display: flex;
  10. flex-direction: column;
  11. height: 100%;
  12. }
  13. /* 顶部横向滚动条样式 */
  14. .mui-segmented-control.mui-scroll-wrapper {
  15. margin: 5px !important;
  16. width: calc(100% - 10px);
  17. height: 30px;
  18. }
  19. /* 顶部横向滚动条样式内部滚动 */
  20. .mui-segmented-control.mui-scroll-wrapper .mui-scroll {
  21. height: 100%;
  22. }
  23. /* 如果顶部的选择项只有一个 则直接占满宽度 */
  24. .mui-segmented-control.mui-scroll-wrapper .mui-scroll .jt-control-item {
  25. width: calc(100vw) !important;
  26. }
  27. /* 选择器样式 */
  28. .mui-segmented-control.mui-scroll-wrapper .mui-scroll .mui-control-item {
  29. color: rgb(217, 145, 45) !important;
  30. box-shadow: inset 0px 15px 15px -15px rgb(95, 150, 222),
  31. inset 0px -15px 15px -15px rgb(95, 150, 222);
  32. border: solid 0px rgb(255, 0, 0);
  33. height: 100%;
  34. line-height: 100%;
  35. font-size: 14px;
  36. padding: 8px 15px;
  37. }
  38. /* 选择器选中状态样式 */
  39. .mui-segmented-control.mui-scroll-wrapper .mui-scroll .mui-control-item.mui-active {
  40. color: rgb(255, 255, 255) !important;
  41. background-color: rgb(49, 72, 157) !important;
  42. box-shadow: inset 0px 15px 15px -15px rgb(95, 150, 222),
  43. inset 0px -15px 15px -15px rgb(95, 150, 222);
  44. border: solid 0px rgb(255, 0, 0) !important;
  45. }
  46. /* 主体内容样式 */
  47. .mui-content-padded {
  48. margin: 5px;
  49. margin-top: 0px;
  50. flex: 1;
  51. }
  52. /* 主体内容子容器样式 */
  53. .mui-content-padded .mui-control-content {
  54. border: 1px solid rgba(255, 255, 255, 0.45);
  55. height: 100%;
  56. color: rgb(255, 255, 255);
  57. }
  58. /* 子容器内容样式 */
  59. .mui-control-content .jt-row-content {
  60. height: calc(100% - 30px);
  61. position: relative;
  62. }
  63. /* 内容样式 去掉容器边框 */
  64. .jt-mui-control-content {
  65. border: 0px solid rgba(255, 255, 255, 0) !important;
  66. }
  67. /* 数据内容占据全部高度 */
  68. .jt-mui-control-content .jt-row-content {
  69. height: 100%;
  70. }
  71. /* 内容滚动容器样式 */
  72. .mui-control-content .jt-row-content .mui-scroll-wrapper {
  73. position: relative;
  74. height: 100%;
  75. /* background-color: rgb(67, 96, 200); */
  76. }
  77. /* 标题行及数据行样式 */
  78. .mui-control-content .jt-row-head,
  79. .mui-control-content .jt-row-content .jt-row {
  80. display: flex;
  81. align-items: center;
  82. justify-content: center;
  83. height: 30px;
  84. }
  85. /* 标题行独有样式 */
  86. .mui-control-content .jt-row-head {
  87. background-color: rgb(44, 64, 134);
  88. font-size: 14px;
  89. font-weight: bold;
  90. border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  91. }
  92. /* 标题行及容器行子内容样式 */
  93. .mui-control-content .jt-row-head>span,
  94. .mui-control-content .jt-row-content .jt-row>span {
  95. height: 100%;
  96. display: flex;
  97. align-items: center;
  98. justify-content: center;
  99. }
  100. /* 标题行及数据行第一列样式 */
  101. .mui-control-content .jt-row-head>span:nth-child(1),
  102. .mui-control-content .jt-row-content .jt-row>span:nth-child(1) {
  103. border-right: 1px solid rgba(255, 255, 255, 0.45);
  104. white-space: nowrap;
  105. overflow: hidden;
  106. text-overflow: ellipsis;
  107. }
  108. /* 标题行及数据行第二列样式 */
  109. .mui-control-content .jt-row-head>span:nth-child(2),
  110. .mui-control-content .jt-row-content .jt-row>span:nth-child(2) {
  111. width: 45%;
  112. }
  113. /* 标题行及数据行内容样式 */
  114. .mui-control-content .jt-row-head>span,
  115. .mui-control-content .jt-row-content .jt-row>span {
  116. display: inline-block;
  117. padding: 4px 5px;
  118. width: calc(55% - 1px);
  119. text-align: center;
  120. }
  121. /* 标题行及数据行内容样式点击样式 */
  122. .mui-control-content .jt-row-head>span:active,
  123. .mui-control-content .jt-row-content .jt-row>span:active {
  124. color: rgb(255, 255, 0);
  125. font-weight: bold;
  126. font-size: 14px;
  127. }
  128. /* 数据行独有样式 */
  129. .mui-control-content .jt-row-content .jt-row {
  130. font-size: 13px;
  131. border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  132. }
  133. .mui-popover-bottom .mui-bar {
  134. padding-right: 40px;
  135. }
  136. /* 弹框顶部增加关闭按钮 */
  137. .mui-popover-bottom .mui-bar::after {
  138. font-family: 'iconfont', sans-serif !important;
  139. position: absolute;
  140. content: '\e614';
  141. height: 44px;
  142. line-height: 44px;
  143. width: 20px;
  144. right: 15px;
  145. padding: 0px;
  146. z-index: 10;
  147. color: rgb(255, 255, 255);
  148. font-weight: bold;
  149. font-size: 18px;
  150. }
  151. /* 弹框顶部关闭按钮点击样式 */
  152. .mui-popover-bottom .mui-bar:active::after {
  153. color: rgb(255, 255, 0);
  154. }
  155. /* 案件容器顶部选择项容器样式 */
  156. .jt-segmented-control-item {
  157. padding-top: 0px !important;
  158. padding-bottom: 0px !important;
  159. }
  160. /* 案件容器顶部选择项内容容器样式 */
  161. .jt-segmented-control-item .jt-segmented-control-item-content {
  162. display: flex !important;
  163. flex-direction: row;
  164. align-items: center;
  165. height: 100%;
  166. width: calc(100% - 10px);
  167. }
  168. /* 案件容器顶部选择器数字样式 */
  169. .jt-segmented-control-item .jt-segmented-control-item-content .jt-number {
  170. color: rgb(255, 255, 0);
  171. flex: 1;
  172. text-align: left;
  173. padding: 0px 5px;
  174. }
  175. /* 案件容器顶部选择器加载更多按钮样式 */
  176. .jt-segmented-control-item .jt-segmented-control-item-content .jt-cnt-bar-button {
  177. height: 24px;
  178. background-color: rgba(255, 255, 255, 0);
  179. padding: 0px 10px;
  180. border: solid 1px rgba(236, 182, 98, 0.8);
  181. color: rgb(255, 255, 255);
  182. font-size: 13px !important;
  183. font-weight: bold;
  184. margin: 0px;
  185. }