common.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. .u-relative,
  2. .u-rela {
  3. position: relative;
  4. }
  5. .u-absolute,
  6. .u-abso {
  7. position: absolute;
  8. }
  9. // nvue不能用标签命名样式,不能放在微信组件中,否则微信开发工具会报警告,无法使用标签名当做选择器
  10. /* #ifndef APP-NVUE */
  11. image {
  12. display: inline-block;
  13. }
  14. // 在weex,也即nvue中,所有元素默认为border-box
  15. view,
  16. text {
  17. box-sizing: border-box;
  18. }
  19. /* #endif */
  20. .u-font-xs {
  21. font-size: 22rpx;
  22. }
  23. .u-font-sm {
  24. font-size: 26rpx;
  25. }
  26. .u-font-md {
  27. font-size: 28rpx;
  28. }
  29. .u-font-lg {
  30. font-size: 30rpx;
  31. }
  32. .u-font-xl {
  33. font-size: 34rpx;
  34. }
  35. .u-flex {
  36. /* #ifndef APP-NVUE */
  37. display: flex;
  38. /* #endif */
  39. flex-direction: row;
  40. align-items: center;
  41. }
  42. .u-flex-wrap {
  43. flex-wrap: wrap;
  44. }
  45. .u-flex-nowrap {
  46. flex-wrap: nowrap;
  47. }
  48. .u-col-center {
  49. align-items: center;
  50. }
  51. .u-col-top {
  52. align-items: flex-start;
  53. }
  54. .u-col-bottom {
  55. align-items: flex-end;
  56. }
  57. .u-row-center {
  58. justify-content: center;
  59. }
  60. .u-row-left {
  61. justify-content: flex-start;
  62. }
  63. .u-row-right {
  64. justify-content: flex-end;
  65. }
  66. .u-row-between {
  67. justify-content: space-between;
  68. }
  69. .u-row-around {
  70. justify-content: space-around;
  71. }
  72. .u-text-left {
  73. text-align: left;
  74. }
  75. .u-text-center {
  76. text-align: center;
  77. }
  78. .u-text-right {
  79. text-align: right;
  80. }
  81. .u-flex-col {
  82. /* #ifndef APP-NVUE */
  83. display: flex;
  84. /* #endif */
  85. flex-direction: column;
  86. }
  87. // 定义flex等分
  88. @for $i from 0 through 12 {
  89. .u-flex-#{$i} {
  90. flex: $i;
  91. }
  92. }
  93. // 定义字体(px)单位,小于20都为px单位字体
  94. @for $i from 9 to 20 {
  95. .u-font-#{$i} {
  96. font-size: $i + px;
  97. }
  98. }
  99. // 定义字体(rpx)单位,大于或等于20的都为rpx单位字体
  100. @for $i from 20 through 40 {
  101. .u-font-#{$i} {
  102. font-size: $i + rpx;
  103. }
  104. }
  105. // 定义内外边距,历遍1-80
  106. @for $i from 0 through 80 {
  107. // 只要双数和能被5除尽的数
  108. @if $i % 2 == 0 or $i % 5 == 0 {
  109. // 得出:u-margin-30或者u-m-30
  110. .u-margin-#{$i}, .u-m-#{$i} {
  111. margin: $i + rpx!important;
  112. }
  113. // 得出:u-padding-30或者u-p-30
  114. .u-padding-#{$i}, .u-p-#{$i} {
  115. padding: $i + rpx!important;
  116. }
  117. @each $short, $long in l left, t top, r right, b bottom {
  118. // 缩写版,结果如: u-m-l-30
  119. // 定义外边距
  120. .u-m-#{$short}-#{$i} {
  121. margin-#{$long}: $i + rpx!important;
  122. }
  123. // 定义内边距
  124. .u-p-#{$short}-#{$i} {
  125. padding-#{$long}: $i + rpx!important;
  126. }
  127. // 完整版,结果如:u-margin-left-30
  128. // 定义外边距
  129. .u-margin-#{$long}-#{$i} {
  130. margin-#{$long}: $i + rpx!important;
  131. }
  132. // 定义内边距
  133. .u-padding-#{$long}-#{$i} {
  134. padding-#{$long}: $i + rpx!important;
  135. }
  136. }
  137. }
  138. }
  139. // 重置nvue的默认关于flex的样式
  140. .u-reset-nvue {
  141. flex-direction: row;
  142. align-items: center;
  143. }