style.vue.scss 3.1 KB

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