.i-index { width: 100%; height: 100%; } .i-index-line { position: absolute; left: 0; width: 100%; height: 2rpx; background-color: #f7f7f7; top: 50%; } .i-index-content { background: #fff; position: relative; z-index: 1; display: inline-block; padding: 0 20rpx; } .i-index-fixed { position: fixed; right: 0; top: 50%; z-index: 10; padding-left: 20rpx; transform: translateY(-50%); } .i-index-fixed-item { display: block; height: 36rpx; line-height: 36rpx; padding: 0 10rpx; text-align: center; color: #595959; font-size: 24rpx; border-radius: 50%; } .i-index-fixed-item-current { background: #2d8cf0; color: #fff; } .i-index-tooltip { position: fixed; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); background: rgba(0, 0, 0, 0.7); color: #fff; font-size: 48rpx; border-radius: 50%; width: 160rpx; height: 160rpx; line-height: 160rpx; text-align: center; } .local-position-content { height: 160rpx; padding-left: 40rpx; display: flex; align-items: center; color: #999; background: #fff; font-size: 24rpx; } .local-position-content span { font-size: 40rpx; font-weight: bold; color: #9F99AA; margin-right: 8rpx; } .index-title { height: 70rpx; line-height: 70rpx; font-size: 26rpx; padding-left: 40rpx; color: #999; background: #f6f6f6; } .router-hover { opacity: 1; }