UI刚改的界面,代同事写,主要思路,给父级添加伪类即可,里面的字要定位,因为伪类也定位了
上代码
<view span="3" v-for="(item,index) in navlistwrap" :key='index'>
<view class="navItem" :class="activeIndex==index?'avtiveNav avtiveStyle':''" @click="changenav(index)">
<text class="navText">{{item.name}}</text>
</view>
</view >
css
.navItem {
display: flex;
display: -webkit-flex;
align-items: center;
justify-content: center;
height: 80rpx;
background: #5AB53C;
color: #ffffff;
position: relative;
}
.avtiveNav::after {
position: absolute;
left: 0;
top: 0;
display: block;
content: "";
width: 100%;
height: 100%;
border: 1px rgba(255, 255, 255, .2) solid;
border-bottom: none;
transform: scale(1.1, 1.5) perspective(.7em) rotateX(2.2deg);
background:#ffffff;
z-index: 1;
border-radius: 16rpx 16rpx 0 0;
box-sizing: border-box;
}
.avtiveStyle{
color:#5AB53C;
/* background:#5AB53C ; */
}