上图 布局
<div class="nav"> <router-link to='/goods' class='item-active'>点餐 <i class='line' v-show='ll'></i></router-link> <router-link to='/ratings' class='item-active'>评价 <i class='line'></i></router-link> <router-link to='/seller' class='item-active'>商品 <i class='line'></i></router-link> </div>css
.nav{display:flex;width:100%;height:40px;line-height:40px;border:1px solid #ccc; text-align:center;} .nav .item-active{flex:1;text-decoration:none;position:relative;} /* 选中样式 */ .nav .active{color:#ff0;} .nav .active .line{width:30px;height:4px;background:red;display:inline-block; position: absolute;left:50%;margin-left:-15px;bottom:0;}