colorui.css 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142
  1. body {
  2. background-color: #f1f1f1;
  3. font-size: 28upx;
  4. color: #333333;
  5. font-family: Helvetica Neue, Helvetica, sans-serif;
  6. }
  7. view,
  8. scroll-view,
  9. swiper,
  10. button,
  11. input,
  12. textarea,
  13. label,
  14. navigator,
  15. image {
  16. box-sizing: border-box;
  17. }
  18. .round {
  19. border-radius: 5000upx;
  20. }
  21. .radius {
  22. border-radius: 6upx;
  23. }
  24. /* ==================
  25. 布局
  26. ==================== */
  27. /* -- flex弹性布局 -- */
  28. .flex {
  29. display: flex;
  30. }
  31. .basis-xs {
  32. flex-basis: 20%;
  33. }
  34. .basis-sm {
  35. flex-basis: 40%;
  36. }
  37. .basis-df {
  38. flex-basis: 50%;
  39. }
  40. .basis-lg {
  41. flex-basis: 60%;
  42. }
  43. .basis-xl {
  44. flex-basis: 80%;
  45. }
  46. .flex-sub {
  47. flex: 1;
  48. }
  49. .flex-twice {
  50. flex: 2;
  51. }
  52. .flex-treble {
  53. flex: 3;
  54. }
  55. .flex-direction {
  56. flex-direction: column;
  57. }
  58. .flex-wrap {
  59. flex-wrap: wrap;
  60. }
  61. .align-start {
  62. align-items: flex-start;
  63. }
  64. .align-end {
  65. align-items: flex-end;
  66. }
  67. .align-center {
  68. align-items: center;
  69. }
  70. .align-stretch {
  71. align-items: stretch;
  72. }
  73. .self-start {
  74. align-self: flex-start;
  75. }
  76. .self-center {
  77. align-self: flex-center;
  78. }
  79. .self-end {
  80. align-self: flex-end;
  81. }
  82. .self-stretch {
  83. align-self: stretch;
  84. }
  85. .align-stretch {
  86. align-items: stretch;
  87. }
  88. .justify-start {
  89. justify-content: flex-start;
  90. }
  91. .justify-end {
  92. justify-content: flex-end;
  93. }
  94. .justify-center {
  95. justify-content: center;
  96. }
  97. .justify-between {
  98. justify-content: space-between;
  99. }
  100. .justify-around {
  101. justify-content: space-around;
  102. }