index.less 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. @import (reference) './variable.less';
  2. .@{guideTourPrefix} {
  3. &-button {
  4. width: 100%;
  5. position: absolute;
  6. left: 0;
  7. bottom: @guide-tour-button-bottom;
  8. z-index: @guide-tour-z-index-3;
  9. display: flex;
  10. justify-content: center;
  11. .ant-button:nth-of-type(1) {
  12. color: @guide-tour-text-color;
  13. background-color: transparent;
  14. box-shadow: inset 0 0 0 @border-width-standard @COLOR_BORDER_DEFAULT;
  15. }
  16. .ant-button:nth-of-type(2) {
  17. color: @COLOR_TEXT_PRIMARY_DEFAULT;
  18. background-color: @COLOR_WHITE_DEFAULT;
  19. box-shadow: none;
  20. }
  21. .ant-button {
  22. margin: 0 12 * @rpx;
  23. width: 152 * @rpx;
  24. }
  25. }
  26. &-indicator {
  27. width: 100%;
  28. position: absolute;
  29. bottom: @guide-tour-dot-bottom;
  30. left: 50%;
  31. transform: translateX(-50%);
  32. z-index: @guide-tour-z-index-2;
  33. display: flex;
  34. justify-content: center;
  35. &-dot {
  36. margin: 0 3 * @rpx;
  37. background-color: @guide-tour-dot-color;
  38. width: @guide-tour-dot-size;
  39. height: @guide-tour-dot-size;
  40. border-radius: @guide-tour-dot-border-radius;
  41. &-active {
  42. width: @guide-tour-dot-active-width;
  43. background-color: @guide-tour-text-color;
  44. }
  45. }
  46. }
  47. &-clear {
  48. position: fixed;
  49. top: 80 * @rpx;
  50. right: 40 * @rpx;
  51. z-index: @guide-tour-z-index-3;
  52. font-size: 56 * @rpx;
  53. color: @guide-tour-clear-color;
  54. }
  55. &-item {
  56. z-index: @guide-tour-z-index-2;
  57. position: fixed;
  58. top: 0;
  59. left: 0;
  60. }
  61. &-swiper {
  62. z-index: @guide-tour-z-index-2;
  63. position: fixed;
  64. top: 0;
  65. left: 0;
  66. }
  67. }