common.scss 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. @mixin icon-image($size) {
  2. min-height: $size;
  3. min-width: $size;
  4. height: $size;
  5. width: $size;
  6. vertical-align: middle;
  7. }
  8. page {
  9. /* 定义一些主题色及基础样式 */
  10. font-family: PingFang SC, Arial, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  11. font-size: 28rpx;
  12. color: $-color-normal;
  13. padding-bottom: env(safe-area-inset-bottom);
  14. background-color: $-color-body;
  15. }
  16. .bold {
  17. font-weight: bold;
  18. }
  19. /* 定义字体颜色 */
  20. .primary {
  21. color: $-color-primary;
  22. }
  23. .black {
  24. color: $-color-black;
  25. }
  26. .white {
  27. color: $-color-white;
  28. }
  29. .normal {
  30. color: $-color-normal;
  31. }
  32. .lighter {
  33. color: $-color-lighter;
  34. }
  35. .muted {
  36. color: $-color-muted;
  37. }
  38. /* 定义背景颜色 */
  39. .bg-primary {
  40. background-color: $-color-primary;
  41. }
  42. .bg-primary-red {
  43. background-color: $-color-primary-red;
  44. }
  45. .bg-white {
  46. background-color: $-color-white;
  47. }
  48. .bg-body {
  49. background-color: $-color-body;
  50. }
  51. .bg-gray {
  52. background-color: $-color-border;
  53. }
  54. /* 定义字体大小 */
  55. .xxl {
  56. font-size: 36rpx;
  57. }
  58. .xl {
  59. font-size: 34rpx;
  60. }
  61. .lg {
  62. font-size: 32rpx;
  63. }
  64. .md {
  65. font-size: 30rpx;
  66. }
  67. .nr {
  68. font-size: 28rpx;
  69. }
  70. .sm {
  71. font-size: 26rpx;
  72. }
  73. .xs {
  74. font-size: 24rpx;
  75. }
  76. .xxs {
  77. font-size: 22rpx;
  78. }
  79. // 定义内外边距,历遍1-80
  80. @for $i from 0 through 60 {
  81. // 只要双数和能被5除尽的数
  82. @if $i % 2 == 0 or $i % 5 == 0 {
  83. // 如:m-30
  84. .m-#{$i} {
  85. margin: $i + rpx;
  86. }
  87. // 如:p-30
  88. .p-#{$i} {
  89. padding: $i + rpx;
  90. }
  91. @each $short, $long in l left, t top, r right, b bottom {
  92. //结果如: m-l-30
  93. // 定义外边距
  94. .m-#{$short}-#{$i} {
  95. margin-#{$long}: $i + rpx;
  96. }
  97. // 定义内边距
  98. //结果如: p-l-30
  99. .p-#{$short}-#{$i} {
  100. padding-#{$long}: $i + rpx;
  101. }
  102. }
  103. }
  104. }
  105. .inline {
  106. display: inline-block;
  107. }
  108. /* 定义常用的弹性布局 */
  109. .flex {
  110. /* #ifndef APP-NVUE */
  111. display: flex;
  112. /* #endif */
  113. flex-direction: row;
  114. align-items: center;
  115. }
  116. .flex-wrap {
  117. flex-wrap: wrap;
  118. }
  119. .flex-nowrap {
  120. flex-wrap: nowrap;
  121. }
  122. .col-baseline {
  123. align-items: baseline;
  124. }
  125. .col-center {
  126. align-items: center;
  127. }
  128. .col-top {
  129. align-items: flex-start;
  130. }
  131. .col-bottom {
  132. align-items: flex-end;
  133. }
  134. .col-stretch {
  135. align-items:stretch;
  136. }
  137. .row-center {
  138. justify-content: center;
  139. }
  140. .row-left {
  141. justify-content: flex-start;
  142. }
  143. .row-right {
  144. justify-content: flex-end;
  145. }
  146. .row-between {
  147. justify-content: space-between;
  148. }
  149. .row-around {
  150. justify-content: space-around;
  151. }
  152. .text-left {
  153. text-align: left;
  154. }
  155. .text-center {
  156. text-align: center;
  157. }
  158. .text-right {
  159. text-align: right;
  160. }
  161. .flex-col {
  162. /* #ifndef APP-NVUE */
  163. display: flex;
  164. /* #endif */
  165. flex-direction: column;
  166. }
  167. // 定义flex等分
  168. @for $i from 0 through 5 {
  169. .flex-#{$i} {
  170. flex: $i;
  171. }
  172. }
  173. .flex-none {
  174. flex: none;
  175. }
  176. // 定义字体大小,38-60的字体
  177. @for $i from 38 through 60 {
  178. @if $i % 2 == 0 {
  179. .font-size-#{$i} {
  180. font-size: $i + rpx;
  181. }
  182. }
  183. }
  184. /* 超出隐藏 */
  185. /* start--文本行数限制--start */
  186. .line-1 {
  187. overflow: hidden;
  188. white-space: nowrap;
  189. text-overflow: ellipsis;
  190. }
  191. .line-2 {
  192. -webkit-line-clamp: 2;
  193. }
  194. .line-3 {
  195. -webkit-line-clamp: 3;
  196. }
  197. .line-2, .line-3, {
  198. overflow: hidden;
  199. word-break: break-all;
  200. text-overflow: ellipsis;
  201. display: -webkit-box; // 弹性伸缩盒
  202. -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
  203. }
  204. /* 中划线 */
  205. .line-through {
  206. text-decoration: line-through;
  207. }
  208. /* br60 */
  209. .br60 {
  210. border-radius: 60rpx;
  211. }
  212. /* 初始化按钮 */
  213. page button {
  214. padding: 0;
  215. margin: 0;
  216. background-color: transparent;
  217. font-weight: normal;
  218. font-size: 28rpx;
  219. overflow: unset;
  220. margin-left: 0;
  221. margin-right: 0;
  222. }
  223. page button::after {
  224. border: none;
  225. }
  226. button[type=primary] {
  227. background-color: $-color-primary;
  228. }
  229. button[disabled][type=primary] {
  230. background-color: $-color-primary;
  231. opacity: 0.4;
  232. }
  233. .button-hover[type=primary] {
  234. background-color: $-color-primary;
  235. }
  236. /* 按钮大小 */
  237. button[size="xs"]{
  238. line-height: 58rpx;
  239. height: 58rpx;
  240. font-size: 26rpx;
  241. padding: 0 30rpx;
  242. }
  243. button[size="sm"] {
  244. line-height: 62rpx;
  245. height: 62rpx;
  246. font-size: 28rpx;
  247. padding: 0 30rpx;
  248. }
  249. button[size="md"]{
  250. line-height: 70rpx;
  251. height: 70rpx;
  252. font-size: 30rpx;
  253. padding: 0 30rpx;
  254. }
  255. button[size="lg"]{
  256. line-height: 80rpx;
  257. height: 80rpx;
  258. font-size: 32rpx;
  259. padding: 0 30rpx;
  260. }
  261. //******图标******/
  262. .icon-xs {
  263. @include icon-image(28rpx);
  264. }
  265. .icon-sm {
  266. @include icon-image(30rpx);
  267. }
  268. .icon {
  269. @include icon-image(34rpx);
  270. }
  271. .icon-md {
  272. @include icon-image(44rpx);
  273. }
  274. .icon-lg {
  275. @include icon-image(52rpx);
  276. }
  277. .icon-xl {
  278. @include icon-image(64rpx);
  279. }
  280. .icon-xxl {
  281. @include icon-image(120rpx);
  282. }
  283. .img-null {
  284. width: 300rpx;
  285. height: 300rpx;
  286. }
  287. /* 隐藏滚动条 */
  288. ::-webkit-scrollbar {
  289. width: 0;
  290. height: 0;
  291. color: transparent;
  292. }
  293. .w-full {
  294. width: 100% !important;
  295. }
  296. /*H5端时不渲染标题栏*/
  297. uni-page-head .uni-page-head-hd .uni-btn-icon{
  298. //display: none;
  299. color: #000000 !important;
  300. }
  301. uni-page-wrapper {
  302. //height: calc(100% - 50px - env(safe-area-inset-bottom)) !important;
  303. }
  304. //50px为底部导航栏的高度
  305. /* 定义常用的弹性布局 */
  306. .flex1{
  307. flex:1;
  308. }
  309. .flexnone {
  310. flex: none;
  311. }