style.less 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. body {
  2. margin: 0;
  3. padding: 0;
  4. font-family: HarmonyOS Sans SC;
  5. &::-webkit-scrollbar {
  6. width: 4px;
  7. height: 4px;
  8. }
  9. &::-webkit-scrollbar-thumb {
  10. background-color: @info;
  11. border-radius: 3px;
  12. }
  13. }
  14. @primary: #409eff;
  15. @info: #c8c9cc;
  16. @theme: #1E8FFB;
  17. @tabbarBG: #FFFFFF;
  18. @black: #000000;
  19. @placeholderColor: rgba(0, 0, 0, 0.3);
  20. @btnTheme: #1093ff;
  21. @listColor: #999999;
  22. @warning: #e6a23c;
  23. @white: #FFFFFF;
  24. // 文字颜色
  25. @text-slate-gray: #838383;
  26. // 背景颜色
  27. @ba-pearl-white: #f6f6f6;
  28. @ba-sky-blue: #007fff;
  29. :global {}
  30. .finger {
  31. cursor: pointer;
  32. }
  33. .size(@size: 32rpx) {
  34. font-size: @size;
  35. }
  36. .flex() {
  37. display: flex;
  38. }
  39. .hor(@position: center) {
  40. .flex();
  41. justify-content: @position;
  42. }
  43. .ver(@position: center) {
  44. .flex();
  45. align-items: @position;
  46. }
  47. .flex_center {
  48. .flex();
  49. justify-content: center;
  50. align-items: center;
  51. }
  52. .flex_position(@xposition: center, @yposition: center) {
  53. .hor(@xposition);
  54. align-items: @yposition;
  55. }
  56. .ellipsis(@line: 1) {
  57. overflow: hidden;
  58. text-overflow: ellipsis;
  59. display: -webkit-box;
  60. -webkit-box-orient: vertical;
  61. -webkit-line-clamp: @line;
  62. }
  63. .blocked {
  64. display: block;
  65. }
  66. .btn_block(@color, @size: 40px) {
  67. .flex_center();
  68. .finger();
  69. background-color: @color;
  70. border-radius: var(--el-border-radius-base);
  71. border: 1px solid @color;
  72. height: 40px;
  73. font-size: var(--el-font-size-base);
  74. color: #fff;
  75. >span.text {
  76. margin-left: 8px;
  77. }
  78. &:hover {
  79. background-color: lighten(@color, 20%);
  80. border-color: lighten(@color, 20%);
  81. }
  82. &:active {
  83. background-color: darken(@color, 20%);
  84. border-color: darken(@color, 20%);
  85. }
  86. }
  87. .dashed {
  88. border: 1px dashed var(--bor-color1);
  89. margin: 26rpx 0;
  90. }