<view class='userperson'>
<view class='f30 flexca'>請選擇您的注冊身份</view>
<view class='select-only f30'>
<view class='flexa '>
<view class="so-3 flexca {{selectIndex==0?'active1':''}}" data-selectIndex='0' bindtap='selectFn'>
<view class="so-2 {{selectIndex==0?'active2':''}}"></view>
</view>
<text>老師</text>
</view>
<view class='flexa'>
<view class="so-3 flexca {{selectIndex==1?'active1':''}}" data-selectIndex='1' bindtap='selectFn'>
<view class="so-2 {{selectIndex==1?'active2':''}}"></view>
</view>
<text>校長</text>
</view>
<view class='flexa'>
<view class="so-3 flexca {{selectIndex==2?'active1':''}}" data-selectIndex='2' bindtap='selectFn'>
<view class="so-2 {{selectIndex==2?'active2':''}}"></view>
</view>
<text>普通用戶</text>
</view>
</view>
</view>
.userperson{
margin-top: 40rpx;
}
.userperson>view:first-child{
color: #14a1fd;
}
button{
margin-top: 70rpx;
width: 100%;
border-radius: 50rpx;
color: white;
">#14a1fd;
box-shadow: 0 0 4rpx 1rpx rgba(20,161,253,0.7)
}
.select-only{
width: 100%;
display: flex;
justify-content: space-between ;
align-items: center;
margin-top: 30rpx;
}
.so-3{
width: 36rpx;
height: 36rpx;
border-radius: 50%;
border: 1px solid #7C7C7C;
margin-right: 20rpx;
}
.so-2{
width: 24rpx;
height: 24rpx;
border-radius: 50%;
">transparent;
}
.select-only .active1{
border: 1px solid #14a1fd;
}
.select-only .active2{
">#14a1fd;
}
data:
selectIndex:0,
selectFn:function(e){
let selectIndex = e.currentTarget.dataset.selectindex;
this.setData({
selectIndex: selectIndex
})
},