底部带有小蓝条的选项卡

需求设计稿如图：

TIM截图20170831192305.png

实现 思路： 四个tab用flex布局 space around 实现
每个选项卡下面做一个高度为1px的小蓝线

通过定位将小蓝条定位到tab组件跟下面的组件的下边框的缝隙中

通过点击事件来控制元素的颜色，及小蓝线的显示

实现代码

    

        产品介绍
            

        
        投保须知
            

        
        理赔流程
            

        
        常见问题
            

        
    

.tab{
align-items: center;
color: black;
background-color: white;
width: 100%;
height: 80 * @r;
display: flex;
flex-direction: row;
justify-content: space-around;
border-bottom: 4px solid #FBFBFB;
.line{
width:20px;
margin-left: 15px;
height:1px;
padding-top:1px;
background-color:#3F86FF;
overflow:hidden;
position: relative;
top: 10px;
}
}

实现效果：

TIM截图20170831192851.png