<div class="search-box">
<div
v-for="item in state.tapsList"
:key="item.value"
:class="[item.value == state.activeIndex ? 'active' : '']"
:style="{
borderTopLeftRadius: item.value == 1 ? '8px' : '0',
borderBottomLeftRadius: item.value == 1 ? '8px' : '0',
borderTopRightRadius: item.value == 4 ? '8px' : '0',
borderBottomRightRadius: item.value == 4 ? '8px' : '0',
}"
@click="changeTap(item)"
>
{{ item.name }}
</div>
</div>
.search-box {
font-weight: 400;
font-size: 13px;
color: #686666;
width: calc(100% - 32px);
display: flex;
align-items: center;
box-sizing: border-box;
justify-content: center;
background: #ffffff;
border-top: 1px solid #f7f8f9;
height: 32px;
border-radius: 8px;
// border: 1px solid #e1e1e1;
margin: 0 auto;
box-sizing: border-box;
box-shadow: 0px 1px 4px 0px #e1e1e1;
> div {
flex: 1;
align-items: center;
display: flex;
justify-content: center;
height: 100%;
position: relative;
&:not(.active)::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
right: -1px; // 保证当前选中的可以覆盖他右边框 这个很重要
border-right: 1px solid #e1e1e1;
}
&:last-child::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
right: 0px;
border-right: 0px solid #e1e1e1;
}
}
.active {
background: rgba(63, 133, 251, 0.05);
color: #3f85fb;
border: 1px solid #3f85fb;
z-index: 100;
&::after{
content: '';
width: 100%;
height: 100%;
position: absolute;
}
}
}