app.wxss 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296
  1. .text-center {
  2. text-align: center;
  3. }
  4. /* 字体大小规范 */
  5. .font-lv1 {
  6. font-size: 36rpx !important;
  7. }
  8. .font-lv2 {
  9. font-size: 32rpx !important;
  10. }
  11. .font-lv3 {
  12. font-size: 28rpx !important;
  13. }
  14. .font-lv4 {
  15. font-size: 24rpx !important;
  16. }
  17. .font-lv5 {
  18. font-size: 20rpx !important;
  19. }
  20. @media (min-width:700px) {
  21. .font-lv1 {
  22. font-size: 30rpx !important;
  23. }
  24. .font-lv2 {
  25. font-size: 26rpx !important;
  26. }
  27. .font-lv3 {
  28. font-size: 22rpx !important;
  29. }
  30. .font-lv4 {
  31. font-size: 18rpx !important;
  32. }
  33. .font-lv5 {
  34. font-size: 14rpx !important;
  35. }
  36. }
  37. /* margin */
  38. .mgt-15rpx {
  39. margin-top: 15rpx;
  40. }
  41. .mgb-15rpx {
  42. margin-bottom: 15rpx;
  43. }
  44. .mgt-30rpx {
  45. margin-top: 30rpx;
  46. }
  47. .mgb-30rpx {
  48. margin-bottom: 30rpx;
  49. }
  50. /* padding */
  51. .pdt-15rpx {
  52. padding-top: 15rpx;
  53. }
  54. .pdb-15rpx {
  55. padding-bottom: 15rpx;
  56. }
  57. .pdt-30rpx {
  58. padding-top: 30rpx;
  59. }
  60. .pdb-30rpx {
  61. padding-bottom: 30rpx;
  62. }
  63. .pdl-30rpx {
  64. padding-left: 30rpx;
  65. }
  66. .plr-30rpx {
  67. padding-right: 30rpx;
  68. }
  69. /* 颜色规范 */
  70. .color-black {
  71. color: #000;
  72. }
  73. .color-semi {
  74. color: #353535;
  75. }
  76. .color-grey {
  77. color: #888;
  78. }
  79. .color-light {
  80. color: #b2b2b2;
  81. }
  82. .color-green {
  83. color: #09bb09;
  84. }
  85. .color-red {
  86. color: #e64340;
  87. }
  88. .color-info, .color-link, .color-active {
  89. color: #00acff;
  90. }
  91. .bd-color {
  92. border-color: #f1f1f1;
  93. }
  94. .bg-color {
  95. background-color: #f1f1f1;
  96. }
  97. .img-responsive {
  98. max-width: 100%;
  99. }
  100. .border-basic {
  101. border: 1px solid #efefef;
  102. }
  103. .radius-basic, .cover {
  104. border-radius: 6rpx;
  105. }
  106. .radius-circle {
  107. border-radius: 100%;
  108. }
  109. .row {
  110. display: flex;
  111. flex-wrap: wrap;
  112. }
  113. .col {
  114. flex-basis: 0;
  115. flex-grow: 1;
  116. max-width: 100%;
  117. }
  118. .col-1 {
  119. flex: 0 0 8.333333%;
  120. max-width: 8.333333%;
  121. }
  122. .col-2 {
  123. flex: 0 0 16.666667%;
  124. max-width: 16.666667%;
  125. }
  126. .col-3 {
  127. flex: 0 0 25%;
  128. max-width: 25%;
  129. }
  130. .col-4 {
  131. flex: 0 0 33.333333%;
  132. max-width: 33.333333%;
  133. }
  134. .col-5 {
  135. flex: 0 0 41.666667%;
  136. max-width: 41.666667%;
  137. }
  138. .col-6 {
  139. flex: 0 0 50%;
  140. max-width: 50%;
  141. }
  142. .col-7 {
  143. flex: 0 0 58.333333%;
  144. max-width: 58.333333%;
  145. }
  146. .col-8 {
  147. flex: 0 0 66.666667%;
  148. max-width: 66.666667%;
  149. }
  150. .col-9 {
  151. flex: 0 0 75%;
  152. max-width: 75%;
  153. }
  154. .col-10 {
  155. flex: 0 0 83.333333%;
  156. max-width: 83.333333%;
  157. }
  158. .col-11 {
  159. flex: 0 0 91.666667%;
  160. max-width: 91.666667%;
  161. }
  162. .col-12 {
  163. flex: 0 0 100%;
  164. max-width: 100%;
  165. }
  166. /**app.wxss**/
  167. .box-shadow {
  168. box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
  169. }
  170. .base-padding {
  171. box-sizing: border-box;
  172. padding: 0rpx 30rpx;
  173. }
  174. .base-margin-bottom {
  175. margin-bottom: 60rpx;
  176. }
  177. .pull-right {
  178. float: right;
  179. }
  180. .text-right {
  181. text-align: right;
  182. }
  183. navigator:hover, navigator:active {
  184. background-color: transparent;
  185. }
  186. .panel-heading {
  187. margin-bottom: 30rpx;
  188. }
  189. /* 显示两行,溢出文字用‘...’替换 */
  190. .ellipsis-1row {
  191. text-overflow: ellipsis;
  192. display: -webkit-box;
  193. -webkit-line-clamp: 1;
  194. -webkit-box-orient: vertical;
  195. overflow: hidden;
  196. }
  197. .ellipsis-2row {
  198. text-overflow: ellipsis;
  199. display: -webkit-box;
  200. -webkit-line-clamp: 2;
  201. -webkit-box-orient: vertical;
  202. overflow: hidden;
  203. }
  204. /* 适配平板 */
  205. @media (min-width:700px) {
  206. .ellipsis-2row {
  207. -webkit-line-clamp: 3;
  208. }
  209. .ellipsis-3row {
  210. -webkit-line-clamp: 4;
  211. }
  212. }
  213. .ellipsis-3row {
  214. text-overflow: ellipsis;
  215. display: -webkit-box;
  216. -webkit-line-clamp: 3;
  217. -webkit-box-orient: vertical;
  218. overflow: hidden;
  219. }
  220. .text-muted {
  221. color: #888;
  222. font-size: 28rpx;
  223. line-height: 170%;
  224. text-align: left;
  225. }
  226. .cover {
  227. border-radius: 6rpx;
  228. }