custom.scss 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240
  1. /** 宽高 */
  2. .i-w-400{width: 25rem;}
  3. .i-w-600{width: 37.5rem;}
  4. .i-w-p10{width: 10%;}
  5. .i-w-p12{width: 12%;}
  6. .i-w-p15{width: 15%;}
  7. .i-w-p20{width: 20%;}
  8. .i-w-p30{width: 30%;}
  9. .i-w-p33{width: 33%;}
  10. .i-w-p34{width: 34%;}
  11. .i-w-p40{width: 40%;}
  12. .i-w-p50{width: 50%;}
  13. .i-w-p60{width: 60%;}
  14. .i-w-p63{width: 63%;}
  15. .i-w-p65{width: 65%;}
  16. .i-w-p70{width: 70%;}
  17. .i-w-p80{width: 80%;}
  18. .i-w-p90{width: 90%;}
  19. .i-w-p96{width: 96%;}
  20. .i-w-p98{width: 98%;}
  21. .i-w-p100{width: 100%;}
  22. .i-w-v100{width: 100vw;}
  23. .i-h-60{height: 3.75rem;}
  24. .i-h-80{height: 5.00rem;}
  25. .i-h-100{height: 6.25rem;}
  26. .i-h-110{height: 6.88rem;}
  27. .i-h-200{height: 12.50rem;}
  28. .i-h-250{height: 15.63rem;}
  29. .i-h-300{height: 18.75rem;}
  30. .i-h-350{height: 21.88rem;}
  31. .i-h-380{height: 23.75rem;}
  32. .i-h-400{height: 25rem;}
  33. .i-h-600{height: 37.5rem;}
  34. .i-h-800{height: 50rem;}
  35. .i-h-p10{height: 10%;}
  36. .i-h-p12{height: 12%;}
  37. .i-h-p14{height: 14%;}
  38. .i-h-p15{height: 15%;}
  39. .i-h-p16{height: 16%;}
  40. .i-h-p17{height: 17%;}
  41. .i-h-p20{height: 20%;}
  42. .i-h-p30{height: 30%;}
  43. .i-h-p35{height: 35%;}
  44. .i-h-p40{height: 40%;}
  45. .i-h-p50{height: 50%;}
  46. .i-h-p60{height: 60%;}
  47. .i-h-p70{height: 70%;}
  48. .i-h-p80{height: 80%;}
  49. .i-h-p84{height: 84%;}
  50. .i-h-p85{height: 85%;}
  51. .i-h-p90{height: 90%;}
  52. .i-h-p100{height: 100%;}
  53. .i-h-v100{height: 100vh;}
  54. /** 宽高 */
  55. /** 外边距 */
  56. .i-m-0auto{margin: 0 auto;}
  57. .i-m-10{margin: 0.625rem;}
  58. .i-mt-10{margin-top: 0.625rem;}
  59. .i-mt-16{margin-top: 1rem;}
  60. .i-mt-26{margin-top: 1.625rem;}
  61. .i-mt-34{margin-top: 2.125rem;}
  62. .i-mt-64{margin-top: 4rem;}
  63. .i-mt-p5{margin-top: 5%;}
  64. .i-mt-p10{margin-top: 10%;}
  65. .i-ml-10{margin-left: 0.625rem;}
  66. .i-ml-18{margin-left: 1.125rem;}
  67. .i-ml-20{margin-left: 1.25rem;}
  68. .i-mr-10{margin-right: 0.625rem;}
  69. .i-mr-18{margin-right: 1.125rem;}
  70. .i-mr-20{margin-right: 1.25rem;}
  71. .i-mr-30{margin-right: 1.875rem;}
  72. .i-mr-60{margin-right: 3.75rem;}
  73. /** 外边距 */
  74. /** 内边距 */
  75. .i-p-2{padding: 0.13rem;}
  76. .i-ptb-5{padding-top: 0.31rem;padding-bottom: 0.31rem;}
  77. .i-ptb-10{padding-top: 0.625rem;padding-bottom: 0.625rem;}
  78. .i-ptb-14{padding-top: 0.875rem;padding-bottom: 0.875rem;}
  79. .i-ptb-16{padding-top: 1rem; padding-bottom: 1rem;}
  80. .i-ptb-18{padding-top: 1.125rem; padding-bottom: 1.125rem;}
  81. .i-ptb-20{padding-top: 1.25rem; padding-bottom: 1.25rem;}
  82. .i-ptb-30{padding-top: 1.875rem; padding-bottom: 1.875rem;}
  83. .i-plr-10{padding-left: 0.625rem; padding-right: 0.625rem;}
  84. .i-plr-14{padding-left: 0.875rem; padding-right: 0.875rem;}
  85. .i-plr-20{padding-left: 1.25rem; padding-right: 1.25rem;}
  86. .i-plr-25{padding-left: 1.56rem; padding-right: 1.56rem;}
  87. .i-plr-30{padding-left: 1.88rem; padding-right: 1.88rem;}
  88. .i-plr-60{padding-left: 3.75rem; padding-right: 3.75rem;}
  89. .i-plr-80{padding-left: 5rem; padding-right: 5rem;}
  90. .i-plr-160{padding-left: 10rem; padding-right: 10rem;}
  91. /** 内边距 */
  92. /** 背景颜色 */
  93. .i-b-c-fff{background-color: #fff;}
  94. .i-b-c-000{background-color: #000;}
  95. .i-b-c-F7F7F7{background-color: #F7F7F7;}
  96. .i-b-c-D7E6FB{background-color: #D7E6FB;}
  97. .i-b-c-037B7D{background-color: #037B7D;}
  98. .i-b-c-B42346{background-color: #B42346;}
  99. /** 背景颜色 */
  100. /** 渐变背景色 */
  101. .i-b-c-1{background: linear-gradient(180deg, rgba(4,109,95,1) 0%,rgba(15, 194, 205,1) 100%);}
  102. .i-b-c-2{background: linear-gradient(0deg, rgba(4,109,95,1) 10%,rgba(15, 194, 205,1) 100%);}
  103. .i-b-c-3{background: linear-gradient(180deg, rgba(4, 147, 162,1) 10%,rgba(8, 114, 118,1) 100%);}
  104. /** 渐变背景色 */
  105. /** 阴影 */
  106. .i-shadow-b1{box-shadow: inset 0rem -0.1rem 0.25rem #000;}
  107. /** 阴影 */
  108. /** 文字阴影 */
  109. .i-t-shadow-b1{text-shadow: 0rem 0.1rem 0.1rem #000;}
  110. /** 文字阴影 */
  111. /** 文字颜色 */
  112. .i-c-fff{color: #fff;}
  113. .i-c-D7E6FB{color: #D7E6FB;}
  114. .i-c-F24507{color: #F24507;}
  115. .i-c-FF5834{color: #FF5834;}
  116. .i-c-5C616F{color: #5C616F;}
  117. .i-c-052345{color: #052345;}
  118. /** 文字颜色 */
  119. /** 文字大小 */
  120. .i-fs-10{font-size: 0.625rem;}
  121. .i-fs-20{font-size: 1.25rem;}
  122. .i-fs-26{font-size: 1.625rem;}
  123. .i-fs-28{font-size: 1.75rem;}
  124. .i-fs-30{font-size: 1.875rem;}
  125. .i-fs-40{font-size: 2.5rem;}
  126. .i-fs-46{font-size: 2.875rem;}
  127. .i-fs-50{font-size:3.125rem;}
  128. .i-fs-60{font-size: 3.75rem;}
  129. .i-fs-70{font-size: 4.375rem;}
  130. /** 文字大小 */
  131. /** 文字加粗 */
  132. .i-fw-bold{font-weight: bold;}
  133. /** 文字加粗 */
  134. /** 文字对齐 */
  135. .i-t-center{text-align: center;}
  136. .i-t-end{text-align: end;}
  137. /** 文字对齐 */
  138. /** 字间距 */
  139. .i-letter-10{letter-spacing: 0.625rem;}
  140. /** 字间距 */
  141. /** 边框 */
  142. .i-bd-1{border: #fff solid 0.2rem;}
  143. .i-bd-2{border: #0FC2CD solid 0.2rem;}
  144. .i-bd-3{border: #000000 solid 0.1rem;}
  145. /** 边框 */
  146. /** 圆角 */
  147. .i-radius-p10{border-radius: 10%;}
  148. .i-radius-p20{border-radius: 20%;}
  149. .i-radius-p50{border-radius: 50%;}
  150. .i-radius-10{border-radius: 0.625rem;}
  151. .i-radius-16{border-radius: 1rem;}
  152. .i-radius-20{border-radius: 1.25rem;}
  153. .i-radius-30{border-radius: 1.88rem;}
  154. .i-radius-40{border-radius: 2.50rem;}
  155. .i-radius-t20{border-top-left-radius: 1.25rem;border-top-right-radius: 1.25rem;}
  156. .i-radius-t40{border-top-left-radius: 2.5rem;border-top-right-radius: 2.5rem;}
  157. .i-radius-l8{border-top-left-radius: 0.5rem;border-bottom-left-radius: 0.5rem;}
  158. .i-radius-l10{border-top-left-radius: 0.625rem;border-bottom-left-radius: 0.625rem;}
  159. .i-radius-l16{border-top-left-radius: 1rem;border-bottom-left-radius: 1rem;}
  160. .i-radius-l70{border-top-left-radius: 4.75rem;border-bottom-left-radius: 4.75rem;}
  161. /** 圆角 */
  162. /** 定位 */
  163. .i-pst-r{position: relative;}
  164. .i-pst-a{position: absolute;}
  165. .i-pst-f{position: fixed;}
  166. .i-t-0{top: 0;}
  167. .i-t-150{top: 150rpx;}
  168. .i-t-180{top: 180rpx;}
  169. .i-t-260{top: 260rpx;}
  170. .i-t-p5{top: 5%;}
  171. .i-t-p10{top: 10%;}
  172. .i-t-p15{top: 15%;}
  173. .i-t-p20{top: 20%;}
  174. .i-t-p35{top: 35%;}
  175. .i-t-p50{top: 50%;}
  176. .i-t-0p50{top: -50%;}
  177. .i-b-0{bottom: 0;}
  178. .i-b-p15{bottom: 15%;}
  179. .i-b-p25{bottom: 25%;}
  180. .i-b-p35{bottom: 35%;}
  181. .i-b-150{bottom: 150rpx;}
  182. .i-l-p10{left: 10%;}
  183. .i-l-p11{left: 11%;}
  184. .i-l-p12{left: 12%;}
  185. .i-l-p15{left: 15%;}
  186. .i-l-p20{left: 20%;}
  187. .i-r-p10{right: 10%;}
  188. .i-r-p20{right: 20%;}
  189. .i-r-p21{right: 21%;}
  190. .i-r-p22{right: 22%;}
  191. .i-r-p30{right: 30%;}
  192. /** 定位 */
  193. /** 布局 */
  194. .i-inline-flex{display: inline-flex;}
  195. .i-wrap{flex-wrap: wrap;}
  196. .i-flex{display: flex;}
  197. .i-flex-drt-column{flex-direction: column;}
  198. .i-jst-center{justify-content: center;}
  199. .i-jst-space-between{justify-content: space-between;}
  200. .i-jst-space-around{justify-content: space-around;}
  201. .i-jst-space-evenly{justify-content: space-evenly;}
  202. // .i-jst-flex-end{justify-content: flex-end;}
  203. .i-jst-flex-end{justify-content: flex-end;}
  204. .i-al-center{align-items: center;}
  205. .i-al-flex-end{align-items: flex-end;}
  206. /** 布局 */
  207. /** 画布 */
  208. .i-z-index01{z-index: -1;}
  209. .i-z-index1{z-index: 1;}
  210. .i-z-index2{z-index: 2;}
  211. .i-z-index3{z-index: 3;}
  212. /** 画布 */
  213. /** 杂项 */
  214. .i-white-space-nowrap{white-space:nowrap;}
  215. .i-of-x-scroll{overflow-x: scroll;}
  216. .i-cp{cursor: pointer;}
  217. .i-of-scroll{overflow: scroll;-ms-overflow-style: none;
  218. scrollbar-width: none;}
  219. /** 杂项 */