.wux-index { width: 100%; position: relative; overflow: hidden } .wux-index__nav { position: fixed; top: 50%; right: 0; transform: translate3d(0,-50%,0); cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; text-align: center } .wux-index__nav-row { display: flex; flex-direction: column; justify-content: center; align-items: center; flex-shrink: 0; height: 100%; width: 100%; position: relative; line-height: 32rpx; font-size: 24rpx } .wux-index__nav-col { padding: 6rpx 12rpx; line-height: inherit; font-size: inherit } .wux-index__nav-item { display: inline-flex; width: 32rpx; height: 32rpx; line-height: inherit; font-size: inherit; justify-content: center; align-items: center } .wux-index__nav-item--current { color: #fff; background-color: #33cd5f; border-radius: 50% } .wux-index__indicator { width: 100rpx; height: 100rpx; line-height: 100rpx; text-align: center; background-color: rgba(0,0,0,.7); border-radius: 12rpx; color: #fff; font-size: 48rpx } .wux-index__indicator--center { position: fixed; top: 50%; left: 50%; transform: translate3d(-50%,-50%,0) } .wux-index__indicator--right { position: absolute; top: calc(22rpx); right: 100%; border-radius: 50%; transform: translateY(-50%); margin-right: calc(30rpx); background-color: #33cd5f } .wux-index__indicator--right::before { position: absolute; width: 100%; height: 100%; border-radius: 50% 0 50% 50%; content: ''; background-color: inherit; left: 0; top: 0; transform: rotate(45deg); z-index: -1 }