public.scss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166
  1. @use 'sass:math';
  2. // * {
  3. // box-sizing: border-box;
  4. // }
  5. .d-i-b {
  6. display: inline-block;
  7. }
  8. .d-flex {
  9. display: flex;
  10. }
  11. .f-w-w {
  12. flex-wrap: wrap;
  13. }
  14. .a-c {
  15. align-items: center;
  16. }
  17. .j-c {
  18. justify-content: center;
  19. }
  20. .j-ed {
  21. justify-content: flex-end;
  22. }
  23. .j-sa {
  24. justify-content: space-around;
  25. }
  26. .a-ed {
  27. align-items: flex-end;
  28. }
  29. .flex-cln {
  30. flex-direction: column;
  31. }
  32. .j-sb {
  33. justify-content: space-between;
  34. }
  35. .flex-w {
  36. flex-wrap: wrap;
  37. }
  38. .flex-at {
  39. flex: auto;
  40. }
  41. .flex1 {
  42. flex: 1;
  43. }
  44. .flex2 {
  45. flex: 2;
  46. }
  47. .p-rtv {
  48. position: relative;
  49. }
  50. // 斜体字
  51. .f-s-i {
  52. font-style: italic;
  53. }
  54. // 文字靠右
  55. .text-right {
  56. text-align: right;
  57. }
  58. .word-all {
  59. word-break: break-all;
  60. }
  61. .ov-hd {
  62. overflow: hidden;
  63. }
  64. .text-center {
  65. text-align: center;
  66. }
  67. // 文字中间斜杠画去
  68. .text-through {
  69. text-decoration: line-through;
  70. }
  71. // 文字换行
  72. .text-wrap {
  73. white-space: normal;
  74. }
  75. .mg-at {
  76. margin: auto;
  77. }
  78. .b-s-b-b {
  79. box-sizing: border-box;
  80. }
  81. .over-auto {
  82. overflow-y: auto;
  83. }
  84. $colors: (
  85. 000: #000,
  86. 333: #333,
  87. 666: #666,
  88. 999: #999,
  89. fff: #fff,
  90. ccc: #ccc,
  91. eee: #eee,
  92. ddd: #ddd,
  93. fa: #fafafa,
  94. gl: #affec2,
  95. // 主题色
  96. primary: #37a954,
  97. light-black: #4d4d4d,
  98. // 成功
  99. success: #67c23a,
  100. // 警告
  101. warning: #e6a23c,
  102. // 失败
  103. danger: #f56c6c,
  104. // 钱红色
  105. money-red: #f4403b,
  106. // 会员绿
  107. member-green: #41c06d,
  108. res-0: #f6881c,
  109. );
  110. @each $color, $value in $colors {
  111. .c-#{$color} {
  112. color: $value;
  113. }
  114. }
  115. @each $color, $value in $colors {
  116. .bg-#{$color} {
  117. background-color: $value;
  118. }
  119. }
  120. :root {
  121. --primary: #37a954;
  122. // 橙色
  123. --orange: #ffa500;
  124. }
  125. // 首行缩进2个字符
  126. .text-indent-2 {
  127. text-indent: 2em;
  128. }
  129. .text-desc {
  130. padding: 12rpx;
  131. // 偶数行背景色
  132. &:nth-child(2n) {
  133. background-color: #fafafa;
  134. }
  135. }
  136. .btn-hover {
  137. background-color: #f5f5f5;
  138. }
  139. .tx-ov {
  140. text-overflow: ellipsis;
  141. }
  142. .w-s-no {
  143. white-space: nowrap;
  144. }
  145. .radius-10 {
  146. border-radius: 10rpx;
  147. }
  148. .home_icon {
  149. width: 40rpx;
  150. height: 40rpx;
  151. }
  152. .startline-title {
  153. line-height: 1;
  154. padding-left: 30rpx;
  155. font-size: 32rpx;
  156. color: #333;
  157. font-weight: 600;
  158. border-left: 4rpx solid $u-primary;
  159. }
  160. .small-icon {
  161. width: 38rpx;
  162. height: 38rpx;
  163. }