style.vue.scss 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. page {
  2. color: $u-main-color;
  3. font-size: 28rpx;
  4. }
  5. /* start--去除webkit的默认样式--start */
  6. .u-fix-ios-appearance {
  7. -webkit-appearance:none;
  8. }
  9. /* end--去除webkit的默认样式--end */
  10. /* start--icon图标外层套一个view,让其达到更好的垂直居中的效果--start */
  11. .u-icon-wrap {
  12. display: flex;
  13. align-items: center;
  14. }
  15. /* end-icon图标外层套一个view,让其达到更好的垂直居中的效果--end */
  16. /* start--iPhoneX底部安全区定义--start */
  17. .safe-area-inset-bottom {
  18. padding-bottom: 0;
  19. padding-bottom: constant(safe-area-inset-bottom);
  20. padding-bottom: env(safe-area-inset-bottom);
  21. }
  22. /* end-iPhoneX底部安全区定义--end */
  23. /* start--各种hover点击反馈相关的类名-start */
  24. .u-hover-class {
  25. // background-color: #f7f8f9!important;
  26. opacity: 0.6;
  27. }
  28. .u-cell-hover {
  29. background-color: #f7f8f9!important;
  30. }
  31. /* end--各种hover点击反馈相关的类名--end */
  32. /* start--文本行数限制--start */
  33. .u-line-1 {
  34. overflow: hidden;
  35. white-space: nowrap;
  36. text-overflow: ellipsis;
  37. }
  38. .u-line-2 {
  39. -webkit-line-clamp: 2;
  40. }
  41. .u-line-3 {
  42. -webkit-line-clamp: 3;
  43. }
  44. .u-line-4 {
  45. -webkit-line-clamp: 4;
  46. }
  47. .u-line-5 {
  48. -webkit-line-clamp: 5;
  49. }
  50. .u-line-2, .u-line-3, .u-line-4, .u-line-5 {
  51. overflow: hidden;
  52. word-break: break-all;
  53. text-overflow: ellipsis;
  54. display: -webkit-box; // 弹性伸缩盒
  55. -webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
  56. }
  57. /* end--文本行数限制--end */
  58. /* start--Retina 屏幕下的 1px 边框--start */
  59. .u-border,
  60. .u-border-bottom,
  61. .u-border-left,
  62. .u-border-right,
  63. .u-border-top,
  64. .u-border-top-bottom {
  65. position: relative
  66. }
  67. .u-border-bottom:after,
  68. .u-border-left:after,
  69. .u-border-right:after,
  70. .u-border-top-bottom:after,
  71. .u-border-top:after,
  72. .u-border:after {
  73. /* #ifndef APP-NVUE */
  74. content: ' ';
  75. /* #endif */
  76. position: absolute;
  77. left: 0;
  78. top: 0;
  79. pointer-events: none;
  80. box-sizing: border-box;
  81. -webkit-transform-origin: 0 0;
  82. transform-origin: 0 0;
  83. // 多加0.1%,能解决有时候边框缺失的问题
  84. width: 199.8%;
  85. height: 199.7%;
  86. transform: scale(0.5, 0.5);
  87. border: 0 solid $u-border-color;
  88. z-index: 2;
  89. }
  90. .u-border-top:after {
  91. border-top-width: 1px
  92. }
  93. .u-border-left:after {
  94. border-left-width: 1px
  95. }
  96. .u-border-right:after {
  97. border-right-width: 1px
  98. }
  99. .u-border-bottom:after {
  100. border-bottom-width: 1px
  101. }
  102. .u-border-top-bottom:after {
  103. border-width: 1px 0
  104. }
  105. .u-border:after {
  106. border-width: 1px
  107. }
  108. /* end--Retina 屏幕下的 1px 边框--end */
  109. /* start--clearfix--start */
  110. .u-clearfix:after,
  111. .clearfix:after {
  112. /* #ifndef APP-NVUE */
  113. content: '';
  114. /* #endif */
  115. display: table;
  116. clear: both
  117. }
  118. /* end--clearfix--end */
  119. /* start--高斯模糊tabbar底部处理--start */
  120. .u-blur-effect-inset {
  121. width: 750rpx;
  122. height: var(--window-bottom);
  123. background-color: #FFFFFF;
  124. }
  125. /* end--高斯模糊tabbar底部处理--end */
  126. /* start--提升H5端uni.toast()的层级,避免被uView的modal等遮盖--start */
  127. /* #ifdef H5 */
  128. uni-toast {
  129. z-index: 10090;
  130. }
  131. uni-toast .uni-toast {
  132. z-index: 10090;
  133. }
  134. /* #endif */
  135. /* end--提升H5端uni.toast()的层级,避免被uView的modal等遮盖--end */
  136. /* start--去除button的所有默认样式--start */
  137. .u-reset-button {
  138. padding: 0;
  139. font-size: inherit;
  140. line-height: inherit;
  141. background-color: transparent;
  142. color: inherit;
  143. }
  144. .u-reset-button::after {
  145. border: none;
  146. }
  147. /* end--去除button的所有默认样式--end */