default.scss 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198
  1. /* 页面左右间距 */
  2. $page-row-spacing: 30upx;
  3. $page-color-base: #f8f8f8;
  4. $page-color-light: #f8f6fc;
  5. $base-color: #1A78F6;
  6. /* 文字尺寸 */
  7. $font-sm: 24upx;
  8. $font-base: 28upx;
  9. $font-lg: 32upx;
  10. /*文字颜色*/
  11. $font-color-dark: #333333;
  12. $font-color-base: #666666;
  13. $font-color-light: #999999;
  14. $font-color-disabled: #C0C4CC;
  15. $font-color-spec: #1A78F6;
  16. /* 边框颜色 */
  17. $border-color-dark: #999999;
  18. $border-color-base: #0F40F5;
  19. $border-color-light: #FF9000;
  20. /* 图片加载中颜色 */
  21. $image-bg-color: #f5f5f5;
  22. /* 行为相关颜色 */
  23. $uni-color-primary:#1A78F6;
  24. $uni-color-success: #4cd964;
  25. $uni-color-warning: #f0ad4e;
  26. $uni-color-error: #dd524d;
  27. /*主要按钮背景色*/
  28. $uni-color-button: #d64d3b;
  29. //
  30. /*价格颜色*/
  31. $uni-color-word: #0F40F5;
  32. // 商城主题色
  33. $uni-color-main: #1A78F6;
  34. uni-page-head
  35. {
  36. display: none;
  37. }
  38. // 主题色
  39. $theme-color: #1A78F6;
  40. $light-color: #0F40F5;
  41. $negative-price-color: #1A78F6;
  42. $title-color: #111111; // 栏目颜色
  43. $text-color: #333333; // 主要内容颜色
  44. $desc-color: #999999; // 标题及次要内容字体颜色
  45. $icon-color: #666666;
  46. $bg-color: #F5F5F5;
  47. $other-color: #6c6c6c;
  48. // 文字溢出隐藏函数
  49. @mixin textOverflow ($w: 100%) {
  50. width: $w;
  51. overflow: hidden;
  52. text-overflow: ellipsis;
  53. white-space: nowrap;
  54. }
  55. @mixin textColumnOverflow ($clamp:2) {
  56. overflow: hidden;
  57. text-overflow: ellipsis;
  58. display:-webkit-box;
  59. -webkit-box-orient: vertical;
  60. -webkit-line-clamp: $clamp;
  61. }
  62. // 按钮函数
  63. @mixin btnGeneral($width:222upx, $height: 64upx, $bor:64upx) {
  64. border-radius: $bor;
  65. width: $width;
  66. height: $height;
  67. display: flex;
  68. justify-content: center;
  69. align-items: center;
  70. }
  71. // 灰色背景及文字
  72. @mixin bg-content {
  73. background-color: #f5f5f5;
  74. color: #6c6c6c;
  75. }
  76. @mixin between($items: center) {
  77. display: flex;
  78. justify-content: space-between;
  79. align-items: $items;
  80. }
  81. @mixin around($items: center) {
  82. display: flex;
  83. justify-content: space-around;
  84. align-items: $items;
  85. }
  86. @mixin flexStart($items: center) {
  87. display: flex;
  88. justify-content: flex-start;
  89. align-items: $items;
  90. }
  91. @mixin flexEnd($items: center) {
  92. display: flex;
  93. justify-content: flex-end;
  94. align-items: $items;
  95. }
  96. @mixin flexCenter($items: center) {
  97. display: flex;
  98. justify-content: center;
  99. align-items: $items;
  100. }
  101. @mixin boxShadow ($color: rgba(0,0,0,.3)) {
  102. box-shadow: 0 0 10upx $color;
  103. }
  104. // 底部安全距离
  105. // constant(safe-area-inset-bottom)
  106. // env(safe-area-inset-bottom)
  107. .bbline {
  108. border-bottom: 2upx solid #ececec;
  109. }
  110. // 大按钮 渐变色
  111. .big-button {
  112. background-image: linear-gradient(to right, #FF7001, #FF8805);
  113. color: #fff;
  114. @include btnGeneral(308upx);
  115. }
  116. // 小按钮 渐变色
  117. .small-button {
  118. background-image: linear-gradient(to right, #FF8D0E, #0F40F5);
  119. color: #fff;
  120. @include btnGeneral;
  121. }
  122. // 镂空按钮
  123. .hollow-button {
  124. border: 2upx solid #0F40F5;
  125. color: #0F40F5;
  126. @include btnGeneral;
  127. }
  128. // 主题标签色
  129. .primary-tag {
  130. border: 2upx solid #0F40F5;
  131. color: #0F40F5;
  132. @include btnGeneral(222upx, 64upx, 10upx);
  133. }
  134. // 高亮标签色
  135. .light-tag {
  136. border: 2upx solid #FF9000;
  137. color: #FF9000;
  138. @include btnGeneral(222upx, 64upx, 10upx);
  139. }
  140. // 次要标签色
  141. .desc-tag {
  142. border: 2upx solid #999999;
  143. color: #999999;
  144. @include btnGeneral(222upx, 64upx, 10upx);
  145. }
  146. // 带背景色主题标签
  147. .primary-tag {
  148. background-color: #0F40F5;
  149. color: #fff;
  150. @include btnGeneral(222upx, 64upx, 10upx);
  151. }
  152. // 带背景色高亮标签
  153. .light-bg-tag {
  154. background-color: #FF9000;
  155. color: #fff;
  156. @include btnGeneral(222upx, 64upx, 10upx);
  157. }
  158. // 蒙板颜色
  159. .uni-mark {
  160. background-color: rgba(190,190,190,.6);
  161. }
  162. // 折扣标签
  163. .disc {
  164. position: absolute;
  165. top: 0;
  166. left: 10upx;
  167. z-index: 2;
  168. background-color: $light-color;
  169. color: #fff;
  170. font-size: $font-sm;
  171. box-shadow: 0 0 10upx rgba(0,0,0,.5);
  172. padding: 0 10upx;
  173. border-radius: 0 0 10upx 10upx;
  174. }
  175. .price {
  176. color: #0F40F5;
  177. }