底部带有小蓝条的选项卡

需求设计稿如图：

TIM截图20170831192305.png

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

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

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

实现代码

    <div class="tab">
        <span @click="Tab(1)" id="s1">产品介绍
            <div class="line" id="l1"></div>
        </span>
        <span @click="Tab(2)" id="s2">投保须知
            <div class="line" id="l2"></div>
        </span>
        <span @click="Tab(3)" id="s3">理赔流程
            <div class="line" id="l3"></div>
        </span>
        <span @click="Tab(4)" id="s4">常见问题
            <div class="line" id="l4"></div>
        </span>
    </div>

.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