需求设计稿如图：
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
