index.wxss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. .wux-index {
  2. width: 100%;
  3. position: relative;
  4. overflow: hidden
  5. }
  6. .wux-index__nav {
  7. position: fixed;
  8. top: 50%;
  9. right: 0;
  10. transform: translate3d(0,-50%,0);
  11. cursor: pointer;
  12. -webkit-user-select: none;
  13. -moz-user-select: none;
  14. user-select: none;
  15. text-align: center
  16. }
  17. .wux-index__nav-row {
  18. display: flex;
  19. flex-direction: column;
  20. justify-content: center;
  21. align-items: center;
  22. flex-shrink: 0;
  23. height: 100%;
  24. width: 100%;
  25. position: relative;
  26. line-height: 32rpx;
  27. font-size: 24rpx
  28. }
  29. .wux-index__nav-col {
  30. padding: 6rpx 12rpx;
  31. line-height: inherit;
  32. font-size: inherit
  33. }
  34. .wux-index__nav-item {
  35. display: inline-flex;
  36. width: 32rpx;
  37. height: 32rpx;
  38. line-height: inherit;
  39. font-size: inherit;
  40. justify-content: center;
  41. align-items: center
  42. }
  43. .wux-index__nav-item--current {
  44. color: #fff;
  45. background-color: #33cd5f;
  46. border-radius: 50%
  47. }
  48. .wux-index__indicator {
  49. width: 100rpx;
  50. height: 100rpx;
  51. line-height: 100rpx;
  52. text-align: center;
  53. background-color: rgba(0,0,0,.7);
  54. border-radius: 12rpx;
  55. color: #fff;
  56. font-size: 48rpx
  57. }
  58. .wux-index__indicator--center {
  59. position: fixed;
  60. top: 50%;
  61. left: 50%;
  62. transform: translate3d(-50%,-50%,0)
  63. }
  64. .wux-index__indicator--right {
  65. position: absolute;
  66. top: calc(22rpx);
  67. right: 100%;
  68. border-radius: 50%;
  69. transform: translateY(-50%);
  70. margin-right: calc(30rpx);
  71. background-color: #33cd5f
  72. }
  73. .wux-index__indicator--right::before {
  74. position: absolute;
  75. width: 100%;
  76. height: 100%;
  77. border-radius: 50% 0 50% 50%;
  78. content: '';
  79. background-color: inherit;
  80. left: 0;
  81. top: 0;
  82. transform: rotate(45deg);
  83. z-index: -1
  84. }