custom.scss 6.3 KB

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