theme.scss 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. /**
  2. * 主题色配置
  3. * 默认在 uni.scss 全局引入:@import '@/theme.scss';
  4. * <script> 下使用主题变量:import x from '@/theme.scss';
  5. */
  6. // 主颜色
  7. $app-theme-color: #38C148;
  8. $app-theme-light-color: #38C148;
  9. $app-theme-deep-color: #20a333;
  10. $app-theme-blue: #2979ff;
  11. // 背景色
  12. $app-theme-bg-color: #ffffff;
  13. $app-theme-bg-gray-color: #fafafa;
  14. $app-theme-bg-gray-deep-color: #f8f8f8;
  15. $app-theme-search-bg-color: #F4F5F8;
  16. // 内容色
  17. $app-theme-border-color: #efefef;
  18. $app-theme-text-color: #333333;
  19. $app-theme-text-gray-color: #8f92a1;
  20. $app-theme-card-gray-light-color: #cccccc;
  21. $app-theme-card-gray-deep-color: #696969;
  22. $app-theme-text-white-color: #ffffff;
  23. $app-theme-text-black-color: #171717;
  24. $app-theme-text-black-deep-color: #16162e;
  25. $app-theme-text-money-color: #f00;
  26. $app-theme-text-gray-white-color: #c3c6cb;
  27. // 特殊位置
  28. $app-theme-navbar-tab-color: #696969;
  29. $app-theme-navbar-tab-color-active: #333333;
  30. $app-theme-card-gray-color: #8f92a1;
  31. $app-theme-sku-gray-color: #f5f5f8;
  32. $app-theme-shop-gray-color: #888e98;
  33. $app-theme-points-sign-bg-color: #f0f0f0;
  34. $app-theme-points-sign-label-bg-color: #dfdfdf;
  35. $app-theme-points-sign-value-color: #696969;
  36. $app-theme-points-yellow-color: #f9a906;
  37. $app-theme-points-blue-color: #22ac38;
  38. // 加入购物车背景色
  39. $app-theme-joincart-bg-color: #ff7900;
  40. // 立即购买背景色
  41. $app-theme-buybtn-bg-color: #ed3f14;
  42. // 已售罄背景色
  43. $app-theme-nobuy-bg-color: #aaa;
  44. // 背景色
  45. $app-theme-shadow: 0px 2px 8px 0px rgba(27, 25, 86, 0.06);
  46. // z-index值
  47. $app-zIndex-deep: 0;
  48. $app-zIndex-normal: 19;
  49. $app-zIndex-absolute: 99;
  50. $app-zIndex-fixed: 199;
  51. $app-zIndex-page: 999;
  52. // 全局.page
  53. .page {
  54. // min-height: 100vh;
  55. background-color: $app-theme-bg-gray-deep-color;
  56. font-family: PingFangSC;
  57. }
  58. .safeAreaPad{
  59. padding-bottom: constant(safe-area-inset-bottom);
  60. padding-bottom: env(safe-area-inset-bottom);
  61. box-sizing: content-box;
  62. }
  63. // 全局.slot
  64. .slot {
  65. }
  66. :export {
  67. appThemeColor: $app-theme-color;
  68. appThemeBgColor: $app-theme-bg-color;
  69. appThemeBgGrayColor: $app-theme-bg-gray-color;
  70. appThemeBgGrayDeppColor: $app-theme-bg-gray-deep-color;
  71. appThemeSearchBgColor: $app-theme-search-bg-color;
  72. appThemeBorderColor: $app-theme-border-color;
  73. appThemeTextColor: $app-theme-text-color;
  74. appThemeTextGrayColor: $app-theme-text-gray-color;
  75. appThemeTextGrayLightColor: $app-theme-card-gray-light-color;
  76. appThemeTextGrayDeepColor: $app-theme-card-gray-deep-color;
  77. appThemeTextWhiteColor: $app-theme-text-white-color;
  78. appThemeTextBlackColor: $app-theme-text-black-color;
  79. appThemeTextBlackDeepColor: $app-theme-text-black-deep-color;
  80. appThemeTextMoneyColor: $app-theme-text-money-color;
  81. appThemeTextGrayWhiteColor: $app-theme-text-gray-white-color;
  82. appThemeSkuGrayColor: $app-theme-sku-gray-color;
  83. appThemeCardGrayColor: $app-theme-card-gray-color;
  84. appThemeShopGrayColor: $app-theme-shop-gray-color;
  85. appThemePointsSignBgColor: $app-theme-points-sign-bg-color;
  86. appThemePointsSignLabelColor: $app-theme-points-sign-label-bg-color;
  87. appThemePointsSignValueColor: $app-theme-points-sign-value-color;
  88. appThemePointsSignYellowColor: $app-theme-points-yellow-color;
  89. appThemePointsSignBlueColor: $app-theme-points-blue-color;
  90. appThemeNavbarTabColor: $app-theme-navbar-tab-color;
  91. appThemeNavbarTabColorActive: $app-theme-navbar-tab-color-active;
  92. appThemeShadow: $app-theme-shadow;
  93. appZIndexDeep: $app-zIndex-deep;
  94. appZIndexNormal: $app-zIndex-normal;
  95. appZIndexAbsolute: $app-zIndex-absolute;
  96. appZIndexFixed: $app-zIndex-fixed;
  97. appZIndexPage: $app-zIndex-page;
  98. appThemeBuyBtnBgColor:$app-theme-buybtn-bg-color;
  99. }