You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

uni.scss 4.3KB

3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. // 上边距
  2. .margin-t5 { margin-top: 5rpx; }
  3. .margin-t10 { margin-top: 10rpx; }
  4. .margin-t15 { margin-top: 15rpx; }
  5. .margin-t20 { margin-top: 20rpx; }
  6. .margin-t25 { margin-top: 25rpx; }
  7. .margin-t30 { margin-top: 30rpx; }
  8. .margin-t40 { margin-top: 40rpx; }
  9. .margin-t60 { margin-top: 60rpx; }
  10. .margin-t80 { margin-top: 80rpx; }
  11. .margin-t100 { margin-top: 100rpx; }
  12. // 下边距
  13. .margin-b5 { margin-bottom: 5rpx; }
  14. .margin-b10 { margin-bottom: 10rpx; }
  15. .margin-b15 { margin-bottom: 15rpx; }
  16. .margin-b20 { margin-bottom: 20rpx; }
  17. .margin-b25 { margin-bottom: 25rpx; }
  18. .margin-b30 { margin-bottom: 30rpx; }
  19. .margin-b40 { margin-bottom: 40rpx; }
  20. .margin-b60 { margin-bottom: 60rpx; }
  21. .margin-b80 { margin-bottom: 80rpx; }
  22. .margin-b100 { margin-bottom: 100rpx; }
  23. // 左边距
  24. .margin-l5 { margin-left: 5rpx; }
  25. .margin-l10 { margin-left: 10rpx; }
  26. .margin-l15 { margin-left: 15rpx; }
  27. .margin-l20 { margin-left: 20rpx; }
  28. .margin-l25 { margin-left: 25rpx; }
  29. .margin-l30 { margin-left: 30rpx; }
  30. .margin-l40 { margin-left: 40rpx; }
  31. .margin-l60 { margin-left: 60rpx; }
  32. // 右边距
  33. .margin-r0 {margin-right: 0;}
  34. .margin-r5 { margin-right: 5rpx; }
  35. .margin-r10 { margin-right: 10rpx; }
  36. .margin-r15 { margin-right: 15rpx; }
  37. .margin-r20 { margin-right: 20rpx; }
  38. .margin-r25 { margin-right: 25rpx; }
  39. .margin-r30 { margin-right: 30rpx; }
  40. .margin-r40 { margin-right: 40rpx; }
  41. .margin-r60 { margin-right: 60rpx; }
  42. // 字体大小
  43. .font-18 {
  44. font-style: normal;
  45. font-size: 18rpx;
  46. font-family: Droid Sans Fallback;
  47. }
  48. .font-20 {
  49. font-style: normal;
  50. font-size: 20rpx;
  51. font-family: Droid Sans Fallback;
  52. }
  53. .font-22 {
  54. font-style: normal;
  55. font-size: 22rpx;
  56. font-family: Droid Sans Fallback;
  57. }
  58. .font-24 {
  59. font-style: normal;
  60. font-size: 24rpx;
  61. font-family: Droid Sans Fallback;
  62. }
  63. .font-26 {
  64. font-style: normal;
  65. font-size: 26rpx;
  66. font-family: Droid Sans Fallback;
  67. }
  68. .font-28 {
  69. font-style: normal;
  70. font-size: 28rpx;
  71. font-family: Droid Sans Fallback;
  72. }
  73. .font-30 {
  74. font-style: normal;
  75. font-size: 30rpx;
  76. font-family: Droid Sans Fallback;
  77. }
  78. .font-32 {
  79. font-style: normal;
  80. font-size: 32rpx;
  81. font-family: Droid Sans Fallback;
  82. }
  83. .font-34 {
  84. font-style: normal;
  85. font-size: 34rpx;
  86. font-family: Droid Sans Fallback;
  87. }
  88. .font-36 {
  89. font-style: normal;
  90. font-size: 36rpx;
  91. font-family: Droid Sans Fallback;
  92. }
  93. .font-38 {
  94. font-style: normal;
  95. font-size: 38rpx;
  96. font-family: Droid Sans Fallback;
  97. }
  98. .font-40 {
  99. font-style: normal;
  100. font-size: 40rpx;
  101. font-family: Droid Sans Fallback;
  102. }
  103. .font-46 {
  104. font-style: normal;
  105. font-size: 46rpx;
  106. font-family: Droid Sans Fallback;
  107. }
  108. .font-50 {
  109. font-style: normal;
  110. font-size: 50rpx;
  111. font-family: Droid Sans Fallback;
  112. }
  113. .font-60 {
  114. font-style: normal;
  115. font-size: 60rpx;
  116. font-family: Droid Sans Fallback;
  117. }
  118. .font-80 {
  119. font-style: normal;
  120. font-size: 80rpx;
  121. font-family: Droid Sans Fallback;
  122. }
  123. // 字体对齐
  124. .text-left { text-align: left; }
  125. .text-center { text-align: center; }
  126. .text-right { text-align: right; }
  127. // color相关
  128. .color-white { color: #FFFFFF; }
  129. .color-red { color: #dc0000; }
  130. .color-green { color: #09BB07; }
  131. .color-Blue{color: #007AFF;}
  132. // 黑色色阶向下
  133. .color-black { color: #000; }
  134. .color-black-3 { color: #333; }
  135. .color-black-6 { color: #666; }
  136. .color-black-9 { color: #999; }
  137. // 字体宽度
  138. .font-weight-400 { font-weight: 400; }
  139. .font-weight-500 { font-weight: bold; }
  140. // 间隔
  141. .spacing-20 {
  142. width: 750rpx;
  143. height: 20rpx;
  144. background-color: #f8f8f8;
  145. }
  146. // 圆角
  147. .radius-10 { border-radius: 10rpx; }
  148. .radius-20 { border-radius: 20rpx; }
  149. .radius-30 { border-radius: 30rpx; }
  150. .radius-circle { border-radius: 50%; }
  151. .radius-height { border-radius: 10000px; }
  152. // 边框
  153. .bottom-up{border-top: solid 1px #000000;}
  154. .bottom-down{border-top: solid 1px #000000;}
  155. // flex相关
  156. .vs-flex-item { flex: 1; }
  157. .vs-space-between { justify-content: space-between; }
  158. .vs-space-around { justify-content: space-around; }
  159. .vs-space-center { justify-content: center; }
  160. .vs-space-end { justify-content: flex-end; }
  161. .vs-row { flex-direction: row; }
  162. .vs-column { flex-direction: column; }
  163. .vs-align-end { align-items: flex-end; }
  164. .vs-align-center { align-items: center; }
  165. .vs-align-start { align-items: flex-start; }
  166. .vs-item-hover { background-color: rgba(0, 0, 0, 0.05); }
  167. .vs-btn-hover { opacity: 0.8; }
  168. .color-base { color: #5064eb; }
  169. .bg-color-base { background-color: #5064eb; }
  170. .bg-color-gray { background-color: #d9d9d9; }
  171. /* uni.scss */