uni.scss 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. @import "@/uni_modules/uni-scss/variables.scss";
  2. @import "animate.css/animate.css";
  3. // 字体图标
  4. @import "@/static/fonts/iconfont.css";
  5. // 主题色(绿色)
  6. $defaultColor: #49b856;
  7. // 红色
  8. $textColorRed: #ff3b53;
  9. // 黄色
  10. $textColorYellow: #F5A623;
  11. //数字字母不换行
  12. @mixin numbersAndLettersNoWrap {
  13. word-break: break-all;
  14. }
  15. //flex布局
  16. // $justifyContent 主轴对齐方式
  17. // $alignItem 交叉轴对齐方式
  18. // $flexDirection 方向
  19. @mixin flex(
  20. $justifyContent: flex-start,
  21. $alignItem: stretch,
  22. $flexDirection: row
  23. ) {
  24. display: flex;
  25. justify-content: $justifyContent;
  26. align-items: $alignItem;
  27. flex-direction: $flexDirection;
  28. }
  29. // 边框
  30. // $direction 方向
  31. @mixin border(
  32. $directive: all,
  33. $color:#E5E9ED,
  34. $style:solid
  35. ) {
  36. @if $directive == top {
  37. border-top: 1px $style $color;
  38. }
  39. @else if $directive == right {
  40. border-right: 1px $style $color;
  41. }
  42. @else if $directive == bottom {
  43. border-bottom: 1px $style $color;
  44. }
  45. @else if $directive == left {
  46. border-left: 1px $style $color;
  47. }
  48. @else {
  49. border: 1px $style $color;
  50. }
  51. }
  52. // 按钮背景色
  53. @mixin btn_background {
  54. background-image: linear-gradient(90deg,#72c172,#3bb197);
  55. }
  56. //底部凹弧形边
  57. @mixin arc_edge($height:200rpx) {
  58. overflow: hidden;
  59. height: $height;
  60. position: relative;
  61. background: $defaultColor;
  62. &::after {
  63. content: '';
  64. width: 110%;
  65. height: $height / 2;
  66. position: absolute;
  67. left: -5%;
  68. bottom: 0;
  69. border-radius: 50% 50% 0 0;
  70. background: #fff;
  71. }
  72. }
  73. //边框两边半圆装饰
  74. @mixin semicircle($backgroundColor:#f9fafb,$top:50%) {
  75. &::before {
  76. content: '';
  77. position: absolute;
  78. width: 16rpx;
  79. height: 32rpx;
  80. border-radius: 0 16rpx 16rpx 0;
  81. background-color: $backgroundColor;
  82. left: -1px;
  83. top: $top;
  84. transform: translateY(-50%);
  85. @include border;
  86. border-left: none;
  87. }
  88. &::after {
  89. content: '';
  90. position: absolute;
  91. width: 16rpx;
  92. height: 32rpx;
  93. border-radius: 16rpx 0 0 16rpx;
  94. background-color: $backgroundColor;
  95. right: -1px;
  96. top: $top;
  97. transform: translateY(-50%);
  98. @include border;
  99. border-right: none;
  100. }
  101. }
  102. // 省略
  103. @mixin clamp($clamp:1) {
  104. display: -webkit-box;
  105. -webkit-box-orient: vertical;
  106. -webkit-line-clamp: $clamp;
  107. overflow: hidden;
  108. text-overflow: ellipsis;
  109. word-break: break-all;
  110. }
  111. // --------------------------华丽的分割线---------------------------------------
  112. // 全局样式
  113. .uni-picker-action-confirm {
  114. color: $defaultColor !important;
  115. }
  116. .w100{
  117. width: 100%!important;
  118. }
  119. .red {
  120. color: $textColorRed!important;
  121. }
  122. .yellow {
  123. color: $textColorYellow!important;
  124. }
  125. .green {
  126. color: $defaultColor!important;
  127. }
  128. // 内置复选框 start
  129. .uni-label-pointer{
  130. @include flex;
  131. }
  132. uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
  133. border-color: $defaultColor;
  134. }
  135. .uni-checkbox-input-checked{
  136. color: $defaultColor !important;
  137. }
  138. // 内置复选框 end