点餐系统的头部样式vue

最新推荐文章于 2024-07-01 17:46:18 发布

xiaoerlang715

最新推荐文章于 2024-07-01 17:46:18 发布

阅读量244

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/xiaoerlang715/article/details/90436556

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

上图
在这里插入图片描述
布局

 <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;}