app.scss 7.4 KB

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