uni.scss 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  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. height: $height;
  59. position: relative;
  60. background: $defaultColor;
  61. &::after {
  62. content: '';
  63. width: 110%;
  64. height: $height / 2;
  65. position: absolute;
  66. left: -5%;
  67. bottom: 0;
  68. border-radius: 50% 50% 0 0;
  69. background: #fff;
  70. }
  71. }
  72. //边框两边半圆装饰
  73. @mixin semicircle($backgroundColor:#f9fafb,$top:50%) {
  74. &::before {
  75. content: '';
  76. position: absolute;
  77. width: 16rpx;
  78. height: 32rpx;
  79. border-radius: 0 16rpx 16rpx 0;
  80. background-color: $backgroundColor;
  81. left: -1px;
  82. top: $top;
  83. transform: translateY(-50%);
  84. @include border;
  85. border-left: none;
  86. }
  87. &::after {
  88. content: '';
  89. position: absolute;
  90. width: 16rpx;
  91. height: 32rpx;
  92. border-radius: 16rpx 0 0 16rpx;
  93. background-color: $backgroundColor;
  94. right: -1px;
  95. top: $top;
  96. transform: translateY(-50%);
  97. @include border;
  98. border-right: none;
  99. }
  100. }
  101. // 省略
  102. @mixin clamp($clamp:1) {
  103. display: -webkit-box;
  104. -webkit-box-orient: vertical;
  105. -webkit-line-clamp: $clamp;
  106. overflow: hidden;
  107. text-overflow: ellipsis;
  108. word-break: break-all;
  109. }
  110. // --------------------------华丽的分割线---------------------------------------
  111. // 全局样式
  112. .w100{
  113. width: 100%!important;
  114. }
  115. .red {
  116. color: $textColorRed!important;
  117. }
  118. .yellow {
  119. color: $textColorYellow!important;
  120. }
  121. .green {
  122. color: $defaultColor!important;
  123. }
  124. // 内置复选框 start
  125. .uni-label-pointer{
  126. @include flex;
  127. }
  128. uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
  129. border-color: $defaultColor;
  130. }
  131. .uni-checkbox-input-checked{
  132. color: $defaultColor !important;
  133. }
  134. // 内置复选框 end