效果图
html
<view class="loginbox">
<view class="navbox">
<view :class="['nav', i === active ? 'active' : '']"
@click="activeChanged(i)" v-for="(item,i) in nav" :key="i" :style="style">
<view class="navact">
{{item}}
<view :class="['list', i === active ? 'active' : '']"></view>
</view>
</view>
<view class="active1" v-if="active===1"></view>
<view class="active0" v-if="active===0"></view>
</view>
</view>
js部分
export default {
data() {
return {
nav:['手机登录','密码登录'],
active:0,
style:'border-radius: 24rpx 60rpx 0 0;',
}
},
methods: {
activeChanged(i){
this.active = i
this.style=' border-radius: 24rpx 60rpx 0 0;'
if(i==1){
this.style='border-radius:60rpx 24rpx 0 0;'
}
},
}
}
css
.loginbox{
width: 686rpx;
height: 300rpx;
position: absolute;
top: 320rpx;
left: 32rpx;
border-radius: 24rpx;
background-color: rgba(255, 255, 255, 0.3);
}
.navbox{
width: 100%;
height: 88rpx;
display: flex;
}
.nav{
width: 50%;
height: 88rpx;
/* 行内块元素 */
display: flex;
font-size: 30rpx;
color: #999999;
/* 相对定位 */
position: relative;
align-items: center;
justify-content: center;
}
.nav.active{
width: 50%;
background-color: #FFF;
color: #FA6F41;
/* 块元素 */
display: flex;
/* 相对定位 */
position: relative;
align-items: center;
justify-content: center;
/* border-radius: 24rpx 60rpx 0 0; */
transform-origin: center bottom;
cursor: pointer;
}
.nav.active .list{
width: 48rpx;
height: 6rpx;
background-color: #FA6F41;
position: relative;
left: 31%;
}
.active1,.active0{
content: '';
position: absolute;
top:38rpx;
width: 25px;
height: 25px;
bottom: 0;
z-index: 998;
}
.active1{
left: 294rpx;
background: radial-gradient(circle at 0px 0,transparent 25px,#fff 25px);
}
.active0{
left: 50%;
background: radial-gradient(circle at 25px 0,transparent 25px,#fff 25px);
}