common.scss 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239
  1. .d-table {
  2. display: table;
  3. width: 100%;
  4. vertical-align: middle;
  5. text-align: center;
  6. table-layout: fixed;
  7. font-size: 28rpx;
  8. word-break: break-all;
  9. background-color: white;
  10. border-collapse: collapse;
  11. &.primary {
  12. &.dark {
  13. .d-thead {
  14. background-color: #2b85e4;
  15. }
  16. }
  17. &.disabled {
  18. .d-thead {
  19. background-color: #a0cfff;
  20. }
  21. }
  22. &.light {
  23. .d-thead {
  24. background-color: #ecf5ff;
  25. }
  26. }
  27. .d-thead {
  28. background-color: #2979ff;
  29. color: #fff;
  30. }
  31. }
  32. &.success {
  33. &.dark {
  34. .d-thead {
  35. background-color: #18b566;
  36. }
  37. }
  38. &.disabled {
  39. .d-thead {
  40. background-color: #71d5a1;
  41. }
  42. }
  43. &.light {
  44. .d-thead {
  45. background-color: #dbf1e1;
  46. }
  47. }
  48. .d-thead {
  49. background-color: #19be6b;
  50. color: #fff;
  51. }
  52. }
  53. &.warning {
  54. &.dark {
  55. .d-thead {
  56. background-color: #f29100;
  57. }
  58. }
  59. &.disabled {
  60. .d-thead {
  61. background-color: #fcbd71;
  62. }
  63. }
  64. &.light {
  65. .d-thead {
  66. background-color: #fdf6ec;
  67. }
  68. }
  69. .d-thead {
  70. background-color: #ff9900;
  71. color: #fff;
  72. }
  73. }
  74. &.danger {
  75. &.dark {
  76. .d-thead {
  77. background-color: #dd6161;
  78. }
  79. }
  80. &.disabled {
  81. .d-thead {
  82. background-color: #fab6b6;
  83. }
  84. }
  85. &.light {
  86. .d-thead {
  87. background-color: #fef0f0;
  88. }
  89. }
  90. .d-thead {
  91. background-color: #fa3534;
  92. color: #fff;
  93. }
  94. }
  95. &.info {
  96. &.dark {
  97. .d-thead {
  98. background-color: #82848a;
  99. }
  100. }
  101. &.disabled {
  102. .d-thead {
  103. background-color: #c8c9cc;
  104. }
  105. }
  106. &.light {
  107. .d-thead {
  108. background-color: #f4f4f5;
  109. }
  110. }
  111. .d-thead {
  112. background-color: #909399;
  113. color: #fff;
  114. }
  115. }
  116. &.gray {
  117. .d-thead {
  118. background-color: #aaa;
  119. color: #fff;
  120. }
  121. }
  122. &.border-under {
  123. .d-td,
  124. .d-th {
  125. @extend .noBorder;
  126. }
  127. .d-tr {
  128. @extend .border-bottom;
  129. }
  130. .d-table {
  131. .d-tr {
  132. @extend .noBorder;
  133. }
  134. }
  135. }
  136. &.large {
  137. .d-td,
  138. .d-th {
  139. height: 80rpx;
  140. }
  141. }
  142. &.middle {
  143. .d-td,
  144. .d-th {
  145. height: 60rpx;
  146. }
  147. }
  148. .d-td,
  149. .d-th {
  150. @extend .border;
  151. }
  152. .d-table {
  153. height: 100%;
  154. .d-td,
  155. .d-th {
  156. @extend .noBorder;
  157. }
  158. // .d-tr {
  159. // &:first-child {
  160. // .d-td{
  161. // &.border-bottom {
  162. // border-bottom: none;
  163. // }
  164. // &.border-top {
  165. // border-top: none;
  166. // }
  167. // }
  168. // }
  169. // }
  170. }
  171. input.borderInput {
  172. border: 1px solid #ccc;
  173. border-radius: 6rpx;
  174. width: 80%;
  175. height: 80%;
  176. display: inline-flex;
  177. }
  178. }
  179. .d-caption {
  180. display: table-caption;
  181. background-color: inherit;
  182. }
  183. .d-thead {
  184. display: table-header-group;
  185. font-weight: 600;
  186. }
  187. .d-tbody {
  188. display: table-row-group;
  189. }
  190. .d-tfoot {
  191. display: table-footer-group;
  192. }
  193. .d-tr {
  194. display: table-row;
  195. width: 100%;
  196. }
  197. .d-td,
  198. .d-th {
  199. display: table-cell;
  200. vertical-align: middle;
  201. height: 50rpx;
  202. font-size: 28rpx;
  203. }
  204. .d-th {
  205. font-weight: 600;
  206. }
  207. .border-top {
  208. border-top: 1px solid #efefef !important;
  209. }
  210. .border-left {
  211. border-left: 1px solid #efefef !important;
  212. }
  213. .border-bottom {
  214. border-bottom: 1px solid #efefef !important;
  215. }
  216. .border-right {
  217. border-right: 1px solid #efefef !important;
  218. }
  219. .border {
  220. border: 1px solid #efefef;
  221. }
  222. .noBorder {
  223. border: 0;
  224. }
  225. .flex {
  226. display: flex;
  227. align-items: center;
  228. &-wrap {
  229. flex-wrap: wrap;
  230. }
  231. &-nowrap {
  232. flex-wrap: nowrap;
  233. }
  234. &-direction {
  235. flex-direction: column;
  236. }
  237. }