app.scss 7.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563
  1. page,
  2. view,
  3. scroll-view,
  4. text,
  5. image,
  6. textarea,
  7. button,
  8. swiper,
  9. swiper-item,
  10. input {
  11. box-sizing: border-box;
  12. }
  13. view[hidden] {
  14. display: none !important;
  15. }
  16. page {
  17. background-color: $bg-color;
  18. height: 100%;
  19. font-size: $font-size-base;
  20. color: $text-color-base;
  21. }
  22. .container {
  23. width: 100%;
  24. height: 100%;
  25. }
  26. /*
  27. @font-face {
  28. font-family: "wenyue";
  29. src: url('static/images/fonts/WenYue-XinQingNianTi-NC-W8_1.otf');
  30. }
  31. @font-face {
  32. font-family: 'neutra';
  33. src: url('static/images/fonts/NeutraTextDemiAlt.otf');
  34. }
  35. .wenyue-font {
  36. font-family: 'wenyue';
  37. }
  38. .neutra-font {
  39. font-family: 'neutra';
  40. }
  41. */
  42. button {
  43. font-size: $font-size-base;
  44. border-radius: $border-radius-sm;
  45. &:after {
  46. border: 0;
  47. }
  48. &[type='primary'] {
  49. background-color: $color-primary;
  50. &[plain] {
  51. background-color: $bg-color-white;
  52. border: 2rpx solid $color-primary;
  53. color: $color-primary;
  54. }
  55. &.button-hover {
  56. background-color: rgba($color: $color-primary, $alpha: 0.6);
  57. }
  58. }
  59. &[type='default'] {
  60. color: $text-color-grey !important;
  61. border: 2rpx solid #ccc !important;
  62. background-color: $bg-color-white;
  63. }
  64. &[type='info'] {
  65. background-color: #343434;
  66. color: $bg-color-white !important;
  67. &.button-hover, &[disabled] {
  68. background-color: rgba($color: #343434, $alpha: 0.6);
  69. }
  70. }
  71. }
  72. .button-hover[type='primary'][plain] {
  73. border: 2rpx solid rgba($color: $color-primary, $alpha: 0.6);
  74. color: rgba($color: $color-primary, $alpha: 0.6);
  75. }
  76. uni-toast {
  77. z-index: 9999;
  78. }
  79. .uni-mask {
  80. z-index: 10000;
  81. }
  82. uni-modal .uni-modal {
  83. z-index: 10001;
  84. }
  85. .uni-picker-container {
  86. z-index: 10000;
  87. }
  88. .uni-picker-container .uni-picker {
  89. z-index: 10001;
  90. }
  91. .uni-picker-container .uni-picker-action.uni-picker-action-confirm {
  92. color: $color-primary;
  93. }
  94. .placeholder {
  95. font-size: $font-size-base;
  96. color: $text-color-assist;
  97. }
  98. .bg-base {
  99. background-color: $bg-color;
  100. }
  101. .bg-white {
  102. background-color: #ffffff;
  103. }
  104. .bg-transparent {
  105. background-color: transparent !important;
  106. }
  107. .bg-primary {
  108. background-color: $color-primary;
  109. }
  110. .bg-warning {
  111. background-color: $color-warning;
  112. }
  113. .d-flex {
  114. display: flex;
  115. }
  116. .d-none {
  117. display: none !important;
  118. }
  119. .invisible {
  120. visibility: hidden !important;
  121. }
  122. .d-inline {
  123. display: inline !important;
  124. }
  125. .d-inline-block {
  126. display: inline-block !important;
  127. }
  128. .d-block {
  129. display: block !important;
  130. }
  131. .flex-column {
  132. -ms-flex-direction: column !important;
  133. flex-direction: column !important;
  134. }
  135. .justify-content-start {
  136. justify-content: flex-start;
  137. }
  138. .justify-content-end {
  139. justify-content: flex-end;
  140. }
  141. .justify-content-between {
  142. justify-content: space-between;
  143. }
  144. .just-content-center {
  145. justify-content: center;
  146. }
  147. .justify-content-evenly {
  148. justify-content: space-evenly !important;
  149. }
  150. .just-content-around {
  151. justify-content: space-around;
  152. }
  153. .align-items-start {
  154. align-items: flex-start;
  155. }
  156. .align-items-end {
  157. align-items: flex-end;
  158. }
  159. .align-items-center {
  160. align-items: center;
  161. }
  162. .align-items-between {
  163. align-items: space-between;
  164. }
  165. .align-items-around {
  166. align-items: space-around;
  167. }
  168. .align-items-stretch {
  169. align-items: stretch;
  170. }
  171. .align-items-baseline {
  172. -ms-flex-align: baseline !important;
  173. align-items: baseline !important;
  174. }
  175. .flex-fill {
  176. -ms-flex: 1 1 auto !important;
  177. flex: 1 1 auto !important;
  178. }
  179. .flex-wrap {
  180. -ms-flex-wrap: wrap !important;
  181. flex-wrap: wrap !important;
  182. }
  183. .flex-nowrap {
  184. -ms-flex-wrap: nowrap !important;
  185. flex-wrap: nowrap !important;
  186. }
  187. .flex-shrink-0 {
  188. -ms-flex-negative: 0 !important;
  189. flex-shrink: 0 !important;
  190. }
  191. .font-size-base {
  192. font-size: $font-size-base;
  193. }
  194. .font-size-extra-sm {
  195. font-size: $font-size-extra-sm;
  196. }
  197. .font-size-sm {
  198. font-size: $font-size-sm;
  199. }
  200. .font-size-medium {
  201. font-size: $font-size-medium;
  202. }
  203. .font-size-lg {
  204. font-size: $font-size-lg;
  205. }
  206. .font-size-extra-lg {
  207. font-size: $font-size-extra-lg;
  208. }
  209. .text-color-base {
  210. color: $text-color-base;
  211. }
  212. .text-color-assist {
  213. color: $text-color-assist;
  214. }
  215. .text-color-primary {
  216. color: $color-primary;
  217. }
  218. .text-color-warning {
  219. color: $text-color-warning;
  220. }
  221. .text-color-grey {
  222. color: $text-color-grey;
  223. }
  224. .text-color-danger {
  225. color: $color-error;
  226. }
  227. .text-color-white {
  228. color: #ffffff;
  229. }
  230. .text-color-warning {
  231. color: $color-warning;
  232. }
  233. .text-truncate {
  234. overflow: hidden;
  235. text-overflow: ellipsis;
  236. white-space: nowrap;
  237. }
  238. .font-weight-bold {
  239. font-weight: 700 !important;
  240. }
  241. .font-weight-light {
  242. font-weight: 300 !important;
  243. }
  244. .font-weight-lighter {
  245. font-weight: lighter !important;
  246. }
  247. .font-weight-normal {
  248. font-weight: 400 !important;
  249. }
  250. .overflow-auto {
  251. overflow: auto !important;
  252. }
  253. .overflow-hidden {
  254. overflow: hidden !important;
  255. }
  256. .position-relative {
  257. position: relative !important;
  258. }
  259. .position-absolute {
  260. position: absolute !important;
  261. }
  262. .position-fixed {
  263. position: fixed !important;
  264. }
  265. .fixed-top {
  266. position: fixed;
  267. top: 0;
  268. right: 0;
  269. left: 0;
  270. z-index: 1030;
  271. }
  272. .fixed-bottom {
  273. position: fixed;
  274. right: 0;
  275. bottom: 0;
  276. left: 0;
  277. z-index: 1030;
  278. }
  279. .line-height-100 {
  280. line-height: 100%;
  281. }
  282. .line-height-1 {
  283. line-height: 1rem !important;
  284. }
  285. .line-height-2 {
  286. line-height: 2rem !important;
  287. }
  288. .line-height-50 {
  289. line-height: 50rem !important;
  290. }
  291. .w-25 {
  292. width: 25% !important;
  293. }
  294. .w-50 {
  295. width: 50% !important;
  296. }
  297. .w-75 {
  298. width: 75% !important;
  299. }
  300. .w-80 {
  301. width: 80% !important;
  302. }
  303. .w-90 {
  304. width: 90% !important;
  305. }
  306. .w-100 {
  307. width: 100% !important;
  308. }
  309. .h-100 {
  310. height: 100% !important;
  311. }
  312. .h-auto {
  313. height: auto !important;
  314. }
  315. .text-left {
  316. text-align: left !important;
  317. }
  318. .text-right {
  319. text-align: right !important;
  320. }
  321. .text-center {
  322. text-align: center !important;
  323. }
  324. .border-box {
  325. box-sizing: border-box;
  326. }
  327. .rounded-circle {
  328. border-radius: 50% !important;
  329. }
  330. .rounded-pill {
  331. border-radius: 50rem !important;
  332. }
  333. .border-radius-base {
  334. border-radius: $border-radius-base;
  335. }
  336. .border-radius-lg {
  337. border-radius: $border-radius-lg;
  338. }
  339. .pre-line {
  340. white-space: pre-line;
  341. }
  342. .align-top {
  343. vertical-align: top !important;
  344. }
  345. .align-middle {
  346. vertical-align: middle !important;
  347. }
  348. .align-bottom {
  349. vertical-align: bottom !important;
  350. }
  351. .align-text-bottom {
  352. vertical-align: text-bottom !important;
  353. }
  354. .align-text-top {
  355. vertical-align: text-top !important;
  356. }
  357. .w-60 {
  358. width: 60%;
  359. }
  360. .w-40 {
  361. width: 40%;
  362. }
  363. .mb-10 {
  364. margin-bottom: 10rpx;
  365. }
  366. .mb-20 {
  367. margin-bottom: 20rpx;
  368. }
  369. .mb-30 {
  370. margin-bottom: 30rpx;
  371. }
  372. .mb-40 {
  373. margin-bottom: 40rpx;
  374. }
  375. .mb-50 {
  376. margin-bottom: 50rpx;
  377. }
  378. .mt-20 {
  379. margin-top: 20rpx;
  380. }
  381. .mt-30 {
  382. margin-top: 30rpx;
  383. }
  384. .mt-40 {
  385. margin-top: 40rpx;
  386. }
  387. .ml-10 {
  388. margin-left: 10rpx;
  389. }
  390. .ml-20 {
  391. margin-left: 20rpx;
  392. }
  393. .ml-30 {
  394. margin-left: 30rpx;
  395. }
  396. .ml-40 {
  397. margin-left: 40rpx;
  398. }
  399. .mr-10 {
  400. margin-right: 10rpx;
  401. }
  402. .mr-20 {
  403. margin-right: 20rpx;
  404. }
  405. .mr-30 {
  406. margin-right: 30rpx;
  407. }
  408. .mr-40 {
  409. margin-right: 40rpx;
  410. }
  411. .pl-30 {
  412. padding-left: 30rpx;
  413. }
  414. .pt-30 {
  415. padding-top: 30rpx;
  416. }
  417. .pt-40 {
  418. padding-top: 40rpx;
  419. }
  420. .pb-30 {
  421. padding-bottom: 30rpx;
  422. }
  423. .pb-40 {
  424. padding-bottom: 40rpx;
  425. }
  426. .p-20 {
  427. padding: 20rpx;
  428. }
  429. .p-30 {
  430. padding: 30rpx;
  431. }
  432. .opacity-6 {
  433. opacity: 0.6;
  434. }