实现如图效果,按钮左右滑动
代码如下:
<template><div class="container"><div class="rate_tip"><span class="slider" :class="{ activeds: isRateActive == 'month' }">111</span><spanstyle="z-index: 66":class="{ actived: isRateActive == 'week' }"@click="isRateActive = 'week'">按周</span><spanstyle="z-index: 66":class="{ actived: isRateActive == 'month' }"@click="isRateActive = 'month'">按月</span></div></div></template><script setup lang="ts">import { ref } from 'vue'const isRateActive = ref('')</script><style scoped lang="scss">.rate_tip {position: absolute;display: flex;align-items: center;border-radius: 20px;padding: 2px 2px;background-color: rgba(32, 16, 128, 0.76);filter: brightness(90%);span {cursor: pointer;font-size: 12px;display: inline-block;padding: 2px 24px;color: #fff;}.slider {color: #fff;transition: all 0.5s;border-radius: 20px;display: inline-block;padding: 2px 24px;position: absolute;background-color: rgb(245, 244, 244);}.actived {color: #2e045f;border-radius: 20px;z-index: 99;font-weight: 600;}.activeds {margin-left: 75px;}}</style>
