<!-- 导航 -->
<scroll-view class="navs" scroll-x>
<view class="navs-view">
<view class="navs-item" v-for="item in navs">
<view class="title">{{item.title}}</view>
</view>
</view>
</scroll-view>
.navs{
width: 100%;
white-space:nowrap;
.navs-view{
display: flex;
.navs-item{
width: 560rpx;
height: 110rpx;
line-height: 110rpx;
padding: 0 20rpx;
color: rgb(119, 119, 119);
font-weight: 700;
position:relative;
.title{
font-size: 35rpx;
}
}
.navs-item:hover{
color: #000;
}
.navs-item:hover:after{
content: "";
position: absolute;
left: 35%;
bottom: 0;
width: 30%;
height: 10rpx;
border-bottom: 10rpx solid rgb(76, 88, 190);
border-radius: 50rpx;
box-sizing: border-box;
}
}
}
版权声明:本文为asfcyg原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。