index.scss 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. // 引入公共基础类
  2. @import "./libs/css/common.scss";
  3. @import "./libs/css/color.scss";
  4. page {
  5. color: $u-main-color;
  6. font-size: 28rpx;
  7. }
  8. image {
  9. display: inline-block;
  10. // 解决图片加载时可能会瞬间变形的问题
  11. will-change: transform;
  12. }
  13. view,
  14. text {
  15. box-sizing: border-box;
  16. flex-direction: row;
  17. }
  18. /* start--去除webkit的默认样式--start */
  19. .u-fix-ios-appearance {
  20. -webkit-appearance:none;
  21. }
  22. /* end--去除webkit的默认样式--end */
  23. /* start--icon图标外层套一个view,让其达到更好的垂直居中的效果--start */
  24. .u-icon-wrap {
  25. display: flex;
  26. align-items: center;
  27. }
  28. /* end-icon图标外层套一个view,让其达到更好的垂直居中的效果--end */
  29. /* start--微信小程序编译后页面有组件名的元素,特别处理--start */
  30. /* #ifdef MP-WEIXIN */
  31. u-td, u-th {
  32. flex: 1;
  33. align-self: stretch;
  34. }
  35. .u-td {
  36. height: 100%;
  37. }
  38. u-icon {
  39. display: flex;
  40. align-items: center;
  41. }
  42. // 各家小程序宫格组件外层设置为100%,避免受到父元素display: flex;的影响
  43. u-grid {
  44. width: 100%;
  45. flex: 0 0 100%;
  46. }
  47. /* #endif */
  48. /* end-微信小程序编译后页面有组件名的元素,特别处理--end */
  49. /* start--iPhoneX底部安全区定义--start */
  50. .safe-area-inset-bottom {
  51. padding-bottom: 0;
  52. padding-bottom: constant(safe-area-inset-bottom);
  53. padding-bottom: env(safe-area-inset-bottom);
  54. }
  55. /* end-iPhoneX底部安全区定义--end */
  56. /* start--各种hover点击反馈相关的类名-start */
  57. .u-hover-class {
  58. // background-color: #f7f8f9!important;
  59. opacity: 0.6;
  60. }
  61. .u-cell-hover {
  62. background-color: #f7f8f9!important;
  63. }
  64. /* end--各种hover点击反馈相关的类名--end */
  65. /* start--文本行数限制--start */
  66. .u-line-1 {
  67. overflow: hidden;
  68. white-space: nowrap;
  69. text-overflow: ellipsis;
  70. }
  71. .u-line-2 {
  72. -webkit-line-clamp: 2;
  73. }
  74. .u-line-3 {
  75. -webkit-line-clamp: 3;
  76. }
  77. .u-line-4 {
  78. -webkit-line-clamp: 4;
  79. }
  80. .u-line-5 {
  81. -webkit-line-clamp: 5;
  82. }
  83. .u-line-2, .u-line-3, .u-line-4, .u-line-5 {
  84. overflow: hidden;
  85. word-break: break-all;
  86. text-overflow: ellipsis;
  87. display: -webkit-box; // 弹性伸缩盒
  88. -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
  89. }
  90. /* end--文本行数限制--end */
  91. /* start--Retina 屏幕下的 1px 边框--start */
  92. .u-border,
  93. .u-border-bottom,
  94. .u-border-left,
  95. .u-border-right,
  96. .u-border-top,
  97. .u-border-top-bottom {
  98. position: relative
  99. }
  100. .u-border-bottom:after,
  101. .u-border-left:after,
  102. .u-border-right:after,
  103. .u-border-top-bottom:after,
  104. .u-border-top:after,
  105. .u-border:after {
  106. content: ' ';
  107. position: absolute;
  108. left: 0;
  109. top: 0;
  110. pointer-events: none;
  111. box-sizing: border-box;
  112. -webkit-transform-origin: 0 0;
  113. transform-origin: 0 0;
  114. // 多加0.1%,能解决有时候边框缺失的问题
  115. width: 199.8%;
  116. height: 199.7%;
  117. transform: scale(0.5, 0.5);
  118. border: 0 solid $u-border-color;
  119. z-index: 2;
  120. }
  121. .u-border-top:after {
  122. border-top-width: 1px
  123. }
  124. .u-border-left:after {
  125. border-left-width: 1px
  126. }
  127. .u-border-right:after {
  128. border-right-width: 1px
  129. }
  130. .u-border-bottom:after {
  131. border-bottom-width: 1px
  132. }
  133. .u-border-top-bottom:after {
  134. border-width: 1px 0
  135. }
  136. .u-border:after {
  137. border-width: 1px
  138. }
  139. /* end--Retina 屏幕下的 1px 边框--end */
  140. /* start--clearfix--start */
  141. .u-clearfix:after,
  142. .clearfix:after {
  143. content: "";
  144. display: table;
  145. clear: both
  146. }
  147. /* end--clearfix--end */
  148. /* start--演示页面使用的统一样式--start */
  149. .u-demo {
  150. padding: 50rpx 40rpx;
  151. }
  152. .u-demo-wrap {
  153. border: 1px dashed #ddd;
  154. background-color: rgb(250, 250, 250);
  155. padding: 40rpx 20rpx;
  156. border-radius: 6px;
  157. }
  158. .u-demo-area {
  159. text-align: center;
  160. }
  161. .u-no-demo-here {
  162. color: $u-tips-color;
  163. font-size: 26rpx;
  164. }
  165. .u-demo-result-line {
  166. border: 1px dashed #ddd;
  167. padding: 10rpx 40rpx;
  168. margin-top: 30rpx;
  169. border-radius: 5px;
  170. background-color: rgb(240, 240, 240);
  171. color: $u-content-color;
  172. display: inline-block;
  173. font-size: 32rpx;
  174. transition: all 0.35s;
  175. word-break: break-word;
  176. text-align: left;
  177. }
  178. .u-demo-title,
  179. .u-config-title {
  180. text-align: center;
  181. font-size: 32rpx;
  182. font-weight: bold;
  183. margin-bottom: 40rpx;
  184. }
  185. .u-config-item {
  186. margin-top: 50rpx;
  187. }
  188. .u-config-title {
  189. margin-top: 40rpx;
  190. padding-bottom: 10rpx;
  191. }
  192. .u-item-title {
  193. position: relative;
  194. font-size: 28rpx;
  195. padding-left: 8px;
  196. line-height: 1;
  197. margin-bottom: 22rpx;
  198. }
  199. .u-item-title:after {
  200. position: absolute;
  201. width: 4px;
  202. top: -1px;
  203. height: 16px;
  204. content: '';
  205. left: 0;
  206. border-radius: 10px;
  207. background-color: $u-content-color;
  208. }
  209. /* end--演示页面使用的统一样式--end */
  210. /* start--高斯模糊tabbar底部处理--start */
  211. .u-blur-effect-inset {
  212. width: 750rpx;
  213. height: var(--window-bottom);
  214. background-color: #FFFFFF;
  215. }
  216. /* end--高斯模糊tabbar底部处理--end */