3
0

common.scss 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. // @import './iconfont.css';
  2. $primary-color: rgba(#07c160,0.8);
  3. $active-color:#AFF2FD;;
  4. $sub_clor:#3491FA;
  5. $bg-color:#f5f5f5;
  6. $bg-color-2:#f5f6f8;
  7. $bg-color-3: #ecfbf4;
  8. $font-size-sm:30rpx;
  9. $font-size-xl:28rpx;
  10. $font-size-mxl:26rpx;
  11. $font-size-smm:24rpx;
  12. $font-size-smmm:22rpx;
  13. $sidebar-shadow:1px 1px 8px #{rgba(#1D2329,0.15)};
  14. $box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  15. $box-shadow-2: 0 0 3px rgba(0, 0, 0, 0.05);
  16. $text-one:#000000;
  17. $text-color:#262626;
  18. $text-color-sub:#889191;
  19. $sub-text-color:rgba(0, 0, 0, 0.65);
  20. $sm-color:rgba(0, 0, 0, 0.5);
  21. $border-color:#e1e1e1;
  22. @mixin flex-center {
  23. display: flex;
  24. justify-content: center;
  25. align-items: center;
  26. }
  27. @mixin wrap{
  28. word-wrap:break-word;
  29. word-spacing:normal;
  30. word-break: break-all;
  31. }
  32. /* 盒子布局 */
  33. .flx-center {
  34. display: flex;
  35. align-items: center;
  36. justify-content: center;
  37. }
  38. .flx-justify-between {
  39. display: flex;
  40. align-items: center;
  41. justify-content: space-between;
  42. }
  43. .flx-justify-end {
  44. display: flex;
  45. align-items: center;
  46. justify-content: flex-end;
  47. }
  48. .flx-align-center {
  49. display: flex;
  50. align-items: center;
  51. }
  52. .font-end {
  53. text-align: end;
  54. }
  55. /* 外边距、内边距全局样式 */
  56. @for $i from 6 through 30 {
  57. .m#{$i}{
  58. margin: #{$i}px !important;
  59. }
  60. .mt#{$i} {
  61. margin-top: #{$i}px !important;
  62. }
  63. .mr#{$i} {
  64. margin-right: #{$i}px !important;
  65. }
  66. .mb#{$i} {
  67. margin-bottom: #{$i}px !important;
  68. }
  69. .ml#{$i} {
  70. margin-left: #{$i}px !important;
  71. }
  72. .p#{$i}{
  73. padding: #{$i}px !important;
  74. }
  75. .pt#{$i} {
  76. padding-top: #{$i}px !important;
  77. }
  78. .pr#{$i} {
  79. padding-right: #{$i}px !important;
  80. }
  81. .pb#{$i} {
  82. padding-bottom: #{$i}px !important;
  83. }
  84. .pl#{$i} {
  85. padding-left: #{$i}px !important;
  86. }
  87. }
  88. .border_bottom{
  89. border-bottom:1rpx solid $border-color;
  90. }
  91. .section_icon{
  92. width: 6rpx;
  93. height: 36rpx;
  94. background-color: #000000;
  95. }
  96. // 多选样式
  97. .checkbox_box {
  98. display: flex;
  99. align-items: center;
  100. font-size: 24rpx;
  101. ::v-deep(.uni-checkbox-wrapper) {
  102. .uni-checkbox-input {
  103. border-radius: 50% !important;
  104. }
  105. }
  106. .checkbox_box_text{
  107. color: $text-color-sub;
  108. }
  109. .checkbox_box_supplementary{
  110. color: $primary-color;
  111. }
  112. }
  113. .content {
  114. position: relative;
  115. background: linear-gradient(32deg, #f7fbff, #f7fbff, rgb(0, 255, 255, 0.2));
  116. width: 100vw;
  117. height: 100vh;
  118. &::before {
  119. content: '';
  120. position: fixed;
  121. top: -30vw;
  122. right: 6vw;
  123. width: 50vw;
  124. height: 50vw;
  125. border-radius: 50%;
  126. background: rgb(0, 255, 255, 0.18);
  127. box-shadow: 0.3125rem 0.3125rem 20rem 20px rgba(0, 255, 255, 0.2);
  128. }
  129. }